From 1843451f3f19819210de9412b271e8f82b8eae72 Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Mon, 14 Mar 2022 14:20:36 +0100
Subject: [PATCH] wip

---
 resources/js/Composables/statusInfo.js        |  2 +-
 resources/js/Composables/vacationTypeInfo.js  | 10 ++---
 resources/js/Pages/Calendar.vue               | 11 +-----
 resources/js/Pages/Dashboard.vue              |  8 +++-
 resources/js/Pages/VacationRequest/Index.vue  |  2 +-
 .../VacationRequest/IndexForApprovers.vue     |  2 +-
 resources/js/Pages/VacationRequest/Show.vue   |  2 +-
 resources/js/Shared/VacationType.vue          |  6 +--
 .../js/Shared/VacationTypeCalendarIcon.vue    | 37 ++++++++++++-------
 9 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/resources/js/Composables/statusInfo.js b/resources/js/Composables/statusInfo.js
index 91e7ceb..a9c94bd 100644
--- a/resources/js/Composables/statusInfo.js
+++ b/resources/js/Composables/statusInfo.js
@@ -125,7 +125,7 @@ const statuses = [
 
 export function useStatusInfo() {
   const getStatues = () => statuses
-  const findStatus = value => statuses.find(month => month.value === value)
+  const findStatus = value => statuses.find(status => status.value === value)
 
   return {
     getStatues,
diff --git a/resources/js/Composables/vacationTypeInfo.js b/resources/js/Composables/vacationTypeInfo.js
index 2ed8ca2..267f480 100644
--- a/resources/js/Composables/vacationTypeInfo.js
+++ b/resources/js/Composables/vacationTypeInfo.js
@@ -8,7 +8,7 @@ import HandHeartOutlineIcon from 'vue-material-design-icons/HandHeartOutline.vue
 import CalendarCheckIcon from 'vue-material-design-icons/CalendarCheck.vue'
 import MedicalBagIcon from 'vue-material-design-icons/MedicalBag.vue'
 
-const statuses = [
+const types = [
   {
     text: 'Urlop wypoczynkowy',
     value: 'vacation',
@@ -129,11 +129,11 @@ const statuses = [
 ]
 
 export function useVacationTypeInfo() {
-  const getStatues = () => statuses
-  const findStatus = value => statuses.find(month => month.value === value)
+  const getTypes = () => types
+  const findType = value => types.find(type => type.value === value)
 
   return {
-    getStatues,
-    findStatus,
+    getTypes,
+    findType,
   }
 }
diff --git a/resources/js/Pages/Calendar.vue b/resources/js/Pages/Calendar.vue
index 9a36776..0134352 100644
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -112,14 +112,7 @@
                 v-if="day.vacations.includes(user.id)"
                 class="flex justify-center items-center"
               >
-                <Popper hover>
-                  <VacationTypeCalendarIcon :status="day.vacationTypes[user.id]" />
-                  <template #content>
-                    <div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
-                      {{ day.vacationTypes[user.id] }}
-                    </div>
-                  </template>
-                </Popper>
+                <VacationTypeCalendarIcon :type="day.vacationTypes[user.id]" />
               </div>
             </td>
           </tr>
@@ -135,7 +128,6 @@ import {CheckIcon, ChevronDownIcon} from '@heroicons/vue/solid'
 import {computed} from 'vue'
 import {useMonthInfo} from '@/Composables/monthInfo'
 import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon'
-import Popper from 'vue3-popper'
 
 export default {
   name: 'VacationCalendar',
@@ -147,7 +139,6 @@ export default {
     MenuItems,
     CheckIcon,
     ChevronDownIcon,
-    Popper,
   },
   props: {
     users: {
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index caced10..2f2793f 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -119,7 +119,7 @@
                         class="hover:underline focus:outline-none"
                       >
                         <span class="absolute inset-0" />
-                        Wniosek o {{ request.type.toLowerCase() }}
+                        Wniosek o {{ findType(request.type).text.toLowerCase() }}
                         [{{ request.name }}]
                       </InertiaLink>
                     </h3>
@@ -185,7 +185,7 @@
                         class="hover:underline focus:outline-none"
                       >
                         <span class="absolute inset-0" />
-                        Wniosek o {{ request.type.toLowerCase() }}
+                        Wniosek o {{ findType(request.type).text.toLowerCase() }}
                         [{{ request.name }}]
                       </InertiaLink>
                     </h3>
@@ -302,6 +302,7 @@ import {computed} from 'vue'
 import {usePage} from '@inertiajs/inertia-vue3'
 import Status from '@/Shared/Status'
 import VacationChart from '@/Shared/VacationChart'
+import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
 
 export default {
   name: 'DashboardPage',
@@ -335,8 +336,11 @@ export default {
   setup() {
     const user = computed(() => usePage().props.value.auth.user)
 
+    const { findType } = useVacationTypeInfo()
+
     return {
       user,
+      findType,
     }
   },
 }
diff --git a/resources/js/Pages/VacationRequest/Index.vue b/resources/js/Pages/VacationRequest/Index.vue
index c59ad2d..5b7d0bc 100644
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -85,7 +85,7 @@
               </InertiaLink>
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
-              <VacationType :status="request.type" />
+              <VacationType :type="request.type" />
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
               {{ request.from }}
diff --git a/resources/js/Pages/VacationRequest/IndexForApprovers.vue b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
index 599fd06..69adae8 100644
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -247,7 +247,7 @@
               </div>
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
-              <VacationType :status="request.type" />
+              <VacationType :type="request.type" />
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
               {{ request.from }}
diff --git a/resources/js/Pages/VacationRequest/Show.vue b/resources/js/Pages/VacationRequest/Show.vue
index c6e3162..7c65269 100644
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/resources/js/Pages/VacationRequest/Show.vue
@@ -44,7 +44,7 @@
                 Rodzaj urlopu
               </dt>
               <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                <VacationType :status="request.type" />
+                <VacationType :type="request.type" />
               </dd>
             </div>
             <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
diff --git a/resources/js/Shared/VacationType.vue b/resources/js/Shared/VacationType.vue
index cde127b..4bc7162 100644
--- a/resources/js/Shared/VacationType.vue
+++ b/resources/js/Shared/VacationType.vue
@@ -16,7 +16,7 @@ import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
 export default {
   name: 'VacationType',
   props: {
-    status: {
+    type: {
       type: String,
       default: () => null,
     },
@@ -26,9 +26,9 @@ export default {
     },
   },
   setup(props) {
-    const { findStatus } = useVacationTypeInfo()
+    const { findType } = useVacationTypeInfo()
 
-    const vacationTypeInfo = computed(() => findStatus(props.status))
+    const vacationTypeInfo = computed(() => findType(props.type))
 
     return {
       vacationTypeInfo,
diff --git a/resources/js/Shared/VacationTypeCalendarIcon.vue b/resources/js/Shared/VacationTypeCalendarIcon.vue
index fd28020..0d92605 100644
--- a/resources/js/Shared/VacationTypeCalendarIcon.vue
+++ b/resources/js/Shared/VacationTypeCalendarIcon.vue
@@ -1,24 +1,35 @@
 <template>
-  <div class="flex items-center">
-    <div>
-      <span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'flex items-center justify-center']">
-        <component
-          :is="statusInfo.outline.icon"
-          :class="statusInfo.outline.background"
-        />
-      </span>
+  <Popper hover>
+    <div class="flex items-center">
+      <div>
+        <span :class="[typeInfo.outline.background, typeInfo.outline.foreground, 'flex items-center justify-center']">
+          <component
+            :is="typeInfo.outline.icon"
+            :class="typeInfo.outline.background"
+          />
+        </span>
+      </div>
     </div>
-  </div>
+    <template #content>
+      <div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
+        {{ typeInfo.text }}
+      </div>
+    </template>
+  </Popper>
 </template>
 
 <script>
 import {computed} from 'vue'
 import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
+import Popper from 'vue3-popper'
 
 export default {
   name: 'VacationTypeCalendarIcon',
+  components: {
+    Popper,
+  },
   props: {
-    status: {
+    type: {
       type: String,
       default: () => null,
     },
@@ -28,12 +39,12 @@ export default {
     },
   },
   setup(props) {
-    const { findStatus } = useVacationTypeInfo()
+    const { findType } = useVacationTypeInfo()
 
-    const statusInfo = computed(() => findStatus(props.status))
+    const typeInfo = computed(() => findType(props.type))
 
     return {
-      statusInfo,
+      typeInfo,
     }
   },
 }