LIMS-1699: Show confirmation dialog if a user creates a plate that is not full (#924)

Co-authored-by: Mark Williams <mark.williams@diamond.ac.uk>

Author: ndg63276

api/src/Page/Shipment.php

@@ -218,7 +218,7 @@ class Shipment extends Page
         // TODO: Need to have a separate method for handling queueing and unqueueing of containers
         array('/containers/queue(/:cid)', 'patch', '_queue_container'),
         array('/containers/queue(/:cid)', 'get', '_queue_container'),
-        array('/containers/barcode/:BARCODE', 'get', '_check_container'),
+        array('/containers/barcode/(:BARCODE)', 'get', '_check_container'),
 
 
         array('/containers/registry(/:CONTAINERREGISTRYID)', 'get', '_container_registry'),
@@ -2068,16 +2068,20 @@ function _accept_terms()
     # Check if a barcode exists
     function _check_container()
     {
-        $cont = $this->db->pq("SELECT CONCAT(p.proposalcode, p.proposalnumber) as prop, c.barcode 
-              FROM container c
-              INNER JOIN dewar d ON d.dewarid = c.dewarid
-              INNER JOIN shipping s ON s.shippingid = d.shippingid
-              INNER JOIN proposal p ON p.proposalid = s.proposalid
-              WHERE c.barcode=:1", array($this->arg('BARCODE')));
+        if ($this->has_arg('BARCODE')) {
+            $cont = $this->db->pq("SELECT CONCAT(p.proposalcode, p.proposalnumber) as prop, c.barcode
+                  FROM container c
+                  INNER JOIN dewar d ON d.dewarid = c.dewarid
+                  INNER JOIN shipping s ON s.shippingid = d.shippingid
+                  INNER JOIN proposal p ON p.proposalid = s.proposalid
+                  WHERE c.barcode=:1", array($this->arg('BARCODE')));
 
-        if (!sizeof($cont))
-            $this->_error('Barcode not used');
-        $this->_output($cont[0]);
+            if (!sizeof($cont)) {
+                $this->_output('Barcode not used');
+            } else {
+                $this->_output($cont[0]);
+            }
+        }
     }
 
     function _get_all_containers()

client/src/js/modules/types/mx/shipment/views/mx-container-add.vue

@@ -381,6 +381,30 @@
         </template>
       </custom-dialog-box>
     </portal>
+
+    <portal to="dialog">
+      <custom-dialog-box
+        v-if="displayConfirmationModal"
+        @perform-modal-action="addContainer"
+        @close-modal-action="closeModalAction"
+      >
+        <template>
+          <div class="tw-bg-modal-header-background tw-py-1 tw-pl-4 tw-pr-2 tw-rounded-sm tw-flex tw-w-full tw-justify-between tw-items-center tw-relative">
+            <p>Create Container?</p>
+            <button
+              class="tw-flex tw-items-center tw-border tw-rounded-sm tw-border-content-border tw-bg-white tw-text-content-page-color tw-p-1"
+              @click="closeModalAction"
+            >
+              <i class="fa fa-times" />
+            </button>
+          </div>
+          <div class="tw-py-3 tw-px-4">
+            Are you sure? You have only defined {{ sampleCount }} sample(s).
+          </div>
+        </template>
+      </custom-dialog-box>
+    </portal>
+
   </div>
 </template>
 
@@ -477,7 +501,9 @@ export default {
       proteinSelection: null,
       selectedSample: null,
       sampleLocation: 0,
+      sampleCount: 0,
       displayImagerScheduleModal: false,
+      displayConfirmationModal: false,
       selectedSchedule: null,
       selectedScreen: null,
       schedulingComponentHeader: [
@@ -610,9 +636,16 @@ export default {
 
       if (!validated) return
 
-      this.addContainer()
+      this.sampleCount = this.samples.filter(s => +s.PROTEINID > 0 && s.NAME !== '').length;
+
+      if (this.plateType === 'plate' && this.sampleCount < this.containerType.CAPACITY) {
+        this.displayConfirmationModal = true
+      } else {
+        this.addContainer()
+      }
     },
     addContainer() {
+      this.displayConfirmationModal = false
       let containerAttributes = {
         NAME: this.NAME,
         DEWARID: this.DEWARID,
@@ -753,18 +786,19 @@ export default {
     },
     closeModalAction() {
       this.displayImagerScheduleModal = false
+      this.displayConfirmationModal = false
     },
     async checkContainerBarcode() {
-      try {
-        const response = await this.$store.dispatch('fetchDataFromApi', {
-          url: `/shipment/containers/barcode/${this.BARCODE}`,
-          requestType: 'fetching barcode status'
-        })
+      const response = await this.$store.dispatch('fetchDataFromApi', {
+        url: `/shipment/containers/barcode/${this.BARCODE}`,
+        requestType: 'fetching barcode status'
+      })
 
+      if (response.PROP) {
         const { PROP } = response
         this.BARCODECHECK = 0
         this.barcodeMessage = `This barcode is already registered to ${PROP}`
-      } catch (error) {
+      } else {
         this.BARCODECHECK = 1
         this.barcodeMessage = ''
       }

client/src/js/modules/types/mx/shipment/views/mx-container-view.vue

@@ -322,7 +322,7 @@ export default {
             cancel: 'closeModal',
             confirm: 'unQueueContainer'
           },
-          message: `<p>Are you sure you want to remove this container from the queue? You will loose your current place</p>`
+          message: `<p>Are you sure you want to remove this container from the queue? You will lose your current place</p>`
         }
       },
       currentModal: 'queueContainer',