Skip to content

Commit

Permalink
Merge pull request #97 from ymaheshwari1/#92
Browse files Browse the repository at this point in the history
Implemented: support to display facility external ID
  • Loading branch information
ravilodhi authored Dec 11, 2023
2 parents 500d32a + 866b17a commit 5c58d5a
Show file tree
Hide file tree
Showing 5 changed files with 204 additions and 8 deletions.
141 changes: 141 additions & 0 deletions src/components/FacilityExternalIdModal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button @click="closeModal()">
<ion-icon slot="icon-only" :icon="closeOutline" />
</ion-button>
</ion-buttons>
<ion-title>{{ translate('Facility External ID') }}</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<form @keyup.enter="updateExternalId()" @submit.prevent>
<ion-list>
<ion-list-header>{{ translate("Facility details") }}</ion-list-header>
<ion-item>
<ion-label>{{ translate("Facility ID") }}</ion-label>
<ion-label slot="end">{{ currentFacility.facilityId }}</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label>{{ translate("Facility name") }}</ion-label>
<ion-label slot="end">{{ currentFacility.facilityName }}</ion-label>
</ion-item>
</ion-list>

<ion-list>
<ion-list-header>{{ translate('Facility External ID') }}</ion-list-header>
<ion-item>
<ion-label>{{ translate("Identification") }}</ion-label>
<ion-input autofocus v-model="currentFacility.externalId" />
</ion-item>
</ion-list>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button @click="updateExternalId()" @keyup.enter.stop>
<ion-icon :icon="saveOutline" />
</ion-fab-button>
</ion-fab>
</form>
</ion-content>
</template>

<script lang="ts">
import {
IonButton,
IonButtons,
IonContent,
IonFab,
IonFabButton,
IonHeader,
IonIcon,
IonInput,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonTitle,
IonToolbar,
modalController
} from "@ionic/vue";
import { defineComponent } from "vue";
import { closeOutline, saveOutline } from "ionicons/icons";
import { translate } from '@hotwax/dxp-components'
import { mapGetters, useStore } from 'vuex'
import { FacilityService } from '@/services/FacilityService'
import { showToast } from "@/utils";
import { hasError } from "@/adapter";
import logger from "@/logger";
import emitter from "@/event-bus";
export default defineComponent({
name: "FacilityExternalIdModal",
components: {
IonButton,
IonButtons,
IonContent,
IonFab,
IonFabButton,
IonHeader,
IonIcon,
IonInput,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonTitle,
IonToolbar
},
computed: {
...mapGetters({
currentFacility: 'facility/getCurrent'
})
},
methods: {
closeModal() {
modalController.dismiss()
},
async updateExternalId() {
if(!this.currentFacility.externalId?.trim()) {
showToast(translate('Please enter a valid value'))
return;
}
emitter.emit('presentLoader')
let resp;
try {
resp = await FacilityService.updateFacility({
"facilityId": this.currentFacility.facilityId,
"externalId": this.currentFacility.externalId
})
if(!hasError(resp)) {
showToast(translate('Facility external id udpated'))
await this.store.dispatch('facility/updateCurrentFacility', this.currentFacility)
this.closeModal();
} else {
throw resp.data
}
} catch(err) {
showToast(translate('Failed to create external mapping'))
logger.error('Failed to create external mapping', err)
}
emitter.emit('dismissLoader')
}
},
setup() {
const store = useStore();
return {
closeOutline,
saveOutline,
store,
translate
};
},
});
</script>
7 changes: 5 additions & 2 deletions src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,14 @@
"External mapping updated successfully": "External mapping updated successfully",
"External mappings": "External mappings",
"Facilities": "Facilities",
"Facility": "Facility",
"Facility address created successfully.": "Facility address created successfully.",
"Facility address updated successfully.": "Facility address updated successfully.",
"Facility created successfully.": "Facility created successfully.",
"Facility configurations created successfully.": "Facility configurations created successfully.",
"Facility": "Facility",
"Facility address updated successfully.": "Facility address updated successfully.",
"Facility details": "Facility details",
"Facility External ID": "Facility External ID",
"Facility external id udpated": "Facility external id udpated",
"Facility ID": "Facility ID",
"Facility latitude and longitude removed successfully.": "Facility latitude and longitude removed successfully.",
"Facility latitude and longitude updated successfully.": "Facility latitude and longitude updated successfully.",
Expand Down Expand Up @@ -213,6 +215,7 @@
"Remove": "Remove",
"Remove location": "Remove location",
"Remove schedule": "Remove schedule",
"Removed facility external ID": "Removed facility external ID",
"Removed facility mapping successfully": "Removed facility mapping successfully",
"Removed shopify mapping successfully": "Removed shopify mapping successfully",
"Rename": "Rename",
Expand Down
4 changes: 2 additions & 2 deletions src/store/modules/facility/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ const actions: ActionTree<FacilityState, RootState> = {
"entityName": "FacilityAndProductStore",
"noConditionFind": "Y",
"distinct": "Y",
"fieldList": ['facilityId', 'facilityName', 'facilityTypeId', 'maximumOrderLimit', 'defaultDaysToShip'],
"fieldList": ['facilityId', 'facilityName', 'facilityTypeId', 'maximumOrderLimit', 'defaultDaysToShip', "externalId"],
...payload
}

Expand Down Expand Up @@ -173,7 +173,7 @@ const actions: ActionTree<FacilityState, RootState> = {
entityName: "FacilityAndProductStore",
noConditionFind: "Y",
distinct: "Y",
fieldList: ['facilityId', 'facilityName', 'facilityTypeId', 'maximumOrderLimit', 'defaultDaysToShip'],
fieldList: ['facilityId', 'facilityName', 'facilityTypeId', 'maximumOrderLimit', 'defaultDaysToShip', "externalId"],
viewSize: 1
}

Expand Down
53 changes: 50 additions & 3 deletions src/views/FacilityDetails.vue
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,23 @@
<ion-button fill="clear" @click="editFacilityMapping(mapping)">{{ translate("Edit") }}</ion-button>
<ion-button fill="clear" color="danger" @click="removeFacilityMapping(mapping)">{{ translate("Remove") }}</ion-button>
</ion-card>

<!-- Hardcoded card to shop facility externalId, as externalID is not available as an identification -->
<ion-card>
<ion-card-header>
<ion-card-title>
{{ translate('Facility External ID') }}
</ion-card-title>
</ion-card-header>
<ion-item lines="full">
<ion-label>{{ translate('Identification') }}</ion-label>
<ion-label slot="end">{{ current.externalId ? current.externalId : '-' }}</ion-label>
</ion-item>
<!-- Using blur to remove the focus from button on click, as we need to focus the input field inside the modal opened
and we can't focus two elements at the same time -->
<ion-button fill="clear" @click="$event.target.blur(); editFacilityExternalId()">{{ translate("Edit") }}</ion-button>
<ion-button fill="clear" color="danger" @click="removeFacilityExternalID()">{{ translate("Remove") }}</ion-button>
</ion-card>
</div>
</div>

Expand Down Expand Up @@ -429,6 +446,7 @@ import { FacilityService } from '@/services/FacilityService';
import { hasError } from '@/adapter';
import logger from '@/logger';
import FacilityShopifyMappingModal from '@/components/FacilityShopifyMappingModal.vue'
import FacilityExternalIdModal from '@/components/FacilityExternalIdModal.vue'
import FacilityMappingModal from '@/components/FacilityMappingModal.vue'
import { showToast } from '@/utils';
import OperatingHoursPopover from '@/components/OperatingHoursPopover.vue'
Expand Down Expand Up @@ -474,7 +492,8 @@ export default defineComponent({
isCalendarFound: true,
selectedCalendarId: '',
isRegenerationRequired: true,
days: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
days: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
externalId: ''
}
},
computed: {
Expand Down Expand Up @@ -734,7 +753,7 @@ export default defineComponent({
if(result.data != undefined && result.data !== this.current.maximumOrderLimit) {
await this.updateFacility(result.data, this.current)
// refetching the facility to update the maximumOrderLimit
await this.store.dispatch('facility/fetchCurrentFacility', this.facilityId)
await this.store.dispatch('facility/fetchCurrentFacility', { facilityId: this.facilityId, skipState: true })
}
},
async updateFacility(maximumOrderLimit: number | string, facility: any) {
Expand Down Expand Up @@ -904,6 +923,27 @@ export default defineComponent({
showToast(translate('Failed to remove facility mapping'))
}
},
async removeFacilityExternalID() {
try {
const payload = {
facilityId: this.current.facilityId,
externalId: ''
}
const resp = await FacilityService.updateFacility(payload)
if(!hasError(resp)) {
this.current.externalId = ''
showToast(translate('Removed facility external ID'))
await this.store.dispatch('facility/updateCurrentFacility', this.current)
} else {
throw resp.data
}
} catch(err) {
logger.error('Failed to remove external id', err)
showToast(translate('Failed to remove external id'))
}
},
async removeShopifyFacilityMapping(shopifyFacilityMapping: any) {
try {
const payload = {
Expand Down Expand Up @@ -933,6 +973,13 @@ export default defineComponent({
customMappingModal.present()
},
async editFacilityExternalId() {
const facilityExternalIdModal = await modalController.create({
component: FacilityExternalIdModal
})
facilityExternalIdModal.present()
},
async editShopifyFacilityMapping(shopifyFacilityMapping: any) {
const customMappingModal = await modalController.create({
component: FacilityShopifyMappingModal,
Expand Down Expand Up @@ -1009,7 +1056,7 @@ export default defineComponent({
})
await alert.present()
},
}
},
setup() {
const store = useStore();
Expand Down
7 changes: 6 additions & 1 deletion src/views/FindFacilities.vue
Original file line number Diff line number Diff line change
Expand Up @@ -199,10 +199,15 @@ export default defineComponent({
})
},
async mounted() {
await this.fetchFacilities();
// We only need to fetch those types whose parent is not virtual facility
await Promise.all([this.store.dispatch('util/fetchFacilityTypes', { parentTypeId: 'VIRTUAL_FACILITY', parentTypeId_op: 'notEqual', facilityTypeId: 'VIRTUAL_FACILITY', facilityTypeId_op: 'notEqual' }), this.store.dispatch('util/fetchProductStores')])
},
async ionViewWillEnter() {
// fetching facilities information in the ionViewWillEnter hook as when updating facilityGroup or fulfillment limit
// from the details page and again coming to the list page, the UI does not gets updated when fetching information in
// the mounted hook
await this.fetchFacilities();
},
methods: {
async updateQuery() {
await this.store.dispatch('facility/updateFacilityQuery', this.query)
Expand Down

0 comments on commit 5c58d5a

Please sign in to comment.