@ramathibodi/nuxt-commons 0.0.10 → 0.1.0

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

@@ -0,0 +1,264 @@
+<script lang="ts" setup>
+import { VDataTable } from 'vuetify/components/VDataTable'
+import { ref, watch, nextTick, defineOptions } from 'vue'
+import type { FormDialogCallback } from './Dialog.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
+  title: string
+  noDataText?: string
+  modelValue?: Record<string, any>[]
+  modelKey?: string
+  dialogFullscreen?: boolean
+  initialData?: Record<string, any>
+  toolbarColor?: string
+  importable?: boolean
+  exportable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  noDataText: 'ไม่พบข้อมูล',
+  dialogFullscreen: false,
+  modelKey: 'id',
+  toolbarColor: 'primary',
+  importable: true,
+  exportable: true,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const attrs = useAttrs()
+const plainAttrs = computed(() => {
+  return useOmit(attrs, ['modelValue', 'onUpdate:modelValue'])
+})
+
+const items = ref<Record<string, any>[]>([])
+const search = ref<string>()
+const currentItem = ref<Record<string, any> | undefined>(undefined)
+
+const isDialogOpen = ref<boolean>(false)
+
+watch(() => props.modelValue, (newValue) => {
+  if (!Array.isArray(newValue) || !newValue.every(item => typeof item === 'object')) {
+    items.value = []
+  }
+  else {
+    let maxKey = 0
+
+    newValue.forEach((item) => {
+      if (!item.hasOwnProperty(props.modelKey)) {
+        maxKey = Math.max(maxKey, ...newValue.map(i => i[props.modelKey] || 0))
+        item[props.modelKey] = maxKey + 1
+      }
+    })
+
+    items.value = newValue
+  }
+}, { immediate: true })
+
+watch(items, (newValue) => {
+  emit('update:modelValue', newValue)
+}, { deep: true })
+
+function createItem(item: Record<string, any>, callback?: FormDialogCallback) {
+  item[props.modelKey] = Math.max(...items.value.map(i => i[props.modelKey] || 0)) + 1
+
+  items.value.push(item)
+
+  if (callback) callback.done()
+}
+
+function importItems(importItems: Record<string, any>[], callback?: FormDialogCallback) {
+  importItems.forEach((item) => {
+    createItem(item)
+  })
+  if (callback) callback.done()
+}
+
+function updateItem(newItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === newItem[props.modelKey])
+
+  if (index !== -1) {
+    items.value[index] = newItem
+  }
+
+  if (callback) callback.done()
+}
+
+function moveUpItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
+
+  if (index > 0) {
+    const temp = items.value[index - 1]
+    items.value[index - 1] = items.value[index]
+    items.value[index] = temp
+  }
+
+  if (callback) callback.done()
+}
+
+function moveDownItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
+
+  if (index < items.value.length - 1) {
+    const temp = items.value[index + 1]
+    items.value[index + 1] = items.value[index]
+    items.value[index] = temp
+  }
+
+  if (callback) callback.done()
+}
+
+function deleteItem(deleteItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === deleteItem[props.modelKey])
+
+  if (index !== -1) {
+    items.value.splice(index, 1)
+  }
+
+  if (callback) callback.done()
+}
+
+const operation = ref({ createItem, updateItem, deleteItem, moveUpItem, moveDownItem })
+
+function openDialog(item?: object) {
+  currentItem.value = item
+  nextTick(() => {
+    isDialogOpen.value = true
+  })
+}
+</script>
+
+<template>
+  <v-card>
+    <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-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
+          :color="toolbarColor"
+          prepend-icon="mdi mdi-plus"
+          variant="flat"
+          @click="openDialog()"
+        >
+          add
+        </VBtn>
+      </VToolbarItems>
+    </VToolbar>
+    <v-data-table
+      v-bind="plainAttrs"
+      color="primary"
+      :items="items"
+      :search="search"
+    >
+      <!-- @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.operation']"
+        #item.operation="props"
+      >
+        <v-btn
+          :disabled="props.index==0"
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-arrow-up-thick"
+          @click="moveUpItem(props.item)"
+        />
+        <v-btn
+          :disabled="props.index==items.length-1"
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-arrow-down-thick"
+          @click="moveDownItem(props.item)"
+        />
+      </template>
+      <template
+        v-if="!$slots['item.action']"
+        #item.action="{ item }"
+      >
+        <v-btn
+          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)"
+        />
+      </template>
+    </v-data-table>
+    <FormDialog
+      v-model="isDialogOpen"
+      :title="title"
+      :fullscreen="dialogFullscreen"
+      :initial-data="initialData"
+      :form-data="currentItem"
+      @create="createItem"
+      @update="updateItem"
+    >
+      <template #default="slotData">
+        <slot
+          name="form"
+          v-bind="slotData"
+        />
+      </template>
+    </FormDialog>
+  </v-card>
+</template>

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

@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import {VAutocomplete} from 'vuetify/components/VAutocomplete'
+import {concat, isEmpty} from 'lodash-es'
+import {computed, ref, watch} from 'vue'
+import {watchDebounced} from '@vueuse/core'
+import {useFuzzy} from '../../composables/utils/fuzzy'
+import {useGraphQl} from '../../composables/graphql'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {
+  fuzzy?: boolean
+  groupKey: string
+  lang?: 'TH' | 'EN'
+  fields?: string[]
+  noDataText?: string
+  filterText?: string
+  waitForFilter?: boolean
+  waitForFilterText?: string
+  modelValue?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fuzzy: true,
+  noDataText: 'ไม่พบข้อมูล',
+  lang: 'TH',
+  waitForFilter: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const masterItems = ref<Array<any>>([])
+const items = ref<Array<any>>([])
+const selectedItem = ref<any>()
+
+const searchData = ref<string>('')
+
+const isLoading = ref(false)
+const isErrorLoading = ref(false)
+
+function query(groupKey: string, filterText: string | undefined) {
+  let operation = 'masterItemByGroupKey'
+
+  const variables: Record<string, any> = { groupKey: { value: groupKey, required: true } }
+  if (filterText) {
+    variables['filterText'] = { value: filterText }
+    operation = 'masterItemByGroupKeyAndFilterText'
+  }
+
+  let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
+  if (props.fields) fields = concat(fields, props.fields)
+
+  isLoading.value = true
+
+  useGraphQl().queryPromise(operation, fields, variables).then((result: any) => {
+    masterItems.value = result
+    items.value = result
+    isErrorLoading.value = false
+  }).catch((error) => {
+    console.log(error)
+    isErrorLoading.value = true
+  }).finally(() => {
+    isLoading.value = false
+  })
+}
+
+watch(() => props.waitForFilter && !props.filterText, (newValue) => {
+  if (newValue) {
+    masterItems.value = []
+    items.value = []
+    selectedItem.value = undefined
+  }
+  else {
+    query(props.groupKey, props.filterText)
+  }
+}, { immediate: true })
+
+watch(() => props.modelValue, (newValue) => {
+  selectedItem.value = newValue
+}, { immediate: true })
+
+watch(selectedItem, (newValue) => {
+  emit('update:modelValue', newValue)
+})
+
+async function fuzzySearch() {
+  if (props.fuzzy) {
+    if (isEmpty(searchData.value)) {
+      items.value = masterItems.value
+    }
+    else {
+      let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
+      if (props.fields) fields = concat(fields, props.fields)
+
+      const results: any = useFuzzy(searchData.value, masterItems.value, fields)
+      items.value = []
+      if (results.value.length) {
+        for (let i = 0; results.value.length > i; i++) {
+          if (results.value[i].item) items.value.push(results.value[i].item)
+        }
+      }
+    }
+  }
+}
+
+watchDebounced(searchData, fuzzySearch, { debounce: 1000, maxWait: 5000 })
+
+const itemTitleField = computed(() => {
+  if (props.lang == 'TH') return 'itemValue'
+  else return 'itemValueAlternative'
+})
+
+const computedNoDataText = computed(() => {
+  if (props.waitForFilter && !props.filterText) return props.waitForFilterText
+  return props.noDataText
+})
+</script>
+
+<template>
+  <v-autocomplete
+    v-model="selectedItem"
+    v-model:search="searchData"
+    v-bind="$attrs"
+    :items="items"
+    :no-filter="props.fuzzy"
+    :item-title="itemTitleField"
+    item-value="itemCode"
+    :no-data-text="computedNoDataText"
+    :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"
+      #item="{ props, item }"
+    >
+      <v-list-item
+        v-bind="props"
+        :title="item.title || item.raw.itemValue || item.raw.itemCode"
+      />
+    </template>
+    <template
+      v-if="isErrorLoading"
+      #append
+    >
+      <v-icon color="error">
+        mdi mdi-alert
+      </v-icon>
+    </template>
+  </v-autocomplete>
+</template>

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

@@ -0,0 +1,9 @@
+import type { UseFetchOptions } from 'nuxt/app';
+import type { SearchParameters } from 'ofetch';
+export declare function useApi(): {
+    urlBuilder: (url: string | string[]) => string;
+    get: (url: string | string[], body?: Record<string, any> | [], params?: SearchParameters, options?: UseFetchOptions<unknown>) => any;
+    getPromise: (url: string | string[], body?: Record<string, any> | [], params?: SearchParameters, options?: UseFetchOptions<unknown>) => Promise<unknown>;
+    post: (url: string | string[], body?: Record<string, any> | [], params?: SearchParameters, options?: UseFetchOptions<unknown>) => any;
+    postPromise: (url: string | string[], body?: Record<string, any> | [], params?: SearchParameters, options?: UseFetchOptions<unknown>) => Promise<unknown>;
+};

package/dist/runtime/composables/api.mjs

@@ -0,0 +1,64 @@
+import { trimEnd, trimStart } from "lodash-es";
+import { useRuntimeConfig, useFetch } from "#imports";
+export function useApi() {
+  const config = useRuntimeConfig();
+  function urlBuilder(url) {
+    let returnUrl = "";
+    if (Array.isArray(url)) {
+      if (url[0].toLowerCase() == "agent")
+        url[0] = config?.public.WS_AGENT;
+      returnUrl = url.join("/");
+    } else {
+      returnUrl = url;
+    }
+    if (returnUrl.startsWith("http://") || returnUrl.startsWith("https://"))
+      return returnUrl;
+    else
+      return trimEnd(config?.public.WS_API, "/") + "/" + trimStart(returnUrl, "/");
+  }
+  function optionBuilder(method, body, params, options) {
+    let returnOption = {
+      method,
+      body,
+      query: params
+    };
+    const headers = {
+      "Content-Type": "application/json",
+      "Accept": "application/json"
+    };
+    if (options) {
+      options = Object.assign(options, returnOption);
+      if (options.headers)
+        options.headers = Object.assign(options.headers, headers);
+      else
+        options.headers = headers;
+    }
+    returnOption = Object.assign(returnOption, options);
+    return returnOption;
+  }
+  function get(url, body, params, options) {
+    return useFetch(urlBuilder(url), optionBuilder("GET", body, params, options));
+  }
+  function getPromise(url, body, params, options) {
+    return new Promise(async (resolve, reject) => {
+      const { data, error } = await get(url, body, params, options);
+      if (!error.value)
+        resolve(data.value);
+      else
+        reject(error.value);
+    });
+  }
+  function post(url, body, params, options) {
+    return useFetch(urlBuilder(url), optionBuilder("POST", body, params, options));
+  }
+  function postPromise(url, body, params, options) {
+    return new Promise(async (resolve, reject) => {
+      const { data, error } = await post(url, body, params, options);
+      if (!error.value)
+        resolve(data.value);
+      else
+        reject(error.value);
+    });
+  }
+  return { urlBuilder, get, getPromise, post, postPromise };
+}

package/dist/runtime/composables/document/template.d.ts

@@ -0,0 +1,2 @@
+export declare const validationRulesRegex: RegExp;
+export declare function useDocumentTemplate(items: string | object): string;

package/dist/runtime/composables/document/template.mjs

@@ -0,0 +1,104 @@
+export const validationRulesRegex = /^(require(?:\([^)]*\))?|requireIf(?:\([^)]*\))?|requireTrue(?:\([^)]*\))?|requireTrueIf(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range(?:\([^)]*\))?|integer(?:\([^)]*\))?|unique(?:\([^)]*\))?|length(?:\([^)]*\))?|lengthGreater(?:\([^)]*\))?|lengthLess(?:\([^)]*\))?|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex(?:\([^)]*\))?)(,(require(?:\([^)]*\))?|requireIf(?:\([^)]*\))?|requireTrue(?:\([^)]*\))?|requireTrueIf(?:\([^)]*\))?|numeric(?:\([^)]*\))?|range(?:\([^)]*\))?|integer(?:\([^)]*\))?|unique(?:\([^)]*\))?|length(?:\([^)]*\))?|lengthGreater(?:\([^)]*\))?|lengthLess(?:\([^)]*\))?|telephone(?:\([^)]*\))?|email(?:\([^)]*\))?|regex(?:\([^)]*\))?))*$/;
+export function useDocumentTemplate(items) {
+  if (!items)
+    return "";
+  if (typeof items === "string") {
+    try {
+      items = JSON.parse(items);
+    } catch (_) {
+      return items;
+    }
+  }
+  if (!Array.isArray(items) || !items.every((item) => typeof item === "object" && item !== null)) {
+    return "";
+  }
+  let templateString = items.map((item) => templateItemToString(item)).join("");
+  templateString = `<v-container fluid><v-row dense>${templateString}</v-row></v-container>`;
+  return templateString;
+}
+function templateItemToString(item) {
+  let optionString = "";
+  let validationRules = "";
+  if (item.inputOptions) {
+    if (item.inputType == "MasterAutocomplete") {
+      optionString += 'groupKey="' + item.inputOptions + '" ';
+    }
+    if (item.inputType == "VSelect") {
+      const choice = optionStringToChoiceObject(item.inputOptions);
+      console.log(choice);
+      optionString = `item-value="value" item-title="label" :items='` + JSON.stringify(choice).replaceAll("'", "&#39;") + "' ";
+    }
+    if (item.inputType == "VRadio" || item.inputType == "VRadioInline") {
+      const choice = optionStringToChoiceObject(item.inputOptions);
+      optionString = choice.map((choiceItem) => `<v-radio label="${choiceItem.label}" value="${choiceItem.value}"></v-radio>`).join("");
+    }
+    if (item.inputType == "Header") {
+      optionString = item.inputOptions.split(",").join(" ");
+    }
+  }
+  if (item.inputType == "FormDateTime" && !item.inputAttributes?.includes("dense"))
+    item.inputAttributes = (item.inputAttributes?.trim() + " dense").trim();
+  if (item.validationRules)
+    validationRules = buildValidationRules(item.validationRules);
+  let templateString = "";
+  switch (item.inputType) {
+    case "CustomCode":
+      templateString = `${item.inputCustomCode}`;
+      break;
+    case "VRadio":
+      templateString = `<v-radio-group v-model="data.${item.variableName}" label="${item.inputLabel || item.variableName}"${validationRules ? " " + validationRules.trim() : ""}>${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
+      break;
+    case "VRadioInline":
+      templateString = `<v-radio-group v-model="data.${item.variableName}" inline${validationRules ? " " + validationRules.trim() : ""}><template #prepend>${item.inputLabel || item.variableName}</template>${optionString ? " " + optionString.trim() : ""}</v-radio-group>`;
+      break;
+    case "Separator":
+      templateString = `</v-row><v-row dense>`;
+      break;
+    case "Header":
+      templateString = `<div class="${optionString ? optionString.trim() : "text-h4 font-weight-medium"}">${item.inputLabel || item.variableName}</div>`;
+      break;
+    default:
+      templateString = `<${item.inputType} v-model="data.${item.variableName}" label="${item.inputLabel || item.variableName}"${item.inputAttributes ? " " + item.inputAttributes : ""}${optionString ? " " + optionString.trim() : ""}${validationRules ? " " + validationRules.trim() : ""}></${item.inputType}>`;
+  }
+  if (!["Separator", "Header"].includes(item.inputType))
+    templateString = `<v-col${item.width ? ' cols="' + item.width + '"' : ""}${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col>`;
+  if (["Header"].includes(item.inputType))
+    templateString = `</v-row><v-row dense><v-col${item.columnAttributes ? " " + item.columnAttributes : ""}>${templateString}</v-col></v-row><v-row dense>`;
+  return templateString;
+}
+function optionStringToChoiceObject(option) {
+  let returnObject = [];
+  if (/^[^'",]+(,[^'",]+)*$/.test(option.trim())) {
+    returnObject = option.split(",").map((item) => {
+      item = item.trim();
+      if (item.includes("|")) {
+        const [label, value] = item.split("|").map((str) => str.trim().replace(/^['"]|['"]$/g, ""));
+        return { label, value };
+      } else {
+        item = item.replace(/^['"]|['"]$/g, "");
+        return { label: item, value: item };
+      }
+    });
+  }
+  return returnObject;
+}
+function buildValidationRules(validationString) {
+  validationString = validationString.trim();
+  if (validationString.startsWith("["))
+    validationString = validationString.substring(1);
+  if (validationString.endsWith("]"))
+    validationString = validationString.substring(0, validationString.length - 1);
+  if (!validationRulesRegex.test(validationString))
+    return "";
+  validationString = validationString.split(",").map((rule) => {
+    rule = rule.trim();
+    if (!rule.startsWith("rules.")) {
+      rule = "rules." + rule;
+    }
+    if (!/\(.+\)$/.test(rule)) {
+      rule = rule + "()";
+    }
+    return rule.replaceAll('"', "'");
+  }).join(",");
+  return `:rules="[${validationString}]"`;
+}

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

@@ -0,0 +1,17 @@
+import { type ClassConstructor } from '../utils/object';
+declare type VariableOptions = {
+    type?: string;
+    name?: string;
+    value: any;
+    list?: boolean | [boolean];
+    required?: boolean;
+} | {
+    [k: string]: any;
+};
+export declare function useGraphQl(): {
+    query: <T>(operation: string, fields: Array<string | Object> | ClassConstructor<any>, variables?: VariableOptions, cache?: boolean) => any;
+    queryPromise: <T_1>(operation: string, fields: Array<string | Object> | ClassConstructor<any>, variables?: VariableOptions, cache?: boolean) => Promise<T_1>;
+    mutation: <T_2>(operation: string, fields: Array<string | Object> | ClassConstructor<any>, variables?: VariableOptions) => any;
+    mutationPromise: <T_3>(operation: string, fields: Array<string | Object> | ClassConstructor<any>, variables?: VariableOptions) => Promise<T_3>;
+};
+export {};

package/dist/runtime/composables/graphql.mjs

@@ -0,0 +1,61 @@
+import { query as gqlQuery, mutation as gqlMutation } from "gql-query-builder";
+import { useQuery } from "@vue/apollo-composable";
+import { classAttributes, isClassConstructor } from "../utils/object.mjs";
+import { gql, useAsyncQuery, useMutation } from "#imports";
+export function useGraphQl() {
+  function query(operation, fields, variables, cache = false) {
+    if (isClassConstructor(fields))
+      fields = classAttributes(fields);
+    const builder = gqlQuery({ operation, fields, variables });
+    const options = {
+      query: gql(builder.query),
+      variables: builder.variables,
+      cache
+    };
+    return useAsyncQuery(options);
+  }
+  function queryPromise(operation, fields, variables, cache = false) {
+    if (isClassConstructor(fields))
+      fields = classAttributes(fields);
+    const builder = gqlQuery({ operation, fields, variables });
+    return new Promise((resolve, reject) => {
+      const { onResult, onError } = useQuery(gql(builder.query), builder.variables, { fetchPolicy: cache ? "cache-first" : "no-cache" });
+      onResult((queryResult) => {
+        const dataObject = queryResult.data;
+        try {
+          resolve(dataObject[operation]);
+        } catch (error) {
+          reject(error);
+        }
+      });
+      onError((error) => {
+        reject(error);
+      });
+    });
+  }
+  function mutation(operation, fields, variables) {
+    if (isClassConstructor(fields))
+      fields = classAttributes(fields);
+    const builder = gqlMutation({ operation, fields, variables });
+    return useMutation(gql(builder.query), { variables: builder.variables });
+  }
+  function mutationPromise(operation, fields, variables) {
+    if (isClassConstructor(fields))
+      fields = classAttributes(fields);
+    const builder = gqlMutation({ operation, fields, variables });
+    return new Promise(async (resolve, reject) => {
+      const { mutate, error } = useMutation(gql(builder.query), { variables: builder.variables });
+      if (!error.value) {
+        try {
+          const results = await mutate();
+          resolve(results.data[operation]);
+        } catch (e) {
+          reject(e);
+        }
+      } else {
+        reject(error.value);
+      }
+    });
+  }
+  return { query, queryPromise, mutation, mutationPromise };
+}