#22 - vacation calendar (#51)

* change layout * change layout * #22 - wip * wip * wip * #22 - wip * #22 - wip * #22 - wip * #22 - wip * #22 - fix * #22 - wip * #22 - added some tests * #22 - wip * #22 - wip * #22 - fix * #22 - wip * #22 - wip * #22 - wip * #22 - fix * #22 - fix * #22 - fix * #22 - fix * #22 - fix * #22 - fix * #22 - cr fixes * #22 - cr fix Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
2022-02-15 15:08:26 +01:00
parent b161981d5a
commit 6c352b629c
50 changed files with 1682 additions and 397 deletions
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -0,0 +1,167 @@
+<template>
+  <InertiaHead title="Kalendarz urlopów" />
+  <div class="bg-white shadow-md">
+    <div class="p-4 sm:px-6">
+      <h2 class="text-lg leading-6 font-medium text-gray-900">
+        Kalendarz urlopów
+      </h2>
+    </div>
+    <div class="overflow-x-auto">
+      <table class="w-full text-center table-fixed 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 }}
+                    <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"
+                          :data="{ month: 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>
+            <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 }"
+            >
+              <div>
+                {{ day.dayOfMonth }}
+                <p class="font-normal mt-1 text-sm capitalize">
+                  {{ day.dayOfWeek }}
+                </p>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="user in users.data"
+            :key="user.id"
+          >
+            <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
+                    class="h-10 w-10 rounded-full"
+                    :src="user.avatar"
+                  >
+                </span>
+                <div class="ml-3">
+                  <div class="text-sm font-medium text-gray-900">
+                    {{ user.name }}
+                  </div>
+                </div>
+              </div>
+            </th>
+            <td
+              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) }"
+            >
+              <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>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue'
+import {CheckIcon, ChevronDownIcon} from '@heroicons/vue/solid'
+import {computed} from 'vue'
+import {useMonthInfo} from '@/Composables/monthInfo'
+
+export default {
+  name: 'VacationCalendar',
+  components: {
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuItems,
+    CheckIcon,
+    ChevronDownIcon,
+  },
+  props: {
+    users: {
+      type: Object,
+      default: () => null,
+    },
+    calendar: {
+      type: Object,
+      default: () => null,
+    },
+    currentMonth: {
+      type: String,
+      default: () => 'january',
+    },
+  },
+  setup(props) {
+    const {getMonths, findMonth} = useMonthInfo()
+    const months = getMonths()
+
+    const selectedMonth = computed(() => findMonth(props.currentMonth))
+
+    return {
+      months,
+      selectedMonth,
+    }
+  },
+}
+</script>
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -37,7 +37,7 @@
              <div class="mt-5 flex justify-center sm:mt-0">
                <InertiaLink
                  href="#"
-                  class="flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                  class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
                >
                  View profile
                </InertiaLink>
--- a/resources/js/Pages/Holidays/Create.vue
+++ b/resources/js/Pages/Holidays/Create.vue
@@ -1,6 +1,6 @@
 <template>
  <InertiaHead title="Dodaj dzień wolny" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
    <div class="p-4 sm:px-6">
      <h2 class="text-lg leading-6 font-medium text-gray-900">
        Dodaj dzień wolny
--- a/resources/js/Pages/Holidays/Edit.vue
+++ b/resources/js/Pages/Holidays/Edit.vue
@@ -1,6 +1,6 @@
 <template>
  <InertiaHead title="Edytuj dzień wolny" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
    <div class="p-4 sm:px-6">
      <h2 class="text-lg leading-6 font-medium text-gray-900">
        Edytuj dzień wolny
--- a/resources/js/Pages/Holidays/Index.vue
+++ b/resources/js/Pages/Holidays/Index.vue
@@ -1,6 +1,6 @@
 <template>
  <InertiaHead title="Dni wolne od pracy" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
    <div class="flex justify-between items-center p-4 sm:px-6">
      <div>
        <h2 class="text-lg leading-6 font-medium text-gray-900">
@@ -144,7 +144,7 @@ import { DotsVerticalIcon, PencilIcon, TrashIcon } from '@heroicons/vue/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'

 export default {
-  name: 'HolidayINdex',
+  name: 'HolidayIndex',
  components: {
    DotsVerticalIcon,
    PencilIcon,
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -1,6 +1,6 @@
 <template>
  <InertiaHead title="Dodawanie użytkownika" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
    <div class="p-4 sm:px-6">
      <h2 class="text-lg leading-6 font-medium text-gray-900">
        Dodaj użytkownika
--- a/resources/js/Pages/Users/Edit.vue
+++ b/resources/js/Pages/Users/Edit.vue
@@ -1,6 +1,6 @@
 <template>
  <InertiaHead title="Edycja użytkownika" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
    <div class="p-4 sm:px-6">
      <h2 class="text-lg leading-6 font-medium text-gray-900">
        Edytuj użytkownika
--- a/resources/js/Pages/Users/Index.vue
+++ b/resources/js/Pages/Users/Index.vue
@@ -1,6 +1,6 @@
 <template>
  <InertiaHead title="Użytkownicy" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
    <div class="flex justify-between items-center p-4 sm:px-6">
      <div>
        <h2 class="text-lg leading-6 font-medium text-gray-900">
--- a/resources/js/Pages/VacationLimits.vue
+++ b/resources/js/Pages/VacationLimits.vue
@@ -1,6 +1,6 @@
 <template>
  <InertiaHead title="Użytkownicy" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
    <div class="flex justify-between items-center p-4 sm:px-6">
      <div>
        <h2 class="text-lg leading-6 font-medium text-gray-900">
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/resources/js/Pages/VacationRequest/Create.vue
@@ -1,6 +1,6 @@
 <template>
  <InertiaHead title="Złóż wniosek urlopowy" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
    <div class="p-4 sm:px-6">
      <h2 class="text-lg leading-6 font-medium text-gray-900">
        Złóż wniosek urlopowy
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -1,6 +1,6 @@
 <template>
  <InertiaHead title="Twoje wnioski urlopowe" />
-  <div class="bg-white sm:rounded-lg shadow-md">
+  <div class="bg-white shadow-md">
    <div class="flex justify-between items-center p-4 sm:px-6">
      <div>
        <h2 class="text-lg leading-6 font-medium text-gray-900">
@@ -57,7 +57,7 @@
            </th>
            <th
              scope="col"
-              class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
            >
              Dni urlopu
            </th>
@@ -84,7 +84,7 @@
                {{ request.name }}
              </InertiaLink>
            </td>
-            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
              {{ request.type }}
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
@@ -93,15 +93,18 @@
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ request.to }}
            </td>
-            <td class="px-4 py-4 whitespace-nowrap text-right text-sm text-gray-500">
-              {{ request.estimatedDays }}
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              {{ request.days.length }}
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-              {{ request.state }}
+              <Status :status="request.state" />
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
-              <InertiaLink :href="`/vacation-requests/${request.id}`">
-                <ChevronRightIcon class="block w-6 h-6 fill-gray-400" />
+              <InertiaLink
+                :href="`/vacation-requests/${request.id}`"
+                class="flex justify-around"
+              >
+                <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
              </InertiaLink>
            </td>
          </tr>
@@ -169,7 +172,19 @@
 </template>

 <script>
-import {ChevronRightIcon, DotsVerticalIcon, PencilIcon, TrashIcon} from '@heroicons/vue/solid'
+import {
+  ChevronRightIcon,
+  ClockIcon,
+  DotsVerticalIcon,
+  PencilIcon,
+  ThumbDownIcon,
+  ThumbUpIcon,
+  TrashIcon,
+  XIcon,
+  CheckIcon,
+  DocumentTextIcon,
+} from '@heroicons/vue/solid'
+import Status from '@/Shared/Status'

 export default {
  name: 'VacationRequestIndex',
@@ -178,6 +193,13 @@ export default {
    PencilIcon,
    TrashIcon,
    ChevronRightIcon,
+    ThumbUpIcon,
+    ClockIcon,
+    XIcon,
+    CheckIcon,
+    DocumentTextIcon,
+    ThumbDownIcon,
+    Status,
  },
  props: {
    requests: {
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/resources/js/Pages/VacationRequest/Show.vue
@@ -2,7 +2,7 @@
  <InertiaHead :title="`Wniosek ${request.name}`" />
  <div class="grid grid-cols-1 gap-6 xl:grid-flow-col-dense xl:grid-cols-3">
    <div class="space-y-6 xl:col-start-1 xl:col-span-2">
-      <div class="bg-white sm:rounded-lg shadow-md">
+      <div class="bg-white shadow-md">
        <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Informacje na temat wniosku
@@ -18,6 +18,14 @@
                {{ request.name }}
              </dd>
            </div>
+            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt class="text-sm font-medium text-gray-500">
+                Pracownik
+              </dt>
+              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                {{ request.user.name }}
+              </dd>
+            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500">
                Rodzaj urlopu
@@ -26,6 +34,14 @@
                {{ request.type }}
              </dd>
            </div>
+            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+              <dt class="text-sm font-medium text-gray-500">
+                Obecny status
+              </dt>
+              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                <Status :status="request.state" />
+              </dd>
+            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500">
                Urlop od
@@ -47,16 +63,25 @@
                Dni urlopu
              </dt>
              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                {{ request.estimatedDays }}
+                {{ request.days.length }}
              </dd>
            </div>
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500">
                Komentarz
              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+              <dd
+                v-if="request.comment != null"
+                class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+              >
                {{ request.comment }}
              </dd>
+              <dd
+                v-else
+                class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
+              >
+                -
+              </dd>
            </div>
            <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt class="text-sm font-medium text-gray-500">
@@ -85,14 +110,15 @@
          </dl>
        </div>
      </div>
-      <div class="bg-white shadow sm:rounded-lg">
+      <div class="bg-white shadow">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Zaakceptuj wniosek jako osoba techniczna
          </h3>
          <div class="mt-2 max-w-xl text-sm text-gray-500">
            <p>
-              W zależności od typu wniosku, zostanie on zatwierdzony lub osoba administracyjna będzie musiała go zaakceptować.
+              W zależności od typu wniosku, zostanie on zatwierdzony lub osoba administracyjna będzie
+              musiała go zaakceptować.
            </p>
          </div>
          <div class="mt-5">
@@ -107,7 +133,7 @@
          </div>
        </div>
      </div>
-      <div class="bg-white shadow sm:rounded-lg">
+      <div class="bg-white shadow">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Zaakceptuj wniosek jako osoba administracyjna
@@ -129,7 +155,7 @@
          </div>
        </div>
      </div>
-      <div class="bg-white shadow sm:rounded-lg">
+      <div class="bg-white shadow">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Odrzuć wniosek
@@ -151,7 +177,7 @@
          </div>
        </div>
      </div>
-      <div class="bg-white shadow sm:rounded-lg border border-red-500">
+      <div class="bg-white shadow border border-red-500">
        <div class="px-4 py-5 sm:p-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Anuluj wniosek
@@ -175,7 +201,7 @@
      </div>
    </div>
    <div class="xl:col-start-3 xl:col-span-1 space-y-6">
-      <div class="bg-white sm:rounded-lg shadow-md">
+      <div class="bg-white shadow-md">
        <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Historia wniosku
@@ -185,31 +211,12 @@
          <ul>
            <li
              v-for="(activity, index) in activities.data"
-              :key="activity.id"
+              :key="index"
            >
-              <div :class="{'relative pb-8': index !== activities.data.length - 1}">
-                <span
-                  v-if="(index !== activities.data.length - 1)"
-                  class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
-                />
-                <div class="relative flex space-x-3">
-                  <div>
-                    <span class="bg-blumilk-500 h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white">
-                      <ThumbUpIcon class="w-5 h-5 text-white" />
-                    </span>
-                  </div>
-                  <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                    <div>
-                      <p class="text-sm text-gray-500">
-                        {{ activity.to }}
-                      </p>
-                    </div>
-                    <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                      <time>{{ activity.date }}</time>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <Activity
+                :activity="activity"
+                :last="index !== activities.data.length - 1"
+              />
            </li>
          </ul>
        </div>
@@ -219,14 +226,16 @@
 </template>

 <script>
-import { ThumbUpIcon } from '@heroicons/vue/outline'
-import {PaperClipIcon} from '@heroicons/vue/solid'
+import {PaperClipIcon} from '@heroicons/vue/outline'
+import Activity from '@/Shared/Activity'
+import Status from '@/Shared/Status'

 export default {
  name: 'VacationRequestShow',
  components: {
-    ThumbUpIcon,
+    Activity,
    PaperClipIcon,
+    Status,
  },
  props: {
    request: {