#62 - wip

app/Domain/Policies/VacationRequestPolicy.php

@@ -10,6 +10,11 @@ use Toby\Eloquent\Models\VacationRequest;
 
 class VacationRequestPolicy
 {
+    public function listAll(User $user): bool
+    {
+        return in_array($user->role, [Role::AdministrativeApprover, Role::TechnicalApprover], true);
+    }
+
     public function createOnBehalfOfEmployee(User $user): bool
     {
         return $user->role === Role::AdministrativeApprover;

app/Infrastructure/Http/Controllers/VacationRequestController.php

@@ -51,6 +51,45 @@ class VacationRequestController extends Controller
         ]);
     }
 
+    public function indexForApprovers(
+        Request $request,
+        YearPeriodRetriever $yearPeriodRetriever
+    ): RedirectResponse|Response {
+        if ($request->user()->cannot("listAll", VacationRequest::class)) {
+            return redirect()->route("vacation.requests.index");
+        }
+
+        $yearPeriod = $yearPeriodRetriever->selected();
+        $status = $request->get("status");
+        $user = $request->get("user");
+
+        $vacationRequests = VacationRequest::query()
+            ->with(["user", "vacations"])
+            ->where("year_period_id", $yearPeriod->id)
+            ->when($user !== null, fn(Builder $query) => $query->where("user_id", $user))
+            ->when($status !== null, fn (Builder $query) => $query->states(VacationRequestStatesRetriever::filterByStatus($status)))
+            ->latest()
+            ->paginate();
+
+        $users = User::query()
+            ->whereRelation(
+                "vacationlimits",
+                fn(Builder $query) => $query->where("year_period_id", $yearPeriod->id)->whereNotNull("days"),
+            )
+            ->orderBy("last_name")
+            ->orderBy("first_name")
+            ->get();
+
+        return inertia("VacationRequest/IndexForApprovers", [
+            "requests" => VacationRequestResource::collection($vacationRequests),
+            "users" => UserResource::collection($users),
+            "filters" => [
+                "status" => $status,
+                "user" => $user,
+            ],
+        ]);
+    }
+
     /**
      * @throws AuthorizationException
      */

app/Infrastructure/Http/Middleware/HandleInertiaRequests.php

@@ -7,6 +7,7 @@ namespace Toby\Infrastructure\Http\Middleware;
 use Illuminate\Http\Request;
 use Inertia\Middleware;
 use Toby\Eloquent\Helpers\YearPeriodRetriever;
+use Toby\Eloquent\Models\VacationRequest;
 use Toby\Infrastructure\Http\Resources\UserResource;
 
 class HandleInertiaRequests extends Middleware
@@ -25,6 +26,7 @@ class HandleInertiaRequests extends Middleware
                 "can" => [
                     "manageVacationLimits" => $user ? $user->can("manageVacationLimits") : false,
                     "manageUsers" => $user ? $user->can("manageUsers") : false,
+                    "listAllVacationRequests" => $user ? $user->can("listAll", VacationRequest::class) : false,
                 ],
             ],
             "flash" => fn() => [

resources/js/Composables/statusInfo.js

@@ -123,6 +123,12 @@ const statuses = [
   },
 ]
 
-export function useStatusInfo(status) {
-  return statuses.find(statusInfo => statusInfo.value === status)
+export function useStatusInfo() {
+  const getStatues = () => statuses
+  const findStatus = value => statuses.find(month => month.value === value)
+
+  return {
+    getStatues,
+    findStatus,
+  }
 }

resources/js/Pages/VacationRequest/IndexForApprovers.vue

@@ -0,0 +1,445 @@
+<template>
+  <InertiaHead title="Wnioski urlopowe" />
+  <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">
+          Wnioski urlopowe
+        </h2>
+      </div>
+      <div>
+        <InertiaLink
+          href="/vacation-requests/create"
+          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"
+        >
+          Dodaj wniosek
+        </InertiaLink>
+      </div>
+    </div>
+    <div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
+      <div class="border-t border-gray-200">
+        <div class="px-4 grid grid-cols-2 lg:grid-cols-4 gap-4">
+          <div class="max-w-md">
+            <Listbox
+              v-model="form.user"
+              as="div"
+              class="py-4 items-center"
+            >
+              <ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
+                Pracownik
+              </ListboxLabel>
+              <div class="mt-1 relative sm:mt-0">
+                <ListboxButton
+                  class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
+                >
+                  <span v-if="form.user === null">
+                    Wszyscy
+                  </span>
+                  <span
+                    v-else
+                    class="flex items-center"
+                  >
+                    <img
+                      :src="form.user.avatar"
+                      class="flex-shrink-0 h-6 w-6 rounded-full"
+                    >
+                    <span class="ml-3 block truncate">{{ form.user.name }}</span>
+                  </span>
+                  <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                    <SelectorIcon class="h-5 w-5 text-gray-400" />
+                  </span>
+                </ListboxButton>
+
+                <transition
+                  leave-active-class="transition ease-in duration-100"
+                  leave-from-class="opacity-100"
+                  leave-to-class="opacity-0"
+                >
+                  <ListboxOptions
+                    class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+                  >
+                    <ListboxOption
+                      v-slot="{ active, selected }"
+                      as="template"
+                      :value="null"
+                    >
+                      <li
+                        :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                      >
+                        <div class="flex items-center">
+                          Wszyscy pracownicy
+                        </div>
+
+                        <span
+                          v-if="selected"
+                          :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
+                        >
+                          <CheckIcon class="h-5 w-5" />
+                        </span>
+                      </li>
+                    </ListboxOption>
+                    <ListboxOption
+                      v-for="user in users.data"
+                      :key="user.id"
+                      v-slot="{ active, selected }"
+                      as="template"
+                      :value="user"
+                    >
+                      <li
+                        :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                      >
+                        <div class="flex items-center">
+                          <img
+                            :src="user.avatar"
+                            alt=""
+                            class="flex-shrink-0 h-6 w-6 rounded-full"
+                          >
+                          <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
+                            {{ user.name }}
+                          </span>
+                        </div>
+
+                        <span
+                          v-if="selected"
+                          :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
+                        >
+                          <CheckIcon class="h-5 w-5" />
+                        </span>
+                      </li>
+                    </ListboxOption>
+                  </ListboxOptions>
+                </transition>
+              </div>
+            </Listbox>
+          </div>
+          <div class="max-w-md">
+            <Listbox
+              v-model="form.status"
+              as="div"
+              class="py-4 items-center"
+            >
+              <ListboxLabel class="block text-sm font-medium text-gray-700 mb-2">
+                Status
+              </ListboxLabel>
+              <div class="mt-1 relative sm:mt-0">
+                <ListboxButton
+                  class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300"
+                >
+                  <span v-if="form.status === null">
+                    Wszystkie
+                  </span>
+                  <span
+                    v-else
+                    class="flex items-center"
+                  >
+                    <Status :status="form.status" />
+                  </span>
+                  <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                    <SelectorIcon class="h-5 w-5 text-gray-400" />
+                  </span>
+                </ListboxButton>
+
+                <transition
+                  leave-active-class="transition ease-in duration-100"
+                  leave-from-class="opacity-100"
+                  leave-to-class="opacity-0"
+                >
+                  <ListboxOptions
+                    class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+                  >
+                    <ListboxOption
+                      v-slot="{ active, selected }"
+                      as="template"
+                      :value="null"
+                    >
+                      <li
+                        :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                      >
+                        <div class="flex items-center">
+                          Wszyscy pracownicy
+                        </div>
+
+                        <span
+                          v-if="selected"
+                          :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
+                        >
+                          <CheckIcon class="h-5 w-5" />
+                        </span>
+                      </li>
+                    </ListboxOption>
+                    <ListboxOption
+                      v-for="user in users.data"
+                      :key="user.id"
+                      v-slot="{ active, selected }"
+                      as="template"
+                      :value="user"
+                    >
+                      <li
+                        :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                      >
+                        <div class="flex items-center">
+                          <img
+                            :src="user.avatar"
+                            alt=""
+                            class="flex-shrink-0 h-6 w-6 rounded-full"
+                          >
+                          <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
+                            {{ user.name }}
+                          </span>
+                        </div>
+
+                        <span
+                          v-if="selected"
+                          :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
+                        >
+                          <CheckIcon class="h-5 w-5" />
+                        </span>
+                      </li>
+                    </ListboxOption>
+                  </ListboxOptions>
+                </transition>
+              </div>
+            </Listbox>
+          </div>
+        </div>
+      </div>
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+          <tr>
+            <th
+              scope="col"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+            >
+              Numer
+            </th>
+            <th
+              scope="col"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+            >
+              Pracownik
+            </th>
+            <th
+              scope="col"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+            >
+              Rodzaj urlopu
+            </th>
+            <th
+              scope="col"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+            >
+              Od
+            </th>
+            <th
+              scope="col"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+            >
+              Do
+            </th>
+            <th
+              scope="col"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+            >
+              Dni urlopu
+            </th>
+            <th
+              scope="col"
+              class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
+            >
+              Status
+            </th>
+            <th scope="col" />
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-100">
+          <tr
+            v-for="request in requests.data"
+            :key="request.id"
+            class="hover:bg-blumilk-25"
+          >
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              <InertiaLink
+                :href="`/vacation-requests/${request.id}`"
+                class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
+              >
+                {{ request.name }}
+              </InertiaLink>
+            </td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
+              <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="request.user.avatar"
+                  >
+                </span>
+                <div class="ml-3">
+                  <div class="text-sm font-medium text-gray-500">
+                    {{ request.user.name }}
+                  </div>
+                </div>
+              </div>
+            </td>
+            <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">
+              {{ request.from }}
+            </td>
+            <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-sm text-gray-500">
+              {{ request.days.length }}
+            </td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              <Status :status="request.state" />
+            </td>
+            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+              <InertiaLink
+                :href="`/vacation-requests/${request.id}`"
+                class="flex justify-around"
+              >
+                <ChevronRightIcon class="block w-6 h-6 fill-blumilk-500" />
+              </InertiaLink>
+            </td>
+          </tr>
+          <tr
+            v-if="! requests.data.length"
+          >
+            <td
+              colspan="100%"
+              class="text-center py-4 text-xl leading-5 text-gray-700"
+            >
+              Brak danych
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div
+        v-if="requests.data.length && requests.meta.last_page !== 1"
+        class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 rounded-b-lg"
+      >
+        <div class="flex-1 flex justify-between sm:hidden">
+          <InertiaLink
+            :is="requests.links.prev ? 'InertiaLink': 'span'"
+            :href="requests.links.prev"
+            class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+          >
+            Poprzednia
+          </InertiaLink>
+          <Component
+            :is="requests.links.next ? 'InertiaLink': 'span'"
+            :href="requests.links.next"
+            class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+          >
+            Następna
+          </Component>
+        </div>
+        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+          <div class="text-sm text-gray-700">
+            Wyświetlanie
+            <span class="font-medium">{{ requests.meta.from }}</span>
+            od
+            <span class="font-medium">{{ requests.meta.to }}</span>
+            do
+            <span class="font-medium">{{ requests.meta.total }}</span>
+            wyników
+          </div>
+          <nav class="relative z-0 inline-flex space-x-1">
+            <template
+              v-for="(link, index) in requests.meta.links"
+              :key="index"
+            >
+              <Component
+                :is="link.url ? 'InertiaLink' : 'span'"
+                :href="link.url"
+                :preserve-scroll="true"
+                class="relative inline-flex items-center px-4 py-2 border rounded-md text-sm font-medium"
+                :class="{ 'z-10 bg-blumilk-25 border-blumilk-500 text-blumilk-600': link.active, 'bg-white border-gray-300 text-gray-500': !link.active, 'hover:bg-blumilk-25': link.url, 'border-none': !link.url}"
+                v-text="link.label"
+              />
+            </template>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  ClockIcon,
+  DocumentTextIcon,
+  DotsVerticalIcon,
+  PencilIcon,
+  SelectorIcon,
+  ThumbDownIcon,
+  ThumbUpIcon,
+  TrashIcon,
+  XCircleIcon,
+  XIcon,
+} from '@heroicons/vue/solid'
+import Status from '@/Shared/Status'
+import {watch, reactive} from 'vue'
+import {debounce} from 'lodash'
+import {Inertia} from '@inertiajs/inertia'
+import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions} from '@headlessui/vue'
+
+export default {
+  name: 'VacationRequestIndex',
+  components: {
+    Listbox,
+    ListboxButton,
+    ListboxLabel,
+    ListboxOption,
+    ListboxOptions,
+    DotsVerticalIcon,
+    PencilIcon,
+    TrashIcon,
+    ChevronRightIcon,
+    ThumbUpIcon,
+    ClockIcon,
+    XIcon,
+    CheckIcon,
+    DocumentTextIcon,
+    ThumbDownIcon,
+    Status,
+    SelectorIcon,
+    XCircleIcon,
+  },
+  props: {
+    requests: {
+      type: Object,
+      default: () => null,
+    },
+    users: {
+      type: Object,
+      default: () => null,
+    },
+    filters: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  setup(props) {
+    const form = reactive({
+      user: props.users.data.find(user => user.id === props.filters.user) ?? null,
+      status: props.filters.status,
+    })
+
+    const statuses = useStatusInfo()
+
+    watch(form, debounce(() => {
+      Inertia.get('/vacation-requests', {user: form.user?.id, status: form.status}, {
+        preserveState: true,
+        replace: true,
+      })
+    }, 300))
+
+    return {form}
+  },
+}
+</script>

resources/js/Shared/MainMenu.vue

@@ -281,7 +281,7 @@ import {
   XIcon,
   SunIcon,
   StarIcon,
-  CalendarIcon,
+  CalendarIcon, DocumentTextIcon,
 } from '@heroicons/vue/outline'
 import {
   CashIcon,
@@ -329,7 +329,8 @@ export default {
 
     const navigation = computed(() =>
       [
-        {name: 'Wnioski urlopowe', href: '/vacation-requests', icon: CollectionIcon, can: true},
+        {name: 'Moje wnioski', href: '/vacation-requests/me', icon: DocumentTextIcon, can: true},
+        {name: 'Wnioski urlopowe', href: '/vacation-requests', icon: CollectionIcon, can: auth.value.can.listAllVacationRequests},
         {name: 'Kalendarz urlopów', href: '/vacation-calendar', icon: CalendarIcon, can: true},
         {name: 'Dni wolne', href: '/holidays', icon: StarIcon, can: true},
         {name: 'Limity urlopów', href: '/vacation-limits', icon: SunIcon, can: auth.value.can.manageVacationLimits},

routes/web.php

@@ -34,8 +34,10 @@ Route::middleware("auth")->group(function (): void {
     Route::get("/vacation-limits", [VacationLimitController::class, "edit"])->name("vacation.limits");
     Route::put("/vacation-limits", [VacationLimitController::class, "update"]);
 
-    Route::get("/vacation-requests", [VacationRequestController::class, "index"])
+    Route::get("/vacation-requests/me", [VacationRequestController::class, "index"])
         ->name("vacation.requests.index");
+    Route::get("/vacation-requests", [VacationRequestController::class, "indexForApprovers"])
+        ->name("vacation.requests.indexForApprovers");
     Route::get("/vacation-requests/create", [VacationRequestController::class, "create"])
         ->name("vacation.requests.create");
     Route::post("/vacation-requests", [VacationRequestController::class, "store"])