@ramathibodi/nuxt-commons 0.1.73 → 0.1.75

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

@@ -1,358 +1,370 @@
-<script lang="ts" setup>
-import {computed,watch, nextTick, ref, useAttrs} from 'vue'
-import {VDataTable} from 'vuetify/components/VDataTable'
-import {clone} from 'lodash-es'
-import {useGraphqlModel} from '../../composables/graphqlModel'
-import {useDialog} from "../../composables/dialog"
-import {useUserPermission} from "../../composables/userPermission"
-import type {GraphqlModelProps} from '../../composables/graphqlModel'
-import type {FormDialogCallback} from "../../types/formDialog";
-import {type AuthenticationState, useState} from "#imports";
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
-  title: string
-  noDataText?: string
-  dialogWidth?: string | number
-  dialogMaxWidth?: string | number
-  dialogHeight?: string | number
-  dialogMaxHeight?: string | number
-  dialogFullscreen?: boolean
-  initialData?: Record<string, any>
-  toolbarColor?: string
-  importable?: boolean
-  exportable?: boolean
-  insertable?: boolean
-  searchable?: boolean
-  search?: string
-  saveAndStay?: boolean
-  stringFields?: Array<string>
-  onlyOwnerEdit?: boolean
-  onlyOwnerOverridePermission?: string | string[]
-}
-
-const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
-  noDataText: 'ไม่พบข้อมูล',
-  dialogFullscreen: false,
-  toolbarColor: 'primary',
-  importable: true,
-  exportable: true,
-  insertable: true,
-  searchable: true,
-  saveAndStay: false,
-  modelKey: 'id',
-  modelBy: undefined,
-  fields: () => [],
-  stringFields: ()=>[],
-  onlyOwnerEdit: false,
-})
-
-const emit = defineEmits(['open:dialog','close:dialog','create','update','delete'])
-const attrs = useAttrs()
-const plainAttrs = computed(() => {
-  const returnAttrs = clone(attrs)
-  if (props.headers) returnAttrs['headers'] = props.headers
-  return returnAttrs
-})
-
-const authenState = useState<AuthenticationState>("authentication")
-const currentUsername = computed(()=>{
-  let userProfile =  authenState.value?.userProfile as {username: string}
-  return userProfile?.username ?? ""
-})
-
-const currentItem = ref<Record<string, any> | undefined>(undefined)
-const isDialogOpen = ref<boolean>(false)
-const isDialogReadonly = ref<boolean>(false)
-
-const { items, itemsLength,
-  search,setSearch,
-  canServerPageable, canServerSearch, canCreate, canUpdate, canDelete,
-  createItem, importItems, updateItem, deleteItem,
-  loadItems, reload,
-  isLoading } = useGraphqlModel(props)
-
-function openDialog(item?: object) {
-  isDialogReadonly.value = false
-  currentItem.value = item
-  nextTick(() => {
-    isDialogOpen.value = true
-    emit('open:dialog' , item)
-  })
-}
-
-function openDialogReadonly(item?: object) {
-  isDialogReadonly.value = true
-  currentItem.value = item
-  nextTick(() => {
-    isDialogOpen.value = true
-    emit('open:dialog' , item)
-  })
-}
-
-async function confirmDeleteItem(item: Record<string, any>, callback?: FormDialogCallback) {
-  let confirm = await useDialog().confirm({message: "Do you want to delete record?"})
-  if (confirm) onDeleteItem(item,callback)
-}
-
-const onCreateItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
-  createItem(item,callback).then(()=>{
-    emit("create",item,callback)
-  })
-}
-
-const onUpdateItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
-  updateItem(item,callback).then(()=>{
-    emit("update",item,callback)
-  })
-}
-
-const onDeleteItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
-  deleteItem(item,callback).then(()=>{
-    emit("delete",item,callback)
-  })
-}
-
-const canEditRow = function (item: Record<string, any>) {
-  if (props.onlyOwnerEdit) {
-    if (item?.userstampField?.createdBy && item?.userstampField?.createdBy==currentUsername.value) return true
-    if (!!props.onlyOwnerOverridePermission && useUserPermission().check(props.onlyOwnerOverridePermission)) return true
-    return !item?.userstampField?.createdBy
-  }
-  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 computedInitialData = computed(() => {
-  return Object.assign({}, props.initialData, props.modelBy)
-})
-
-watch(()=>props.search,()=>{
-  search.value = props.search
-},{immediate:true})
-
-defineExpose({ reload,operation,items })
-</script>
-
-<template>
-  <v-card>
-    <slot
-      name="header"
-      :items="items"
-      :operation="operation"
-    >
-      <VToolbar :color="toolbarColor">
-        <v-row
-          justify="end"
-          class="ma-1"
-          dense
-          no-gutters
-          align="center"
-        >
-          <v-col cols="7">
-            <VToolbarTitle class="pl-3">
-              <slot
-                name="title"
-                :reload="reload"
-              >
-                {{ title }}
-                <v-icon
-                  size="small"
-                  @click="reload"
-                >
-                  mdi mdi-refresh
-                </v-icon>
-              </slot>
-            </VToolbarTitle>
-          </v-col>
-          <v-col cols="5">
-            <slot name="search" :items="items" :operation="operation" v-if="props.searchable">
-              <VTextField
-                v-model="search"
-                class="justify-end w-100"
-                density="compact"
-                hide-details
-                placeholder="ค้นหา"
-                clearable
-                variant="solo"
-              />
-            </slot>
-          </v-col>
-        </v-row>
-
-        <VToolbarItems>
-          <slot name="toolbarItems" :items="items" :operation="operation"/>
-          <ImportCSV
-            v-if="props.importable && canCreate && props.insertable"
-            icon="mdi mdi-file-upload"
-            variant="flat"
-            :color="toolbarColor"
-            :stringFields="props.stringFields"
-            @import="importItems"
-          />
-          <ExportCSV
-            v-if="props.exportable && items.length"
-            icon="mdi mdi-file-download"
-            variant="flat"
-            :file-name="title"
-            :model-value="items"
-            :color="toolbarColor"
-            :stringFields="props.stringFields"
-          />
-          <VBtn
-            v-if="canCreate && props.insertable"
-            :color="toolbarColor"
-            prepend-icon="mdi mdi-plus"
-            variant="flat"
-            @click="openDialog()"
-          >
-            add
-          </VBtn>
-        </VToolbarItems>
-      </VToolbar>
-    </slot>
-    <v-data-table-server
-      v-if="canServerPageable"
-      v-bind="plainAttrs"
-      color="primary"
-      :items="items"
-      :items-length="itemsLength"
-      :item-value="props.modelKey"
-      :search="search"
-      :loading="isLoading"
-      @update:options="loadItems"
-    >
-      <!-- @ts-ignore -->
-      <template
-        v-for="(_, name, index) in ($slots as {})"
-        :key="index"
-        #[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="((slotData || {}) as object)"
-          :operation="operation"
-        />
-      </template>
-      <template
-        v-if="!$slots['item.action']"
-        #item.action="{ item }"
-      >
-        <v-btn
-            v-if="!canUpdate || !canEditRow(item)"
-            variant="flat"
-            density="compact"
-            icon="mdi mdi-note-search"
-            @click="openDialogReadonly(item)"
-        />
-        <v-btn
-          v-if="canUpdate && canEditRow(item)"
-          variant="flat"
-          density="compact"
-          icon="mdi mdi-note-edit"
-          @click="openDialog(item)"
-        />
-        <v-btn
-          v-if="canDelete && canEditRow(item)"
-          variant="flat"
-          density="compact"
-          icon="mdi mdi-delete"
-          @click="confirmDeleteItem(item)"
-        />
-      </template>
-    </v-data-table-server>
-    <v-data-table
-      v-else
-      v-bind="plainAttrs"
-      color="primary"
-      :items="items"
-      :item-value="props.modelKey"
-      :search="search"
-      :loading="isLoading"
-    >
-      <!-- @ts-ignore -->
-      <template
-        v-for="(_, name, index) in ($slots as {})"
-        :key="index"
-        #[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="((slotData || {}) as object)"
-          :operation="operation"
-        />
-      </template>
-      <template
-        v-if="!$slots['item.action']"
-        #item.action="{ item }"
-      >
-        <v-btn
-            v-if="!canUpdate || !canEditRow(item)"
-            variant="flat"
-            density="compact"
-            icon="mdi mdi-note-search"
-            @click="openDialogReadonly(item)"
-        />
-        <v-btn
-            v-if="canUpdate && canEditRow(item)"
-            variant="flat"
-            density="compact"
-            icon="mdi mdi-note-edit"
-            @click="openDialog(item)"
-        />
-        <v-btn
-            v-if="canDelete && canEditRow(item)"
-            variant="flat"
-            density="compact"
-            icon="mdi mdi-delete"
-            @click="confirmDeleteItem(item)"
-        />
-      </template>
-    </v-data-table>
-    <FormDialog
-      v-model="isDialogOpen"
-      :title="title"
-      :fullscreen="dialogFullscreen"
-      :initial-data="computedInitialData"
-      :form-data="currentItem"
-      @create="onCreateItem"
-      @update="onUpdateItem"
-      @afterLeave="emit('close:dialog')"
-      :saveAndStay="saveAndStay"
-      :readonly="isDialogReadonly"
-      :width="dialogWidth"
-      :height="dialogHeight"
-      :max-width="dialogMaxWidth"
-      :max-height="dialogMaxHeight"
-    >
-      <template #default="slotData">
-        <slot
-          name="form"
-          :tableItems="items"
-          :tableOperation="operation"
-          v-bind="slotData"
-        />
-      </template>
-      <template #title="slotData">
-        <slot
-            name="formTitle"
-            :tableItems="items"
-            :tableOperation="operation"
-            v-bind="slotData"
-        />
-      </template>
-      <template #action="slotData">
-        <slot
-            name="formAction"
-            :tableItems="items"
-            :tableOperation="operation"
-            v-bind="slotData"
-        />
-      </template>
-    </FormDialog>
-  </v-card>
-</template>
+<script lang="ts" setup>
+/**
+ * ModelTable connects model metadata to reusable selection, labeling, iterator, or table UI patterns.
+ * This doc block is consumed by vue-docgen for generated API documentation.
+ */
+import {computed,watch, nextTick, ref, useAttrs} from 'vue'
+import {VDataTable} from 'vuetify/components/VDataTable'
+import {clone} from 'lodash-es'
+import {useGraphqlModel} from '../../composables/graphqlModel'
+import {useDialog} from "../../composables/dialog"
+import {useUserPermission} from "../../composables/userPermission"
+import type {GraphqlModelProps} from '../../composables/graphqlModel'
+import type {FormDialogCallback} from "../../types/formDialog";
+import {type AuthenticationState, useState} from "#imports";
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
+  title: string // Toolbar title and default export filename for this model table.
+  noDataText?: string // Message shown when query returns no rows.
+  dialogWidth?: string | number // Width passed to create/edit model dialog.
+  dialogMaxWidth?: string | number // Max-width cap for model dialog on large displays.
+  dialogHeight?: string | number // Height passed to create/edit model dialog.
+  dialogMaxHeight?: string | number // Max-height cap for model dialog before internal scrolling.
+  dialogFullscreen?: boolean // Opens model dialog fullscreen by default.
+  initialData?: Record<string, any> // Base values merged into create payload before dialog submission.
+  toolbarColor?: string // Color used by toolbar and built-in action buttons.
+  importable?: boolean // Enables CSV/XLS import action (requires create permission).
+  exportable?: boolean // Enables export action for currently loaded model items.
+  insertable?: boolean // Shows Add button and allows create flow.
+  searchable?: boolean // Shows search input and forwards keyword into GraphQL model search state.
+  search?: string // External search keyword; watcher keeps internal model search in sync.
+  saveAndStay?: boolean // Forwards to dialog form to keep modal open after successful save.
+  stringFields?: Array<string> // Field paths that must remain plain strings during import/export transforms.
+  onlyOwnerEdit?: boolean // When true, edit/delete are allowed only for rows created by current user.
+  onlyOwnerOverridePermission?: string | string[] // Permission key(s) that bypass `onlyOwnerEdit` restriction.
+}
+
+/**
+ * Public props accepted by ModelTable.
+ * Document each prop field with intent, defaults, and side effects for clear generated docs.
+ */
+const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
+  noDataText: 'ไม่พบข้อมูล',
+  dialogFullscreen: false,
+  toolbarColor: 'primary',
+  importable: true,
+  exportable: true,
+  insertable: true,
+  searchable: true,
+  saveAndStay: false,
+  modelKey: 'id',
+  modelBy: undefined,
+  fields: () => [],
+  stringFields: ()=>[],
+  onlyOwnerEdit: false,
+})
+
+/**
+ * Custom events emitted by ModelTable.
+ * Parents can listen to these events to react to user actions and internal state changes.
+ */
+const emit = defineEmits(['open:dialog','close:dialog','create','update','delete'])
+const attrs = useAttrs()
+const plainAttrs = computed(() => {
+  const returnAttrs = clone(attrs)
+  if (props.headers) returnAttrs['headers'] = props.headers
+  return returnAttrs
+})
+
+const authenState = useState<AuthenticationState>("authentication")
+const currentUsername = computed(()=>{
+  let userProfile =  authenState.value?.userProfile as {username: string}
+  return userProfile?.username ?? ""
+})
+
+const currentItem = ref<Record<string, any> | undefined>(undefined)
+const isDialogOpen = ref<boolean>(false)
+const isDialogReadonly = ref<boolean>(false)
+
+const { items, itemsLength,
+  search,setSearch,
+  canServerPageable, canServerSearch, canCreate, canUpdate, canDelete,
+  createItem, importItems, updateItem, deleteItem,
+  loadItems, reload,
+  isLoading } = useGraphqlModel(props)
+
+function openDialog(item?: object) {
+  isDialogReadonly.value = false
+  currentItem.value = item
+  nextTick(() => {
+    isDialogOpen.value = true
+    emit('open:dialog' , item)
+  })
+}
+
+function openDialogReadonly(item?: object) {
+  isDialogReadonly.value = true
+  currentItem.value = item
+  nextTick(() => {
+    isDialogOpen.value = true
+    emit('open:dialog' , item)
+  })
+}
+
+async function confirmDeleteItem(item: Record<string, any>, callback?: FormDialogCallback) {
+  let confirm = await useDialog().confirm({message: "Do you want to delete record?"})
+  if (confirm) onDeleteItem(item,callback)
+}
+
+const onCreateItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
+  createItem(item,callback).then(()=>{
+    emit("create",item,callback)
+  })
+}
+
+const onUpdateItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
+  updateItem(item,callback).then(()=>{
+    emit("update",item,callback)
+  })
+}
+
+const onDeleteItem = (item: Record<string, any>,callback?: FormDialogCallback)=>{
+  deleteItem(item,callback).then(()=>{
+    emit("delete",item,callback)
+  })
+}
+
+const canEditRow = function (item: Record<string, any>) {
+  if (props.onlyOwnerEdit) {
+    if (item?.userstampField?.createdBy && item?.userstampField?.createdBy==currentUsername.value) return true
+    if (!!props.onlyOwnerOverridePermission && useUserPermission().check(props.onlyOwnerOverridePermission)) return true
+    return !item?.userstampField?.createdBy
+  }
+  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 computedInitialData = computed(() => {
+  return Object.assign({}, props.initialData, props.modelBy)
+})
+
+watch(()=>props.search,()=>{
+  search.value = props.search
+},{immediate:true})
+
+defineExpose({ reload,operation,items })
+</script>
+
+<template>
+  <v-card>
+    <slot
+      name="header"
+      :items="items"
+      :operation="operation"
+    >
+      <VToolbar :color="toolbarColor">
+        <v-row
+          justify="end"
+          class="ma-1"
+          dense
+          no-gutters
+          align="center"
+        >
+          <v-col cols="7">
+            <VToolbarTitle class="pl-3">
+              <slot
+                name="title"
+                :reload="reload"
+              >
+                {{ title }}
+                <v-icon
+                  size="small"
+                  @click="reload"
+                >
+                  mdi mdi-refresh
+                </v-icon>
+              </slot>
+            </VToolbarTitle>
+          </v-col>
+          <v-col cols="5">
+            <slot name="search" :items="items" :operation="operation" v-if="props.searchable">
+              <VTextField
+                v-model="search"
+                class="justify-end w-100"
+                density="compact"
+                hide-details
+                placeholder="ค้นหา"
+                clearable
+                variant="solo"
+              />
+            </slot>
+          </v-col>
+        </v-row>
+
+        <VToolbarItems>
+          <slot name="toolbarItems" :items="items" :operation="operation"/>
+          <ImportCSV
+            v-if="props.importable && canCreate && props.insertable"
+            icon="mdi mdi-file-upload"
+            variant="flat"
+            :color="toolbarColor"
+            :stringFields="props.stringFields"
+            @import="importItems"
+          />
+          <ExportCSV
+            v-if="props.exportable && items.length"
+            icon="mdi mdi-file-download"
+            variant="flat"
+            :file-name="title"
+            :model-value="items"
+            :color="toolbarColor"
+            :stringFields="props.stringFields"
+          />
+          <VBtn
+            v-if="canCreate && props.insertable"
+            :color="toolbarColor"
+            prepend-icon="mdi mdi-plus"
+            variant="flat"
+            @click="openDialog()"
+          >
+            add
+          </VBtn>
+        </VToolbarItems>
+      </VToolbar>
+    </slot>
+    <v-data-table-server
+      v-if="canServerPageable"
+      v-bind="plainAttrs"
+      color="primary"
+      :items="items"
+      :items-length="itemsLength"
+      :item-value="props.modelKey"
+      :search="search"
+      :loading="isLoading"
+      @update:options="loadItems"
+    >
+      <!-- @ts-ignore -->
+      <template
+        v-for="(_, name, index) in ($slots as {})"
+        :key="index"
+        #[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="((slotData || {}) as object)"
+          :operation="operation"
+        />
+      </template>
+      <template
+        v-if="!$slots['item.action']"
+        #item.action="{ item }"
+      >
+        <v-btn
+            v-if="!canUpdate || !canEditRow(item)"
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-note-search"
+            @click="openDialogReadonly(item)"
+        />
+        <v-btn
+          v-if="canUpdate && canEditRow(item)"
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-note-edit"
+          @click="openDialog(item)"
+        />
+        <v-btn
+          v-if="canDelete && canEditRow(item)"
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-delete"
+          @click="confirmDeleteItem(item)"
+        />
+      </template>
+    </v-data-table-server>
+    <v-data-table
+      v-else
+      v-bind="plainAttrs"
+      color="primary"
+      :items="items"
+      :item-value="props.modelKey"
+      :search="search"
+      :loading="isLoading"
+    >
+      <!-- @ts-ignore -->
+      <template
+        v-for="(_, name, index) in ($slots as {})"
+        :key="index"
+        #[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="((slotData || {}) as object)"
+          :operation="operation"
+        />
+      </template>
+      <template
+        v-if="!$slots['item.action']"
+        #item.action="{ item }"
+      >
+        <v-btn
+            v-if="!canUpdate || !canEditRow(item)"
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-note-search"
+            @click="openDialogReadonly(item)"
+        />
+        <v-btn
+            v-if="canUpdate && canEditRow(item)"
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-note-edit"
+            @click="openDialog(item)"
+        />
+        <v-btn
+            v-if="canDelete && canEditRow(item)"
+            variant="flat"
+            density="compact"
+            icon="mdi mdi-delete"
+            @click="confirmDeleteItem(item)"
+        />
+      </template>
+    </v-data-table>
+    <FormDialog
+      v-model="isDialogOpen"
+      :title="title"
+      :fullscreen="dialogFullscreen"
+      :initial-data="computedInitialData"
+      :form-data="currentItem"
+      @create="onCreateItem"
+      @update="onUpdateItem"
+      @afterLeave="emit('close:dialog')"
+      :saveAndStay="saveAndStay"
+      :readonly="isDialogReadonly"
+      :width="dialogWidth"
+      :height="dialogHeight"
+      :max-width="dialogMaxWidth"
+      :max-height="dialogMaxHeight"
+    >
+      <template #default="slotData">
+        <slot
+          name="form"
+          :tableItems="items"
+          :tableOperation="operation"
+          v-bind="slotData"
+        />
+      </template>
+      <template #title="slotData">
+        <slot
+            name="formTitle"
+            :tableItems="items"
+            :tableOperation="operation"
+            v-bind="slotData"
+        />
+      </template>
+      <template #action="slotData">
+        <slot
+            name="formAction"
+            :tableItems="items"
+            :tableOperation="operation"
+            v-bind="slotData"
+        />
+      </template>
+    </FormDialog>
+  </v-card>
+</template>