From a788186274f4f702af2c47ccd1dc4e3751f36ec5 Mon Sep 17 00:00:00 2001
From: k2maan <ketuman333@gmail.com>
Date: Fri, 24 Nov 2023 16:54:05 +0530
Subject: [PATCH] Improved: variable naming in template for rendering kit
 products (#268)

---
 src/views/Completed.vue  | 20 ++++++++++----------
 src/views/InProgress.vue | 26 +++++++++++++-------------
 src/views/OpenOrders.vue | 20 ++++++++++----------
 3 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/views/Completed.vue b/src/views/Completed.vue
index 118bb896..6a48850d 100644
--- a/src/views/Completed.vue
+++ b/src/views/Completed.vue
@@ -90,33 +90,33 @@
             </div>
 
             <div v-if="order.kitProducts">
-              <div v-for="(kitProducts, orderItemSeqId) in order.kitProducts" :key="orderItemSeqId">
+              <div v-for="(kitProduct, orderItemSeqId) in order.kitProducts" :key="orderItemSeqId">
                 <ion-item-divider class="order-item" color="light">
                   <div class="product-info">
                     <ion-label>
-                      <p>{{ getProduct(kitProducts[0].parentProductId).productName }}</p>
-                      <p>{{ getProduct(kitProducts[0].parentProductId).sku }}</p>
+                      <p>{{ getProduct(kitProduct[0].parentProductId).productName }}</p>
+                      <p>{{ getProduct(kitProduct[0].parentProductId).sku }}</p>
                     </ion-label>
                   </div>
                 </ion-item-divider>
 
-                <div v-for="items in kitProducts" :key="items.orderItemSeqId" class="order-item">
+                <div v-for="item in kitProduct" :key="item.orderItemSeqId" class="order-item">
                   <div class="product-info">
                     <ion-item lines="none">
                       <ion-thumbnail slot="start">
-                        <ShopifyImg :src="getProduct(items.productId).mainImageUrl" size="small"/>
+                        <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                       </ion-thumbnail>
                       <ion-label>
-                        <p class="overline">{{ items.productSku }}</p>
-                        {{ items.productName }}
-                        <p>{{ getFeature(getProduct(items.productId).featureHierarchy, '1/COLOR/')}} {{ getFeature(getProduct(items.productId).featureHierarchy, '1/SIZE/')}}</p>
+                        <p class="overline">{{ item.productSku }}</p>
+                        {{ item.productName }}
+                        <p>{{ getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/')}} {{ getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/')}}</p>
                       </ion-label>
                     </ion-item>
                   </div>
 
                   <div class="product-metadata">
-                    <ion-note v-if="getProductStock(items.productId).quantityOnHandTotal">{{ getProductStock(items.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}</ion-note>
-                    <ion-button fill="clear" v-else size="small" @click.stop="fetchProductStock(items.productId)">
+                    <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)">
                       <ion-icon color="medium" slot="icon-only" :icon="cubeOutline"/>
                     </ion-button>
                   </div>
diff --git a/src/views/InProgress.vue b/src/views/InProgress.vue
index c9dfe74d..287f2b06 100644
--- a/src/views/InProgress.vue
+++ b/src/views/InProgress.vue
@@ -150,47 +150,47 @@
             </div>
 
             <div v-if="order.kitProducts">
-              <div v-for="(kitProducts, orderItemSeqId) in order.kitProducts" :key="orderItemSeqId">
+              <div v-for="(kitProduct, orderItemSeqId) in order.kitProducts" :key="orderItemSeqId">
                 <ion-item-divider class="order-item" color="light">
                   <div class="product-info">
                     <ion-label>
-                      <p>{{ getProduct(kitProducts[0].parentProductId).productName }}</p>
-                      <p>{{ getProduct(kitProducts[0].parentProductId).sku }}</p>
+                      <p>{{ getProduct(kitProduct[0].parentProductId).productName }}</p>
+                      <p>{{ getProduct(kitProduct[0].parentProductId).sku }}</p>
                     </ion-label>
                   </div>
 
                   <div v-if="order.shipmentPackages && order.shipmentPackages.length">
-                    <ion-chip outline @click="openShipmentBoxPopover($event, kitProducts, orderItemSeqId, order)">
+                    <ion-chip outline @click="openShipmentBoxPopover($event, kitProduct, orderItemSeqId, order)">
                       <ion-icon :icon="fileTrayOutline" />
-                      {{ `Box ${kitProducts[0].selectedBox}` }} 
+                      {{ `Box ${kitProduct[0].selectedBox}` }}
                       <ion-icon :icon="caretDownOutline" />
                     </ion-chip>
                   </div>
                       
                   <div class="product-metadata" v-if="order.shipmentPackages && order.shipmentPackages.length">
-                    <ion-button @click="openRejectReasonPopover($event, kitProducts, order)" color="danger" fill="outline">
+                    <ion-button @click="openRejectReasonPopover($event, kitProduct, order)" color="danger" fill="outline">
                       {{ translate('Report an issue') }}
                     </ion-button>
                   </div>
                 </ion-item-divider>
 
-                <div v-for="items in kitProducts" :key="items.orderItemSeqId" class="order-item">
+                <div v-for="item in kitProduct" :key="item.orderItemSeqId" class="order-item">
                   <div class="product-info">
                     <ion-item lines="none">
                       <ion-thumbnail slot="start">
-                        <ShopifyImg :src="getProduct(items.productId).mainImageUrl" size="small"/>
+                        <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                       </ion-thumbnail>
                       <ion-label>
-                        <p class="overline">{{ items.productSku }}</p>
-                        {{ items.productName }}
-                        <p>{{ getFeature(getProduct(items.productId).featureHierarchy, '1/COLOR/')}} {{ getFeature(getProduct(items.productId).featureHierarchy, '1/SIZE/')}}</p>
+                        <p class="overline">{{ item.productSku }}</p>
+                        {{ item.productName }}
+                        <p>{{ getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/')}} {{ getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/')}}</p>
                       </ion-label>
                     </ion-item>
                   </div>
 
                   <div class="product-metadata">
-                    <ion-note v-if="getProductStock(items.productId).quantityOnHandTotal">{{ getProductStock(items.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}</ion-note>
-                    <ion-button fill="clear" v-else size="small" @click.stop="fetchProductStock(items.productId)">
+                    <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)">
                       <ion-icon color="medium" slot="icon-only" :icon="cubeOutline"/>
                     </ion-button>
                   </div>
diff --git a/src/views/OpenOrders.vue b/src/views/OpenOrders.vue
index 414ab88e..d6474b12 100644
--- a/src/views/OpenOrders.vue
+++ b/src/views/OpenOrders.vue
@@ -82,33 +82,33 @@
             </div>
 
             <div v-if="order.kitProducts">
-              <div v-for="(kitProducts, orderItemSeqId) in order.kitProducts" :key="orderItemSeqId">
+              <div v-for="(kitProduct, orderItemSeqId) in order.kitProducts" :key="orderItemSeqId">
                 <ion-item-divider class="order-item" color="light">
                   <div class="product-info">
                     <ion-label>
-                      <p>{{ getProduct(kitProducts[0].parentProductId).productName }}</p>
-                      <p>{{ getProduct(kitProducts[0].parentProductId).sku }}</p>
+                      <p>{{ getProduct(kitProduct[0].parentProductId).productName }}</p>
+                      <p>{{ getProduct(kitProduct[0].parentProductId).sku }}</p>
                     </ion-label>
                   </div>
                 </ion-item-divider>
 
-                <div v-for="items in kitProducts" :key="items.orderItemSeqId" class="order-item">
+                <div v-for="item in kitProduct" :key="item.orderItemSeqId" class="order-item">
                   <div class="product-info">
                     <ion-item lines="none">
                       <ion-thumbnail slot="start">
-                        <ShopifyImg :src="getProduct(items.productId).mainImageUrl" size="small"/>
+                        <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
                       </ion-thumbnail>
                       <ion-label>
-                        <p class="overline">{{ items.productSku }}</p>
-                        {{ items.productName }}
-                        <p>{{ getFeature(getProduct(items.productId).featureHierarchy, '1/COLOR/')}} {{ getFeature(getProduct(items.productId).featureHierarchy, '1/SIZE/')}}</p>
+                        <p class="overline">{{ item.productSku }}</p>
+                        {{ item.productName }}
+                        <p>{{ getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/')}} {{ getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/')}}</p>
                       </ion-label>
                     </ion-item>
                   </div>
                   
                   <div class="product-metadata">
-                    <ion-note v-if="getProductStock(items.productId).quantityOnHandTotal">{{ getProductStock(items.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}</ion-note>
-                    <ion-button fill="clear" v-else size="small" @click.stop="fetchProductStock(items.productId)">
+                    <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)">
                       <ion-icon color="medium" slot="icon-only" :icon="cubeOutline"/>
                     </ion-button>
                   </div>