Add booking columns and editable reference number functionality

src/components/displays/user/bookings/bookingsTable.vue

@@ -1,5 +1,6 @@
 <script setup>
 import {useRouter} from "vue-router";
+import { loadList } from "@/components/pagination/paginatedList.vue";
 
 defineProps(['objects', 'meta']);
 import { ref, watch } from 'vue';
@@ -8,6 +9,7 @@ import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { showDownloadWashCertificate } from "@/components/shop/DownloadWashCertificate.vue";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import Swal from 'sweetalert2';
+import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
 const redirectBookingObjectPage = (objectId) => {
   // Send the user to the object page
   window.location.href = `/user/bookings/${objectId}`;
@@ -317,6 +319,11 @@ const getWashServices = (object) => {
     return [];
   }
 };
+
+const canUserEditObject = (object) => {
+  // Check if the user can edit the object
+  return SessionUser.canAccessAdmin() || (SessionUser.canAccessDepartment(object.department) && object.status === 'pending') || (SessionUser.user.customer_number.value === object.customer_number && object.status === 'pending');
+};
 </script>
 
 <template>
@@ -362,7 +369,17 @@ const getWashServices = (object) => {
       <td>{{ object.date }}</td>
       <td>{{ object.regNrTraekker }}</td>
       <td>{{ object.regNrTrailer }}</td>
-      <td>{{ object.reference_number }}</td>
+      <td>
+          <!-- Reference number -->
+          <EditableTableColumn
+              :object="object"
+              :loadList="loadList"
+              column="reference_number"
+              :parse-function="(value) => value"
+              :edit-function="SessionUser.objects.bookings.showEditObjectFieldForm"
+              :permission-check-function="() => canUserEditObject(object)"
+          />
+      </td>
       <td>{{ object.notes }}</td>
       <td>{{ object.pickup_bool == 1 ? "Ja" : "Nej" }}</td>
       <td>{{ object.created_at }}</td>

src/components/session/token/SessionUser/Objects/Bookings.vue

@@ -26,6 +26,187 @@ export const Bookings = {
       },
     },
   },
+  columns: {
+    id: {
+      label: "ID",
+      type: "number",
+      sortable: true,
+      creation: {
+        required: false
+      }
+    },
+    customer_number: {
+      label: "Kundenummer",
+      type: "number",
+      sortable: true,
+      creation: {
+        required: true
+      },
+    },
+    wash_type: {
+      label: "Vasketype",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: true
+      },
+    },
+    contact_email: {
+      label: "Kontakt E-mail",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: true
+      },
+    },
+    reference_number: {
+    label: "Reference",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: true
+      },
+    },
+    regNrTraekker: {
+      label: "Reg. 1",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: true
+      },
+    },
+    regNrTrailer: {
+      label: "Reg. 2",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+    washCertificateEmail: {
+      label: "Vaskecertifikat E-mail",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+    date: {
+      label: "Dato",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: true
+      },
+    },
+    department: {
+      label: "Afdeling",
+      type: "select",
+      sortable: true,
+      creation: {
+        required: true
+      },
+      options: async () => {
+        return SessionUser.objects.department_notification_sms.columns.department.options()
+      }
+    },
+    pickup_bool: {
+      label: "Hentning",
+      type: "boolean",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+    notes: {
+      label: "Noter",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+    washCertificateStatus: {
+      label: "Vaskecertifikat status",
+      type: "select",
+      sortable: true,
+      creation: {
+        required: false
+      },
+      options: async () => {
+        return [
+          { id: 'pending', name: "Afventer" },
+          { id: 'cancelled', name: "Annulleret" },
+          { id: 'completed', name: "Færdig" },
+        ];
+      }
+    },
+    washCertificateUrl: {
+      label: "Vaskecertifikat URL",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+    status: {
+      label: "Status",
+      type: "select",
+      sortable: true,
+      creation: {
+        required: true
+      },
+      options: async () => {
+        return [
+          { id: 'pending', name: "Afventer" },
+          { id: 'cancelled', name: "Annulleret" },
+          { id: 'completed', name: "Færdig" },
+        ];
+      }
+    },
+    data: {
+      label: "Data",
+      type: "string",
+      sortable: false,
+      creation: {
+        required: false
+      },
+    },
+    wash_certificate_pdf: {
+      label: "Vaskecertifikat PDF",
+      type: "string",
+      sortable: false,
+      creation: {
+        required: false
+      },
+    },
+    created_at: {
+      label: "Oprettet",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+    deleted_at: {
+      label: "Slettet",
+      type: "string",
+      sortable: true,
+      creation: {
+        required: false
+      },
+    },
+  },
+  set: {
+    reference_number: async (id, reference) => {
+      return ObjectsGlobal.set.column(
+          Bookings.meta.endpoint,
+          id,
+          "reference_number",
+          reference
+      )
+    },
+  },
   get: {
     single: async (identifier) => {
       return ObjectsGlobal.get.object(Bookings.meta.endpoint, identifier, {authenticated: SessionUser.functions.hasToken()});
@@ -46,5 +227,30 @@ export const Bookings = {
           );
     },
   },
+  /**
+   * Show the create object form
+   * @param onAfterSubmit
+   * @returns {Promise<SweetAlertResult<Awaited<any>>>}
+   */
+  showCreateObjectForm: (onAfterSubmit = null) => {
+    return ObjectsGlobal.showCreateObjectForm(Bookings, onAfterSubmit);
+  },
+  /**
+   * Show the edit object field form
+   * @param id
+   * @param column
+   * @param value
+   * @param onAfterSubmit
+   * @returns {Promise<SweetAlertResult<Awaited<any>>>}
+   */
+  showEditObjectFieldForm: (id, column, value, onAfterSubmit = null) => {
+    return ObjectsGlobal.showEditObjectFieldForm(
+        Bookings,
+        id,
+        column,
+        value,
+        onAfterSubmit
+    );
+  }
 };
 </script>