"Introduce OrderBookingsTable.vue to display user bookings with editable fields, replace BookingsPagination in MyBookings.vue for improved table-based interaction and dynamic fetching logic"

2025-11-06 12:57:53 +01:00
parent 82b07defb2
commit 652cfdd4fc
2 changed files with 163 additions and 1 deletions
@@ -2,12 +2,14 @@

 import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
 import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
+import OrderBookingsTable from "@/views/dashboards/userDashboard/bookings/displays/tables/OrderBookingsTable.vue";
 </script>

 <template>
  <div>
    <UserDashboardPageWrapper title="Mine bookinger" subtitle="Se dine bookinger">
-      <BookingsPagination/>
+      <!--<BookingsPagination/>-->
+      <OrderBookingsTable/>
    </UserDashboardPageWrapper>
  </div>
 </template>
@@ -0,0 +1,160 @@
+<script setup>
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { ref, watch } from "vue";
+import { getDepartmentName } from "@/components/pagination/departmentTabs.vue";
+import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
+
+const bookings = ref([]);
+const fetch = async () => {
+  SessionUser.objects.order_bookings.get.all().then((res) => {
+    bookings.value = res;
+  });
+}
+/**
+ * This function will return a string that tells how long until the given time
+ * @param time example: 2025-11-05 13:11:31
+ * @returns {string}
+ */
+const getTimeUntilString = (time) => {
+  const dateTime = new Date(time);
+  const now = new Date();
+  const diff = dateTime - now;
+  const minutes = Math.floor(diff / 1000 / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const weeks = Math.floor(days / 7);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(days / 365);
+  const prefix = diff < 0 ? "for" : "om";
+  if (years > 0) {
+    return `${prefix} ${years} år`;
+  } else if (months > 0) {
+    if (months === 1) return `${prefix} ${months} måned`;
+    return `${prefix} ${months} måneder`;
+  } else if (weeks > 0) {
+    if (weeks === 1) return `${prefix} ${weeks} uge`;
+    return `${prefix} ${weeks} uger`;
+  } else if (days > 0) {
+    if (days === 1) return `${prefix} ${days} dag`;
+    return `${prefix} ${days} dage`;
+  } else if (hours > 0) {
+    if (hours === 1) return `${prefix} ${hours} time`;
+    return `${prefix} ${hours} timer`;
+  } else if (minutes > 0) {
+    if (minutes === 1) return `${prefix} ${minutes} minut`;
+    return `${prefix} ${minutes} minutter`;
+  } else {
+    // Check if the time is in the past
+    if (diff > 0) {
+      return `lige nu`;
+    } else if (years < -1) {
+      return `${prefix} ${-years} år siden`;
+    } else if (months < -1) {
+      if (months === -1) return `${prefix} ${-months} måned siden`;
+      return `${prefix} ${-months} måneder siden`;
+    } else if (weeks < -1) {
+      if (weeks === -1) return `${prefix} ${-weeks} uge siden`;
+      return `${prefix} ${-weeks} uger siden`;
+    } else if (days < -1) {
+      if (days === -1) return `${prefix} ${-days} dag siden`;
+      return `${prefix} ${-days} dage siden`;
+    } else if (hours < -1) {
+      if (hours === -1) return `${prefix} ${-hours} time siden`;
+      return `${prefix} ${-hours} timer siden`;
+    } else if (minutes < -1) {
+      if (minutes === -1) return `${prefix} ${-minutes} minut siden`;
+      return `${prefix} ${-minutes} minutter siden`;
+    } else {
+      return "lige nu";
+    }
+  }
+}
+</script>
+
+<template>
+  <p>Hi!</p>
+  <button @click="fetch">Fetch</button>
+  <div>
+    <table class="table">
+      <tr>
+        <th><!-- Dato --></th>
+        <th>Køretøjer</th>
+        <th>Afdeling</th>
+        <th>PO</th>
+        <th>Reference</th>
+        <th>Pickup</th>
+      </tr>
+      <template v-if="bookings.length === 0">
+        <tr>
+          <td colspan="1">Ingen bookinger fundet</td>
+        </tr>
+      </template>
+      <tr v-for="booking in bookings" :key="booking.id">
+        <!-- Date -->
+        <td>{{ getTimeUntilString(booking.datetime) }}</td>
+        <!-- Vehicles -->
+        <td>
+          <p>
+            <EditableTableColumn
+                :componentWrapper="'div'"
+                :object="booking"
+                :loadList="fetch"
+                column="reg_1"
+                :parse-function="(value) => value || 'Ingen registreret'"
+                :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+            />
+          </p>
+          <p>
+            <EditableTableColumn
+                :componentWrapper="'div'"
+                :object="booking"
+                :loadList="fetch"
+                column="reg_2"
+                :parse-function="(value) => value || '-'"
+                :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+            />
+          </p>
+        </td>
+        <!-- Department -->
+        <EditableTableColumn
+            :object="booking"
+            :loadList="fetch"
+            column="department"
+            :parse-function="(value) => getDepartmentName(parseInt(booking.department))"
+            :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+        />
+        <!-- PO -->
+        <EditableTableColumn
+            :object="booking"
+            :loadList="fetch"
+            column="po"
+            :parse-function="(value) => value || '-'"
+            :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+        />
+        <!-- Reference -->
+        <EditableTableColumn
+            :object="booking"
+            :loadList="fetch"
+            column="reference"
+            :parse-function="(value) => value || '-'"
+            :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+        />
+        <!-- Pickup -->
+        <EditableTableColumn
+            :object="booking"
+            :loadList="fetch"
+            column="pickup"
+            :parse-function="(value) => value ? 'Ja' : 'Nej'"
+            :edit-function="SessionUser.objects.order_bookings.showEditObjectFieldForm"
+        />
+      </tr>
+    </table>
+  </div>
+  <pre>
+    {{ bookings }}
+  </pre>
+</template>
+
+<style scoped>
+
+</style>