@ramathibodi/nuxt-commons 4.0.11 → 4.0.13

package/dist/runtime/components/model/iterator.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { computed, nextTick, ref, useAttrs, useSlots, watch } from "vue";
+import { computed, nextTick, ref, markRaw, useAttrs, useSlots, watch } from "vue";
+import { useModelAutoRefresh } from "../../composables/modelAutoRefresh";
 import { VDataIterator } from "vuetify/components/VDataIterator";
 import { VDataTable } from "vuetify/components/VDataTable";
-import { omit } from "lodash-es";
+import { omit, chunk } from "lodash-es";
+import { shouldVirtualize, itemsPerRowForSpan } from "../../utils/virtualize";
 import { useGraphqlModel } from "../../composables/graphqlModel";
 import { useApiModel } from "../../composables/apiModel";
 import { usePerPagePreference } from "../../composables/perPagePreference";
@@ -39,6 +41,15 @@ const props = defineProps({
   api: { type: Boolean, required: false, default: false },
   perPageStorageKey: { type: String, required: false },
   perPageStorageEnabled: { type: Boolean, required: false, default: true },
+  autoRefresh: { type: [Number, Boolean], required: false, default: false },
+  autoRefreshDefault: { type: Number, required: false, default: 60 },
+  autoRefreshControl: { type: Boolean, required: false, default: true },
+  importConcurrency: { type: Number, required: false, default: 3 },
+  virtual: { type: Boolean, required: false, default: void 0 },
+  virtualThreshold: { type: Number, required: false, default: 500 },
+  virtualHeight: { type: [Number, String], required: false, default: "70vh" },
+  virtualItemHeight: { type: Number, required: false, default: 80 },
+  virtualItemsPerRow: { type: Number, required: false, default: void 0 },
   modelName: { type: String, required: true },
   modelKey: { type: String, required: false, default: "id" },
   modelBy: { type: Object, required: false, default: void 0 },
@@ -112,8 +123,24 @@ const {
   deleteItem,
   loadItems,
   reload,
-  isLoading
+  isLoading,
+  importProgress
 } = props.api ? useApiModel(props) : useGraphqlModel(props);
+const { autoRefresh, manualReload } = useModelAutoRefresh(props, {
+  reload,
+  isLoading,
+  isDialogOpen
+});
+const useVirtual = computed(() => shouldVirtualize(items.value.length, props.virtual, props.virtualThreshold));
+const itemsPerRow = computed(() => {
+  if (props.virtualItemsPerRow && props.virtualItemsPerRow > 0) return props.virtualItemsPerRow;
+  const bp = display.name?.value;
+  const span = (bp === "xxl" && props.xxl !== false ? props.xxl : void 0) ?? (["xxl", "xl"].includes(bp) && props.xl !== false ? props.xl : void 0) ?? (["xxl", "xl", "lg"].includes(bp) && props.lg !== false ? props.lg : void 0) ?? (["xxl", "xl", "lg", "md"].includes(bp) && props.md !== false ? props.md : void 0) ?? (["xxl", "xl", "lg", "md", "sm"].includes(bp) && props.sm !== false ? props.sm : void 0) ?? props.cols;
+  return itemsPerRowForSpan(span);
+});
+function chunkRows(slotItems) {
+  return chunk([...slotItems ?? []], itemsPerRow.value);
+}
 function openDialog(item) {
   currentItem.value = item;
   nextTick(() => {
@@ -158,7 +185,7 @@ watch(
   },
   { immediate: true }
 );
-const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete });
+const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete, autoRefresh: markRaw(autoRefresh) });
 const computedInitialData = computed(() => {
   return Object.assign({}, props.initialData, props.modelBy);
 });
@@ -169,7 +196,7 @@ const computedSkeletonPerPage = computed(() => {
 watch(() => props.search, () => {
   search.value = props.search;
 }, { immediate: true });
-defineExpose({ reload, operation });
+defineExpose({ reload, operation, autoRefresh, importProgress });
 </script>
 
 <template>
@@ -182,13 +209,14 @@ defineExpose({ reload, operation });
       :item-value="modelKey"
       :search="search"
       :loading="isLoading"
+      :transition="false"
     >
       <template #default="defaultProps" v-if="viewType.includes('iterator')">
         <slot
           v-bind="defaultProps"
           :operation="operation"
         >
-          <v-container fluid>
+          <v-container fluid v-if="!useVirtual">
             <v-row>
               <v-col
                 v-for="(item, index) in defaultProps.items"
@@ -208,6 +236,38 @@ defineExpose({ reload, operation });
               </v-col>
             </v-row>
           </v-container>
+          <v-virtual-scroll
+            v-else
+            :items="chunkRows(defaultProps.items)"
+            :item-height="props.virtualItemHeight"
+            :height="props.virtualHeight"
+          >
+            <template #default="{ item: rowItems }">
+              <!-- pt-0 pb-6: reproduce the grid's 24px row gap as bottom padding so the
+                   measured virtual-row height includes it and VVirtualScroll spaces rows
+                   the same as the non-virtual <v-row gap="24"> grid. -->
+              <v-container fluid class="pt-0 pb-6">
+                <v-row>
+                  <v-col
+                    v-for="(item, index) in rowItems"
+                    :key="index"
+                    :cols="cols"
+                    :sm="sm"
+                    :md="md"
+                    :lg="lg"
+                    :xl="xl"
+                    :xxl="xxl"
+                  >
+                    <slot
+                      name="item"
+                      :item="item"
+                      :operation="operation"
+                    />
+                  </v-col>
+                </v-row>
+              </v-container>
+            </template>
+          </v-virtual-scroll>
         </slot>
       </template>
       <template #loader="loaderProps" v-if="viewType.includes('iterator')">
@@ -256,16 +316,26 @@ defineExpose({ reload, operation });
                 <VToolbarTitle class="pl-3">
                   <slot
                     name="title"
-                    :reload="reload"
+                    :reload="manualReload"
                   >
                     {{ title }}
                     <v-icon
                       size="small"
-                      @click="reload"
+                      @click="manualReload"
                     >
                       mdi mdi-refresh
                     </v-icon>
                   </slot>
+                  <slot
+                    name="autoRefreshControl"
+                    v-bind="autoRefresh"
+                  >
+                    <ModelAutoRefreshChip
+                      v-if="props.autoRefreshControl"
+                      :control="autoRefresh"
+                      :color="toolbarColor"
+                    />
+                  </slot>
                 </VToolbarTitle>
               </v-col>
               <v-col cols="5">
@@ -320,7 +390,7 @@ defineExpose({ reload, operation });
         </slot>
         <template v-if="viewType.includes('table')">
           <v-data-table-server
-              v-if="canServerPageable"
+              v-if="canServerPageable && !useVirtual"
               v-bind="plainAttrs"
               color="primary"
               :items="items"
@@ -362,6 +432,49 @@ defineExpose({ reload, operation });
               />
             </template>
           </v-data-table-server>
+          <v-data-table-virtual
+              v-else-if="useVirtual"
+              v-bind="plainAttrs"
+              color="primary"
+              :items="items"
+              :item-value="props.modelKey"
+              :search="search"
+              :loading="isLoading"
+              :height="props.virtualHeight"
+              fixed-header
+          >
+            <!-- @ts-ignore -->
+            <template
+                v-for="(_, name, index) in tableSlots"
+                :key="index"
+                #[name]="slotData"
+            >
+              <slot
+                  :name="name"
+                  v-bind="slotData || {}"
+                  :operation="operation"
+              />
+            </template>
+            <template
+                v-if="!$slots['item.action']"
+                #item.action="{ item }"
+            >
+              <v-btn
+                  v-if="canUpdate"
+                  variant="flat"
+                  density="compact"
+                  icon="mdi mdi-note-edit"
+                  @click="openDialog(item)"
+              />
+              <v-btn
+                  v-if="canDelete"
+                  variant="flat"
+                  density="compact"
+                  icon="mdi mdi-delete"
+                  @click="deleteItem(item)"
+              />
+            </template>
+          </v-data-table-virtual>
           <v-data-table
               v-else
               v-bind="plainAttrs"
@@ -467,5 +580,23 @@ defineExpose({ reload, operation });
         />
       </template>
     </FormDialog>
+    <slot
+      name="importProgress"
+      :is-importing="importProgress.isImporting.value"
+      :total="importProgress.total.value"
+      :processed="importProgress.processed.value"
+      :succeeded="importProgress.succeeded.value"
+      :failed="importProgress.failed.value"
+      :percent="importProgress.percent.value"
+    >
+      <DialogImportProgress
+        :model-value="importProgress.isImporting.value"
+        :total="importProgress.total.value"
+        :processed="importProgress.processed.value"
+        :succeeded="importProgress.succeeded.value"
+        :failed="importProgress.failed.value"
+        :percent="importProgress.percent.value"
+      />
+    </slot>
   </v-card>
 </template>