Calculate and set UsersTable min height to prevent constant shrinking when loading

Author: LianaHarris360

kolibri/plugins/facility/assets/src/views/users/common/UsersTable.vue

@@ -70,6 +70,7 @@
         :rows="tableRows"
         :dataLoading="dataLoading"
         :emptyMessage="getEmptyMessageForItems(facilityUsers)"
+        :style="{ minHeight: tableMinHeight + 'px' }"
         sortable
         disableBuiltinSorting
         @changeSort="changeSortHandler"
@@ -189,7 +190,7 @@
   import store from 'kolibri/store';
   import cloneDeep from 'lodash/cloneDeep';
   import useNow from 'kolibri/composables/useNow';
-  import { toRefs, ref, computed, onBeforeUnmount, getCurrentInstance } from 'vue';
+  import { toRefs, ref, computed, onBeforeUnmount, onBeforeUpdate, getCurrentInstance } from 'vue';
   import { useRoute, useRouter } from 'vue-router/composables';
   import pickBy from 'lodash/pickBy';
   import debounce from 'lodash/debounce';
@@ -206,6 +207,7 @@
   import PaginatedListContainerWithBackend from 'kolibri-common/components/PaginatedListContainerWithBackend';
   import useUser from 'kolibri/composables/useUser';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import useKResponsiveElement from 'kolibri-design-system/lib/composables/useKResponsiveElement';
   import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
 
   import { Modals } from '../../../constants';
@@ -245,6 +247,8 @@
       const modalShown = ref(null);
       const userToChange = ref(null);
       const filterTextboxRef = ref(null);
+      const tableMinHeight = ref(200);
+      const { elementHeight } = useKResponsiveElement();
 
       const { selectAllLabel$ } = enhancedQuizManagementStrings;
       const {
@@ -611,6 +615,21 @@
         }
       };
 
+      const getTableHeight = () => {
+        if (elementHeight.value && facilityUsers.value) {
+          // Set min-height to elementHeight if there are enough users to scroll the table
+          if (facilityUsers.value.length > 10) {
+            tableMinHeight.value = elementHeight.value - 100; // minus 100 to prevent inner scrollbar from appearing
+          } else {
+            tableMinHeight.value = 200;
+          }
+        }
+      };
+
+      onBeforeUpdate(() => {
+        getTableHeight();
+      });
+
       onBeforeUnmount(() => {
         const { query } = route;
         if (query.ordering || query.order || query.page) {
@@ -647,6 +666,7 @@
         userToChangeSet,
         filterTextboxRef,
         stickyColumns,
+        tableMinHeight,
 
         // Methods
         handleSelectAllToggle,
@@ -770,4 +790,13 @@
     min-height: 0;
   }
 
+  // Vertically center KCircularLoader within the table
+  /deep/ .k-table-wrapper > p {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: 0;
+    transform: translate(-50%, -50%);
+  }
+
 </style>