Skip to content

Commit

Permalink
Merge pull request #79 from amansinghbais/order-lookup-ui
Browse files Browse the repository at this point in the history 
Improved: added max-width to the content, added ion-padding to the button, made cancel hide on no permission
  • Loading branch information
@ymaheshwari1
ymaheshwari1 authored Jun 18, 2024
2 parents d10dd70 + 6b93ef4 commit e18144d
Showing 1 changed file with 86 additions and 75 deletions.
161 changes: 86 additions & 75 deletions src/views/Order.vue
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,90 @@
<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>
Expand Down Expand Up @@ -453,3 +455,12 @@ export default defineComponent({
}
});
</script>

<style scoped>
@media (min-width: 700px) {
main {
max-width: 400px;
margin: auto;
}
}
</style>

0 comments on commit e18144d

Please sign in to comment.