From e681226ab5b6a493d9fd9584b7db2f3ef694bb70 Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Wed, 11 May 2022 14:43:32 +0200
Subject: [PATCH 1/3] vacation type filter

---
 .../Controllers/VacationRequestController.php | 13 ++-
 .../VacationRequest/IndexForApprovers.vue     | 89 ++++++++++++++++++-
 2 files changed, 92 insertions(+), 10 deletions(-)

diff --git a/app/Infrastructure/Http/Controllers/VacationRequestController.php b/app/Infrastructure/Http/Controllers/VacationRequestController.php
index 3ae5187..7d8b543 100644
--- a/app/Infrastructure/Http/Controllers/VacationRequestController.php
+++ b/app/Infrastructure/Http/Controllers/VacationRequestController.php
@@ -92,19 +92,16 @@ class VacationRequestController extends Controller
         }
 
         $yearPeriod = $yearPeriodRetriever->selected();
-        $status = $request->get("status");
+        $status = $request->get("status", "all");
         $user = $request->get("user");
+        $type = $request->get("type");
 
         $vacationRequests = VacationRequest::query()
             ->with(["user", "vacations"])
             ->whereBelongsTo($yearPeriod)
             ->when($user !== null, fn(Builder $query): Builder => $query->where("user_id", $user))
-            ->when(
-                $status !== null,
-                fn(Builder $query): Builder => $query->states(
-                    VacationRequestStatesRetriever::filterByStatusGroup($status, $request->user()),
-                ),
-            )
+            ->when($type !== null, fn(Builder $query): Builder => $query->where("type", $type))
+            ->states(VacationRequestStatesRetriever::filterByStatusGroup($status, $request->user()))
             ->latest()
             ->paginate();
 
@@ -116,9 +113,11 @@ class VacationRequestController extends Controller
         return inertia("VacationRequest/IndexForApprovers", [
             "requests" => VacationRequestResource::collection($vacationRequests),
             "users" => SimpleUserResource::collection($users),
+            "types" => VacationType::casesToSelect(),
             "filters" => [
                 "status" => $status,
                 "user" => (int)$user,
+                "type" => $type,
             ],
         ]);
     }
diff --git a/resources/js/Pages/VacationRequest/IndexForApprovers.vue b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
index 21481bb..a6f98b1 100644
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -17,7 +17,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="grid grid-cols-1 gap-2 p-4 md:grid-cols-2 md:gap-4">
+      <div class="grid grid-cols-1 gap-2 p-4 md:grid-cols-3 md:gap-4">
         <Listbox
           v-model="form.user"
           as="div"
@@ -147,6 +147,83 @@
                   >
                     {{ status.name }}
 
+                    <span
+                      v-if="selected"
+                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    >
+                      <CheckIcon class="w-5 h-5" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+          </div>
+        </Listbox>
+        <Listbox
+          v-model="form.type"
+          as="div"
+        >
+          <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
+            Typ
+          </ListboxLabel>
+          <div class="relative mt-1 sm:mt-0">
+            <ListboxButton
+              class="relative py-2 pr-10 pl-3 w-full max-w-lg h-10 text-left bg-white rounded-md border border-gray-300 focus:border-blumilk-500 focus:outline-none focus:ring-1 focus:ring-blumilk-500 shadow-sm cursor-default sm:text-sm"
+            >
+              <VacationType
+                v-if="form.type"
+                :type="form.type.value"
+              />
+
+              <span
+                v-else
+                class="flex items-center"
+              >
+                Wszystkie
+              </span>
+              <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                <SelectorIcon class="w-5 h-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="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+              >
+                <ListboxOption
+                  v-slot="{ active, selected }"
+                  as="template"
+                  :value="null"
+                >
+                  <li
+                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                  >
+                    Wszystkie
+
+                    <span
+                      v-if="selected"
+                      :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
+                    >
+                      <CheckIcon class="w-5 h-5" />
+                    </span>
+                  </li>
+                </ListboxOption>
+                <ListboxOption
+                  v-for="type in types"
+                  :key="type.value"
+                  v-slot="{ active, selected }"
+                  as="template"
+                  :value="type"
+                >
+                  <li
+                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
+                  >
+                    <VacationType :type="type.value" />
+
                     <span
                       v-if="selected"
                       :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
@@ -294,6 +371,7 @@ const props = defineProps({
   requests: Object,
   users: Object,
   filters: Object,
+  types: Object,
 })
 
 const statuses = [
@@ -322,12 +400,17 @@ const statuses = [
 const form = reactive({
   user: props.users.data.find(user => user.id === props.filters.user) ?? null,
   status: statuses.find(status => status.value === props.filters.status) ?? statuses[0],
+  type: props.types.find(type => type.value === props.filters.type) ?? null,
 })
 
 watch(form, debounce(() => {
-  Inertia.get('/vacation/requests', { user: form.user?.id, status: form.status.value }, {
+  Inertia.get('/vacation/requests', {
+    user: form.user?.id,
+    status: form.status.value,
+    type: form.type?.value,
+  }, {
     preserveState: true,
     replace: true,
   })
-}, 300))
+}, 150))
 </script>
-- 
2.50.1


From d9fb362f9efc86f60a20ca90bcf9b9f1265d6cb4 Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Wed, 11 May 2022 14:46:02 +0200
Subject: [PATCH 2/3] fix

---
 resources/js/Pages/VacationRequest/IndexForApprovers.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Pages/VacationRequest/IndexForApprovers.vue b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
index a6f98b1..5b083a7 100644
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -164,7 +164,7 @@
           as="div"
         >
           <ListboxLabel class="block mb-2 text-sm font-medium text-gray-700">
-            Typ
+            Rodzaj wniosku
           </ListboxLabel>
           <div class="relative mt-1 sm:mt-0">
             <ListboxButton
-- 
2.50.1


From d3f480f51b0f54b48c800b7a6f33f96a2a8fbc46 Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Wed, 11 May 2022 14:50:11 +0200
Subject: [PATCH 3/3] fix

---
 resources/js/Pages/VacationRequest/IndexForApprovers.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/resources/js/Pages/VacationRequest/IndexForApprovers.vue b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
index 5b083a7..7f746d8 100644
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -215,7 +215,7 @@
                 <ListboxOption
                   v-for="type in types"
                   :key="type.value"
-                  v-slot="{ active, selected }"
+                  v-slot="{ active }"
                   as="template"
                   :value="type"
                 >
@@ -223,9 +223,8 @@
                     :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default truncate select-none relative py-2 pl-3 pr-9']"
                   >
                     <VacationType :type="type.value" />
-
                     <span
-                      v-if="selected"
+                      v-if="form.type?.value === type.value"
                       :class="['text-blumilk-600 absolute inset-y-0 right-0 flex items-center pr-4']"
                     >
                       <CheckIcon class="w-5 h-5" />
-- 
2.50.1