From f0355f56d338f05c95a7362e71071dc9da770a08 Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Mon, 7 Mar 2022 15:13:37 +0100
Subject: [PATCH] #62 - fix

---
 .../Resources/VacationRequestResource.php     |  4 +-
 resources/js/Pages/Dashboard.vue              | 10 ++--
 .../VacationRequest/IndexForApprovers.vue     |  2 +-
 resources/js/Pages/VacationRequest/Show.vue   | 46 ++++++++++---------
 4 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/app/Infrastructure/Http/Resources/VacationRequestResource.php b/app/Infrastructure/Http/Resources/VacationRequestResource.php
index 112d7a0..e5caa51 100644
--- a/app/Infrastructure/Http/Resources/VacationRequestResource.php
+++ b/app/Infrastructure/Http/Resources/VacationRequestResource.php
@@ -18,8 +18,8 @@ class VacationRequestResource extends JsonResource
             "user" => new UserResource($this->user),
             "type" => $this->type->label(),
             "state" => $this->state,
-            "from" => $this->from->toDisplayString(),
-            "to" => $this->to->toDisplayString(),
+            "from" => $this->from->toDisplayDate(),
+            "to" => $this->to->toDisplayDate(),
             "comment" => $this->comment,
             "days" => VacationResource::collection($this->vacations),
         ];
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 62e0745..caced10 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -112,7 +112,7 @@
                   :key="request.id"
                   class="py-5"
                 >
-                  <div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
+                  <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}`"
@@ -155,7 +155,7 @@
               <InertiaLink
                 href="/vacation-requests"
                 :data="{status: 'waiting_for_action'}"
-                class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
               >
                 Zobacz wszystkie
               </InertiaLink>
@@ -178,7 +178,7 @@
                   :key="request.id"
                   class="py-5"
                 >
-                  <div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
+                  <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}`"
@@ -207,7 +207,7 @@
             <div class="mt-6">
               <InertiaLink
                 href="/vacation-requests/me"
-                class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
               >
                 Zobacz wszystkie
               </InertiaLink>
@@ -284,7 +284,7 @@
               <div>
                 <InertiaLink
                   href="/holidays"
-                  class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                  class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blumilk-500"
                 >
                   Zobacz wszystkie
                 </InertiaLink>
diff --git a/resources/js/Pages/VacationRequest/IndexForApprovers.vue b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
index 3294528..33a4733 100644
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -231,7 +231,7 @@
               </InertiaLink>
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
-              <div class="flex justify-center items-center">
+              <div class="flex">
                 <img
                   class="h-10 w-10 rounded-full"
                   :src="request.user.avatar"
diff --git a/resources/js/Pages/VacationRequest/Show.vue b/resources/js/Pages/VacationRequest/Show.vue
index aa3cb6f..345e937 100644
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/resources/js/Pages/VacationRequest/Show.vue
@@ -19,11 +19,24 @@
               </dd>
             </div>
             <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
+              <dt class="text-sm font-medium text-gray-500 flex items-center">
                 Pracownik
               </dt>
               <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                {{ request.user.name }}
+                <div class="flex">
+                  <img
+                    class="h-10 w-10 rounded-full"
+                    :src="request.user.avatar"
+                  >
+                  <div class="ml-3">
+                    <p class="text-sm font-medium text-gray-900">
+                      {{ request.user.name }}
+                    </p>
+                    <p class="text-sm text-gray-500">
+                      {{ request.user.email }}
+                    </p>
+                  </div>
+                </div>
               </dd>
             </div>
             <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
@@ -44,26 +57,17 @@
             </div>
             <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
               <dt class="text-sm font-medium text-gray-500">
-                Urlop od
+                Data
               </dt>
               <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                {{ request.from }}
-              </dd>
-            </div>
-            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
-                Urlop do
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                {{ request.to }}
-              </dd>
-            </div>
-            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
-                Dni urlopu
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                {{ request.days.length }}
+                <span class="font-semibold">
+                  <template v-if="request.days.length > 1">
+                    {{ request.from }} - {{ request.to }} [Liczba dni: {{ request.days.length }}]
+                  </template>
+                  <template v-else>
+                    {{ request.from }}
+                  </template>
+                </span>
               </dd>
             </div>
             <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
@@ -84,7 +88,7 @@
               </dd>
             </div>
             <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-              <dt class="text-sm font-medium text-gray-500">
+              <dt class="text-sm font-medium text-gray-500 flex items-center">
                 Załączniki
               </dt>
               <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">