wip #VC

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>