- 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

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,
         ];

resources/js/Composables/vacationTypeInfo.js

@@ -85,8 +85,8 @@ const types = [
     text: 'Praca zdalna',
     value: 'home_office',
     icon: HomeCityIcon,
-    color: 'text-blumilk-500',
+    color: 'text-lime-500',
-    border: 'border-blumilk-500',
+    border: 'border-lime-500',
   },
 ]
 

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>

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

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

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">

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

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">
+              <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 o {{ findType(request.type).text.toLowerCase() }}
+                    Wniosek [{{ request.name }}]
-                  [{{ request.name }}]
                   </InertiaLink>
                 </h3>
-              <p class="mt-1 text-sm text-gray-600">
+                <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>

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">
+              <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 o {{ findType(request.type).text.toLowerCase() }}
+                    Wniosek [{{ request.name }}]
-                  [{{ request.name }}]
                   </InertiaLink>
                 </h3>
-              <p class="mt-1 text-sm text-gray-600">
+                <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>

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">

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 }}.