@ramathibodi/nuxt-commons 0.1.37 → 0.1.39

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.37",
+  "version": "0.1.39",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/runtime/components/ExportCSV.vue

@@ -1,43 +1,76 @@
 <script lang="ts" setup>
-import {ref} from 'vue'
+import { ref } from 'vue'
 import * as XLSX from 'xlsx'
-import {VBtn} from 'vuetify/components/VBtn'
-import {useAlert} from '../composables/alert'
+import { VBtn } from 'vuetify/components/VBtn'
+import { useAlert } from '../composables/alert'
 
 interface ExportButtonProps extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
   fileName?: string
+  sheetName?: string
   modelValue?: object[]
 }
 
 const props = withDefaults(defineProps<ExportButtonProps>(), {
   fileName: 'download',
+  sheetName: 'Sheet1',
 })
 
 const alert = useAlert()
 const loading = ref(false)
 
+/**
+ * Triggers file export
+ */
 function exportFile() {
-  if (props.modelValue && Array.isArray(props.modelValue)) {
+  if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
     loading.value = true
-    const workbook = XLSX.utils.book_new()
-    const worksheet = XLSX.utils.json_to_sheet(serializeRoleField(props.modelValue))
-    const fileName = `${props.fileName}.xlsx`
-    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
-    XLSX.writeFile(workbook, fileName)
-    loading.value = false
-  }
-  else {
+
+    try {
+      const workbook = XLSX.utils.book_new()
+      const worksheet = XLSX.utils.json_to_sheet(flattenNestedFields(props.modelValue))
+      const fileName = `${props.fileName}.xlsx`
+
+      XLSX.utils.book_append_sheet(workbook, worksheet, props.sheetName)
+      XLSX.writeFile(workbook, fileName)
+    } catch (error: any) {
+      alert?.addAlert({ message: `Export failed: ${error.message}`, alertType: 'error' })
+    } finally {
+      loading.value = false
+    }
+  } else {
     alert?.addAlert({ message: 'Invalid or no data to export', alertType: 'error' })
   }
 }
 
-const serializeRoleField = (items: any) => {
-  return items.map((item:any) => {
-    if (item.properties && typeof item.properties === 'object') {
-      item.properties = JSON.stringify(item.properties);
+/**
+ * Recursively flattens nested fields for export
+ * @param items - Array of objects to flatten
+ */
+function flattenNestedFields(items: any[]) {
+  return items.map((item: any) => {
+    return flattenObject(item)
+  })
+}
+
+/**
+ * Recursively flattens an object, converting nested keys into dot-separated keys
+ * @param obj - Object to flatten
+ * @param parentKey - Parent key (for recursion)
+ * @param separator - Separator for nested keys
+ */
+function flattenObject(obj: any, parentKey = '', separator = '.') {
+  return Object.keys(obj).reduce((acc: any, key: string) => {
+    const newKey = parentKey ? `${parentKey}${separator}${key}` : key
+    const value = obj[key]
+
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      Object.assign(acc, flattenObject(value, newKey, separator))
+    } else {
+      acc[newKey] = typeof value === 'object' ? JSON.stringify(value) : value
     }
-    return item;
-  });
+
+    return acc
+  }, {})
 }
 </script>
 

package/dist/runtime/components/ImportCSV.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import * as XLSX from 'xlsx'
-import {ref} from 'vue'
-import {useAlert} from '../composables/alert'
+import { ref } from 'vue'
+import { useAlert } from '../composables/alert'
 
 const alert = useAlert()
 const emit = defineEmits<{
@@ -23,15 +23,17 @@ function uploadedFile(files: File[] | File | undefined) {
 
   const fileExtension = files.name.slice(files.name.lastIndexOf('.')).toLowerCase()
   if (!['.xlsx', '.csv'].includes(fileExtension)) {
-    alert?.addAlert({ message: 'Please upload a file with .csv or .xlsx extension only (' + files.name + ')', alertType: 'error' })
+    alert?.addAlert({ message: `Please upload a file with .csv or .xlsx extension only (${files.name})`, alertType: 'error' })
     return
   }
 
   const reader = new FileReader()
   reader.onload = (e: ProgressEvent<FileReader>) => {
     const workbook = XLSX.read(e.target?.result)
-    const parseData = parsePropertiesField(XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]))
-    emit('import', parseData)
+    const parsedData = parseAndAggregateColumns(
+        XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
+    )
+    emit('import', parsedData)
     loading.value = false
     fileBtnRef.value.reset()
   }
@@ -39,14 +41,63 @@ function uploadedFile(files: File[] | File | undefined) {
   reader.readAsArrayBuffer(files)
 }
 
-const parsePropertiesField = (items:any) => {
-  return items.map((item : any) => {
-    if (item.properties && typeof item.properties === 'string') {
-      item.properties = JSON.parse(item.properties);
+/**
+ * Recursively aggregates nested columns and properties.
+ * @param items - Array of data from the Excel sheet
+ */
+const parseAndAggregateColumns = (items: any[]) => {
+  return items.map((item: any) => {
+    const aggregatedItem: any = {}
+
+    for (const key in item) {
+      if (key.includes('.')) {
+        // Extract root key and subKey
+        const [rootKey, ...subKeys] = key.split('.')
+
+        // Recursively aggregate subKeys
+        aggregatedItem[rootKey] = aggregatedItem[rootKey] || {}
+        assignNestedValue(aggregatedItem[rootKey], subKeys, parseIfJson(item[key]))
+      } else {
+        // Directly assign root-level properties
+        aggregatedItem[key] = parseIfJson(item[key])
+      }
     }
-    return item;
-  });
-};
+
+    return aggregatedItem
+  })
+}
+
+/**
+ * Recursively assigns a value to a nested key structure.
+ * @param obj - The object to assign to
+ * @param keys - Array of keys leading to the final property
+ * @param value - The value to assign
+ */
+const assignNestedValue = (obj: any, keys: string[], value: any) => {
+  const [currentKey, ...remainingKeys] = keys
+  if (remainingKeys.length === 0) {
+    obj[currentKey] = value
+  } else {
+    obj[currentKey] = obj[currentKey] || {}
+    assignNestedValue(obj[currentKey], remainingKeys, value)
+  }
+}
+
+/**
+ * Attempt to parse a value as JSON or array.
+ * @param value - The value to parse
+ */
+const parseIfJson = (value: any) => {
+  if (typeof value === 'string') {
+    try {
+      return JSON.parse(value)
+    } catch {
+      // If parsing fails, return the original value
+      return value
+    }
+  }
+  return value
+}
 </script>
 
 <template>

package/dist/runtime/components/document/Form.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import {ref, withDefaults,watch,computed} from 'vue'
+import {graphqlOperation} from '#imports'
+
+interface Props {
+  templateCode: string
+  parentTemplates?: string|string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  parentTemplates: (): string[] => [],
+})
+
+const template = ref<any>()
+const templateScript = ref<string>()
+
+const parentTemplates = computed(()=>{
+  if (typeof props.parentTemplates === 'string') {
+    if (props.parentTemplates && props.parentTemplates!="") return props.parentTemplates.split("|")
+    else return []
+  } else {
+    return props.parentTemplates
+  }
+})
+
+const parentTemplatesNext = computed(()=>{
+  return [...parentTemplates.value,props.templateCode]
+})
+
+watch(()=>props.templateCode,()=>{
+  if (!parentTemplates.value.includes(props.templateCode) && props.templateCode) {
+    if (graphqlOperation["documentTemplateByTemplateCode"]) {
+      graphqlOperation["documentTemplateByTemplateCode"].call(["*"],{templateCode: props.templateCode}).then((result: any)=>{
+        template.value = result.editTemplate
+        templateScript.value = result.templateScript
+      })
+    }
+  }
+},{immediate: true})
+</script>
+<template>
+  <form-pad :template="template" :template-script="templateScript" :parent-templates="parentTemplatesNext"></form-pad>
+</template>

package/dist/runtime/components/document/TemplateBuilder.vue

@@ -2,7 +2,15 @@
 import {computed, ref, watch} from 'vue'
 import * as prettier from 'prettier'
 import prettierPluginHtml from 'prettier/plugins/html'
-import {useDocumentTemplate, validationRulesRegex} from '../../composables/document/template'
+import {useDocumentTemplate, validationRulesRegex,optionStringToChoiceObject} from '../../composables/document/template'
+
+interface Props {
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Document Template"
+})
 
 const emit = defineEmits(['update:modelValue'])
 const modelValue = defineModel<string>()
@@ -49,6 +57,33 @@ const headers = ref([
   },
 ])
 
+const formTableHeaders = ref([
+  {
+    title: 'Title',
+    key: 'title',
+  },
+  {
+    title: 'Key',
+    key: 'key',
+  },
+  {
+    title: 'Width',
+    key: 'width',
+  },
+])
+
+const choiceHeaders = ref([
+  {
+    title: 'Label',
+    key: 'label',
+  },
+  {
+    title: 'Value',
+    key: 'value',
+  },
+])
+
+
 function isValidJsonArrayOfObjects(str: string | undefined) {
   try {
     const parsed = JSON.parse(str as string)
@@ -72,17 +107,48 @@ async function convertToAdvanceMode() {
     modelValue.value = await prettier.format(useDocumentTemplate(templateItems.value).replaceAll('>', '>\n'), { parser: 'html', plugins: [prettierPluginHtml] })
   }
 }
+const inputTypeChoice = ref([
+  { label: 'Text Field', value: 'VTextField' },
+  { label: 'Text Area', value: 'VTextarea' },
+  { label: 'Text Date Picker', value: 'FormDate' },
+  { label: 'Text Time Picker', value: 'FormTime' },
+  { label: 'Text Date & Time Picker', value: 'FormDateTime' },
+  { label: 'Select Dropdown', value: 'VSelect' },
+  { label: 'Select Combobox', value: 'VCombobox' },
+  { label: 'Autocomplete', value: 'VAutocomplete' },
+  { label: 'Autocomplete from Master', value: 'MasterAutocomplete' },
+  { label: 'Radio Buttons', value: 'VRadio' },
+  { label: 'Radio Buttons Inline', value: 'VRadioInline' },
+  { label: 'Checkbox', value: 'VCheckbox' },
+  { label: 'Switch', value: 'VSwitch' },
+  { label: 'File Upload', value: 'FormFile' },
+  { label: 'Signature Pad', value: 'FormSignPad' },
+  { label: 'Table', value: 'FormTable' },
+  { label: '[Decoration] Header', value: 'Header' },
+  { label: '[Decoration] Separator', value: 'Separator' },
+  { label: '[Advanced] Hidden Field', value: 'FormHidden' },
+  { label: '[Advanced] Inherit Form', value: 'DocumentForm' },
+  { label: '[Advanced] Custom Code', value: 'CustomCode' },
+]);
+
+const requireOption = ref(['VSelect', 'VAutocomplete', 'VCombobox', 'VRadio', 'VRadioInline', 'MasterAutocomplete','FormTable','DocumentForm'])
+const notRequireVariable = ref(['Header', 'Separator', 'CustomCode','DocumentForm'])
+const notRequireLabel = ref(['Separator', 'CustomCode', 'FormFile', 'FormHidden','DocumentForm'])
+const notRequireWidth = ref(['Separator', 'FormHidden','DocumentForm'])
+const notRequireOptions = ref(['Separator','CustomCode', 'FormFile'])
+const notRequireRules = ref(['Separator','Header','CustomCode','FormHidden','DocumentForm'])
+const notRequireInputAttributes = ref(['CustomCode','Header', 'FormHidden','DocumentForm'])
+const notRequireColumnAttributes = ref(['Separator', 'FormHidden','DocumentForm'])
+const notRequireAdvancedSetting = ref(['Separator','CustomCode', 'FormHidden'])
 
-const inputTypeChoice = ref(['VTextField', 'VTextarea', 'VSelect', 'VAutocomplete', 'FormDate', 'FormTime', 'FormDateTime', 'VCombobox', 'VRadio', 'VRadioInline', 'VCheckbox', 'VSwitch', 'MasterAutocomplete', 'Header', 'Separator', 'CustomCode', 'FormTable', 'FormHidden', 'FormFile', 'FormSignPad'])
-const requireOption = ref(['VSelect', 'VAutocomplete', 'VCombobox', 'VRadio', 'VRadioInline', 'MasterAutocomplete'])
-const notRequireVariable = ref(['Header', 'Separator', 'CustomCode'])
-const notRequireLabel = ref(['Separator', 'CustomCode', 'FormFile', 'FormSignPad', 'FormTable', 'FormHidden'])
-const notRequireOptions = ref(['CustomCode', 'FormSignPad', 'FormFile', 'FormTable'])
-const notRequireRules = ref(['CustomCode', 'FormSignPad', 'FormFile', 'FormTable' ,'FormHidden'])
-const notRequireInputAttributes = ref(['CustomCode', 'FormHidden'])
-const notRequireColumnAttributes = ref(['Separator', 'FormHidden'])
+const hasSpecificOption = ref(['FormHidden','FormTable'])
 
-const choiceOption = ref(['VSelect', 'VRadio', 'VRadioInline'])
+const choiceOption = ref(['VRadio', 'VRadioInline','VSelect', 'VAutocomplete', 'VCombobox'])
+const inputOptionsLabel = ref<Record<string,string>>({
+  'MasterAutocomplete' : "Group Key",
+  'Header' : "Class",
+  'DocumentForm': "Template Code",
+})
 
 const ruleOptions = (inputType: string) => (value: any) => {
   if (choiceOption.value.includes(inputType) && !(/^[^'",]+(,[^'",]+)*$/.test(value))) return 'Invalid options format'
@@ -96,7 +162,7 @@ const ruleOptions = (inputType: string) => (value: any) => {
     v-if="!isAdvanceMode"
     v-model="templateItems"
     :headers="headers"
-    title="Document Template"
+    :title="props.title"
   >
     <template #toolbarItems>
       <VBtn
@@ -118,19 +184,20 @@ const ruleOptions = (inputType: string) => (value: any) => {
               v-model="data.inputType"
               label="Input Type"
               :items="inputTypeChoice"
+              item-title="label"
+              item-value="value"
+              :return-object="false"
               :rules="[rules.require()]"
             />
           </v-col>
-          <v-col
-            v-if="data.inputType!='Separator'"
-            cols="1"
-          >
+          <v-col cols="1" v-if="!notRequireWidth.includes(data.inputType)">
             <v-text-field
               v-model="data.width"
               label="Width"
               :rules="[rules.require()]"
               type="number"
             />
+            <form-hidden v-model="data.inputOptions" :item-value="data.inputType" :hook="()=>undefined"></form-hidden>
           </v-col>
           <v-col cols="4" v-if="!notRequireLabel.includes(data.inputType)">
             <v-text-field
@@ -150,32 +217,67 @@ const ruleOptions = (inputType: string) => (value: any) => {
               v-if="!notRequireOptions.includes(data.inputType)"
               cols="12"
           >
+            <form-pad v-model="data.inputOptions" v-if="data.inputType=='FormTable'">
+              <template #default="{data: optionData}">
+                <v-row dense>
+                  <v-col cols="12">
+                    <form-table v-model="optionData.headers" :headers="formTableHeaders" title="Headers">
+                      <template #form="{data: headerData,rules}">
+                        <v-container fluid>
+                          <v-row dense>
+                            <v-col cols="6"><v-text-field v-model="headerData.title" label="Title"></v-text-field></v-col>
+                            <v-col cols="3"><v-text-field v-model="headerData.key" label="Key" :rules="[rules.require()]"></v-text-field></v-col>
+                            <v-col cols="3"><v-text-field v-model="headerData.width" label="Width"></v-text-field></v-col>
+                          </v-row>
+                        </v-container>
+                      </template>
+                    </form-table>
+                  </v-col>
+                  <v-col cols="12">
+                    <document-template-builder v-model="optionData.formTemplate" title="Form Template"></document-template-builder>
+                  </v-col>
+                </v-row>
+              </template>
+            </form-pad>
+            <form-pad v-model="data.inputOptions" v-if="data.inputType=='FormHidden'">
+              <template #default="{data: optionData}">
+                <v-row dense>
+                  <v-col cols="12">
+                    <v-text-field
+                        v-model="optionData.hook"
+                        label="Hook"
+                        :rules="[rules.require()]"
+                    />
+                  </v-col>
+                  <v-col cols="12">
+                    <v-text-field
+                        v-model="optionData.itemValue"
+                        label="Item Value"
+                    />
+                  </v-col>
+                </v-row>
+              </template>
+            </form-pad>
+            <form-table v-model="data.inputOptions" :headers="choiceHeaders" title="Choices" v-if="choiceOption.includes(data.inputType) && (!data.inputOptions || typeof data.inputOptions === 'object')">
+              <template #form="{data: optionData,rules}">
+                <v-container fluid>
+                  <v-row dense>
+                    <v-col cols="6"><v-text-field v-model="optionData.label" label="Label"></v-text-field></v-col>
+                    <v-col cols="6"><v-text-field v-model="optionData.value" label="Value" :rules="[rules.require()]"></v-text-field></v-col>
+                  </v-row>
+                </v-container>
+              </template>
+            </form-table>
+            <form-hidden v-model="data.inputOptions" :itemValue="data.inputOptions" :hook="(option: any)=>optionStringToChoiceObject(option)" v-if="choiceOption.includes(data.inputType) && data.inputOptions && typeof data.inputOptions === 'string'"></form-hidden>
             <v-textarea
               v-model="data.inputOptions"
-              label="Input Options"
+              :label="inputOptionsLabel[data.inputType] || 'Input Options'"
               auto-grow
               :rules="[rules.requireIf(requireOption.includes(data.inputType)), ruleOptions(data.inputType)]"
+              v-if="!hasSpecificOption.includes(data.inputType) && !choiceOption.includes(data.inputType)"
             />
           </v-col>
-          <v-col v-if="data.inputType!='CustomCode'">
-            <v-text-field
-              v-model="data.validationRules"
-              label="Validation Rules"
-              :rules="[rules.regex(validationRulesRegex)]"
-            />
-          </v-col>
-          <v-col v-if="data.inputType!='CustomCode'">
-            <v-text-field
-              v-model="data.inputAttributes"
-              label="Input Attributes"
-            />
-          </v-col>
-          <v-col v-if="data.inputType!='Separator'">
-            <v-text-field
-              v-model="data.columnAttributes"
-              label="Column Attributes"
-            />
-          </v-col>
+
           <v-col
             v-if="data.inputType=='CustomCode'"
             cols="12"
@@ -186,25 +288,67 @@ const ruleOptions = (inputType: string) => (value: any) => {
                 :rules="[rules.require()]"
             />
           </v-col>
-          <v-col
-              v-if="data.inputType=='FormTable'"
-              cols="12"
-          >
-            <FormCodeEditor
-                v-model="data.inputFormTable"
-                label="Form Table"
-                :rules="[rules.require()]"
-            />
-          </v-col>
-          <v-col
-              v-if="data.inputType=='FormHidden'"
-              cols="12"
-          >
-            <FormCodeEditor
-                v-model="data.inputFormHidden"
-                label="Form Table"
-                :rules="[rules.require()]"
-            />
+        </v-row>
+        <v-row dense>
+          <v-col>
+            <v-expansion-panels>
+              <v-expansion-panel v-if="!notRequireRules.includes(data.inputType)">
+                <v-expansion-panel-title collapse-icon="mdi mdi-minus" expand-icon="mdi mdi-plus" class="font-weight-bold">Validations</v-expansion-panel-title>
+                <v-expansion-panel-text>
+                  <v-container fluid>
+                    <v-row dense>
+                      <v-col cols="12">
+                        <v-text-field
+                            v-model="data.validationRules"
+                            label="Validation Rules"
+                            :rules="[rules.regex(validationRulesRegex)]"
+                        />
+                        <b>Available rules :</b>     require, requireIf(condition), requireTrue, requireTrueIf(condition), numeric, range(min,max), integer, unique, length(length), lengthGreater(length), lengthLess(length), telephone, email, regex(regex), idcard, DateFuture, DatetimeFuture, DateHappen, DatetimeHappen, DateAfter(date), DateBefore(Date), DateEqual(date)
+                      </v-col>
+                    </v-row>
+                  </v-container>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+              <v-expansion-panel v-if="!notRequireAdvancedSetting.includes(data.inputType)">
+                <v-expansion-panel-title collapse-icon="mdi mdi-minus" expand-icon="mdi mdi-plus" class="font-weight-bold">Advanced settings</v-expansion-panel-title>
+                <v-expansion-panel-text>
+                  <v-container fluid>
+                    <v-row dense>
+                      <v-col cols="12" md="6" v-if="!notRequireInputAttributes.includes(data.inputType)">
+                        <v-text-field
+                            v-model="data.inputAttributes"
+                            label="Input Attributes"
+                        />
+                      </v-col>
+                      <v-col cols="12" md="6" v-if="!notRequireColumnAttributes.includes(data.inputType)">
+                        <v-text-field
+                            v-model="data.columnAttributes"
+                            label="Column Attributes"
+                        />
+                      </v-col>
+                      <v-col cols="12" md="6">
+                        <v-text-field
+                            v-model="data.conditionalDisplay"
+                            label="Conditional Display"
+                        />
+                      </v-col>
+                      <v-col cols="12" md="6">
+                        <v-text-field
+                            v-model="data.computedValue"
+                            label="Computed Value"
+                        />
+                      </v-col>
+                      <v-col cols="12" md="6">
+                        <v-text-field
+                            v-model="data.retrievedValue"
+                            label="Retrieved Value"
+                        />
+                      </v-col>
+                    </v-row>
+                  </v-container>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
           </v-col>
         </v-row>
       </v-container>
@@ -223,14 +367,6 @@ const ruleOptions = (inputType: string) => (value: any) => {
       <template v-if="props.item.inputAttributes">
         <b>Input Attributes :</b> {{ props.item.inputAttributes }}<br>
       </template>
-      <template v-if="props.item.inputType=='FormTable'">
-        <b>Form Table :</b><br>
-        <span style="white-space: pre-line">{{ props.item.inputFormTable }}</span>
-      </template>
-      <template v-if="props.item.inputType=='FormHidden'">
-        <b>Form Hidden :</b><br>
-        <span style="white-space: pre-line">{{ props.item.inputFormHidden }}</span>
-      </template>
     </template>
   </FormTable>
   <FormCodeEditor