Implemented: toast for background process on pack action on in-progress page (#185)

src/locales/en.json

@@ -30,7 +30,8 @@
   "Custom Label": "Custom Label",
   "Customer letter": "Customer letter",
   "Damaged": "Damaged",
-  "Define custom label for": "Define custom label for {label}",
+  "Define custom label for": "Define custom label for {field}",
+  "Dismiss": "Dismiss",
   "Delete": "Delete",
   "Delete mapping": "Delete mapping",
   "Documents to print when packing orders": "Documents to print when packing orders",
@@ -109,6 +110,7 @@
   "Ordered": "Ordered",
   "Order ID": "Order ID",
   "Order packed successfully": "Order packed successfully",
+  "Order packed successfully. Document generation in process": "Order packed successfully. Document generation in process",
   "Order shipped successfully": "Order shipped successfully",
   "Order Shipment ID": "Order Shipment ID",
   "Order unpacked successfully": "Order unpacked successfully",

src/locales/es.json

@@ -30,7 +30,8 @@
   "Custom Label": "Etiqueta Personalizada",
   "Customer letter": "Carta al Cliente",
   "Damaged": "Dañado",
-  "Define custom label for": "Definir etiqueta personalizada para {label}",
+  "Define custom label for": "Definir etiqueta personalizada para {field}",
+  "Dismiss": "Dismiss",
   "Delete": "Delete",
   "Delete mapping": "Delete mapping",
   "Documents to print when packing orders": "Documentos para imprimir al empacar pedidos",
@@ -109,6 +110,7 @@
   "Ordered": "Ordenado",
   "Order ID": "ID del Pedido",
   "Order packed successfully": "Pedido empacado exitosamente",
+  "Order packed successfully. Document generation in process": "Order packed successfully. Document generation in process",
   "Order shipped successfully": "Pedido enviado exitosamente",
   "Order Shipment ID": "ID de Envío del Pedido",
   "Order unpacked successfully": "Pedido desempacado exitosamente",

src/utils/index.ts

@@ -14,14 +14,28 @@ const hasError = (response: any) => {
   return !!response.data._ERROR_MESSAGE_ || !!response.data._ERROR_MESSAGE_LIST_;
 }
 
-const showToast = async (message: string) => {
-  const toast = await toastController
-    .create({
-      message,
-      duration: 3000,
-      position: 'bottom'
-    })
-  return toast.present();
+const showToast = async (message: string, canDismiss?: boolean, manualDismiss?: boolean, position?: string) => {
+  const config = {
+    message,
+    position: position ? position : 'bottom',
+  } as any
+
+  if (canDismiss) {
+    config.buttons = [
+      {
+        text: translate('Dismiss'),
+        role: 'cancel',
+      },
+    ]
+  }
+
+  if (!manualDismiss) {
+    config.duration = 3000
+  }
+
+  const toast = await toastController.create(config)
+  // present toast if manual dismiss is not needed
+  return !manualDismiss ? toast.present() : toast
 }
 
 const handleDateTimeInput = (dateTimeValue: any) => {

src/views/InProgress.vue

@@ -318,30 +318,40 @@ export default defineComponent({
                 'orderId': order.orderId
               }
 
-              emitter.emit('presentLoader');
               try {
+                emitter.emit('presentLoader');
                 const resp = await OrderService.packOrder(params);
-                if (resp.status === 200 && !hasError(resp)) {
-                  showToast(translate('Order packed successfully'));
-                } else {
+                if (hasError(resp)) {
                   throw resp.data
                 }
-                if (data.includes('printPackingSlip') && data.includes('printShippingLabel')) {
-                  await OrderService.printShippingLabelAndPackingSlip(order.shipmentIds)
-                } else if(data.includes('printPackingSlip')) {
-                  await OrderService.printPackingSlip(order.shipmentIds)
-                } else if(data.includes('printShippingLabel')) {
-                  await OrderService.printShippingLabel(order.shipmentIds)
+                emitter.emit('dismissLoader');
+
+                if (data.length) {
+                  // additional parameters for dismiss button and manual dismiss ability
+                  const toast: any = await showToast(translate('Order packed successfully. Document generation in process'), true, true)
+                  toast.present()
+
+                  if (data.includes('printPackingSlip') && data.includes('printShippingLabel')) {
+                    await OrderService.printShippingLabelAndPackingSlip(order.shipmentIds)
+                  } else if(data.includes('printPackingSlip')) {
+                    await OrderService.printPackingSlip(order.shipmentIds)
+                  } else if(data.includes('printShippingLabel')) {
+                    await OrderService.printShippingLabel(order.shipmentIds)
+                  }
+
+                  toast.dismiss()
+                } else {
+                  showToast(translate('Order packed successfully'));
                 }
                 // TODO: handle the case of fetching in progress orders after packing an order
                 // when packing an order the API runs too fast and the solr index does not update resulting in having the current packed order in the inProgress section
                 await Promise.all([this.fetchPickersInformation(), this.updateOrderQuery()]);
               } catch (err) {
+                // in case of error, if loader is not dismissed above
+                emitter.emit('dismissLoader');
                 showToast(translate('Failed to pack order'))
                 logger.error('Failed to pack order', err)
               }
-
-              emitter.emit('dismissLoader');
             }
           }]
         });
@@ -395,28 +405,38 @@ export default defineComponent({
                 const resp = await OrderService.packOrders({
                   shipmentIds
                 });
-                if (resp.status === 200 && !hasError(resp)) {
-                  showToast(translate('Orders packed successfully'));
-                } else {
+                if (hasError(resp)) {
                   throw resp.data
                 }
+                emitter.emit('dismissLoader');
+
                 // TODO: need to check that do we need to pass all the shipmentIds for an order or just need to pass
                 // the associated ids, currently passing the associated shipmentId
-                if (data.includes('printPackingSlip') && data.includes('printShippingLabel')) {
-                  await OrderService.printShippingLabelAndPackingSlip(shipmentIds)
-                } else if(data.includes('printPackingSlip')) {
-                  await OrderService.printPackingSlip(shipmentIds)
-                } else if(data.includes('printShippingLabel')) {
-                  await OrderService.printShippingLabel(shipmentIds)
+                if (data.length) {
+                  // additional parameters for dismiss button and manual dismiss ability
+                  const toast: any = await showToast(translate('Order packed successfully. Document generation in process'), true, true)
+                  toast.present()
+                  if (data.includes('printPackingSlip') && data.includes('printShippingLabel')) {
+                    await OrderService.printShippingLabelAndPackingSlip(shipmentIds)
+                  } else if (data.includes('printPackingSlip')) {
+                    await OrderService.printPackingSlip(shipmentIds)
+                  } else if (data.includes('printShippingLabel')) {
+                    await OrderService.printShippingLabel(shipmentIds)
+                  }
+
+                  toast.dismiss()
+                } else {
+                  showToast(translate('Order packed successfully'));
                 }
                   // TODO: handle the case of fetching in progress orders after packing multiple orders
                   // when packing multiple orders the API runs too fast and the solr index does not update resulting in having the packed orders in the inProgress section
                 await Promise.all([this.fetchPickersInformation(), this.updateOrderQuery()])
               } catch (err) {
+                // in case of error, if loader is not dismissed above
+                emitter.emit('dismissLoader');
                 showToast(translate('Failed to pack orders'))
                 logger.error('Failed to pack orders', err)
               }
-              emitter.emit('dismissLoader');
             }
           }]
         });