@ramathibodi/nuxt-commons 0.1.56 → 0.1.58

package/dist/runtime/components/label/DateCount.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { DateTime } from "luxon";
+import { computed } from "vue";
+
+type Locale = "th" | "en" | "en-US" | "th-TH";
+
+interface Props {
+  modelValue: DateTime;
+  endDate?: DateTime;
+  locale?: Locale;
+  zeroBase?: boolean; // true = start at 0, false = start at 1
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: "th",
+  zeroBase: true,
+});
+
+const normalizeLocale = (locale: Locale): "en" | "th" =>
+    locale.startsWith("en") ? "en" : "th";
+
+const countDate = computed(() => {
+  const base = props.endDate ?? DateTime.now();
+  const baseLocale = normalizeLocale(props.locale);
+
+  let days = Math.floor(base.diff(props.modelValue, "days").days ?? 0);
+
+  if (!props.zeroBase) days += 1;
+
+  if (baseLocale === "en") {
+    return days === 1 ? "1 day" : `${days} days`;
+  }
+
+  return `${days} วัน`;
+});
+</script>
+
+<template>
+  <span>{{ countDate }}</span>
+</template>

package/dist/runtime/components/label/Object.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import {joinObject} from "../../utils/formatter";
+
+interface Props {
+  object: any,
+  attribute?: string,
+  separator?: string,
+}
+const props = withDefaults(defineProps<Props>(), {
+})
+</script>
+<template>
+  <span>{{joinObject(object,attribute,separator)}}</span>
+</template>

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

@@ -1,95 +1,30 @@
 <script lang="ts" setup>
-import {VAutocomplete} from 'vuetify/components/VAutocomplete'
-import {union} from 'lodash-es'
-import {computed} from 'vue'
+import { VAutocomplete } from 'vuetify/components/VAutocomplete'
+import { withDefaults } from 'vue'
+import { useLookupListMaster, type MasterLikeProps } from '../../composables/lookupListMaster'
 
-interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {
-  sortBy?: 'itemCode' | 'itemValue'
-  showCode?: boolean
+interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {}
 
-  groupKey: string
-  itemCodes?: string[]
-  lang?: 'TH' | 'EN'
-  fields?: Array<string | object>
-  noDataText?: string
-  filterText?: string
-  waitForFilter?: boolean
-  waitForFilterText?: string
-
-  meilisearch?: boolean
-
-  cache?: boolean | number
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props & MasterLikeProps>(), {
   sortBy: 'itemValue',
   showCode: false,
-
   lang: 'TH',
   noDataText: 'ไม่พบข้อมูล',
   waitForFilter: false,
-
   meilisearch: false,
-
   cache: false,
 })
 
-const computedModelName = computed(()=>{
-  let operation = 'masterItemByGroupKey'
-  if (props.filterText) operation = 'masterItemByGroupKeyAndFilterText'
-  if (props.itemCodes && props.itemCodes.length>0) operation = 'masterItemByGroupKeyAndItemCodeIn'
-  if (props.meilisearch) operation = 'masterItemByGroupKeyAndFilterTextAndKeyword'
-  if (props.waitForFilter && !props.filterText) operation = ""
-  return operation
-})
-
-const computedModelBy = computed(()=>{
-  let modelBy : Record<string,any> = {groupKey: props.groupKey}
-  if (props.filterText) {
-    modelBy["filterText"] = props.filterText
-  }
-  if (props.itemCodes && props.itemCodes.length>0) {
-    modelBy["itemCodes"] = props.itemCodes
-  }
-  return modelBy
-})
-
-const computedModelSelectedItemBy = computed(()=>{
-  return {groupKey: props.groupKey}
-})
-
-const computedFields = computed(()=>{
-  let fields : Array<string | object> = []
-  if (props.filterText) fields.push('filterText')
-  if (props.meilisearch) fields.push('_formatted')
-  return union(['itemCode', 'itemValue', 'itemValueAlternative'],fields,props.fields || [])
-})
-
-const itemTitleField = computed(() => {
-  return (props.lang == 'TH') ? 'itemValue' : 'itemValueAlternative'
-})
-
-const formatItemTitle = (item: any)=>{
-  if (props.meilisearch) {
-    return (props.showCode ? item.raw?._formatted?.itemCode+'-' : '')+(item.raw?._formatted?.[itemTitleField.value] || item.raw?._formatted?.itemValue || item.raw?._formatted?.itemCode)
-  } else {
-    return (props.showCode ? item.raw.itemCode+'-' : '')+(item.title || item.raw.itemValue || item.raw.itemCode)
-  }
-}
-
-const computedNoDataText = computed(() => {
-  if (props.waitForFilter && !props.filterText) return props.waitForFilterText
-  return props.noDataText
-})
-
-const computedSortBy = computed(()=>{
-  if (props.sortBy == 'itemValue') {
-    if (props.showCode) return ['itemCode']
-    else return [itemTitleField.value,'itemValue','itemCode']
-  } else {
-    return [props.sortBy]
-  }
-})
+const {
+  computedModelName,
+  computedModelBy,
+  computedModelSelectedItemBy,
+  computedFields,
+  itemTitleField,
+  computedNoDataText,
+  computedSortBy,
+  formatItemTitle,
+} = useLookupListMaster(props)
 </script>
 
 <template>
@@ -109,43 +44,25 @@ const computedSortBy = computed(()=>{
       :model-selected-item-by="computedModelSelectedItemBy"
       model-selected-item-key="itemCodes"
   >
-    <template
-        v-for="(_, name, index) in ($slots as {})"
-        :key="index"
-        #[name]="slotData"
-    >
-      <slot
-          :name="name"
-          v-bind="((slotData || {}) as object)"
-          :operation="operation"
-      />
+    <!-- pass-through slots -->
+    <!-- @ts-ignore -->
+    <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
+      <slot :name="name" v-bind="((slotData || {}) as object)" :operation="computedModelName" />
     </template>
 
-    <template
-        v-if="!$slots.item && !meilisearch"
-        #item="{ props, item }"
-    >
-      <v-list-item
-          v-bind="props"
-          :title="formatItemTitle(item)"
-      />
+    <template v-if="!$slots.item && !props.meilisearch" #item="{ props: itemProps, item }">
+      <v-list-item v-bind="itemProps" :title="formatItemTitle(item)" />
     </template>
 
-    <template
-        v-if="!$slots.item && meilisearch"
-        #item="{ props, item }"
-    >
-      <v-list-item v-bind="props">
+    <template v-if="!$slots.item && props.meilisearch" #item="{ props: itemProps, item }">
+      <v-list-item v-bind="itemProps">
         <template #title v-if="item.raw?._formatted?.itemValue">
           <span v-html="formatItemTitle(item)" class="meilisearch-item"></span>
         </template>
       </v-list-item>
     </template>
 
-    <template
-        v-if="!$slots.selection && showCode"
-        #selection="{ item }"
-    >
+    <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
       {{ formatItemTitle(item) }}
     </template>
   </model-autocomplete>
@@ -153,4 +70,4 @@ const computedSortBy = computed(()=>{
 
 <style>
 .meilisearch-item em{font-weight:700}
-</style>
+</style>

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

@@ -1,97 +1,73 @@
-<script setup lang="ts">
-import {VCombobox} from 'vuetify/components/VCombobox'
-import {computed, ref, watch} from 'vue'
-import {concat} from 'lodash-es'
-import {useAlert} from '../../composables/alert'
-import {useGraphQl} from '../../composables/graphql'
+<script lang="ts" setup>
+import { VCombobox } from 'vuetify/components/VCombobox'
+import { withDefaults } from 'vue'
+import { useLookupListMaster, type MasterLikeProps } from '../../composables/lookupListMaster'
 
-interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props']> {
-  modelValue?: string
-  groupKey: string
-  fields?: string[]
-  lang?: 'TH' | 'EN'
-}
+interface Props extends /* @vue-ignore */ InstanceType<typeof VCombobox['$props']> {}
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props & MasterLikeProps>(), {
+  sortBy: 'itemValue',
+  showCode: false,
   lang: 'TH',
+  noDataText: 'ไม่พบข้อมูล',
+  waitForFilter: false,
+  meilisearch: false,
+  cache: false,
 })
 
-const emit = defineEmits(['update:modelValue'])
-const items = ref<Array<any>>([])
-const alert = useAlert()
-const selectedItem = ref<any>()
-function query() {
-  const variables: Record<string, any> = { groupKey: { value: props.groupKey, required: true } }
-  let fields: any[] = ['itemCode', 'itemValue', 'itemValueAlternative']
-  if (props.fields) fields = concat(fields, props.fields)
-
-  useGraphQl().queryPromise('masterItemByGroupKey', fields, variables).then((result: any) => {
-    items.value = result
-  }).catch((error) => {
-    alert?.addAlert({
-      message: `${error.message}`,
-      alertType: 'error',
-    })
-  })
-}
-
-watch(() => props.groupKey, () => {
-  query()
-}, { immediate: true })
-
-watch(selectedItem, (newValue) => {
-  emit('update:modelValue', newValue.itemCode)
-})
-
-watch(
-    () => props.modelValue,
-    (newVal) => {
-      if (newVal && items.value.length > 0) {
-        const found = items.value.find(item => item.itemCode === newVal)
-        if (found) selectedItem.value = found
-      }
-    },
-    { immediate: true }
-)
-
-const itemTitleField = computed(() => {
-  if (props.lang == 'TH') return 'itemValue'
-  else return 'itemValueAlternative'
-})
-
-query()
+const {
+  computedModelName,
+  computedModelBy,
+  computedModelSelectedItemBy,
+  computedFields,
+  itemTitleField,
+  computedNoDataText,
+  computedSortBy,
+  formatItemTitle,
+} = useLookupListMaster(props)
 </script>
 
 <template>
-  <v-combobox
-    v-model="selectedItem"
-    :items="items"
-    :item-title="itemTitleField"
-    item-value="itemCode"
+  <model-combobox
+      :model-name="computedModelName"
+      :model-by="computedModelBy"
+      :fields="computedFields"
+      :sort-by="computedSortBy"
+      :item-title="itemTitleField"
+      item-value="itemCode"
+      :no-data-text="computedNoDataText"
+      :show-code="props.showCode"
+      :cache="props.cache && !props.meilisearch"
+      :server-search="props.meilisearch && !!computedModelName"
+      server-search-key="keyword"
+      model-selected-item="masterItemByGroupKeyAndItemCodeIn"
+      :model-selected-item-by="computedModelSelectedItemBy"
+      model-selected-item-key="itemCodes"
   >
-    <template
-      v-for="(_, name, index) in ($slots as {})"
-      :key="index"
-      #[name]="slotData"
-    >
-      <slot
-        :name="name"
-        v-bind="((slotData || {}) as object)"
-        :operation="operation"
-      />
+    <!-- pass-through slots -->
+    <!-- @ts-ignore -->
+    <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
+      <slot :name="name" v-bind="((slotData || {}) as object)" :operation="computedModelName" />
     </template>
-    <template
-      v-if="!$slots.item"
-      #item="{ props, item }"
-    >
-      <v-list-item
-        v-bind="props"
-        :title="item.raw.itemValue"
-      />
+
+    <template v-if="!$slots.item && !props.meilisearch" #item="{ props: itemProps, item }">
+      <v-list-item v-bind="itemProps" :title="formatItemTitle(item)" />
     </template>
-  </v-combobox>
-</template>
 
-<style scoped>
+    <template v-if="!$slots.item && props.meilisearch" #item="{ props: itemProps, item }">
+      <v-list-item v-bind="itemProps">
+        <template #title v-if="item.raw?._formatted?.itemValue">
+          <span v-html="formatItemTitle(item)" class="meilisearch-item"></span>
+        </template>
+      </v-list-item>
+    </template>
+
+    <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
+      {{ formatItemTitle(item) }}
+    </template>
+  </model-combobox>
+</template>
 
+<style>
+.meilisearch-item em{font-weight:700}
 </style>

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

@@ -1,235 +1,36 @@
 <script lang="ts" setup>
 import { VAutocomplete } from 'vuetify/components/VAutocomplete'
-import { union, isEmpty, isArray, sortBy, castArray } from 'lodash-es'
-import { computed, ref, watch, defineModel } from 'vue'
-import { watchDebounced } from '@vueuse/core'
-import { useFuzzy } from '../../composables/utils/fuzzy'
-import { useGraphQlOperation } from '../../composables/graphqlOperation'
+import { defineModel, withDefaults } from 'vue'
+import { useLookupList, type LookupProps } from '../../composables/lookupList'
 
-interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {
-  fuzzy?: boolean
-  sortBy?: string | string[]
-  showCode?: boolean
+interface Props extends /* @vue-ignore */ InstanceType<typeof VAutocomplete['$props']> {}
 
-  modelName: string
-  modelBy?: Record<string, any>
-  itemTitle: string
-  itemValue: string
-  fields?: Array<string | object>
-  cache?: boolean | number
-
-  serverSearch?: boolean
-  serverSearchKey?: string
-  searchSearchSort?: boolean
-  serverSearchDebounce?: number
-
-  serverSearchText?: string
-  serverSearchLoadingText?: string
-
-  modelSelectedItem?: string
-  modelSelectedItemBy?: Record<string, any>
-  modelSelectedItemKey?: string
-
-  filterKeys?: string|string[]
-  noDataText?: string
-  placeholder?: string
-  multiple?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props & LookupProps>(), {
   fuzzy: false,
   showCode: false,
   cache: false,
   serverSearch: false,
   searchSearchSort: false,
-  serverSearchText: "Type to search…",
-  serverSearchLoadingText: "Searching…",
+  serverSearchText: 'Type to search…',
+  serverSearchLoadingText: 'Searching…',
   serverSearchDebounce: 500,
 })
 
 const emit = defineEmits<{
-  (e: 'update:selectedObject', object: any|any[]): void
+  (e: 'update:selectedObject', object: any | any[]): void
 }>()
 
-const modelItems = ref<Array<any>>([])
-const items = ref<Array<any>>([])
-const searchData = ref<string>('')
-
-const isLoading = ref(false)
-const isErrorLoading = ref(false)
-
-const queryFields = computed(() => {
-  let fieldsArray: any[] = [props.itemTitle, props.itemValue]
-  if (props.fields) fieldsArray = union(fieldsArray, props.fields)
-  return fieldsArray
-})
-
-const computedFilterKeys = computed(() => {
-  if (props.filterKeys) return props.filterKeys
-  return ['title','raw.'+props.itemValue]
-})
-
-const computedPlaceholder = computed(() => {
-  if (!props.serverSearch) return props.placeholder
-  return isLoading.value ? props.serverSearchLoadingText : props.serverSearchText
-})
-
-const computedNoDataText = computed(() => {
-  if (!props.serverSearch) return props.noDataText
-  if (isLoading.value) return props.serverSearchLoadingText
-  if (!searchData.value) return props.serverSearchText
-  return props.noDataText
-})
-
-let requestId = 0
-
-async function loadItems() {
-  if (!props.modelName) {
-    modelItems.value = []
-    items.value = []
-    return
-  }
-
-  const id = ++requestId
-  isLoading.value = true
-
-  const variables: Record<string, any> = { ...(props.modelBy || {}) }
-  if (props.serverSearch && props.serverSearchKey) {
-    variables[props.serverSearchKey] = searchData.value
-  }
-
-  try {
-    const result: any = await useGraphQlOperation('Query', props.modelName, queryFields.value, variables, props.cache)
-
-    if (id !== requestId) return
-
-    if (isArray(result)) {
-      modelItems.value = result
-      items.value = result
-      isErrorLoading.value = false
-    } else {
-      isErrorLoading.value = true
-      modelItems.value = []
-      items.value = []
-    }
-  } catch (_error) {
-    if (id !== requestId) return
-    isErrorLoading.value = true
-    modelItems.value = []
-    items.value = []
-  } finally {
-    if (id === requestId) isLoading.value = false
-  }
-}
-
-function applyFuzzy() {
-  if (!props.fuzzy) return
-
-  if (isEmpty(searchData.value)) {
-    items.value = modelItems.value
-    return
-  }
-
-  const results: any = useFuzzy(searchData.value, modelItems.value, queryFields.value)
-  const output: any[] = []
-  if (results.value?.length) {
-    for (let index = 0; index < results.value.length; index++) {
-      const result = results.value[index]
-      if (result?.item) output.push(result.item)
-    }
-  }
-  items.value = output
-}
-
 const selectedItems = defineModel<any>()
-const selectedItemsObject = ref<any[]>([])
-async function syncSelectedFromModelValue() {
-  const modelValueData: any = selectedItems.value
-  const values = castArray(modelValueData).filter(value => value !== undefined && value !== null && value !== '')
-
-  if (!values.length) {
-    emit("update:selectedObject",(props.multiple) ? [] : undefined)
-    selectedItemsObject.value = []
-    return
-  }
-
-  let alreadyInObject : any[] = selectedItemsObject.value?.filter(item => values.includes(item?.[props.itemValue])) || []
-
-  const haveSet = new Set<any>([...alreadyInObject.map(item => item?.[props.itemValue])])
-  const missingValues: any[] = values.filter(value => !haveSet.has(value))
-
-  const stillMissing: any[] = []
-  for (const value of missingValues) {
-    const localHit = modelItems.value.find(item => item?.[props.itemValue] === value)
-    if (localHit) {
-      alreadyInObject.push(localHit)
-      haveSet.add(value)
-    } else {
-      stillMissing.push(value)
-    }
-  }
-
-  if (stillMissing.length && props.modelSelectedItem) {
-    try {
-      const key = props.modelSelectedItemKey || 'id'
-      const variables: Record<string, any> = { ...(props.modelSelectedItemBy || {}) }
-      variables[key] = values
-
-      const result: any = await useGraphQlOperation('Query', props.modelSelectedItem, queryFields.value,variables,props.cache)
-      selectedItemsObject.value = castArray(result)
-    } catch (_error) {
-      void _error
-    }
-  } else {
-    selectedItemsObject.value = alreadyInObject
-  }
 
-  emit("update:selectedObject",(props.multiple) ? selectedItemsObject.value : selectedItemsObject.value[0])
-}
-
-watch(
-  () => [
-    props.modelName,
-    props.serverSearch,
-    props.serverSearchKey,
-    props.cache,
-    props.modelBy,
-    queryFields.value,
-  ],
-  () => loadItems(),
-  { immediate: true, deep: true },
-)
-
-watchDebounced(searchData,()=>{
-  if (props.serverSearch) loadItems()
-  else applyFuzzy()
-},{ debounce: props.serverSearch ? props.serverSearchDebounce : 300, maxWait: 1500 })
-
-watch(()=>modelItems.value, () => {
-  if (!props.serverSearch) applyFuzzy()
-})
-
-watch(()=>props.modelValue,()=>{
-  syncSelectedFromModelValue()
-},{ immediate: true, deep: true })
-
-const computedItems = computed(() => {
-  const sortByField = !props.sortBy || typeof props.sortBy === 'string'
-      ? [props.sortBy || (props.showCode ? props.itemValue : props.itemTitle)]
-      : props.sortBy
-
-  const baseItems = (props.fuzzy  || (props.serverSearch && !props.searchSearchSort)) && !isEmpty(searchData.value)
-      ? items.value
-      : sortBy(items.value, sortByField)
-
-  for (const selectedItem of selectedItemsObject.value || []) {
-    if (!baseItems.find(existingItem => existingItem[props.itemValue] === selectedItem[props.itemValue])) {
-      baseItems.push(selectedItem)
-    }
-  }
-
-  return baseItems
-})
+const {
+  searchData,
+  computedItems,
+  computedFilterKeys,
+  computedPlaceholder,
+  computedNoDataText,
+  isLoading,
+  isErrorLoading,
+} = useLookupList(props, emit, selectedItems)
 </script>
 
 <template>
@@ -247,34 +48,22 @@ const computedItems = computed(() => {
       :no-data-text="computedNoDataText"
       :multiple="props.multiple"
   >
+    <!-- passthrough slots -->
     <!-- @ts-ignore -->
-    <template
-        v-for="(_, name, index) in ($slots as {})"
-        :key="index"
-        #[name]="slotData"
-    >
+    <template v-for="(_, name, index) in ($slots as {})" :key="index" #[name]="slotData">
       <slot :name="name" v-bind="((slotData || {}) as object)" />
     </template>
 
-    <template
-        v-if="!$slots.item"
-        #item="{ props, item }"
-    >
-      <v-list-item
-          v-bind="props"
-          :title="(showCode ? item.value+'-' : '')+item.title"
-      />
+    <template v-if="!$slots.item" #item="{ props: itemProps, item }">
+      <v-list-item v-bind="itemProps" :title="(props.showCode ? item.value + '-' : '') + item.title" />
     </template>
 
-    <template
-        v-if="!$slots.selection && showCode"
-        #selection="{ item }"
-    >
-      {{item.value+'-'+item.title}}
+    <template v-if="!$slots.selection && props.showCode" #selection="{ item }">
+      {{ item.value + '-' + item.title }}
     </template>
 
     <template v-if="isErrorLoading" #append>
       <v-icon color="error">mdi mdi-alert</v-icon>
     </template>
   </v-autocomplete>
-</template>
+</template>