Fixed: Miscellaneous issues in new facility group UI (#293)

src/components/FacilityGroupDescriptionModal.vue

@@ -16,10 +16,12 @@
         <div slot="label">{{ translate("Name") }} <ion-text color="danger">*</ion-text></div>
       </ion-input>
     </ion-item>
-    <ion-item>
+    <ion-item lines="none">
       <ion-textarea :label="translate('Description')" label-placement="floating"
         :placeholder="translate('group description')"
         :auto-grow="true"
+        :counter="true" 
+        :maxlength="255"
         v-model="facilityGroupDescription"
       >
       </ion-textarea>

src/locales/en.json

@@ -244,6 +244,7 @@
   "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. Use the \"Reject all orders\" option in the fulfillment pages to clear your facilities fulfillment queue. To add a fulfillment capacity to this facility, use the custom option.": "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. Use the \"Reject all orders\" option in the fulfillment pages to clear your facilities fulfillment queue. To add a fulfillment capacity to this facility, use the custom option.",
   "No facilities available to select": "No facilities available to select",
   "No facilities found": "No facilities found",
+  "No facilities selected." : "No facilities selected.",
   "No facility found": "No facility found",
   "No fulfillment capacity": "No fulfillment capacity",
   "No groups found": "No groups found",

src/views/CreateFacilityGroup.vue

@@ -38,7 +38,14 @@
                 </ion-select>
               </ion-item>
               <ion-item lines="none">
-                <ion-input :label="translate('Description')" label-placement="floating" v-model="formData.description"/>
+                <ion-textarea :label="translate('Description')" label-placement="floating"
+                  :placeholder="translate('group description')"
+                  :auto-grow="true"
+                  :counter="true" 
+                  :maxlength="255"
+                  v-model="formData.description"
+                >
+                </ion-textarea>
               </ion-item>
             </ion-list>
           </form>
@@ -72,6 +79,7 @@
   IonSelect,
   IonSelectOption,
   IonText,
+  IonTextarea,
   IonTitle,
   IonToolbar,
   alertController
@@ -105,6 +113,7 @@
     IonSelect,
     IonSelectOption,
     IonText,
+    IonTextarea,
     IonTitle,
     IonToolbar
   },
@@ -190,7 +199,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)
@@ -205,13 +214,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}`})
             }
           }

src/views/FindGroups.vue

@@ -3,7 +3,7 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-title>{{ translate("Groups") }}</ion-title>
-        <ion-segment scrollable v-model="segment" slot="end" @ion-change="resetParentGroupPage()">
+        <ion-segment v-model="segment" slot="end" @ion-change="resetParentGroupPage()">
           <ion-segment-button value="facility-groups" >
             <ion-label>{{ translate("Facility groups") }}</ion-label>
           </ion-segment-button>
@@ -14,7 +14,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()" id="filter-content">
+    <ion-content>
       <template v-if="segment === 'facility-groups'">
         <div class="find">
           <section class="search">
@@ -77,7 +77,7 @@
             <h3>{{ getFacilityGroupTypeDescription(currentFacilityGroupTypeId) }}</h3>
             <ion-list v-if="groups.length">
               <ion-list-header>
-                <ion-label>{{ translate('Selected groups') }} : 10</ion-label>
+                <ion-label>{{ translate('Selected groups') }} : {{ getAssociatedFacilityGroupIds(currentFacilityGroupTypeId).length }}</ion-label>
               </ion-list-header>
               <ion-item v-for="group in groups" :key="group.facilityGroupId">
                 <ion-checkbox label-placement="end" justify="start" :disabled="!!group.facilityGroupTypeId && group.facilityGroupTypeId !== currentFacilityGroupTypeId" :checked="isFacilityGroupLinked(group.facilityGroupTypeId)" @click="updateFacilityGroup($event, group)">
@@ -95,17 +95,6 @@
           </div>
         </div>
       </template>
-      <ion-infinite-scroll
-        @ionInfinite="loadMoreGroups($event)"
-        threshold="100px"
-        v-show="isScrollable"
-        ref="infiniteScrollRef"
-      >
-        <ion-infinite-scroll-content
-          loading-spinner="crescent"
-          :loading-text="translate('Loading')"
-        />
-      </ion-infinite-scroll>
 
       <ion-fab v-if="segment === 'facility-groups'" vertical="bottom" horizontal="end" slot="fixed">
         <ion-fab-button @click="createFacilityGroup()">
@@ -129,8 +118,6 @@ import {
   IonFabButton,
   IonHeader,
   IonIcon,
-  IonInfiniteScroll,
-  IonInfiniteScrollContent,
   IonItem,
   IonLabel,
   IonList,
@@ -172,8 +159,6 @@ export default defineComponent({
     IonFabButton,
     IonHeader,
     IonIcon,
-    IonInfiniteScroll,
-    IonInfiniteScrollContent,
     IonItem,
     IonLabel,
     IonList,
@@ -189,7 +174,6 @@ export default defineComponent({
   data() {
     return {
       segment: "facility-groups",
-      isScrollingEnabled: false,
       currentFacilityGroupTypeId: "",
       isParentGroupDetailAnimationCompleted: false,
       facilityGroupProductStore: {} as any
@@ -207,8 +191,8 @@ export default defineComponent({
     await this.store.dispatch('util/fetchFacilityGroupTypes')
   },
   async ionViewWillEnter() {
+    this.segment = "facility-groups"
     await this.fetchGroups();
-    this.isScrollingEnabled = false;
   },
   methods: {
     resetParentGroupPage() {
@@ -260,39 +244,18 @@ export default defineComponent({
       await this.store.dispatch('facility/updateGroupQuery', this.query)
       this.fetchGroups();
     },
-    async fetchGroups(vSize?: any, vIndex?: any) {
-      const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
-      const viewIndex = vIndex ? vIndex : 0;
-      const payload = {
-        viewSize,
-        viewIndex
-      };
-      await this.store.dispatch('facility/fetchFacilityGroups', payload)
-    },
-    enableScrolling() {
-      const parentElement = (this as any).$refs.contentRef.$el
-      const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']")
-      let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this as any).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight
-      const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height
-      if(distanceFromInfinite < 0) {
-        this.isScrollingEnabled = false;
-      } else {
-        this.isScrollingEnabled = true;
-      }
-    },
-    async loadMoreGroups(event: any) {
-      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
-      if(!(this.isScrollingEnabled && this.isScrollable)) {
-        await event.target.complete();
+    async fetchGroups() {
+      const viewSize = process.env.VUE_APP_VIEW_SIZE;
+      let viewIndex = 0;
+      do {
+        const payload = {
+          viewSize,
+          viewIndex
+        };
+        await this.store.dispatch('facility/fetchFacilityGroups', payload)
+        viewIndex++;
       }
-      this.fetchGroups(
-        undefined,
-        Math.ceil(
-          this.groups?.length / (process.env.VUE_APP_VIEW_SIZE as any)
-        ).toString()
-      ).then(async () => {
-        await event.target.complete();
-      });
+      while (this.isScrollable);
     },
     getAssociatedFacilityGroupIds(facilityGroupTypeId: any) {
       const associatedfacilityGroupIds = [] as any

src/views/ManageFacilities.vue

@@ -54,6 +54,9 @@
               </ion-reorder-group>
             </ion-list> 
           </main>
+          <main v-else>
+            <p class="empty-state"> {{ translate('No facilities selected.') }}</p>
+          </main>
         </div>
 
         <ion-fab vertical="bottom" horizontal="end" slot="fixed">
@@ -133,8 +136,9 @@
       }
     },
     props: ['facilityGroupId'],
-    async mounted() {
+    async ionViewWillEnter() {
       emitter.emit('presentLoader')
+      this.isSavingDetail = false
       await Promise.all([this.fetchFacilities(), this.fetchFacilityGroup()])
       await this.fetchMemberFacilities();
       await this.getFilteredFacilities();

src/views/Parking.vue

@@ -126,7 +126,7 @@ export default defineComponent({
       isScrollable: "facility/isVirtualFacilitiesScrollable",
     })
   },
-  async mounted() {
+  async ionViewWillEnter() {
     await this.fetchArchivedFacilities();
     await this.fetchFacilities();
   },