From e91f8f2a4b914ad26f7655daad4847e5525ee191 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Thu, 27 Nov 2025 12:07:58 +0100
Subject: [PATCH] "Add filters and mobile-friendly toggles to
 OrderBookingsTable; enhance date labels with relative terms and provide 'Show
 all bookings' button when filters are applied."

---
 .../displays/tables/OrderBookingsTable.vue    | 99 ++++++++++++++++++-
 1 file changed, 97 insertions(+), 2 deletions(-)

diff --git a/src/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue b/src/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue
index f0949ad0..f3594ffa 100644
--- a/src/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue
+++ b/src/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue
@@ -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>