@simitgroup/simpleapp-generator 1.3.4-alpha → 1.3.5-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simitgroup/simpleapp-generator",
-  "version": "1.3.4-alpha",
+  "version": "1.3.5-alpha",
   "description": "frontend nuxtjs and backend nests code generator using jsonschema",
   "main": "dist/index.js",
   "scripts": {

package/templates/basic/nest/controller.ts.eta

@@ -165,7 +165,7 @@ export class <%= it.typename %>Controller extends SimpleAppAbstractController<
   <%}%>  
   async <%=capitalizeFirstLetter(api.action) %>(
     @AppUser() appuser: UserContext,
-    <%if(['post','put','patch'].includes(api.method.toLowerCase())){%>
+    <%if(['post','put','patch'].includes(api.method.toLowerCase())){%> 
       @Body() data:<%= api.schema 
       ?  (api.schema.includes('[') ?  'types.'+api.schema.replace('[','').replace(']','') + '[]' : 'types.'+api.schema  )
       : 'Object'%>,

package/templates/nest/.gitignore.eta

@@ -41,4 +41,9 @@ lerna-debug.log*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
-!.vscode/extensions.json
+!.vscode/extensions.json
+
+
+
+# system file
+.env

package/templates/nuxt/assets/css/style.css._eta

@@ -13,16 +13,16 @@
     @apply bg-gray-300 dark:bg-gray-600
 }
 
-[aria-selected=true]{
+/* [aria-selected=true]{
     @apply bg-primary-100
-}
-
+} */
+/* 
 [data-pc-group-section=pagebutton]{
     @apply p-2 m-0 rounded-none border
 }
 [data-pc-section=pagebutton]{
     @apply p-3 m-0 border
-}
+} */
 html {
     overflow: hidden;
     overscroll-behavior: none;

package/templates/nuxt/assets/primevue/passthrough.ts._eta

@@ -25,9 +25,15 @@ const CustomTailwind = usePassThrough(
             // title:{class:''},
             // header:{class:''}
         },       
-        tabpanel:{
-            headerTitle:{class:'m-0 p-0'},            
-        },
+        // tabview:{
+            // tabpanel:{
+            //     headeraction:{class:'p-tabview-nav-link p-tabview-header-action items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none select-none border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0 transition-colors duration-200  bg-white border-blue-500 text-blue-500 dark:bg-gray-600 dark:border-blue-300 dark:text-blue-300'}
+            // },
+        // },
+        
+        // tabpanel:{
+        //     headerTitle:{class:'m-0 p-0'},            
+        // },
         accordiontab:{
             content:{style:'padding: 0.7rem;'}
             
@@ -49,7 +55,7 @@ const CustomTailwind = usePassThrough(
         //},
         button:{root:{class: 'focus:outline-none transition duration-150 ease-in-out rounded p-2 m-1 border dark:border-gray-600'}},
         dialog:{
-            root:{class:[' w-full max-h-full bodycolorclass max-w-full md:h-3/4 lg:h-1/2 border m-2 rounded-lg']},
+            root:{class:[' w-full bodycolorclass max-w-full md:h-3/4 lg:h-1/2 border  border-gray-400 dark:bg-gray-700 m-2 rounded-lg']},
             header:{class: 'p-dialog-header flex items-center  text-2xl justify-between shrink-0 border-t-0  rounded-tl-lg rounded-tr-lg p-6 bodycolorclass'},
             footer:{class:'p-dialog-footer flex gap-2 shrink-0 justify-end align-center border-t-0 px-6 pb-6 text-right rounded-b-lg bodycolorclass'},
             content:{class:'p-dialog-content overflow-y-auto  px-6 pb-8 pt-0  rounded-bl-lg rounded-br-lg h-full bodycolorclass'}

package/templates/nuxt/components/header/button/HeaderButtonMenuPicker.vue._eta

@@ -5,52 +5,60 @@
  * last change 2024-02-22
  * author: Ks Tan
  */
- 
-import Dialog from 'primevue/dialog';
-// import {ref} from 'vue'
-import {MenuData} from '~/types'
-const visible = defineModel<boolean>({default:true,required:true})
 
-// const emit = defineEmits(['select'])
-const selectMenu = (menuname:{name:string,children:any}) =>{
-  goTo(menuname.name)
-  visible.value=false  
-}
+import { MenuData } from "~/types";
+const visible = defineModel<boolean>({ default: true, required: true });
 
+// const emit = defineEmits(['select'])
+const selectMenu = (menuname: { name: string; children: any }) => {
+  goTo(menuname.name);
+  visible.value = false;
+};
 
-const m =  getMenustFromPageMeta()
-let treemenu:any[] = []
+const m = getMenustFromPageMeta();
+let treemenu: any[] = [];
 
-getMenustFromPageMeta().reduce((r, item) => {
-    item.split('/').
-    reduce((o, name) => {
-        var temp = (o.children = o.children || []).find(q => q.name === name);
-        if (!temp) o.children.push(temp = { name });
-        return temp;
+getMenustFromPageMeta().reduce(
+  (r, item) => {
+    item.split("/").reduce((o, name) => {
+      var temp = (o.children = o.children || []).find((q) => q.name === name);
+      if (!temp) o.children.push((temp = { name }));
+      return temp;
     }, r);
     return r;
-}, { children: treemenu })
+  },
+  { children: treemenu },
+);
 
-treemenu = treemenu.sort((a,b)=>a.name<b.name ?-1:1)
+treemenu = treemenu.sort((a, b) => (a.name < b.name ? -1 : 1));
 </script>
 <template>
-  
-    <!-- <button class="text-center border-none  cursor-pointer pi pi-bars dark:text-white" v-if="getCurrentXorg()" @click="visible=true">      -->
-      <Dialog v-model:visible="visible" modal :header="t('pickDocument')" :pt="{dialog:{ class:' bg-primary-800 ' }}">
-      <div class="">
-        
-          <div v-for="m in treemenu.sort()" class="m-4">
-            
-            <h3>{{ t(m.name) }}</h3>
-            <div class="grid md:grid-cols-2 lg:grid-cols-6 gap-4">              
-              <ButtonPrimary v-for="submenu in m.children.sort((a:any,b:any)=>a.name<b.name ?-1:1)" class="border rounded-lg p-2" @click="selectMenu(submenu)">              
-                {{ t(submenu.name) }}
-              </ButtonPrimary>
-            </div>
-            
-          </div>
-          
+  <!-- <button class="text-center border-none  cursor-pointer pi pi-bars dark:text-white" v-if="getCurrentXorg()" @click="visible=true">      -->
+  <Dialog
+    v-model:visible="visible"
+    modal
+    dismissableMask
+    position="top"
+    :header="t('pickDocument')"    
+    :pt="{root:{class:'h-6/7',},}"
+    :pt-options="{mergeProps:true,mergeSections:true}"
+  >
+    <div class="">
+      <div v-for="(m,index) in treemenu.sort()" class="m-4" :key="index">
+        <h3>{{ t(m.name) }}</h3>
+        <div class="grid md:grid-cols-2 lg:grid-cols-6 gap-4">
+          <ButtonPrimary
+            v-for="(submenu,menuindex) in m.children.sort((a: any, b: any) =>
+              a.name < b.name ? -1 : 1,
+            )"
+            class="border rounded-lg p-2"
+            :key="menuindex"
+            @click="selectMenu(submenu)"
+          >
+            {{ t(submenu.name) }}
+          </ButtonPrimary>
         </div>
-    </Dialog>           
-    
+      </div>
+    </div>
+  </Dialog>
 </template>

package/templates/nuxt/components/header/button/HeaderButtonProfile.vue.eta

@@ -43,6 +43,8 @@ const saveLocale = async (v: string) => {
   <!-- </div> -->
 
   <Dialog
+    modal
+    dismissableMask
     appendTo="body"
     ref="userprofileoverlay"
     v-model:visible="modelValue"

package/templates/nuxt/components/mobile/MobileToolbar.vue.eta

@@ -1,11 +1,15 @@
-<template>
-  <div
-    class="w-full dark:bg-gray-800 z-20 justify justify-between absolute h h-14 flex flex-row place-items-center opacity-90 dark:text-white"
-  >
-    <div class="text-left"><slot name="start"></slot></div>
-    <div class="flex-1 text-center line-clamp-2"><slot name="center"></slot></div>
-    <div class=" text-right"><slot name="end"></slot></div>
-  </div>
+<template>  
+    <div v-bind="$attrs"
+      class="w-full dark:bg-gray-800 z-20 justify justify-between absolute h h-14 flex flex-row place-items-center opacity-90 dark:text-white"
+    >
+      <div class="text-left"><slot name="start"></slot></div>
+      <div class="flex-1 text-center line-clamp-2">
+        <slot name="center"></slot>
+      </div>
+      <div class="text-right"><slot name="end"></slot></div>
+    </div>
+    <div class="h-14"></div>
+  
 </template>
 <script setup lang="ts">
 /**

package/templates/nuxt/components/overlay/OverlayPanelWithToolBar.vue.eta

@@ -19,7 +19,7 @@
           <slot name="headerRight"></slot>
         </template>
       </MobileToolbar>
-      <div class="mt-14">
+      <div >
         <slot name="default"></slot>
       </div>
     </div>

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

@@ -15,16 +15,21 @@
     <!-- <div :uuid="uuid" >{{ modelValue }}</div> -->
     <!-- <div v-if="typeof modelValue =='object' && typeof modelValue['_id']!='undefined' && typeof modelValue['label']!='undefined' &&  readonly ==true " :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue['label'] }}</div> -->
     <!-- <div v-else-if="readonly==true" :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue }}</div> -->
-    <!-- <slot v-else name="default" :uuid="uuid" :error="error"></slot> -->    
-    <slot name="default" :uuid="uuid" :error="error"></slot>    
-    
+    <!-- <slot v-else name="default" :uuid="uuid" :error="error"></slot> -->
+    <slot name="default" :uuid="uuid" :error="error"></slot>
 
-    <small v-if="error" class="text-danger-600 dark:text-danger-400">{{ error }}</small>
+    <small v-if="error" class="text-danger-600 dark:text-danger-400">{{
+      error
+    }}</small>
     <small v-else class="input-desc">{{ fielddesc }}</small>
   </div>
   <div v-else :class="defaultcssclass">
-    <label class="etext-danger-600 dark:text-danger-400">wrong path in getField()</label>
-    <div class="text-danger-600 dark:text-danger-400">{{ props.setting.path }}</div>
+    <label class="etext-danger-600 dark:text-danger-400"
+      >wrong path in getField()</label
+    >
+    <div class="text-danger-600 dark:text-danger-400">
+      {{ props.setting.path }}
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -55,6 +60,7 @@ const props = defineProps<{
   readonly?: boolean;
   // error?:string,
   setting: any;
+  resetcount: number;
 }>();
 
 const readonly = computed(() => {
@@ -85,7 +91,7 @@ const getLabelClass = () => {
     class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
   else if (modelValue.value !== undefined)
     class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
-  else class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100 hidden";
+  else class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100 ";
   return class1;
 };
 
@@ -137,4 +143,11 @@ watch(props.setting.errors, (newvalue, oldvalue) => {
   // console.log("validation result",props.setting.instancepath,)
   // error.value = newvalue[props.setting.instancepath].message
 });
+
+watch(
+  () => props.resetcount,
+  () => {
+    error.value = "";
+  },
+);
 </script>

package/templates/nuxt/components/simpleApp/SimpleAppFormToolBar.vue._eta

@@ -32,8 +32,7 @@
         </slot>
         <ContextMenu ref="menu" :model="menus as MenuItem[]" />
       </template>
-    </MobileToolbar>
-    <div class="h-14"></div>
+    </MobileToolbar>    
     <ConfirmDialog></ConfirmDialog>
   </div>
   <div v-else class="simpleapp-tool-bar">
@@ -121,9 +120,7 @@ const title = computed(() =>
 
 const menu = ref();
 const menus = computed(() =>
-  [...getActions(),  ...getDocActions()].filter((item) =>
-    showMenuButton(item),
-  ),
+  [...getActions(), ...getDocActions()].filter((item) => showMenuButton(item)),
 );
 
 const isShow = computed(

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

@@ -10,6 +10,7 @@
     :instancepath="instancepath"
     :error="error"
     #default="slotprops"
+    :resetcount="resetcount"
   >
     <Checkbox
       v-if="inputType == SimpleAppInputType.checkbox"
@@ -299,13 +300,13 @@ import Rating, { RatingProps } from "primevue/rating";
 import Slider, { SliderProps } from "primevue/slider";
 import Textarea, { TextareaProps } from "primevue/textarea";
 import { SimpleAppInputType } from "~/types";
-
+const resetcount = ref(0)
 const instancepath = ref("");
 const modelValue = defineModel({ required: true });
 
 const datevalue = ref<Date>();
 const timevalue = ref<Date>();
-let watchOnChange=0
+let watchOnChange = 0;
 const props = withDefaults(
   defineProps<{
     inputType: SimpleAppInputType;
@@ -367,7 +368,7 @@ watch(props.setting.errors, (newvalue, oldvalue) => {
     errmsg = "";
   }
   if (errmsg != "") {
-    const errorstyle = { style: "border-color: lightcoral; color:white " };
+    const errorstyle = { style: "border-color: lightcoral; color:lightcoral " };
     if (!pt.value) pt.value = {};
 
     if (props.inputType == SimpleAppInputType.text)
@@ -394,7 +395,7 @@ const isReadonly = computed(() => {
 const updateTime = (value: Date) => {
   value.setSeconds(0);
   modelValue.value = dateToTimeString(value);
-  onChange()
+  onChange();
 };
 const updateDate = (value: any) => {
   if (value) {
@@ -402,7 +403,7 @@ const updateDate = (value: any) => {
   } else {
     modelValue.value = "";
   }
-  onChange()
+  onChange();
 };
 
 const setFocus = (ev: any) => {
@@ -454,8 +455,6 @@ watch(modelValue, (newvalue: any) => {
       timevalue.value = undefined;
     }
   }
- 
-  
 });
 onMounted(() => {
   if (
@@ -477,12 +476,13 @@ onMounted(() => {
       timevalue.value = undefined;
     }
   }
-  
 });
 
-const onChange=()=>{
-  emits("change",  modelValue.value); 
-}
+const onChange = () => {
+  pt.value=undefined
+  resetcount.value++
+  emits("change", modelValue.value);
+};
 
 /************ start autocomplete only ***************/
 

package/templates/nuxt/components/user/UserButtonCreateTenant.vue._eta

@@ -2,11 +2,11 @@
   <div>
     <div class="mt-8 md:flex justify-start md:gap-4">
       <form @submit.prevent="true" class="w-full">
-        <div>{{ t('createNewCompany') }}</div>
+        <div>{{ t("createNewCompany") }}</div>
         <div class="p-inputgroup flex flex-row">
           <InputText
             class="flex-1"
-            :placeholder="t('yourCompanyName')"
+            :placeholder="t('enterYourCompanyName')"
             v-model:model-value="data.tenantName"
           />
           <div class="p-inputgroup-addon p p-0">
@@ -21,10 +21,7 @@
           </div>
         </div>
       </form>
-
     </div>
-
-  
   </div>
 </template>
 <script setup lang="ts">
@@ -46,7 +43,6 @@ const onhold = ref(false);
 const createTenant = async () => {
   onhold.value = true;
 
-
   getPorfileApi()
     .createTenant(data.value)
     .then((res: AxiosResponse) => {

package/templates/nuxt/composables/refreshDocumentList.generate.ts.eta

@@ -1,8 +1,19 @@
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
- * last change 2023-10-28
+ * last change 2024-03-07
  * Author: Ks Tan
  */
 export const refreshDocumentList = (docName:string)=>useNuxtApp().$event('RefreshDocumentList',{documentName:docName})
-export const refreshDocument = (docName:string)=>useNuxtApp().$event('RefreshDocument',docName)
+export const refreshDocument = (docName:string)=>useNuxtApp().$event('RefreshDocument',docName)
+
+export const listenDocument =  (docName:string,callback:Function) =>{
+    useNuxtApp().$listen('RefreshDocument',async (eventdocname:string)=>{
+        if(eventdocname==docName) await callback()
+    })
+}
+export const listenDocumentList =  (docName:string,callback:Function) =>{
+    useNuxtApp().$listen('RefreshDocumentList',async (eventdata)=>{
+        if(eventdata.documentName == docName) await callback()
+    })
+}

package/templates/nuxt/pages/[xorg]/organization.vue.eta

@@ -1,47 +1,69 @@
 <template>
-  <title>{{ t("organization") }}</title>
-  <div class="w-full flex-col flex">     
-      <MobileToolbar>
-        <template #center>{{ t('organization') }}</template>
-        <template #end>
-          <ButtonText @click="showEditOrg=true"><i class="pi pi-pencil"></i></ButtonText>
-        </template>
-      </MobileToolbar>
-      <div class="w-full flex flex-row p-2">        
-        <div class="p-4">
-            <div class="border w-12 h-12 md:w-24 md:h24"></div>
-        </div>
-        <div class="flex flex-col flex-1 ">
-            <TextTitle>{{ data.orgName }} / {{ data.orgCode }}</TextTitle>            
-            <div class="text-gray-600 dark:text-gray-400 text-sm">{{ data.description }}</div>
-            <div class="text-gray-600 dark:text-gray-400 text-sm">
-              {{ data.country }}/{{ data.currency }}/{{ data.timeZone }}//{{ data.offsetMinute }}
-            </div>
-            
-        </div>
+  
+  <div class="w-full flex-col flex">
+    <title>{{ t("organization") }}</title>
+    <MobileToolbar class="bg-gray-600">
+      <template #center><TextTitle class="text-white">{{ t("organization") }}</TextTitle></template>
+      <template #end>
+        <ButtonText @click="showEditOrg = true" class="text-white"
+          ><i class="pi pi-pencil"></i
+        ></ButtonText>
+      </template>
+    </MobileToolbar>
+    
+    <div class="w-full flex flex-row p-2 border-b border-gray-300 ">
+      <div class="p-4">
+        <div class="border w-12 h-12 md:w-24 md:h24"></div>
       </div>
+      <div class="flex flex-col flex-1 ">
+        <TextTitle>{{ data.orgName }} / {{ data.orgCode }}</TextTitle>
+        <TextSubtitle>
+          {{ data.description }}
+        </TextSubtitle>        
+      </div>
+    </div>
 
-
-      <div class="w-full p-2">
-          <h1>Branches</h1>
-          <ButtonText @click="goBranch('new')">{{ t('addBranch') }}</ButtonText>
-          <ListView
-            :list="branchlist"
-            title-field="branchName"
-            sub-title-field="branchCode"
-            :url="getDocumentUrl('organization', id)"
-          >            
-          </ListView>          
+    <div class="w-full p-2 flex flex-col ">
+      
+      <div class="flex flex-row justify-end">
+        <TextTitle class="flex-1 p-2">{{ t('branches') }}</TextTitle>
+        <div>
+          <ButtonPrimary @click="goBranch('new')">
+            <i class="pi pi-plus"></i> <span>{{ t("addBranches") }}</span>
+          </ButtonPrimary>
+        </div>
       </div>
-          
+      <ListView class="border rounded-lg border-gray-400 dark:border-gray-600"        
+        :list="branchlist"
+        title-field="branchName"
+        sub-title-field="branchCode"
+        :url="getDocumentUrl('organization', id)"
+        #default="{item}"
+      >
+        <div class="flex flex-row">
+          <div class="flex-col flex flex-1">
+            <TextPrimary>{{ item.branchName }}</TextPrimary>
+            <TextSubtitle>{{ item.description }}</TextSubtitle>
+          </div>
+          <div class="flex-col flex text-right">
+            <div>{{ item.branchCode }}</div>
+            <renderer-boolean v-model="item.active"></renderer-boolean>
+          </div>
+        </div>
       
-      <OverlaySideBarCrud v-model="showEditOrg" close-event-name="organization">
-        <FormOrganization :_id="getUserProfile()?.orgRecordId" @after="afterOrganization"></FormOrganization> 
-      </OverlaySideBarCrud>
-
-      <OverlaySideBarCrud v-model="showEditBranch" close-event-name="branch">
-        <NuxtPage :_id="id"></NuxtPage> 
-      </OverlaySideBarCrud>
+      </ListView>
+    </div>
+
+    <OverlaySideBarCrud v-model="showEditOrg" close-event-name="organization">
+      <FormOrganization
+        :_id="getUserProfile()?.orgRecordId"
+        @after="afterOrganization"
+      ></FormOrganization>
+    </OverlaySideBarCrud>
+
+    <OverlaySideBarCrud v-model="showEditBranch" close-event-name="branch">
+      <NuxtPage :_id="id"></NuxtPage>
+    </OverlaySideBarCrud>
   </div>
 </template>
 
@@ -56,12 +78,12 @@ import { FormCrudEvent, SimpleAppInputType } from "~/types";
 import ConfirmPopup from "primevue/confirmpopup";
 import { useConfirm } from "primevue/useconfirm";
 const confirm = useConfirm();
-const showEditOrg = ref<boolean>(false)
-const showEditBranch = ref<boolean>(false)
+const showEditOrg = ref<boolean>(false);
+const showEditBranch = ref<boolean>(false);
 
 const { $OrganizationDoc, $BranchDoc, $event, $listen } = useNuxtApp();
 
-const orgId = computed(()=><string>getUserProfile()?.orgRecordId)
+const orgId = computed(() => <string>getUserProfile()?.orgRecordId);
 const doc = $OrganizationDoc();
 const brancdoc = $BranchDoc();
 const data = doc.getReactiveData();
@@ -69,7 +91,7 @@ const branchlist = ref([]);
 const isReadOnly = ref(true);
 const getCurrentOrg = async () => {
   await doc.getById(orgId.value);
-  await fetchRecord()
+  await fetchRecord();
 };
 const fetchRecord = async () => {
   //fetch org
@@ -79,41 +101,38 @@ const fetchRecord = async () => {
     filter: { orgId: data.value.orgId },
   });
 
-  console.log("reload data",branchlist)
+  console.log("reload data", branchlist);
 };
 
 const id = computed((): string => String(useRoute().params.id ?? ""));
 
-
 definePageMeta({
   menuPath: "setting/organization",
 });
 
 //branch record update then reload
 $listen("RefreshDocumentList", async (data) => {
-  console.log("trigger RefreshDocumentList",data)
+  console.log("trigger RefreshDocumentList", data);
   if (data.documentName == "branch" || data.documentName == "organization") {
     await fetchRecord();
   }
 });
 
+const showBranchDialogIfRequired = () => {
+  if (useRoute().path.includes("/new") || id.value) showEditBranch.value = true;
+};
 
-
-const showBranchDialogIfRequired = () =>{
-  if(useRoute().path.includes('/new') || id.value) showEditBranch.value=true
-}
-
-const afterOrganization = (actionName:FormCrudEvent)=>{
-  if(actionName==FormCrudEvent.update){
-    showEditOrg.value=false
-    getCurrentOrg()
+const afterOrganization = (actionName: FormCrudEvent) => {
+  if (actionName == FormCrudEvent.update) {
+    showEditOrg.value = false;
+    getCurrentOrg();
   }
-}
+};
 
-watch(()=>useRoute().path,()=>showBranchDialogIfRequired())
-onMounted(()=>showBranchDialogIfRequired())
+watch(
+  () => useRoute().path,
+  () => showBranchDialogIfRequired(),
+);
+onMounted(() => showBranchDialogIfRequired());
 getCurrentOrg();
-
-
-
 </script>

package/templates/project/lang/default._json

@@ -1,67 +1,150 @@
-{  
-    "home":"Home",
-    "welcome": "Welcome",
-    "create": "Create",
-    "close": "Close",
-    "update": "Update",
-    "delete": "Delete",
-    "modify": "Modify",
-    "confirm": "Confirm",
-    "void": "Void",
-    "draft": "Draft",
-    "profile": "Profile",
-    "logout": "logout",
-    "language": "Language",    
-    "theme": "Theme",
-    "welcomeSimpleApp": "Welcome To SimpleApp",
-    "changeHomePageMsg": "{fullName}, it is product front page and by right you shall replace it with something else.",
-    "realman": "Real man code with simpleapp",
-    "new": "New",
-    "keyword": "Keyword",
-    "empty": "Empty",
-    "noDataFound": "No Data Found",
-    "userInfo": "User Information",
-    "currentBranchAccessRights": "Current Branch Access Rights",
-    "yourCompanyName": "Your Company Name",
-    "onlyAppearInDebugMode": "Only Appear In Debug Mode",
-    "pickDocument": "Pick Document",
-    "sample": "Sample",
-    "createYourContentHere": "Create your content here",
-    "setting": "Setting",
-    "mytasks": "My Tasks",
-    "suspend": "Suspend",
-    "submit": "Submit",
-    "decision": "Decision",
-    "simpleApproveMessage": "Approve or reject",
-    "suspendcustomer": "Suspend Customer",
-    "formKeyNotFound": "Formkey not found \"{formKey}\"",
-    "selectAll": "Select All",
-    "branches":"Branches",
-    "accessRights": "Access Rights",
-    "fullName":"Full Name",
-    "type": "Type",
-    "save": "Save",
-    "general": "General",
-    "login":"Login",
-    "sessionExpire": "Session Expire",
-    "reloginMessage": "Session Expire, relogin" ,
-    "backToHome":"Back To Home",
-    "undefined": "Undefined",
-    "no":"No",
-    "edit":"Edit",
-    "select":"Select",
-    "backendServerDownMessage":"Seems there is some connectivity issue, please try again later",
-    "invalidXorg":"Invalid XOrg ",
-    "userNotExistInTenant":"This tenant is not accessible" ,
-    "light":"Light",
-    "dark":"Dark",
-    "redirectToLoginPage":"Redirect To Login Page",
-    "cancel":"Cancel",
-    "deleteRecord":"Delete Record",
-    "deleteThisRecord?":"Delete this Record?",
-    "ok":"OK",
-    "null":"Null",
-    "switchDatabase":"Switch Database",
-    "pickYourDatabase" : "Pick Your Database",
-    "createNewCompany":"Create New Company"
-  }
+<template>
+  <div v-if="schema" :class="getLayoutClass()">
+    <label v-if="hidelabel"></label>
+    <label v-else :for="uuid" :class="getLabelClass()"
+      >{{ fieldlabel }}
+      <span
+        v-if="props.setting.isrequired && fieldlabel"
+        class="text-danger-600 dark:text-danger-400"
+        >*</span
+      ></label
+    >
+    <!-- <label v-else-if="error" class="simpleapp-input-label text-danger-600 overflow-hidden" :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
+        <label v-else  :for="uuid" class="simpleapp-input-label whitespace-nowrap	text-gray-500 truncate">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>         -->
+
+    <!-- <div :uuid="uuid" >{{ modelValue }}</div> -->
+    <!-- <div v-if="typeof modelValue =='object' && typeof modelValue['_id']!='undefined' && typeof modelValue['label']!='undefined' &&  readonly ==true " :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue['label'] }}</div> -->
+    <!-- <div v-else-if="readonly==true" :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue }}</div> -->
+    <!-- <slot v-else name="default" :uuid="uuid" :error="error"></slot> -->
+    <slot name="default" :uuid="uuid" :error="error"></slot>
+
+    <small v-if="error" class="text-danger-600 dark:text-danger-400">{{
+      error
+    }}</small>
+    <small v-else class="input-desc">{{ fielddesc }}</small>
+  </div>
+  <div v-else :class="defaultcssclass">
+    <label class="etext-danger-600 dark:text-danger-400"
+      >wrong path in getField()</label
+    >
+    <div class="text-danger-600 dark:text-danger-400">
+      {{ props.setting.path }}
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import SimpleAppValue from "./SimpleAppValue.vue";
+/**
+ * This file was automatically generated by simpleapp generator. Every
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2023-10-28
+ * Author: Ks Tan
+ */
+// import {camelCaseToWords} from './helper'
+// import {computed,setBlockTracking,watch} from 'vue'
+
+import { ref } from "vue";
+
+const uuid = randomUUID();
+// const fieldlabel = ref('')
+// const fielddesc = ref('')
+const defaultcssclass = "simpleapp-input-container";
+const fieldcontainerclass = ref(defaultcssclass);
+let instancepath = ref("");
+const props = defineProps<{
+  label?: string;
+  inputType: string;
+  description?: string;
+  instancepath?: string;
+  hidelabel?: boolean;
+  readonly?: boolean;
+  // error?:string,
+  setting: any;
+  resetcount:number
+}>();
+
+const readonly = computed(() => {
+  return props.readonly ?? props.setting.readonly ?? false;
+});
+
+const modelValue = defineModel<any>(); //this model value support all kind of data, string, number, autocomplete and etc
+const readonlyclass = "simpleapp-value-readonly";
+// console.log('props.setting',modelValue.value,props.setting)
+let schema: any;
+
+const getLayoutClass = () =>
+  `simpleapp-input-container flex  ${
+    props.inputType == "checkbox"
+      ? " flex-row gap-4 mt-1 ml-1 "
+      : "flex flex-col "
+  }`;
+
+const getLabelClass = () => {
+  let class1 =
+    "simpleapp-input-label text-left text-gray-500  dark:text-gray-200 ";
+
+  if (!isMobile()) class1 += "whitespace-nowrap truncate";
+  else if (props.inputType == "checkbox") class1 += " ml-1 dark:text-gray-200";
+  else if (props.inputType != "autocomplete" && modelValue.value)
+    class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
+  else if (props.inputType == "autocomplete" && modelValue.value?.label)
+    class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
+  else if (modelValue.value !== undefined)
+    class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
+  else class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100 ";
+  return class1;
+};
+
+const fielddesc = computed(() => {
+  return props.description ?? "";
+});
+
+if (props.setting.fieldsetting && props.setting.fieldsetting.type) {
+  schema = props.setting.fieldsetting;
+  // console.log("schema setting",props.setting,schema)
+  if (props?.instancepath) instancepath.value = props.instancepath;
+  else if (props.setting?.instancepath)
+    instancepath.value = props.setting.instancepath;
+  else instancepath.value = "/unknown";
+
+  const fieldnamearr = instancepath.value.split("/");
+  const fieldname = camelCaseToWords(fieldnamearr[fieldnamearr.length - 1]);
+
+  // if(props.description)fielddesc.value = props.description
+  // else if (schema?.description != 'undefined') fielddesc.value=schema.description
+  // else fielddesc.value=''
+}
+const fieldlabel = computed(() => {
+  if (props.label) {
+    return t(props.label);
+  } else if (schema.title) {
+    return t(schema.title);
+  } else {
+    return t(props.setting.key);
+  }
+});
+const errormsg = computed(() => {
+  props.setting.errors[instancepath.value];
+});
+const error = ref("");
+watch(props.setting.errors, (newvalue, oldvalue) => {
+  //it is array
+  error.value = "";
+  if (newvalue[instancepath.value]) {
+    const errlist: any[] = newvalue[instancepath.value];
+    for (let i = 0; i < errlist.length; i++) {
+      error.value += errlist[i].message + ",";
+    }
+    fieldcontainerclass.value = defaultcssclass + " input-error";
+  } else {
+    error.value = "";
+    fieldcontainerclass.value = defaultcssclass;
+  }
+  // console.log("validation result",props.setting.instancepath,)
+  // error.value = newvalue[props.setting.instancepath].message
+});
+
+watch(()=>props.resetcount,()=>{
+  error.value=''
+})
+</script>