2022-04-07 14:33:15 +02:00 · 2022-04-07 13:35:08 +02:00 · 2022-04-07 13:35:08 +02:00 · 2022-04-07 13:35:08 +02:00 · 2022-04-07 13:35:08 +02:00 · 2022-04-07 13:35:08 +02:00
7 changed files with 205 additions and 18 deletions
--- a/app/Infrastructure/Http/Controllers/AnnualSummaryController.php
+++ b/app/Infrastructure/Http/Controllers/AnnualSummaryController.php
@@ -10,6 +10,7 @@ use Inertia\Response;
 use Toby\Eloquent\Helpers\YearPeriodRetriever;
 use Toby\Eloquent\Models\Holiday;
 use Toby\Eloquent\Models\Vacation;
+use Toby\Infrastructure\Http\Resources\SimpleVacationRequestResource;

 class AnnualSummaryController extends Controller
 {
@@ -25,22 +26,22 @@ class AnnualSummaryController extends Controller

        $vacations = $request->user()
            ->vacations()
-            ->with("vacationRequest")
+            ->with("vacationRequest.vacations")
            ->whereBetween("date", [$startDate, $endDate])
            ->approved()
            ->get();

        $pendingVacations = $request->user()
            ->vacations()
-            ->with("vacationRequest")
+            ->with("vacationRequest.vacations")
            ->whereBetween("date", [$startDate, $endDate])
            ->pending()
            ->get();

        return inertia("AnnualSummary", [
            "holidays" => $holidays->mapWithKeys(fn(Holiday $holiday) => [$holiday->date->toDateString() => $holiday->name]),
-            "vacations" => $vacations->mapWithKeys(fn(Vacation $vacation) => [$vacation->date->toDateString() => $vacation->vacationRequest->type]),
-            "pendingVacations" => $pendingVacations->mapWithKeys(fn(Vacation $vacation) => [$vacation->date->toDateString() => $vacation->vacationRequest->type]),
+            "vacations" => $vacations->mapWithKeys(fn(Vacation $vacation) => [$vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest)]),
+            "pendingVacations" => $pendingVacations->mapWithKeys(fn(Vacation $vacation) => [$vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest)]),
        ]);
    }
 }
--- a/app/Infrastructure/Http/Resources/SimpleVacationRequestResource.php
+++ b/app/Infrastructure/Http/Resources/SimpleVacationRequestResource.php
@@ -0,0 +1,25 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Infrastructure\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class SimpleVacationRequestResource extends JsonResource
+{
+    public static $wrap = null;
+
+    public function toArray($request): array
+    {
+        return [
+            "id" => $this->id,
+            "name" => $this->name,
+            "type" => $this->type,
+            "state" => $this->state,
+            "from" => $this->from->toDisplayString(),
+            "to" => $this->to->toDisplayString(),
+            "days" => $this->vacations->count(),
+        ];
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
                "echarts": "^5.3.2",
                "eslit": "^6.0.0",
                "flatpickr": "^4.6.11",
+                "floating-vue": "^2.0.0-beta.13",
                "laravel-mix": "^6.0.43",
                "lodash": "^4.17.21",
                "luxon": "^2.3.1",
@@ -1681,6 +1682,19 @@
                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
            }
        },
+        "node_modules/@floating-ui/core": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
+            "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
+        },
+        "node_modules/@floating-ui/dom": {
+            "version": "0.1.10",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
+            "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+            "dependencies": {
+                "@floating-ui/core": "^0.3.0"
+            }
+        },
        "node_modules/@headlessui/vue": {
            "version": "1.5.0",
            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.5.0.tgz",
@@ -4866,6 +4880,18 @@
            "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
            "dev": true
        },
+        "node_modules/floating-vue": {
+            "version": "2.0.0-beta.13",
+            "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.13.tgz",
+            "integrity": "sha512-C2bGEtdbOXm+2rmkn8W6dTQeh3xJT7YbdHnrbanYDS3vK/1lumdXhYA6j2Qs+9shViNjoVUUND1EhLxLDP2OZA==",
+            "dependencies": {
+                "@floating-ui/dom": "^0.1.10",
+                "vue-resize": "^2.0.0-alpha.1"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.0"
+            }
+        },
        "node_modules/follow-redirects": {
            "version": "1.14.9",
            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
@@ -9029,6 +9055,14 @@
            "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.0.0.tgz",
            "integrity": "sha512-lYSJFW/TyQqmg7MvUbEB8ua1mwWy/v8qve7QJuA/UWUAXC4/yVUdAm4pg/sM9+k5n7VLckBv6ucOROuGBsGPDQ=="
        },
+        "node_modules/vue-resize": {
+            "version": "2.0.0-alpha.1",
+            "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+            "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+            "peerDependencies": {
+                "vue": "^3.0.0"
+            }
+        },
        "node_modules/vue-style-loader": {
            "version": "4.1.3",
            "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -10755,6 +10789,19 @@
                "strip-json-comments": "^3.1.1"
            }
        },
+        "@floating-ui/core": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
+            "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
+        },
+        "@floating-ui/dom": {
+            "version": "0.1.10",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
+            "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+            "requires": {
+                "@floating-ui/core": "^0.3.0"
+            }
+        },
        "@headlessui/vue": {
            "version": "1.5.0",
            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.5.0.tgz",
@@ -13304,6 +13351,15 @@
            "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
            "dev": true
        },
+        "floating-vue": {
+            "version": "2.0.0-beta.13",
+            "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.13.tgz",
+            "integrity": "sha512-C2bGEtdbOXm+2rmkn8W6dTQeh3xJT7YbdHnrbanYDS3vK/1lumdXhYA6j2Qs+9shViNjoVUUND1EhLxLDP2OZA==",
+            "requires": {
+                "@floating-ui/dom": "^0.1.10",
+                "vue-resize": "^2.0.0-alpha.1"
+            }
+        },
        "follow-redirects": {
            "version": "1.14.9",
            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
@@ -16265,6 +16321,12 @@
            "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.0.0.tgz",
            "integrity": "sha512-lYSJFW/TyQqmg7MvUbEB8ua1mwWy/v8qve7QJuA/UWUAXC4/yVUdAm4pg/sM9+k5n7VLckBv6ucOROuGBsGPDQ=="
        },
+        "vue-resize": {
+            "version": "2.0.0-alpha.1",
+            "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+            "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+            "requires": {}
+        },
        "vue-style-loader": {
            "version": "4.1.3",
            "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
        "echarts": "^5.3.2",
        "eslit": "^6.0.0",
        "flatpickr": "^4.6.11",
+        "floating-vue": "^2.0.0-beta.13",
        "laravel-mix": "^6.0.43",
        "lodash": "^4.17.21",
        "luxon": "^2.3.1",
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,5 +1,6 @@
@import 'flatpickr/dist/themes/light.css';
@import 'vue-toastification/dist/index.css';
+@import 'floating-vue/dist/style.css';

@tailwind base;
@tailwind components;
@@ -68,3 +69,16 @@
 ::-webkit-scrollbar-thumb:hover {
    background: #dadce0;
 }
+
+.v-popper--theme-tooltip .v-popper__inner {
+    padding: 0;
+    background: transparent;
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-outer {
+    border-color: #527ABA;
+}
+
+.v-popper--theme-tooltip:focus-visible {
+    outline: none;
+}
--- a/resources/js/Pages/AnnualSummary.vue
+++ b/resources/js/Pages/AnnualSummary.vue
@@ -1,10 +1,12 @@
 <template>
+  <InertiaHead title="Podsumowanie roczne" />
  <div class="bg-white shadow-md">
    <div class="p-4 sm:px-6">
      <h2 class="text-lg font-medium leading-6 text-gray-900">
        Podsumowanie roczne
      </h2>
    </div>
+    <div class="max-w-md" />
    <div class="grid grid-cols-1 gap-8 py-8 px-4 mx-auto max-w-3xl border-t border-gray-200 sm:grid-cols-2 sm:px-6 xl:grid-cols-3 xl:px-8 xl:max-w-none 2xl:grid-cols-4">
      <section
        v-for="month in months"
@@ -23,32 +25,46 @@
          <div>Sb</div>
          <div>Nd</div>
        </div>
-        <div class="grid isolate grid-cols-7 mt-2 text-sm ring-1 ring-gray-200 shadow">
+        <div class="grid grid-cols-7 mt-2 text-sm ring-1 ring-gray-200 shadow">
          <template
            v-for="(day, dayIdx) in month.days"
            :key="dayIdx"
          >
            <button
              v-if="day.isCurrentMonth"
-              :class="[day.isVacation && `${getVacationBorder(day.date)}`, day.isPendingVacation && `border-dashed mx-0.5 ${getPendingVacationBorder(day.date)}`, !day.isVacation && !day.isPendingVacation && 'border-transparent', 'relative bg-white hover:bg-gray-100 border-b-4 py-1.5 focus:z-10 font-medium']"
+              :class="[day.isVacation && `${getVacationBorder(day.date)}`, day.isPendingVacation && `border-dashed mx-0.5 ${getPendingVacationBorder(day.date)}`, !day.isVacation && !day.isPendingVacation && 'border-transparent', 'relative bg-white hover:bg-blumilk-25 border-b-4 py-1.5 font-medium']"
            >
              <div :class="[day.isCurrentMonth && (day.isWeekend || day.isHoliday) && 'text-red-600 font-bold', day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']">
                <time :datetime="day.date.toISODate()">
                  {{ day.date.day }}
                </time>
              </div>
-              <Popper
-                v-if="day.isHoliday || day.isVacation || day.isPendingVacation"
-                hover
+              <Tooltip
+                v-if="day.isVacation || day.isPendingVacation"
+                :triggers="['click']"
+                placement="bottom"
+                auto-hide
              >
-                <button class="absolute inset-0" />
-
-                <template #content>
-                  <div class="py-2 px-4 text-gray-900 bg-white rounded-md shadow-md text-md">
-                    {{ dayIdx }}
+                <div class="absolute inset-0" />
+                <template #popper>
+                  <div class="mt-1">
+                    <VacationPopup :vacation="getVacationInfo(day)" />
                  </div>
                </template>
-              </Popper>
+              </Tooltip>
+              <Tooltip
+                v-else-if="day.isHoliday"
+                :triggers="['click']"
+                placement="bottom"
+                auto-hide
+              >
+                <div class="absolute inset-0" />
+                <template #popper>
+                  <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
+                    {{ holidays[day.date.toISODate()] }}
+                  </div>
+                </template>
+              </Tooltip>
            </button>
            <div
              v-else
@@ -71,7 +87,9 @@
 import { DateTime } from 'luxon'
 import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
-import Popper from 'vue3-popper'
+import { Tooltip } from 'floating-vue'
+import VacationPopup from '@/Shared/VacationPopup'
+
 const props = defineProps({
  holidays: Object,
  vacations: Object,
@@ -136,14 +154,18 @@ function isWeekend(date) {
 }

 function getVacationBorder(date) {
-  const type = findType(props.vacations[date.toISODate()])
+  const type = findType(props.vacations[date.toISODate()].type)

  return type.border.approved
 }

 function getPendingVacationBorder(date) {
-  const type = findType(props.pendingVacations[date.toISODate()])
+  const type = findType(props.pendingVacations[date.toISODate()].type)

  return type.border.approved
 }
+
+function getVacationInfo(day) {
+  return day.isVacation ? props.vacations[day.date.toISODate()] : props.pendingVacations[day.date.toISODate()]
+}
 </script>
--- a/resources/js/Shared/VacationPopup.vue
+++ b/resources/js/Shared/VacationPopup.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="py-2 px-6 text-left text-gray-900 whitespace-nowrap bg-white rounded-lg border border-gray-400">
+    <dl class="divide-y divide-gray-200">
+      <div class="py-2 space-y-1">
+        <dt class="text-sm font-medium text-gray-500">
+          Nr wniosku
+        </dt>
+        <dd class="text-sm text-gray-900">
+          <InertiaLink
+            :href="`/vacation/requests/${vacation.id}`"
+            class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
+          >
+            {{ vacation.name }}
+          </InertiaLink>
+        </dd>
+      </div>
+      <div class="py-2 space-y-1">
+        <dt class="text-sm font-medium text-gray-500">
+          Rodzaj urlopu
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900">
+          <VacationType :type="vacation.type" />
+        </dd>
+      </div>
+      <div class="py-2 space-y-1">
+        <dt class="text-sm font-medium text-gray-500">
+          Obecny status
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900">
+          <Status :status="vacation.state" />
+        </dd>
+      </div>
+      <div class="py-2 space-y-1">
+        <dt class="text-sm font-medium text-gray-500">
+          Data
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900">
+          <template v-if="vacation.days > 1">
+            {{ vacation.from }} - {{ vacation.to }}
+          </template>
+          <template v-else>
+            {{ vacation.from }}
+          </template>
+          <span class="font-semibold">
+            [Liczba dni: {{ vacation.days }}]
+          </span>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</template>
+
+
+<script setup>
+import VacationType from '@/Shared/VacationType'
+import Status from '@/Shared/Status'
+
+defineProps({
+  vacation: Object,
+})
+
+</script>