Implemented: added the functionality to the popover buttons in the mobile view of completed orders page (#244)

src/views/Completed.vue

@@ -159,7 +159,7 @@ import {
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { printOutline, downloadOutline, pricetagOutline, ellipsisVerticalOutline, checkmarkDoneOutline, optionsOutline } from 'ionicons/icons'
-import Popover from '@/views/ShippingPopover.vue'
+import ShippingPopover from '@/views/ShippingPopover.vue'
 import { useRouter } from 'vue-router';
 import { mapGetters, useStore } from 'vuex'
 import { copyToClipboard, formatUtcDate, getFeature, showToast } from '@/utils'
@@ -367,22 +367,27 @@ export default defineComponent({
 
     async shippingPopover(ev: Event, order:any) {
       const popover = await popoverController.create({
-        component: Popover,
+        component: ShippingPopover,
         componentProps: {
-          hasPackedShipments: this.hasPackedShipments,
-          order,
-          printPackingSlip: this.printPackingSlip,
-          regenerateShippingLabel: this.regenerateShippingLabel,
-          showShippingLabelErrorModal: this.showShippingLabelErrorModal,
-          unpackOrder: this.unpackOrder
+          hasPackedShipments: this.hasPackedShipments(order),
+          order
         },
         event: ev,
         translucent: true,
         showBackdrop: false,
       });
+
+      popover.onDidDismiss().then((result) => {
+        const selectedMethod = result.data.selectedMethod
+
+        // Calls method which is clicked on the popover, functions name returns when popover dismiss.
+        if(typeof(this[selectedMethod]) === 'function') {
+          (this as any)[selectedMethod](order);
+        }
+      })
+
       return popover.present();
     },
-
     async fetchShipmentMethods() {
       const payload = prepareOrderQuery({
         viewSize: "0",  // passing viewSize as 0, as we don't want to fetch any data

src/views/ShippingPopover.vue

@@ -1,16 +1,16 @@
 <template>
   <ion-content>
     <ion-list>
-      <ion-item button :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo" @click="regenerateShippingLabel(order)">
+      <ion-item button :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo" @click="closeModal('regenerateShippingLabel')">
         {{ $t("Regenerate shipping label") }}
       </ion-item>
-      <ion-item button :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo" @click="printPackingSlip(order)">
+      <ion-item button :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo" @click="closeModal('printPackingSlip')">
         {{ $t("Print customer letter") }}
       </ion-item>
-      <ion-item button :disabled="!hasPermission(Actions.APP_UNPACK_ORDER) || order.hasMissingShipmentInfo || order.hasMissingPackageInfo || !hasPackedShipments(order)" @click="unpackOrder(order)">
+      <ion-item button :disabled="!hasPermission(Actions.APP_UNPACK_ORDER) || order.hasMissingShipmentInfo || order.hasMissingPackageInfo || !hasPackedShipments" @click="closeModal('unpackOrder')">
         {{ $t("Unpack") }}
       </ion-item>
-      <ion-item button v-if="order.missingLabelImage" lines="none" @click="showShippingLabelErrorModal(order)">
+      <ion-item button v-if="order.missingLabelImage" lines="none" @click="closeModal('showShippingLabelErrorModal')">
         {{ $t("Shipping label error") }}
       </ion-item>
     </ion-list>
@@ -26,13 +26,21 @@ import {
 import { defineComponent } from "vue";
 import { printOutline, lockOpenOutline, receiptOutline, warningOutline } from 'ionicons/icons'
 import { Actions, hasPermission } from '@/authorization'
+import { popoverController } from "@ionic/core";
 export default defineComponent({
   name: "ShippingPopover",
   components: { 
     IonContent,
     IonItem,
     IonList,
   },
+  props: ['hasPackedShipments', 'order'],
+  methods: {
+    closeModal(eventName: string) {
+      // Sending function name to be called after popover dismiss.
+      popoverController.dismiss({selectedMethod: eventName})
+    }
+  },
   setup() {
     return {
       Actions,
@@ -42,14 +50,6 @@ export default defineComponent({
       receiptOutline,
       warningOutline
     }
-  },
-  props: [
-    'hasPackedShipments',
-    'order',
-    'printPackingSlip',
-    'regenerateShippingLabel',
-    'showShippingLabelErrorModal',
-    'unpackOrder'
-  ]
+  }
 });
 </script>