@simitgroup/simpleapp-generator 1.0.32 → 1.0.35

package/templates/nuxt/components/SimpleAppAutocompletemulti.vue.eta

@@ -0,0 +1,73 @@
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <AutoComplete         
+        class="simpleapp-inputfield"
+        :inputId="slotprops.uuid"   
+        v-model="selecteditem"
+        v-bind="$attrs"        
+        @item-unselect="deleteValue"
+        :path="setting.instancepath"   
+        @blur="onblur"
+        @item-select="pickValue"
+        forceSelection
+        multiple
+        
+          />          
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+
+import {computed,watch,ref} from 'vue'
+import AutoComplete from 'primevue/autocomplete';
+import FieldContainer from './SimpleFieldContainer.vue'
+import {prepareList} from './helper'
+import type {SimpleAppFieldSetting,ListOptionType} from './type'
+import type { JSONSchema7 } from 'json-schema';
+
+const props = defineProps<{
+    label?:string,    
+    description?:string,
+    error?:string,
+    setting:SimpleAppFieldSetting,
+    instancepath?:string,        
+    displayText?:string
+}>()
+const modelValue = defineModel<any[]>()
+const selecteditem=ref(modelValue.value)
+
+if(props.setting.fieldsetting && props.setting.fieldsetting.format){    
+    const formatarr=props.setting.fieldsetting.format.split(':')    
+}
+watch(modelValue,(newvalue)=>selecteditem.value=newvalue)
+const deleteValue = (event:any)=>{
+    modelValue.value = selecteditem.value
+    console.log(selecteditem.value)
+    // if(typeof event.value.query == 'undefined' && typeof modelValue.value != 'undefined'){
+
+    //     for(let i=0;i< modelValue.value.length;i++){
+    //         if(event.value.ic == modelValue.value[i].ic){
+                
+    //             // modelValue.value =
+    //             modelValue.value.slice(i,0)
+    //             //  delete modelValue.value[i]
+    //             // console.log("sliced ",slicedvalue)
+    //             console.log("Delete item ",i, event.value,modelValue.value)
+    //         }
+    //     }
+    // }
+}
+
+const pickValue = (event:any)=>{
+    if(typeof modelValue.value == 'undefined'){
+        modelValue.value=[]        
+    }
+    if(typeof event.value.query == 'undefined'){        
+        modelValue.value.push(event.value)
+        console.log("pick value",modelValue.value)
+    }
+}
+
+const onblur = ()=>{
+    selecteditem.value=modelValue.value
+}
+</script>

package/templates/nuxt/components/SimpleAppCalendar.vue.eta

@@ -0,0 +1,55 @@
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :error="error"  #default="slotprops">
+    <Calendar
+     v-model="datedata"  
+     :inputId="slotprops.uuid"
+     @update:modelValue="change"
+      :numberOfMonths="2" 
+      v-bind="$attrs"
+      :dateFormat="dateformat"/>
+    </FieldContainer>
+</template>
+<script setup lang="ts">
+import FieldContainer from './SimpleFieldContainer.vue'
+import { ref, watch,computed } from "vue" 
+import moment from 'moment'
+import Calendar from 'primevue/calendar';
+
+
+const x = new Date()
+const date = ref<Date>()
+// const emit = defineEmits(['update:modelValue'])
+const props = defineProps<{
+    label?:string,
+    id?:string,
+    description?:string,
+    setting?:any,
+    error?:string,
+}>()
+const modelValue = defineModel<string>()
+const emit = defineEmits(['update:modelValue'])
+const getDateFormat=():string=>{
+    // const date = new Date();
+    const date = new Date();
+    const datestr = date.toISOString()    
+    let day =date.getDate().toString()
+    day = day.length == 1 ? '0'+day : day
+    let month = (date.getMonth() + 1).toString()
+    month = month.length == 1 ? '0'+month : month
+    const year = date.getFullYear().toString()
+    const dateformat = datestr.replace(year,'yy').replace(month,'mm').replace(day,'dd');
+    return  dateformat
+}
+const datestr:string = modelValue.value??''
+const datedefaultdata = new Date(datestr)
+const dateformat = computed(()=> getDateFormat())
+const datedata = ref(datedefaultdata)
+watch(props,(newvalue)=>{    
+    datedata.value =  new Date(datedefaultdata)
+})
+
+const change = (e:Date)=>{
+    const newdate:string  = moment(e).format("yyyy-MM-DD")
+    emit('update:modelValue',newdate)   
+}
+</script>

package/templates/nuxt/components/SimpleAppCheckbox.vue.eta

@@ -0,0 +1,29 @@
+
+
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <Checkbox
+            class="simpleapp-inputfield"
+            :inputId="slotprops.uuid"
+            v-model="modelValue" 
+            :binary="true"
+            v-bind="$attrs"
+            :path="setting.instancepath"
+         ></Checkbox>         
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+// import {Ref} from 'vue'
+import Checkbox from 'primevue/checkbox';
+import FieldContainer from './SimpleFieldContainer.vue'
+
+const modelValue = defineModel<boolean>()
+const props = defineProps<{
+    label?:string,    
+    description?:string,
+    error?:string,
+    setting:any,
+    instancepath?:string,
+}>()
+
+</script>

package/templates/nuxt/components/SimpleAppChip.vue.eta

@@ -0,0 +1,28 @@
+
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :error="error" #default="slotprops">
+        <Chips class="simpleapp-inputfield simpleapp-inputchip"
+            v-model="modelValue"    
+            :inputId="slotprops.uuid"
+            v-bind="$attrs"
+         ></Chips>         
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue'
+import Chips from 'primevue/chips';
+import FieldContainer from './SimpleFieldContainer.vue'
+// const modelValue = defineModel()
+
+const modelValue=defineModel()
+const props = defineProps<{
+    label?:string,
+    description?:string,
+    setting?:any,
+    error?:string
+}>()
+</script>
+<style >
+
+
+</style>

package/templates/nuxt/components/SimpleAppColor.vue.eta

@@ -0,0 +1,41 @@
+
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <ColorPicker
+            class="simpleapp-inputcolor"
+            :inputId="slotprops.uuid"
+            v-model="modelValue" 
+            v-bind="$attrs"
+            :path="setting.instancepath"
+         ></ColorPicker>         
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue'
+import ColorPicker from 'primevue/colorpicker';
+
+import FieldContainer from './SimpleFieldContainer.vue'
+const modelValue = defineModel()
+const props = defineProps<{
+    label?:string,
+    description?:string,
+    error?:string,
+    setting:any,
+    instancepath?:string,
+}>()
+
+// const modelValue = defineModel<{modelValue?:string}>()
+// console.log(modelValue.value)
+
+
+// const emits = defineEmits(['update:modelValue'])
+// const onchange=(e:any)=>{    
+//     emits('update:modelValue',e.target.value)
+// }
+
+
+// watch(props ,(after,before)=>{
+//     // console.log("B4",before,"after",after)
+//     inputvalue.value=after.modelValue
+// })
+</script>

package/templates/nuxt/components/SimpleAppDatatable.vue.eta

@@ -0,0 +1,20 @@
+<template>
+    <DataTable v-bind="$attrs" class="simpleapp-datatable" stripedRows :value="valueModel">
+        <template #empty> <div class="text-center">No record found.</div> </template>
+        <template #header><slot name="header"></slot></template>
+        <Column v-for="(col,index) in columns" :field="col" :header="camelCaseToWords(col)"></Column>                        
+        <slot >
+
+        </slot>
+    </DataTable>
+</template>
+<script setup lang="ts">
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Button from 'primevue/button';
+import {camelCaseToWords} from './helper'
+const props = defineProps<{columns:string[]}>()
+const valueModel = defineModel<Object[]>()
+
+
+</script>

package/templates/nuxt/components/SimpleAppDocumentNo.vue.eta

@@ -0,0 +1,90 @@
+
+<template>
+    <FieldContainer :hidelabel="hidelabel" v-model="modelValue" :label="label" :description="description"  :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">
+        <div class="p-inputgroup flex-1 ">
+            <InputText class="simpleapp-inputfield" 
+                :inputId="slotprops.uuid"
+                v-model="modelValue"    
+                :placeholder="placeholder"
+                :path="setting.instancepath"
+                :pt="{input:{class:'text-right w-full'}}"                          
+            />
+            <span class="p-inputgroup-addon p p-0">
+                <button class="pi pi-angle-down"  type="button" @click="toggle"></button>
+
+                <OverlayPanel ref="op">                    
+                    <ul>                      
+                        <li v-for="docno in docFormatlist" class="hover-list-primary " >
+                            <a class="flex-row p-2 mt-4" @click="chooseFormat(docno)">
+                                <span class="pi pi-hashtag mr-2"></span>
+                                <span class="">{{docno.docNoFormatName}}</span>
+                                <span class="ml-2 text text-green-600">{{docno.sample}}</span>
+                            </a>
+                        </li>                    
+                    </ul>
+                </OverlayPanel>
+            </span>
+            <!-- {{ Object.getOwnPropertyNames(setting) }} -->
+        </div>
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {ForeignKey} from '~/types'
+import OverlayPanel from 'primevue/overlaypanel';
+import {computed,watch,ref} from 'vue'
+import InputText from 'primevue/inputtext';
+import FieldContainer from './SimpleFieldContainer.vue'
+import {DocNoFormat} from "~/types"
+const selectedformat = ref()
+const op = ref();
+const placeholder = ref('')
+const docFormatlist = ref()
+const modelValue = defineModel<string>()
+const docNoFormat = defineModel<ForeignKey>('docNoFormat')
+// const emit = defineEmits(['update:docNoFormat'])
+
+const props = withDefaults(defineProps<{
+    // docNoFormat:object,
+    // docFormatlist?:DocNoFormat[]
+    label?:string,
+    description?:string,
+    setting:any
+    error?:string,
+    instancepath?:string,
+    hidelabel?:boolean, 
+    
+}>(),{
+    hidelabel:false
+})
+const documenttype = props.setting.document.doctype
+
+
+const toggle = async (event:any) => {
+    op.value.toggle(event);
+    
+        
+}
+
+const chooseFormat =  (item:any) =>{
+    placeholder.value = item.sample    
+    const f = item
+    docNoFormat.value = { _id : f._id, label : f.docNoFormatName}
+    op.value.toggle();
+}
+
+const loadDocFormats = async () =>{
+    docFormatlist.value= await getDocFormats(documenttype)    
+    if(docFormatlist.value.length>0){
+        const f = docFormatlist.value[0]
+        docNoFormat.value = { _id : f._id, label : f.docNoFormatName}
+        placeholder.value = docFormatlist.value[0].sample
+        
+    }
+}
+
+
+onMounted(()=>{
+    loadDocFormats()
+
+})
+</script>

package/templates/nuxt/components/SimpleAppDynamicInput.vue.eta

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type {SimpleAppFieldSetting} from './type';
+import SimpleAppAutocomplete from './SimpleAppAutocomplete.vue';
+import SimpleAppText from './SimpleAppText.vue';
+import SimpleAppSelect from './SimpleAppSelect.vue';
+import type {JSONSchema7} from 'json-schema'
+import {watch} from 'vue'
+import SimpleAppTextarea from './SimpleAppTextarea.vue';
+import SimpleAppCheckbox from './SimpleAppCheckbox.vue';
+
+const props = defineProps<{setting:SimpleAppFieldSetting, getAutocomplete:Function, hidelabel?:boolean}>()
+interface customSchema extends JSONSchema7  {
+    'x-foreignkey'?:string
+}
+
+// by right use 'customSchema', but been force to use any for avoid some error
+const f:any = props.setting.fieldsetting
+const modelValue = defineModel()
+</script>
+<template>    
+    <SimpleAppAutocomplete v-if="f['x-foreignkey']" v-model="modelValue" :setting="props.setting" :hidelabel="hidelabel" :remote-src="getAutocomplete(typeof f['x-foreignkey']=='string' ? f['x-foreignkey'] : f['x-foreignkey']['target'])" optionLabel="label"/>
+    <SimpleAppCheckbox v-else-if="f.type=='boolean'" v-model="modelValue" :setting="props.setting"  :hidelabel="hidelabel"/>
+    <SimpleAppNumber v-else-if="f.type=='number' || f.type=='integer'" v-model="modelValue" :setting="props.setting"  :hidelabel="hidelabel"></SimpleAppNumber>
+    <SimpleAppSelect v-else-if="f.enum" v-model="modelValue" :setting="props.setting"  :hidelabel="hidelabel"></SimpleAppSelect>
+    <SimpleAppChip v-else-if="f.type=='array' && f.items && f.items.type=='string'" v-model="modelValue" :setting="props.setting"  :hidelabel="hidelabel"></SimpleAppChip>
+    <SimpleAppTextarea v-else-if="f.type=='string' && f.format=='text'" v-model="modelValue" :setting="props.setting"  :hidelabel="hidelabel"></SimpleAppTextarea>
+    <SimpleAppText v-else-if="f.type=='string' && f.format" :type="f.format" v-model="modelValue" :setting="props.setting"  :hidelabel="hidelabel"></SimpleAppText>
+    <SimpleAppText v-else v-model="modelValue" :setting="props.setting"  :hidelabel="hidelabel"></SimpleAppText>
+</template>

package/templates/nuxt/components/SimpleAppEditor.vue.eta

@@ -0,0 +1,31 @@
+
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <Editor
+            class="simpleapp-inputfield"
+            :inputId="slotprops.uuid"
+            v-model="modelValue" 
+            v-bind="$attrs"
+            :autoResize="autoResize"
+            :path="setting.instancepath"
+         ></Editor>         
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue'
+import Editor from 'primevue/editor';
+
+
+import FieldContainer from './SimpleFieldContainer.vue'
+const modelValue = defineModel()
+const props = defineProps<{
+    label?:string,
+    id?:string,
+    description?:string,
+    error?:string,
+    setting:any,
+    autoResize?:boolean,
+    instancepath?:string,
+}>()
+
+</script>

package/templates/nuxt/components/SimpleAppForm.vue.eta

@@ -0,0 +1,131 @@
+<template>
+    <form class="simpleapp-form" @submit.prevent="true">
+        <slot name="header"><h3 class="flex flex-col">{{ title }}</h3></slot>
+        <slot  name="default" :data="document.getData()" :getField="getField"></slot>
+    </form>
+</template>
+<script setup lang="ts" >
+import type {SimpleAppFieldSetting} from './type'    
+import { SimpleAppClient } from  '../generate/docs/SimpleAppClient' //'../SimpleAppClient';
+import type { JSONSchema7,JSONSchema7Definition } from 'json-schema';
+
+    const props = defineProps<{
+        title?:string,
+        document: SimpleAppClient<any,any>
+        readonly?:boolean
+    }>()
+    if(!props.document){
+        throw "undefine SimpleAppForm property 'document'"
+    }
+    // const obj = {schema:props.schema,data: props.schema}
+    const getField = (path:string)=>{
+        // console.log("simpleform topath",path)
+        const data = props.document.getData()
+        const schema = props.document.getSchema()
+        const fieldsetting = getPathObject(schema,path)
+        // console.log("setting",fieldsetting)
+        
+        
+        return {
+            path: path,
+            instancepath: getInstancePath(schema,path),
+            fieldsetting: fieldsetting,
+            modelObject: data,
+            document: props.document,
+            apiObj:props.document.getApi(),
+            modelField: 'email',
+            isrequired: getIsRequired(schema,path),
+            errors: props.document.getErrors(),
+            readonly: props.readonly
+        } as SimpleAppFieldSetting
+    }
+
+    //    "schemaPath": "#/properties/email/format",
+
+    const getModelValue=(data:any,path:string)=>{
+
+    }
+    const getIsRequired=(schema:any,path:string)=>{
+        if(!path){
+            console.error('unknown path')
+            return 'xx'
+        }
+
+        try{
+            let paths = path.replace('#/','').split('/')
+            const fieldname = paths[paths.length-1]
+            paths = paths.slice(0, -2);    
+            let tmp = schema
+            for(let i=0;i<paths.length;i++){
+                tmp = tmp[paths[i]]
+                
+            }
+            if(Array.isArray(tmp['required'])   ) {
+                    const arr:string[] = tmp['required']
+                    return arr.includes (fieldname)
+                }else{
+                    return false
+                }
+
+            // console.log("get instance path",instancepath)
+            
+            // return tmp
+        }catch(err:any){
+            console.error(err.message)
+        }
+    }
+   const getInstancePath=(schema:any,path:string)=>{
+    if(!path){
+        console.error('unknown path')
+        return 'yy'
+    }
+    try{
+        let paths = path.replace('#/','').split('/')    
+        let tmp = schema
+        let instancepath=''
+        for(let i=0;i<paths.length;i++){
+            tmp = tmp[paths[i]]
+            if(tmp['type'] && paths[i] !='items'){
+                instancepath=instancepath+'/'+paths[i]
+            }
+        }
+
+        // console.log("get instance path",instancepath)
+        return instancepath
+        // return tmp
+    }catch(err:any){
+        console.error(err.message)
+    }
+
+
+    // let paths = path.replace('#/','').split('/')    
+    // return '/'+paths[1]
+   }
+   const getPathObject=(schema:JSONSchema7,path:string):JSONSchema7|undefined=>{
+    // console.log("path",path)
+    if(!path){
+        console.error('unknown path')
+        return undefined
+    }
+    try{
+        let paths:string[] = path.replace('#/','').split('/')    
+        let tmp :JSONSchema7Definition= schema
+        // console.log(path)
+        for(let i=0;i<paths.length;i++){
+            
+            //silly code, but it seems require to avoid typescript complaint.
+            //ultimately it is to obtain result as "tmp=tmp[path[i]]"
+            const key1 = paths[i] as keyof JSONSchema7
+            let jsonkey: keyof JSONSchema7 = key1
+            let obj:JSONSchema7 = {} as JSONSchema7
+            Object.assign(obj,tmp[jsonkey])
+            tmp = {...obj}            
+        }
+        // console.log('final ',path,tmp)
+        return tmp
+    }catch(err:any){
+        console.error(err.message)
+        
+    }    
+   }
+</script>

package/templates/nuxt/components/SimpleAppInputTable.vue.eta

@@ -0,0 +1,104 @@
+<template>
+    <DataTable v-bind="$attrs" stripedRows resizableColumns
+     class="simpleapp-datatable p-datatable-sm" :value="modelValue">
+    <template #empty> <div class="text-center">No record found.</div> </template>
+    <template #header >
+        <div>
+            <button icon="pi pi-plus" @click="addNew()" class="simpleapp-datatable-add btn-primary" type="button">Add</button>
+        </div>
+    </template>
+    <slot>
+        <!-- <template> -->
+            
+            <Column class="text-center" header="undefine columns">
+                <template #body>
+                    <div class="text-center">Missing {{ '<Column></Column>' }}</div>
+                </template>
+                
+            </Column> 
+      
+        
+            <!-- </template> -->
+            
+    </slot>
+            
+
+        
+    
+                    
+                
+                            
+            
+        
+    
+
+            <!-- <Column v-for="(col,index) in columns" :field="col.field" :style="col.style" :header="camelCaseToWords(col.title??'')">            
+                <template #body="{ data, field,index }">                                
+                    <SimpleAppDynamicInput v-if="modelValue" :instancepath="getInstancePath(index,field)" :setting="getChildFieldSetting(field)" v-model="modelValue[index][field]" :getAutocomplete="getAutocomplete" :hidelabel="true" />                
+                </template>
+            </Column>
+            <Column v-if="!readonly">
+                <template #body="{data,field,index}">
+                    <button class="simpleapp-inputtable-delrow button-danger" @click="deleteRow(index)" type="button">X</button>
+                </template>
+            </Column> -->
+    </DataTable>
+</template>
+<script setup lang="ts">
+
+import {ref} from 'vue'
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import {camelCaseToWords} from './helper'
+import type {InputTableColumn} from './type'
+const props = defineProps<{
+    // columns:InputTableColumn[],
+    setting:any,
+    getField:Function,
+    getAutocomplete:Function, readonly?:boolean
+}>()
+
+
+//{path: '#/properties/details', instancepath: '/details', fieldsetting: {…}, modelObject: Proxy(Object), apiObj: INVApi, …}
+const modelValue = defineModel<any[]>()
+    
+    
+const fieldsetting = props.setting.fieldsetting
+
+const readonly = ref(false)
+if(props.setting.readonly!==undefined ){
+    readonly.value = props.setting.readonly
+}
+if(props.readonly!==undefined ){
+    readonly.value = props.readonly
+}
+// const columns = ref(props.columns)
+// for(let i=0;i<props.columns.length;i++){
+//     if(columns.value[i].title ===undefined){
+//         columns.value[i].title=columns.value[i].field
+//     }
+// }
+const getChildFieldSetting=(field:string)=>{
+    return props.getField(`${props.setting.path}/items/properties/${field}`)
+}
+const getInstancePath=(index:number,field:string)=>{
+    return `${props.setting.instancepath}/${index}/${field}`
+}
+
+const deleteRow=(index: number)=>{
+    if(modelValue.value){
+        modelValue.value.splice(index,1)
+    }    
+}
+const addNew = () => {
+    const field = props.setting.path.split('/').at(-1)    
+    props.setting.document[`add${field}`]()
+}
+/** 
+ * 1. support array with field to label
+ * 2. auto add edit button
+ * 3. option readonly or not readonly
+ * 4. 
+ */
+
+</script>

package/templates/nuxt/components/SimpleAppList.vue.eta

@@ -0,0 +1,38 @@
+
+<template>
+    <FieldContainer v-bind="$attrs" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <Listbox v-model="modelValue" 
+            class="simpleapp-inputfield"
+            :inputId="slotprops.uuid"   
+            v-bind="$attrs"
+            :optionValue="optionValue"
+            :optionLabel="optionLabel"
+            :path="setting.instancepath"
+            :options="options"
+          />        
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {computed,watch,ref} from 'vue'
+import Listbox from 'primevue/listbox';
+import FieldContainer from './SimpleFieldContainer.vue'
+import {prepareList,simpleArrayToObject} from './helper'
+import type {SimpleAppFieldSetting} from './type'
+import type { JSONSchema7 } from 'json-schema';
+const modelValue = defineModel()
+const props = defineProps<{
+    label?:string,
+    description?:string,
+    error?:string,
+    setting:SimpleAppFieldSetting,
+    optionLabel?:string,
+    optionValue?:string,
+    instancepath?:string,
+    options?:any[],
+}>()
+const optionValue = props.optionValue ?? 'label' 
+const optionLabel  = props.optionLabel ?? 'value' 
+const options = prepareList('oneOf',props.setting.fieldsetting,optionLabel,optionValue,props.options,)
+
+
+</script>