From 7a25ccac69ad8f0cb81c7d0bfb11c81524fb5de3 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 18 Jun 2024 19:24:23 +0530
Subject: [PATCH 1/2] Improved: added max-width to the content, added
 ion-padding to the button, made cancel hide on no permission

---
 src/views/Order.vue | 162 ++++++++++++++++++++++++--------------------
 1 file changed, 87 insertions(+), 75 deletions(-)

diff --git a/src/views/Order.vue b/src/views/Order.vue
index b3e65a10..49e1df15 100644
--- a/src/views/Order.vue
+++ b/src/views/Order.vue
@@ -1,88 +1,91 @@
 <template>
   <ion-page>
     <ion-content :fullscreen="true">
-      <div v-if="Object.keys(order).length">
-        <ion-item class="ion-text-center" lines="none">
-          <h1>{{ $t("Your Order") }}</h1>
-        </ion-item>
-        <ion-card>
-          <ion-item lines="none" class="border">
-            <ion-label>
-              {{ order.customerName }}
-              <p>{{ order.id }}</p>
-            </ion-label>
-            <ion-note slot="end">{{ $filters.formatDate(order.orderDate) }}</ion-note>
+      <main>
+
+        <div v-if="Object.keys(order).length">
+          <ion-item class="ion-text-center" lines="none">
+            <h1>{{ $t("Your Order") }}</h1>
           </ion-item>
-        </ion-card>
-        <div v-if="order.statusId !== 'ORDER_CANCELLED' && order.shipGroup.length > 0" >
-          <ion-card v-for="(shipGroup, index) of order.shipGroup" :key="index">
-            <ion-item v-show="item.status !== 'ITEM_CANCELLED'" v-for="item of shipGroup.items" :key="item.id" lines="full">
-              <ion-thumbnail slot="start">
-                <Image :src='getProduct(item.productId).mainImageUrl' />
-              </ion-thumbnail>
-              <ion-label slot="start">
-                <p>{{ item.brandName }}</p>
-                <h2>{{ item.name }}</h2>
-                <p v-for="(attribute, feature) in ($filters.groupFeatures(getProduct(item.productId).featureHierarchy))" :key="attribute" >
-                  <span class="sentence-case">{{ feature }}</span>: {{ attribute }}
-                </p>
-              </ion-label>
-            </ion-item>
-            <!-- TODO -->
-            <!-- <ion-item>
+          <ion-card>
+            <ion-item lines="none" class="border">
               <ion-label>
-                status description
+                {{ order.customerName }}
+                <p>{{ order.id }}</p>
               </ion-label>
-            </ion-item> -->
-            <ion-item>
-              <ion-select :label="$t('Delivery method')" :disabled="!hasPermission(Actions.APP_SHPGRP_DLVRMTHD_UPDATE)" interface="popover" :value="shipGroup.selectedShipmentMethodTypeId" @ionChange="updateDeliveryMethod($event, shipGroup)">
-                <ion-select-option v-for="method in deliveryMethods" :key="method.value" :value="method.value">{{ method.name }}</ion-select-option>
-              </ion-select>
-            </ion-item>
-            <ion-button v-if="shipGroup.shipmentMethodTypeId === 'STOREPICKUP' && shipGroup.selectedShipmentMethodTypeId !== shipGroup.shipmentMethodTypeId && !shipGroup.updatedAddress" :disabled="!hasPermission(Actions.APP_SHPGRP_DLVRADR_UPDATE) && shipGroup.shipmentMethodTypeId !== 'STOREPICKUP'" @click="updateDeliveryAddress(shipGroup)" expand="block" fill="outline">{{ $t("Add address") }}</ion-button>
-            <ion-button v-else-if="shipGroup.selectedShipmentMethodTypeId === 'STOREPICKUP' && !shipGroup.selectedFacility" :disabled="!hasPermission(Actions.APP_SHPGRP_PCKUP_UPDATE) && shipGroup.shipmentMethodTypeId === 'STOREPICKUP'" @click="updatePickupLocation(shipGroup)" expand="block" fill="outline">{{ $t("Select pickup location")}}</ion-button>
-            <ion-item v-else-if="shipGroup.selectedShipmentMethodTypeId === 'STOREPICKUP'">
-              <ion-list>
-                <ion-label>{{ shipGroup.selectedFacility.facilityName }} </ion-label>
-                <ion-label color="dark">{{ shipGroup.selectedFacility.address1 }} </ion-label>
-                <ion-label color="dark">{{ shipGroup.selectedFacility.city }} {{ shipGroup.selectedFacility.stateCode }} {{ shipGroup.shipTo.postalAddress.country }} {{ shipGroup.selectedFacility.postalCode }}</ion-label>
-              </ion-list>
-              <ion-button :disabled="!hasPermission(Actions.APP_SHPGRP_PCKUP_UPDATE) && shipGroup.shipmentMethodTypeId === 'STOREPICKUP'" slot="end" @click="updatePickupLocation(shipGroup)" color="medium" fill="outline">{{ $t("Change Store")}}</ion-button>
-            </ion-item>
-            <ion-item v-else>
-              <ion-list v-if="shipGroup.updatedAddress">
-                <ion-label>{{ shipGroup.updatedAddress.firstName }} {{ shipGroup.updatedAddress.lastName }}</ion-label>
-                <ion-label color="dark">{{ shipGroup.updatedAddress.address1 }} </ion-label>
-                <ion-label color="dark">{{ shipGroup.updatedAddress.city }} {{ shipGroup.updatedAddress.stateCode }} {{ shipGroup.updatedAddress.postalCode }}</ion-label>
-              </ion-list>
-              <ion-list v-else-if="shipGroup.shipmentMethodTypeId !== 'STOREPICKUP'">
-                <ion-label>{{ shipGroup.shipTo.postalAddress.toName }}</ion-label>
-                <ion-label color="dark">{{ shipGroup.shipTo.postalAddress.address1 }} </ion-label>
-                <ion-label color="dark">{{ shipGroup.shipTo.postalAddress.city }} {{ shipGroup.shipTo.postalAddress.stateCode }} {{ shipGroup.shipTo.postalAddress.postalCode }}</ion-label>
-              </ion-list>
-              <ion-button :disabled="!hasPermission(Actions.APP_SHPGRP_DLVRADR_UPDATE) && shipGroup.shipmentMethodTypeId !== 'STOREPICKUP'" v-if="shipGroup.shipmentMethodTypeId !== 'STOREPICKUP' || shipGroup.updatedAddress" slot="end" @click="updateDeliveryAddress(shipGroup)" color="medium" fill="outline">{{ $t("Edit address") }}</ion-button>
+              <ion-note slot="end">{{ $filters.formatDate(order.orderDate) }}</ion-note>
             </ion-item>
-            <!-- TODO -->
-            <!-- <ion-item v-if="shipGroup.selectedShipmentMethodTypeId !== 'STOREPICKUP'" lines="none">
-              <ion-label>{{ $t("Estimated delivery") }}</ion-label>
-              <ion-label slot="end">{{ $t("03/03/2023") }}</ion-label>
-            </ion-item> -->
-            <ion-item v-if="shipGroup.trackingNumber">
-              <ion-label>{{ $t('Tracking code') }}</ion-label>
-              <ion-note slot="end">{{ shipGroup.trackingNumber }}</ion-note>
-            </ion-item>
-            <!-- Disabling the buttons if address or facility is not added -->
-            <ion-button :disabled="(!shipGroup.updatedAddress && (!shipGroup.selectedFacility || shipGroup.selectedFacility.facilityId == shipGroup.facilityId))" @click="save(shipGroup)" fill="clear">{{ $t("Save changes") }}</ion-button>
-            <ion-button :disabled="!hasPermission(Actions.APP_SHPGRP_CNCL)" @click="cancel(shipGroup)" fill="clear" color="danger">{{ $t("Cancel") }}</ion-button>
           </ion-card>
+          <div v-if="order.statusId !== 'ORDER_CANCELLED' && order.shipGroup.length > 0" >
+            <ion-card v-for="(shipGroup, index) of order.shipGroup" :key="index">
+              <ion-item v-show="item.status !== 'ITEM_CANCELLED'" v-for="item of shipGroup.items" :key="item.id" lines="full">
+                <ion-thumbnail slot="start">
+                  <Image :src='getProduct(item.productId).mainImageUrl' />
+                </ion-thumbnail>
+                <ion-label slot="start">
+                  <p>{{ item.brandName }}</p>
+                  <h2>{{ item.name }}</h2>
+                  <p v-for="(attribute, feature) in ($filters.groupFeatures(getProduct(item.productId).featureHierarchy))" :key="attribute" >
+                    <span class="sentence-case">{{ feature }}</span>: {{ attribute }}
+                  </p>
+                </ion-label>
+              </ion-item>
+              <!-- TODO -->
+              <!-- <ion-item>
+                <ion-label>
+                  status description
+                </ion-label>
+              </ion-item> -->
+              <ion-item>
+                <ion-select :label="$t('Delivery method')" :disabled="!hasPermission(Actions.APP_SHPGRP_DLVRMTHD_UPDATE)" interface="popover" :value="shipGroup.selectedShipmentMethodTypeId" @ionChange="updateDeliveryMethod($event, shipGroup)">
+                  <ion-select-option v-for="method in deliveryMethods" :key="method.value" :value="method.value">{{ method.name }}</ion-select-option>
+                </ion-select>
+              </ion-item>
+              <ion-button v-if="shipGroup.shipmentMethodTypeId === 'STOREPICKUP' && shipGroup.selectedShipmentMethodTypeId !== shipGroup.shipmentMethodTypeId && !shipGroup.updatedAddress" :disabled="!hasPermission(Actions.APP_SHPGRP_DLVRADR_UPDATE) && shipGroup.shipmentMethodTypeId !== 'STOREPICKUP'" @click="updateDeliveryAddress(shipGroup)" expand="block" fill="outline">{{ $t("Add address") }}</ion-button>
+              <ion-button v-else-if="shipGroup.selectedShipmentMethodTypeId === 'STOREPICKUP' && !shipGroup.selectedFacility" :disabled="!hasPermission(Actions.APP_SHPGRP_PCKUP_UPDATE) && shipGroup.shipmentMethodTypeId === 'STOREPICKUP'" @click="updatePickupLocation(shipGroup)" expand="block" fill="outline" class="ion-padding">{{ $t("Select pickup location")}}</ion-button>
+              <ion-item v-else-if="shipGroup.selectedShipmentMethodTypeId === 'STOREPICKUP'">
+                <ion-list>
+                  <ion-label>{{ shipGroup.selectedFacility.facilityName }} </ion-label>
+                  <ion-label color="dark">{{ shipGroup.selectedFacility.address1 }} </ion-label>
+                  <ion-label color="dark">{{ shipGroup.selectedFacility.city }} {{ shipGroup.selectedFacility.stateCode }} {{ shipGroup.shipTo.postalAddress.country }} {{ shipGroup.selectedFacility.postalCode }}</ion-label>
+                </ion-list>
+                <ion-button :disabled="!hasPermission(Actions.APP_SHPGRP_PCKUP_UPDATE) && shipGroup.shipmentMethodTypeId === 'STOREPICKUP'" slot="end" @click="updatePickupLocation(shipGroup)" color="medium" fill="outline">{{ $t("Change Store")}}</ion-button>
+              </ion-item>
+              <ion-item v-else>
+                <ion-list v-if="shipGroup.updatedAddress">
+                  <ion-label>{{ shipGroup.updatedAddress.firstName }} {{ shipGroup.updatedAddress.lastName }}</ion-label>
+                  <ion-label color="dark">{{ shipGroup.updatedAddress.address1 }} </ion-label>
+                  <ion-label color="dark">{{ shipGroup.updatedAddress.city }} {{ shipGroup.updatedAddress.stateCode }} {{ shipGroup.updatedAddress.postalCode }}</ion-label>
+                </ion-list>
+                <ion-list v-else-if="shipGroup.shipmentMethodTypeId !== 'STOREPICKUP'">
+                  <ion-label>{{ shipGroup.shipTo.postalAddress.toName }}</ion-label>
+                  <ion-label color="dark">{{ shipGroup.shipTo.postalAddress.address1 }} </ion-label>
+                  <ion-label color="dark">{{ shipGroup.shipTo.postalAddress.city }} {{ shipGroup.shipTo.postalAddress.stateCode }} {{ shipGroup.shipTo.postalAddress.postalCode }}</ion-label>
+                </ion-list>
+                <ion-button :disabled="!hasPermission(Actions.APP_SHPGRP_DLVRADR_UPDATE) && shipGroup.shipmentMethodTypeId !== 'STOREPICKUP'" v-if="shipGroup.shipmentMethodTypeId !== 'STOREPICKUP' || shipGroup.updatedAddress" slot="end" @click="updateDeliveryAddress(shipGroup)" color="medium" fill="outline">{{ $t("Edit address") }}</ion-button>
+              </ion-item>
+              <!-- TODO -->
+              <!-- <ion-item v-if="shipGroup.selectedShipmentMethodTypeId !== 'STOREPICKUP'" lines="none">
+                <ion-label>{{ $t("Estimated delivery") }}</ion-label>
+                <ion-label slot="end">{{ $t("03/03/2023") }}</ion-label>
+              </ion-item> -->
+              <ion-item v-if="shipGroup.trackingNumber">
+                <ion-label>{{ $t('Tracking code') }}</ion-label>
+                <ion-note slot="end">{{ shipGroup.trackingNumber }}</ion-note>
+              </ion-item>
+              <!-- Disabling the buttons if address or facility is not added -->
+              <ion-button :disabled="(!shipGroup.updatedAddress && (!shipGroup.selectedFacility || shipGroup.selectedFacility.facilityId == shipGroup.facilityId))" @click="save(shipGroup)" fill="clear">{{ $t("Save changes") }}</ion-button>
+              <ion-button v-if="hasPermission(Actions.APP_SHPGRP_CNCL)" @click="cancel(shipGroup)" fill="clear" color="danger">{{ $t("Cancel") }}</ion-button>
+            </ion-card>
+          </div>
+          <div v-else class="ion-text-center ion-padding-top">
+            <ion-label>{{ $t("Order item not eligible for reroute fulfilment") }}</ion-label>
+          </div>
         </div>
-        <div v-else class="ion-text-center ion-padding-top">
-          <ion-label>{{ $t("Order item not eligible for reroute fulfilment") }}</ion-label>
+        <div v-else-if="loader == null" class="ion-text-center ion-padding-top">
+          <ion-label>{{ $t("Order not found") }}</ion-label>
         </div>
-      </div>
-      <div v-else-if="loader == null" class="ion-text-center ion-padding-top">
-        <ion-label>{{ $t("Order not found") }}</ion-label>
-      </div>
+      </main>
     </ion-content>
   </ion-page>
 </template>
@@ -453,3 +456,12 @@ export default defineComponent({
   }
 });
 </script>
+
+<style scoped>
+  @media (min-width: 700px) {
+    main {
+      max-width: 400px;
+      margin: auto;
+    }
+  }
+</style>
\ No newline at end of file

From 6b93ef4efc6745664989e8d3f0a3778694e921ff Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 18 Jun 2024 19:29:24 +0530
Subject: [PATCH 2/2] Reverted: unwanted space in the code

---
 src/views/Order.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/Order.vue b/src/views/Order.vue
index 49e1df15..1834ef36 100644
--- a/src/views/Order.vue
+++ b/src/views/Order.vue
@@ -2,7 +2,6 @@
   <ion-page>
     <ion-content :fullscreen="true">
       <main>
-
         <div v-if="Object.keys(order).length">
           <ion-item class="ion-text-center" lines="none">
             <h1>{{ $t("Your Order") }}</h1>