Refactor wash certificate download and improve booking handling

Revised the wash certificate download logic for better modularity and error handling. Enhanced booking display functionality across components, added linked booking navigation, and refined UI messages for clarity and user experience.

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

@@ -286,12 +286,37 @@ const parseAndSortBookings = (bookings) => {
   return newBookings;
 };
 
-const showShort = (text, length) => {
+const showShort = (text, length, count = 0) => {
   if (text.length > length) {
-    return text.substring(0, length) + '...';
+    // If the text is too long, show a short version of it
+    let suffix = '';
+    if (count > 1) {
+      console.log(count)
+      suffix = ' (' + count + ')';
+    }
+    return text.substring(0, length) + '...' + suffix
   }
   return text;
 };
+
+const getWashServicesString = (object) => {
+  if (object.parsed_services && object.parsed_services.string) {
+    // If the services are already parsed, return the string
+    return object.parsed_services.string;
+  } else {
+    return object.wash_type;
+  }
+};
+
+
+const getWashServices = (object) => {
+  if (object.parsed_services && object.parsed_services.array) {
+    // If the services are already parsed, return the services
+    return object.parsed_services.array;
+  } else {
+    return [];
+  }
+};
 </script>
 
 <template>
@@ -346,12 +371,21 @@ const showShort = (text, length) => {
           <!-- Show the type of wash -->
           <button class="button is-small is-text"
                   @click="Swal.fire(
-                  'Vaske type: ' + object.wash_type,
+                  'Ydelser: ' + getWashServicesString(object),
                   '',
                   'info'
                 )">
             <span>
-            {{ showShort(object.wash_type, 12) }}</span>
+            {{ showShort(getWashServicesString(object), 12, getWashServices(object).length) }}</span>
+          </button>
+          <!-- Show the wash certificate -->
+          <button class="button is-small is-text"
+                  v-if="object.washCertificateStatus === 'completed'"
+                  @click="showDownloadWashCertificate(object.id)">
+                  <span class="icon">
+                    <i class="fas fa-file-pdf"></i>
+                  </span>
+            <span>{{object.wash_certificate_pdf ?? 'wash_certificate_' + object.id + '.pdf'}}</span>
           </button>
         </div>
       </td>

src/components/shop/DownloadWashCertificate.vue

@@ -7,50 +7,28 @@ import Swal from "sweetalert2";
 
 export const downloadWashCertificate = async (id) => {
   // Create a download link
-  return authenticatedRequest('/user/bookings/washcertificate/download', 'post', {
+  return authenticatedRequest('/bookings/download_pdf', 'post', {
     id
   });
 };
 
 export const showDownloadWashCertificate = async (id) => {
-  Swal.fire({
-    title: 'Downloading Wash Certificate',
-    html: 'Please wait while the wash certificate is downloaded',
-    icon: 'info',
-    allowOutsideClick: false,
-    allowEscapeKey: false,
-    allowEnterKey: false
-  });
-  // Download the wash certificate
-  const response = await downloadWashCertificate(id).then(
-      (response) => {
-        // Close the loading alert
-        Swal.close();
-        // Create a success alert
-        Swal.fire({
-          title: 'Success',
-          html: 'The wash certificate has been downloaded',
-          icon: 'success',
-          confirmButtonText: 'Close',
-          timer: 5000
-        });
-        // Create a download link
-        const link = document.createElement('a');
-        link.href = response.data.data.link;
-        link.download = 'wash_certificate_' + id + '.pdf';
-        link.target = '_blank';
-        link.click();
-      }
-  ).catch((error) => {
-    // Close the loading alert
-    Swal.close();
-    // Create an error alert
+  download(id);
+}
+
+const download = (booking_id) => {
+  SessionUser.objects.bookings.functions.download(booking_id).then(async (response) => {
+    console.log(response, 'success');
+    const href = response.data.data.link;
+    window.open(href, '_blank');
+  }).catch((error) => {
+    console.log(error, 'error');
     Swal.fire({
-      title: 'Error',
-      html: '' + error.response.data.data.message,
-      icon: 'error',
-      confirmButtonText: 'Close'
+      icon: "error",
+      title: "Fejl",
+      text: "Der skete en fejl under download af vaskecertifikatet",
+      footer: error
     });
-  })
+  });
 }
 </script>

src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPosOrder.vue

@@ -28,6 +28,7 @@ import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboa
 import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
 import ButtonsBox from "@/components/displays/boxes/ButtonsBox.vue";
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
+import ShowErrorField from "@/components/global/ShowErrorField.vue";
 
 // Get the id from the route
 const orderId = ref(router.currentRoute.value.params.orderId);
@@ -352,6 +353,30 @@ const isCompleted = () => {
                   <input class="input is-clickable" type="text" v-model="order.invoice_collection_id" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'invoice_collection_id', order.invoice_collection_id, 'Faktura samling', loadOrder)">
                 </div>
               </div>
+              <!-- Booking (if any) -->
+              <div class="field" v-if="order.booking_id">
+                <label class="label">Booking</label>
+                <div class="message" :class="order.booking_id ? 'is-success' : 'is-danger'">
+                  <div class="message-body">
+                      <div
+                          class="is-clickable"
+                          @click="SessionUser.functions.redirectTo.department(
+                            order.department_id,
+                            'modules/bookings/' + order.booking_id)"
+                          >
+                        <p>
+                          Tilknyttet booking ID: {{ order.booking_id }}
+                        </p>
+                        <p>
+                          <strong>Tryk for at gå til booking</strong>
+                        </p>
+                      </div>
+                  </div>
+                </div>
+                <div class="control">
+                  <input class="input is-clickable" type="text" v-model="order.booking_id" readonly @click="SessionUser.editField.showEditFieldForm('/order', order.id, 'booking_id', order.booking_id, 'Booking', loadOrder)">
+                </div>
+              </div>
             </div>
           </template>
           <!-- Bottom order items slot -->