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.
This commit is contained in:
Jepp9350
+213
-15
@@ -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"> </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"> </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"> </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"> </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"> </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>
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user