@ramathibodi/nuxt-commons 0.1.12 → 0.1.13

package/dist/runtime/components/master/Select.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { VSelect } from "vuetify/components/VSelect";
-import { useGraphQl } from '../../composables/graphql'
-import { concat } from "lodash-es";
-import { useAlert } from "../../composables/alert";
-import {computed, ref, watch} from "vue";
+import {VSelect} from 'vuetify/components/VSelect'
+import {concat} from 'lodash-es'
+import {computed, ref, watch} from 'vue'
+import {useGraphQl} from '../../composables/graphql'
+import {useAlert} from '../../composables/alert'
+
 interface Props extends /* @vue-ignore */ InstanceType<typeof VSelect['$props']> {
   modelValue?: string
   groupKey: string
-  fields?:string[]
+  fields?: string[]
 }
-const props = withDefaults(defineProps<Props>(),{
-  lang: 'TH'
+const props = withDefaults(defineProps<Props>(), {
+  lang: 'TH',
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -22,12 +23,12 @@ function query() {
   let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
   if (props.fields) fields = concat(fields, props.fields)
 
-  useGraphQl().queryPromise('masterItemByGroupKey',fields, variables).then((result : any)=>{
+  useGraphQl().queryPromise('masterItemByGroupKey', fields, variables).then((result: any) => {
     items.value = result
-  }).catch((error)=>{
+  }).catch((error) => {
     alert?.addAlert({
-      message : `${error.message}`,
-      alertType:"error"
+      message: `${error.message}`,
+      alertType: 'error',
     })
   })
 }
@@ -47,27 +48,37 @@ const itemTitleField = computed(() => {
 
 query()
 </script>
+
 <template>
-  <v-select v-model="selectedItem" :item-title="itemTitleField" :items="items" item-value="itemCode">
+  <v-select
+    v-model="selectedItem"
+    :item-title="itemTitleField"
+    :items="items"
+    item-value="itemCode"
+  >
     <template
-        v-for="(_, name, index) in ($slots as {})"
-        :key="index"
-        #[name]="slotData"
+      v-for="(_, name, index) in ($slots as {})"
+      :key="index"
+      #[name]="slotData"
     >
       <slot
-          :name="name"
-          v-bind="(slotData as object)"
-          :operation="operation"
+        :name="name"
+        v-bind="(slotData as object)"
+        :operation="operation"
       />
     </template>
     <template
-        v-if="!$slots.item"
-        #item="{ props, item }">
-      <v-list-item v-bind="props" :title="item.raw.itemValue"></v-list-item>
+      v-if="!$slots.item"
+      #item="{ props, item }"
+    >
+      <v-list-item
+        v-bind="props"
+        :title="item.raw.itemValue"
+      />
     </template>
   </v-select>
 </template>
 
 <style scoped>
 
-</style>
+</style>

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

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import { computed, ref, watchEffect } from 'vue'
+import { cloneDeep, isEqual } from 'lodash-es'
+import { type GraphqlModelItemProps, useGraphqlModelItem } from '../../composables/graphqlModelItem'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props {
+  title?: string
+  initialData?: object
+  saveCaption?: string
+  cancelCaption?: string
+}
+
+const props = withDefaults(defineProps<Props & GraphqlModelItemProps>(), {
+  saveCaption: 'บันทึก',
+  cancelCaption: 'ยกเลิก',
+  fields: () => ['*'],
+})
+
+const { item,
+  canCreate, canUpdate,
+  createItem, updateItem,
+  reload, isLoading } = useGraphqlModelItem(props)
+
+const formPadRef = ref()
+const formData = ref<object>({})
+
+const canSave = computed(() => { return (canCreate.value && isCreating.value) || canUpdate.value })
+
+const isDataChange = computed(() => {
+  return !((isCreating.value) ? isEqual(formData.value, createOriginalValue.value) : isEqual(formData.value, item.value))
+})
+
+const isCreating = computed(() => {
+  return !item.value
+})
+
+const createOriginalValue = computed(() => {
+  return Object.assign({}, props.initialData)
+})
+
+const loadFormData = () => {
+  if (item.value) {
+    formData.value = cloneDeep(item.value)
+  }
+  else {
+    formData.value = Object.assign({}, props.initialData)
+  }
+}
+
+watchEffect(loadFormData)
+
+function save() {
+  if (formPadRef.value.isValid) {
+    if (isCreating.value) createItem(formData.value)
+    else updateItem(formData.value)
+  }
+}
+
+function cancel() {
+  formPadRef.value.reset()
+  loadFormData()
+}
+
+defineExpose({ save, cancel, reload, item, isLoading })
+</script>
+
+<template>
+  <VCard>
+    <VToolbar>
+      <VToolbarTitle>
+        <slot name="title">
+          {{ title }}
+          <v-icon
+            size="small"
+            @click="reload"
+          >
+            mdi mdi-refresh
+          </v-icon>
+        </slot>
+      </VToolbarTitle>
+    </VToolbar>
+    <VCardText>
+      <form-pad
+        ref="formPadRef"
+        v-model="formData"
+        isolated
+      >
+        <template #default="slotData">
+          <slot
+            v-bind="slotData"
+            :is-creating="isCreating"
+            :is-data-change="isDataChange"
+          />
+        </template>
+      </form-pad>
+    </VCardText>
+    <VCardActions>
+      <VSpacer />
+      <VBtn
+        color="primary"
+        variant="flat"
+        :loading="isLoading"
+        :disabled="!isDataChange || !canSave"
+        @click="save"
+      >
+        {{ saveCaption }}
+      </VBtn>
+      <VBtn
+        color="error"
+        variant="flat"
+        :disabled="isLoading"
+        @click="cancel"
+      >
+        {{ cancelCaption }}
+      </VBtn>
+    </VCardActions>
+  </VCard>
+</template>

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

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import {computed, nextTick, ref, useAttrs} from 'vue'
-import type {GraphqlModelProps, HeaderProps} from '../../composables/graphqlModel'
+import {VDataTable} from 'vuetify/components/VDataTable'
+import {omit} from 'lodash-es'
+import type {GraphqlModelProps} from '../../composables/graphqlModel'
 import {useGraphqlModel} from '../../composables/graphqlModel'
-import {VDataTable} from "vuetify/components/VDataTable";
-import {omit} from "lodash-es";
 
 defineOptions({
   inheritAttrs: false,
@@ -19,7 +19,7 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
   exportable?: boolean
 }
 
-const props = withDefaults(defineProps<Props & GraphqlModelProps & HeaderProps>(), {
+const props = withDefaults(defineProps<Props & GraphqlModelProps>(), {
   noDataText: 'ไม่พบข้อมูล',
   dialogFullscreen: false,
   toolbarColor: 'primary',
@@ -27,24 +27,24 @@ const props = withDefaults(defineProps<Props & GraphqlModelProps & HeaderProps>(
   exportable: true,
   modelKey: 'id',
   modelBy: undefined,
-  fields: ()=>[]
+  fields: () => [],
 })
 
 const attrs = useAttrs()
 const plainAttrs = computed(() => {
-  let returnAttrs = omit(attrs, ['modelValue', 'onUpdate:modelValue'])
+  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,
+const { items, itemsLength,
   search,
-  canServerPageable,canServerSearch,canCreate,canUpdate,canDelete,
-  createItem,importItems,updateItem,deleteItem,
-  loadItems,reload,
-  isLoading} = useGraphqlModel(props)
+  canServerPageable, canServerSearch, canCreate, canUpdate, canDelete,
+  createItem, importItems, updateItem, deleteItem,
+  loadItems, reload,
+  isLoading } = useGraphqlModel(props)
 
 function openDialog(item?: object) {
   currentItem.value = item
@@ -53,28 +53,50 @@ function openDialog(item?: object) {
   })
 }
 
+const operation = ref({ openDialog, createItem, importItems, updateItem, deleteItem, reload, canServerPageable, canServerSearch, canCreate, canUpdate, canDelete })
+
+const computedInitialData = computed(() => {
+  return Object.assign({}, props.initialData, props.modelBy)
+})
+
 defineExpose({ reload })
 </script>
+
 <template>
   <v-card>
-    <VToolbar :color="toolbarColor">
-      <v-row
+    <slot
+      name="header"
+      :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">
-              {{ title }}
-            </slot>
-          </VToolbarTitle>
-        </v-col>
-        <v-col cols="5">
-          <slot name="search">
-            <VTextField
+        >
+          <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"
@@ -82,136 +104,137 @@ defineExpose({ reload })
                 placeholder="ค้นหา"
                 clearable
                 variant="solo"
-            />
-          </slot>
-        </v-col>
-      </v-row>
+              />
+            </slot>
+          </v-col>
+        </v-row>
 
-      <VToolbarItems>
-        <slot name="toolbarItems" />
-        <ImportCSV
+        <VToolbarItems>
+          <slot name="toolbarItems" />
+          <ImportCSV
             v-if="props.importable"
             icon="mdi mdi-file-upload"
             variant="flat"
             @import="importItems"
-        />
-        <ExportCSV
+          />
+          <ExportCSV
             v-if="props.exportable && items.length"
             icon="mdi mdi-file-download"
             variant="flat"
             :file-name="title"
             :model-value="items"
-        />
-        <VBtn
+          />
+          <VBtn
+            v-if="canCreate"
             :color="toolbarColor"
             prepend-icon="mdi mdi-plus"
             variant="flat"
             @click="openDialog()"
-            v-if="canCreate"
-        >
-          add
-        </VBtn>
-      </VToolbarItems>
-    </VToolbar>
+          >
+            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"
+      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"
+        v-for="(_, name, index) in ($slots as {})"
+        :key="index"
+        #[name]="slotData"
       >
         <slot
-            :name="name"
-            v-bind="(slotData as object)"
-            :operation="operation"
+          :name="name"
+          v-bind="(slotData as object)"
+          :operation="operation"
         />
       </template>
       <template
-          v-if="!$slots['item.action']"
-          #item.action="{ item }"
+        v-if="!$slots['item.action']"
+        #item.action="{ item }"
       >
         <v-btn
-            variant="flat"
-            density="compact"
-            icon="mdi mdi-note-edit"
-            @click="openDialog(item)"
-            v-if="canUpdate"
+          v-if="canUpdate"
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-note-edit"
+          @click="openDialog(item)"
         />
         <v-btn
-            variant="flat"
-            density="compact"
-            icon="mdi mdi-delete"
-            @click="deleteItem(item)"
-            v-if="canDelete"
+          v-if="canDelete"
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-delete"
+          @click="deleteItem(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"
+      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"
+        v-for="(_, name, index) in ($slots as {})"
+        :key="index"
+        #[name]="slotData"
       >
         <slot
-            :name="name"
-            v-bind="(slotData as object)"
-            :operation="operation"
+          :name="name"
+          v-bind="(slotData as object)"
+          :operation="operation"
         />
       </template>
       <template
-          v-if="!$slots['item.action']"
-          #item.action="{ item }"
+        v-if="!$slots['item.action']"
+        #item.action="{ item }"
       >
         <v-btn
-            variant="flat"
-            density="compact"
-            icon="mdi mdi-note-edit"
-            @click="openDialog(item)"
-            v-if="canUpdate"
+          v-if="canUpdate"
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-note-edit"
+          @click="openDialog(item)"
         />
         <v-btn
-            variant="flat"
-            density="compact"
-            icon="mdi mdi-delete"
-            @click="deleteItem(item)"
-            v-if="canDelete"
+          v-if="canDelete"
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-delete"
+          @click="deleteItem(item)"
         />
       </template>
     </v-data-table>
     <FormDialog
-        v-model="isDialogOpen"
-        :title="title"
-        :fullscreen="dialogFullscreen"
-        :initial-data="initialData"
-        :form-data="currentItem"
-        @create="createItem"
-        @update="updateItem"
+      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"
+          name="form"
+          v-bind="slotData"
         />
       </template>
     </FormDialog>
   </v-card>
-</template>
+</template>