#377 - refactor: refactored calendar month buttons - added dropdown w…

…ith months

resources/js/Pages/Calendar.vue

@@ -1,10 +1,13 @@
 <script setup>
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
-import { computed, ref } from 'vue'
+import { ChevronLeftIcon, ChevronRightIcon, ChevronUpDownIcon } from '@heroicons/vue/24/solid'
+import { computed, ref, watch } from 'vue'
 import { useMonthInfo } from '@/Composables/monthInfo.js'
 import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon.vue'
 import CalendarDay from '@/Shared/CalendarDay.vue'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { useForm } from '@inertiajs/inertia-vue3'
+import { Inertia } from '@inertiajs/inertia'
 
 const props = defineProps({
   users: Object,
@@ -21,7 +24,16 @@ const { getMonths, findMonth } = useMonthInfo()
 
 const months = getMonths()
 
-const currentMonth = computed(() => findMonth(props.current))
+const form = useForm({
+  selectedMonth: months.find(month => month.value === props.selected),
+})
+
+watch(() => form.selectedMonth, (value) => {
+  if (value) {
+    Inertia.visit(`/calendar/${value.value}`)
+  }
+})
+
 const selectedMonth = computed(() => findMonth(props.selected))
 const previousMonth = computed(() => months[months.indexOf(selectedMonth.value) - 1])
 const nextMonth = computed(() => months[months.indexOf(selectedMonth.value) + 1])
@@ -52,33 +64,68 @@ function linkVacationRequest(user) {
   <InertiaHead title="Kalendarz" />
   <div class="bg-white shadow-md">
     <div class="flex-row sm:flex justify-between items-center p-4 sm:px-6">
-      <div class="flex items-center">
-        <h2 class="text-lg font-medium leading-6 text-center text-gray-900">
+      <div class="flex-row sm:flex items-center">
+        <h2 class="text-lg font-medium leading-6 sm:text-center mb-2 sm:mb-0 text-gray-900">
           Kalendarz
         </h2>
-        <div class="flex items-center ml-3 rounded-md shadow-sm md:items-stretch">
+        <div class="flex items-center sm:ml-3 md:items-stretch">
           <InertiaLink
             v-if="previousMonth"
             :href="`/calendar/${previousMonth.value}`"
             as="button"
-            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
+            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
           >
             <ChevronLeftIcon class="w-5 h-5" />
           </InertiaLink>
           <span
             v-else
-            class="flex justify-center items-center p-2 text-gray-400 bg-gray-100 rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9"
+            class="flex justify-center items-center text-gray-400 bg-gray-100 rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9"
           >
             <ChevronLeftIcon class="w-5 h-5" />
           </span>
-          <InertiaLink
-            v-if="years.current.year === years.selected.year"
-            :href="`/calendar/${currentMonth.value}`"
-            as="button"
-            class="hidden focus:relative items-center p-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 focus:outline-blumilk-500 md:flex"
+          <Listbox
+            v-model="form.selectedMonth"
+            as="div"
+            class="items-center grid-cols-3 w-[135px] h-[] text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 focus:outline-blumilk-500"
           >
-            Dzisiaj
-          </InertiaLink>
+            <div class="relative sm:col-span-2 sm:mt-0">
+              <ListboxButton
+                class="relative pr-10 pl-3 w-full h-[36px] max-w-lg text-left bg-white focus:outline-none shadow-sm sm:text-sm cursor-pointer"
+              >
+                <template v-if="form.selectedMonth">
+                  <span class="block truncate text-center">
+                    {{ form.selectedMonth.name }}
+                  </span>
+                  <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                    <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
+                  </span>
+                </template>
+              </ListboxButton>
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-auto max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                >
+                  <ListboxOption
+                    v-for="month in months"
+                    :key="month.value"
+                    v-slot="{ active, selected }"
+                    :value="month"
+                    as="template"
+                  >
+                    <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9 cursor-pointer']">
+                      <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                        {{ month.name }}
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
           <InertiaLink
             v-if="nextMonth"
             :href="`/calendar/${nextMonth.value}`"