- duplication of code removed

* #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/Domain/UserVacationStatsRetriever.php

@@ -103,6 +103,14 @@ class UserVacationStatsRetriever
         return $limit ?? 0;
     }
 
+    public function hasVacationDaysLimit(User $user, YearPeriod $yearPeriod): bool
+    {
+        return $user->vacationLimits()
+            ->whereBelongsTo($yearPeriod)
+            ->first()
+            ?->hasVacation() ?? false;
+    }
+
     protected function getLimitableVacationTypes(): Collection
     {
         $types = VacationType::all();

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
     {

app/Infrastructure/Http/Controllers/DashboardController.php

@@ -74,6 +74,7 @@ class DashboardController extends Controller
             ->get();
 
         $limit = $vacationStatsRetriever->getVacationDaysLimit($user, $yearPeriod);
+        $hasLimit = $vacationStatsRetriever->hasVacationDaysLimit($user, $yearPeriod);
         $used = $vacationStatsRetriever->getUsedVacationDays($user, $yearPeriod);
         $pending = $vacationStatsRetriever->getPendingVacationDays($user, $yearPeriod);
         $homeOffice = $vacationStatsRetriever->getHomeOfficeDays($user, $yearPeriod);
@@ -99,6 +100,7 @@ class DashboardController extends Controller
                 ],
             ),
             "stats" => [
+                "hasLimit" => $hasLimit,
                 "limit" => $limit,
                 "remaining" => $remaining,
                 "used" => $used,

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,12 +16,13 @@
         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"
       />
       <HomeOfficeList
-        v-if="years.current.year === years.selected.year && remoteDays.data.length"
         :remote-days="remoteDays.data"
       />
       <UpcomingHolidays

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/Feedbacks/EmptyState.vue

@@ -8,7 +8,10 @@
         No search result
       </slot>
     </h3>
-    <p class="text-sm">
+    <p
+      v-if="showDescription"
+      class="text-sm"
+    >
       <slot name="text">
         Try a different search query
       </slot>
@@ -18,4 +21,11 @@
 
 <script setup>
 import { SearchIcon } from '@heroicons/vue/solid'
+
+defineProps({
+  showDescription: {
+    type: Boolean,
+    default: true,
+  },
+})
 </script>

resources/js/Shared/Widgets/AbsenceList.vue

@@ -6,7 +6,10 @@
       </h2>
     </div>
     <div class="px-4 border-t border-gray-200 sm:px-6">
-      <ul class="divide-y divide-gray-200">
+      <ul
+        v-if="absences.length"
+        class="divide-y divide-gray-200"
+      >
         <li
           v-for="absence in absences"
           :key="absence.user.id"
@@ -26,11 +29,25 @@
           </div>
         </li>
       </ul>
+      <EmptyState
+        v-else
+        :show-description="false"
+      >
+        <template #head>
+          <SunIcon class="mx-auto w-12 h-12" />
+        </template>
+        <template #title>
+          Brak nieobecności
+        </template>
+      </EmptyState>
     </div>
   </section>
 </template>
 
 <script setup>
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
+import { SunIcon } from '@heroicons/vue/solid'
+
 defineProps({
   absences: Object,
 })

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

@@ -13,8 +13,8 @@
         }
       ],
       day.isHoliday && 'font-bold cursor-default',
-      (day.isPendingVacation) && `border-b-4 border-dashed ${day.getVacationType.border}`,
+      (day.isPendingVacation) && `pb-0 border-b-[3px] border-dashed ${day.getVacationType.border}`,
-      (day.isVacation) && `border-b-4 ${day.getVacationType.border}`
+      (day.isVacation) && `pb-0 border-b-[3px] ${day.getVacationType.border}`
     ]"
   >
     <Popper

resources/js/Shared/Widgets/HomeOfficeList.vue

@@ -6,7 +6,10 @@
       </h2>
     </div>
     <div class="px-4 border-t border-gray-200 sm:px-6">
-      <ul class="divide-y divide-gray-200">
+      <ul
+        v-if="remoteDays.length"
+        class="divide-y divide-gray-200"
+      >
         <li
           v-for="day in remoteDays"
           :key="day.user.id"
@@ -26,11 +29,28 @@
           </div>
         </li>
       </ul>
+      <EmptyState
+        v-else
+        :show-description="false"
+      >
+        <template #head>
+          <HomeCityIcon
+            class="flex justify-center"
+            size="48"
+          />
+        </template>
+        <template #title>
+          Nikt nie pracuje z domu
+        </template>
+      </EmptyState>
     </div>
   </section>
 </template>
 
 <script setup>
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
+import HomeCityIcon from 'vue-material-design-icons/HomeCity'
+
 defineProps({
   remoteDays: Object,
 })

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -91,13 +91,13 @@
         </transition>
       </Menu>
     </div>
-    <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+    <div class="border border-gray-300 lg:flex lg:flex-auto lg:flex-col">
       <div
         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"
+        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-300 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
       >
         <div class="py-2 bg-white">
-          Pn
+          Pon
         </div>
         <div class="py-2 bg-white">
           Wt
@@ -106,19 +106,19 @@
           Śr
         </div>
         <div class="py-2 bg-white">
-          Cz
+          Czw
         </div>
         <div class="py-2 bg-white">
           Pt
         </div>
         <div class="py-2 bg-red-100 text-red-800">
-          Sb
+          Sob
         </div>
         <div class="py-2 bg-red-100 text-red-800">
-          Nd
+          Ndz
         </div>
       </div>
-      <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
+      <div class="flex bg-gray-300 text-xs leading-6 text-gray-700 lg:flex-auto">
         <div
           class="w-full grid grid-cols-7 gap-px"
           :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
@@ -127,7 +127,7 @@
             v-for="(day, index) in days"
             :key="index"
             :day="day"
-            class="flex flex-col relative py-2 px-3"
+            class="flex flex-col relative py-3 px-3"
             :class="{ 'day': calendarState.viewMode.isWeek }"
           />
         </div>
@@ -167,7 +167,7 @@ const selectedYear = useCurrentYearPeriodInfo().year.value
 const weeksInYear = DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber
 
 const calendar = {
-  viewMode: ref('week'),
+  viewMode: ref(localStorage.getItem('calendarViewMode') ?? 'week'),
   currents: reactive({
     year: selectedYear,
     month: selectedYear === currentDate.year ? currentDate.month : 1,
@@ -336,6 +336,7 @@ function updateViewMode(type) {
   else
     resetCalendar()
   calendar.viewMode.value = type
+  localStorage.setItem('calendarViewMode', type)
 }
 
 function isInCurrentMonth(date) {
@@ -377,7 +378,7 @@ function getVacationInfo(day) {
 
 <style lang="css">
 .day:nth-of-type(7n - 6):before {
-  content: "Pn";
+  content: "Pon";
 }
 
 .day:nth-of-type(7n - 5):before {
@@ -389,7 +390,7 @@ function getVacationInfo(day) {
 }
 
 .day:nth-of-type(7n - 3):before {
-  content: "Cz";
+  content: "Czw";
 }
 
 .day:nth-of-type(7n - 2):before {
@@ -397,10 +398,10 @@ function getVacationInfo(day) {
 }
 
 .day:nth-of-type(7n - 1):before {
-  content: "Sb";
+  content: "Sob";
 }
 
 .day:nth-of-type(7n):before {
-  content: "Nd";
+  content: "Ndz";
 }
 </style>

resources/js/Shared/Widgets/VacationStats.vue

@@ -1,84 +1,85 @@
 <template>
-  <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
+  <section>
-    <div class="hidden p-4 bg-white shadow-md md:block">
+    <div
-      <VacationChart :stats="stats" />
+      v-if="stats.hasLimit"
+      class="grid grid-cols-2 gap-2 h-full"
+    >
+      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+        <dd class="mt-1 text-4xl font-semibold text-blumilk-500">
+          {{ stats.remaining }}
+        </dd>
+        <dt class="font-medium text-gray-700 truncate text-md">
+          Pozostało
+        </dt>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Dni do wykorzystania teraz.
+        </dt>
+      </div>
+      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+        <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
+          {{ stats.used }}
+        </dd>
+        <dt class="font-medium text-gray-700 truncate text-md">
+          Wykorzystane
+        </dt>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Dni, które zostały już wykorzystane na urlop wypoczynkowy.
+        </dt>
+      </div>
+      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+        <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
+          {{ stats.pending }}
+        </dt>
+        <dd class="font-medium text-gray-700 truncate text-md">
+          Rozpatrywane
+        </dd>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Dni czekające na akceptację przełożonych.
+        </dt>
+      </div>
+      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+        <dt class="mt-1 text-4xl font-semibold text-blumilk-800">
+          {{ stats.limit }}
+        </dt>
+        <dd class="font-medium text-gray-700 truncate text-md">
+          Limit urlopu
+        </dd>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
+          Twój roczny limit urlopu wypoczynkowego.
+        </dt>
+      </div>
     </div>
-    <div class="h-full">
+    <div
-      <div class="grid grid-cols-2 gap-4 h-full">
+      v-else
-        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+      class="h-full grid grid-cols-2 gap-2 h-full"
-          <dd class="mt-1 text-4xl font-semibold text-blumilk-500">
+    >
-            {{ stats.remaining }}
+      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-          </dd>
+        <dt class="mt-1 text-4xl font-semibold text-gray-500">
-          <dt class="font-medium text-gray-700 truncate text-md">
+          {{ stats.other }}
-            Pozostało
+        </dt>
-          </dt>
+        <dd class="font-medium text-gray-700 truncate text-md">
-          <dt class="mt-2 text-sm font-medium text-gray-500">
+          Inne urlopy
-            Dni do wykorzystania teraz.
+        </dd>
-          </dt>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
-        </div>
+          Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
-        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+        </dt>
-          <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
+      </div>
-            {{ stats.used }}
+      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-          </dd>
+        <dt class="mt-1 text-4xl font-semibold text-lime-500">
-          <dt class="font-medium text-gray-700 truncate text-md">
+          {{ stats.homeOffice }}
-            Wykorzystane
+        </dt>
-          </dt>
+        <dd class="font-medium text-gray-700 truncate text-md">
-          <dt class="mt-2 text-sm font-medium text-gray-500">
+          Praca zdalna
-            Dni, które zostały już wykorzystane na urlop wypoczynkowy.
+        </dd>
-          </dt>
+        <dt class="mt-2 text-sm font-medium text-gray-500">
-        </div>
+          Dni przepracowane poza biurem.
-        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+        </dt>
-          <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
-            {{ stats.pending }}
-          </dt>
-          <dd class="font-medium text-gray-700 truncate text-md">
-            Rozpatrywane
-          </dd>
-          <dt class="mt-2 text-sm font-medium text-gray-500">
-            Dni czekające na akceptację przełożonych.
-          </dt>
-        </div>
-        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-          <dt class="mt-1 text-4xl font-semibold text-blumilk-800">
-            {{ stats.limit }}
-          </dt>
-          <dd class="font-medium text-gray-700 truncate text-md">
-            Limit urlopu
-          </dd>
-          <dt class="mt-2 text-sm font-medium text-gray-500">
-            Twój roczny limit urlopu wypoczynkowego.
-          </dt>
-        </div>
-        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-          <dt class="mt-1 text-4xl font-semibold text-gray-500">
-            {{ stats.other }}
-          </dt>
-          <dd class="font-medium text-gray-700 truncate text-md">
-            Inne urlopy
-          </dd>
-          <dt class="mt-2 text-sm font-medium text-gray-500">
-            Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
-          </dt>
-        </div>
-        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-          <dt class="mt-1 text-4xl font-semibold text-lime-500">
-            {{ stats.homeOffice }}
-          </dt>
-          <dd class="font-medium text-gray-700 truncate text-md">
-            Praca zdalna
-          </dd>
-          <dt class="mt-2 text-sm font-medium text-gray-500">
-            Dni przepracowane poza biurem.
-          </dt>
-        </div>
       </div>
     </div>
   </section>
 </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")