From 23e4726c7447d26ed866a5735fe1b6caa90aae02 Mon Sep 17 00:00:00 2001
From: Jepp9350 <2jepp9350@gmail.com>
Date: Wed, 16 Apr 2025 13:46:09 +0200
Subject: [PATCH] Add date filtering shortcuts and enhance filter handling

Introduced predefined date filters (e.g., Today, This Month) for easier user access in the invoice orders pagination module. Improved filter logic to remove duplicates, ensure null values for empty filters, and apply new filters dynamically. Updated UI to include buttons for quick time-based filter setting.
---
 .../InvoiceOrdersPagination.vue               | 228 ++++++++++++++++--
 src/components/pagination/paginatedList.vue   |   6 +
 src/components/session/token/SessionUser.vue  |   8 +-
 .../SessionUser/Objects/ObjectsGlobal.vue     |   4 +
 4 files changed, 230 insertions(+), 16 deletions(-)

diff --git a/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue b/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue
index 89b18827..99d6ac27 100644
--- a/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue
+++ b/src/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue
@@ -1,4 +1,5 @@
 <script setup>
+
 const props = defineProps({
   onlyFromInvoiceCollection: {
     type: Number,
@@ -21,7 +22,7 @@ const props = defineProps({
     default: false
   }
 })
-import { defineProps } from "vue";
+import {defineProps, ref} from "vue";
 import { useRouter } from "vue-router";
 import {
   isLoaded,
@@ -46,6 +47,8 @@ import PaginationNavigation from "@/components/displays/pagination/PaginationNav
 import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
 import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
 import OrdersTable from "@/components/displays/department/pos/orders/ordersTable.vue";
+import {SessionUser} from "@/components/session/token/SessionUser.vue";
+
 const router = useRouter();
 setEndpoint("/orders", false);
 // If the customer filter is set, filter the orders by the customer number
@@ -54,12 +57,6 @@ if (props.setCustomerFilter > 0) {
   console.log("Setting customer filter to: " + props.setCustomerFilter);
 }
 
-// Hide the search field
-if (props.hideSearch) {
-  setHideSearchField(true);
-  console.log("Hiding search field");
-}
-
 // If the departmentId is set, in the route, filter the orders by the departmentId
 if (router.currentRoute.value.params.departmentId) {
   setOrder("created_at", "desc");
@@ -75,9 +72,119 @@ if (props.onlyFromInvoiceCollection > 0) {
 
 // Load the list automatically if the autoLoad prop is set
 if (props.autoLoad) {
+  setFilter('customer_id-has_key-OtherVaskeabonnement', '!OtherVaskeabonnement', false);
+  setFilter('customer_id-has_key-OtherSpecialArrangement', '!OtherSpecialArrangement', false);
+  setFilter('booked_invoice_id', 'is_null', false);
   loadList();
 }
 
+const date_from = ref(null);
+const date_to = ref(null);
+
+const setFilterTime = {
+  is_last_month: (date_from, date_to) => {
+    // Check if the date_from and date_to are set to the first and last day of the month
+    const date = new Date();
+    const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth() - 1, 2);
+    const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+    return date_from === firstDayOfMonth.toISOString().split("T")[0] && date_to === lastDayOfMonth.toISOString().split("T")[0];
+  },
+  last_month: () => {
+    // Set the value of the date_from and date_to to the first and last day of the month
+    const date = new Date();
+    // Since the timestamp is not relevant, we can set the date to the first and last day of the month like 1/4/2023 to 30/4/2023
+    const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth() - 1, 2);
+    const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+    date_from.value = firstDayOfMonth.toISOString().split("T")[0];
+    date_to.value = lastDayOfMonth.toISOString().split("T")[0];
+    // Set the filter to the date_from and date_to
+    setFilter("created_at-date_from", date_from.value, false);
+    setFilter("created_at-date_to", date_to.value, false);
+    loadList();
+  },
+  is_this_month: (date_from, date_to) => {
+    // Check if the date_from and date_to are set to the first and last day of the month
+    const date = new Date();
+    const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 2);
+    const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);
+    return date_from === firstDayOfMonth.toISOString().split("T")[0] && date_to === lastDayOfMonth.toISOString().split("T")[0];
+  },
+  this_month: () => {
+    // Set the value of the date_from and date_to to the first and last day of the month
+    const date = new Date();
+    // Since the timestamp is not relevant, we can set the date to the first and last day of the month like 1/4/2023 to 30/4/2023
+    const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 2);
+    const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);
+    date_from.value = firstDayOfMonth.toISOString().split("T")[0];
+    date_to.value = lastDayOfMonth.toISOString().split("T")[0];
+    // Set the filter to the date_from and date_to
+    setFilter("created_at-date_from", date_from.value, false);
+    setFilter("created_at-date_to", date_to.value, false);
+    loadList();
+  },
+  is_today: (date_from, date_to) => {
+    // Check if the date_from and date_to are set to today
+    const date = new Date();
+    const today = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
+    return date_from === today.toISOString().split("T")[0] && date_to === today.toISOString().split("T")[0];
+  },
+  today: () => {
+    // Set the value of the date_from and date_to to today
+    const date = new Date();
+    // Since the timestamp is not relevant, we can set the date to the first and last day of the month like 1/4/2023 to 30/4/2023
+    const today = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
+    date_from.value = today.toISOString().split("T")[0];
+    date_to.value = today.toISOString().split("T")[0];
+    // Set the filter to the date_from and date_to
+    setFilter("created_at-date_from", date_from.value, false);
+    setFilter("created_at-date_to", date_to.value, false);
+    loadList();
+  },
+  is_yesterday: (date_from, date_to) => {
+    // Check if the date_from and date_to are set to yesterday
+    const date = new Date();
+    const yesterday = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    return date_from === yesterday.toISOString().split("T")[0] && date_to === yesterday.toISOString().split("T")[0];
+  },
+  yesterday: () => {
+    // Set the value of the date_from and date_to to the first and last day of the month
+    const date = new Date();
+    // Since the timestamp is not relevant, we can set the date to the first and last day of the month like 1/4/2023 to 30/4/2023
+    const yesterday = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 0);
+    date_from.value = yesterday.toISOString().split("T")[0];
+    date_to.value = yesterday.toISOString().split("T")[0];
+    // Set the filter to the date_from and date_to
+    setFilter("created_at-date_from", date_from.value, false);
+    setFilter("created_at-date_to", date_to.value, false);
+    // Reload the list
+    loadList();
+  },
+  is_all: (date_from, date_to) => {
+    // Check if the date_from and date_to are set to null
+    return date_from === null && date_to === null;
+  },
+  all: () => {
+    // Set the value of the date_from and date_to to null
+    date_from.value = null;
+    date_to.value = null;
+    // Set the filter to the date_from and date_to
+    setFilter("created_at-date_from", null, false);
+    setFilter("created_at-date-to", null, false);
+    // Reload the list
+    loadList();
+  }
+}
+
+const getTimeShortcutClass = (boolean) => {
+  // Check if the shortcut is set to the current date
+  return boolean ? 'is-success is-light' : '';
+}
+
+const getTimeShortcutIcon = (boolean) => {
+  // Check if the shortcut is set to the current date
+  return boolean ? 'fas fa-check' : '';
+}
+
 </script>
 
 <template>
@@ -102,9 +209,9 @@ if (props.autoLoad) {
         <div class="control">
           <div class="select">
             <select @change="setFilter('booked_invoice_id', $event.target.value, true);">
-              <option value="*" selected>All</option>
+              <option value="*">All</option>
               <option value="not null">Bogført</option>
-              <option value="is_null">Ikke bogført</option>
+              <option value="is_null" selected>Ikke bogført</option>
             </select>
           </div>
         </div>
@@ -169,9 +276,9 @@ if (props.autoLoad) {
         <div class="control">
           <div class="select">
             <select @change="setFilter('customer_id-has_key-OtherSpecialArrangement', $event.target.value, true);">
-              <option value="*" selected>All</option>
+              <option value="*">All</option>
               <option value="OtherSpecialArrangement">Har specialaftale</option>
-              <option value="!OtherSpecialArrangement">Har ikke specialaftale</option>
+              <option value="!OtherSpecialArrangement" selected>Har ikke specialaftale</option>
             </select>
           </div>
         </div>
@@ -182,9 +289,9 @@ if (props.autoLoad) {
         <div class="control">
           <div class="select">
             <select @change="setFilter('customer_id-has_key-OtherVaskeabonnement', $event.target.value, true);">
-              <option value="*" selected>All</option>
+              <option value="*">All</option>
               <option value="OtherVaskeabonnement">Har vaskeabonnement</option>
-              <option value="!OtherVaskeabonnement">Har ikke vaskeabonnement</option>
+              <option value="!OtherVaskeabonnement" selected>Har ikke vaskeabonnement</option>
             </select>
           </div>
         </div>
@@ -193,14 +300,105 @@ if (props.autoLoad) {
       <div class="column is-narrow my-3">
         <label class="label">Fra dato</label>
         <div class="control">
-          <input type="date" class="input" @change="setFilter('created_at-date_from', $event.target.value, true)" />
+          <input type="date" class="input" @change="setFilter('created_at-date_from', $event.target.value, true)" v-model="date_from" />
         </div>
       </div>
       <!-- Date to -->
       <div class="column is-narrow my-3">
         <label class="label">Til dato</label>
         <div class="control">
-          <input type="date" class="input" @change="setFilter('created_at-date_to', $event.target.value, true)" />
+          <input type="date" class="input" @change="setFilter('created_at-date_to', $event.target.value, true)" v-model="date_to" />
+        </div>
+      </div>
+      <!-- Time shortcuts -->
+      <!-- Last month -->
+      <div class="column is-narrow my-3">
+        <label class="label">&nbsp</label>
+        <div class="control">
+          <button
+              class="button"
+              v-bind:class="getTimeShortcutClass(setFilterTime.is_last_month(date_from, date_to))"
+              @click="setFilterTime.last_month()"
+          >
+            <span class="icon">
+              <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_last_month(date_from, date_to))"></i>
+            </span>
+            <span>{{SessionUser.objects.global.language.time.last_month}}</span>
+            <span class="icon">
+            </span>
+          </button>
+        </div>
+      </div>
+      <!-- This month -->
+      <div class="column is-narrow my-3">
+        <label class="label">&nbsp</label>
+        <div class="control">
+          <button
+              class="button"
+              v-bind:class="getTimeShortcutClass(setFilterTime.is_this_month(date_from, date_to))"
+              @click="setFilterTime.this_month()"
+          >
+            <span class="icon">
+              <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_this_month(date_from, date_to))"></i>
+            </span>
+            <span>{{SessionUser.objects.global.language.time.this_month}}</span>
+            <span class="icon">
+            </span>
+          </button>
+        </div>
+      </div>
+      <!-- Today -->
+      <div class="column is-narrow my-3">
+        <label class="label">&nbsp</label>
+        <div class="control">
+          <button
+              class="button"
+              v-bind:class="getTimeShortcutClass(setFilterTime.is_today(date_from, date_to))"
+              @click="setFilterTime.today()"
+          >
+            <span class="icon">
+              <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_today(date_from, date_to))"></i>
+            </span>
+            <span>{{SessionUser.objects.global.language.time.today}}</span>
+            <span class="icon">
+            </span>
+          </button>
+        </div>
+      </div>
+      <!-- Yesterday -->
+      <div class="column is-narrow my-3">
+        <label class="label">&nbsp</label>
+        <div class="control">
+          <button
+              class="button"
+              v-bind:class="getTimeShortcutClass(setFilterTime.is_yesterday(date_from, date_to))"
+              @click="setFilterTime.yesterday()"
+          >
+            <span class="icon">
+              <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_yesterday(date_from, date_to))"></i>
+            </span>
+            <span>{{SessionUser.objects.global.language.time.yesterday}}</span>
+            <span class="icon">
+            </span>
+          </button>
+        </div>
+      </div>
+      <!-- All -->
+      <div class="column is-narrow my-3">
+        <label class="label">&nbsp</label>
+        <div class="control">
+          <button
+              class="button"
+              v-bind:class="getTimeShortcutClass(setFilterTime.is_all(date_from, date_to))"
+              @click="setFilterTime.all()"
+          >
+            <span class="icon">
+              <i v-bind:class="getTimeShortcutIcon(setFilterTime.is_all(date_from, date_to))"></i>
+            </span>
+            <span>{{SessionUser.objects.global.language.time.all}}</span>
+            <span class="icon">
+            </span>
+          </button>
         </div>
       </div>
     </template>
diff --git a/src/components/pagination/paginatedList.vue b/src/components/pagination/paginatedList.vue
index 6dde5170..73658458 100644
--- a/src/components/pagination/paginatedList.vue
+++ b/src/components/pagination/paginatedList.vue
@@ -104,6 +104,12 @@ export const setFilter = (newFilter, value, autoLoad = true) => {
     // If the filter is not set, add it to the filter
     filter.value = filter.value ? `${filter.value},${newFilter}:${value}` : `${newFilter}:${value}`;
   }
+  // Remove duplicates
+  filter.value = [...new Set(filter.value.split(','))].join(',');
+  // If the filter is empty, set it to null
+  if (filter.value === '') {
+    filter.value = null;
+  }
   // Reset the page to 1
   setPage(1);
   // Load the list (If the endpoint is set)
diff --git a/src/components/session/token/SessionUser.vue b/src/components/session/token/SessionUser.vue
index 86fcf509..3deeb99f 100644
--- a/src/components/session/token/SessionUser.vue
+++ b/src/components/session/token/SessionUser.vue
@@ -350,7 +350,13 @@ export const SessionUser = {
         friday: 5,
         saturday: 6,
         sunday: 7,
-      }
+      },
+      getDateMonthStart() {
+        return new Date(new Date().getFullYear(), new Date().getMonth(), 1);
+      },
+      getDateMonthEnd() {
+        return new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0);
+      },
     },
     /** Redirect to */
     redirectTo: {
diff --git a/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue b/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue
index f5cbe3c4..eea43617 100644
--- a/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue
+++ b/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue
@@ -42,6 +42,10 @@ export const ObjectsGlobal = {
         at_hour: 'Kl.',
         today: 'I dag',
         yesterday: 'I går',
+        this_month: 'Denne måned',
+        last_month: 'Sidste måned',
+        this_year: 'I år',
+        all: 'Altid',
       },
       nothing_left_to_show: 'Der er ikke mere at vise',
       pending: 'Afventer',