#74 - vacation calendar (#87)

* - polishing calendar * wip * wip * #74 - wip * #74 - wip * #74 - wip * #74 - fix icons Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
2022-03-21 11:57:32 +01:00
parent 8c1819aa01
commit a0e60a3160
13 changed files with 326 additions and 82 deletions
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -2,10 +2,47 @@
  <InertiaHead title="Kalendarz urlopów" />
  <div class="bg-white shadow-md">
    <div class="flex justify-between items-center p-4 sm:px-6">
-      <div>
+      <div class="flex items-center">
        <h2 class="text-lg leading-6 font-medium text-gray-900">
          Kalendarz urlopów
        </h2>
+        <div class="ml-5 flex items-center rounded-md shadow-sm md:items-stretch">
+          <InertiaLink
+            v-if="previousMonth"
+            as="button"
+            :href="`/vacation-calendar/${previousMonth.value}`"
+            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"
+          >
+            <ChevronLeftIcon class="h-5 w-5" />
+          </InertiaLink>
+          <span
+            v-else
+            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"
+          >
+            <ChevronLeftIcon class="h-5 w-5" />
+          </span>
+          <InertiaLink
+            as="button"
+            :href="`/vacation-calendar/${currentMonth.value}`"
+            class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium flex items-center text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
+          >
+            Dzisiaj
+          </InertiaLink>
+          <InertiaLink
+            v-if="nextMonth"
+            as="button"
+            :href="`/vacation-calendar/${nextMonth.value}`"
+            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"
+          >
+            <ChevronRightIcon class="h-5 w-5" />
+          </InertiaLink>
+          <span
+            v-else
+            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"
+          >
+            <ChevronRightIcon class="h-5 w-5" />
+          </span>
+        </div>
      </div>
      <div v-if="can.generateTimesheet">
        <a
@@ -17,61 +54,20 @@
      </div>
    </div>
    <div class="overflow-x-auto">
-      <table class="w-full text-center table-fixed text-sm border border-gray-300">
+      <table class="w-full text-center text-sm border border-gray-300">
        <thead>
          <tr>
-            <th class="w-64 py-2 border border-gray-300">
-              <Menu
-                as="div"
-                class="relative inline-block text-left"
-              >
-                <div>
-                  <MenuButton
-                    class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
-                  >
-                    {{ selectedMonth.name }} {{ years.current }}
-                    <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
-                  </MenuButton>
-                </div>
-
-                <transition
-                  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="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
-                  >
-                    <div class="py-1">
-                      <MenuItem
-                        v-for="(month, index) in months"
-                        :key="index"
-                        v-slot="{ active }"
-                      >
-                        <InertiaLink
-                          :href="`/vacation-calendar/${month.value}`"
-                          :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex w-full font-normal px-4 py-2 text-sm']"
-                        >
-                          {{ month.name }}
-                          <CheckIcon
-                            v-if="currentMonth === month.value"
-                            class="h-5 w-5 text-blumilk-500 ml-2"
-                          />
-                        </InertiaLink>
-                      </MenuItem>
-                    </div>
-                  </MenuItems>
-                </transition>
-              </Menu>
+            <th class="w-64 py-2 border text-lg font-semibold text-gray-800 border-gray-300">
+              <div class="flex justify-center items-center">
+                {{ selectedMonth.name }} {{ years.current }}
+              </div>
            </th>
            <th
              v-for="day in calendar"
              :key="day.dayOfMonth"
              class="border border-gray-300 text-lg font-semibold text-gray-900 py-4 px-2"
-              :class="{ 'text-blumilk-600 bg-blumilk-25 font-black': day.isToday }"
+              style="min-width: 46px;"
+              :class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
            >
              <div>
                {{ day.dayOfMonth }}
@@ -87,7 +83,9 @@
            v-for="user in users.data"
            :key="user.id"
          >
-            <th class="border border-gray-300 py-2 px-4">
+            <th
+              class="border border-gray-300 py-2 px-4"
+            >
              <div class="flex justify-start items-center">
                <span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
                  <img
@@ -96,7 +94,9 @@
                  >
                </span>
                <div class="ml-3">
-                  <div class="text-sm font-medium text-gray-900">
+                  <div
+                    class="text-sm font-medium text-gray-900 whitespace-nowrap"
+                  >
                    {{ user.name }}
                  </div>
                </div>
@@ -106,22 +106,13 @@
              v-for="day in calendar"
              :key="day.dayOfMonth"
              class="border border-gray-300"
-              :class="{'bg-red-100': day.isWeekend || day.isHoliday, 'bg-blumilk-500': day.vacations.includes(user.id) }"
+              :class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday}"
            >
              <div
                v-if="day.vacations.includes(user.id)"
                class="flex justify-center items-center"
              >
-                <svg
-                  class="w-6 h-6 text-white"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 640 512"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M115.38 136.9l102.11 37.18c35.19-81.54 86.21-144.29 139-173.7-95.88-4.89-188.78 36.96-248.53 111.8-6.69 8.4-2.66 21.05 7.42 24.72zm132.25 48.16l238.48 86.83c35.76-121.38 18.7-231.66-42.63-253.98-7.4-2.7-15.13-4-23.09-4-58.02.01-128.27 69.17-172.76 171.15zM521.48 60.5c6.22 16.3 10.83 34.6 13.2 55.19 5.74 49.89-1.42 108.23-18.95 166.98l102.62 37.36c10.09 3.67 21.31-3.43 21.57-14.17 2.32-95.69-41.91-187.44-118.44-245.36zM560 447.98H321.06L386 269.5l-60.14-21.9-72.9 200.37H16c-8.84 0-16 7.16-16 16.01v32.01C0 504.83 7.16 512 16 512h544c8.84 0 16-7.17 16-16.01v-32.01c0-8.84-7.16-16-16-16z"
-                  />
-                </svg>
+                <VacationTypeCalendarIcon :type="day.vacationTypes[user.id]" />
              </div>
            </td>
          </tr>
@@ -132,31 +123,36 @@
 </template>

 <script>
-import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue'
-import {CheckIcon, ChevronDownIcon} from '@heroicons/vue/solid'
+import {ChevronLeftIcon, ChevronRightIcon} from '@heroicons/vue/solid'
 import {computed} from 'vue'
 import {useMonthInfo} from '@/Composables/monthInfo'
+import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon'

 export default {
  name: 'VacationCalendar',
  components: {
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuItems,
-    CheckIcon,
-    ChevronDownIcon,
+    VacationTypeCalendarIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
  },
  props: {
    users: {
      type: Object,
      default: () => null,
    },
+    auth: {
+      type: Object,
+      default: () => null,
+    },
    calendar: {
      type: Object,
      default: () => null,
    },
-    currentMonth: {
+    current: {
+      type: String,
+      default: () => 'january',
+    },
+    selected: {
      type: String,
      default: () => 'january',
    },
@@ -173,11 +169,18 @@ export default {
    const {getMonths, findMonth} = useMonthInfo()
    const months = getMonths()

-    const selectedMonth = computed(() => findMonth(props.currentMonth))
+    const currentMonth = computed(() => findMonth(props.current))
+    const selectedMonth = computed(() => findMonth(props.selected))
+    const previousMonth = computed(() => months[months.indexOf(selectedMonth.value) - 1])
+    const nextMonth = computed(() => months[months.indexOf(selectedMonth.value) + 1])
+

    return {
      months,
+      currentMonth,
      selectedMonth,
+      previousMonth,
+      nextMonth,
    }
  },
 }
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -119,7 +119,7 @@
                        class="hover:underline focus:outline-none"
                      >
                        <span class="absolute inset-0" />
-                        Wniosek o {{ request.type.toLowerCase() }}
+                        Wniosek o {{ findType(request.type).text.toLowerCase() }}
                        [{{ request.name }}]
                      </InertiaLink>
                    </h3>
@@ -185,7 +185,7 @@
                        class="hover:underline focus:outline-none"
                      >
                        <span class="absolute inset-0" />
-                        Wniosek o {{ request.type.toLowerCase() }}
+                        Wniosek o {{ findType(request.type).text.toLowerCase() }}
                        [{{ request.name }}]
                      </InertiaLink>
                    </h3>
@@ -302,6 +302,7 @@ import {computed} from 'vue'
 import {usePage} from '@inertiajs/inertia-vue3'
 import Status from '@/Shared/Status'
 import VacationChart from '@/Shared/VacationChart'
+import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'

 export default {
  name: 'DashboardPage',
@@ -335,8 +336,11 @@ export default {
  setup() {
    const user = computed(() => usePage().props.value.auth.user)

+    const { findType } = useVacationTypeInfo()
+
    return {
      user,
+      findType,
    }
  },
 }
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -91,7 +91,7 @@
              </InertiaLink>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
-              {{ request.type }}
+              <VacationType :type="request.type" />
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ request.from }}
@@ -195,6 +195,7 @@ import {
  DocumentTextIcon,
 } from '@heroicons/vue/solid'
 import Status from '@/Shared/Status'
+import VacationType from '@/Shared/VacationType'

 export default {
  name: 'VacationRequestIndex',
@@ -210,6 +211,7 @@ export default {
    DocumentTextIcon,
    ThumbDownIcon,
    Status,
+    VacationType,
  },
  props: {
    requests: {
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -247,7 +247,7 @@
              </div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
-              {{ request.type }}
+              <VacationType :type="request.type" />
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ request.from }}
@@ -353,6 +353,7 @@ import {
  XIcon,
 } from '@heroicons/vue/solid'
 import Status from '@/Shared/Status'
+import VacationType from '@/Shared/VacationType'
 import {watch, reactive} from 'vue'
 import {debounce} from 'lodash'
 import {Inertia} from '@inertiajs/inertia'
@@ -377,6 +378,7 @@ export default {
    DocumentTextIcon,
    ThumbDownIcon,
    Status,
+    VacationType,
    SelectorIcon,
    XCircleIcon,
  },
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/resources/js/Pages/VacationRequest/Show.vue
@@ -44,7 +44,7 @@
                Rodzaj urlopu
              </dt>
              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                {{ request.type }}
+                <VacationType :type="request.type" />
              </dd>
            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
@@ -65,7 +65,7 @@
                    {{ request.from }} - {{ request.to }} [Liczba dni: {{ request.days.length }}]
                  </template>
                  <template v-else>
-                    {{ request.from }}
+                    {{ request.from }} [Liczba dni: {{ request.days.length }}]
                  </template>
                </span>
              </dd>
@@ -249,10 +249,12 @@
 import {PaperClipIcon} from '@heroicons/vue/outline'
 import Activity from '@/Shared/Activity'
 import Status from '@/Shared/Status'
+import VacationType from '@/Shared/VacationType'

 export default {
  name: 'VacationRequestShow',
  components: {
+    VacationType,
    Activity,
    PaperClipIcon,
    Status,