wip

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: {

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

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

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

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