- 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
2022-05-06 12:29:06 +02:00 · 2022-05-06 12:29:06 +02:00 · f4d928c6ae
commit f4d928c6ae
parent 497f47068c
11 changed files with 51 additions and 40 deletions
--- 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,
        ];
--- 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',
  },
 ]

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