- wip

Co-authored-by: Krzysztof Rewak <krzysztof.rewak@gmail.com>

.env.ci

@@ -21,3 +21,9 @@ SESSION_DRIVER=array
 SESSION_LIFETIME=120
 FILESYSTEM_DISK=local
 MAIL_MAILER=array
+
+HEROKU_RELEASE_VERSION=v01
+HEROKU_SLUG_DESCRIPTION="Dev 643f546"
+HEROKU_RELEASE_CREATED_AT=2022-07-04T18:05:46Z
+HEROKU_SLUG_COMMIT=643f546142b8a2db342f0ae46f01e61dce03e97c
+GITHUB_REPO_URL=https://github.com/blumilksoftware/toby/

.env.example

@@ -67,3 +67,9 @@ SLACK_ENABLED=true
 SLACK_CLIENT_TOKEN=
 SLACK_SIGNING_SECRET=
 SLACK_DEFAULT_CHANNEL="#general"
+
+HEROKU_RELEASE_VERSION=v01
+HEROKU_SLUG_DESCRIPTION="Dev 643f546"
+HEROKU_RELEASE_CREATED_AT=2022-07-04T18:05:46Z
+HEROKU_SLUG_COMMIT=643f546142b8a2db342f0ae46f01e61dce03e97c
+GITHUB_REPO_URL=https://github.com/blumilksoftware/toby/

app/Domain/UserVacationStatsRetriever.php

@@ -103,15 +103,6 @@ class UserVacationStatsRetriever
         return $limit ?? 0;
     }
 
-    public function hasVacationDaysLimit(User $user, YearPeriod $yearPeriod): bool
-    {
-        $limit = $user->vacationLimits()
-            ->whereBelongsTo($yearPeriod)
-            ->first()?->days;
-
-        return $limit !== null;
-    }
-
     protected function getLimitableVacationTypes(): Collection
     {
         $types = VacationType::all();

app/Infrastructure/Http/Controllers/DashboardController.php

@@ -12,11 +12,8 @@ use Toby\Domain\UserVacationStatsRetriever;
 use Toby\Domain\VacationRequestStatesRetriever;
 use Toby\Domain\VacationTypeConfigRetriever;
 use Toby\Eloquent\Helpers\YearPeriodRetriever;
-use Toby\Eloquent\Models\Holiday;
-use Toby\Eloquent\Models\Vacation;
 use Toby\Eloquent\Models\VacationRequest;
 use Toby\Infrastructure\Http\Resources\HolidayResource;
-use Toby\Infrastructure\Http\Resources\SimpleVacationRequestResource;
 use Toby\Infrastructure\Http\Resources\VacationRequestResource;
 use Toby\Infrastructure\Http\Resources\VacationResource;
 
@@ -57,24 +54,7 @@ class DashboardController extends Controller
             ->limit(3)
             ->get();
 
-        $allHolidays = $yearPeriod->holidays;
-
-        $approvedVacations = $request->user()
-            ->vacations()
-            ->with("vacationRequest.vacations")
-            ->whereBelongsTo($yearPeriod)
-            ->approved()
-            ->get();
-
-        $pendingVacations = $request->user()
-            ->vacations()
-            ->with("vacationRequest.vacations")
-            ->whereBelongsTo($yearPeriod)
-            ->pending()
-            ->get();
-
         $limit = $vacationStatsRetriever->getVacationDaysLimit($user, $yearPeriod);
-        $hasLimit = $vacationStatsRetriever->hasVacationDaysLimit($user, $yearPeriod);
         $used = $vacationStatsRetriever->getUsedVacationDays($user, $yearPeriod);
         $pending = $vacationStatsRetriever->getPendingVacationDays($user, $yearPeriod);
         $homeOffice = $vacationStatsRetriever->getHomeOfficeDays($user, $yearPeriod);
@@ -86,21 +66,7 @@ class DashboardController extends Controller
             "remoteDays" => VacationResource::collection($remoteDays),
             "vacationRequests" => VacationRequestResource::collection($vacationRequests),
             "holidays" => HolidayResource::collection($holidays),
-            "allHolidays" => $allHolidays->mapWithKeys(
-                fn(Holiday $holiday): array => [$holiday->date->toDateString() => $holiday->name],
-            ),
-            "approvedVacations" => $approvedVacations->mapWithKeys(
-                fn(Vacation $vacation): array => [
-                    $vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest),
-                ],
-            ),
-            "pendingVacations" => $pendingVacations->mapWithKeys(
-                fn(Vacation $vacation): array => [
-                    $vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest),
-                ],
-            ),
             "stats" => [
-                "hasLimit" => $hasLimit,
                 "limit" => $limit,
                 "remaining" => $remaining,
                 "used" => $used,

app/Infrastructure/Http/Middleware/HandleInertiaRequests.php

@@ -25,6 +25,7 @@ class HandleInertiaRequests extends Middleware
             "flash" => $this->getFlashData($request),
             "years" => $this->getYearsData($request),
             "vacationRequestsCount" => $this->getVacationRequestsCount($request),
+            "deployInformation" => $this->getDeployInformation(),
         ]);
     }
 
@@ -71,4 +72,15 @@ class HandleInertiaRequests extends Middleware
             ->count()
         : null;
     }
+
+    protected function getDeployInformation(): Closure
+    {
+        return fn(): array => [
+            "release_version" => config("heroku.release_version"),
+            "slug_description" => config("heroku.slug_description"),
+            "release_created_at" => config("heroku.release_created_at"),
+            "slug_commit" => config("heroku.slug_commit"),
+            "github_url" => config("heroku.github_url", ""),
+        ];
+    }
 }

config/heroku.php

@@ -0,0 +1,11 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+    "release_version" => env("HEROKU_RELEASE_VERSION"),
+    "slug_description" => env("HEROKU_SLUG_DESCRIPTION"),
+    "release_created_at" => env("HEROKU_RELEASE_CREATED_AT"),
+    "slug_commit" => env("HEROKU_SLUG_COMMIT"),
+    "github_url" => env("GITHUB_REPO_URL"),
+];

phpunit.xml

@@ -32,5 +32,10 @@
         <env name="QUEUE_CONNECTION" value="sync"/>
         <env name="SESSION_DRIVER" value="array"/>
         <env name="TELESCOPE_ENABLED" value="false"/>
+        <env name="HEROKU_RELEASE_VERSION" value="v01"/>
+        <env name="HEROKU_SLUG_DESCRIPTION" value="Dev 643f546"/>
+        <env name="HEROKU_RELEASE_CREATED_AT" value="2022-07-04T18:05:46Z"/>
+        <env name="HEROKU_SLUG_COMMIT" value="643f546142b8a2db342f0ae46f01e61dce03e97c"/>
+        <env name="GITHUB_REPO_URL" value="https://github.com/blumilksoftware/toby"/>
     </php>
 </phpunit>

resources/js/Pages/Dashboard.vue

@@ -3,11 +3,9 @@
   <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
     <div class="grid grid-cols-1 gap-4 xl:col-span-2">
       <Welcome :user="auth.user" />
-      <VacationCalendar
-        :holidays="allHolidays"
-        :approved-vacations="approvedVacations"
-        :pending-vacations="pendingVacations"
-      />
+      <VacationStats :stats="stats" />
+    </div>
+    <div class="grid grid-cols-1 gap-4">
       <PendingVacationRequests
         v-if="can.listAllVacationRequests"
         :requests="vacationRequests.data"
@@ -16,9 +14,6 @@
         v-else
         :requests="vacationRequests.data"
       />
-    </div>
-    <div class="grid grid-cols-1 gap-4">
-      <VacationStats :stats="stats" />
       <AbsenceList
         v-if="years.current.year === years.selected.year && absences.data.length"
         :absences="absences.data"
@@ -43,7 +38,6 @@ import HomeOfficeList from '@/Shared/Widgets/HomeOfficeList'
 import UpcomingHolidays from '@/Shared/Widgets/UpcomingHolidays'
 import UserVacationRequests from '@/Shared/Widgets/UserVacationRequests'
 import PendingVacationRequests from '@/Shared/Widgets/PendingVacationRequests'
-import VacationCalendar from '@/Shared/Widgets/VacationCalendar'
 
 defineProps({
   auth: Object,
@@ -54,8 +48,5 @@ defineProps({
   can: Object,
   stats: Object,
   years: Object,
-  allHolidays: Object,
-  approvedVacations: Object,
-  pendingVacations: Object,
 })
 </script>

resources/js/Shared/DeployInfo.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="min-w-full p-4 text-xs text-gray-500 flex flex-row gap-x-1"
+  >
+    <p class="flex flex-col sm:flex-row gap-x-1">
+      <span class="font-bold whitespace-nowrap">Wersja:</span>
+      <span
+        class="whitespace-nowrap"
+        :title="`Commit: ${deployInformation.slug_commit ?? 'unset'}`"
+      >
+        {{ deployInformation.slug_description ?? 'unset' }} ({{ deployInformation.release_version ?? 'unset' }})
+      </span>
+    </p>
+    <p
+      v-if="deployInformation.release_created_at"
+      class="flex flex-col sm:flex-row gap-x-1 border-l-2 border-gray-300 pl-1"
+    >
+      <span class="font-bold whitespace-nowrap">Ostatnio zbudowano:</span>
+      <span>{{ getDate() }}</span>
+    </p>
+    <p
+      v-if="deployInformation.github_url"
+      class="flex flex-col sm:flex-row gap-x-1 border-l-2 border-gray-300 pl-1"
+    >
+      <span class="hidden sm:block font-bold whitespace-nowrap">Repozytorium:</span>
+      <span class="block sm:hidden font-bold whitespace-nowrap">Repo:</span>
+      <a
+        v-if="deployInformation.github_url"
+        class="text-gray-800 whitespace-nowrap underline hover:no-underline hover:text-blumilk-600"
+        :href="deployInformation.github_url"
+        target="_blank"
+        rel="noopener nofollow noreferrer"
+      >GitHub</a>
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { DateTime } from 'luxon'
+
+let props = defineProps({
+  deployInformation: Object,
+})
+
+function getDate() {
+  return DateTime.fromISO(props.deployInformation.release_created_at)
+    .toLocaleString({
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+}
+</script>

resources/js/Shared/Layout/AppLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-full">
+  <div class="relative min-h-screen">
     <MainMenu
       :auth="auth"
       :years="years"
@@ -9,7 +9,12 @@
       <div class="lg:px-4">
         <slot />
       </div>
+      <div class="h-8 sm:h-4"></div>
     </main>
+    <DeployInfo
+      :deploy-information="deployInformation"
+      class="absolute bottom-0 justify-end"
+    />
   </div>
 </template>
 
@@ -17,12 +22,14 @@
 import MainMenu from '@/Shared/MainMenu'
 import { useToast } from 'vue-toastification'
 import { watch } from 'vue'
+import DeployInfo from '@/Shared/DeployInfo'
 
 const props = defineProps({
   flash: Object,
   auth: Object,
   years: Object,
   vacationRequestsCount: Number,
+  deployInformation: Object,
 })
 
 const toast = useToast()

resources/js/Shared/Layout/GuestLayout.vue

@@ -1,5 +1,17 @@
 <template>
-  <div class="flex flex-col justify-center py-12 min-h-screen bg-blumilk-25 sm:px-6 lg:px-8">
+  <div class="relative flex flex-col justify-center py-12 min-h-screen bg-blumilk-25 sm:px-6 lg:px-8">
     <slot />
+    <DeployInfo
+      :deploy-information="deployInformation"
+      class="absolute left-0 bottom-0 justify-end"
+    />
   </div>
 </template>
+
+<script setup>
+import DeployInfo from '@/Shared/DeployInfo'
+
+defineProps({
+  deployInformation: Object,
+})
+</script>

resources/js/Shared/Widgets/Calendar/DayComponent.vue

@@ -1,120 +0,0 @@
-<template>
-  <div
-    class="box-border"
-    :class="[
-      day.isCurrentMonth ? {
-        'bg-red-100': day.isWeekend,
-        'bg-white hover:bg-blumilk-25': !day.isWeekend && !day.isHoliday,
-        'bg-red-100 text-red-800': day.isHoliday || day.isWeekend
-      } : [
-        'bg-gray-50 text-gray-500',
-        {
-          'bg-red-50': day.isWeekend
-        }
-      ],
-      day.isHoliday && 'font-bold cursor-default',
-      (day.isPendingVacation) && `border-b-4 border-dashed ${day.getVacationType.border}`,
-      (day.isVacation) && `border-b-4 ${day.getVacationType.border}`
-    ]"
-  >
-    <Popper
-      v-if="day.isHoliday"
-      as="div"
-      open-delay="200"
-      hover
-      offset-distance="0"
-      @mouseover.passive="onMouseover"
-      @mouseleave="onMouseleave"
-    >
-      <time
-        :datetime="day.date"
-        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
-      >
-        {{ day.dayNumber }}
-      </time>
-      <template #content>
-        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
-          {{ day.getHolidayInfo }}
-        </div>
-      </template>
-    </Popper>
-    <Popper
-      v-else-if="day.isVacation || day.isPendingVacation"
-      as="div"
-      open-delay="200"
-      hover
-      offset-distance="0"
-      @mouseover.passive="onMouseover"
-      @mouseleave="onMouseleave"
-    >
-      <div class="flex justify-between">
-        <time
-          :datetime="day.date"
-          :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
-        >
-          {{ day.dayNumber }}
-        </time>
-        <div class="hidden md:inline-block">
-          <VacationIcon
-            :type="day.getVacationType.value"
-          />
-        </div>
-      </div>
-      <template #content>
-        <VacationPopup :vacation="day.getVacationInfo" />
-      </template>
-    </Popper>
-    <div
-      v-else-if="day.isWeekend"
-      class="text-red-800"
-    >
-      <time
-        :datetime="day.date"
-        class="cursor-default"
-        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
-      >
-        {{ day.dayNumber }}
-      </time>
-    </div>
-    <InertiaLink
-      v-else
-      href="/vacation/requests/create"
-      :data="{ 'from_date': day.date }"
-      @mouseover.passive="onMouseover"
-      @mouseleave="onMouseleave"
-    >
-      <time
-        :datetime="day.date"
-        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
-      >
-        {{ day.dayNumber }}
-      </time>
-    </InertiaLink>
-  </div>
-</template>
-
-<script setup>
-import Popper from 'vue3-popper'
-import { defineProps, ref } from 'vue'
-import VacationPopup from '@/Shared/VacationPopup'
-import VacationIcon from '@/Shared/VacationTypeCalendarIcon'
-
-defineProps({
-  day: {
-    type: Object,
-    required: true,
-  },
-})
-
-const isActive = ref(false)
-
-function onMouseover() {
-  if (!isActive.value)
-    isActive.value = true
-}
-
-function onMouseleave() {
-  if (isActive.value)
-    isActive.value = false
-}
-</script>

resources/js/Shared/Widgets/Calendar/ViewModeOptions.js

@@ -1,12 +0,0 @@
-function isViewModeKey(key) {
-  return this.key === key.value
-}
-
-export const viewModes = [
-  { key: 'week', name: 'Widok tygodnia', shortcut: 'Tydzień', is: isViewModeKey },
-  { key: 'month', name: 'Widok miesiąca', shortcut: 'Miesiąc', is: isViewModeKey },
-]
-
-export function find(modeKey) {
-  return viewModes.find(mode => mode.key === modeKey)
-}

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -1,407 +0,0 @@
-<template>
-  <section class="bg-white shadow-md">
-    <div class="grid grid-cols-3 grid-rows-1 items-center justify-center p-4 sm:px-6">
-      <h2 class="text-lg font-medium leading-6 text-gray-900">
-        {{ calendarState.monthName }} {{ !calendarState.isActualYear ? calendar.currents.year : undefined }}
-      </h2>
-      <div class="flex justify-center">
-        <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 py-2 pl-3 pr-4 text-gray-400 focus:relative md:w-9 md:px-2"
-            :class="[ calendarState.isPrevious ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
-            @click="toPrevious"
-          >
-            <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</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"
-            @click="goToToday"
-          >
-            Dzisiaj
-          </button>
-          <span
-            class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
-          />
-          <button
-            type="button"
-            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 py-2 pl-4 pr-3 text-gray-400 focus:relative md:w-9 md:px-2"
-            :class="[ calendarState.isNext ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
-            :disabled="!calendarState.isNext"
-            @click="toNext"
-          >
-            <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
-            <ChevronRightIcon
-              class="h-5 w-5"
-              aria-hidden="true"
-            />
-          </button>
-        </div>
-      </div>
-      <Menu
-        as="div"
-        class="flex justify-end 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"
-        >
-          <span class="md:hidden">{{ calendarState.viewMode.details.shortcut }}</span>
-          <span class="hidden md:inline-block">{{ calendarState.viewMode.details.name }}</span>
-          <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-for="option in viewModes"
-                :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.shortcut }}
-                  <CheckIcon
-                    v-if="option.is(calendar.viewMode)"
-                    class="ml-2 w-5 h-5 text-blumilk-500"
-                  />
-                </button>
-              </MenuItem>
-            </div>
-          </MenuItems>
-        </transition>
-      </Menu>
-    </div>
-    <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
-      <div
-        v-if="calendarState.viewMode.isMonth"
-        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="py-2 bg-white">
-          Pn
-        </div>
-        <div class="py-2 bg-white">
-          Wt
-        </div>
-        <div class="py-2 bg-white">
-          Śr
-        </div>
-        <div class="py-2 bg-white">
-          Cz
-        </div>
-        <div class="py-2 bg-white">
-          Pt
-        </div>
-        <div class="py-2 bg-red-100 text-red-800">
-          Sb
-        </div>
-        <div class="py-2 bg-red-100 text-red-800">
-          Nd
-        </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 gap-px"
-          :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
-        >
-          <DayComponent
-            v-for="(day, index) in days"
-            :key="index"
-            :day="day"
-            class="flex flex-col relative py-2 px-3"
-            :class="{ 'day': calendarState.viewMode.isWeek }"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup>
-import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import { ref, watch, computed, reactive } from 'vue'
-import { DateTime } from 'luxon'
-import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
-import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
-import { useMonthInfo } from '@/Composables/monthInfo'
-import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions'
-import DayComponent from '@/Shared/Widgets/Calendar/DayComponent'
-
-const props = defineProps({
-  holidays: Object,
-  approvedVacations: Object,
-  pendingVacations: Object,
-})
-
-let days = ref([])
-
-function getCurrentDate() {
-  const { year, month, weekNumber } = DateTime.now()
-  return { year, month, week: weekNumber }
-}
-const currentDate = getCurrentDate()
-
-const months = useMonthInfo().getMonths()
-const { findType } = useVacationTypeInfo()
-const selectedYear = useCurrentYearPeriodInfo().year.value
-const weeksInYear = DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber
-
-const calendar = {
-  viewMode: ref(localStorage.getItem('calendarViewMode') ?? 'week'),
-  currents: reactive({
-    year: selectedYear,
-    month: selectedYear === currentDate.year ? currentDate.month : 1,
-    week: selectedYear === currentDate.year ? currentDate.week : 0,
-  }),
-}
-
-const calendarState = reactive({
-  viewMode: {
-    isWeek: computed(() => calendar.viewMode.value === 'week'),
-    isMonth: computed(() => calendar.viewMode.value === 'month'),
-    details: computed(() => findViewMode(calendar.viewMode.value)),
-  },
-  monthName: computed(() => months[calendar.currents.month - 1]?.name),
-  isActualYear: computed(() => calendar.currents.year === DateTime.now().year),
-  isPrevious: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 1 : calendar.currents.week > 0),
-  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < weeksInYear),
-})
-
-const customCalendar = {
-  loadCalendar() {
-    const date = DateTime.fromObject({
-      year: calendar.currents.year,
-      month: calendarState.viewMode.isMonth ? calendar.currents.month : 1,
-      day: 1,
-    })
-    days.value = this.generateCalendarData(date)
-  },
-  generateCalendarData(date) {
-    const firstMonthDay = date.startOf('month')
-    const lastMonthDay = date.endOf('month')
-
-    if (calendarState.viewMode.isWeek) {
-      return this.generateWeekData(firstMonthDay.startOf('week'))
-    } else if (calendarState.viewMode.isMonth) {
-      return this.generateMonthData(firstMonthDay.startOf('week'), lastMonthDay.endOf('week'))
-    }
-    return []
-  },
-  generateWeekData(start) {
-    let days = [], startWeek
-    if (calendar.currents.month === 1 && calendar.currents.week === 0)
-      startWeek = DateTime.fromObject({ year: calendar.currents.year, month: 1, day: 1 }).startOf('week')
-    else if (calendarState.isActualYear)
-      startWeek = DateTime.fromObject({ weekNumber: calendar.currents.week })
-    else
-      startWeek = start.plus({ week: calendar.currents.week })
-    const endWeek = startWeek.endOf('week')
-    for (let day = startWeek; day < endWeek; day = day.plus({ day: 1 })) {
-      days.push(this.prepareDay(day))
-    }
-    return days
-  },
-  generateMonthData(start, end) {
-    let days = []
-    for (let day = start; day < end; day = day.plus({ day: 1 })) {
-      days.push(this.prepareDay(day))
-    }
-
-    return days
-  },
-  prepareDay(day) {
-    const isCurrentMonth = isInCurrentMonth(day)
-    const startDay = {
-      date: day.toISODate(),
-      isVacation: isCurrentMonth && isVacation(day),
-      isPendingVacation: isCurrentMonth && isPendingVacation(day),
-      isHoliday: isHoliday(day),
-    }
-
-    return {
-      ...startDay,
-      dayNumber: day.day,
-      isCurrentMonth,
-      isToday: isToday(day),
-      isWeekend: isWeekend(day),
-      getHolidayInfo: startDay.isHoliday ? getHolidayInfo(startDay) : undefined,
-      getVacationType: startDay.isVacation || startDay.isPendingVacation ? getVacationType(startDay) : undefined,
-      getVacationInfo: startDay.isVacation || startDay.isPendingVacation ? getVacationInfo(startDay) : undefined,
-    }
-  },
-}
-
-watch([calendar.viewMode, calendar.currents], () => {
-  customCalendar.loadCalendar()
-})
-
-customCalendar.loadCalendar()
-
-function toPrevious() {
-  if (calendarState.isPrevious) {
-    if (calendar.viewMode.value === 'week')
-      minusWeek()
-    else
-      minusMonth()
-  }
-}
-
-function toNext() {
-  if (calendarState.isNext) {
-    if (calendar.viewMode.value === 'week')
-      addWeek()
-    else
-      addMonth()
-  }
-}
-
-function resetCalendar(config = {}) {
-  const currentMonth = isUndefined(config.month) ? currentDate.month : config.month
-  const currentWeek = isUndefined(config.week) ? currentDate.week : config.week
-
-  calendar.currents.year = isUndefined(config.year) ? selectedYear : config.month
-  calendar.currents.month = calendarState.isActualYear || !isUndefined(config.year) ? currentMonth : 1
-  calendar.currents.week = calendarState.isActualYear || !isUndefined(config.week) ? currentWeek : 0
-}
-
-function isUndefined(value) {
-  return value === undefined
-}
-
-function addWeek(minus = false) {
-  const howMany = minus ? -1: 1
-  let nextMonth, date = DateTime.fromObject({
-    year: calendar.currents.year,
-    month: 1,
-    day: 1,
-  })
-
-  date = date.plus({ week: calendar.currents.week + howMany })
-
-  const startWeekDay = date.startOf('week'), endWeekDay = date.endOf('week')
-  nextMonth = howMany > 0 ? startWeekDay.month : endWeekDay.month
-  if (howMany < 0 && endWeekDay.day === endWeekDay.daysInMonth)
-    calendar.currents.week--
-  else if (howMany > 0 && startWeekDay.day === 1)
-    calendar.currents.week++
-
-  if (nextMonth !== calendar.currents.month) {
-    calendar.currents.month = calendar.currents.week > 1 ? nextMonth : 1
-    if (calendar.currents.week === 1)
-      calendar.currents.week = 0
-    return
-  }
-  calendar.currents.week += howMany
-}
-
-function minusWeek() {
-  addWeek(true)
-}
-
-function addMonth(minus = false) {
-  calendar.currents.month += minus ? -1 : 1
-}
-
-function minusMonth() {
-  addMonth(true)
-}
-
-function goToToday() {
-  resetCalendar({ year: currentDate.year, months: currentDate.month, week: currentDate.week })
-}
-
-function updateViewMode(type) {
-  if (type === 'month')
-    resetCalendar({ week: 0 })
-  else
-    resetCalendar()
-  calendar.viewMode.value = type
-  localStorage.setItem('calendarViewMode', type)
-}
-
-function isInCurrentMonth(date) {
-  return calendar.currents.month === date.month
-}
-
-function isWeekend(date) {
-  return date.weekday === 6 || date.weekday === 7
-}
-
-function isToday(date) {
-  return date.toISODate() === DateTime.local().toISODate()
-}
-
-function isHoliday(date) {
-  return props.holidays[date.toISODate()] !== undefined
-}
-
-function getHolidayInfo(day) {
-  return props.holidays[day.date]
-}
-
-function isVacation(date) {
-  return props.approvedVacations[date.toISODate()] !== undefined
-}
-
-function isPendingVacation(date) {
-  return props.pendingVacations[date.toISODate()] !== undefined
-}
-
-function getVacationType(day) {
-  return findType(getVacationInfo(day).type)
-}
-
-function getVacationInfo(day) {
-  return day.isVacation ? props.approvedVacations[day.date] : props.pendingVacations[day.date]
-}
-</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>

resources/js/Shared/Widgets/VacationStats.vue

@@ -1,83 +1,84 @@
 <template>
-  <section>
-    <div
-      v-if="stats.hasLimit"
-      class="grid grid-cols-2 gap-2 h-full"
-    >
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dd class="mt-1 text-4xl font-semibold text-blumilk-500">
-          {{ stats.remaining }}
-        </dd>
-        <dt class="font-medium text-gray-700 truncate text-md">
-          Pozostało
-        </dt>
-      </div>
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
-          {{ stats.used }}
-        </dd>
-        <dt class="font-medium text-gray-700 truncate text-md">
-          Wykorzystane
-        </dt>
-      </div>
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
-          {{ stats.pending }}
-        </dt>
-        <dd class="font-medium text-gray-700 truncate text-md">
-          Rozpatrywane
-        </dd>
-      </div>
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dt class="mt-1 text-4xl font-semibold text-blumilk-800">
-          {{ stats.limit }}
-        </dt>
-        <dd class="font-medium text-gray-700 truncate text-md">
-          Limit urlopu
-        </dd>
-      </div>
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dt class="mt-1 text-4xl font-semibold text-gray-500">
-          {{ stats.other }}
-        </dt>
-        <dd class="font-medium text-gray-700 truncate text-md">
-          Inne urlopy
-        </dd>
-      </div>
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dt class="mt-1 text-4xl font-semibold text-lime-500">
-          {{ stats.homeOffice }}
-        </dt>
-        <dd class="font-medium text-gray-700 truncate text-md">
-          Praca zdalna
-        </dd>
-      </div>
+  <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
+    <div class="hidden p-4 bg-white shadow-md md:block">
+      <VacationChart :stats="stats" />
     </div>
-    <div
-      v-else
-      class="h-full grid grid-cols-2 gap-2 h-full"
-    >
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dt class="mt-1 text-4xl font-semibold text-gray-500">
-          {{ stats.other }}
-        </dt>
-        <dd class="font-medium text-gray-700 truncate text-md">
-          Inne urlopy
-        </dd>
-      </div>
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dt class="mt-1 text-4xl font-semibold text-lime-500">
-          {{ stats.homeOffice }}
-        </dt>
-        <dd class="font-medium text-gray-700 truncate text-md">
-          Praca zdalna
-        </dd>
+    <div class="h-full">
+      <div class="grid grid-cols-2 gap-4 h-full">
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+          <dd class="mt-1 text-4xl font-semibold text-blumilk-500">
+            {{ stats.remaining }}
+          </dd>
+          <dt class="font-medium text-gray-700 truncate text-md">
+            Pozostało
+          </dt>
+          <dt class="mt-2 text-sm font-medium text-gray-500">
+            Dni do wykorzystania teraz.
+          </dt>
+        </div>
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+          <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
+            {{ stats.used }}
+          </dd>
+          <dt class="font-medium text-gray-700 truncate text-md">
+            Wykorzystane
+          </dt>
+          <dt class="mt-2 text-sm font-medium text-gray-500">
+            Dni, które zostały już wykorzystane na urlop wypoczynkowy.
+          </dt>
+        </div>
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+          <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
+            {{ stats.pending }}
+          </dt>
+          <dd class="font-medium text-gray-700 truncate text-md">
+            Rozpatrywane
+          </dd>
+          <dt class="mt-2 text-sm font-medium text-gray-500">
+            Dni czekające na akceptację przełożonych.
+          </dt>
+        </div>
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+          <dt class="mt-1 text-4xl font-semibold text-blumilk-800">
+            {{ stats.limit }}
+          </dt>
+          <dd class="font-medium text-gray-700 truncate text-md">
+            Limit urlopu
+          </dd>
+          <dt class="mt-2 text-sm font-medium text-gray-500">
+            Twój roczny limit urlopu wypoczynkowego.
+          </dt>
+        </div>
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+          <dt class="mt-1 text-4xl font-semibold text-gray-500">
+            {{ stats.other }}
+          </dt>
+          <dd class="font-medium text-gray-700 truncate text-md">
+            Inne urlopy
+          </dd>
+          <dt class="mt-2 text-sm font-medium text-gray-500">
+            Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
+          </dt>
+        </div>
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+          <dt class="mt-1 text-4xl font-semibold text-lime-500">
+            {{ stats.homeOffice }}
+          </dt>
+          <dd class="font-medium text-gray-700 truncate text-md">
+            Praca zdalna
+          </dd>
+          <dt class="mt-2 text-sm font-medium text-gray-500">
+            Dni przepracowane poza biurem.
+          </dt>
+        </div>
       </div>
     </div>
   </section>
 </template>
 
 <script setup>
+import VacationChart from '@/Shared/VacationChart'
+
 defineProps({
   stats: Object,
 })