Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved: added max-width to the content, added ion-padding to the button, made cancel hide on no permission #79

Merged
merged 2 commits into from
Jun 18, 2024
Merged

Improved: added max-width to the content, added ion-padding to the button, made cancel hide on no permission #79

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a25cca
Improved: added max-width to the content, added ion-padding to the bu…
amansinghbais Jun 18, 2024
6b93ef4
Reverted: unwanted space in the code
amansinghbais Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 86 additions & 75 deletions src/views/Order.vue
View file
Open in desktop
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>
Loading