@simitgroup/simpleapp-generator 1.2.7 → 1.3.0-alpha

package/templates/nuxt/components/renderer/RendererBoolean.vue.eta

@@ -1,5 +1,9 @@
-<template>    
-    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': modelValue, 'pi-times-circle text-red-500': !modelValue }"></i>
+<template>
+  <span class="pi pi-check-circle text-green-500" v-if="modelValue">    
+  </span>
+  <span class="pi pi-times-circle text-red-500" v-else>  
+  </span>
+  
 </template>
 <script lang="ts" setup>
 /**
@@ -8,5 +12,5 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const modelValue = defineModel()
-</script>
+const modelValue = defineModel<boolean>();
+</script>

package/templates/nuxt/components/renderer/RendererDate.vue.eta

@@ -1,5 +1,5 @@
-<template >
-    <span>{{ toLocalDate(value??'') }}</span>
+<template>
+  <span>{{ toLocalDate(value ?? "") }}</span>
 </template>
 <script lang="ts" setup>
 /**
@@ -8,5 +8,5 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const props = defineProps<{value?:string}>()
-</script>
+const props = defineProps<{ value?: string }>();
+</script>

package/templates/nuxt/components/renderer/RendererLink.vue.eta

@@ -1,9 +1,9 @@
 <template>
-    <a @click="go" class="text-primary-700 hover:text-primary-500 cursor-pointer">
-        <slot name="default">
-            <div >{{ value[fields[0]] }}</div>
-        </slot>
-    </a>
+  <a @click="go" class="text-primary-700 dark:text-primary-300 dark:hover:text-primary-200 hover:text-primary-500 cursor-pointer">
+    <slot name="default">
+      <div>{{ value[fields[0]] }}</div>
+    </slot>
+  </a>
 </template>
 <script setup lang="ts">
 /**
@@ -14,20 +14,12 @@
  */
 
 const props = defineProps<{
-    fields:any,
-    setting:any,
-    value:any
-}>()
+  fields: any;
+  setting: any;
+  value: any;
+}>();
 
-const go = ()=>{
-    goTo(props.setting.path,props.value._id)
-    // useNuxtApp().$event('ViewRecord',{
-    //     _id: props.value._id ,
-    //     documentName: props.setting.documentName,
-    //     viewer: getDocument(props.setting.documentName)?.viewer,
-    //     label: props.setting.documentName,
-    //     document:getDocument(props.setting.documentName)?.docClass,
-    //     eventId: crypto.randomUUID()
-    // })
-} 
+const go = () => {
+  goTo(props.setting.path, props.value._id);  
+};
 </script>

package/templates/nuxt/components/renderer/RendererMoney.vue.eta

@@ -1,10 +1,11 @@
 
 <template>
-    <span>  {{ Intl.NumberFormat('en',{
+    <span v-if="showCurrency"> {{ Intl.NumberFormat(  useI18n().defaultLocale,{
         style:'currency',
         currency: getUserProfile()?.currency,
         currencyDisplay: 'symbol',        
     }).format(modelValue) }}</span>
+    <span v-else> {{ modelValue.toLocaleString(useI18n().defaultLocale,options) }}</span>
 </template>
 <script lang="ts" setup>
 /**
@@ -13,5 +14,12 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const props = defineProps(['modelValue'])
+
+const options = {
+  style: 'decimal',  // Other options: 'currency', 'percent', etc.
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+};
+const modelValue = defineModel<number>({required:true})
+const props = defineProps<{showCurrency?:boolean}>()
 </script>

package/templates/nuxt/components/renderer/RendererViewer.vue.eta

@@ -1,9 +1,12 @@
 <template>
-    <a @click="openViewer" class="text-primary-700 hover:text-primary-500 cursor-pointer">
-        <slot name="default">
-            <div >{{ value[fields[0]] }}</div>
-        </slot>
-    </a>
+  <a
+    @click="openViewer"
+    class="text-primary-700 dark:text-primary-400 hover:text-primary-500 cursor-pointer"
+  >
+    <slot name="default">
+      <div v-if="fields">{{ value[fields[0]] }}</div>
+    </slot>
+  </a>
 </template>
 <script setup lang="ts">
 /**
@@ -12,21 +15,24 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-
+import { RendererSetting } from "~/types";
 const props = defineProps<{
-    fields:any,
-    setting:any,
-    value:any
-}>()
+  fields?: string[];
+  setting: RendererSetting;
+  value: any;
+}>();
 
-const openViewer = ()=>{
-    useNuxtApp().$event('ViewRecord',{
-        _id: props.value._id ,
-        documentName: props.setting.documentName,
-        viewer: getDocument(props.setting.documentName)?.viewer,
-        label: props.setting.documentName,
-        document:getDocument(props.setting.documentName)?.docClass,
-        eventId: randomUUID()
-    })
-} 
-</script>
+const openViewer = () => {
+  useNuxtApp().$event("ViewRecord", {
+    _id: props.value._id,
+    documentName: props.setting.documentName,
+    viewer: getDocument(props.setting.documentName)?.viewer,
+    label: props.fields !== undefined ? props.value[props.fields[0]] : props.setting.documentName,
+    document: getDocument(props.setting.documentName)?.docClass,
+    eventId: randomUUID(),    
+    after:()=>{
+      useNuxtApp().$event('CloseDialog',props.setting.documentName)
+    }
+  });
+};
+</script>

package/templates/nuxt/components/simpleApp/SimpleAppAutocomplete.vue.eta

@@ -1,168 +1,220 @@
-<template>   
-        <AutoComplete v-model="modelValue"  v-if="!readonly" ref="autocompleteinput"
-               forceSelection optionLabel="label"  
-               @focus="($event.target as HTMLInputElement).select()"              
-               @item-select="pickAutoComplete"
-               @complete="getListFromAutocompleteApi"       
-               :placeholder="t('keyword')"
-               :dropdown="true"
-               :dropdown-icon="buttonClass"               
-               @before-show="beforeShow"
-               @clear = "clear"
-               :dropdown-mode="'current'"
-                :pt="pt"
-                :delay="500"
-               :disabled="readonly"
-               :suggestions="list"                                
-               @blur="onBlurAutocomplete"
-               :inputId="inputId" :path="setting.instancepath"
-               :readonly="readonly"
-                />
-        <div v-else class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40 ">
-            <span :readonly="readonly" class="cursor-pointer text-primary-600  dark:text-primary-400 "
-                tabindex="0" @click="openViewer(true)">{{ modelValue && modelValue.label ?  modelValue.label:'-' }}</span>
-        </div>        
+<template>
+  <div v-if="!readonly" class="relative">
+    <div
+      class="absolute h-full top-0 right-10 text-right dark:text-white z-10 align-middle p-3"
+      v-if="modelValue?._id"
+    >
+      <span
+        class="pi pi-times rounded-full bg-slate-500 p-1 cursor-pointer text-xs"
+        @click="clear"
+      ></span>      
+    </div>
+
+    <AutoComplete
+      class="w-full"
+      v-model="modelValue"
+      ref="autocompleteinput"
+      forceSelection
+      optionLabel="label"
+      @focus="setFocus"
+      @item-select="pickAutoComplete"
+      @complete="getListFromAutocompleteApi"
+      :placeholder="placeholdertxt"
+      :dropdown="true"
+      @clear="clear"
+      :dropdown-mode="'current'"
+      :pt="pt"
+      :delay="500"
+      :disabled="readonly"
+      :suggestions="list"
+      @blur="onBlurAutocomplete"
+      :inputId="inputId"
+      :path="setting.instancepath"
+      :readonly="readonly"
+    >
+      <template #header>
+        <slot name="header">
+          <div class="flex flex-row font font-bold dark:text-white">
+            <div class="w w-1/3">{{ t(codefield) ?? t("code") }}</div>
+            <div class="w w-2/3">{{ t(labelfield) ?? t("label") }}</div>
+          </div>
+        </slot>
+      </template>
+      <template #content>
+        <div class="bg-red-300">content</div>
+      </template>
+      <template #option="{ index, option }">
+        <slot name="option" :index="index" :option="option">
+          <div class="flex flex-row dark:text-white">
+            <div class="w w-1/3">{{ option.code }}</div>
+            <div class="w w-2/3">{{ option.label }}</div>
+          </div>
+        </slot>
+      </template>
+      <!-- </slot> -->
+    </AutoComplete>
+  </div>
+  <div
+    v-else
+    class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40"
+  >
+    <span
+      :readonly="readonly"
+      class="cursor-pointer text-primary-600 dark:text-primary-400"
+      tabindex="0"
+      @click="openViewer(true)"
+      >{{ modelValue && modelValue.label ? modelValue.label : "-" }}</span
+    >
+  </div>
 </template>
 <script setup lang="ts">
-import { isNull } from 'lodash';
-import * as jsonpath from 'jsonpath';
-import {autocompletetype,SchemaConfig,SchemaType} from '~/types'
-const autocompleteinput = ref()
-const {$event} = useNuxtApp()
-const list = ref<any[]>([])
-const props = withDefaults(defineProps<{
-    setting:any    
-    allowAddNew?:boolean
-    showNull?:boolean
-    readonly?:boolean
-    inputId:string
-    pt?:any
-}>(),{
-allowAddNew:true,showNull:true
-})
-
-const path = '$'+props.setting.instancepath
-const modifiedpath = path.replaceAll('/','.')        
-const queryresult = jsonpath.query(props.setting.defaultValue,modifiedpath)[0]
-
-const emptyautocomplete = computed(():autocompletetype=> queryresult)
+import { isNull } from "lodash";
+import * as jsonpath from "jsonpath";
+import { AutoCompleteDropdownClickEvent } from "primevue/autocomplete";
+import { autocompletetype, SchemaConfig, SchemaType } from "~/types";
+const autocompleteinput = ref<autocompletetype|undefined>();
+const { $event } = useNuxtApp();
+const list = ref<any[]>([]);
+const props = withDefaults(
+  defineProps<{
+    setting: any;
+    allowAddNew?: boolean;
+    showNull?: boolean;
+    readonly?: boolean;
+    placeholder?:string;
+    hidelabel?:boolean;
+    inputId: string;
+    pt?: any;
+  }>(),
+  {
+    allowAddNew: true,
+    showNull: true,
+  },
+);
 
-const autocompleteitem = ref<autocompletetype>(emptyautocomplete.value)
-const modelValue = defineModel<autocompletetype>({required:true})
-if(modelValue.value && modelValue.value._id){
-    autocompleteitem.value={...modelValue.value}
+const path = "$" + props.setting.instancepath;
+const modifiedpath = path.replaceAll("/", ".");
+const queryresult = jsonpath.query(props.setting.defaultValue, modifiedpath)[0];
+const remotedoc = getDocument(props.setting.fieldsetting["x-foreignkey"]);
+const schema: SchemaType = <SchemaType>remotedoc?.docClass.getSchema();
+const labelfield = schema["x-simpleapp-config"].documentTitle as string;
+const codefield = schema["x-simpleapp-config"].uniqueKey as string;
+const docname = props.setting.fieldsetting["x-foreignkey"];
+const placeholdertxt = computed(()=> props.placeholder ?? t(docname)   )
+const emptyautocomplete = computed((): autocompletetype => queryresult);
+const cancelShowList = ref(false);
+const autocompleteitem = ref<autocompletetype|undefined>(emptyautocomplete.value);
+const modelValue = defineModel<autocompletetype|undefined>({ required: true });
+if (modelValue.value && modelValue.value._id) {
+  autocompleteitem.value = { ...modelValue.value };
 }
 //clear auto complete auto set value = empty
-const clear = ()=>{
-    autocompleteitem.value = emptyautocomplete.value
-    modelValue.value = emptyautocomplete.value
-}
-const buttonClass=computed(()=>modelValue.value?._id ? 'pi pi-link' : 'pi pi-angle-down')
+const clear = () => {
+  autocompleteitem.value = undefined
+  modelValue.value = undefined
+};
 
 //if record picked, click button show record info instead
-const beforeShow = ()=>{    
-    if(modelValue.value?._id ){                
-        openViewer(true)        
-    }
-}
-   
+const openlink = () => {
+  if (modelValue.value?._id) {
+    openViewer(true);
+  }
+};
+
 //recorrect data if lose focus
-const onBlurAutocomplete = ()=>{   
-    if(  autocompleteitem.value === null){
-        autocompleteitem.value = emptyautocomplete.value
-    }
-    if(isNull(modelValue.value )){
-        modelValue.value = autocompleteitem.value
-    }
-    else if(typeof modelValue.value =='object'){
-        
-    }else{
-        modelValue.value = autocompleteitem.value
-    }
-}
+const onBlurAutocomplete = () => {
+  if (autocompleteitem.value === null) {
+    autocompleteitem.value = emptyautocomplete.value;
+  }
+  if (isNull(modelValue.value)) {
+    modelValue.value = autocompleteitem.value;
+  } else if (typeof modelValue.value == "object") {
+  } else {
+    modelValue.value = autocompleteitem.value;
+  }
+};
 
 //obtain remote data
-const getListFromAutocompleteApi =  (event:any)=>{    
- const keyword = event.query??''  
- const targetDocument = props.setting.fieldsetting['x-foreignkey']
- getDocumentApi(targetDocument).autoComplete(keyword).then((res:any)=>{
-
-   list.value = res.data
+const getListFromAutocompleteApi = (event: any) => {
+  const keyword = event.query ?? "";
+  const targetDocument = props.setting.fieldsetting["x-foreignkey"];
+  getDocumentApi(targetDocument)
+    .autoComplete(keyword)
+    .then((res: any) => {
+      list.value = res.data;
 
-   if(props.allowAddNew){
-    list.value = list.value.concat({_id:'new',label:'<'+t('new')+'>'})
-   }
- })
-}
+      if (props.allowAddNew) {
+        list.value = list.value.concat({
+          _id: "new",
+          label: "<" + t("new") + ">",
+        });
+      }
+    });
+};
 
 //on select
-const pickAutoComplete = (event:any)=>{
-    if(event.value._id===''){        
-        modelValue.value =  emptyautocomplete.value
-        autocompleteitem.value = emptyautocomplete.value
-    } else if(event.value._id==='new'){
-        
-        modelValue.value =  emptyautocomplete.value
-        autocompleteitem.value = emptyautocomplete.value
-        openViewer(false)        
-    } 
-    else if(typeof event.value.query == 'undefined'){      
-        modelValue.value=event.value
-        autocompleteitem.value = event.value      
-    }
-}
+const pickAutoComplete = (event: any) => {
+  if (event.value._id === "") {
+    modelValue.value = emptyautocomplete.value;
+    autocompleteitem.value = emptyautocomplete.value;
+  } else if (event.value._id === "new") {
+    modelValue.value = emptyautocomplete.value;
+    autocompleteitem.value = emptyautocomplete.value;
+    openViewer(false);
+  } else if (typeof event.value.query == "undefined") {
+    modelValue.value = event.value;
+    autocompleteitem.value = event.value;
+  }
+};
 
-const emits = defineEmits(['change','update:modelValue','update:docNoFormat'])
-watch(modelValue ,(newvalue:any)=>{
-   
-   emitChanges()
-   
-})
-const emitChanges = () =>{
-    
-    emits('change',modelValue.value)
- 
-}
+const emits = defineEmits([
+  "change",
+  "update:modelValue",
+  "update:docNoFormat",
+]);
+watch(modelValue, (newvalue: any) => {
+  emitChanges();
+});
+const emitChanges = () => {
+  emits("change", modelValue.value);
+};
 
-//pop up records
-const openViewer = (readonly:boolean) =>{
-    const remotedoc = getDocument(props.setting.fieldsetting['x-foreignkey'])
-    
-    if(remotedoc){
-        const schema:SchemaType = remotedoc.docClass.getSchema()
-        const labelfield = schema['x-simpleapp-config'].documentTitle as string
-        const codefield  = schema['x-simpleapp-config'].uniqueKey as string
-        const docname = props.setting.fieldsetting['x-foreignkey']
-        $event('ViewRecord',{
-            _id: modelValue.value?._id as string,
-            eventId: randomUUID(),
-            label: (readonly ? modelValue.value?.label : `${t('new') + ' '+ t(docname) }`)  as string,
-            readonly:readonly,
-            viewer : getDocument(docname)?.viewer,
-            documentName: docname,
+const setFocus = (ev: any) => {
+  if (!isMobile()) ev.target.select();
+};
 
-            //after create, auto copy value into auto complete
-            after:(eventType:string,data:any,result:any)=>{                
-                autocompleteitem.value = {
-                    _id: data._id,
-                    code: data[codefield],                    
-                    label: data[labelfield],
-                }
-                if(schema['x-simpleapp-config'].additionalAutoCompleteFields){
-                    const addfields = schema['x-simpleapp-config'].additionalAutoCompleteFields
-                    for(let i=0;i<addfields.length;i++){
-                        const fieldname = addfields[i] as string
-                        autocompleteitem.value[fieldname] = data[fieldname]
-                    }
-                }   
-                modelValue.value = {...autocompleteitem.value}                             
-                emitChanges()
-                console.log("autocompleteitem.value",autocompleteitem.value ,modelValue.value)
-                
-            }
-        })
+//pop up records
+const openViewer = (readonly: boolean) => {
+  if (remotedoc) {
+    $event("ViewRecord", {
+      _id: modelValue.value?._id as string,
+      eventId: randomUUID(),
+      label: (readonly
+        ? modelValue.value?.label
+        : `${t("new") + " " + t(docname)}`) as string,
+      readonly: readonly,
+      viewer: getDocument(docname)?.viewer,
+      documentName: docname,
 
-    }
+      //after create, auto copy value into auto complete
+      after: (eventType: string, data: any, result: any) => {
+        autocompleteitem.value = {
+          _id: data._id,
+          code: data[codefield],
+          label: data[labelfield],
+        };
+        if (schema["x-simpleapp-config"].additionalAutoCompleteFields) {
+          const addfields =
+            schema["x-simpleapp-config"].additionalAutoCompleteFields;
+          for (let i = 0; i < addfields.length; i++) {
+            const fieldname = addfields[i] as string;
+            autocompleteitem.value[fieldname] = data[fieldname];
+          }
+        }
+        modelValue.value = { ...autocompleteitem.value };
+        emitChanges();
+      },
+    });
   }
-
-</script>
+};
+</script>

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

@@ -3,11 +3,12 @@
     
         <div class="flex flex-row w-full">
             <InputText 
+                @focus="setFocus"              
                 :readonly="readonly"
                 v-model="modelValue"    
                 :placeholder="placeholder"
                 :pt="pt"
-                :class=" !pt ? 'flex-1 w-full rounded-lg  '+ ( props.readonly?'':'dark:!bg-gray-700 rounded-tr-none rounded-br-none') : ''"
+                :class=" !pt ? 'flex-1 w-full rounded-lg  '+ ( props.readonly?'':'rounded-tr-none rounded-br-none') : ''"
             />
             <span class="" v-if="!readonly">
                 <button  type="button" @click="toggle"  tabindex="-1"
@@ -72,6 +73,11 @@ const loadDocFormats = async () =>{
     }
 }
 
+
+const setFocus = (ev:any) => {
+    if(!isMobile()) ev.target.select()
+}
+
 onMounted(()=>{
     loadDocFormats()