Merge pull request #667 from hotwax/#603_kit_product_ui

Fixed: Displayed chevron up icon while showing kit components (#603).
hotwax · Jul 26, 2024 · 193ebc4 · 193ebc4
2 parents 6766f67 + 582ebba
commit 193ebc4
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/src/views/Completed.vue b/src/views/Completed.vue
@@ -87,7 +87,8 @@
                 </div>
                 <div class="product-metadata">
                   <ion-button v-if="isKit(item)" fill="clear" size="small" @click.stop="fetchKitComponents(item)">
-                    <ion-icon color="medium" slot="icon-only" :icon="listOutline"/>
+                    <ion-icon v-if="item.showKitComponents" color="medium" slot="icon-only" :icon="chevronUpOutline"/>
+                    <ion-icon v-else color="medium" slot="icon-only" :icon="listOutline"/>
                   </ion-button>
                   <ion-note v-if="getProductStock(item.productId).quantityOnHandTotal">{{ getProductStock(item.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}</ion-note>
                   <ion-button fill="clear" v-else size="small" @click.stop="fetchProductStock(item.productId)">
@@ -197,7 +198,7 @@ import {
   modalController
 } from '@ionic/vue';
 import { computed, defineComponent } from 'vue';
-import { caretDownOutline, cubeOutline, printOutline, downloadOutline, listOutline, pricetagOutline, ellipsisVerticalOutline, checkmarkDoneOutline, optionsOutline } from 'ionicons/icons'
+import { caretDownOutline, chevronUpOutline, cubeOutline, printOutline, downloadOutline, listOutline, pricetagOutline, ellipsisVerticalOutline, checkmarkDoneOutline, optionsOutline } from 'ionicons/icons'
 import Popover from '@/views/ShippingPopover.vue'
 import { useRouter } from 'vue-router';
 import { mapGetters, useStore } from 'vuex'
@@ -746,6 +747,7 @@ export default defineComponent({
     return {
       Actions,
       caretDownOutline,
+      chevronUpOutline,
       copyToClipboard,
       checkmarkDoneOutline,
       cubeOutline,

diff --git a/src/views/InProgress.vue b/src/views/InProgress.vue
@@ -136,7 +136,8 @@
 
                 <div class="product-metadata">
                   <ion-button v-if="isKit(item)" fill="clear" size="small" @click.stop="fetchKitComponents(item)">
-                    <ion-icon color="medium" slot="icon-only" :icon="listOutline"/>
+                    <ion-icon v-if="item.showKitComponents" color="medium" slot="icon-only" :icon="chevronUpOutline"/>
+                    <ion-icon v-else color="medium" slot="icon-only" :icon="listOutline"/>
                   </ion-button>
                   <ion-button fill="clear" size="small" @click.stop="openRejectReasonPopover($event, item, order)">
                     <ion-icon color="danger" slot="icon-only" :icon="trashBinOutline"/>
@@ -270,6 +271,7 @@ import { computed, defineComponent } from 'vue';
 import {
   addOutline,
   caretDownOutline,
+  chevronUpOutline,
   checkmarkDoneOutline,
   closeCircleOutline,
   cubeOutline,
@@ -1242,6 +1244,7 @@ export default defineComponent({
       addOutline,
       authStore,
       caretDownOutline,
+      chevronUpOutline,
       copyToClipboard,
       checkmarkDoneOutline,
       closeCircleOutline,

diff --git a/src/views/OpenOrders.vue b/src/views/OpenOrders.vue
@@ -81,7 +81,8 @@
                 </div>
                 <div class="product-metadata">
                   <ion-button v-if="isKit(item)" fill="clear" size="small" @click.stop="fetchKitComponents(item)">
-                    <ion-icon color="medium" slot="icon-only" :icon="listOutline"/>
+                    <ion-icon v-if="item.showKitComponents" color="medium" slot="icon-only" :icon="chevronUpOutline"/>
+                    <ion-icon v-else color="medium" slot="icon-only" :icon="listOutline"/>
                   </ion-button>
                   <ion-note v-if="getProductStock(item.productId).quantityOnHandTotal">{{ getProductStock(item.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}</ion-note>
                   <ion-button fill="clear" v-else size="small" @click.stop="fetchProductStock(item.productId)">
@@ -169,7 +170,7 @@ import {
   popoverController
 } from '@ionic/vue';
 import { computed, defineComponent } from 'vue';
-import { caretDownOutline, cubeOutline, listOutline, notificationsOutline, optionsOutline, pricetagOutline, printOutline,} from 'ionicons/icons';
+import { caretDownOutline, chevronUpOutline, cubeOutline, listOutline, notificationsOutline, optionsOutline, pricetagOutline, printOutline,} from 'ionicons/icons';
 import AssignPickerModal from '@/views/AssignPickerModal.vue';
 import { mapGetters, useStore } from 'vuex';
 import { getProductIdentificationValue, DxpShopifyImg, useProductIdentificationStore } from '@hotwax/dxp-components';
@@ -437,6 +438,7 @@ export default defineComponent({
     return{
       Actions,
       caretDownOutline,
+      chevronUpOutline,
       cubeOutline,
       formatUtcDate,
       getFeature,

diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue
@@ -126,7 +126,8 @@
               </ion-button>
               <ion-button v-if="isKit(item)" fill="clear" color="medium" size="small" @click.stop="fetchKitComponent(item)">
                 {{ translate('Components') }}
-                <ion-icon color="medium" slot="end" :icon="listOutline"/>
+                <ion-icon v-if="item.showKitComponents" color="medium" slot="icon-only" :icon="chevronUpOutline"/>
+                <ion-icon v-else color="medium" slot="icon-only" :icon="listOutline"/>
               </ion-button>
             </div>
             </div>
@@ -246,7 +247,8 @@
                   <ion-icon color="medium" slot="icon-only" :icon="cubeOutline"/>
                 </ion-button>
                 <ion-button slot="end" v-if="isKit(item)" fill="clear" size="small" @click.stop="fetchKitComponent(item, true)">
-                  <ion-icon color="medium" slot="icon-only" :icon="listOutline"/>
+                  <ion-icon v-if="item.showKitComponents" color="medium" slot="icon-only" :icon="chevronUpOutline"/>
+                  <ion-icon v-else color="medium" slot="icon-only" :icon="listOutline"/>
                 </ion-button>
               </div>
             </ion-item>
@@ -312,6 +314,7 @@ import {
   bagCheckOutline,
   caretDownOutline,
   cashOutline,
+  chevronUpOutline,
   closeCircleOutline,
   cubeOutline,
   documentTextOutline,
@@ -1316,6 +1319,7 @@ export default defineComponent({
       bagCheckOutline,
       cashOutline,
       caretDownOutline,
+      chevronUpOutline,
       closeCircleOutline,
       copyToClipboard,
       cubeOutline,