Implemented: Added a button to the empty state. On click, it shows completed TOs (#673)

src/locales/en.json

@@ -13,6 +13,7 @@
   "doesn't have any orders in progress right now.": "{facilityName} doesn't have any orders in progress right now.",
   "doesn't have any outstanding orders right now.": "{facilityName} doesn't have any outstanding orders right now.",
   "doesn't have any transfer orders right now.": "{facilityName} doesn't have any transfer orders right now.",
+  "doesn't have any open transfer orders right now.": "{facilityName} doesn't have any open transfer orders right now.",
   "Add Box": "Add Box",
   "Add custom field": "Add custom field",
   "Add tracking code manually": "Add tracking code manually",
@@ -319,6 +320,7 @@
   "No orders are currently able to be shipped due to missing tracking codes.": "No orders are currently able to be shipped due to missing tracking codes.",
   "No payments found": "No payments found",
   "No reason": "No reason",
+  "No results found for .": "No results found for { searchedQuery }.",
   "No results found for . Try searching Open or Completed tab instead. If you still can't find what you're looking for, try switching stores.": "No results found for { searchedQuery }. Try searching Open or Completed tab instead.{ lineBreak } If you still can't find what you're looking for, try switching stores.",
   "No results found for . Try searching In Progress or Open tab instead. If you still can't find what you're looking for, try switching stores.": "No results found for { searchedQuery }. Try searching In Progress or Open tab instead.{ lineBreak } If you still can't find what you're looking for, try switching stores.",
   "No results found for . Try searching In Progress or Completed tab instead. If you still can't find what you're looking for, try switching stores.": "No results found for { searchedQuery }. Try searching In Progress or Completed tab instead.{ lineBreak } If you still can't find what you're looking for, try switching stores.",
@@ -555,6 +557,7 @@
   "Shopify ID": "Shopify ID",
   "Show label error": "Show label error",
   "Show order items": "Show order items",
+  "Show completed transfer orders": "Show completed transfer orders",
   "Single variance": "Single variance",
   "Some of the mapping fields are missing in the CSV: ": "Some of the mapping fields are missing in the CSV: {missingFields}",
   "Something went wrong while fetching order details, please check the orderId and try again.": "Something went wrong while fetching order details, please check the orderId and try again.",

src/locales/es.json

@@ -12,6 +12,7 @@
   "doesn't have any orders in progress right now.": "{facilityName} no tiene ningún pedido en curso en este momento.",
   "doesn't have any outstanding orders right now.": "{facilityName} no tiene ningún pedido pendiente en este momento.",
   "doesn't have any transfer orders right now.": "{facilityName} no tiene ninguna orden de transferencia en este momento.",
+  "doesn't have any open transfer orders right now.": "{facilityName} doesn't have any open transfer orders right now.",
   "Add Box": "Agregar Caja",
   "Add custom field": "Agregar campo personalizado",
   "Add tracking code manually": "agregar el cosdigo de seguimiento manualmente", 
@@ -314,6 +315,7 @@
   "No orders found.": "No se encontraron pedidos.",
   "No payments found": "No se encontraron pagos",
   "No reason": "Sin motivo",
+  "No results found for .": "No results found for { searchedQuery }.",
   "No results found for . Try searching Open or Completed tab instead. If you still can't find what you're looking for, try switching stores.": "No se encontraron resultados para { searchedQuery }. Intenta buscar en la pestaña 'Abierto' o 'Completado' en su lugar.{ lineBreak } Si aún no puedes encontrar lo que buscas, prueba cambiando de tiendas.",
   "No results found for . Try searching In Progress or Open tab instead. If you still can't find what you're looking for, try switching stores.": "No se encontraron resultados para { searchedQuery }. Intenta buscar en la pestaña 'En Curso' o 'Abierto' en su lugar.{ lineBreak } Si aún no puedes encontrar lo que buscas, prueba cambiando de tiendas.",
   "No results found for . Try searching In Progress or Completed tab instead. If you still can't find what you're looking for, try switching stores.": "No se encontraron resultados para { searchedQuery }. Intenta buscar en la pestaña 'En Curso' o 'Completado' en su lugar.{ lineBreak } Si aún no puedes encontrar lo que buscas, prueba cambiando de tiendas.",
@@ -552,6 +554,7 @@
   "Shopify ID": "ID de Shopify",
   "Show label error": "Show label error",
   "Show order items": "Mostrar artículos del pedido",
+  "Show completed transfer orders": "Show completed transfer orders",
   "Single variance": "Variante unica",
   "Some of the mapping fields are missing in the CSV: ": "Algunos de los campos de mapeo faltan en el CSV: {missingFields}",
   "Something went wrong": "Algo salió mal",

src/locales/ja.json

@@ -13,6 +13,7 @@
   "doesn't have any orders in progress right now.": "{facilityName}には現在進行中の注文はありません。",
   "doesn't have any transfer orders right now.": "{facilityName}には現在転送注文はありません。",
   "doesn't have any outstanding orders right now.": "{facilityName}には現在未処理の注文はありません。",
+  "doesn't have any open transfer orders right now.": "{facilityName} doesn't have any open transfer orders right now.",
   "Add Box": "ボックスを追加",
   "Add custom field": "カスタムフィールドを追加",
   "Add tracking code manually": "Add tracking code manually",
@@ -318,6 +319,7 @@
   "No orders are currently able to be shipped due to missing tracking codes.": "追跡コードがないため、現在出荷可能な注文はありません。",
   "No payments found": "支払いが見つかりません",
   "No reason": "理由なし",
+  "No results found for .": "No results found for { searchedQuery }.",
   "No results found for . Try searching Open or Completed tab instead. If you still can't find what you're looking for, try switching stores.": "{ searchedQuery }の結果は見つかりませんでした。代わりに「オープン」または「完了」タブで検索してみてください。 { lineBreak } それでも見つからない場合は、ストアを切り替えてみてください。",
   "No results found for . Try searching In Progress or Open tab instead. If you still can't find what you're looking for, try switching stores.": "{ searchedQuery }の結果は見つかりませんでした。代わりに「進行中」または「オープン」タブで検索してみてください。 { lineBreak } それでも見つからない場合は、ストアを切り替えてみてください。",
   "No results found for . Try searching In Progress or Completed tab instead. If you still can't find what you're looking for, try switching stores.": "{ searchedQuery }の結果は見つかりませんでした。代わりに「進行中」または「完了」タブで検索してみてください。 { lineBreak } それでも見つからない場合は、ストアを切り替えてみてください。",
@@ -552,6 +554,7 @@
   "Shopify ID": "Shopify ID",
   "Show label error": "ラベルエラーを表示",
   "Show order items": "注文アイテムを表示",
+  "Show completed transfer orders": "Show completed transfer orders",
   "Single variance": "単一変動",
   "Some of the mapping fields are missing in the CSV: ": "CSV内のいくつかのマッピングフィールドが欠落しています: {missingFields}",
   "Something went wrong while fetching order details, please check the orderId and try again.": "注文詳細の取得中にエラーが発生しました。注文IDを確認して再試行してください。",

src/views/TransferOrders.vue

@@ -8,7 +8,7 @@
         <ion-title v-if="!transferOrders.total">{{ transferOrders.total }} {{ translate('orders') }}</ion-title>
         <ion-title v-else>{{ transferOrders.list.length }} {{ translate('of') }} {{ transferOrders.total }} {{ translate('orders') }}</ion-title>
         <ion-buttons slot="end">
-          <ion-menu-button menu="transfer-order-filters">
+          <ion-menu-button menu="transfer-order-filters" :disabled="!transferOrders.total">
             <ion-icon :icon="optionsOutline" />
           </ion-menu-button>
         </ion-buttons>
@@ -45,6 +45,9 @@
       </div>
       <div v-else class="empty-state">
         <p v-html="getErrorMessage()"></p>
+        <ion-button v-if="!transferOrders.query.queryString && hasCompletedTransferOrders" size="small" fill="outline" color="medium" @click="showCompletedTransferOrders">
+          <ion-icon slot="end" :icon="checkmarkDoneOutline"/>{{ translate("Show completed transfer orders") }}
+        </ion-button>
       </div>
     </ion-content>
   </ion-page>
@@ -53,6 +56,7 @@
 <script lang="ts">
 import { 
   IonBadge,
+  IonButton,
   IonButtons,
   IonIcon,
   IonContent, 
@@ -69,7 +73,7 @@ import {
   IonToolbar, 
 } from '@ionic/vue';
 import { defineComponent, computed } from 'vue';
-import { caretDownOutline, cubeOutline, optionsOutline, pricetagOutline, printOutline,} from 'ionicons/icons';
+import { caretDownOutline, checkmarkDoneOutline, cubeOutline, optionsOutline, pricetagOutline, printOutline,} from 'ionicons/icons';
 import { mapGetters, useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { translate, useUserStore } from '@hotwax/dxp-components';
@@ -80,6 +84,7 @@ export default defineComponent({
   name: 'TransferOrders',
   components: {
     IonBadge,
+    IonButton,
     IonButtons,
     IonIcon,  
     IonContent,
@@ -107,7 +112,8 @@ export default defineComponent({
     return {
       shipmentMethods: [] as Array<any>,
       searchedQuery: '',
-      isScrollingEnabled: false
+      isScrollingEnabled: false,
+      hasCompletedTransferOrders: true
     }
   },
   async ionViewWillEnter() {
@@ -116,7 +122,11 @@ export default defineComponent({
   },
   methods: {
     getErrorMessage() {
-      return this.searchedQuery === '' ? translate("doesn't have any transfer orders right now.", { facilityName: this.currentFacility?.facilityName }) : translate( "No results found for .", { searchedQuery: this.searchedQuery })
+      if(!this.searchedQuery) {
+        return this.hasCompletedTransferOrders ? translate("doesn't have any open transfer orders right now.", { facilityName: this.currentFacility.facilityName }) : translate("doesn't have any transfer orders right now.", { facilityName: this.currentFacility.facilityName });
+      } else {
+        return translate("No results found for .", { searchedQuery: this.searchedQuery });
+      }
     },
     enableScrolling() {
       const parentElement = (this as any).$refs.contentRef.$el
@@ -142,12 +152,20 @@ export default defineComponent({
     isTransferOrdersScrollable() {
       return this.transferOrders.list?.length > 0 && this.transferOrders.list?.length < this.transferOrders.total
     },
+    async showCompletedTransferOrders() {
+      const transferOrdersQuery = JSON.parse(JSON.stringify(this.transferOrders.query))
+      transferOrdersQuery.viewIndex = 0 // If the size changes, list index should be reintialised
+      transferOrdersQuery.viewSize = process.env.VUE_APP_VIEW_SIZE
+      transferOrdersQuery.selectedStatuses = ["ORDER_COMPLETED"]
+      await this.store.dispatch('transferorder/updateTransferOrderQuery', { ...transferOrdersQuery })
+      this.hasCompletedTransferOrders = this.transferOrders.list.some((order: any) => order.orderStatusId === "ORDER_COMPLETED");
+    },
     async updateQueryString(queryString: string) {
       const transferOrdersQuery = JSON.parse(JSON.stringify(this.transferOrders.query))
 
       transferOrdersQuery.viewIndex = 0
       transferOrdersQuery.viewSize = process.env.VUE_APP_VIEW_SIZE
-      transferOrdersQuery.queryString = queryString
+      transferOrdersQuery.queryString = queryString.trim()
       await this.store.dispatch('transferorder/updateTransferOrderQuery', { ...transferOrdersQuery })
       this.searchedQuery = queryString;
     },
@@ -178,6 +196,7 @@ export default defineComponent({
     return{
       Actions,
       caretDownOutline,
+      checkmarkDoneOutline,
       cubeOutline,
       currentFacility,
       optionsOutline,