@ramathibodi/nuxt-commons 0.1.11 → 0.1.13

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

@@ -0,0 +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 == 'All' || itemsPerPageInternal.value == '-1' || itemsPerPageInternal.value <= 0 || !itemsPerPageInternal.value) 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 == 'All' || 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 == 'All' || 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>

package/dist/runtime/composables/graphql.mjs

@@ -1,4 +1,4 @@
-import { query as gqlQuery, mutation as gqlMutation } from "gql-query-builder";
+import { mutation as gqlMutation, query as gqlQuery } from "gql-query-builder";
 import { useQuery } from "@vue/apollo-composable";
 import { classAttributes, isClassConstructor } from "../utils/object.mjs";
 import { gql, useAsyncQuery, useMutation } from "#imports";

package/dist/runtime/composables/graphqlModel.d.ts

@@ -1,22 +1,10 @@
-import type { FormDialogCallback } from "../types/formDialog";
-import type { graphqlOperationObject } from "../types/graphqlOperation";
+import type { FormDialogCallback } from '../types/formDialog';
+import { type GraphqlModelConfigProps } from './graphqlModelOperation';
 export interface HeaderProps {
     headers?: any[];
 }
-export interface GraphqlModelProps {
-    modelName: string;
-    modelKey?: string;
-    modelBy?: object;
-    operationCreate?: graphqlOperationObject<any, any> | string;
-    operationUpdate?: graphqlOperationObject<any, any> | string;
-    operationDelete?: graphqlOperationObject<any, any> | string;
-    operationRead?: graphqlOperationObject<any, any> | string;
-    operationReadPageable?: graphqlOperationObject<any, any> | string;
-    operationSearch?: graphqlOperationObject<any, any> | string;
-    fields?: Array<string | object>;
-}
-type GraphqlModelPropsWithOptionalHeaders = GraphqlModelProps & Partial<HeaderProps>;
-export declare function useGraphqlModel<T extends GraphqlModelPropsWithOptionalHeaders>(props: T): {
+export type GraphqlModelProps = GraphqlModelConfigProps & Partial<HeaderProps>;
+export declare function useGraphqlModel<T extends GraphqlModelProps>(props: T): {
     items: import("vue").Ref<Record<string, any>[]>;
     itemsLength: import("vue").Ref<number>;
     search: import("vue").Ref<string | undefined>;
@@ -28,7 +16,7 @@ export declare function useGraphqlModel<T extends GraphqlModelPropsWithOptionalH
     operationReadPageable: import("vue").ComputedRef<any>;
     operationSearch: import("vue").ComputedRef<any>;
     fields: import("vue").ComputedRef<any[]>;
-    canServerPageable: import("vue").ComputedRef<boolean | "">;
+    canServerPageable: import("vue").ComputedRef<boolean>;
     canServerSearch: import("vue").ComputedRef<boolean>;
     canCreate: import("vue").ComputedRef<boolean>;
     canUpdate: import("vue").ComputedRef<boolean>;
@@ -41,4 +29,3 @@ export declare function useGraphqlModel<T extends GraphqlModelPropsWithOptionalH
     reload: () => void;
     isLoading: import("vue").Ref<boolean>;
 };
-export {};

package/dist/runtime/composables/graphqlModel.mjs

@@ -1,7 +1,7 @@
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useAlert } from "./alert.mjs";
-import { graphqlOperation } from "#imports";
 import { buildRequiredInputFields } from "./graphqlOperation.mjs";
+import { useGraphqlModelOperation } from "./graphqlModelOperation.mjs";
 export function useGraphqlModel(props) {
   const alert = useAlert();
   const items = ref([]);
@@ -9,78 +9,7 @@ export function useGraphqlModel(props) {
   const search = ref();
   const currentOptions = ref();
   const isLoading = ref(false);
-  function capitalizeFirstLetter(string) {
-    return string?.charAt(0).toUpperCase() + string?.slice(1);
-  }
-  function lowercaseFirstLetter(string) {
-    return string?.charAt(0).toLowerCase() + string?.slice(1);
-  }
-  const operationCreate = computed(() => {
-    if (props.operationCreate) {
-      if (typeof props.operationCreate === "string") {
-        if (graphqlOperation[props.operationCreate])
-          return graphqlOperation[props.operationCreate];
-      } else {
-        return props.operationCreate;
-      }
-    }
-    return graphqlOperation["create" + capitalizeFirstLetter(props.modelName)];
-  });
-  const operationUpdate = computed(() => {
-    if (props.operationUpdate) {
-      if (typeof props.operationUpdate === "string") {
-        if (graphqlOperation[props.operationUpdate])
-          return graphqlOperation[props.operationUpdate];
-      } else {
-        return props.operationUpdate;
-      }
-    }
-    return graphqlOperation["update" + capitalizeFirstLetter(props.modelName)];
-  });
-  const operationDelete = computed(() => {
-    if (props.operationDelete) {
-      if (typeof props.operationDelete === "string") {
-        if (graphqlOperation[props.operationDelete])
-          return graphqlOperation[props.operationDelete];
-      } else {
-        return props.operationDelete;
-      }
-    }
-    return graphqlOperation["delete" + capitalizeFirstLetter(props.modelName)];
-  });
-  const operationRead = computed(() => {
-    if (props.operationRead) {
-      if (typeof props.operationRead === "string") {
-        if (graphqlOperation[props.operationRead])
-          return graphqlOperation[props.operationRead];
-      } else {
-        return props.operationRead;
-      }
-    }
-    return graphqlOperation[lowercaseFirstLetter(props.modelName)];
-  });
-  const operationReadPageable = computed(() => {
-    if (props.operationReadPageable) {
-      if (typeof props.operationReadPageable === "string") {
-        if (graphqlOperation[props.operationReadPageable])
-          return graphqlOperation[props.operationReadPageable];
-      } else {
-        return props.operationReadPageable;
-      }
-    }
-    return graphqlOperation[lowercaseFirstLetter(props.modelName) + "Pageable"];
-  });
-  const operationSearch = computed(() => {
-    if (props.operationSearch) {
-      if (typeof props.operationSearch === "string") {
-        if (graphqlOperation[props.operationSearch])
-          return graphqlOperation[props.operationSearch];
-      } else {
-        return props.operationSearch;
-      }
-    }
-    return graphqlOperation["search" + capitalizeFirstLetter(props.modelName)];
-  });
+  const { operationCreate, operationUpdate, operationDelete, operationRead, operationReadPageable, operationSearch } = useGraphqlModelOperation(props);
   function keyToField(key) {
     const parts = key.split(".");
     if (parts.length > 1) {
@@ -102,8 +31,8 @@ export function useGraphqlModel(props) {
     }
   }
   const fields = computed(() => {
-    let tmpFields = [];
-    let fieldsProps = props.fields || [];
+    const tmpFields = [];
+    const fieldsProps = props.fields || [];
     let requiredInputFields = [];
     if (props.headers && props.headers.length > 0) {
       props.headers.forEach((header) => {
@@ -117,7 +46,7 @@ export function useGraphqlModel(props) {
     return [.../* @__PURE__ */ new Set([...fieldsProps, ...tmpFields, ...requiredInputFields])];
   });
   const canServerPageable = computed(() => {
-    return !!operationReadPageable.value && (!search.value || search.value && canServerSearch.value);
+    return !!operationReadPageable.value && (!search.value || !!search.value && canServerSearch.value);
   });
   const canServerSearch = computed(() => {
     return !!operationSearch.value;
@@ -150,9 +79,9 @@ export function useGraphqlModel(props) {
   }
   function importItems(importItems2, callback) {
     isLoading.value = true;
-    let importPromise = [];
+    const importPromise = [];
     importItems2.forEach((item) => {
-      let eachPromise = createItem(item, void 0, true);
+      const eachPromise = createItem(item, void 0, true);
       if (eachPromise)
         importPromise.push(eachPromise);
     });
@@ -169,7 +98,7 @@ export function useGraphqlModel(props) {
       if (canServerPageable)
         loadItems(currentOptions.value);
       else {
-        let index = items.value.findIndex((item2) => item2[props.modelKey || "id"] === result[props.modelKey || "id"]);
+        const index = items.value.findIndex((item2) => item2[props.modelKey || "id"] === result[props.modelKey || "id"]);
         if (index !== -1) {
           items.value[index] = result;
         }
@@ -196,7 +125,7 @@ export function useGraphqlModel(props) {
   function loadItems(options) {
     currentOptions.value = options;
     if (canServerPageable) {
-      let pageableVariable = {
+      const pageableVariable = {
         page: options.page,
         perPage: options.itemsPerPage,
         sortBy: options.sortBy
@@ -214,7 +143,8 @@ export function useGraphqlModel(props) {
   }
   function reload() {
     if (canServerPageable.value) {
-      loadItems(currentOptions.value);
+      if (currentOptions.value)
+        loadItems(currentOptions.value);
     } else {
       isLoading.value = true;
       operationRead.value?.call(fields.value, props.modelBy).then((result) => {
@@ -226,12 +156,12 @@ export function useGraphqlModel(props) {
       });
     }
   }
-  watch(() => props.modelName, () => {
+  watch([() => props.modelName, () => props.modelBy, () => props.modelKey, canServerPageable], () => {
+    reload();
+  }, { deep: true });
+  onMounted(() => {
     if (!canServerPageable.value)
       reload();
-  }, { immediate: true });
-  watch(canServerPageable, () => {
-    reload();
   });
   return {
     items,

package/dist/runtime/composables/graphqlModelItem.d.ts

@@ -0,0 +1,20 @@
+import type { FormDialogCallback } from '../types/formDialog';
+import { type GraphqlModelConfigProps } from './graphqlModelOperation';
+export type GraphqlModelItemProps = Omit<GraphqlModelConfigProps, 'operationSearch' | 'operationReadPageable'>;
+export declare function useGraphqlModelItem<T extends GraphqlModelItemProps>(props: T): {
+    modelBy: import("vue").Ref<object | undefined>;
+    item: import("vue").Ref<Record<string, any> | undefined>;
+    operationCreate: import("vue").ComputedRef<any>;
+    operationUpdate: import("vue").ComputedRef<any>;
+    operationDelete: import("vue").ComputedRef<any>;
+    operationRead: import("vue").ComputedRef<any>;
+    fields: import("vue").ComputedRef<any[]>;
+    canCreate: import("vue").ComputedRef<boolean>;
+    canUpdate: import("vue").ComputedRef<boolean>;
+    canDelete: import("vue").ComputedRef<boolean>;
+    createItem: (createItem: Record<string, any>, callback?: FormDialogCallback) => any;
+    updateItem: (updateItem: Record<string, any>, callback?: FormDialogCallback) => any;
+    deleteItem: (item: Record<string, any>, callback?: FormDialogCallback) => any;
+    reload: () => void;
+    isLoading: import("vue").Ref<boolean>;
+};

package/dist/runtime/composables/graphqlModelItem.mjs

@@ -0,0 +1,103 @@
+import { computed, ref, watch } from "vue";
+import { useAlert } from "./alert.mjs";
+import { buildRequiredInputFields } from "./graphqlOperation.mjs";
+import { useGraphqlModelOperation } from "./graphqlModelOperation.mjs";
+export function useGraphqlModelItem(props) {
+  const alert = useAlert();
+  const modelBy = ref();
+  const item = ref();
+  const isLoading = ref(false);
+  const { operationCreate, operationUpdate, operationDelete, operationRead } = useGraphqlModelOperation(props);
+  const fields = computed(() => {
+    const fieldsProps = props.fields || [];
+    let requiredInputFields = [];
+    if (canUpdate.value) {
+      requiredInputFields = buildRequiredInputFields(operationUpdate.value?.variables);
+    }
+    return [.../* @__PURE__ */ new Set([...fieldsProps, ...requiredInputFields])];
+  });
+  const canCreate = computed(() => {
+    return !!operationCreate.value;
+  });
+  const canUpdate = computed(() => {
+    return !!operationUpdate.value;
+  });
+  const canDelete = computed(() => {
+    return !!operationDelete.value;
+  });
+  function createItem(createItem2, callback) {
+    isLoading.value = true;
+    return operationCreate.value?.call(fields.value, { input: createItem2 }).then((result) => {
+      item.value = result;
+    }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error });
+      reload();
+    }).finally(() => {
+      isLoading.value = false;
+      if (callback)
+        callback.done();
+    });
+  }
+  function updateItem(updateItem2, callback) {
+    isLoading.value = true;
+    return operationUpdate.value?.call(fields.value, { input: updateItem2 }).then((result) => {
+      item.value = result;
+    }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error });
+      reload();
+    }).finally(() => {
+      isLoading.value = false;
+      if (callback)
+        callback.done();
+    });
+  }
+  function deleteItem(item2, callback) {
+    isLoading.value = true;
+    return operationDelete.value?.call(fields.value, { input: item2 }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error });
+    }).finally(() => {
+      isLoading.value = false;
+      reload();
+      if (callback)
+        callback.done();
+    });
+  }
+  function reload() {
+    isLoading.value = true;
+    item.value = void 0;
+    operationRead.value?.call(fields.value, computedModelBy.value).then((result) => {
+      if (Array.isArray(result)) {
+        alert?.addAlert({ alertType: "error", message: "Return result is not single item" });
+      } else {
+        item.value = result;
+      }
+    }).catch((error) => {
+      alert?.addAlert({ alertType: "error", message: error });
+    }).finally(() => {
+      isLoading.value = false;
+    });
+  }
+  const computedModelBy = computed(() => {
+    return Object.assign({}, props.modelBy, modelBy.value);
+  });
+  watch([() => props.modelName, () => props.modelKey, computedModelBy], () => {
+    reload();
+  }, { immediate: true, deep: true });
+  return {
+    modelBy,
+    item,
+    operationCreate,
+    operationUpdate,
+    operationDelete,
+    operationRead,
+    fields,
+    canCreate,
+    canUpdate,
+    canDelete,
+    createItem,
+    updateItem,
+    deleteItem,
+    reload,
+    isLoading
+  };
+}

package/dist/runtime/composables/graphqlModelOperation.d.ts

@@ -0,0 +1,21 @@
+import type { graphqlOperationObject } from '../types/graphqlOperation';
+export interface GraphqlModelConfigProps {
+    modelName: string;
+    modelKey?: string;
+    modelBy?: object;
+    operationCreate?: graphqlOperationObject<any, any> | string;
+    operationUpdate?: graphqlOperationObject<any, any> | string;
+    operationDelete?: graphqlOperationObject<any, any> | string;
+    operationRead?: graphqlOperationObject<any, any> | string;
+    operationReadPageable?: graphqlOperationObject<any, any> | string;
+    operationSearch?: graphqlOperationObject<any, any> | string;
+    fields?: Array<string | object>;
+}
+export declare function useGraphqlModelOperation<T extends GraphqlModelConfigProps>(props: T): {
+    operationCreate: import("vue").ComputedRef<any>;
+    operationUpdate: import("vue").ComputedRef<any>;
+    operationDelete: import("vue").ComputedRef<any>;
+    operationRead: import("vue").ComputedRef<any>;
+    operationReadPageable: import("vue").ComputedRef<any>;
+    operationSearch: import("vue").ComputedRef<any>;
+};