From 2a3e65ed5f1acee640bcd03c9bc332eefd6e303c Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Fri, 17 Jun 2022 12:55:05 +0200
Subject: [PATCH 01/18] #152 - calendar template added

---
 resources/js/Pages/Dashboard.vue              |   2 +
 .../js/Shared/Widgets/VacationCalendar.vue    | 148 ++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 resources/js/Shared/Widgets/VacationCalendar.vue

diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index e633816..1188c6d 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -3,6 +3,7 @@
   <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
     <div class="grid grid-cols-1 gap-4 xl:col-span-2">
       <Welcome :user="auth.user" />
+      <VacationCalendar />
       <VacationStats :stats="stats" />
     </div>
     <div class="grid grid-cols-1 gap-4">
@@ -38,6 +39,7 @@ import HomeOfficeList from '@/Shared/Widgets/HomeOfficeList'
 import UpcomingHolidays from '@/Shared/Widgets/UpcomingHolidays'
 import UserVacationRequests from '@/Shared/Widgets/UserVacationRequests'
 import PendingVacationRequests from '@/Shared/Widgets/PendingVacationRequests'
+import VacationCalendar from '@/Shared/Widgets/VacationCalendar'
 
 defineProps({
   auth: Object,
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
new file mode 100644
index 0000000..1ce49a1
--- /dev/null
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+    <div class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none">
+      <div class="bg-white py-2">
+        M<span class="sr-only sm:not-sr-only">on</span>
+      </div>
+      <div class="bg-white py-2">
+        T<span class="sr-only sm:not-sr-only">ue</span>
+      </div>
+      <div class="bg-white py-2">
+        W<span class="sr-only sm:not-sr-only">ed</span>
+      </div>
+      <div class="bg-white py-2">
+        T<span class="sr-only sm:not-sr-only">hu</span>
+      </div>
+      <div class="bg-white py-2">
+        F<span class="sr-only sm:not-sr-only">ri</span>
+      </div>
+      <div class="bg-white py-2">
+        S<span class="sr-only sm:not-sr-only">at</span>
+      </div>
+      <div class="bg-white py-2">
+        S<span class="sr-only sm:not-sr-only">un</span>
+      </div>
+    </div>
+    <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
+      <div class="w-full grid grid-cols-7 grid-rows-6 gap-px">
+        <div
+          v-for="day in days"
+          :key="day.date"
+          :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', 'relative py-2 px-3']"
+        >
+          <time
+            :datetime="day.date"
+            :class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
+          >
+            {{ day.date.split('-').pop().replace(/^0/, '') }}
+          </time>
+          <ol
+            v-if="day.events.length > 0"
+            class="mt-2"
+          >
+            <li
+              v-for="event in day.events.slice(0, 2)"
+              :key="event.id"
+            >
+              <a
+                :href="event.href"
+                class="group flex"
+              >
+                <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
+                  {{ event.name }}
+                </p>
+                <time
+                  :datetime="event.datetime"
+                  class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
+                >
+                  {{ event.time }}
+                </time>
+              </a>
+            </li>
+            <li
+              v-if="day.events.length > 2"
+              class="text-gray-500"
+            >
+              + {{ day.events.length - 2 }} more
+            </li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const days = [
+  { date: '2021-12-27', events: [] },
+  { date: '2021-12-28', events: [] },
+  { date: '2021-12-29', events: [] },
+  { date: '2021-12-30', events: [] },
+  { date: '2021-12-31', events: [] },
+  { date: '2022-01-01', isCurrentMonth: true, events: [] },
+  { date: '2022-01-02', isCurrentMonth: true, events: [] },
+  {
+    date: '2022-01-03',
+    isCurrentMonth: true,
+    events: [
+      { id: 1, name: 'Design review', time: '10AM', datetime: '2022-01-03T10:00', href: '#' },
+      { id: 2, name: 'Sales meeting', time: '2PM', datetime: '2022-01-03T14:00', href: '#' },
+    ],
+  },
+  { date: '2022-01-04', isCurrentMonth: true, events: [] },
+  { date: '2022-01-05', isCurrentMonth: true, events: [] },
+  { date: '2022-01-06', isCurrentMonth: true, events: [] },
+  {
+    date: '2022-01-07',
+    isCurrentMonth: true,
+    events: [{ id: 3, name: 'Date night', time: '6PM', datetime: '2022-01-08T18:00', href: '#' }],
+  },
+  { date: '2022-01-08', isCurrentMonth: true, events: [] },
+  { date: '2022-01-09', isCurrentMonth: true, events: [] },
+  { date: '2022-01-10', isCurrentMonth: true, events: [] },
+  { date: '2022-01-11', isCurrentMonth: true, events: [] },
+  {
+    date: '2022-01-12',
+    isCurrentMonth: true,
+    isToday: true,
+    events: [{ id: 6, name: "Sam's birthday party", time: '2PM', datetime: '2022-01-25T14:00', href: '#' }],
+  },
+  { date: '2022-01-13', isCurrentMonth: true, events: [] },
+  { date: '2022-01-14', isCurrentMonth: true, events: [] },
+  { date: '2022-01-15', isCurrentMonth: true, events: [] },
+  { date: '2022-01-16', isCurrentMonth: true, events: [] },
+  { date: '2022-01-17', isCurrentMonth: true, events: [] },
+  { date: '2022-01-18', isCurrentMonth: true, events: [] },
+  { date: '2022-01-19', isCurrentMonth: true, events: [] },
+  { date: '2022-01-20', isCurrentMonth: true, events: [] },
+  { date: '2022-01-21', isCurrentMonth: true, events: [] },
+  {
+    date: '2022-01-22',
+    isCurrentMonth: true,
+    isSelected: true,
+    events: [
+      { id: 4, name: 'Maple syrup museum', time: '3PM', datetime: '2022-01-22T15:00', href: '#' },
+      { id: 5, name: 'Hockey game', time: '7PM', datetime: '2022-01-22T19:00', href: '#' },
+    ],
+  },
+  { date: '2022-01-23', isCurrentMonth: true, events: [] },
+  { date: '2022-01-24', isCurrentMonth: true, events: [] },
+  { date: '2022-01-25', isCurrentMonth: true, events: [] },
+  { date: '2022-01-26', isCurrentMonth: true, events: [] },
+  { date: '2022-01-27', isCurrentMonth: true, events: [] },
+  { date: '2022-01-28', isCurrentMonth: true, events: [] },
+  { date: '2022-01-29', isCurrentMonth: true, events: [] },
+  { date: '2022-01-30', isCurrentMonth: true, events: [] },
+  { date: '2022-01-31', isCurrentMonth: true, events: [] },
+  { date: '2022-02-01', events: [] },
+  { date: '2022-02-02', events: [] },
+  {
+    date: '2022-02-03',
+    events: [{ id: 7, name: 'Cinema with friends', time: '9PM', datetime: '2022-02-04T21:00', href: '#' }],
+  },
+  { date: '2022-02-04', events: [] },
+  { date: '2022-02-05', events: [] },
+  { date: '2022-02-06', events: [] },
+]
+const selectedDay = days.find((day) => day.isSelected)
+</script>

From dcc380842826299a73c5faebf848c80a41eea936 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Fri, 17 Jun 2022 17:55:03 +0200
Subject: [PATCH 02/18] #152 - wip

---
 .../js/Shared/Widgets/VacationCalendar.vue    | 273 +++++++++---------
 1 file changed, 136 insertions(+), 137 deletions(-)

diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 1ce49a1..f233601 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -1,148 +1,147 @@
 <template>
-  <div class="shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
-    <div class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none">
-      <div class="bg-white py-2">
-        M<span class="sr-only sm:not-sr-only">on</span>
-      </div>
-      <div class="bg-white py-2">
-        T<span class="sr-only sm:not-sr-only">ue</span>
-      </div>
-      <div class="bg-white py-2">
-        W<span class="sr-only sm:not-sr-only">ed</span>
-      </div>
-      <div class="bg-white py-2">
-        T<span class="sr-only sm:not-sr-only">hu</span>
-      </div>
-      <div class="bg-white py-2">
-        F<span class="sr-only sm:not-sr-only">ri</span>
-      </div>
-      <div class="bg-white py-2">
-        S<span class="sr-only sm:not-sr-only">at</span>
-      </div>
-      <div class="bg-white py-2">
-        S<span class="sr-only sm:not-sr-only">un</span>
-      </div>
-    </div>
-    <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
-      <div class="w-full grid grid-cols-7 grid-rows-6 gap-px">
-        <div
-          v-for="day in days"
-          :key="day.date"
-          :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', 'relative py-2 px-3']"
+  <section class="bg-white shadow-md">
+    <div class="flex items-center justify-between p-4 sm:px-6">
+      <h2 class="text-lg font-medium leading-6 text-gray-900">
+        Kalendarz
+      </h2>
+      <Menu
+        as="div"
+        class="relative"
+      >
+        <MenuButton
+          type="button"
+          class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
         >
-          <time
-            :datetime="day.date"
-            :class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
+          {{ viewMode }} view
+          <ChevronDownIcon
+            class="ml-2 h-5 w-5 text-gray-400"
+            aria-hidden="true"
+          />
+        </MenuButton>
+
+        <transition
+          class="z-10"
+          enter-active-class="transition ease-out duration-100"
+          enter-from-class="transform opacity-0 scale-95"
+          enter-to-class="transform opacity-100 scale-100"
+          leave-active-class="transition ease-in duration-75"
+          leave-from-class="transform opacity-100 scale-100"
+          leave-to-class="transform opacity-0 scale-95"
+        >
+          <MenuItems class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+            <div class="py-1">
+              <MenuItem v-slot="{ active }">
+                <a
+                  :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']"
+                  @click="updateViewMode('week')"
+                >Week view</a>
+              </MenuItem>
+              <MenuItem v-slot="{ active }">
+                <a
+                  :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']"
+                  @click="updateViewMode('month')"
+                >Month view</a>
+              </MenuItem>
+            </div>
+          </MenuItems>
+        </transition>
+      </Menu>
+    </div>
+    <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+      <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
+        <div :class="[viewMode === 'week' ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
+          <div
+            v-for="day in days"
+            :key="day.date"
+            class="flex flex-col"
+            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', 'day relative py-2 px-3']"
           >
-            {{ day.date.split('-').pop().replace(/^0/, '') }}
-          </time>
-          <ol
-            v-if="day.events.length > 0"
-            class="mt-2"
-          >
-            <li
-              v-for="event in day.events.slice(0, 2)"
-              :key="event.id"
+            <time
+              :datetime="day.date"
+              :class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
             >
-              <a
-                :href="event.href"
-                class="group flex"
-              >
-                <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
-                  {{ event.name }}
-                </p>
-                <time
-                  :datetime="event.datetime"
-                  class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
-                >
-                  {{ event.time }}
-                </time>
-              </a>
-            </li>
-            <li
-              v-if="day.events.length > 2"
-              class="text-gray-500"
-            >
-              + {{ day.events.length - 2 }} more
-            </li>
-          </ol>
+              {{ day.date.split('-').pop().replace(/^0/, '') }}
+            </time>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup>
-const days = [
-  { date: '2021-12-27', events: [] },
-  { date: '2021-12-28', events: [] },
-  { date: '2021-12-29', events: [] },
-  { date: '2021-12-30', events: [] },
-  { date: '2021-12-31', events: [] },
-  { date: '2022-01-01', isCurrentMonth: true, events: [] },
-  { date: '2022-01-02', isCurrentMonth: true, events: [] },
-  {
-    date: '2022-01-03',
-    isCurrentMonth: true,
-    events: [
-      { id: 1, name: 'Design review', time: '10AM', datetime: '2022-01-03T10:00', href: '#' },
-      { id: 2, name: 'Sales meeting', time: '2PM', datetime: '2022-01-03T14:00', href: '#' },
-    ],
-  },
-  { date: '2022-01-04', isCurrentMonth: true, events: [] },
-  { date: '2022-01-05', isCurrentMonth: true, events: [] },
-  { date: '2022-01-06', isCurrentMonth: true, events: [] },
-  {
-    date: '2022-01-07',
-    isCurrentMonth: true,
-    events: [{ id: 3, name: 'Date night', time: '6PM', datetime: '2022-01-08T18:00', href: '#' }],
-  },
-  { date: '2022-01-08', isCurrentMonth: true, events: [] },
-  { date: '2022-01-09', isCurrentMonth: true, events: [] },
-  { date: '2022-01-10', isCurrentMonth: true, events: [] },
-  { date: '2022-01-11', isCurrentMonth: true, events: [] },
-  {
-    date: '2022-01-12',
-    isCurrentMonth: true,
-    isToday: true,
-    events: [{ id: 6, name: "Sam's birthday party", time: '2PM', datetime: '2022-01-25T14:00', href: '#' }],
-  },
-  { date: '2022-01-13', isCurrentMonth: true, events: [] },
-  { date: '2022-01-14', isCurrentMonth: true, events: [] },
-  { date: '2022-01-15', isCurrentMonth: true, events: [] },
-  { date: '2022-01-16', isCurrentMonth: true, events: [] },
-  { date: '2022-01-17', isCurrentMonth: true, events: [] },
-  { date: '2022-01-18', isCurrentMonth: true, events: [] },
-  { date: '2022-01-19', isCurrentMonth: true, events: [] },
-  { date: '2022-01-20', isCurrentMonth: true, events: [] },
-  { date: '2022-01-21', isCurrentMonth: true, events: [] },
-  {
-    date: '2022-01-22',
-    isCurrentMonth: true,
-    isSelected: true,
-    events: [
-      { id: 4, name: 'Maple syrup museum', time: '3PM', datetime: '2022-01-22T15:00', href: '#' },
-      { id: 5, name: 'Hockey game', time: '7PM', datetime: '2022-01-22T19:00', href: '#' },
-    ],
-  },
-  { date: '2022-01-23', isCurrentMonth: true, events: [] },
-  { date: '2022-01-24', isCurrentMonth: true, events: [] },
-  { date: '2022-01-25', isCurrentMonth: true, events: [] },
-  { date: '2022-01-26', isCurrentMonth: true, events: [] },
-  { date: '2022-01-27', isCurrentMonth: true, events: [] },
-  { date: '2022-01-28', isCurrentMonth: true, events: [] },
-  { date: '2022-01-29', isCurrentMonth: true, events: [] },
-  { date: '2022-01-30', isCurrentMonth: true, events: [] },
-  { date: '2022-01-31', isCurrentMonth: true, events: [] },
-  { date: '2022-02-01', events: [] },
-  { date: '2022-02-02', events: [] },
-  {
-    date: '2022-02-03',
-    events: [{ id: 7, name: 'Cinema with friends', time: '9PM', datetime: '2022-02-04T21:00', href: '#' }],
-  },
-  { date: '2022-02-04', events: [] },
-  { date: '2022-02-05', events: [] },
-  { date: '2022-02-06', events: [] },
-]
-const selectedDay = days.find((day) => day.isSelected)
+import { ChevronDownIcon } from '@heroicons/vue/solid'
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { ref, watch } from 'vue'
+import { DateTime } from 'luxon'
+
+let days = ref([])
+const viewMode = ref('week')
+watch(viewMode, () => {
+  loadMonth()
+})
+loadMonth()
+
+function loadMonth() {
+  const tmpDays = []
+  const currentMonth = DateTime.fromObject({ year: 2022, month: 6 }).startOf('month')
+
+  const start = currentMonth.startOf('week')
+  const end = viewMode.value === 'week' ? currentMonth.endOf('week') : currentMonth.endOf('month').endOf('week')
+
+  for (let day = start; day < end; day = day.plus({ day: 1 })) {
+    const isCurrentMonth = isInCurrentMonth(day, currentMonth)
+    const okIsToday = isToday(day)
+
+    tmpDays.push({
+      date: day.toISODate(),
+      isCurrentMonth,
+      isToday: okIsToday,
+    })
+  }
+
+  days.value = tmpDays
+}
+
+function updateViewMode(type) {
+  viewMode.value = type
+}
+
+function isInCurrentMonth(date, currentMonth) {
+  return currentMonth.hasSame(date, 'month')
+}
+
+function isToday(date) {
+  return date.toISODate() === DateTime.local().toISODate()
+}
 </script>
+
+<style lang="css">
+.day:nth-of-type(7n - 6):before {
+  content: "Pn";
+}
+
+.day:nth-of-type(7n - 5):before {
+  content: "Wt";
+}
+
+.day:nth-of-type(7n - 4):before {
+  content: "Śr";
+}
+
+.day:nth-of-type(7n - 3):before {
+  content: "Cz";
+}
+
+.day:nth-of-type(7n - 2):before {
+  content: "Pt";
+}
+
+.day:nth-of-type(7n - 1):before {
+  content: "Sb";
+}
+
+.day:nth-of-type(7n):before {
+  content: "Nd";
+}
+</style>

From db874d439521d97db95b592445a2971ab55112aa Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Tue, 21 Jun 2022 00:13:48 +0200
Subject: [PATCH 03/18] #152 - wip

---
 .../js/Shared/Widgets/VacationCalendar.vue    | 135 ++++++++++++++----
 1 file changed, 110 insertions(+), 25 deletions(-)

diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index f233601..1779ab8 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -4,6 +4,18 @@
       <h2 class="text-lg font-medium leading-6 text-gray-900">
         Kalendarz
       </h2>
+      <div class="flex items-center rounded-md shadow-sm md:items-stretch">
+        <button type="button" class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50">
+          <span class="sr-only">Previous month</span>
+          <ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
+        </button>
+        <button type="button" class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block">Today</button>
+        <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
+        <button type="button" class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50">
+          <span class="sr-only">Next month</span>
+          <ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
+        </button>
+      </div>
       <Menu
         as="div"
         class="relative"
@@ -12,7 +24,7 @@
           type="button"
           class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
         >
-          {{ viewMode }} view
+          {{ viewMode.name }}
           <ChevronDownIcon
             class="ml-2 h-5 w-5 text-gray-400"
             aria-hidden="true"
@@ -30,17 +42,21 @@
         >
           <MenuItems class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div class="py-1">
-              <MenuItem v-slot="{ active }">
-                <a
-                  :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']"
-                  @click="updateViewMode('week')"
-                >Week view</a>
-              </MenuItem>
-              <MenuItem v-slot="{ active }">
-                <a
-                  :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']"
-                  @click="updateViewMode('month')"
-                >Month view</a>
+              <MenuItem
+                v-for="option in viewModeOptions"
+                :key="option.key"
+                v-slot="{ active }"
+              >
+                <button
+                  :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm text-left w-full']"
+                  @click="updateViewMode(option.key)"
+                >
+                  {{ option.name }}
+                  <CheckIcon
+                    v-if="option.key === viewMode.key"
+                    class="ml-2 w-5 h-5 text-blumilk-500"
+                  />
+                </button>
               </MenuItem>
             </div>
           </MenuItems>
@@ -48,13 +64,39 @@
       </Menu>
     </div>
     <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+      <div
+        v-if="viewMode.key === 'month'"
+        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
+      >
+        <div class="bg-white py-2">
+          Pn
+        </div>
+        <div class="bg-white py-2">
+          Wt
+        </div>
+        <div class="bg-white py-2">
+          Śr
+        </div>
+        <div class="bg-white py-2">
+          Cz
+        </div>
+        <div class="bg-white py-2">
+          Pt
+        </div>
+        <div class="bg-red-100 py-2">
+          Sb
+        </div>
+        <div class="bg-red-100 py-2">
+          Nd
+        </div>
+      </div>
       <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
-        <div :class="[viewMode === 'week' ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
+        <div :class="[viewMode.key === 'week' ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
           <div
-            v-for="day in days"
-            :key="day.date"
+            v-for="(day, index) in days"
+            :key="index"
             class="flex flex-col"
-            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', 'day relative py-2 px-3']"
+            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', viewMode.key === 'week' && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, viewMode.key === 'week' ? 'day' : undefined, 'relative py-2 px-3']"
           >
             <time
               :datetime="day.date"
@@ -70,27 +112,68 @@
 </template>
 
 <script setup>
-import { ChevronDownIcon } from '@heroicons/vue/solid'
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { DateTime } from 'luxon'
+import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 
 let days = ref([])
-const viewMode = ref('week')
-watch(viewMode, () => {
+function getCurrentDate() {
+  const { year, month, weekNumber } = DateTime.now()
+  return { year, month, weekNumber }
+}
+const selectedYear = useCurrentYearPeriodInfo().year.value
+const currentDate = getCurrentDate()
+let viewModeOptions = [
+  { key: 'week', name: 'Week view' },
+  { key: 'month', name: 'Month view' },
+]
+const calendar = {
+  viewMode: ref('week'),
+  currents: ref({
+    year: selectedYear,
+    month: selectedYear === currentDate.year ? currentDate.month : 1,
+    week: selectedYear === currentDate.year ? currentDate.weekNumber : 1,
+  }),
+}
+console.log(calendar, selectedYear, currentDate)
+watch(() => calendar.viewMode.value, () => {
   loadMonth()
 })
+
+const viewMode = computed(() => {
+  const key = calendar.viewMode.value
+  return {
+    key,
+    name: viewModeOptions.find((obj) => obj.key === key)?.name,
+  }
+})
+
 loadMonth()
 
 function loadMonth() {
   const tmpDays = []
-  const currentMonth = DateTime.fromObject({ year: 2022, month: 6 }).startOf('month')
 
-  const start = currentMonth.startOf('week')
-  const end = viewMode.value === 'week' ? currentMonth.endOf('week') : currentMonth.endOf('month').endOf('week')
+  let focusDate = DateTime.fromObject({
+    year: calendar.currents.value.year,
+    month: calendar.currents.value.month,
+  })
+  let start, end
+
+  if (viewMode.value.key === 'week') {
+    if (currentDate.year === selectedYear)
+      focusDate = DateTime.fromObject({ weekNumber: calendar.currents.value.week })
+    start = focusDate.startOf('week')
+    end = focusDate.endOf('week')
+  } else if (viewMode.value.key === 'month') {
+    focusDate = focusDate.startOf('month')
+    start = focusDate.startOf('week')
+    end = focusDate.endOf('month').endOf('week')
+  }
 
   for (let day = start; day < end; day = day.plus({ day: 1 })) {
-    const isCurrentMonth = isInCurrentMonth(day, currentMonth)
+    const isCurrentMonth = isInCurrentMonth(day, focusDate)
     const okIsToday = isToday(day)
 
     tmpDays.push({
@@ -104,7 +187,7 @@ function loadMonth() {
 }
 
 function updateViewMode(type) {
-  viewMode.value = type
+  calendar.viewMode.value = type
 }
 
 function isInCurrentMonth(date, currentMonth) {
@@ -139,9 +222,11 @@ function isToday(date) {
 
 .day:nth-of-type(7n - 1):before {
   content: "Sb";
+  color: red;
 }
 
 .day:nth-of-type(7n):before {
   content: "Nd";
+  color: red;
 }
 </style>

From 78932823852df0a40e99f45ebb59b195c3c35273 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Thu, 23 Jun 2022 10:47:23 +0200
Subject: [PATCH 04/18] #152 - wip

---
 .../js/Shared/Widgets/VacationCalendar.vue    | 168 +++++++++++++-----
 .../VacationCalendar/ViewModeOptions.js       |  13 ++
 2 files changed, 133 insertions(+), 48 deletions(-)
 create mode 100644 resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js

diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 1779ab8..558e467 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -1,30 +1,55 @@
 <template>
   <section class="bg-white shadow-md">
-    <div class="flex items-center justify-between p-4 sm:px-6">
+    <div class="grid grid-cols-3 grid-rows-1 items-center justify-center p-4 sm:px-6">
       <h2 class="text-lg font-medium leading-6 text-gray-900">
-        Kalendarz
+        {{ calendarState.monthName }} {{ calendar.currents.year !== selectedYear ? calendar.currents.year : undefined }}
       </h2>
-      <div class="flex items-center rounded-md shadow-sm md:items-stretch">
-        <button type="button" class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50">
-          <span class="sr-only">Previous month</span>
-          <ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
-        </button>
-        <button type="button" class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block">Today</button>
-        <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
-        <button type="button" class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50">
-          <span class="sr-only">Next month</span>
-          <ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
-        </button>
+      <div class="flex justify-center">
+        <div class="flex items-center rounded-md shadow-sm md:items-stretch">
+          <button
+            v-if="calendarState.isPrevious"
+            type="button"
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            @click="toLast"
+          >
+            <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
+            <ChevronLeftIcon
+              class="h-5 w-5"
+              aria-hidden="true"
+            />
+          </button>
+          <button
+            type="button"
+            class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
+            :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
+            @click="resetCalendar"
+          >
+            Dziś
+          </button>
+          <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
+          <button
+            v-if="calendarState.isNext"
+            type="button"
+            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            @click="toNext"
+          >
+            <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
+            <ChevronRightIcon
+              class="h-5 w-5"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
       </div>
       <Menu
         as="div"
-        class="relative"
+        class="flex justify-end relative"
       >
         <MenuButton
           type="button"
           class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
         >
-          {{ viewMode.name }}
+          {{ calendarState.viewMode.details.name }}
           <ChevronDownIcon
             class="ml-2 h-5 w-5 text-gray-400"
             aria-hidden="true"
@@ -43,7 +68,7 @@
           <MenuItems class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div class="py-1">
               <MenuItem
-                v-for="option in viewModeOptions"
+                v-for="option in viewModes.all"
                 :key="option.key"
                 v-slot="{ active }"
               >
@@ -51,9 +76,9 @@
                   :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm text-left w-full']"
                   @click="updateViewMode(option.key)"
                 >
-                  {{ option.name }}
+                  {{ option.shortcut }}
                   <CheckIcon
-                    v-if="option.key === viewMode.key"
+                    v-if="option.is(calendar.viewMode)"
                     class="ml-2 w-5 h-5 text-blumilk-500"
                   />
                 </button>
@@ -65,7 +90,7 @@
     </div>
     <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
       <div
-        v-if="viewMode.key === 'month'"
+        v-if="calendarState.viewMode.isMonth"
         class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
       >
         <div class="bg-white py-2">
@@ -91,12 +116,12 @@
         </div>
       </div>
       <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
-        <div :class="[viewMode.key === 'week' ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
+        <div :class="[calendarState.viewMode.isWeek ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
           <div
             v-for="(day, index) in days"
             :key="index"
             class="flex flex-col"
-            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', viewMode.key === 'week' && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, viewMode.key === 'week' ? 'day' : undefined, 'relative py-2 px-3']"
+            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', calendarState.viewMode.isWeek && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, calendarState.viewMode.isWeek ? 'day' : 'month-day', 'relative py-2 px-3']"
           >
             <time
               :datetime="day.date"
@@ -114,65 +139,76 @@
 <script setup>
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, reactive } from 'vue'
 import { DateTime } from 'luxon'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
+import { useMonthInfo } from '@/Composables/monthInfo'
+import viewModes from '@/Shared/Widgets/VacationCalendar/ViewModeOptions'
 
 let days = ref([])
+const months = useMonthInfo().getMonths()
 function getCurrentDate() {
   const { year, month, weekNumber } = DateTime.now()
   return { year, month, weekNumber }
 }
 const selectedYear = useCurrentYearPeriodInfo().year.value
 const currentDate = getCurrentDate()
-let viewModeOptions = [
-  { key: 'week', name: 'Week view' },
-  { key: 'month', name: 'Month view' },
-]
+
 const calendar = {
   viewMode: ref('week'),
-  currents: ref({
+  currents: reactive({
     year: selectedYear,
     month: selectedYear === currentDate.year ? currentDate.month : 1,
     week: selectedYear === currentDate.year ? currentDate.weekNumber : 1,
   }),
+  toPreviousActive: computed(() => calendar.currents.month !== 1),
 }
-console.log(calendar, selectedYear, currentDate)
-watch(() => calendar.viewMode.value, () => {
-  loadMonth()
+
+const calendarState = reactive({
+  viewMode: {
+    isWeek: computed(() => calendar.viewMode.value === 'week'),
+    isMonth: computed(() => calendar.viewMode.value === 'month'),
+    details: computed(() => viewModes.find(calendar.viewMode.value)),
+  },
+  monthName: computed(() => months[calendar.currents.month - 1]?.name),
+  isActualYear: computed(() => calendar.currents.year !== selectedYear),
+  isPrevious: computed(() => calendar.currents.month !== 1),
+  isNext: computed(() => calendar.currents.month !== 12),
 })
 
-const viewMode = computed(() => {
-  const key = calendar.viewMode.value
-  return {
-    key,
-    name: viewModeOptions.find((obj) => obj.key === key)?.name,
-  }
+watch([calendar.viewMode, calendar.currents], () => {
+  loadCalendar()
 })
 
-loadMonth()
-
-function loadMonth() {
-  const tmpDays = []
+loadCalendar()
 
+function loadCalendar() {
+  console.log('Loaded')
   let focusDate = DateTime.fromObject({
-    year: calendar.currents.value.year,
-    month: calendar.currents.value.month,
+    year: calendar.currents.year,
+    month: calendar.currents.month,
   })
   let start, end
 
-  if (viewMode.value.key === 'week') {
+  if (calendar.viewMode.value === 'week') {
     if (currentDate.year === selectedYear)
-      focusDate = DateTime.fromObject({ weekNumber: calendar.currents.value.week })
+      focusDate = DateTime.fromObject({ weekNumber: calendar.currents.week })
+    else
+      focusDate = focusDate.plus({ week: calendar.currents.week - 1 })
     start = focusDate.startOf('week')
     end = focusDate.endOf('week')
-  } else if (viewMode.value.key === 'month') {
+  } else if (calendar.viewMode.value === 'month') {
     focusDate = focusDate.startOf('month')
     start = focusDate.startOf('week')
     end = focusDate.endOf('month').endOf('week')
   }
 
-  for (let day = start; day < end; day = day.plus({ day: 1 })) {
+  generateCalendarData(start, end, focusDate)
+}
+
+function generateCalendarData(startDate, endDate, focusDate) {
+  const tmpDays = []
+  for (let day = startDate; day < endDate; day = day.plus({ day: 1 })) {
     const isCurrentMonth = isInCurrentMonth(day, focusDate)
     const okIsToday = isToday(day)
 
@@ -186,7 +222,36 @@ function loadMonth() {
   days.value = tmpDays
 }
 
+function toLast() {
+  if (calendar.viewMode.value === 'week')
+    addWeeks(-1)
+  else
+    addMonths(-1)
+}
+
+function toNext() {
+  if (calendar.viewMode.value === 'week') {
+    addWeeks()
+  } else
+    addMonths()
+}
+
+function resetCalendar() {
+  calendar.currents.year = selectedYear
+  calendar.currents.month = selectedYear === currentDate.year ? currentDate.month : 1
+  calendar.currents.week = selectedYear === currentDate.year ? currentDate.weekNumber : 1
+}
+
+function addWeeks(howMany = 1) {
+  calendar.currents.week += howMany
+}
+
+function addMonths(howMany = 1) {
+  calendar.currents.month += howMany
+}
+
 function updateViewMode(type) {
+  resetCalendar()
   calendar.viewMode.value = type
 }
 
@@ -220,13 +285,20 @@ function isToday(date) {
   content: "Pt";
 }
 
+.day:nth-of-type(7n - 1):before,
+.day:nth-of-type(7n):before {
+  color: #991b1b;
+}
+
 .day:nth-of-type(7n - 1):before {
   content: "Sb";
-  color: red;
 }
 
 .day:nth-of-type(7n):before {
   content: "Nd";
-  color: red;
+}
+
+.month-day:nth-of-type(7n - 1), .month-day:nth-of-type(7n) {
+  background-color: #fee2e2;
 }
 </style>
diff --git a/resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js b/resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js
new file mode 100644
index 0000000..4f7370a
--- /dev/null
+++ b/resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js
@@ -0,0 +1,13 @@
+function isViewModeKey(key) {
+  return this.key === key.value
+}
+
+const modes = [
+  { key: 'week', name: 'Widok tygodnia', shortcut: 'Tydzień', is: isViewModeKey },
+  { key: 'month', name: 'Widok miesiąca', shortcut: 'Miesiąc', is: isViewModeKey },
+]
+
+export default {
+  all: modes,
+  find: whereMode => modes.find(mode => mode.key === whereMode),
+}

From 4e16f363ac7a6148548321465e4c135fc43c008f Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Thu, 23 Jun 2022 20:46:17 +0200
Subject: [PATCH 05/18] #152 - optimization

---
 .../ViewModeOptions.js                        |   7 +-
 .../js/Shared/Widgets/VacationCalendar.vue    | 119 ++++++++++--------
 2 files changed, 70 insertions(+), 56 deletions(-)
 rename resources/js/Shared/Widgets/{VacationCalendar => Calendar}/ViewModeOptions.js (65%)

diff --git a/resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js b/resources/js/Shared/Widgets/Calendar/ViewModeOptions.js
similarity index 65%
rename from resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js
rename to resources/js/Shared/Widgets/Calendar/ViewModeOptions.js
index 4f7370a..a04d99d 100644
--- a/resources/js/Shared/Widgets/VacationCalendar/ViewModeOptions.js
+++ b/resources/js/Shared/Widgets/Calendar/ViewModeOptions.js
@@ -2,12 +2,11 @@ function isViewModeKey(key) {
   return this.key === key.value
 }
 
-const modes = [
+export const viewModes = [
   { key: 'week', name: 'Widok tygodnia', shortcut: 'Tydzień', is: isViewModeKey },
   { key: 'month', name: 'Widok miesiąca', shortcut: 'Miesiąc', is: isViewModeKey },
 ]
 
-export default {
-  all: modes,
-  find: whereMode => modes.find(mode => mode.key === whereMode),
+export function find(modeKey) {
+  return viewModes.find(mode => mode.key === modeKey)
 }
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 558e467..6aa90e0 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -2,7 +2,7 @@
   <section class="bg-white shadow-md">
     <div class="grid grid-cols-3 grid-rows-1 items-center justify-center p-4 sm:px-6">
       <h2 class="text-lg font-medium leading-6 text-gray-900">
-        {{ calendarState.monthName }} {{ calendar.currents.year !== selectedYear ? calendar.currents.year : undefined }}
+        {{ calendarState.monthName }} {{ calendarState.isActualYear ? undefined : calendar.currents.year }}
       </h2>
       <div class="flex justify-center">
         <div class="flex items-center rounded-md shadow-sm md:items-stretch">
@@ -68,7 +68,7 @@
           <MenuItems class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <div class="py-1">
               <MenuItem
-                v-for="option in viewModes.all"
+                v-for="option in viewModes"
                 :key="option.key"
                 v-slot="{ active }"
               >
@@ -143,7 +143,7 @@ import { ref, watch, computed, reactive } from 'vue'
 import { DateTime } from 'luxon'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 import { useMonthInfo } from '@/Composables/monthInfo'
-import viewModes from '@/Shared/Widgets/VacationCalendar/ViewModeOptions'
+import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions'
 
 let days = ref([])
 const months = useMonthInfo().getMonths()
@@ -159,16 +159,15 @@ const calendar = {
   currents: reactive({
     year: selectedYear,
     month: selectedYear === currentDate.year ? currentDate.month : 1,
-    week: selectedYear === currentDate.year ? currentDate.weekNumber : 1,
+    weekPosition: 0,
   }),
-  toPreviousActive: computed(() => calendar.currents.month !== 1),
 }
 
 const calendarState = reactive({
   viewMode: {
     isWeek: computed(() => calendar.viewMode.value === 'week'),
     isMonth: computed(() => calendar.viewMode.value === 'month'),
-    details: computed(() => viewModes.find(calendar.viewMode.value)),
+    details: computed(() => findViewMode(calendar.viewMode.value)),
   },
   monthName: computed(() => months[calendar.currents.month - 1]?.name),
   isActualYear: computed(() => calendar.currents.year !== selectedYear),
@@ -176,51 +175,57 @@ const calendarState = reactive({
   isNext: computed(() => calendar.currents.month !== 12),
 })
 
+const customCalendar = {
+  loadCalendar() {
+    const date = DateTime.fromObject({
+      year: calendar.currents.year,
+      month: calendar.currents.month,
+    })
+    days.value = this.generateCalendarData(date)
+  },
+  generateCalendarData(date) {
+    const firstMonthDay = date.startOf('month')
+    const lastMonthDay = date.endOf('month')
+
+    if (calendarState.viewMode.isWeek) {
+      return this.generateWeekData(firstMonthDay.startOf('week'))
+    } else if (calendarState.viewMode.isMonth) {
+      return this.generateMonthData(firstMonthDay.startOf('week'), lastMonthDay.endOf('week'))
+    }
+    return []
+  },
+  generateWeekData(start) {
+    let days = []
+    const startWeek = start.plus({ week: calendar.currents.weekPosition })
+    const endWeek = startWeek.endOf('week')
+    for (let day = startWeek; day < endWeek; day = day.plus({ day: 1 })) {
+      days.push(this.prepareDay(day))
+    }
+    return days
+  },
+  generateMonthData(start, end) {
+    let days = []
+    for (let day = start; day < end; day = day.plus({ day: 1 })) {
+      days.push(this.prepareDay(day))
+    }
+
+    return days
+  },
+  prepareDay(day) {
+    return {
+      date: day.toISODate(),
+      dayNumber: day.day,
+      isCurrentMonth: isInCurrentMonth(day),
+      isToday: isToday(day),
+    }
+  },
+}
+
 watch([calendar.viewMode, calendar.currents], () => {
-  loadCalendar()
+  customCalendar.loadCalendar()
 })
 
-loadCalendar()
-
-function loadCalendar() {
-  console.log('Loaded')
-  let focusDate = DateTime.fromObject({
-    year: calendar.currents.year,
-    month: calendar.currents.month,
-  })
-  let start, end
-
-  if (calendar.viewMode.value === 'week') {
-    if (currentDate.year === selectedYear)
-      focusDate = DateTime.fromObject({ weekNumber: calendar.currents.week })
-    else
-      focusDate = focusDate.plus({ week: calendar.currents.week - 1 })
-    start = focusDate.startOf('week')
-    end = focusDate.endOf('week')
-  } else if (calendar.viewMode.value === 'month') {
-    focusDate = focusDate.startOf('month')
-    start = focusDate.startOf('week')
-    end = focusDate.endOf('month').endOf('week')
-  }
-
-  generateCalendarData(start, end, focusDate)
-}
-
-function generateCalendarData(startDate, endDate, focusDate) {
-  const tmpDays = []
-  for (let day = startDate; day < endDate; day = day.plus({ day: 1 })) {
-    const isCurrentMonth = isInCurrentMonth(day, focusDate)
-    const okIsToday = isToday(day)
-
-    tmpDays.push({
-      date: day.toISODate(),
-      isCurrentMonth,
-      isToday: okIsToday,
-    })
-  }
-
-  days.value = tmpDays
-}
+customCalendar.loadCalendar()
 
 function toLast() {
   if (calendar.viewMode.value === 'week')
@@ -239,11 +244,21 @@ function toNext() {
 function resetCalendar() {
   calendar.currents.year = selectedYear
   calendar.currents.month = selectedYear === currentDate.year ? currentDate.month : 1
-  calendar.currents.week = selectedYear === currentDate.year ? currentDate.weekNumber : 1
+  calendar.currents.weekPosition = 1
 }
 
 function addWeeks(howMany = 1) {
-  calendar.currents.week += howMany
+  const date = DateTime.fromObject({
+    year: calendar.currents.year,
+    month: calendar.currents.month,
+  })
+  const nextMonth = date.plus({ week: calendar.currents.weekPosition }).month
+  if (calendarState.viewMode.isWeek && nextMonth !== calendar.currents.month) {
+    calendar.currents.month = nextMonth
+    calendar.currents.weekPosition = 0
+    return
+  }
+  calendar.currents.weekPosition += howMany
 }
 
 function addMonths(howMany = 1) {
@@ -255,8 +270,8 @@ function updateViewMode(type) {
   calendar.viewMode.value = type
 }
 
-function isInCurrentMonth(date, currentMonth) {
-  return currentMonth.hasSame(date, 'month')
+function isInCurrentMonth(date) {
+  return calendar.currents.month === date.month
 }
 
 function isToday(date) {

From a7bc4695a7f909910bda63220b64b3c55c5a0c18 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Fri, 24 Jun 2022 02:16:51 +0200
Subject: [PATCH 06/18] #152 - final support for weeks

---
 .../js/Shared/Widgets/VacationCalendar.vue    | 107 ++++++++++++------
 1 file changed, 75 insertions(+), 32 deletions(-)

diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 6aa90e0..7d9de57 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -2,7 +2,7 @@
   <section class="bg-white shadow-md">
     <div class="grid grid-cols-3 grid-rows-1 items-center justify-center p-4 sm:px-6">
       <h2 class="text-lg font-medium leading-6 text-gray-900">
-        {{ calendarState.monthName }} {{ calendarState.isActualYear ? undefined : calendar.currents.year }}
+        {{ calendarState.monthName }} {{ !calendarState.isActualYear ? calendar.currents.year : undefined }}
       </h2>
       <div class="flex justify-center">
         <div class="flex items-center rounded-md shadow-sm md:items-stretch">
@@ -22,7 +22,7 @@
             type="button"
             class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
             :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
-            @click="resetCalendar"
+            @click="goToToday"
           >
             Dziś
           </button>
@@ -116,7 +116,10 @@
         </div>
       </div>
       <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
-        <div :class="[calendarState.viewMode.isWeek ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
+        <div
+          class="w-full grid grid-cols-7 gap-px"
+          :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
+        >
           <div
             v-for="(day, index) in days"
             :key="index"
@@ -149,7 +152,7 @@ let days = ref([])
 const months = useMonthInfo().getMonths()
 function getCurrentDate() {
   const { year, month, weekNumber } = DateTime.now()
-  return { year, month, weekNumber }
+  return { year, month, week: weekNumber }
 }
 const selectedYear = useCurrentYearPeriodInfo().year.value
 const currentDate = getCurrentDate()
@@ -159,7 +162,7 @@ const calendar = {
   currents: reactive({
     year: selectedYear,
     month: selectedYear === currentDate.year ? currentDate.month : 1,
-    weekPosition: 0,
+    week: selectedYear === currentDate.year ? currentDate.week : 0,
   }),
 }
 
@@ -170,16 +173,17 @@ const calendarState = reactive({
     details: computed(() => findViewMode(calendar.viewMode.value)),
   },
   monthName: computed(() => months[calendar.currents.month - 1]?.name),
-  isActualYear: computed(() => calendar.currents.year !== selectedYear),
-  isPrevious: computed(() => calendar.currents.month !== 1),
-  isNext: computed(() => calendar.currents.month !== 12),
+  isActualYear: computed(() => calendar.currents.year === DateTime.now().year),
+  isPrevious: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 1 : calendar.currents.week > 0),
+  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber),
 })
 
 const customCalendar = {
   loadCalendar() {
     const date = DateTime.fromObject({
       year: calendar.currents.year,
-      month: calendar.currents.month,
+      month: calendarState.viewMode.isMonth ? calendar.currents.month : 1,
+      day: 1,
     })
     days.value = this.generateCalendarData(date)
   },
@@ -195,8 +199,13 @@ const customCalendar = {
     return []
   },
   generateWeekData(start) {
-    let days = []
-    const startWeek = start.plus({ week: calendar.currents.weekPosition })
+    let days = [], startWeek
+    if (calendar.currents.month === 1 && calendar.currents.week === 0)
+      startWeek = DateTime.fromObject({ year: calendar.currents.year, month: 1, day: 1 }).startOf('week')
+    else if (calendarState.isActualYear)
+      startWeek = DateTime.fromObject({ weekNumber: calendar.currents.week })
+    else
+      startWeek = start.plus({ week: calendar.currents.week })
     const endWeek = startWeek.endOf('week')
     for (let day = startWeek; day < endWeek; day = day.plus({ day: 1 })) {
       days.push(this.prepareDay(day))
@@ -229,44 +238,78 @@ customCalendar.loadCalendar()
 
 function toLast() {
   if (calendar.viewMode.value === 'week')
-    addWeeks(-1)
+    minusWeek()
   else
-    addMonths(-1)
+    minusMonth()
 }
 
 function toNext() {
-  if (calendar.viewMode.value === 'week') {
-    addWeeks()
-  } else
-    addMonths()
+  if (calendar.viewMode.value === 'week')
+    addWeek()
+  else
+    addMonth()
 }
 
-function resetCalendar() {
-  calendar.currents.year = selectedYear
-  calendar.currents.month = selectedYear === currentDate.year ? currentDate.month : 1
-  calendar.currents.weekPosition = 1
+function resetCalendar(config = {}) {
+  const currentMonth = isUndefined(config.month) ? currentDate.month : config.month
+  const currentWeek = isUndefined(config.week) ? currentDate.week : config.week
+
+  calendar.currents.year = isUndefined(config.year) ? selectedYear : config.month
+  calendar.currents.month = calendarState.isActualYear || !isUndefined(config.year) ? currentMonth : 1
+  calendar.currents.week = calendarState.isActualYear || !isUndefined(config.year) ? currentWeek : 1
 }
 
-function addWeeks(howMany = 1) {
-  const date = DateTime.fromObject({
+function isUndefined(value) {
+  return value === undefined
+}
+
+function addWeek(minus = false) {
+  const howMany = minus ? -1: 1
+  let nextMonth, date = DateTime.fromObject({
     year: calendar.currents.year,
-    month: calendar.currents.month,
+    month: 1,
+    day: 1,
   })
-  const nextMonth = date.plus({ week: calendar.currents.weekPosition }).month
-  if (calendarState.viewMode.isWeek && nextMonth !== calendar.currents.month) {
-    calendar.currents.month = nextMonth
-    calendar.currents.weekPosition = 0
+
+  date = date.plus({ week: calendar.currents.week + howMany })
+
+  const startWeekDay = date.startOf('week'), endWeekDay = date.endOf('week')
+  nextMonth = howMany > 0 ? startWeekDay.month : endWeekDay.month
+  if (howMany < 0 && endWeekDay.day === endWeekDay.daysInMonth)
+    calendar.currents.week--
+  else if (howMany > 0 && startWeekDay.day === 1)
+    calendar.currents.week++
+
+  if (nextMonth !== calendar.currents.month) {
+    calendar.currents.month = calendar.currents.week > 1 ? nextMonth : 1
+    if (calendar.currents.week === 1)
+      calendar.currents.week = 0
     return
   }
-  calendar.currents.weekPosition += howMany
+  calendar.currents.week += howMany
 }
 
-function addMonths(howMany = 1) {
-  calendar.currents.month += howMany
+function minusWeek() {
+  addWeek(true)
+}
+
+function addMonth(minus = false) {
+  calendar.currents.month += minus ? -1 : 1
+}
+
+function minusMonth() {
+  addMonth(true)
+}
+
+function goToToday() {
+  resetCalendar({ year: currentDate.year, months: currentDate.month, week: currentDate.week })
 }
 
 function updateViewMode(type) {
-  resetCalendar()
+  if (type === 'month')
+    resetCalendar({ week: 1 })
+  else
+    resetCalendar()
   calendar.viewMode.value = type
 }
 

From e7c1028da18f7f3a294f62b3d9dfd0bc019a1a66 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Mon, 27 Jun 2022 11:55:55 +0200
Subject: [PATCH 07/18] #152 - updated style

---
 .../js/Shared/Widgets/VacationCalendar.vue    | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 7d9de57..0ae8b91 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -123,12 +123,12 @@
           <div
             v-for="(day, index) in days"
             :key="index"
-            class="flex flex-col"
-            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', calendarState.viewMode.isWeek && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, calendarState.viewMode.isWeek ? 'day' : 'month-day', 'relative py-2 px-3']"
+            class="flex flex-col relative py-2 px-3"
+            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', { 'hover:bg-blumilk-25': day.isCurrentMonth && !day.isWeekend }, { 'day': calendarState.viewMode.isWeek }, { 'bg-red-100': day.isCurrentMonth && day.isWeekend }, { 'bg-red-50': !day.isCurrentMonth && day.isWeekend }, { 'text-red-800': day.isWeekend }]"
           >
             <time
               :datetime="day.date"
-              :class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
+              :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
             >
               {{ day.date.split('-').pop().replace(/^0/, '') }}
             </time>
@@ -226,6 +226,7 @@ const customCalendar = {
       dayNumber: day.day,
       isCurrentMonth: isInCurrentMonth(day),
       isToday: isToday(day),
+      isWeekend: isWeekend(day),
     }
   },
 }
@@ -317,6 +318,10 @@ function isInCurrentMonth(date) {
   return calendar.currents.month === date.month
 }
 
+function isWeekend(date) {
+  return date.weekday === 6 || date.weekday === 7
+}
+
 function isToday(date) {
   return date.toISODate() === DateTime.local().toISODate()
 }
@@ -343,11 +348,6 @@ function isToday(date) {
   content: "Pt";
 }
 
-.day:nth-of-type(7n - 1):before,
-.day:nth-of-type(7n):before {
-  color: #991b1b;
-}
-
 .day:nth-of-type(7n - 1):before {
   content: "Sb";
 }
@@ -355,8 +355,4 @@ function isToday(date) {
 .day:nth-of-type(7n):before {
   content: "Nd";
 }
-
-.month-day:nth-of-type(7n - 1), .month-day:nth-of-type(7n) {
-  background-color: #fee2e2;
-}
 </style>

From 4392b666e1014c51bd932c7ab803320ef649cc41 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Mon, 27 Jun 2022 12:42:15 +0200
Subject: [PATCH 08/18] #152 - small corrections

---
 resources/js/Shared/Widgets/VacationCalendar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 0ae8b91..d8b709f 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -130,7 +130,7 @@
               :datetime="day.date"
               :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
             >
-              {{ day.date.split('-').pop().replace(/^0/, '') }}
+              {{ day.dayNumber }}
             </time>
           </div>
         </div>
@@ -257,7 +257,7 @@ function resetCalendar(config = {}) {
 
   calendar.currents.year = isUndefined(config.year) ? selectedYear : config.month
   calendar.currents.month = calendarState.isActualYear || !isUndefined(config.year) ? currentMonth : 1
-  calendar.currents.week = calendarState.isActualYear || !isUndefined(config.year) ? currentWeek : 1
+  calendar.currents.week = calendarState.isActualYear || !isUndefined(config.week) ? currentWeek : 0
 }
 
 function isUndefined(value) {
@@ -308,7 +308,7 @@ function goToToday() {
 
 function updateViewMode(type) {
   if (type === 'month')
-    resetCalendar({ week: 1 })
+    resetCalendar({ week: 0 })
   else
     resetCalendar()
   calendar.viewMode.value = type

From eb644fa494a94d2b263e78763e303261ed7382af Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Tue, 28 Jun 2022 16:21:55 +0200
Subject: [PATCH 09/18] #152 - added holidays

---
 .../Http/Controllers/DashboardController.php  |  6 ++
 resources/js/Pages/Dashboard.vue              |  5 +-
 .../Shared/Widgets/Calendar/DateComponent.vue | 70 +++++++++++++++++++
 .../js/Shared/Widgets/VacationCalendar.vue    | 33 ++++++---
 4 files changed, 102 insertions(+), 12 deletions(-)
 create mode 100644 resources/js/Shared/Widgets/Calendar/DateComponent.vue

diff --git a/app/Infrastructure/Http/Controllers/DashboardController.php b/app/Infrastructure/Http/Controllers/DashboardController.php
index 9f164a9..63a62d9 100644
--- a/app/Infrastructure/Http/Controllers/DashboardController.php
+++ b/app/Infrastructure/Http/Controllers/DashboardController.php
@@ -12,6 +12,7 @@ use Toby\Domain\UserVacationStatsRetriever;
 use Toby\Domain\VacationRequestStatesRetriever;
 use Toby\Domain\VacationTypeConfigRetriever;
 use Toby\Eloquent\Helpers\YearPeriodRetriever;
+use Toby\Eloquent\Models\Holiday;
 use Toby\Eloquent\Models\VacationRequest;
 use Toby\Infrastructure\Http\Resources\HolidayResource;
 use Toby\Infrastructure\Http\Resources\VacationRequestResource;
@@ -54,6 +55,8 @@ class DashboardController extends Controller
             ->limit(3)
             ->get();
 
+        $allHolidays = $yearPeriod->holidays;
+
         $limit = $vacationStatsRetriever->getVacationDaysLimit($user, $yearPeriod);
         $used = $vacationStatsRetriever->getUsedVacationDays($user, $yearPeriod);
         $pending = $vacationStatsRetriever->getPendingVacationDays($user, $yearPeriod);
@@ -66,6 +69,9 @@ class DashboardController extends Controller
             "remoteDays" => VacationResource::collection($remoteDays),
             "vacationRequests" => VacationRequestResource::collection($vacationRequests),
             "holidays" => HolidayResource::collection($holidays),
+            "allHolidays" => $allHolidays->mapWithKeys(
+                fn(Holiday $holiday): array => [$holiday->date->toDateString() => $holiday->name],
+            ),
             "stats" => [
                 "limit" => $limit,
                 "remaining" => $remaining,
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 1188c6d..5b5f5ae 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -3,7 +3,9 @@
   <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
     <div class="grid grid-cols-1 gap-4 xl:col-span-2">
       <Welcome :user="auth.user" />
-      <VacationCalendar />
+      <VacationCalendar
+        :holidays="allHolidays"
+      />
       <VacationStats :stats="stats" />
     </div>
     <div class="grid grid-cols-1 gap-4">
@@ -50,5 +52,6 @@ defineProps({
   can: Object,
   stats: Object,
   years: Object,
+  allHolidays: Object,
 })
 </script>
diff --git a/resources/js/Shared/Widgets/Calendar/DateComponent.vue b/resources/js/Shared/Widgets/Calendar/DateComponent.vue
new file mode 100644
index 0000000..63f6993
--- /dev/null
+++ b/resources/js/Shared/Widgets/Calendar/DateComponent.vue
@@ -0,0 +1,70 @@
+<template>
+  <template>
+    <Popper
+      v-if="day.isHoliday"
+      as="div"
+      open-delay="200"
+      hover
+      offset-distance="0"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <time
+        :datetime="day.date"
+        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white', 'text-red-600' ]"
+      >
+        {{ day.dayNumber }}
+      </time>
+      <template #content>
+        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
+          {{ getHolidayDescription(day) }}
+        </div>
+      </template>
+    </Popper>
+    <div
+      v-else
+      :class="{ 'hello': isActive && !day.isWeekend }"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <time
+        :datetime="day.date"
+        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
+      >
+        {{ day.dayNumber }}
+      </time>
+    </div>
+  </template>
+</template>
+
+<script setup>
+import Popper from 'vue3-popper'
+import { defineProps, ref } from 'vue'
+
+const props = defineProps({
+  day: {
+    type: Object,
+    required: true,
+  },
+  holidaydescription: {
+    type: Function,
+  },
+})
+
+const isActive = ref(false)
+
+function onMouseover() {
+  if (!isActive.value)
+    isActive.value = true
+}
+
+function onMouseleave() {
+  if (isActive.value)
+    isActive.value = false
+}
+
+function getHolidayDescription(day) {
+  return props.holidaydescription(day)
+}
+
+</script>
\ No newline at end of file
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index d8b709f..5d5dc2c 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -120,19 +120,14 @@
           class="w-full grid grid-cols-7 gap-px"
           :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
         >
-          <div
+          <DateComponent
             v-for="(day, index) in days"
             :key="index"
+            :day="day"
             class="flex flex-col relative py-2 px-3"
             :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', { 'hover:bg-blumilk-25': day.isCurrentMonth && !day.isWeekend }, { 'day': calendarState.viewMode.isWeek }, { 'bg-red-100': day.isCurrentMonth && day.isWeekend }, { 'bg-red-50': !day.isCurrentMonth && day.isWeekend }, { 'text-red-800': day.isWeekend }]"
-          >
-            <time
-              :datetime="day.date"
-              :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
-            >
-              {{ day.dayNumber }}
-            </time>
-          </div>
+            :holidaydescription="getHolidayDescription"
+          />
         </div>
       </div>
     </div>
@@ -147,16 +142,23 @@ import { DateTime } from 'luxon'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 import { useMonthInfo } from '@/Composables/monthInfo'
 import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions'
+import DateComponent from '@/Shared/Widgets/Calendar/DateComponent'
+
+const props = defineProps({
+  holidays: Object,
+})
 
 let days = ref([])
-const months = useMonthInfo().getMonths()
+
 function getCurrentDate() {
   const { year, month, weekNumber } = DateTime.now()
   return { year, month, week: weekNumber }
 }
-const selectedYear = useCurrentYearPeriodInfo().year.value
 const currentDate = getCurrentDate()
 
+const months = useMonthInfo().getMonths()
+const selectedYear = useCurrentYearPeriodInfo().year.value
+
 const calendar = {
   viewMode: ref('week'),
   currents: reactive({
@@ -227,6 +229,7 @@ const customCalendar = {
       isCurrentMonth: isInCurrentMonth(day),
       isToday: isToday(day),
       isWeekend: isWeekend(day),
+      isHoliday: isHoliday(day),
     }
   },
 }
@@ -325,6 +328,14 @@ function isWeekend(date) {
 function isToday(date) {
   return date.toISODate() === DateTime.local().toISODate()
 }
+
+function isHoliday(date) {
+  return props.holidays[date.toISODate()] !== undefined
+}
+
+function getHolidayDescription(day) {
+  return props.holidays[day.date]
+}
 </script>
 
 <style lang="css">

From 6e627d11c8b1d24e98d6b149b1869f601c2a512b Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Mon, 4 Jul 2022 00:21:11 +0200
Subject: [PATCH 10/18] #152 - added vacations

---
 .../Http/Controllers/DashboardController.php  | 26 +++++++++++++++
 resources/js/Pages/Dashboard.vue              |  4 +++
 .../Shared/Widgets/Calendar/DateComponent.vue | 32 ++++++++++++++++---
 .../js/Shared/Widgets/VacationCalendar.vue    | 17 ++++++++--
 4 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/app/Infrastructure/Http/Controllers/DashboardController.php b/app/Infrastructure/Http/Controllers/DashboardController.php
index 63a62d9..317fd22 100644
--- a/app/Infrastructure/Http/Controllers/DashboardController.php
+++ b/app/Infrastructure/Http/Controllers/DashboardController.php
@@ -13,8 +13,10 @@ use Toby\Domain\VacationRequestStatesRetriever;
 use Toby\Domain\VacationTypeConfigRetriever;
 use Toby\Eloquent\Helpers\YearPeriodRetriever;
 use Toby\Eloquent\Models\Holiday;
+use Toby\Eloquent\Models\Vacation;
 use Toby\Eloquent\Models\VacationRequest;
 use Toby\Infrastructure\Http\Resources\HolidayResource;
+use Toby\Infrastructure\Http\Resources\SimpleVacationRequestResource;
 use Toby\Infrastructure\Http\Resources\VacationRequestResource;
 use Toby\Infrastructure\Http\Resources\VacationResource;
 
@@ -57,6 +59,20 @@ class DashboardController extends Controller
 
         $allHolidays = $yearPeriod->holidays;
 
+        $approvedVacations = $request->user()
+            ->vacations()
+            ->with("vacationRequest.vacations")
+            ->whereBelongsTo($yearPeriod)
+            ->approved()
+            ->get();
+
+        $pendingVacations = $request->user()
+            ->vacations()
+            ->with("vacationRequest.vacations")
+            ->whereBelongsTo($yearPeriod)
+            ->pending()
+            ->get();
+
         $limit = $vacationStatsRetriever->getVacationDaysLimit($user, $yearPeriod);
         $used = $vacationStatsRetriever->getUsedVacationDays($user, $yearPeriod);
         $pending = $vacationStatsRetriever->getPendingVacationDays($user, $yearPeriod);
@@ -72,6 +88,16 @@ class DashboardController extends Controller
             "allHolidays" => $allHolidays->mapWithKeys(
                 fn(Holiday $holiday): array => [$holiday->date->toDateString() => $holiday->name],
             ),
+            "approvedVacations" => $approvedVacations->mapWithKeys(
+                fn(Vacation $vacation): array => [
+                    $vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest),
+                ],
+            ),
+            "pendingVacations" => $pendingVacations->mapWithKeys(
+                fn(Vacation $vacation): array => [
+                    $vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest),
+                ],
+            ),
             "stats" => [
                 "limit" => $limit,
                 "remaining" => $remaining,
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 5b5f5ae..b6968ba 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -5,6 +5,8 @@
       <Welcome :user="auth.user" />
       <VacationCalendar
         :holidays="allHolidays"
+        :approved-vacations="approvedVacations"
+        :pending-vacations="pendingVacations"
       />
       <VacationStats :stats="stats" />
     </div>
@@ -53,5 +55,7 @@ defineProps({
   stats: Object,
   years: Object,
   allHolidays: Object,
+  approvedVacations: Object,
+  pendingVacations: Object,
 })
 </script>
diff --git a/resources/js/Shared/Widgets/Calendar/DateComponent.vue b/resources/js/Shared/Widgets/Calendar/DateComponent.vue
index 63f6993..0e0c159 100644
--- a/resources/js/Shared/Widgets/Calendar/DateComponent.vue
+++ b/resources/js/Shared/Widgets/Calendar/DateComponent.vue
@@ -1,5 +1,7 @@
 <template>
-  <template>
+  <div
+    :class="[ (day.isVacation || day.isPendingVacation) && 'border-b-2 border-dashed', day.isPendingVacation && 'border-lime-500', day.isVacation && 'border-blumilk-500' ]"
+  >
     <Popper
       v-if="day.isHoliday"
       as="div"
@@ -21,9 +23,29 @@
         </div>
       </template>
     </Popper>
+    <Popper
+      v-else-if="day.isPendingVacation"
+      as="div"
+      open-delay="200"
+      hover
+      offset-distance="0"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <time
+        :datetime="day.date"
+        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
+      >
+        {{ day.dayNumber }}
+      </time>
+      <template #content>
+        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
+          {{ getHolidayDescription(day) }}
+        </div>
+      </template>
+    </Popper>
     <div
       v-else
-      :class="{ 'hello': isActive && !day.isWeekend }"
       @mouseover.passive="onMouseover"
       @mouseleave="onMouseleave"
     >
@@ -34,7 +56,7 @@
         {{ day.dayNumber }}
       </time>
     </div>
-  </template>
+  </div>
 </template>
 
 <script setup>
@@ -46,7 +68,7 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-  holidaydescription: {
+  holidayDescription: {
     type: Function,
   },
 })
@@ -64,7 +86,7 @@ function onMouseleave() {
 }
 
 function getHolidayDescription(day) {
-  return props.holidaydescription(day)
+  return props.holidayDescription(day)
 }
 
 </script>
\ No newline at end of file
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 5d5dc2c..8aa689c 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -126,7 +126,7 @@
             :day="day"
             class="flex flex-col relative py-2 px-3"
             :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', { 'hover:bg-blumilk-25': day.isCurrentMonth && !day.isWeekend }, { 'day': calendarState.viewMode.isWeek }, { 'bg-red-100': day.isCurrentMonth && day.isWeekend }, { 'bg-red-50': !day.isCurrentMonth && day.isWeekend }, { 'text-red-800': day.isWeekend }]"
-            :holidaydescription="getHolidayDescription"
+            :holiday-description="getHolidayDescription"
           />
         </div>
       </div>
@@ -146,6 +146,8 @@ import DateComponent from '@/Shared/Widgets/Calendar/DateComponent'
 
 const props = defineProps({
   holidays: Object,
+  approvedVacations: Object,
+  pendingVacations: Object,
 })
 
 let days = ref([])
@@ -223,13 +225,16 @@ const customCalendar = {
     return days
   },
   prepareDay(day) {
+    const isCurrentMonth = isInCurrentMonth(day)
     return {
       date: day.toISODate(),
       dayNumber: day.day,
-      isCurrentMonth: isInCurrentMonth(day),
+      isCurrentMonth: isCurrentMonth,
       isToday: isToday(day),
       isWeekend: isWeekend(day),
       isHoliday: isHoliday(day),
+      isVacation: isCurrentMonth && isVacation(day),
+      isPendingVacation: isCurrentMonth && isPendingVacation(day),
     }
   },
 }
@@ -336,6 +341,14 @@ function isHoliday(date) {
 function getHolidayDescription(day) {
   return props.holidays[day.date]
 }
+
+function isVacation(date) {
+  return props.approvedVacations[date.toISODate()] !== undefined
+}
+
+function isPendingVacation(date) {
+  return props.pendingVacations[date.toISODate()] !== undefined
+}
 </script>
 
 <style lang="css">

From 5c3833d4cb4267170835b79c20d27224655b3691 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Mon, 4 Jul 2022 08:39:12 +0200
Subject: [PATCH 11/18] - component renamed

---
 .../Widgets/Calendar/{DateComponent.vue => DayComponent.vue}  | 0
 resources/js/Shared/Widgets/VacationCalendar.vue              | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename resources/js/Shared/Widgets/Calendar/{DateComponent.vue => DayComponent.vue} (100%)

diff --git a/resources/js/Shared/Widgets/Calendar/DateComponent.vue b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
similarity index 100%
rename from resources/js/Shared/Widgets/Calendar/DateComponent.vue
rename to resources/js/Shared/Widgets/Calendar/DayComponent.vue
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 8aa689c..bbbf8d5 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -120,7 +120,7 @@
           class="w-full grid grid-cols-7 gap-px"
           :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
         >
-          <DateComponent
+          <DayComponent
             v-for="(day, index) in days"
             :key="index"
             :day="day"
@@ -142,7 +142,7 @@ import { DateTime } from 'luxon'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 import { useMonthInfo } from '@/Composables/monthInfo'
 import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions'
-import DateComponent from '@/Shared/Widgets/Calendar/DateComponent'
+import DayComponent from '@/Shared/Widgets/Calendar/DayComponent'
 
 const props = defineProps({
   holidays: Object,

From a9c476cb8eb6ae0ad6f73603593e5bc82fda25d9 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Mon, 4 Jul 2022 09:50:29 +0200
Subject: [PATCH 12/18] wip

---
 .../Shared/Widgets/Calendar/DayComponent.vue  | 22 +++++++++----------
 .../js/Shared/Widgets/VacationCalendar.vue    | 14 +++++++++++-
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/resources/js/Shared/Widgets/Calendar/DayComponent.vue b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
index 0e0c159..b311f27 100644
--- a/resources/js/Shared/Widgets/Calendar/DayComponent.vue
+++ b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="[ (day.isVacation || day.isPendingVacation) && 'border-b-2 border-dashed', day.isPendingVacation && 'border-lime-500', day.isVacation && 'border-blumilk-500' ]"
+    :class="[ (day.isVacation || day.isPendingVacation) && `border-b-2 border-dashed ${getVacationBorder(day)}` ]"
   >
     <Popper
       v-if="day.isHoliday"
@@ -39,9 +39,7 @@
         {{ day.dayNumber }}
       </time>
       <template #content>
-        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
-          {{ getHolidayDescription(day) }}
-        </div>
+        <VacationPopup :vacation="getVacationInfo(day)" />
       </template>
     </Popper>
     <div
@@ -62,13 +60,20 @@
 <script setup>
 import Popper from 'vue3-popper'
 import { defineProps, ref } from 'vue'
+import VacationPopup from '@/Shared/VacationPopup'
 
-const props = defineProps({
+defineProps({
   day: {
     type: Object,
     required: true,
   },
-  holidayDescription: {
+  getHolidayDescription: {
+    type: Function,
+  },
+  getVacationBorder: {
+    type: Function,
+  },
+  getVacationInfo: {
     type: Function,
   },
 })
@@ -84,9 +89,4 @@ function onMouseleave() {
   if (isActive.value)
     isActive.value = false
 }
-
-function getHolidayDescription(day) {
-  return props.holidayDescription(day)
-}
-
 </script>
\ No newline at end of file
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index bbbf8d5..d834fd2 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -126,7 +126,9 @@
             :day="day"
             class="flex flex-col relative py-2 px-3"
             :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', { 'hover:bg-blumilk-25': day.isCurrentMonth && !day.isWeekend }, { 'day': calendarState.viewMode.isWeek }, { 'bg-red-100': day.isCurrentMonth && day.isWeekend }, { 'bg-red-50': !day.isCurrentMonth && day.isWeekend }, { 'text-red-800': day.isWeekend }]"
-            :holiday-description="getHolidayDescription"
+            :get-holiday-description="getHolidayDescription"
+            :get-vacation-border="getVacationBorder"
+            :get-vacation-info="getVacationInfo"
           />
         </div>
       </div>
@@ -139,6 +141,7 @@ import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { ref, watch, computed, reactive } from 'vue'
 import { DateTime } from 'luxon'
+import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 import { useMonthInfo } from '@/Composables/monthInfo'
 import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions'
@@ -159,6 +162,7 @@ function getCurrentDate() {
 const currentDate = getCurrentDate()
 
 const months = useMonthInfo().getMonths()
+const { findType } = useVacationTypeInfo()
 const selectedYear = useCurrentYearPeriodInfo().year.value
 
 const calendar = {
@@ -349,6 +353,14 @@ function isVacation(date) {
 function isPendingVacation(date) {
   return props.pendingVacations[date.toISODate()] !== undefined
 }
+
+function getVacationBorder(day) {
+  return findType(getVacationInfo(day).type)?.border
+}
+
+function getVacationInfo(day) {
+  return day.isVacation ? props.approvedVacations[day.date] : props.pendingVacations[day.date]
+}
 </script>
 
 <style lang="css">

From 94f433de6ea7692c2db06ebe6fdbe95136b0def1 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Mon, 4 Jul 2022 10:05:04 +0200
Subject: [PATCH 13/18] #152 - added redirections

---
 .../js/Shared/Widgets/Calendar/DayComponent.vue    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/resources/js/Shared/Widgets/Calendar/DayComponent.vue b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
index b311f27..712b8d0 100644
--- a/resources/js/Shared/Widgets/Calendar/DayComponent.vue
+++ b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
@@ -43,7 +43,19 @@
       </template>
     </Popper>
     <div
+      v-else-if="day.isWeekend"
+    >
+      <time
+        :datetime="day.date"
+        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
+      >
+        {{ day.dayNumber }}
+      </time>
+    </div>
+    <InertiaLink
       v-else
+      href="/vacation/requests/create"
+      :data="{ 'from_date': day.date }"
       @mouseover.passive="onMouseover"
       @mouseleave="onMouseleave"
     >
@@ -53,7 +65,7 @@
       >
         {{ day.dayNumber }}
       </time>
-    </div>
+    </InertiaLink>
   </div>
 </template>
 

From 1d7b4da903cbf015c96f19220277b9d652286ae1 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Mon, 4 Jul 2022 10:45:14 +0200
Subject: [PATCH 14/18] - added new line in file

---
 resources/js/Shared/Widgets/Calendar/DayComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Shared/Widgets/Calendar/DayComponent.vue b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
index 712b8d0..3dcaee3 100644
--- a/resources/js/Shared/Widgets/Calendar/DayComponent.vue
+++ b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
@@ -101,4 +101,4 @@ function onMouseleave() {
   if (isActive.value)
     isActive.value = false
 }
-</script>
\ No newline at end of file
+</script>

From 783586d3ed05f16c5a9569e6db27bc3788923122 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Wed, 6 Jul 2022 15:08:13 +0200
Subject: [PATCH 15/18] - improved calendar responsiveness

---
 resources/js/Shared/Widgets/VacationCalendar.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index d834fd2..233f405 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -10,6 +10,7 @@
             v-if="calendarState.isPrevious"
             type="button"
             class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            :class="{ 'rounded-r-md border-r md:rounded-r-none md:border-r-0': !calendarState.isNext }"
             @click="toLast"
           >
             <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
@@ -24,13 +25,17 @@
             :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
             @click="goToToday"
           >
-            Dziś
+            Dzisiaj
           </button>
-          <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
+          <span
+            class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
+            :class="{ 'hidden': !calendarState.isPrevious || !calendarState.isNext }"
+          />
           <button
             v-if="calendarState.isNext"
             type="button"
             class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            :class="{ 'rounded-l-md border-l md:rounded-l-none md:border-l-0': !calendarState.isPrevious }"
             @click="toNext"
           >
             <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
@@ -49,7 +54,8 @@
           type="button"
           class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
         >
-          {{ calendarState.viewMode.details.name }}
+          <span class="md:hidden">{{ calendarState.viewMode.details.shortcut }}</span>
+          <span class="hidden md:inline-block">{{ calendarState.viewMode.details.name }}</span>
           <ChevronDownIcon
             class="ml-2 h-5 w-5 text-gray-400"
             aria-hidden="true"
@@ -164,6 +170,7 @@ const currentDate = getCurrentDate()
 const months = useMonthInfo().getMonths()
 const { findType } = useVacationTypeInfo()
 const selectedYear = useCurrentYearPeriodInfo().year.value
+const weeksInYear = DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber
 
 const calendar = {
   viewMode: ref('week'),
@@ -183,7 +190,7 @@ const calendarState = reactive({
   monthName: computed(() => months[calendar.currents.month - 1]?.name),
   isActualYear: computed(() => calendar.currents.year === DateTime.now().year),
   isPrevious: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 1 : calendar.currents.week > 0),
-  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber),
+  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < weeksInYear),
 })
 
 const customCalendar = {

From 0398b44141b64012a5bf343802248a4bcf49646d Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Wed, 6 Jul 2022 21:33:56 +0200
Subject: [PATCH 16/18] - updated style

---
 .../Shared/Widgets/Calendar/DayComponent.vue  | 20 +++++++++++++++++--
 .../js/Shared/Widgets/VacationCalendar.vue    |  2 +-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/resources/js/Shared/Widgets/Calendar/DayComponent.vue b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
index 3dcaee3..9de95d7 100644
--- a/resources/js/Shared/Widgets/Calendar/DayComponent.vue
+++ b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
@@ -1,6 +1,20 @@
 <template>
   <div
-    :class="[ (day.isVacation || day.isPendingVacation) && `border-b-2 border-dashed ${getVacationBorder(day)}` ]"
+    class="box-border"
+    :class="[
+      day.isCurrentMonth ? {
+        'bg-red-100': day.isWeekend,
+        'bg-white hover:bg-blumilk-25': !day.isWeekend && !day.isHoliday,
+        'bg-red-100 text-red-800': day.isHoliday || day.isWeekend
+      } : [
+        'bg-gray-50 text-gray-500',
+        {
+          'bg-red-50': day.isWeekend
+        }
+      ],
+      day.isHoliday && 'font-bold cursor-default',
+      (day.isVacation || day.isPendingVacation) && `border-b-4 border-dashed ${getVacationBorder(day)}`
+    ]"
   >
     <Popper
       v-if="day.isHoliday"
@@ -13,7 +27,7 @@
     >
       <time
         :datetime="day.date"
-        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white', 'text-red-600' ]"
+        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
       >
         {{ day.dayNumber }}
       </time>
@@ -44,9 +58,11 @@
     </Popper>
     <div
       v-else-if="day.isWeekend"
+      class="text-red-800"
     >
       <time
         :datetime="day.date"
+        class="cursor-default"
         :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
       >
         {{ day.dayNumber }}
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 233f405..3a25986 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -131,7 +131,7 @@
             :key="index"
             :day="day"
             class="flex flex-col relative py-2 px-3"
-            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', { 'hover:bg-blumilk-25': day.isCurrentMonth && !day.isWeekend }, { 'day': calendarState.viewMode.isWeek }, { 'bg-red-100': day.isCurrentMonth && day.isWeekend }, { 'bg-red-50': !day.isCurrentMonth && day.isWeekend }, { 'text-red-800': day.isWeekend }]"
+            :class="{ 'day': calendarState.viewMode.isWeek }"
             :get-holiday-description="getHolidayDescription"
             :get-vacation-border="getVacationBorder"
             :get-vacation-info="getVacationInfo"

From 94350f8a820b32352e7960b12eb5b315855fc684 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Thu, 7 Jul 2022 00:15:06 +0200
Subject: [PATCH 17/18] #152 - updated style and added icons

---
 .../Shared/Widgets/Calendar/DayComponent.vue  | 32 ++++++++++---------
 .../js/Shared/Widgets/VacationCalendar.vue    | 20 ++++++++----
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/resources/js/Shared/Widgets/Calendar/DayComponent.vue b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
index 9de95d7..8cc6fc7 100644
--- a/resources/js/Shared/Widgets/Calendar/DayComponent.vue
+++ b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
@@ -13,7 +13,7 @@
         }
       ],
       day.isHoliday && 'font-bold cursor-default',
-      (day.isVacation || day.isPendingVacation) && `border-b-4 border-dashed ${getVacationBorder(day)}`
+      (day.isPendingVacation) && `border-b-4 border-dashed ${day.getVacationType.border} md:border-blumilk-600`
     ]"
   >
     <Popper
@@ -38,7 +38,7 @@
       </template>
     </Popper>
     <Popper
-      v-else-if="day.isPendingVacation"
+      v-else-if="day.isVacation || day.isPendingVacation"
       as="div"
       open-delay="200"
       hover
@@ -46,14 +46,21 @@
       @mouseover.passive="onMouseover"
       @mouseleave="onMouseleave"
     >
-      <time
-        :datetime="day.date"
-        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
-      >
-        {{ day.dayNumber }}
-      </time>
+      <div class="flex justify-between">
+        <time
+          :datetime="day.date"
+          :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
+        >
+          {{ day.dayNumber }}
+        </time>
+        <div class="hidden md:inline-block">
+          <VacationIcon
+            :type="day.getVacationType.value"
+          />
+        </div>
+      </div>
       <template #content>
-        <VacationPopup :vacation="getVacationInfo(day)" />
+        <VacationPopup :vacation="day.getVacationInfo" />
       </template>
     </Popper>
     <div
@@ -89,6 +96,7 @@
 import Popper from 'vue3-popper'
 import { defineProps, ref } from 'vue'
 import VacationPopup from '@/Shared/VacationPopup'
+import VacationIcon from '@/Shared/VacationTypeCalendarIcon'
 
 defineProps({
   day: {
@@ -98,12 +106,6 @@ defineProps({
   getHolidayDescription: {
     type: Function,
   },
-  getVacationBorder: {
-    type: Function,
-  },
-  getVacationInfo: {
-    type: Function,
-  },
 })
 
 const isActive = ref(false)
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 3a25986..2deba40 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -133,8 +133,6 @@
             class="flex flex-col relative py-2 px-3"
             :class="{ 'day': calendarState.viewMode.isWeek }"
             :get-holiday-description="getHolidayDescription"
-            :get-vacation-border="getVacationBorder"
-            :get-vacation-info="getVacationInfo"
           />
         </div>
       </div>
@@ -237,15 +235,21 @@ const customCalendar = {
   },
   prepareDay(day) {
     const isCurrentMonth = isInCurrentMonth(day)
-    return {
+    const startDay = {
       date: day.toISODate(),
+      isVacation: isCurrentMonth && isVacation(day),
+      isPendingVacation: isCurrentMonth && isPendingVacation(day),
+    }
+
+    return {
+      ...startDay,
       dayNumber: day.day,
-      isCurrentMonth: isCurrentMonth,
+      isCurrentMonth,
       isToday: isToday(day),
       isWeekend: isWeekend(day),
       isHoliday: isHoliday(day),
-      isVacation: isCurrentMonth && isVacation(day),
-      isPendingVacation: isCurrentMonth && isPendingVacation(day),
+      getVacationType: startDay.isVacation || startDay.isPendingVacation ? getVacationType(startDay) : undefined,
+      getVacationInfo: startDay.isVacation || startDay.isPendingVacation ? getVacationInfo(startDay) : undefined,
     }
   },
 }
@@ -365,6 +369,10 @@ function getVacationBorder(day) {
   return findType(getVacationInfo(day).type)?.border
 }
 
+function getVacationType(day) {
+  return findType(getVacationInfo(day).type)
+}
+
 function getVacationInfo(day) {
   return day.isVacation ? props.approvedVacations[day.date] : props.pendingVacations[day.date]
 }

From 0ddbec1499abc389bb7ecad4289a2d3cad9aeb27 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Thu, 7 Jul 2022 09:11:40 +0200
Subject: [PATCH 18/18] - small improvements

---
 .../Shared/Widgets/Calendar/DayComponent.vue  |  8 +--
 .../js/Shared/Widgets/VacationCalendar.vue    | 61 +++++++++----------
 2 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/resources/js/Shared/Widgets/Calendar/DayComponent.vue b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
index 8cc6fc7..ec1c8c1 100644
--- a/resources/js/Shared/Widgets/Calendar/DayComponent.vue
+++ b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
@@ -13,7 +13,8 @@
         }
       ],
       day.isHoliday && 'font-bold cursor-default',
-      (day.isPendingVacation) && `border-b-4 border-dashed ${day.getVacationType.border} md:border-blumilk-600`
+      (day.isPendingVacation) && `border-b-4 border-dashed ${day.getVacationType.border}`,
+      (day.isVacation) && `border-b-4 ${day.getVacationType.border}`
     ]"
   >
     <Popper
@@ -33,7 +34,7 @@
       </time>
       <template #content>
         <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
-          {{ getHolidayDescription(day) }}
+          {{ day.getHolidayInfo }}
         </div>
       </template>
     </Popper>
@@ -103,9 +104,6 @@ defineProps({
     type: Object,
     required: true,
   },
-  getHolidayDescription: {
-    type: Function,
-  },
 })
 
 const isActive = ref(false)
diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 2deba40..4c797b1 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -7,11 +7,10 @@
       <div class="flex justify-center">
         <div class="flex items-center rounded-md shadow-sm md:items-stretch">
           <button
-            v-if="calendarState.isPrevious"
             type="button"
-            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
-            :class="{ 'rounded-r-md border-r md:rounded-r-none md:border-r-0': !calendarState.isNext }"
-            @click="toLast"
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 py-2 pl-3 pr-4 text-gray-400 focus:relative md:w-9 md:px-2"
+            :class="[ calendarState.isPrevious ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
+            @click="toPrevious"
           >
             <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
             <ChevronLeftIcon
@@ -22,20 +21,18 @@
           <button
             type="button"
             class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
-            :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
             @click="goToToday"
           >
             Dzisiaj
           </button>
           <span
             class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
-            :class="{ 'hidden': !calendarState.isPrevious || !calendarState.isNext }"
           />
           <button
-            v-if="calendarState.isNext"
             type="button"
-            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
-            :class="{ 'rounded-l-md border-l md:rounded-l-none md:border-l-0': !calendarState.isPrevious }"
+            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 py-2 pl-4 pr-3 text-gray-400 focus:relative md:w-9 md:px-2"
+            :class="[ calendarState.isNext ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
+            :disabled="!calendarState.isNext"
             @click="toNext"
           >
             <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
@@ -99,25 +96,25 @@
         v-if="calendarState.viewMode.isMonth"
         class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
       >
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Pn
         </div>
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Wt
         </div>
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Śr
         </div>
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Cz
         </div>
-        <div class="bg-white py-2">
+        <div class="py-2 bg-white">
           Pt
         </div>
-        <div class="bg-red-100 py-2">
+        <div class="py-2 bg-red-100 text-red-800">
           Sb
         </div>
-        <div class="bg-red-100 py-2">
+        <div class="py-2 bg-red-100 text-red-800">
           Nd
         </div>
       </div>
@@ -132,7 +129,6 @@
             :day="day"
             class="flex flex-col relative py-2 px-3"
             :class="{ 'day': calendarState.viewMode.isWeek }"
-            :get-holiday-description="getHolidayDescription"
           />
         </div>
       </div>
@@ -239,6 +235,7 @@ const customCalendar = {
       date: day.toISODate(),
       isVacation: isCurrentMonth && isVacation(day),
       isPendingVacation: isCurrentMonth && isPendingVacation(day),
+      isHoliday: isHoliday(day),
     }
 
     return {
@@ -247,7 +244,7 @@ const customCalendar = {
       isCurrentMonth,
       isToday: isToday(day),
       isWeekend: isWeekend(day),
-      isHoliday: isHoliday(day),
+      getHolidayInfo: startDay.isHoliday ? getHolidayInfo(startDay) : undefined,
       getVacationType: startDay.isVacation || startDay.isPendingVacation ? getVacationType(startDay) : undefined,
       getVacationInfo: startDay.isVacation || startDay.isPendingVacation ? getVacationInfo(startDay) : undefined,
     }
@@ -260,18 +257,22 @@ watch([calendar.viewMode, calendar.currents], () => {
 
 customCalendar.loadCalendar()
 
-function toLast() {
-  if (calendar.viewMode.value === 'week')
-    minusWeek()
-  else
-    minusMonth()
+function toPrevious() {
+  if (calendarState.isPrevious) {
+    if (calendar.viewMode.value === 'week')
+      minusWeek()
+    else
+      minusMonth()
+  }
 }
 
 function toNext() {
-  if (calendar.viewMode.value === 'week')
-    addWeek()
-  else
-    addMonth()
+  if (calendarState.isNext) {
+    if (calendar.viewMode.value === 'week')
+      addWeek()
+    else
+      addMonth()
+  }
 }
 
 function resetCalendar(config = {}) {
@@ -353,7 +354,7 @@ function isHoliday(date) {
   return props.holidays[date.toISODate()] !== undefined
 }
 
-function getHolidayDescription(day) {
+function getHolidayInfo(day) {
   return props.holidays[day.date]
 }
 
@@ -365,10 +366,6 @@ function isPendingVacation(date) {
   return props.pendingVacations[date.toISODate()] !== undefined
 }
 
-function getVacationBorder(day) {
-  return findType(getVacationInfo(day).type)?.border
-}
-
 function getVacationType(day) {
   return findType(getVacationInfo(day).type)
 }