From f4d928c6aeeb3e6f6f9a9ff502a7274d32f6dfc2 Mon Sep 17 00:00:00 2001
From: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com>
Date: Fri, 6 May 2022 12:29:06 +0200
Subject: [PATCH] - UX fixes (#142)

* - changed homeoffice icon color

* - improved list of request on dashboard

* - hide holidays if no data

* - fix to holidays

* - fix

* - made forms looks better

* - hide chart when user has no vacation limit

* - linter fix

* - fix to pdf attachment for vacation request
---
 .../Http/Resources/HolidayResource.php        |  2 +-
 resources/js/Composables/vacationTypeInfo.js  |  4 +--
 resources/js/Pages/Dashboard.vue              |  2 +-
 resources/js/Pages/Holidays/Create.vue        |  2 +-
 resources/js/Pages/Users/Create.vue           |  2 +-
 resources/js/Pages/VacationRequest/Create.vue |  7 ++--
 resources/js/Pages/VacationRequest/Show.vue   |  4 +--
 .../Widgets/PendingVacationRequests.vue       | 33 +++++++++++--------
 .../Shared/Widgets/UserVacationRequests.vue   | 31 +++++++++--------
 resources/js/Shared/Widgets/VacationStats.vue |  2 +-
 .../views/pdf/vacation-request.blade.php      |  2 +-
 11 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/app/Infrastructure/Http/Resources/HolidayResource.php b/app/Infrastructure/Http/Resources/HolidayResource.php
index 4b79b09..e1d6216 100644
--- a/app/Infrastructure/Http/Resources/HolidayResource.php
+++ b/app/Infrastructure/Http/Resources/HolidayResource.php
@@ -16,7 +16,7 @@ class HolidayResource extends JsonResource
             "id" => $this->id,
             "name" => $this->name,
             "date" => $this->date->toDateString(),
-            "isPast" => $this->date->isPast(),
+            "isPast" => $this->date->endOfDay()->isPast(),
             "displayDate" => $this->date->toDisplayString(),
             "dayOfWeek" => $this->date->dayName,
         ];
diff --git a/resources/js/Composables/vacationTypeInfo.js b/resources/js/Composables/vacationTypeInfo.js
index 65ec983..3bd73b9 100644
--- a/resources/js/Composables/vacationTypeInfo.js
+++ b/resources/js/Composables/vacationTypeInfo.js
@@ -85,8 +85,8 @@ const types = [
     text: 'Praca zdalna',
     value: 'home_office',
     icon: HomeCityIcon,
-    color: 'text-blumilk-500',
-    border: 'border-blumilk-500',
+    color: 'text-lime-500',
+    border: 'border-lime-500',
   },
 ]
 
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index c048343..e633816 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -23,7 +23,7 @@
         :remote-days="remoteDays.data"
       />
       <UpcomingHolidays
-        v-if="years.current.year === years.selected.year"
+        v-if="years.current.year === years.selected.year && holidays.data.length"
         :holidays="holidays.data"
       />
     </div>
diff --git a/resources/js/Pages/Holidays/Create.vue b/resources/js/Pages/Holidays/Create.vue
index 3e22292..4b8f3c1 100644
--- a/resources/js/Pages/Holidays/Create.vue
+++ b/resources/js/Pages/Holidays/Create.vue
@@ -1,6 +1,6 @@
 <template>
   <InertiaHead title="Dodaj dzień wolny" />
-  <div class="bg-white shadow-md">
+  <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
     <div class="p-4 sm:px-6">
       <h2 class="text-lg font-medium leading-6 text-gray-900">
         Dodaj dzień wolny
diff --git a/resources/js/Pages/Users/Create.vue b/resources/js/Pages/Users/Create.vue
index 5caadf9..18d7e96 100644
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -1,6 +1,6 @@
 <template>
   <InertiaHead title="Dodawanie użytkownika" />
-  <div class="bg-white shadow-md">
+  <div class="mx-auto w-full max-w-7xl bg-white shadow-md">
     <div class="p-4 sm:px-6">
       <h2 class="text-lg font-medium leading-6 text-gray-900">
         Dodaj użytkownika
diff --git a/resources/js/Pages/VacationRequest/Create.vue b/resources/js/Pages/VacationRequest/Create.vue
index fe39c11..3118556 100644
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/resources/js/Pages/VacationRequest/Create.vue
@@ -1,6 +1,6 @@
 <template>
   <InertiaHead title="Złóż wniosek" />
-  <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
+  <div :class="[stats.limit > 0 ? ' grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8' : 'mx-auto w-full max-w-7xl']">
     <div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
       <div class="p-4 sm:px-6">
         <h2 class="text-lg font-medium leading-6 text-gray-900">
@@ -306,7 +306,10 @@
         </div>
       </form>
     </div>
-    <div class="h-full bg-white shadow-md">
+    <div
+      v-if="stats.limit > 0 "
+      class="h-full bg-white shadow-md"
+    >
       <div class="p-4 sm:px-6">
         <h2 class="text-lg font-medium leading-6 text-gray-900">
           <span v-if="auth.user.id !== form.user.id">
diff --git a/resources/js/Pages/VacationRequest/Show.vue b/resources/js/Pages/VacationRequest/Show.vue
index a606539..42e5409 100644
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/resources/js/Pages/VacationRequest/Show.vue
@@ -89,7 +89,7 @@
               </dd>
             </div>
             <div
-              v-if="VacationType.isVacation"
+              v-if="request.isVacation"
               class="py-5 px-4 bg-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
             >
               <dt class="flex items-center text-sm font-medium text-gray-500">
@@ -100,7 +100,7 @@
                   <li class="flex justify-between items-center py-3 pr-4 pl-3 text-sm">
                     <div class="flex flex-1 items-center w-0">
                       <PaperClipIcon class="shrink-0 w-5 h-5 text-gray-400" />
-                      <span class="flex-1 ml-2 w-0 truncate"> wniosek_urlopowy.pdf </span>
+                      <span class="flex-1 ml-2 w-0 truncate">wniosek.pdf</span>
                     </div>
                     <div class="shrink-0 ml-4">
                       <a
diff --git a/resources/js/Shared/Widgets/PendingVacationRequests.vue b/resources/js/Shared/Widgets/PendingVacationRequests.vue
index 8494e60..4c287da 100644
--- a/resources/js/Shared/Widgets/PendingVacationRequests.vue
+++ b/resources/js/Shared/Widgets/PendingVacationRequests.vue
@@ -14,18 +14,24 @@
             class="py-5"
           >
             <div class="relative focus-within:ring-2 focus-within:ring-blumilk-500">
-              <h3 class="text-sm font-semibold text-blumilk-600 hover:text-blumilk-500">
-                <InertiaLink
-                  :href="`/vacation/requests/${request.id}`"
-                  class="hover:underline focus:outline-none"
-                >
-                  <span class="absolute inset-0" />
-                  Wniosek o {{ findType(request.type).text.toLowerCase() }}
-                  [{{ request.name }}]
-                </InertiaLink>
-              </h3>
-              <p class="mt-1 text-sm text-gray-600">
-                {{ request.from }} - {{ request.to }}
+              <div class="flex flex-row">
+                <h3 class="text-sm font-semibold text-blumilk-600 hover:text-blumilk-500">
+                  <InertiaLink
+                    :href="`/vacation/requests/${request.id}`"
+                    class="hover:underline focus:outline-none"
+                  >
+                    <span class="absolute inset-0" />
+                    Wniosek [{{ request.name }}]
+                  </InertiaLink>
+                </h3>
+                <div>
+                  <div class="ml-2 text-sm text-gray-600">
+                    {{ request.from }} - {{ request.to }}
+                  </div>
+                </div>
+              </div>
+              <p class="mt-2 text-sm text-gray-600">
+                <VacationType :type="request.type" />
               </p>
               <div class="mt-3 text-sm text-gray-600">
                 <div class="flex">
@@ -66,11 +72,10 @@
 </template>
 
 <script setup>
-import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
+import VacationType from '@/Shared/VacationType'
 
 defineProps({
   requests: Object,
 })
 
-const { findType } = useVacationTypeInfo()
 </script>
diff --git a/resources/js/Shared/Widgets/UserVacationRequests.vue b/resources/js/Shared/Widgets/UserVacationRequests.vue
index 919fcfa..b942779 100644
--- a/resources/js/Shared/Widgets/UserVacationRequests.vue
+++ b/resources/js/Shared/Widgets/UserVacationRequests.vue
@@ -14,18 +14,22 @@
             class="py-5"
           >
             <div class="relative focus-within:ring-2 focus-within:ring-blumilk-500">
-              <h3 class="text-sm font-semibold text-blumilk-600 hover:text-blumilk-500">
-                <InertiaLink
-                  :href="`/vacation/requests/${request.id}`"
-                  class="hover:underline focus:outline-none"
-                >
-                  <span class="absolute inset-0" />
-                  Wniosek o {{ findType(request.type).text.toLowerCase() }}
-                  [{{ request.name }}]
-                </InertiaLink>
-              </h3>
-              <p class="mt-1 text-sm text-gray-600">
-                {{ request.from }} - {{ request.to }}
+              <div class="flex flex-row">
+                <h3 class="text-sm font-semibold text-blumilk-600 hover:text-blumilk-500">
+                  <InertiaLink
+                    :href="`/vacation/requests/${request.id}`"
+                    class="hover:underline focus:outline-none"
+                  >
+                    <span class="absolute inset-0" />
+                    Wniosek [{{ request.name }}]
+                  </InertiaLink>
+                </h3>
+                <div class="ml-2 text-sm text-gray-600">
+                  {{ request.from }} - {{ request.to }}
+                </div>
+              </div>
+              <p class="mt-2 text-sm text-gray-600">
+                <VacationType :type="request.type" />
               </p>
               <p class="mt-2 text-sm text-gray-600">
                 <Status :status="request.state" />
@@ -52,12 +56,11 @@
 </template>
 
 <script setup>
-import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
 import Status from '@/Shared/Status'
+import VacationType from '@/Shared/VacationType'
 
 defineProps({
   requests: Object,
 })
 
-const { findType } = useVacationTypeInfo()
 </script>
diff --git a/resources/js/Shared/Widgets/VacationStats.vue b/resources/js/Shared/Widgets/VacationStats.vue
index 1dc2e5d..62307b1 100644
--- a/resources/js/Shared/Widgets/VacationStats.vue
+++ b/resources/js/Shared/Widgets/VacationStats.vue
@@ -61,7 +61,7 @@
           </dt>
         </div>
         <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-          <dt class="mt-1 text-4xl font-semibold text-fuchsia-700">
+          <dt class="mt-1 text-4xl font-semibold text-lime-500">
             {{ stats.homeOffice }}
           </dt>
           <dd class="font-medium text-gray-700 truncate text-md">
diff --git a/resources/views/pdf/vacation-request.blade.php b/resources/views/pdf/vacation-request.blade.php
index 61fccd3..0df1bab 100644
--- a/resources/views/pdf/vacation-request.blade.php
+++ b/resources/views/pdf/vacation-request.blade.php
@@ -71,7 +71,7 @@
     </div>
 
     <div class="main">
-        <h2>Wniosek o urlop</h2>
+        <h2>Wniosek</h2>
         <p class="content">
             Proszę o {{ mb_strtolower($vacationRequest->type->label()) }} w okresie od dnia {{ $vacationRequest->from->format("d.m.Y") }}
             do dnia {{ $vacationRequest->to->format("d.m.Y") }} włącznie tj. {{ $vacationRequest->vacations()->count() }} dni roboczych za rok {{ $vacationRequest->yearPeriod->year }}.