From 760c9bf5141dbbe3a9ed2751a2b01aa7eb9c1c29 Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Thu, 7 Apr 2022 10:36:48 +0200
Subject: [PATCH] wip

---
 .../Rules/DoesNotExceedLimitRule.php          |  6 +-
 package-lock.json                             | 62 ------------
 package.json                                  |  1 -
 resources/css/app.css                         | 14 ---
 resources/js/Composables/vacationTypeInfo.js  | 48 +++-------
 resources/js/Pages/AnnualSummary.vue          | 96 +++++++++++--------
 resources/js/Shared/VacationBar.vue           |  5 +-
 .../js/Shared/VacationTypeCalendarIcon.vue    |  2 +-
 8 files changed, 74 insertions(+), 160 deletions(-)

diff --git a/app/Domain/Validation/Rules/DoesNotExceedLimitRule.php b/app/Domain/Validation/Rules/DoesNotExceedLimitRule.php
index 3e90472..74cb9d1 100644
--- a/app/Domain/Validation/Rules/DoesNotExceedLimitRule.php
+++ b/app/Domain/Validation/Rules/DoesNotExceedLimitRule.php
@@ -42,9 +42,9 @@ class DoesNotExceedLimitRule implements VacationRequestRule
     protected function getUserVacationLimit(User $user, YearPeriod $yearPeriod): int
     {
         return $user->vacationLimits()
-                ->whereBelongsTo($yearPeriod)
-                ->first()
-                ->days ?? 0;
+            ->whereBelongsTo($yearPeriod)
+            ->first()
+            ->days ?? 0;
     }
 
     protected function getVacationDaysWithLimit(User $user, YearPeriod $yearPeriod): int
diff --git a/package-lock.json b/package-lock.json
index d4bfd7d..085c8b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,6 @@
                 "echarts": "^5.3.2",
                 "eslit": "^6.0.0",
                 "flatpickr": "^4.6.11",
-                "floating-vue": "^2.0.0-beta.13",
                 "laravel-mix": "^6.0.43",
                 "lodash": "^4.17.21",
                 "luxon": "^2.3.1",
@@ -1682,19 +1681,6 @@
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
         },
-        "node_modules/@floating-ui/core": {
-            "version": "0.3.1",
-            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
-            "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
-        },
-        "node_modules/@floating-ui/dom": {
-            "version": "0.1.10",
-            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
-            "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
-            "dependencies": {
-                "@floating-ui/core": "^0.3.0"
-            }
-        },
         "node_modules/@headlessui/vue": {
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.5.0.tgz",
@@ -4767,18 +4753,6 @@
             "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
             "dev": true
         },
-        "node_modules/floating-vue": {
-            "version": "2.0.0-beta.13",
-            "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.13.tgz",
-            "integrity": "sha512-C2bGEtdbOXm+2rmkn8W6dTQeh3xJT7YbdHnrbanYDS3vK/1lumdXhYA6j2Qs+9shViNjoVUUND1EhLxLDP2OZA==",
-            "dependencies": {
-                "@floating-ui/dom": "^0.1.10",
-                "vue-resize": "^2.0.0-alpha.1"
-            },
-            "peerDependencies": {
-                "vue": "^3.2.0"
-            }
-        },
         "node_modules/follow-redirects": {
             "version": "1.14.9",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
@@ -8763,14 +8737,6 @@
             "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.0.0.tgz",
             "integrity": "sha512-lYSJFW/TyQqmg7MvUbEB8ua1mwWy/v8qve7QJuA/UWUAXC4/yVUdAm4pg/sM9+k5n7VLckBv6ucOROuGBsGPDQ=="
         },
-        "node_modules/vue-resize": {
-            "version": "2.0.0-alpha.1",
-            "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
-            "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
-            "peerDependencies": {
-                "vue": "^3.0.0"
-            }
-        },
         "node_modules/vue-style-loader": {
             "version": "4.1.3",
             "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -10495,19 +10461,6 @@
                 "strip-json-comments": "^3.1.1"
             }
         },
-        "@floating-ui/core": {
-            "version": "0.3.1",
-            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
-            "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
-        },
-        "@floating-ui/dom": {
-            "version": "0.1.10",
-            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
-            "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
-            "requires": {
-                "@floating-ui/core": "^0.3.0"
-            }
-        },
         "@headlessui/vue": {
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.5.0.tgz",
@@ -12967,15 +12920,6 @@
             "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
             "dev": true
         },
-        "floating-vue": {
-            "version": "2.0.0-beta.13",
-            "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.13.tgz",
-            "integrity": "sha512-C2bGEtdbOXm+2rmkn8W6dTQeh3xJT7YbdHnrbanYDS3vK/1lumdXhYA6j2Qs+9shViNjoVUUND1EhLxLDP2OZA==",
-            "requires": {
-                "@floating-ui/dom": "^0.1.10",
-                "vue-resize": "^2.0.0-alpha.1"
-            }
-        },
         "follow-redirects": {
             "version": "1.14.9",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
@@ -15812,12 +15756,6 @@
             "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.0.0.tgz",
             "integrity": "sha512-lYSJFW/TyQqmg7MvUbEB8ua1mwWy/v8qve7QJuA/UWUAXC4/yVUdAm4pg/sM9+k5n7VLckBv6ucOROuGBsGPDQ=="
         },
-        "vue-resize": {
-            "version": "2.0.0-alpha.1",
-            "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
-            "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
-            "requires": {}
-        },
         "vue-style-loader": {
             "version": "4.1.3",
             "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
diff --git a/package.json b/package.json
index 715ab69..8896792 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
         "echarts": "^5.3.2",
         "eslit": "^6.0.0",
         "flatpickr": "^4.6.11",
-        "floating-vue": "^2.0.0-beta.13",
         "laravel-mix": "^6.0.43",
         "lodash": "^4.17.21",
         "luxon": "^2.3.1",
diff --git a/resources/css/app.css b/resources/css/app.css
index b731a13..858c5e9 100644
--- a/resources/css/app.css
+++ b/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;
-}
diff --git a/resources/js/Composables/vacationTypeInfo.js b/resources/js/Composables/vacationTypeInfo.js
index a1540f0..1091b25 100644
--- a/resources/js/Composables/vacationTypeInfo.js
+++ b/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',
   },
 ]
 
diff --git a/resources/js/Pages/AnnualSummary.vue b/resources/js/Pages/AnnualSummary.vue
index 896f235..5ad34fc 100644
--- a/resources/js/Pages/AnnualSummary.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/resources/js/Shared/VacationBar.vue b/resources/js/Shared/VacationBar.vue
index b4e6fb1..bce16f0 100644
--- a/resources/js/Shared/VacationBar.vue
+++ b/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"
diff --git a/resources/js/Shared/VacationTypeCalendarIcon.vue b/resources/js/Shared/VacationTypeCalendarIcon.vue
index 77970c8..b5bdb26 100644
--- a/resources/js/Shared/VacationTypeCalendarIcon.vue
+++ b/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>