Merge pull request #300 from hotwax/#293_manage_facilities

Fixed: Miscellaneous issues in new facility group UI (#293)
hotwax · Aug 23, 2024 · 3767bf6 · 3767bf6
2 parents 8a8b731 + 9400ebb
commit 3767bf6
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 56 deletions.
diff --git a/src/components/FacilityGroupDescriptionModal.vue b/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>

diff --git a/src/locales/en.json b/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",

diff --git a/src/views/CreateFacilityGroup.vue b/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 @@ import {
   IonSelect,
   IonSelectOption,
   IonText,
+  IonTextarea,
   IonTitle,
   IonToolbar,
   alertController
@@ -105,6 +113,7 @@ export default defineComponent({
     IonSelect,
     IonSelectOption,
     IonText,
+    IonTextarea,
     IonTitle,
     IonToolbar
   },

diff --git a/src/views/FindGroups.vue b/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

diff --git a/src/views/ManageFacilities.vue b/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();

diff --git a/src/views/Parking.vue b/src/views/Parking.vue
@@ -126,7 +126,7 @@ export default defineComponent({
       isScrollable: "facility/isVirtualFacilitiesScrollable",
     })
   },
-  async mounted() {
+  async ionViewWillEnter() {
     await this.fetchArchivedFacilities();
     await this.fetchFacilities();
   },