@ramathibodi/nuxt-commons 0.1.14 → 0.1.15

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

@@ -1,312 +1,312 @@
-<script lang="ts" setup>
-import {computed, nextTick, ref, useAttrs, watch} from 'vue'
-import {VDataIterator} from 'vuetify/components/VDataIterator'
-import {omit} from 'lodash-es'
-import type {GraphqlModelProps} from '../../composables/graphqlModel'
-import {useGraphqlModel} from '../../composables/graphqlModel'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$props']> {
-  title: string
-  noDataText?: string
-  dialogFullscreen?: boolean
-  initialData?: Record<string, any>
-  toolbarColor?: string
-  importable?: boolean
-  exportable?: boolean
-  cols?: string | number | boolean
-  xxl?: string | number | boolean
-  xl?: string | number | boolean
-  lg?: string | number | boolean
-  md?: string | number | boolean
-  sm?: string | number | boolean
-  itemsPerPage?: string | number
-}
-
-const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
-  noDataText: 'ไม่พบข้อมูล',
-  dialogFullscreen: false,
-  toolbarColor: 'primary',
-  importable: false,
-  exportable: false,
-  modelKey: 'id',
-  modelBy: undefined,
-  fields: () => [],
-  cols: 12,
-  xxl: false,
-  xl: false,
-  lg: false,
-  md: 2,
-  sm: 6,
-  itemsPerPage: 12,
-})
-
-const attrs = useAttrs()
-const plainAttrs = computed(() => {
-  const returnAttrs = omit(attrs, ['modelValue', 'onUpdate:modelValue'])
-  if (props.headers) returnAttrs['headers'] = props.headers
-  return returnAttrs
-})
-const currentItem = ref<Record<string, any> | undefined>(undefined)
-const isDialogOpen = ref<boolean>(false)
-
-const { items, itemsLength,
-  search, currentOptions,
-  canServerPageable, canServerSearch, canCreate, canUpdate, canDelete,
-  createItem, importItems, updateItem, deleteItem,
-  loadItems, reload,
-  isLoading } = useGraphqlModel(props)
-
-function openDialog(item?: object) {
-  currentItem.value = item
-  nextTick(() => {
-    isDialogOpen.value = true
-  })
-}
-
-const itemsPerPageInternal = ref<string | number>()
-watch(() => props.itemsPerPage, (newValue) => {
-  if (newValue.toString().toLowerCase() == 'all') itemsPerPageInternal.value = '-1'
-  else if (newValue) itemsPerPageInternal.value = newValue
-}, { immediate: true })
-
-type SortItem = { key: string, order?: boolean | 'asc' | 'desc' }
-const sortBy = ref<SortItem[]>()
-
-const pageCount = computed(() => {
-  if (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || itemsPerPageInternal.value == '-1' || Number(itemsPerPageInternal.value) <= 0) return 1
-  else return Math.ceil(itemsLength.value / Number(itemsPerPageInternal.value))
-})
-const currentPage = ref<number>(1)
-
-watch([currentPage, itemsPerPageInternal, sortBy], () => {
-  if (canServerPageable.value) {
-    loadItems({
-      page: currentPage.value,
-      itemsPerPage: (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || Number(itemsPerPageInternal.value) <= 0) ? '-1' : itemsPerPageInternal.value,
-      sortBy: sortBy.value,
-    })
-  }
-}, { immediate: true })
-
-const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
-
-const computedInitialData = computed(() => {
-  return Object.assign({}, props.initialData, props.modelBy)
-})
-
-const computedSkeletonPerPage = computed(() => {
-  if (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || Number(itemsPerPageInternal.value) <= 0) return 1
-  else return Number(itemsPerPageInternal.value)
-})
-
-defineExpose({ reload })
-</script>
-
-<template>
-  <v-card>
-    <v-data-iterator
-      v-bind="plainAttrs"
-      v-model:items-per-page="itemsPerPageInternal"
-      v-model:sort-by="sortBy"
-      :items="items"
-      :item-value="modelKey"
-      :search="search"
-      :loading="isLoading"
-    >
-      <template #default="defaultProps">
-        <slot
-          v-bind="defaultProps"
-          :operation="operation"
-        >
-          <v-container fluid>
-            <v-row>
-              <v-col
-                v-for="(item, index) in defaultProps.items"
-                :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>
-        </slot>
-      </template>
-      <template #loader="loaderProps">
-        <slot
-          name="loader"
-          v-bind="loaderProps"
-        >
-          <v-container fluid>
-            <v-row>
-              <v-col
-                v-for="key in computedSkeletonPerPage"
-                :key="key"
-                :cols="cols"
-                :sm="sm"
-                :md="md"
-                :lg="lg"
-                :xl="xl"
-                :xxl="xxl"
-              >
-                <slot name="loaderItem">
-                  <v-skeleton-loader
-                    type="paragraph"
-                  />
-                </slot>
-              </v-col>
-            </v-row>
-          </v-container>
-        </slot>
-      </template>
-      <template #header="headerProps">
-        <slot
-          name="header"
-          v-bind="headerProps"
-          :items="items"
-          :search="search"
-          :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">
-                  <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" />
-              <ImportCSV
-                v-if="props.importable"
-                icon="mdi mdi-file-upload"
-                variant="flat"
-                @import="importItems"
-              />
-              <ExportCSV
-                v-if="props.exportable && items.length"
-                icon="mdi mdi-file-download"
-                variant="flat"
-                :file-name="title"
-                :model-value="items"
-              />
-              <VBtn
-                v-if="canCreate"
-                :color="toolbarColor"
-                prepend-icon="mdi mdi-plus"
-                variant="flat"
-                @click="openDialog()"
-              >
-                add
-              </VBtn>
-            </VToolbarItems>
-          </VToolbar>
-        </slot>
-      </template>
-      <template #footer="footerProps">
-        <v-container fluid>
-          <v-row
-            align-content="center"
-            justify="end"
-            dense
-          >
-            <v-spacer />
-            <v-select
-              v-model="itemsPerPageInternal"
-              density="compact"
-              variant="outlined"
-              :items="[6, 12, 18, 24, 30, { title: 'All', value: '-1' }]"
-              min-width="220"
-              max-width="220"
-              hide-details
-            >
-              <template #prepend>
-                Items per page:
-              </template>
-            </v-select>
-            <v-pagination
-              v-if="!canServerPageable"
-              v-model="currentPage"
-              density="compact"
-              :length="footerProps.pageCount"
-              total-visible="6"
-              show-first-last-page
-              @first="footerProps.setPage(1)"
-              @last="footerProps.setPage(footerProps.pageCount)"
-              @next="footerProps.nextPage"
-              @prev="footerProps.prevPage"
-@update:model-value="footerProps.setPage"
-            />
-            <v-pagination
-              v-else
-              v-model="currentPage"
-              density="compact"
-              :length="pageCount"
-              total-visible="6"
-              show-first-last-page
-            />
-          </v-row>
-        </v-container>
-      </template>
-    </v-data-iterator>
-    <FormDialog
-      v-model="isDialogOpen"
-      :title="title"
-      :fullscreen="dialogFullscreen"
-      :initial-data="computedInitialData"
-      :form-data="currentItem"
-      @create="createItem"
-      @update="updateItem"
-    >
-      <template #default="slotData">
-        <slot
-          name="form"
-          v-bind="slotData"
-        />
-      </template>
-    </FormDialog>
-  </v-card>
-</template>
+<script lang="ts" setup>
+import {computed, nextTick, ref, useAttrs, watch} from 'vue'
+import {VDataIterator} from 'vuetify/components/VDataIterator'
+import {omit} from 'lodash-es'
+import type {GraphqlModelProps} from '../../composables/graphqlModel'
+import {useGraphqlModel} from '../../composables/graphqlModel'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VDataIterator['$props']> {
+  title: string
+  noDataText?: string
+  dialogFullscreen?: boolean
+  initialData?: Record<string, any>
+  toolbarColor?: string
+  importable?: boolean
+  exportable?: boolean
+  cols?: string | number | boolean
+  xxl?: string | number | boolean
+  xl?: string | number | boolean
+  lg?: string | number | boolean
+  md?: string | number | boolean
+  sm?: string | number | boolean
+  itemsPerPage?: string | number
+}
+
+const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
+  noDataText: 'ไม่พบข้อมูล',
+  dialogFullscreen: false,
+  toolbarColor: 'primary',
+  importable: false,
+  exportable: false,
+  modelKey: 'id',
+  modelBy: undefined,
+  fields: () => [],
+  cols: 12,
+  xxl: false,
+  xl: false,
+  lg: false,
+  md: 2,
+  sm: 6,
+  itemsPerPage: 12,
+})
+
+const attrs = useAttrs()
+const plainAttrs = computed(() => {
+  const returnAttrs = omit(attrs, ['modelValue', 'onUpdate:modelValue'])
+  if (props.headers) returnAttrs['headers'] = props.headers
+  return returnAttrs
+})
+const currentItem = ref<Record<string, any> | undefined>(undefined)
+const isDialogOpen = ref<boolean>(false)
+
+const { items, itemsLength,
+  search, currentOptions,
+  canServerPageable, canServerSearch, canCreate, canUpdate, canDelete,
+  createItem, importItems, updateItem, deleteItem,
+  loadItems, reload,
+  isLoading } = useGraphqlModel(props)
+
+function openDialog(item?: object) {
+  currentItem.value = item
+  nextTick(() => {
+    isDialogOpen.value = true
+  })
+}
+
+const itemsPerPageInternal = ref<string | number>()
+watch(() => props.itemsPerPage, (newValue) => {
+  if (newValue.toString().toLowerCase() == 'all') itemsPerPageInternal.value = '-1'
+  else if (newValue) itemsPerPageInternal.value = newValue
+}, { immediate: true })
+
+type SortItem = { key: string, order?: boolean | 'asc' | 'desc' }
+const sortBy = ref<SortItem[]>()
+
+const pageCount = computed(() => {
+  if (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || itemsPerPageInternal.value == '-1' || Number(itemsPerPageInternal.value) <= 0) return 1
+  else return Math.ceil(itemsLength.value / Number(itemsPerPageInternal.value))
+})
+const currentPage = ref<number>(1)
+
+watch([currentPage, itemsPerPageInternal, sortBy], () => {
+  if (canServerPageable.value) {
+    loadItems({
+      page: currentPage.value,
+      itemsPerPage: (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || Number(itemsPerPageInternal.value) <= 0) ? '-1' : itemsPerPageInternal.value,
+      sortBy: sortBy.value,
+    })
+  }
+}, { immediate: true })
+
+const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
+
+const computedInitialData = computed(() => {
+  return Object.assign({}, props.initialData, props.modelBy)
+})
+
+const computedSkeletonPerPage = computed(() => {
+  if (!itemsPerPageInternal.value || itemsPerPageInternal.value == 'All' || Number(itemsPerPageInternal.value) <= 0) return 1
+  else return Number(itemsPerPageInternal.value)
+})
+
+defineExpose({ reload })
+</script>
+
+<template>
+  <v-card>
+    <v-data-iterator
+      v-bind="plainAttrs"
+      v-model:items-per-page="itemsPerPageInternal"
+      v-model:sort-by="sortBy"
+      :items="items"
+      :item-value="modelKey"
+      :search="search"
+      :loading="isLoading"
+    >
+      <template #default="defaultProps">
+        <slot
+          v-bind="defaultProps"
+          :operation="operation"
+        >
+          <v-container fluid>
+            <v-row>
+              <v-col
+                v-for="(item, index) in defaultProps.items"
+                :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>
+        </slot>
+      </template>
+      <template #loader="loaderProps">
+        <slot
+          name="loader"
+          v-bind="loaderProps"
+        >
+          <v-container fluid>
+            <v-row>
+              <v-col
+                v-for="key in computedSkeletonPerPage"
+                :key="key"
+                :cols="cols"
+                :sm="sm"
+                :md="md"
+                :lg="lg"
+                :xl="xl"
+                :xxl="xxl"
+              >
+                <slot name="loaderItem">
+                  <v-skeleton-loader
+                    type="paragraph"
+                  />
+                </slot>
+              </v-col>
+            </v-row>
+          </v-container>
+        </slot>
+      </template>
+      <template #header="headerProps">
+        <slot
+          name="header"
+          v-bind="headerProps"
+          :items="items"
+          :search="search"
+          :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">
+                  <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" />
+              <ImportCSV
+                v-if="props.importable"
+                icon="mdi mdi-file-upload"
+                variant="flat"
+                @import="importItems"
+              />
+              <ExportCSV
+                v-if="props.exportable && items.length"
+                icon="mdi mdi-file-download"
+                variant="flat"
+                :file-name="title"
+                :model-value="items"
+              />
+              <VBtn
+                v-if="canCreate"
+                :color="toolbarColor"
+                prepend-icon="mdi mdi-plus"
+                variant="flat"
+                @click="openDialog()"
+              >
+                add
+              </VBtn>
+            </VToolbarItems>
+          </VToolbar>
+        </slot>
+      </template>
+      <template #footer="footerProps">
+        <v-container fluid>
+          <v-row
+            align-content="center"
+            justify="end"
+            dense
+          >
+            <v-spacer />
+            <v-select
+              v-model="itemsPerPageInternal"
+              density="compact"
+              variant="outlined"
+              :items="[6, 12, 18, 24, 30, { title: 'All', value: '-1' }]"
+              min-width="220"
+              max-width="220"
+              hide-details
+            >
+              <template #prepend>
+                Items per page:
+              </template>
+            </v-select>
+            <v-pagination
+              v-if="!canServerPageable"
+              v-model="currentPage"
+              density="compact"
+              :length="footerProps.pageCount"
+              total-visible="6"
+              show-first-last-page
+              @first="footerProps.setPage(1)"
+              @last="footerProps.setPage(footerProps.pageCount)"
+              @next="footerProps.nextPage"
+              @prev="footerProps.prevPage"
+@update:model-value="footerProps.setPage"
+            />
+            <v-pagination
+              v-else
+              v-model="currentPage"
+              density="compact"
+              :length="pageCount"
+              total-visible="6"
+              show-first-last-page
+            />
+          </v-row>
+        </v-container>
+      </template>
+    </v-data-iterator>
+    <FormDialog
+      v-model="isDialogOpen"
+      :title="title"
+      :fullscreen="dialogFullscreen"
+      :initial-data="computedInitialData"
+      :form-data="currentItem"
+      @create="createItem"
+      @update="updateItem"
+    >
+      <template #default="slotData">
+        <slot
+          name="form"
+          v-bind="slotData"
+        />
+      </template>
+    </FormDialog>
+  </v-card>
+</template>