@ramathibodi/nuxt-commons 4.0.10 → 4.0.12

package/dist/runtime/components/model/Table.d.vue.ts

@@ -23,6 +23,9 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
     api?: boolean;
     perPageStorageKey?: string;
     perPageStorageEnabled?: boolean;
+    autoRefresh?: number | boolean;
+    autoRefreshDefault?: number;
+    autoRefreshControl?: boolean;
 }
 /**
  * Public props accepted by ModelTable.
@@ -36,12 +39,12 @@ declare var __VLS_8: {
     operation: {
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
-        createItem: (item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        reload: (() => Promise<void> | undefined) | (() => Promise<void>);
+        setSearch: ((keyword: string) => void) | ((keyword: string) => void);
         canServerPageable: boolean;
         canServerSearch: boolean;
         canCreate: boolean;
@@ -50,20 +53,31 @@ declare var __VLS_8: {
         canEditRow: (item: Record<string, any>) => boolean;
         onlyOwnerEdit: boolean;
         onlyOwnerOverridePermission: string | string[] | undefined;
+        autoRefresh: import("vue").Raw<import("#imports").UseAutoRefreshHandle>;
     };
 }, __VLS_34: {
     reload: () => void;
-}, __VLS_50: {
+}, __VLS_44: {
+    enabled: import("vue").ComputedRef<boolean>;
+    isActive: import("vue").ComputedRef<boolean>;
+    isLoading: import("vue").ComputedRef<boolean>;
+    intervalSeconds: import("vue").ComputedRef<number>;
+    remainingSeconds: import("vue").Ref<number>;
+    isUserPaused: import("vue").Ref<boolean>;
+    togglePause: () => void;
+    reset: () => void;
+    reload: () => void | Promise<void>;
+}, __VLS_57: {
     items: Record<string, any>[];
     operation: {
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
-        createItem: (item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        reload: (() => Promise<void> | undefined) | (() => Promise<void>);
+        setSearch: ((keyword: string) => void) | ((keyword: string) => void);
         canServerPageable: boolean;
         canServerSearch: boolean;
         canCreate: boolean;
@@ -72,18 +86,19 @@ declare var __VLS_8: {
         canEditRow: (item: Record<string, any>) => boolean;
         onlyOwnerEdit: boolean;
         onlyOwnerOverridePermission: string | string[] | undefined;
+        autoRefresh: import("vue").Raw<import("#imports").UseAutoRefreshHandle>;
     };
-}, __VLS_63: {
+}, __VLS_70: {
     items: Record<string, any>[];
     operation: {
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
-        createItem: (item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        reload: (() => Promise<void> | undefined) | (() => Promise<void>);
+        setSearch: ((keyword: string) => void) | ((keyword: string) => void);
         canServerPageable: boolean;
         canServerSearch: boolean;
         canCreate: boolean;
@@ -92,17 +107,18 @@ declare var __VLS_8: {
         canEditRow: (item: Record<string, any>) => boolean;
         onlyOwnerEdit: boolean;
         onlyOwnerOverridePermission: string | string[] | undefined;
+        autoRefresh: import("vue").Raw<import("#imports").UseAutoRefreshHandle>;
     };
-}, __VLS_95: never, __VLS_96: {
+}, __VLS_102: never, __VLS_103: {
     operation: {
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
-        createItem: (item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        reload: (() => Promise<void> | undefined) | (() => Promise<void>);
+        setSearch: ((keyword: string) => void) | ((keyword: string) => void);
         canServerPageable: boolean;
         canServerSearch: boolean;
         canCreate: boolean;
@@ -111,17 +127,18 @@ declare var __VLS_8: {
         canEditRow: (item: Record<string, any>) => boolean;
         onlyOwnerEdit: boolean;
         onlyOwnerOverridePermission: string | string[] | undefined;
+        autoRefresh: import("vue").Raw<import("#imports").UseAutoRefreshHandle>;
     };
-}, __VLS_128: never, __VLS_129: {
+}, __VLS_135: never, __VLS_136: {
     operation: {
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
-        createItem: (item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        reload: (() => Promise<void> | undefined) | (() => Promise<void>);
+        setSearch: ((keyword: string) => void) | ((keyword: string) => void);
         canServerPageable: boolean;
         canServerSearch: boolean;
         canCreate: boolean;
@@ -130,26 +147,29 @@ declare var __VLS_8: {
         canEditRow: (item: Record<string, any>) => boolean;
         onlyOwnerEdit: boolean;
         onlyOwnerOverridePermission: string | string[] | undefined;
+        autoRefresh: import("vue").Raw<import("#imports").UseAutoRefreshHandle>;
     };
-}, __VLS_164: any, __VLS_167: any, __VLS_170: any;
+}, __VLS_171: any, __VLS_174: any, __VLS_177: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_95>]?: (props: typeof __VLS_96) => any;
+    [K in NonNullable<typeof __VLS_102>]?: (props: typeof __VLS_103) => any;
 } & {
-    [K in NonNullable<typeof __VLS_128>]?: (props: typeof __VLS_129) => any;
+    [K in NonNullable<typeof __VLS_135>]?: (props: typeof __VLS_136) => any;
 } & {
     header?: (props: typeof __VLS_8) => any;
 } & {
     title?: (props: typeof __VLS_34) => any;
 } & {
-    search?: (props: typeof __VLS_50) => any;
+    autoRefreshControl?: (props: typeof __VLS_44) => any;
 } & {
-    toolbarItems?: (props: typeof __VLS_63) => any;
+    search?: (props: typeof __VLS_57) => any;
 } & {
-    form?: (props: typeof __VLS_164) => any;
+    toolbarItems?: (props: typeof __VLS_70) => any;
 } & {
-    formTitle?: (props: typeof __VLS_167) => any;
+    form?: (props: typeof __VLS_171) => any;
 } & {
-    formAction?: (props: typeof __VLS_170) => any;
+    formTitle?: (props: typeof __VLS_174) => any;
+} & {
+    formAction?: (props: typeof __VLS_177) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
     noDataText: string;
@@ -167,17 +187,20 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onlyOwnerEdit: boolean;
     api: boolean;
     perPageStorageEnabled: boolean;
+    autoRefresh: boolean;
+    autoRefreshDefault: number;
+    autoRefreshControl: boolean;
 }>>, {
-    reload: () => void;
+    reload: (() => Promise<void> | undefined) | (() => Promise<void>);
     operation: import("vue").Ref<{
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
-        createItem: (item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        reload: (() => Promise<void> | undefined) | (() => Promise<void>);
+        setSearch: ((keyword: string) => void) | ((keyword: string) => void);
         canServerPageable: boolean;
         canServerSearch: boolean;
         canCreate: boolean;
@@ -186,15 +209,16 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         canEditRow: (item: Record<string, any>) => boolean;
         onlyOwnerEdit: boolean;
         onlyOwnerOverridePermission: string | string[] | undefined;
+        autoRefresh: import("vue").Raw<import("#imports").UseAutoRefreshHandle>;
     }, {
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
-        createItem: (item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        reload: (() => Promise<void> | undefined) | (() => Promise<void>);
+        setSearch: ((keyword: string) => void) | ((keyword: string) => void);
         canServerPageable: import("vue").ComputedRef<boolean>;
         canServerSearch: import("vue").ComputedRef<boolean>;
         canCreate: import("vue").ComputedRef<boolean>;
@@ -203,15 +227,16 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         canEditRow: (item: Record<string, any>) => boolean;
         onlyOwnerEdit: boolean;
         onlyOwnerOverridePermission: string | string[] | undefined;
+        autoRefresh: import("vue").Raw<import("#imports").UseAutoRefreshHandle>;
     } | {
         openDialog: typeof openDialog;
         openDialogReadonly: typeof openDialogReadonly;
-        createItem: (item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>;
-        importItems: (importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void;
-        updateItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>;
-        reload: () => void;
-        setSearch: (keyword: string) => void;
+        createItem: ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback, importing?: boolean) => Promise<any>);
+        importItems: ((importItems: Record<string, any>[], callback?: FormDialogCallback) => void) | ((importItemsList: Record<string, any>[], callback?: FormDialogCallback) => void);
+        updateItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<void>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        deleteItem: ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>) | ((item: Record<string, any>, callback?: FormDialogCallback) => Promise<any>);
+        reload: (() => Promise<void> | undefined) | (() => Promise<void>);
+        setSearch: ((keyword: string) => void) | ((keyword: string) => void);
         canServerPageable: boolean;
         canServerSearch: boolean;
         canCreate: boolean;
@@ -220,8 +245,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         canEditRow: (item: Record<string, any>) => boolean;
         onlyOwnerEdit: boolean;
         onlyOwnerOverridePermission: string | string[] | undefined;
+        autoRefresh: import("vue").Raw<import("#imports").UseAutoRefreshHandle>;
     }>;
     items: import("vue").Ref<Record<string, any>[], Record<string, any>[]>;
+    autoRefresh: import("#imports").UseAutoRefreshHandle;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (...args: any[]) => void;
     create: (...args: any[]) => void;
@@ -244,6 +271,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onlyOwnerEdit: boolean;
     api: boolean;
     perPageStorageEnabled: boolean;
+    autoRefresh: boolean;
+    autoRefreshDefault: number;
+    autoRefreshControl: boolean;
 }>>> & Readonly<{
     onDelete?: ((...args: any[]) => any) | undefined;
     onCreate?: ((...args: any[]) => any) | undefined;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, watch, nextTick, ref, useAttrs } from "vue";
+import { computed, watch, nextTick, ref, markRaw, useAttrs } from "vue";
 import { VDataTable } from "vuetify/components/VDataTable";
 import { clone } from "lodash-es";
 import { useGraphqlModel } from "../../composables/graphqlModel";
@@ -7,6 +7,7 @@ import { useApiModel } from "../../composables/apiModel";
 import { usePerPagePreference } from "../../composables/perPagePreference";
 import { useDialog } from "../../composables/dialog";
 import { useUserPermission } from "../../composables/userPermission";
+import { useModelAutoRefresh } from "../../composables/modelAutoRefresh";
 import { useState } from "#imports";
 defineOptions({
   inheritAttrs: false
@@ -33,6 +34,9 @@ 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 },
   modelName: { type: String, required: true },
   modelKey: { type: String, required: false, default: "id" },
   modelBy: { type: Object, required: false, default: void 0 },
@@ -83,6 +87,11 @@ const {
   reload,
   isLoading
 } = props.api ? useApiModel(props) : useGraphqlModel(props);
+const { autoRefresh, manualReload } = useModelAutoRefresh(props, {
+  reload,
+  isLoading,
+  isDialogOpen
+});
 function openDialog(item) {
   isDialogReadonly.value = false;
   currentItem.value = item;
@@ -126,14 +135,14 @@ const canEditRow = function(item) {
   }
   return true;
 };
-const operation = ref({ openDialog, openDialogReadonly, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete, canEditRow, onlyOwnerEdit: props.onlyOwnerEdit, onlyOwnerOverridePermission: props.onlyOwnerOverridePermission });
+const operation = ref({ openDialog, openDialogReadonly, createItem, importItems, updateItem, deleteItem, reload, setSearch, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete, canEditRow, onlyOwnerEdit: props.onlyOwnerEdit, onlyOwnerOverridePermission: props.onlyOwnerOverridePermission, autoRefresh: markRaw(autoRefresh) });
 const computedInitialData = computed(() => {
   return Object.assign({}, props.initialData, props.modelBy);
 });
 watch(() => props.search, () => {
   search.value = props.search;
 }, { immediate: true });
-defineExpose({ reload, operation, items });
+defineExpose({ reload, operation, items, autoRefresh });
 </script>
 
 <template>
@@ -155,16 +164,26 @@ defineExpose({ reload, operation, items });
             <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">