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] #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>