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

Fixed: case related to updating archived routing and its UI(#181) #195

Merged
merged 2 commits into from
Apr 18, 2024
Merged

Fixed: case related to updating archived routing and its UI(#181) #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1dfd7ba
Fixed: case related to updating archived routing and its UI(#181)
ymaheshwari1 Apr 18, 2024
4574da5
Improved: comment(#181)
ymaheshwari1 Apr 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
25 changes: 18 additions & 7 deletions src/components/ArchivedRoutingModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,22 +45,33 @@ import { defineProps, ref } from "vue";
const props = defineProps({
archivedRoutings: {
required: true
}
},
saveRoutings: {
required: true
} as any
})

let routings = ref(props.archivedRoutings) as any
let routingsToUpdate = ref([]) as any

// Not passing any data on modal close as we are updating the routings on every button click.
function closeModal() {
modalController.dismiss({ dismissed: true, routings: routingsToUpdate.value.length ? routingsToUpdate.value.concat(routings.value) : [] });
modalController.dismiss();
}

async function updateOrderRouting(routing: Route, fieldToUpdate: string, value: string) {
routingsToUpdate.value.push({
...routing,
[fieldToUpdate]: value
})
// remove the updated routing from the archivedRoutings
routings.value = routings.value.filter((route: Route) => route.orderRoutingId !== routing.orderRoutingId)

/*
Instead of updating the same on closeModal we are updating it on every routing unarchive action, as if a user
unarchives multiple routings and then click backdrop then the updated data can't be sent back to the parent component.
Thus used this approach to update the parent data on every routing unarchive click

As we need the feature to save the routing status even when backdrop is clicked thus added above approach
*/
props.saveRoutings([{
...routing,
[fieldToUpdate]: value
}])
}
</script>
100 changes: 52 additions & 48 deletions src/views/BrokeringRoute.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,47 +126,49 @@
</section>
</main>
<aside>
<ion-list v-if="routingsForReorder.length">
<ion-list-header>
<ion-label>{{ translate("Order batches") }}</ion-label>
<ion-button color="primary" fill="clear" @click="createOrderRoute">
{{ translate("New") }}
<ion-icon :icon="addCircleOutline" />
</ion-button>
</ion-list-header>
<ion-reorder-group @ionItemReorder="doReorder($event)" :disabled="false">
<ion-card class="pointer" v-for="(routing, index) in routingsForReorder" :key="routing.orderRoutingId" @click.prevent="redirect(routing)">
<ion-item lines="full">
<ion-label>
<h1>{{ routing.routingName }}</h1>
</ion-label>
<ion-reorder>
<ion-chip outline>
<ion-label>{{ `${index + 1}/${routingsForReorder.length}` }}</ion-label>
<ion-icon :icon="reorderTwoOutline"/>
<ion-list v-if="orderRoutings.length">
<template v-if="routingsForReorder.length">
<ion-list-header>
<ion-label>{{ translate("Order batches") }}</ion-label>
<ion-button color="primary" fill="clear" @click="createOrderRoute">
{{ translate("New") }}
<ion-icon :icon="addCircleOutline" />
</ion-button>
</ion-list-header>
<ion-reorder-group @ionItemReorder="doReorder($event)" :disabled="false">
<ion-card class="pointer" v-for="(routing, index) in routingsForReorder" :key="routing.orderRoutingId" @click.prevent="redirect(routing)">
<ion-item lines="full">
<ion-label>
<h1>{{ routing.routingName }}</h1>
</ion-label>
<ion-reorder>
<ion-chip outline>
<ion-label>{{ `${index + 1}/${routingsForReorder.length}` }}</ion-label>
<ion-icon :icon="reorderTwoOutline"/>
</ion-chip>
</ion-reorder>
</ion-item>
<ion-item lines="full">
<ion-icon :icon="timeOutline" slot="start" />
<ion-label>{{ translate("Last run") }}</ion-label>
<ion-chip outline @click.stop="openRoutingHistoryModal(routing.orderRoutingId, routing.routingName)">
<ion-label>{{ routingHistory[routing.orderRoutingId] ? getDateAndTimeShort(routingHistory[routing.orderRoutingId][0].startDate) : translate("No run history") }}</ion-label>
</ion-chip>
</ion-reorder>
</ion-item>
<ion-item lines="full">
<ion-icon :icon="timeOutline" slot="start" />
<ion-label>{{ translate("Last run") }}</ion-label>
<ion-chip outline @click.stop="openRoutingHistoryModal(routing.orderRoutingId, routing.routingName)">
<ion-label>{{ routingHistory[routing.orderRoutingId] ? getDateAndTimeShort(routingHistory[routing.orderRoutingId][0].startDate) : translate("No run history") }}</ion-label>
</ion-chip>
</ion-item>
<ion-item lines="none">
<ion-badge class="pointer" :color="routing.statusId === 'ROUTING_ACTIVE' ? 'success' : ''" @click.stop="updateOrderRouting(routing, 'statusId', `${routing.statusId === 'ROUTING_DRAFT' ? 'ROUTING_ACTIVE' : 'ROUTING_DRAFT'}`)">{{ getStatusDesc(routing.statusId) }}</ion-badge>
<div slot="end">
<ion-button fill="clear" color="medium" @click.stop="cloneRouting(routing)">
<ion-icon slot="icon-only" :icon="copyOutline" />
</ion-button>
<ion-button fill="clear" color="medium" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ARCHIVED')">
<ion-icon slot="icon-only" :icon="archiveOutline" />
</ion-button>
</div>
</ion-item>
</ion-card>
</ion-reorder-group>
</ion-item>
<ion-item lines="none">
<ion-badge class="pointer" :color="routing.statusId === 'ROUTING_ACTIVE' ? 'success' : ''" @click.stop="updateOrderRouting(routing, 'statusId', `${routing.statusId === 'ROUTING_DRAFT' ? 'ROUTING_ACTIVE' : 'ROUTING_DRAFT'}`)">{{ getStatusDesc(routing.statusId) }}</ion-badge>
<div slot="end">
<ion-button fill="clear" color="medium" @click.stop="cloneRouting(routing)">
<ion-icon slot="icon-only" :icon="copyOutline" />
</ion-button>
<ion-button fill="clear" color="medium" @click.stop="updateOrderRouting(routing, 'statusId', 'ROUTING_ARCHIVED')">
<ion-icon slot="icon-only" :icon="archiveOutline" />
</ion-button>
</div>
</ion-item>
</ion-card>
</ion-reorder-group>
</template>
<ion-card v-if="getArchivedOrderRoutings().length">
<ion-item button lines="none" @click="openArchivedRoutingModal()">
<ion-label>{{ translate("Archived") }}</ion-label>
Expand Down Expand Up @@ -620,15 +622,17 @@ function doReorder(event: CustomEvent) {
async function openArchivedRoutingModal() {
const archivedRoutingModal = await modalController.create({
component: ArchivedRoutingModal,
componentProps: { archivedRoutings: getArchivedOrderRoutings() }
})

archivedRoutingModal.onDidDismiss().then((result: any) => {
if(result.data?.routings?.length) {
hasUnsavedChanges.value = true
orderRoutings.value = sortSequence(getActiveAndDraftOrderRoutings().concat(result.data?.routings))
componentProps: {
archivedRoutings: getArchivedOrderRoutings(),
// Passed a function as prop to update the routings whenever routing is unarchived from a modal
saveRoutings: (routings: any) => {
if(routings) {
hasUnsavedChanges.value = true
orderRoutings.value = sortSequence(getActiveAndDraftOrderRoutings().concat(routings))
}
initializeOrderRoutings()
}
}
initializeOrderRoutings()
})

archivedRoutingModal.present();
Expand Down
Loading