#457 - feat: added some colors for blocked users to make them recogni…

…zable and stuff for filtering them on indexes
blumilksoftware · Jul 8, 2024 · 0c6bfcd · 0c6bfcd
1 parent e306585
commit 0c6bfcd
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 10 deletions.
diff --git a/app/Http/Controllers/OvertimeRequestController.php b/app/Http/Controllers/OvertimeRequestController.php
@@ -98,16 +98,19 @@ public function indexForApprovers(
         $yearPeriod = $yearPeriodRetriever->selected();
         $status = $request->get("status", "all");
         $user = $request->get("user");
+        $withTrashedUsers = $request->boolean("withTrashedUsers") ?? false;
 
         $overtimeRequests = OvertimeRequest::query()
             ->with(["user.permissions", "user.profile"])
             ->whereBelongsTo($yearPeriod)
+            ->whereRelation("user", fn($query) => $query->withTrashed($withTrashedUsers))
             ->when($user !== null, fn(Builder $query): Builder => $query->where("user_id", $user))
             ->states(OvertimeRequestStatesRetriever::filterByStatusGroup($status, $request->user()))
             ->latest()
             ->paginate();
 
         $users = User::query()
+            ->withTrashed($withTrashedUsers)
             ->orderByProfileField("last_name")
             ->orderByProfileField("first_name")
             ->get();

diff --git a/app/Http/Controllers/VacationCalendarController.php b/app/Http/Controllers/VacationCalendarController.php
@@ -23,11 +23,13 @@ public function index(
     ): Response {
         $month = Month::fromNameOrCurrent((string)$month);
         $currentUser = $request->user();
+        $withTrashedUsers = $request->boolean("withBlockedUsers");
 
         $yearPeriod = $yearPeriodRetriever->selected();
         $carbonMonth = Carbon::create($yearPeriod->year, $month->toCarbonNumber());
 
         $users = User::query()
+            ->withTrashed($withTrashedUsers)
             ->where("id", "!=", $currentUser->id)
             ->orderByProfileField("last_name")
             ->orderByProfileField("first_name")
@@ -42,6 +44,7 @@ public function index(
             "current" => Month::current(),
             "selected" => $month->value,
             "users" => SimpleUserResource::collection($users),
+            "withBlockedUsers" => $withTrashedUsers,
         ]);
     }
 }
diff --git a/app/Http/Resources/SimpleUserResource.php b/app/Http/Resources/SimpleUserResource.php
@@ -18,6 +18,7 @@ public function toArray($request): array
             "last_name" => $this->profile->last_name,
             "email" => $this->email,
             "avatar" => $this->profile->getAvatar(),
+            "isActive" => $this->deleted_at === null,
         ];
     }
 }
diff --git a/resources/js/Pages/Calendar.vue b/resources/js/Pages/Calendar.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
-import { computed, ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { useMonthInfo } from '@/Composables/monthInfo.js'
 import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon.vue'
 import CalendarDay from '@/Shared/CalendarDay.vue'
+import { debounce } from 'lodash'
+import { Inertia } from '@inertiajs/inertia'
 
 const props = defineProps({
   users: Object,
@@ -12,6 +14,11 @@ const props = defineProps({
   current: String,
   selected: String,
   years: Object,
+  withBlockedUsers: Boolean,
+})
+
+const form = reactive({
+  withTrashedUsers: props.withBlockedUsers ?? false,
 })
 
 let activeElement = ref(undefined)
@@ -45,6 +52,15 @@ function linkParameters(user, day) {
 function linkVacationRequest(user){
   return props.auth.user.id === user.id || props.auth.can.manageRequestsAsTechnicalApprover || props.auth.can.manageRequestsAsAdministrativeApprover
 }
+
+watch(form, debounce(() => {
+  Inertia.get('', {
+    withBlockedUsers: form.withTrashedUsers,
+  }, {
+    preserveState: true,
+    replace: true,
+  })
+}, 150))
 </script>
 
 <template>
@@ -59,7 +75,7 @@ function linkVacationRequest(user){
           <InertiaLink
             v-if="previousMonth"
             as="button"
-            :href="`/calendar/${previousMonth.value}`"
+            :href="`/calendar/${previousMonth.value}?withBlockedUsers=${form.withTrashedUsers}`"
             class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
           >
             <ChevronLeftIcon class="w-5 h-5" />
@@ -73,15 +89,15 @@ function linkVacationRequest(user){
           <InertiaLink
             v-if="years.current.year === years.selected.year"
             as="button"
-            :href="`/calendar/${currentMonth.value}`"
+            :href="`/calendar/${currentMonth.value}?withBlockedUsers=${form.withTrashedUsers}`"
             class="hidden focus:relative items-center p-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 focus:outline-blumilk-500 md:flex"
           >
             Dzisiaj
           </InertiaLink>
           <InertiaLink
             v-if="nextMonth"
             as="button"
-            :href="`/calendar/${nextMonth.value}`"
+            :href="`/calendar/${nextMonth.value}?withBlockedUsers=${form.withTrashedUsers}`"
             class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
           >
             <ChevronRightIcon class="w-5 h-5" />
@@ -113,6 +129,23 @@ function linkVacationRequest(user){
         </a>
       </div>
     </div>
+    <div
+      v-if="auth.can.manageRequestsAsAdministrativeApprover"
+      class="flex items-center space-x-2 pb-2 sm:px-6"
+    >
+      <input
+        id="withTrashedUsers"
+        v-model="form.withTrashedUsers"
+        class="left-6 top-1/2 h-4 w-4 rounded border-gray-300 text-blumilk-600 focus:ring-blumilk-500"
+        type="checkbox"
+      >
+      <label
+        class="block text-sm font-medium text-gray-700"
+        for="withTrashedUsers"
+      >
+        Zablokowani użytkownicy
+      </label>
+    </div>
     <div class="overflow-x-auto">
       <table class="w-full text-sm text-center border border-gray-300">
         <thead>
@@ -142,6 +175,7 @@ function linkVacationRequest(user){
           <tr
             v-for="user in users.data"
             :key="user.id"
+            :class="[user.isActive ? '' : 'bg-gray-100']"
           >
             <th class="p-2 border border-gray-300">
               <div class="flex justify-start items-center">

diff --git a/resources/js/Pages/MonthlyUsage.vue b/resources/js/Pages/MonthlyUsage.vue
@@ -54,7 +54,7 @@ function isCurrentMonth(month) {
             <tr
               v-for="item in monthlyUsage"
               :key="item.user.id"
-              class="hover:bg-blumilk-25"
+              :class="[item.user.isActive ? '' : 'bg-gray-100', 'hover:bg-blumilk-25']"
             >
               <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
                 <div class="flex justify-start items-center">

diff --git a/resources/js/Pages/OvertimeRequest/IndexForApprovers.vue b/resources/js/Pages/OvertimeRequest/IndexForApprovers.vue
@@ -46,12 +46,14 @@ 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],
+  withTrashedUsers: props.filters.withTrashedUsers ?? false,
 })
 
 watch(form, debounce(() => {
   Inertia.get('/overtime/requests', {
     user: form.user?.id,
     status: form.status.value,
+    withTrashedUsers: form.withTrashedUsers,
   }, {
     preserveState: true,
     replace: true,
@@ -142,7 +144,7 @@ watch(form, debounce(() => {
                   as="template"
                 >
                   <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9', user.isActive ? '' : 'bg-gray-100']"
                   >
                     <div class="flex items-center">
                       <img
@@ -166,6 +168,20 @@ watch(form, debounce(() => {
               </ListboxOptions>
             </transition>
           </div>
+          <div class="flex items-center space-x-2 mt-3">
+            <input
+              id="withTrashedUsers"
+              v-model="form.withTrashedUsers"
+              class="left-6 top-1/2 h-4 w-4 rounded border-gray-300 text-blumilk-600 focus:ring-blumilk-500"
+              type="checkbox"
+            >
+            <label
+              class="block text-sm font-medium text-gray-700"
+              for="withTrashedUsers"
+            >
+              Zablokowani użytkownicy
+            </label>
+          </div>
         </Listbox>
         <Listbox
           v-model="form.status"
@@ -275,7 +291,7 @@ watch(form, debounce(() => {
             :key="request.id"
             :href="`/overtime/requests/${request.id}`"
             as="tr"
-            class="relative hover:bg-blumilk-25 hover:cursor-pointer"
+            :class="[request.user.isActive ? '' : 'bg-gray-100', 'relative hover:bg-blumilk-25 hover:cursor-pointer']"
           >
             <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               <InertiaLink

diff --git a/resources/js/Pages/VacationLimits.vue b/resources/js/Pages/VacationLimits.vue
@@ -98,7 +98,7 @@ watch(() => form.items, () => {
               <tr
                 v-for="(item, index) in form.items"
                 :key="item.id"
-                class="hover:bg-blumilk-25"
+                :class="[item.user.deleted ? 'bg-gray-100' : '', 'hover:bg-blumilk-25']"
               >
                 <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
                   <div class="flex">

diff --git a/resources/js/Pages/VacationRequest/IndexForApprovers.vue b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -144,7 +144,7 @@ watch(form, debounce(() => {
                   as="template"
                 >
                   <li
-                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+                    :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9', user.isActive ? '' : 'bg-gray-100']"
                   >
                     <div class="flex items-center">
                       <img
@@ -367,7 +367,7 @@ watch(form, debounce(() => {
             :key="request.id"
             :href="`/vacation/requests/${request.id}`"
             as="tr"
-            class="relative hover:bg-blumilk-25 hover:cursor-pointer"
+            :class="[request.user.isActive ? '' : 'bg-gray-100', 'relative hover:bg-blumilk-25 hover:cursor-pointer']"
           >
             <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
               <InertiaLink