From 856d1f1a7c36baa4e4c7f87ed39288eaaeb232f3 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Tue, 21 Jun 2022 11:26:23 +0200
Subject: [PATCH] wip #VC

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

diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue
index 1779ab8..bc320c7 100644
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -1,24 +1,49 @@
 <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
+        {{ 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="calendar.currents.month > 1"
+            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">Previous {{ viewMode.key }}</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="[calendar.currents.month === 1 ? 'rounded-l-md border border-r-0' : undefined, calendar.currents.month === 12 ? 'rounded-r-md border border-l-0' : undefined]"
+            @click="resetCalendar"
+          >
+            Today
+          </button>
+          <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
+          <button
+            v-if="calendar.currents.month < 12"
+            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">Next {{ viewMode.key }}</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"
@@ -96,7 +121,7 @@
             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', viewMode.key === 'week' && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, viewMode.key === 'week' ? 'day' : 'month-day', 'relative py-2 px-3']"
           >
             <time
               :datetime="day.date"
@@ -114,11 +139,25 @@
 <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'
 
 let days = ref([])
+const months = [
+  { id: 1, name: 'Styczeń' },
+  { id: 2, name: 'Luty' },
+  { id: 3, name: 'Marzec' },
+  { id: 4, name: 'Kwiecień' },
+  { id: 5, name: 'Maj' },
+  { id: 6, name: 'Czerwiec' },
+  { id: 7, name: 'Lipiec' },
+  { id: 8, name: 'Sierpień' },
+  { id: 9, name: 'Wrzesień' },
+  { id: 10, name: 'Październik' },
+  { id: 11, name: 'Listopad' },
+  { id: 12, name: 'Grudzień' },
+]
 function getCurrentDate() {
   const { year, month, weekNumber } = DateTime.now()
   return { year, month, weekNumber }
@@ -131,15 +170,14 @@ let viewModeOptions = [
 ]
 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,
   }),
 }
-console.log(calendar, selectedYear, currentDate)
-watch(() => calendar.viewMode.value, () => {
-  loadMonth()
+watch([calendar.viewMode, calendar.currents], () => {
+  loadCalendar()
 })
 
 const viewMode = computed(() => {
@@ -149,21 +187,20 @@ const viewMode = computed(() => {
     name: viewModeOptions.find((obj) => obj.key === key)?.name,
   }
 })
+const monthName = computed(() => months.find(month => month.id === calendar.currents.month)?.name)
 
-loadMonth()
-
-function loadMonth() {
-  const tmpDays = []
+loadCalendar()
 
+function loadCalendar() {
   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 (currentDate.year === selectedYear)
-      focusDate = DateTime.fromObject({ weekNumber: calendar.currents.value.week })
+      focusDate = DateTime.fromObject({ weekNumber: calendar.currents.week })
     start = focusDate.startOf('week')
     end = focusDate.endOf('week')
   } else if (viewMode.value.key === 'month') {
@@ -172,7 +209,12 @@ function loadMonth() {
     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,6 +228,34 @@ function loadMonth() {
   days.value = tmpDays
 }
 
+function toLast() {
+  if (viewMode.value.key === 'week')
+    addWeeks(-1)
+  else
+    addMonths(-1)
+}
+
+function toNext() {
+  if (viewMode.value.key === 'week') {
+    addWeeks()
+  } else
+    addMonths()
+}
+
+function resetCalendar() {
+  calendar.currents.year = currentDate.year
+  calendar.currents.month = currentDate.month
+  calendar.currents.week = currentDate.weekNumber
+}
+
+function addWeeks(howMany = 1) {
+  calendar.currents.week += howMany
+}
+
+function addMonths(howMany = 1) {
+  calendar.currents.month += howMany
+}
+
 function updateViewMode(type) {
   calendar.viewMode.value = type
 }
@@ -220,13 +290,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>