Merge remote-tracking branch 'origin/vacation-request-ui-polishing' into #22-vacation-calendar

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

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));
     }

resources/js/Pages/VacationRequest/Index.vue

@@ -84,7 +84,7 @@
                 {{ 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">
@@ -99,9 +99,12 @@
             <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 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 +172,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 +192,12 @@ export default {
     PencilIcon,
     TrashIcon,
     ChevronRightIcon,
+    ThumbUpIcon,
+    ClockIcon,
+    XIcon,
+    CheckIcon,
+      DocumentTextIcon,
+      ThumbDownIcon,
   },
   props: {
     requests: {

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"
+              v-for="(status, index) in statuses"
-              :key="activity.id"
+              :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">
+                    <span
-                      <ThumbUpIcon class="w-5 h-5 text-white" />
+                      :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 {
-import {PaperClipIcon} from '@heroicons/vue/solid'
+  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>