wip

resources/css/app.css

@@ -1,6 +1,5 @@
 @import 'flatpickr/dist/themes/light.css';
 @import 'vue-toastification/dist/index.css';
-@import 'floating-vue/dist/style.css';
 
 @tailwind base;
 @tailwind components;
@@ -69,16 +68,3 @@
 ::-webkit-scrollbar-thumb:hover {
     background: #dadce0;
 }
-
-.v-popper--theme-tooltip .v-popper__inner {
-    padding: 0;
-    background: transparent;
-}
-
-.v-popper--theme-tooltip .v-popper__arrow-outer {
-    border-color: #000;
-}
-
-.v-popper--theme-tooltip:focus-visible {
-    outline: none;
-}

resources/js/Composables/vacationTypeInfo.js

@@ -14,97 +14,71 @@ const types = [
     text: 'Urlop wypoczynkowy',
     value: 'vacation',
     icon: WhiteBalanceSunnyIcon,
-    color: 'text-amber-500',
-    border: {
-      approved: 'border-amber-500',
-      pending: 'border-amber-300',
-    },
+    color: 'text-amber-300',
+    border: 'border-amber-300',
   },
   {
     text: 'Urlop na żądanie',
     value: 'vacation_on_request',
     icon: CommentAlertIcon,
     color: 'text-slate-500',
-    border: {
-      approved: 'border-slate-500',
-      pending: 'border-slate-300',
-    },
+    border: 'border-slate-500',
   },
   {
     text: 'Urlop okolicznościowy',
     value: 'special_vacation',
     icon: StarShootingIcon,
     color: 'text-orange-500',
-    border: {
-      approved: 'border-orange-500',
-      pending: 'border-orange-300',
-    },
+    border: 'border-orange-500',
   },
   {
     text: 'Opieka nad dzieckiem art 188 kp',
     value: 'childcare_vacation',
     icon: BabyCarriageIcon,
     color: 'text-purple-500',
-    border: {
-      approved: 'border-purple-500',
-      pending: 'border-purple-300',
-    },
+    border: 'border-purple-500',
   },
   {
     text: 'Urlop szkoleniowy',
     value: 'training_vacation',
     icon: HumanMaleBoardIcon,
     color: 'text-blumilk-500',
-    border: {
-      approved: 'border-blumilk-500',
-      pending: 'border-blumilk-300',
-    },
+    border: 'border-blumilk-500',
   },
   {
     text: 'Urlop bezpłatny',
     value: 'unpaid_vacation',
     icon: CurrencyUsdOffIcon,
     color: 'text-emerald-500',
-    border: {
-      approved: 'border-emerald-500',
-      pending: 'border-emerald-300',
-    },
+    border: 'border-emerald-500',
   },
   {
     text: 'Wolontariat',
     value: 'volunteering_vacation',
     icon: HandHeartOutlineIcon,
     color: 'text-pink-500',
-    border: {
-      approved: 'border-pink-500',
-      pending: 'border-pink-300',
-    },
+    border: 'border-pink-500',
   },
   {
     text: 'Odbiór za święto',
     value: 'time_in_lieu',
     icon: CalendarCheckIcon,
     color: 'text-stone-500',
-    border: {
-      approved: 'border-stone-500',
-      pending: 'border-stone-300',
-    },
+    border: 'border-stone-500',
   },
   {
     text: 'Zwolnienie lekarskie',
     value: 'sick_vacation',
     icon: MedicalBagIcon,
     color: 'text-rose-500',
-    border: {
-      approved: 'border-rose-500',
-      pending: 'border-rose-300',
-    },
+    border: 'border-rose-500',
   },
   {
     text: 'Nieobecność',
     value: 'absence',
     icon: CalendarRemoveIcon,
     color: 'text-cyan-500',
+    border: 'border-cyan-500',
   },
 ]
 

resources/js/Pages/AnnualSummary.vue

@@ -6,8 +6,9 @@
         Podsumowanie roczne
       </h2>
     </div>
-    <div class="max-w-md" />
-    <div class="grid grid-cols-1 gap-8 py-8 px-4 mx-auto max-w-3xl border-t border-gray-200 sm:grid-cols-2 sm:px-6 xl:grid-cols-3 xl:px-8 xl:max-w-none 2xl:grid-cols-4">
+    <div
+      class="grid grid-cols-1 gap-8 py-8 px-4 mx-auto max-w-3xl border-t border-gray-200 sm:grid-cols-2 sm:px-6 xl:grid-cols-3 xl:px-8 xl:max-w-none 2xl:grid-cols-4"
+    >
       <section
         v-for="month in months"
         :key="month.name"
@@ -30,45 +31,64 @@
             v-for="(day, dayIdx) in month.days"
             :key="dayIdx"
           >
-            <button
-              v-if="day.isCurrentMonth"
-              :class="[day.isVacation && `${getVacationBorder(day.date)}`, day.isPendingVacation && `border-dashed mx-0.5 ${getPendingVacationBorder(day.date)}`, !day.isVacation && !day.isPendingVacation && 'border-transparent', 'relative bg-white hover:bg-blumilk-25 border-b-4 py-1.5 font-medium']"
-            >
-              <div :class="[day.isCurrentMonth && (day.isWeekend || day.isHoliday) && 'text-red-600 font-bold', day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']">
-                <time :datetime="day.date.toISODate()">
-                  {{ day.date.day }}
-                </time>
-              </div>
-              <Tooltip
+            <template v-if="day.isCurrentMonth">
+              <Popper
                 v-if="day.isVacation || day.isPendingVacation"
-                :triggers="['click']"
-                placement="bottom"
-                auto-hide
+                open-delay="200"
+                arrow
+                hover
+                offset-distance="0"
               >
-                <div class="absolute inset-0" />
-                <template #popper>
-                  <div class="mt-1">
-                    <VacationPopup :vacation="getVacationInfo(day)" />
-                  </div>
+                <div :class="[day.isPendingVacation && 'mx-0.5']">
+                  <button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium`]">
+                    <time
+                      :datetime="day.date.toISODate()"
+                      :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
+                    >
+                      {{ day.date.day }}
+                    </time>
+                  </button>
+                </div>
+                <template #content>
+                  <VacationPopup :vacation="getVacationInfo(day)" />
                 </template>
-              </Tooltip>
-              <Tooltip
+              </Popper>
+              <Popper
                 v-else-if="day.isHoliday"
-                :triggers="['click']"
-                placement="bottom"
-                auto-hide
+                open-delay="200"
+                arrow
+                hover
+                offset-distance="0"
               >
-                <div class="absolute inset-0" />
+                <button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent">
+                  <time
+                    :datetime="day.date.toISODate()"
+                    :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center']"
+                  >
+                    {{ day.date.day }}
+                  </time>
+                </button>
                 <template #popper>
                   <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
                     {{ holidays[day.date.toISODate()] }}
                   </div>
                 </template>
-              </Tooltip>
-            </button>
+              </Popper>
+              <button
+                v-else
+                class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent"
+              >
+                <time
+                  :datetime="day.date.toISODate()"
+                  :class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', day.isWeekend && 'text-red-700 font-bold', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
+                >
+                  {{ day.date.day }}
+                </time>
+              </button>
+            </template>
             <div
               v-else
-              :class="['bg-gray-50 text-gray-400 border-b-4 border-transparent py-1.5 w-full focus:z-10 font-medium']"
+              class="focus:z-10 py-1.5 w-full font-medium text-gray-400 bg-gray-50 border-b-4 border-transparent"
             >
               <div class="flex justify-center items-center p-4 mx-auto w-7 h-7">
                 <time :datetime="day.date.toISODate()">
@@ -87,7 +107,7 @@
 import { DateTime } from 'luxon'
 import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
-import { Tooltip } from 'floating-vue'
+import Popper from 'vue3-popper'
 import VacationPopup from '@/Shared/VacationPopup'
 
 const props = defineProps({
@@ -103,7 +123,7 @@ const months = []
 
 for (let i = 1; i < 13; i++) {
   const currentMonth = DateTime.fromObject({ year: year.value, month: i }).startOf('month')
-  
+
   const start = currentMonth.startOf('week')
   const end = currentMonth.endOf('month').endOf('week')
 
@@ -153,19 +173,13 @@ function isWeekend(date) {
   return date.weekday === 6 || date.weekday === 7
 }
 
-function getVacationBorder(date) {
-  const type = findType(props.vacations[date.toISODate()].type)
+function getVacationBorder(day) {
+  const type = findType(getVacationInfo(day).type)
 
-  return type.border.approved
-}
-
-function getPendingVacationBorder(date) {
-  const type = findType(props.pendingVacations[date.toISODate()].type)
-
-  return type.border.approved
+  return type.border
 }
 
 function getVacationInfo(day) {
   return day.isVacation ? props.vacations[day.date.toISODate()] : props.pendingVacations[day.date.toISODate()]
 }
-</script>
+</script>

resources/js/Shared/VacationBar.vue

@@ -1,5 +1,8 @@
 <template>
-  <Popper hover>
+  <Popper
+    hover
+    class="w-full"
+  >
     <div class="flex text-white bg-white">
       <div
         v-show="stats.used > 0"

resources/js/Shared/VacationTypeCalendarIcon.vue

@@ -8,7 +8,7 @@
       </div>
     </div>
     <template #content>
-      <div class="py-1 px-2 text-xs text-gray-900 bg-white shadow-md ">
+      <div class="py-2 px-4 text-xs text-gray-900 bg-white rounded-lg border border-gray-400 ">
         {{ typeInfo.text }}
       </div>
     </template>