Improved: Added a flag to prevent auto-population of the facility ID after it has been manually edited(#265)

src/components/CreateVirtualFacilityModal.vue

@@ -91,11 +91,14 @@ export default defineComponent({
         facilityId: '',
         description: '',
       },
+      isAutoGenerateId: true
     }
   },
   methods: {
     setFacilityId(event: any) {
-      this.formData.facilityId = generateInternalId(event.target.value)
+      if(this.isAutoGenerateId) {
+        this.formData.facilityId = generateInternalId(event.target.value)
+      }
     },
     closeModal() {
       modalController.dismiss();
@@ -157,6 +160,7 @@ export default defineComponent({
       this.formData.facilityId.length <= 20
         ? (this as any).$refs.facilityId.$el.classList.add('ion-valid')
         : (this as any).$refs.facilityId.$el.classList.add('ion-invalid');
+      this.isAutoGenerateId = false;
     },
     markFacilityIdTouched() {
       (this as any).$refs.facilityId.$el.classList.add('ion-touched');

src/views/CreateFacility.vue

@@ -110,7 +110,8 @@ export default defineComponent({
         externalId: '',
       },
       selectedFacilityTypeId: '' as any,
-      facilityTypesByParentTypeId: {} as any
+      facilityTypesByParentTypeId: {} as any,
+      isAutoGenerateId: true,
     }
   },
   async ionViewWillEnter() {
@@ -138,9 +139,12 @@ export default defineComponent({
         facilityId: '',
         externalId: '',
       }
+      this.isAutoGenerateId = true;
     },
     setFacilityId(event: any) {
-      this.formData.facilityId = generateInternalId(event.target.value)
+      if(this.isAutoGenerateId) {
+        this.formData.facilityId = generateInternalId(event.target.value)
+      }
     },
     async createFacility() {
       if (!this.formData.facilityName?.trim()) {
@@ -214,6 +218,7 @@ export default defineComponent({
       this.formData.facilityId.length <= 20
         ? (this as any).$refs.facilityId.$el.classList.add('ion-valid')
         : (this as any).$refs.facilityId.$el.classList.add('ion-invalid');
+      this.isAutoGenerateId = false;
     },
     markFacilityIdTouched() {
       (this as any).$refs.facilityId.$el.classList.add('ion-touched');

src/views/CreateFacilityGroup.vue

@@ -130,7 +130,8 @@
         description: '',
       },
       isFacilityGroupTypeDisabled: false,
-      selectedProductStoreIds: []
+      selectedProductStoreIds: [],
+      isAutoGenerateId: true
     }
   },
   props: ['selectedFacilityGroupTypeId'],
@@ -147,7 +148,9 @@
       this.selectedProductStoreIds = selectedProductStoreIds
     },
     setFacilityGroupId(event: any) {
-      this.formData.facilityGroupId = generateInternalId(event.target.value)
+      if(this.isAutoGenerateId) {
+        this.formData.facilityGroupId = generateInternalId(event.target.value)
+      }
     },
     async createFacilityGroup() {
       if (!this.formData.facilityGroupName?.trim()) {
@@ -197,7 +200,7 @@
         )
         const hasFailedResponse = responses.some((response: any) => response.status === 'rejected')
         if (hasFailedResponse) {
           console.log("Error in associating group to some of the product stores")
         }
       } catch (error) {
         logger.error(error)
@@ -212,13 +215,13 @@
         buttons: [
           {
             text: translate("Skip"),
             handler: async (data: any) => {
               this.router.replace({ path: `/tabs/find-groups`})
             }
           },
           {
             text: translate("Add"),
             handler: async (data: any) => {
               this.router.replace({ path: `/manage-facilities/${facilityGroupId}`})
             }
           }
@@ -236,6 +239,7 @@
       this.formData.facilityGroupId.length <= 20
         ? (this as any).$refs.facilityGroupId.$el.classList.add('ion-valid')
         : (this as any).$refs.facilityGroupId.$el.classList.add('ion-invalid');
+      this.isAutoGenerateId = false
     },
     markFacilityGroupIdTouched() {
       (this as any).$refs.facilityGroupId.$el.classList.add('ion-touched');