"Add filters and mobile-friendly toggles to OrderBookingsTable; enhance date labels with relative terms and provide 'Show all bookings' button when filters are applied."
This commit is contained in:
Jeppe Bundgaard
@@ -281,6 +281,12 @@ const switchOnlyPending = (event) => {
|
||||
onOrderIdFilterChange({ target: { value: event.target.checked ? 'is null' : '*' } });
|
||||
}
|
||||
|
||||
const switchOnlyPendingAndOnlyToday = (event) => {
|
||||
onOnlyTodayFilterChange({ target: { value: event.target.checked ? new Date().toISOString().split('T')[0] : '*' } }, false);
|
||||
onOrderIdFilterChange({ target: { value: event.target.checked ? 'is null' : '*' } }, false);
|
||||
loadList();
|
||||
}
|
||||
|
||||
const isFilterApplied = () => {
|
||||
if (!router.currentRoute.value.path.startsWith('/admin')) {
|
||||
if (departmentFilter.value !== '*') {
|
||||
@@ -408,7 +414,7 @@ const resetVersionToNew = () => {
|
||||
<div class="column is-narrow my-3" v-if="router.currentRoute.value.path.startsWith('/admin')" :class="{ 'has-text-right': !isSmall }">
|
||||
<label class="label">{{ isSmall ? 'Afventende' : 'Vis kun dagens afventende' }}</label>
|
||||
<div class="field">
|
||||
<input id="today" type="checkbox" class="switch is-rounded" @change="(event) => { switchOnlyToday(event); switchOnlyPending(event); }" :class="{ 'is-link': onlyTodayFilter !== '*' && orderIdFilter === 'is null' }" :checked="onlyTodayFilter !== '*' && orderIdFilter === 'is null'" />
|
||||
<input id="today" type="checkbox" class="switch is-rounded" @change="(event) => { switchOnlyPendingAndOnlyToday(event); }" :class="{ 'is-link': onlyTodayFilter !== '*' && orderIdFilter === 'is null' }" :checked="onlyTodayFilter !== '*' && orderIdFilter === 'is null'" />
|
||||
<label for="today"></label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -639,6 +645,20 @@ const resetVersionToNew = () => {
|
||||
<div class="column is-full">
|
||||
<PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage" :allowSmallScreen="true">
|
||||
<template #paginationColumns>
|
||||
<!-- Version selector (align with desktop) -->
|
||||
<div class="column is-narrow">
|
||||
<div class="field mb-0">
|
||||
<label class="label is-small">Version</label>
|
||||
<div class="control">
|
||||
<div class="select is-small">
|
||||
<select @change="showLegacyOrderBookingsPortal(); resetVersionToNew()" v-model="versionSelector">
|
||||
<option value="new">Ny</option>
|
||||
<option value="legacy">Gammel</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Department filter -->
|
||||
<div class="column is-narrow">
|
||||
<div class="field mb-0">
|
||||
@@ -682,9 +702,50 @@ const resetVersionToNew = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile switches are handled below -->
|
||||
<div class="column is-auto-fill is-hidden-desktop" v-if="router.currentRoute.value.path.startsWith('/user')" :class="{ 'has-text-right': !isSmall }">
|
||||
<label class="label is-small">{{ isSmall ? 'I dag' : 'Vis kun dagens bookinger' }}</label>
|
||||
<div class="field">
|
||||
<input id="today-mobile" type="checkbox" class="switch is-rounded is-small" @change="(event) => { switchOnlyToday(event); }" :class="{ 'is-link': onlyTodayFilter !== '*' }" :checked="onlyTodayFilter !== '*'" />
|
||||
<label for="today-mobile" class="label is-small"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-auto-fill is-hidden-desktop" v-if="router.currentRoute.value.path.startsWith('/admin')" :class="{ 'has-text-right': !isSmall }">
|
||||
<label class="label is-small">{{ isSmall ? 'Afventende' : 'Vis kun dagens afventende' }}</label>
|
||||
<div class="field">
|
||||
<input id="today-pending-mobile" type="checkbox" class="switch is-rounded is-small" @change="(event) => { switchOnlyPendingAndOnlyToday(event); }" :class="{ 'is-link': onlyTodayFilter !== '*' && orderIdFilter === 'is null' }" :checked="onlyTodayFilter !== '*' && orderIdFilter === 'is null'" />
|
||||
<label for="today-pending-mobile" class="label is-small"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-auto-fill is-hidden-desktop" v-if="router.currentRoute.value.path.startsWith('/user')" :class="{ 'has-text-right': !isSmall }">
|
||||
<button
|
||||
class="button is-link is-fullwidth"
|
||||
@click="SessionUser.functions.redirectTo.external('/user/bookings/new', true)"
|
||||
:style="{ 'color': Colors.buttons.textColor, 'background-color': Colors.buttons.backgroundColor }"
|
||||
>
|
||||
Ny booking
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</PaginationDisplay>
|
||||
</div>
|
||||
<!-- Toggles (align with desktop behavior) -->
|
||||
<!-- Only show the bookings for today (Switch, if the route is /user) -->
|
||||
<div class="column is-narrow my-3 is-hidden-touch" v-if="router.currentRoute.value.path.startsWith('/user')" :class="{ 'has-text-right': !isSmall }">
|
||||
<label class="label">{{ isSmall ? 'I dag' : 'Vis kun dagens bookinger' }}</label>
|
||||
<div class="field">
|
||||
<input id="today-mobile" type="checkbox" class="switch is-rounded" @change="(event) => { switchOnlyToday(event); }" :class="{ 'is-link': onlyTodayFilter !== '*' }" :checked="onlyTodayFilter !== '*'" />
|
||||
<label for="today-mobile"></label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Only show the pending bookings (Switch, if the route is /admin) -->
|
||||
<div class="column is-narrow my-3 is-hidden-touch" v-if="router.currentRoute.value.path.startsWith('/admin')" :class="{ 'has-text-right': !isSmall }">
|
||||
<label class="label">{{ isSmall ? 'Afventende' : 'Vis kun dagens afventende' }}</label>
|
||||
<div class="field">
|
||||
<input id="today-pending-mobile" type="checkbox" class="switch is-rounded" @change="(event) => { switchOnlyPendingAndOnlyToday(event); }" :class="{ 'is-link': onlyTodayFilter !== '*' && orderIdFilter === 'is null' }" :checked="onlyTodayFilter !== '*' && orderIdFilter === 'is null'" />
|
||||
<label for="today-pending-mobile"></label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bookings -->
|
||||
<div class="column is-full">
|
||||
<div v-if="list.length === 0 && !isLoading">
|
||||
@@ -696,7 +757,31 @@ const resetVersionToNew = () => {
|
||||
<!-- Date separator -->
|
||||
<div class="column is-full" v-if="isFirstBookingOfDay(booking)">
|
||||
<hr/>
|
||||
<strong>{{ new Date(booking.datetime).toLocaleDateString('da-DK', { year: 'numeric', month: 'long', day: 'numeric' }) }}</strong>
|
||||
<strong>
|
||||
{{
|
||||
(() => {
|
||||
const bookingDate = new Date(booking.datetime);
|
||||
const today = new Date();
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(today.getDate() - 1);
|
||||
if (bookingDate.toDateString() === today.toDateString()) {
|
||||
return 'I dag';
|
||||
} else if (bookingDate.toDateString() === yesterday.toDateString()) {
|
||||
return 'I går';
|
||||
} else {
|
||||
return bookingDate.toLocaleDateString('da-DK', { year: 'numeric', month: 'long', day: 'numeric' });
|
||||
}
|
||||
})()
|
||||
}}
|
||||
•
|
||||
{{ sortedList.filter((b) => {
|
||||
const bDate = new Date(b.datetime);
|
||||
const bookingDate = new Date(booking.datetime);
|
||||
return bDate.getFullYear() === bookingDate.getFullYear() &&
|
||||
bDate.getMonth() === bookingDate.getMonth() &&
|
||||
bDate.getDate() === bookingDate.getDate();
|
||||
}).length }} {{SessionUser.objects.order_bookings.meta.labels.multiple.toLowerCase()}}
|
||||
</strong>
|
||||
<hr/>
|
||||
</div>
|
||||
<div class="column is-full">
|
||||
@@ -797,6 +882,16 @@ const resetVersionToNew = () => {
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Show all row if there is any filtering applied -->
|
||||
<div class="column is-full" v-if="isFilterApplied()">
|
||||
<div class="has-text-centered">
|
||||
<button class="button is-small is-light" @click="showAllBookings()">
|
||||
<span>
|
||||
Vis alle bookinger
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user