From 205fdd767188997cbf3e263652a2f9ec469d6c43 Mon Sep 17 00:00:00 2001
From: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
Date: Fri, 4 Feb 2022 15:27:11 +0100
Subject: [PATCH] wip

---
 app/Domain/Enums/VacationRequestState.php    |   4 +-
 app/Domain/VacationRequestStateManager.php   |   2 +-
 resources/js/Pages/VacationRequest/Index.vue |  41 +++++--
 resources/js/Pages/VacationRequest/Show.vue  | 123 +++++++++++++++++--
 4 files changed, 144 insertions(+), 26 deletions(-)

diff --git a/app/Domain/Enums/VacationRequestState.php b/app/Domain/Enums/VacationRequestState.php
index cd7ec57..fe9fee3 100644
--- a/app/Domain/Enums/VacationRequestState.php
+++ b/app/Domain/Enums/VacationRequestState.php
@@ -13,7 +13,7 @@ enum VacationRequestState: string
     case WAITING_FOR_TECHNICAL = "waiting_for_technical";
     case WAITING_FOR_ADMINISTRATIVE = "waiting_for_administrative";
     case ACCEPTED_BY_TECHNICAL = "accepted_by_technical";
-    case ACCEPTED_BY_ADMINSTRATIVE = "accepted_by_administrative";
+    case ACCEPTED_BY_ADMINISTRATIVE = "accepted_by_administrative";
 
     public function label(): string
     {
@@ -27,7 +27,7 @@ enum VacationRequestState: string
             self::WAITING_FOR_TECHNICAL,
             self::WAITING_FOR_ADMINISTRATIVE,
             self::ACCEPTED_BY_TECHNICAL,
-            self::ACCEPTED_BY_ADMINSTRATIVE,
+            self::ACCEPTED_BY_ADMINISTRATIVE,
         ];
     }
 
diff --git a/app/Domain/VacationRequestStateManager.php b/app/Domain/VacationRequestStateManager.php
index 8bee7c7..3827670 100644
--- a/app/Domain/VacationRequestStateManager.php
+++ b/app/Domain/VacationRequestStateManager.php
@@ -54,7 +54,7 @@ class VacationRequestStateManager
 
     public function acceptAsAdministrative(VacationRequest $vacationRequest): void
     {
-        $this->changeState($vacationRequest, VacationRequestState::ACCEPTED_BY_ADMINSTRATIVE);
+        $this->changeState($vacationRequest, VacationRequestState::ACCEPTED_BY_ADMINISTRATIVE);
 
         $this->dispatcher->dispatch(new VacationRequestAcceptedByAdministrative($vacationRequest));
     }
diff --git a/resources/js/Pages/VacationRequest/Index.vue b/resources/js/Pages/VacationRequest/Index.vue
index 745f0d3..f0f83f8 100644
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -43,12 +43,6 @@
             >
               Rodzaj urlopu
             </th>
-            <th
-              scope="col"
-              class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
-            >
-              Status
-            </th>
             <th
               scope="col"
               class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
@@ -67,6 +61,12 @@
             >
               Dni urlopu
             </th>
+            <th
+              scope="col"
+              class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+            >
+              Status
+            </th>
             <th scope="col" />
           </tr>
         </thead>
@@ -84,12 +84,9 @@
                 {{ request.name }}
               </InertiaLink>
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
               {{ request.type }}
             </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-              {{ request.state }}
-            </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
               {{ request.from }}
             </td>
@@ -99,9 +96,12 @@
             <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
               X
             </td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 flex items-center">
+                <ThumbDownIcon class="w-4 h-4 text-rose-600 mr-1"/> <span>{{ request.state }}</span>
+            </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
               <InertiaLink :href="`/vacation-requests/${request.id}`">
-                <ChevronRightIcon class="block w-6 h-6 fill-gray-400" />
+                <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
               </InertiaLink>
             </td>
           </tr>
@@ -169,7 +169,18 @@
 </template>
 
 <script>
-import {ChevronRightIcon, DotsVerticalIcon, PencilIcon, TrashIcon} from '@heroicons/vue/solid'
+import {
+  ChevronRightIcon,
+  ClockIcon,
+  DotsVerticalIcon,
+  PencilIcon,
+  ThumbDownIcon,
+  ThumbUpIcon,
+  TrashIcon,
+  XIcon,
+  CheckIcon,
+    DocumentTextIcon,
+} from '@heroicons/vue/solid'
 
 export default {
   name: 'VacationRequestIndex',
@@ -178,6 +189,12 @@ export default {
     PencilIcon,
     TrashIcon,
     ChevronRightIcon,
+    ThumbUpIcon,
+    ClockIcon,
+    XIcon,
+    CheckIcon,
+      DocumentTextIcon,
+      ThumbDownIcon,
   },
   props: {
     requests: {
diff --git a/resources/js/Pages/VacationRequest/Show.vue b/resources/js/Pages/VacationRequest/Show.vue
index 6bee934..c47af41 100644
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/resources/js/Pages/VacationRequest/Show.vue
@@ -92,7 +92,8 @@
           </h3>
           <div class="mt-2 max-w-xl text-sm text-gray-500">
             <p>
-              W zależności od typu wniosku, zostanie on zatwierdzony lub osoba administracyjna będzie musiała go zaakceptować.
+              W zależności od typu wniosku, zostanie on zatwierdzony lub osoba administracyjna będzie
+              musiała go zaakceptować.
             </p>
           </div>
           <div class="mt-5">
@@ -182,30 +183,66 @@
           </h3>
         </div>
         <div class="border-t border-gray-200 px-4 py-4">
+          <!--                    <ul>-->
+          <!--                        <li-->
+          <!--                            v-for="(activity, index) in activities.data"-->
+          <!--                            :key="activity.id"-->
+          <!--                        >-->
+          <!--                            <div :class="{'relative pb-8': index !== activities.data.length - 1}">-->
+          <!--                <span-->
+          <!--                    v-if="(index !== activities.data.length - 1)"-->
+          <!--                    class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"-->
+          <!--                />-->
+          <!--                                <div class="relative flex space-x-3">-->
+          <!--                                    <div>-->
+          <!--                    <span-->
+          <!--                        class="bg-blumilk-500 h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white">-->
+          <!--                      <ThumbUpIcon class="w-5 h-5 text-white"/>-->
+          <!--                    </span>-->
+          <!--                                    </div>-->
+          <!--                                    <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">-->
+          <!--                                        <div>-->
+          <!--                                            <p class="text-sm text-gray-500">-->
+          <!--                                                {{ activity.to }}-->
+          <!--                                            </p>-->
+          <!--                                        </div>-->
+          <!--                                        <div class="text-right text-sm whitespace-nowrap text-gray-500">-->
+          <!--                                            <time>{{ activity.date }}</time>-->
+          <!--                                        </div>-->
+          <!--                                    </div>-->
+          <!--                                </div>-->
+          <!--                            </div>-->
+          <!--                        </li>-->
+          <!--                    </ul>-->
           <ul>
             <li
-              v-for="(activity, index) in activities.data"
-              :key="activity.id"
+              v-for="(status, index) in statuses"
+              :key="status.name"
             >
-              <div :class="{'relative pb-8': index !== activities.data.length - 1}">
+              <div :class="{'relative pb-8': index !== statuses.length - 1}">
                 <span
-                  v-if="(index !== activities.data.length - 1)"
+                  v-if="(index !== statuses.length - 1)"
                   class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
                 />
                 <div class="relative flex space-x-3">
                   <div>
-                    <span class="bg-blumilk-500 h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white">
-                      <ThumbUpIcon class="w-5 h-5 text-white" />
+                    <span
+                      :class="[status.iconBackground, status.iconForeground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']"
+                    >
+                      <component
+                        :is="status.icon"
+                        class="w-5 h-5 text-white"
+                      />
                     </span>
                   </div>
                   <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                     <div>
                       <p class="text-sm text-gray-500">
-                        {{ activity.to }}
+                        {{ status.name }}
                       </p>
                     </div>
                     <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                      <time>{{ activity.date }}</time>
+                      <time>4 lutego 2022</time>
                     </div>
                   </div>
                 </div>
@@ -219,8 +256,15 @@
 </template>
 
 <script>
-import { ThumbUpIcon } from '@heroicons/vue/outline'
-import {PaperClipIcon} from '@heroicons/vue/solid'
+import {
+  CheckIcon,
+  ClockIcon,
+  DocumentTextIcon,
+  PaperClipIcon,
+  ThumbDownIcon,
+  ThumbUpIcon,
+  XIcon,
+} from '@heroicons/vue/outline'
 
 export default {
   name: 'VacationRequestShow',
@@ -238,5 +282,62 @@ export default {
       default: () => null,
     },
   },
+  setup() {
+    const statuses = [
+      {
+        icon: DocumentTextIcon,
+        name: 'Utworzony',
+        iconForeground: 'text-white',
+        iconBackground: 'bg-gray-400',
+      },
+      {
+        icon: ClockIcon,
+        name: 'Czeka na akceptację od technicznego',
+        iconForeground: 'text-white',
+        iconBackground: 'bg-amber-400',
+      },
+      {
+        icon: ClockIcon,
+        name: 'Czeka na akceptację od administracyjnego',
+        iconForeground: 'text-white',
+        iconBackground: 'bg-amber-400',
+      },
+      {
+        icon: ThumbDownIcon,
+        name: 'Odrzucony',
+        iconForeground: 'text-white',
+        iconBackground: 'bg-rose-600',
+      },
+      {
+        icon: ThumbUpIcon,
+        name: 'Zaakceptowany przez technicznego',
+        iconForeground: 'text-white',
+        iconBackground: 'bg-green-500',
+      },
+      {
+        icon: ThumbUpIcon,
+        name: 'Zaakceptowany przez administracyjnego',
+        iconForeground: 'text-white',
+        iconBackground: 'bg-green-500',
+      },
+      {
+        icon: CheckIcon,
+        name: 'Zatwierdzony',
+        iconForeground: 'text-white',
+        iconBackground: 'bg-blumilk-500',
+      },
+      {
+        icon: XIcon,
+        name: 'Anulowany',
+        iconForeground: 'text-white',
+        iconBackground: 'bg-gray-900',
+      },
+
+    ]
+
+    return {
+      statuses,
+    }
+  },
 }
 </script>