#152 - change layout

* #5 - (js) Bump vue from 3.2.21 to 3.2.37

Bumps [vue](https://github.com/vuejs/core) from 3.2.21 to 3.2.37.
- [Release notes](https://github.com/vuejs/core/releases)
- [Changelog](https://github.com/vuejs/core/blob/main/CHANGELOG.md)
- [Commits](https://github.com/vuejs/core/compare/v3.2.21...v3.2.37)

---
updated-dependencies:
- dependency-name: vue
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* - npm dependencies update July 2022

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>

app/Eloquent/Models/Resume.php

@@ -31,6 +31,7 @@ class Resume extends Model
         "technologies" => AsCollection::class,
         "projects" => AsCollection::class,
     ];
+    protected $perPage = 50;
 
     public function user(): BelongsTo
     {

app/Eloquent/Models/User.php

@@ -46,6 +46,7 @@ class User extends Authenticatable implements NotifiableInterface
     protected $with = [
         "profile",
     ];
+    protected $perPage = 50;
 
     public function profile(): HasOne
     {

app/Eloquent/Models/VacationRequest.php

@@ -49,6 +49,7 @@ class VacationRequest extends Model
         "to" => "date",
         "event_ids" => AsCollection::class,
     ];
+    protected $perPage = 50;
 
     public function user(): BelongsTo
     {

composer.json

@@ -9,7 +9,7 @@
         "ext-pdo": "*",
         "ext-redis": "*",
         "azuyalabs/yasumi": "^2.4",
-        "barryvdh/laravel-dompdf": "^1.0",
+        "barryvdh/laravel-dompdf": "^2.0",
         "fruitcake/laravel-cors": "^3.0",
         "guzzlehttp/guzzle": "^7.0.1",
         "inertiajs/inertia-laravel": "^0.6.2",

docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   web:
-    image: nginx:1.21-alpine
+    image: nginx:1.23-alpine
     container_name: toby-web
     working_dir: /application
     volumes:
@@ -76,7 +76,7 @@ services:
     restart: unless-stopped
 
   node:
-    image: node:18.1.0-alpine3.14
+    image: node:18.4.0-alpine3.16
     container_name: toby-node
     working_dir: /application
     volumes:

package.json

@@ -13,7 +13,7 @@
         "lintf": "./node_modules/.bin/eslint resources/js --ext .js,.vue --fix"
     },
     "dependencies": {
-        "@headlessui/vue": "^1.6.4",
+        "@headlessui/vue": "^1.6.5",
         "@heroicons/vue": "^1.0.6",
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
@@ -21,27 +21,27 @@
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/line-clamp": "^0.4.0",
         "@tailwindcss/typography": "^0.5.2",
-        "@vue/compiler-sfc": "^3.2.31",
+        "@vue/compiler-sfc": "^3.2.37",
         "autoprefixer": "^10.4.7",
         "axios": "^0.27.2",
-        "echarts": "^5.3.2",
+        "echarts": "^5.3.3",
         "flatpickr": "^4.6.13",
-        "laravel-mix": "^6.0.44",
+        "laravel-mix": "^6.0.49",
         "lodash": "^4.17.21",
-        "luxon": "^2.3.2",
+        "luxon": "^2.4.0",
         "postcss": "^8.4.14",
-        "tailwindcss": "^3.0.24",
+        "tailwindcss": "^3.1.4",
-        "vue": "3.2.21",
+        "vue": "3.2.37",
-        "vue-echarts": "^6.0.2",
+        "vue-echarts": "^6.1.0",
         "vue-flatpickr-component": "^9.0.6",
         "vue-loader": "^17.0.0",
-        "vue-material-design-icons": "^5.0.0",
+        "vue-material-design-icons": "^5.1.1",
         "vue-toastification": "^2.0.0-rc.5",
         "vue3-popper": "^1.5.0",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
-        "eslint": "^8.16.0",
+        "eslint": "^8.19.0",
-        "eslint-plugin-vue": "^9.1.0"
+        "eslint-plugin-vue": "^9.1.1"
     }
 }

resources/js/Pages/Dashboard.vue

@@ -8,9 +8,6 @@
         :approved-vacations="approvedVacations"
         :pending-vacations="pendingVacations"
       />
-      <VacationStats :stats="stats" />
-    </div>
-    <div class="grid grid-cols-1 gap-4">
       <PendingVacationRequests
         v-if="can.listAllVacationRequests"
         :requests="vacationRequests.data"
@@ -19,6 +16,9 @@
         v-else
         :requests="vacationRequests.data"
       />
+    </div>
+    <div class="grid grid-cols-1 gap-4">
+      <VacationStats :stats="stats" />
       <AbsenceList
         v-if="years.current.year === years.selected.year && absences.data.length"
         :absences="absences.data"

resources/js/Pages/VacationRequest/Create.vue

@@ -297,8 +297,8 @@
               <button
                 type="submit"
                 class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                :class="[form.processing || !isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                :disabled="form.processing || !form.isDirty"
+                :disabled="form.processing || !isDirty"
               >
                 Zapisz
               </button>
@@ -359,6 +359,13 @@ const form = useForm({
   flowSkipped: false,
 })
 
+let isDirty = ref(false)
+
+watch(form, formData => {
+  const { from, to } = formData.data()
+  isDirty.value = formData.isDirty || from !== null || to !== null
+}, { immediate: true, deep: true })
+
 refreshEstimatedDays(form.from, form.to)
 
 const estimatedDays = ref([])

resources/js/Shared/Widgets/Calendar/DayComponent.vue

@@ -1,6 +1,21 @@
 <template>
   <div
-    :class="[ (day.isVacation || day.isPendingVacation) && `border-b-2 border-dashed ${getVacationBorder(day)}` ]"
+    class="box-border"
+    :class="[
+      day.isCurrentMonth ? {
+        'bg-red-100': day.isWeekend,
+        'bg-white hover:bg-blumilk-25': !day.isWeekend && !day.isHoliday,
+        'bg-red-100 text-red-800': day.isHoliday || day.isWeekend
+      } : [
+        'bg-gray-50 text-gray-500',
+        {
+          'bg-red-50': day.isWeekend
+        }
+      ],
+      day.isHoliday && 'font-bold cursor-default',
+      (day.isPendingVacation) && `border-b-4 border-dashed ${day.getVacationType.border}`,
+      (day.isVacation) && `border-b-4 ${day.getVacationType.border}`
+    ]"
   >
     <Popper
       v-if="day.isHoliday"
@@ -10,27 +25,6 @@
       offset-distance="0"
       @mouseover.passive="onMouseover"
       @mouseleave="onMouseleave"
-    >
-      <time
-        :datetime="day.date"
-        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white', 'text-red-600' ]"
-      >
-        {{ day.dayNumber }}
-      </time>
-      <template #content>
-        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
-          {{ getHolidayDescription(day) }}
-        </div>
-      </template>
-    </Popper>
-    <Popper
-      v-else-if="day.isPendingVacation"
-      as="div"
-      open-delay="200"
-      hover
-      offset-distance="0"
-      @mouseover.passive="onMouseover"
-      @mouseleave="onMouseleave"
     >
       <time
         :datetime="day.date"
@@ -39,14 +33,44 @@
         {{ day.dayNumber }}
       </time>
       <template #content>
-        <VacationPopup :vacation="getVacationInfo(day)" />
+        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
+          {{ day.getHolidayInfo }}
+        </div>
+      </template>
+    </Popper>
+    <Popper
+      v-else-if="day.isVacation || day.isPendingVacation"
+      as="div"
+      open-delay="200"
+      hover
+      offset-distance="0"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <div class="flex justify-between">
+        <time
+          :datetime="day.date"
+          :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
+        >
+          {{ day.dayNumber }}
+        </time>
+        <div class="hidden md:inline-block">
+          <VacationIcon
+            :type="day.getVacationType.value"
+          />
+        </div>
+      </div>
+      <template #content>
+        <VacationPopup :vacation="day.getVacationInfo" />
       </template>
     </Popper>
     <div
       v-else-if="day.isWeekend"
+      class="text-red-800"
     >
       <time
         :datetime="day.date"
+        class="cursor-default"
         :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
       >
         {{ day.dayNumber }}
@@ -73,21 +97,13 @@
 import Popper from 'vue3-popper'
 import { defineProps, ref } from 'vue'
 import VacationPopup from '@/Shared/VacationPopup'
+import VacationIcon from '@/Shared/VacationTypeCalendarIcon'
 
 defineProps({
   day: {
     type: Object,
     required: true,
   },
-  getHolidayDescription: {
-    type: Function,
-  },
-  getVacationBorder: {
-    type: Function,
-  },
-  getVacationInfo: {
-    type: Function,
-  },
 })
 
 const isActive = ref(false)

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -7,11 +7,10 @@
       <div class="flex justify-center">
         <div class="flex items-center rounded-md shadow-sm md:items-stretch">
           <button
-            v-if="calendarState.isPrevious"
             type="button"
-            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 py-2 pl-3 pr-4 text-gray-400 focus:relative md:w-9 md:px-2"
-            :class="{ 'rounded-r-md border-r md:rounded-r-none md:border-r-0': !calendarState.isNext }"
+            :class="[ calendarState.isPrevious ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
-            @click="toLast"
+            @click="toPrevious"
           >
             <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
             <ChevronLeftIcon
@@ -22,20 +21,18 @@
           <button
             type="button"
             class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
-            :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
             @click="goToToday"
           >
             Dzisiaj
           </button>
           <span
             class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
-            :class="{ 'hidden': !calendarState.isPrevious || !calendarState.isNext }"
           />
           <button
-            v-if="calendarState.isNext"
             type="button"
-            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 py-2 pl-4 pr-3 text-gray-400 focus:relative md:w-9 md:px-2"
-            :class="{ 'rounded-l-md border-l md:rounded-l-none md:border-l-0': !calendarState.isPrevious }"
+            :class="[ calendarState.isNext ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
+            :disabled="!calendarState.isNext"
             @click="toNext"
           >
             <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
@@ -99,25 +96,25 @@
         v-if="calendarState.viewMode.isMonth"
         class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
       >
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Pn
         </div>
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Wt
         </div>
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Śr
         </div>
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Cz
         </div>
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Pt
         </div>
-        <div class="bg-red-100 py-2">
+        <div class="py-2 bg-red-100 text-red-800">
           Sb
         </div>
-        <div class="bg-red-100 py-2">
+        <div class="py-2 bg-red-100 text-red-800">
           Nd
         </div>
       </div>
@@ -131,10 +128,7 @@
             :key="index"
             :day="day"
             class="flex flex-col relative py-2 px-3"
-            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', { 'hover:bg-blumilk-25': day.isCurrentMonth && !day.isWeekend }, { 'day': calendarState.viewMode.isWeek }, { 'bg-red-100': day.isCurrentMonth && day.isWeekend }, { 'bg-red-50': !day.isCurrentMonth && day.isWeekend }, { 'text-red-800': day.isWeekend }]"
+            :class="{ 'day': calendarState.viewMode.isWeek }"
-            :get-holiday-description="getHolidayDescription"
-            :get-vacation-border="getVacationBorder"
-            :get-vacation-info="getVacationInfo"
           />
         </div>
       </div>
@@ -237,15 +231,22 @@ const customCalendar = {
   },
   prepareDay(day) {
     const isCurrentMonth = isInCurrentMonth(day)
-    return {
+    const startDay = {
       date: day.toISODate(),
-      dayNumber: day.day,
-      isCurrentMonth: isCurrentMonth,
-      isToday: isToday(day),
-      isWeekend: isWeekend(day),
-      isHoliday: isHoliday(day),
       isVacation: isCurrentMonth && isVacation(day),
       isPendingVacation: isCurrentMonth && isPendingVacation(day),
+      isHoliday: isHoliday(day),
+    }
+
+    return {
+      ...startDay,
+      dayNumber: day.day,
+      isCurrentMonth,
+      isToday: isToday(day),
+      isWeekend: isWeekend(day),
+      getHolidayInfo: startDay.isHoliday ? getHolidayInfo(startDay) : undefined,
+      getVacationType: startDay.isVacation || startDay.isPendingVacation ? getVacationType(startDay) : undefined,
+      getVacationInfo: startDay.isVacation || startDay.isPendingVacation ? getVacationInfo(startDay) : undefined,
     }
   },
 }
@@ -256,18 +257,22 @@ watch([calendar.viewMode, calendar.currents], () => {
 
 customCalendar.loadCalendar()
 
-function toLast() {
+function toPrevious() {
-  if (calendar.viewMode.value === 'week')
+  if (calendarState.isPrevious) {
-    minusWeek()
+    if (calendar.viewMode.value === 'week')
-  else
+      minusWeek()
-    minusMonth()
+    else
+      minusMonth()
+  }
 }
 
 function toNext() {
-  if (calendar.viewMode.value === 'week')
+  if (calendarState.isNext) {
-    addWeek()
+    if (calendar.viewMode.value === 'week')
-  else
+      addWeek()
-    addMonth()
+    else
+      addMonth()
+  }
 }
 
 function resetCalendar(config = {}) {
@@ -349,7 +354,7 @@ function isHoliday(date) {
   return props.holidays[date.toISODate()] !== undefined
 }
 
-function getHolidayDescription(day) {
+function getHolidayInfo(day) {
   return props.holidays[day.date]
 }
 
@@ -361,8 +366,8 @@ function isPendingVacation(date) {
   return props.pendingVacations[date.toISODate()] !== undefined
 }
 
-function getVacationBorder(day) {
+function getVacationType(day) {
-  return findType(getVacationInfo(day).type)?.border
+  return findType(getVacationInfo(day).type)
 }
 
 function getVacationInfo(day) {

resources/js/Shared/Widgets/VacationStats.vue

@@ -1,8 +1,5 @@
 <template>
-  <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
+  <section class="grid grid-cols-1 gap-4 md:grid-cols-1">
-    <div class="hidden p-4 bg-white shadow-md md:block">
-      <VacationChart :stats="stats" />
-    </div>
     <div class="h-full">
       <div class="grid grid-cols-2 gap-4 h-full">
         <div class="py-5 px-4 bg-white shadow-md sm:p-6">
@@ -77,8 +74,6 @@
 </template>
 
 <script setup>
-import VacationChart from '@/Shared/VacationChart'
-
 defineProps({
   stats: Object,
 })

tests/Feature/UserTest.php

@@ -73,10 +73,10 @@ class UserTest extends FeatureTestCase
 
     public function testUserListIsPaginated(): void
     {
-        User::factory()->count(15)->create();
+        User::factory()->count(50)->create();
         $admin = User::factory()->admin()->create();
 
-        $this->assertDatabaseCount("users", 16);
+        $this->assertDatabaseCount("users", 51);
 
         $this->actingAs($admin)
             ->get("/users?page=2")