@simitgroup/simpleapp-generator 1.2.2 → 1.2.5

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

@@ -21,16 +21,15 @@
         <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>
+        </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 emptyautocomplete =():autocompletetype=> ({_id:'',code:'',label:''})
-
 const props = withDefaults(defineProps<{
     setting:any    
     allowAddNew?:boolean
@@ -41,15 +40,22 @@ const props = withDefaults(defineProps<{
 }>(),{
 allowAddNew:true,showNull:true
 })
-const autocompleteitem = ref<autocompletetype>(emptyautocomplete())
+
+const path = '$'+props.setting.instancepath
+const modifiedpath = path.replaceAll('/','.')        
+const queryresult = jsonpath.query(props.setting.defaultValue,modifiedpath)[0]
+
+const emptyautocomplete = computed(():autocompletetype=> queryresult)
+
+const autocompleteitem = ref<autocompletetype>(emptyautocomplete.value)
 const modelValue = defineModel<autocompletetype>()        
 if(modelValue.value && modelValue.value._id){
     autocompleteitem.value={...modelValue.value}
 }
 //clear auto complete auto set value = empty
 const clear = ()=>{
-    autocompleteitem.value = emptyautocomplete()
-    modelValue.value = emptyautocomplete()
+    autocompleteitem.value = emptyautocomplete.value
+    modelValue.value = emptyautocomplete.value
 }
 const buttonClass=computed(()=>modelValue.value?._id ? 'pi pi-link' : 'pi pi-angle-down')
 
@@ -63,7 +69,7 @@ const beforeShow = ()=>{
 //recorrect data if lose focus
 const onBlurAutocomplete = ()=>{   
     if(  autocompleteitem.value === null){
-        autocompleteitem.value = emptyautocomplete()
+        autocompleteitem.value = emptyautocomplete.value
     }
     if(isNull(modelValue.value )){
         modelValue.value = autocompleteitem.value
@@ -94,13 +100,13 @@ const pickAutoComplete = (event:any)=>{
     console.log("event",event,'event.value._id',"'"+event.value._id+"'")
     if(event.value._id===''){
         
-        modelValue.value =  emptyautocomplete()
-        autocompleteitem.value = emptyautocomplete()
+        modelValue.value =  emptyautocomplete.value
+        autocompleteitem.value = emptyautocomplete.value
         console.log(modelValue.value )
     } else if(event.value._id==='new'){
         
-        modelValue.value =  emptyautocomplete()
-        autocompleteitem.value = emptyautocomplete()
+        modelValue.value =  emptyautocomplete.value
+        autocompleteitem.value = emptyautocomplete.value
         openViewer(false)        
     } 
     else if(typeof event.value.query == 'undefined'){      

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

@@ -1,5 +1,5 @@
 <template>
-    <form class="simpleapp-form" @submit.prevent="true">
+    <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>
@@ -9,7 +9,8 @@
 import * as jsonpath from 'jsonpath';
 import { SimpleAppClient } from  '~/simpleapp/generate/clients/SimpleAppClient'
 import type { JSONSchema7,JSONSchema7Definition } from 'json-schema';
-import _ from 'lodash'
+import * as alldefaults from '~/simpleapp/generate/defaults'
+import _, { upperFirst } from 'lodash'
     const props = defineProps<{
         title?:string,
         document: SimpleAppClient<any,any>
@@ -29,7 +30,11 @@ import _ from 'lodash'
         const fieldsetting = getPathObject(schema,path)
         // console.log("setting",fieldsetting)
         
+        type defaulttype = typeof alldefaults
+        type keytype = keyof defaulttype
         
+        const x : keytype = 'Default'+ props.document.getDocName(true)   as keytype
+        const defaultvalue = alldefaults[x](crypto.randomUUID())
         return {
             path: path,
             key: _.last(path.split('/')),
@@ -41,15 +46,13 @@ import _ from 'lodash'
             modelField: 'email',
             isrequired: getIsRequired(schema,path),
             errors: props.document.getErrors(),
-            readonly: isreadonly.value
+            readonly: isreadonly.value,
+            defaultValue: defaultvalue
         } //as SimpleAppFieldSetting
     }
 
     //    "schemaPath": "#/properties/email/format",
 
-    const getModelValue=(data:any,path:string)=>{
-
-    }
     const getIsRequired=(schema:any,path:string)=>{
         if(!path){
             console.error('unknown path')

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

@@ -24,13 +24,17 @@
             v-model="datevalue" @update:modelValue="updateDate" :readonly="isReadonly"
             :placeholder="placeholder"
             v-bind="(componentProps as CalendarProps)"/>
+
         <!-- time component -->        
-        <InputText  :pt="pt" 
-            v-else-if="inputType == SimpleAppInputType.time"            
+        <Calendar  :pt="pt" 
+            v-else-if="inputType == SimpleAppInputType.time" timeOnly showTime 
+            :hourFormat="componentProps && componentProps['hourFormat']? componentProps['hourFormat']: 12" 
+             @update:modelValue="updateTime"      
             :inputId="slotprops.uuid" :path="setting.instancepath"
             v-model="(modelValue as string)" :readonly="isReadonly"
-            :placeholder="placeholder"
-            v-bind="(componentProps as InputTextProps)"/>
+            :placeholder="placeholder"            
+            v-bind="(componentProps as CalendarProps)"/>
+
         <!-- select/list component -->                
         <Listbox v-model="modelValue"  :pt="pt"
             v-else-if="SimpleAppInputType.list==inputType"
@@ -141,11 +145,8 @@
                 :path="setting.instancepath"
                 :placeholder="placeholder"
                 v-bind="(componentProps as InputTextProps)"
-                />
-            
-        
-        <!-- component require special treatment -->
-        
+                />                    
+        <!-- component require special treatment -->        
     </SimpleAppFieldContainer>    
 </template>
 
@@ -171,9 +172,10 @@ import Slider,{ SliderProps }  from 'primevue/slider';
 import Textarea, { TextareaProps } from 'primevue/textarea';
 import {SimpleAppInputType} from '~/types'
 
-
 const datevalue = ref('')
 const modelValue = defineModel()
+const timestr = `${today()}T${modelValue.value??'00:00:00Z'}`
+const timevalue = ref<Date>(moment(timestr).toDate())
 
 const props = withDefaults( defineProps<{
     inputType:SimpleAppInputType,
@@ -198,68 +200,6 @@ if(props.inputType== SimpleAppInputType.date && modelValue.value){
     datevalue.value = ''
 }
 
-
-// switch(props.inputType){
-//     case SimpleAppInputType.text:
-//         inputComponent = InputText
-//         break;
-//     case SimpleAppInputType.textarea:
-//         inputComponent = Textarea
-//         break;
-//     case SimpleAppInputType.number:
-//         inputComponent = InputNumber
-//     break   
-//     case SimpleAppInputType.date:
-//         inputComponent = InputText
-//     break;
-//     case SimpleAppInputType.time:
-//         inputComponent = InputText
-//     break;
-//     case SimpleAppInputType.calendar:
-//         inputComponent = Calendar
-//         break;
-//     case SimpleAppInputType.autocomplete: 
-//         inputComponent = AutoComplete
-//         break;
-//     case SimpleAppInputType.autocompletemultiple: //*
-//         inputComponent = AutoComplete
-//         break;
-//     case SimpleAppInputType.selectmultiple: //*
-//         inputComponent = MultiSelect
-//         break;
-//     case SimpleAppInputType.listmultiple: //*
-//         break;    
-//     case SimpleAppInputType.radio: //*
-//         inputComponent = RadioButton
-//         break;
-//     case SimpleAppInputType.select: //*
-//         inputComponent = Dropdown
-//         break;
-//     case SimpleAppInputType.list: //*
-//         inputComponent = Listbox
-//         break;
-//     case SimpleAppInputType.chip: //*
-//         inputComponent = Chips
-//         break;
-//     case SimpleAppInputType.checkbox:
-//         inputComponent = Checkbox
-//         break;
-//     case SimpleAppInputType.switch:
-//         inputComponent = InputSwitch
-//         break;    
-//     case SimpleAppInputType.documentno:  //*
-//         break;
-//     case SimpleAppInputType.password: 
-//         inputComponent = Password
-//         break;    
-//     case SimpleAppInputType.rating:
-//         inputComponent = Rating
-//         break;
-//     case SimpleAppInputType.slider:
-//         inputComponent = Slider
-//         break;
-
-// }
 const isReadonly = computed(()=>{
     if(props.readonly){
         return props.readonly
@@ -269,7 +209,9 @@ const isReadonly = computed(()=>{
         return false
     }
 })
-
+const updateTime = () =>{
+    modelValue.value = moment(timevalue.value).format("HH:mm:ss")   
+}
 const updateDate = (value:any)=>{
     
     if(value){
@@ -287,7 +229,12 @@ const getListOptions = () =>{
     if(props.setting.fieldsetting.enum){
         for(let i=0;i<props.setting.fieldsetting.enum.length;i++){
             const v = props.setting.fieldsetting.enum[i]
-            options.push({value:v, label: camelCaseToWords(v)})
+            if(typeof v == 'string'){
+                options.push({value:v, label: t(v)})
+            }else{
+                options.push({value:v.value, label: t(v.label)})
+            }
+            
         }
 
 
@@ -308,9 +255,7 @@ watch(modelValue ,(newvalue:any)=>{
         }
         
     }
-    // else if(props.inputType==SimpleAppInputType.autocomplete){            
-    //         modelValue.value=autocompleteitem.value                
-    // }
+
 
     emits('change',modelValue.value)
     emits('update:modelValue',modelValue.value)    

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

@@ -12,7 +12,7 @@
               <div class="p-inputgroup flex flex-row">
                 <InputText
                   class="flex-1"
-                  placeholder="yourCompanyMame"
+                  :placeholder="t('yourCompanyName')"
                   v-model:model-value="data.tenantName"
                 />
                 <div class="p-inputgroup-addon p p-0">

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

@@ -10,7 +10,7 @@ export const reloadUserStore = async () =>{
 export const getUserProfile =  () =>{    
     const userstore = getUserStore()
     
-    return getUserStore().getUserInfo()
+    return !userstore ? undefined :userstore.getUserInfo()
 }
 
 export const getCurrentXorg = () =>{
@@ -29,5 +29,5 @@ export const canPerform = (resource:string,action:string):boolean =>{
     return getUserStore().canPerform(resource,action)
 }
 
-export const getProfileEmail = () => getUserProfile().email
-export const getProfileFullName = () => getUserProfile().fullName
+export const getProfileEmail = () => getUserProfile()?.email
+export const getProfileFullName = () => getUserProfile()?.fullName

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

@@ -1,4 +1,4 @@
-import plugin from 'primevue/config';
+import _ from 'lodash'
 import {Md5} from 'ts-md5'
 import moment from "moment";
 export const camelCaseToWords = (s: string) =>{
@@ -19,4 +19,5 @@ export const t = (txt:string,options?:any):string => useNuxtApp().$i18n.t(txt,op
 export const today = () => moment().format('YYYY-MM-DD')
 export const dateToString = (date:Date) => moment(date).format('YYYY-MM-DD')
 export const getMoment = (startTime:string)=> moment(startTime)
-export const lastDateOfMonth = (datestr:string) => moment(datestr).endOf('month').format('YYYY-MM-DD');
+export const lastDateOfMonth = (datestr:string) => moment(datestr).endOf('month').format('YYYY-MM-DD');
+export const upperFirst = (str:string) => _.upperFirst(str)

package/templates/nuxt/error.vue._eta

@@ -9,8 +9,9 @@
                       </div>
                       <div>
                         <h1 class="px-4 pt-2 pb-4 text-left text-5xl font-bold leading-10 text-gray-800">OOPS!</h1>                    
-                        <p class="px-4 mt mb-4 text-4xl text-left font font-bold">{{error.statusCode}} Error</p>                    
-                        <p class="px-4 pb-10 text-base leading-none text-left text-gray-400">{{error.message}}</p>                    
+                        <p class="px-4 mt mb-4 text-4xl text-left font font-bold">{{error?.statusCode}} Error</p>                    
+                        <p class="px-4 pb-10 text-base leading-none text-left text-red-400">{{t(error?.statusMessage)}}</p>  
+                        <p>    <Button @click="handleError" class="btn-primary">{{ t('backToHome') }}</Button></p>                  
                       </div>
                     </div>
                     
@@ -22,9 +23,13 @@
 </template>
 <script setup lang="ts">
 
-defineProps(['error'])
+const props = defineProps({
+  error: Object
+})
+const handleError = () => navigateTo('/',{external:true})
+console.error(props.error)
+// handleError()
 definePageMeta({
-// //   name: "Login",
   auth: false,
 });
 </script>

package/templates/nuxt/lang/df.ts.eta

@@ -1,17 +1,16 @@
 export default {
-
     //auto generate from lang/default.ts
     <%let langkeys = Object.keys(it.lang) %>
     <% for(let l=0; l< langkeys.length; l++){ %>
     <% let key = langkeys[l] %>
-        <%=key%> : '<%= it.lang[key] %>',
+        '<%=key%>' : '<%= it.lang[key] %>',
     <%}%>    
 
 
     //auto generate from schema
     <% for(let i=0; i< it.allfields.length; i++){ %>
     <% let f = it.allfields[i] %>
-        <%=f%> : '<%= camelCaseToWords(f) %>',
+        '<%= f %>' : '<%= camelCaseToWords(f) %>',
     <%}%>    
 
 }

package/templates/nuxt/nuxt.config.ts._eta

@@ -32,8 +32,7 @@ tailwindcss: {
     '@sidebase/nuxt-auth',
     'nuxt-primevue',
     // "nuxt-security",     //temporary avoid nuxt-security cause cors
-    '@vueuse/nuxt', 
-    //'@nuxt/ui',
+    '@vueuse/nuxt',    
     '@nuxtjs/tailwindcss',
     ['@pinia/nuxt',{
       autoImports: [

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

@@ -6,7 +6,7 @@
  * last change 2023-09-09
  * author: Ks Tan
  */
- import { SimpleAppInputType } from "~/types";
+import { SimpleAppInputType } from "~/types";
 import ConfirmPopup from "primevue/confirmpopup";
 import { useConfirm } from "primevue/useconfirm";
 const confirm = useConfirm();
@@ -44,10 +44,9 @@ const refresh = () => {
   $event("RefreshDocumentList", { documentName: doc.getDocName() });
 };
 
-
 definePageMeta({
   menuPath: "setting/organization",
-  })
+});
 
 //branch record update then reload
 $listen("RefreshDocumentList", (data) => {
@@ -61,14 +60,11 @@ if (id) {
   fetchRecord(id.value);
 }
 
-
-
-
 getCurrentOrg();
 </script>
 <template>
   <div class="grid grid-cols-3">
-    <title>{{ t('organization')}} </title>
+    <title>{{ t("organization") }}</title>
     <div class="">
       <Card>
         <template #header><h1 class="text-2xl">Organization</h1></template>
@@ -95,7 +91,7 @@ getCurrentOrg();
               <ConfirmPopup></ConfirmPopup>
             </div>
             <div class="flex flex-col">
-              <div class="flex flex-row gap-4">
+              <div class="grid grid-cols-2 gap-4">
                 <SimpleAppInput
                   :input-type="SimpleAppInputType.text"
                   autofocus
@@ -109,10 +105,15 @@ getCurrentOrg();
                   :setting="o.getField('#/properties/orgName')"
                 />
                 <SimpleAppInput
-                :input-type="SimpleAppInputType.checkbox"
+                  :input-type="SimpleAppInputType.checkbox"
                   v-model="data.active"
                   :setting="o.getField('#/properties/active')"
                 />
+                <SimpleAppInput
+                  :input-type="SimpleAppInputType.text"
+                  v-model="data.timeZone"
+                  :setting="o.getField('#/properties/timeZone')"
+                />
               </div>
               <div>
                 <SimpleAppInput

package/templates/nuxt/plugins/10.simpleapp-event.ts.eta

@@ -24,35 +24,29 @@ export default defineNuxtPlugin( async(nuxtApp) => {
     //axios.defaults.headers.common = {"CSRF-TOKEN": csrf};
     const myaxios = axios.create({timeout:5000})
     myaxios.interceptors.response.use((response) => response, (error) => {
-      if(error.code && error.code["ECONNABORTED"]){
-        console.error("Failed to reach backend server")
-        // navigateTo("/error503")
-        createError({statusCode:503,statusMessage:"Backend server timeout, verify it is up and running!"})
-        
-      }
-      else if(error.response.status==401){        
+
+      if(error.response.status==401){        
         console.error("axios 401 session expired, pop up for relogin")
       }else if(error.response && error.response.status){
-        console.error("have error response")
-        createError({
-          statusCode:error.response.status,
-          statusMessage:error.response.message})
-          return Promise.reject(error)
+        let errmsg = error.response.message
+        let errorcode =error.response.status
+        if(error.response?.data && error.response?.data?.message){
+          errmsg = error.response.data.message
+          errorcode = error.response.data.statusCode
+        }
+        
+        throw createError({
+          statusCode:errorcode,
+          statusMessage:errmsg,
+          fatal:true
+        })  
+          // return Promise.reject(error)
       }else{
         console.error("unknown error")
-        createError({statusCode:500,statusMessage:"Internal server error"})
+        throw createError({statusCode:500,statusMessage:"Internal server error"}) 
       }
     });
     
-    // nuxtApp.vueApp.use(PrimeVue, { ripple: true,Tailwind:true, pt: Tailwind});
-    // nuxtApp.vueApp.use(PrimeVue,  { unstyled: true, pt: {} });
-    // nuxtApp.vueApp    
-    // .use(ToastService)
-    // .use(ConfirmationService)
-    // .directive('tooltip', Tooltip)
-    // ;    
-
-  
     return {
         provide: {
           

package/templates/nuxt/plugins/20.simpleapp-userstore.ts.eta

@@ -12,7 +12,6 @@ import _ from 'lodash'
 
 
 export default defineNuxtPlugin( async(nuxtApp) => {
-    console.log("start plugin 20")
     const useUserStore = defineStore('userstore', {
         state: ()=>({      
           _id: ref(''),  
@@ -75,25 +74,15 @@ export default defineNuxtPlugin( async(nuxtApp) => {
               this.roles = res.data.roles
               this.time = res.data.time              
               this.invites = res.data.invites
-              this.moreProps = res.data.morePros
+              this.moreProps = res.data.moreProps
               return Promise.resolve(true)
                 // return true
-            }).catch((err:any)=>{
-              if(err.response=== undefined){
-                // console.error("no backend server")
-                const errdata = createError({statusCode:503,statusMessage:"Backend server timeout, verify it is up and running!"})
-                return Promise.reject(errdata)
-              }
-              else if(err.response && err.response.status==401){
-                console.error("Unauthorise(plugin-userstore)")
-              }else{
-                const errdata = createError({statusCode:500,statusMessage:"Unknown error"})                
-                return Promise.reject(errdata)
-              }
+            }).catch((err:any)=>{            
+                return Promise.reject(err)
             })            
           },                  
           getCurrentXorg(){
-            return  (useRoute().params.xorg) ? String(useRoute().params.xorg) : undefined           
+            return  (useRoute().params.xorg) ? <String>useRoute().params.xorg : undefined           
           },
           async pingSession(){
             let xorg = this.getCurrentXorg() 
@@ -104,7 +93,8 @@ export default defineNuxtPlugin( async(nuxtApp) => {
             apiurl = `${useRuntimeConfig().public.APP_URL}/api/${xorg}`
             }
             const {$axios} = useNuxtApp()
-            return await new PROFILEApi(undefined,apiurl,$axios).getSession()
+            const pingresult = await new PROFILEApi(undefined,apiurl,$axios).getSession()
+            return pingresult
           },
           async decideInvitation(id:string,decision:string){
             const apiurl = `${useRuntimeConfig().public.APP_URL}/api`
@@ -190,17 +180,14 @@ export default defineNuxtPlugin( async(nuxtApp) => {
           }
         }        
       })
-    console.log("after define user store")
+    
     
     if( useRoute().meta.auth !==false){
       
       if(await useUserStore().pingSession()){
-        console.log("ping session ok")
         await useUserStore().loadRemoteUserInfo()
-        console.log("load remote user info ok")
         
       }else{
-        console.log("No login session", useRoute().path)
         await useUserStore().logout(useRoute().path)        
       }    
     }else{

package/templates/nuxt/server/api/[xorg]/[...].ts.eta

@@ -87,16 +87,6 @@ export default defineEventHandler(async (event:any) => {
             params: forwardData,
         }
         
-        // if(key === 'system') {
-        //     axiosConfig.headers["X-Global"] = true;
-        //     delete axiosConfig.headers["X-Org"];
-        // }
-
-        // if(otherLink.includes('avatar')) {
-        //     axiosConfig.responseType = 'arraybuffer';
-        //     // axiosConfig.headers['Acceptable'] = 'text/html,image/avif,image/webp,image/apng';
-        // }
-
         axios(axiosConfig).then((res) => {
             if (res.headers['content-type'] === 'image/png') {
                 // Set the response headers for the image
@@ -118,27 +108,28 @@ export default defineEventHandler(async (event:any) => {
             }
 
         }).catch((error) => {
-            // console.log("==============================================================")
-            // console.log('@@@@@@@@@@@@@ API error', error)
-            // console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@")
-            // console.log('######### response', error.response)
-            // console.log('#####################################')
-            // console.log(axiosConfig);
-            // console.log('#####################################')
-
-            if (error.response?.status && error.response.status == '401') {
-                //return reject({ statusMessage: 'Unauthorized', statusCode: 401 });
-                return sendRedirect(event, '/login', 401)
-                // throw createError({ statusMessage: 'Unauthorized', statusCode: 401 })
+            if(!error?.response){
+                console.log("backend server no response ",error.code)              
+                reject({ 
+                    statusMessage:"backendServerDownMessage",
+                    statusCode: 503,                    
+                });            
+            }else if (error.response.status == 401) {
+                return sendRedirect(event, '/login', 401)             
+            }else{
+                const responseCode = error.response.data?.statusCode ? error.response.data.statusCode : error.response.status 
+                const responseMsg = error.response.data ? error.response.data.message : error.response.statusText 
+                // reject(error.data)
+                // console.log("----error.response.data--",responseMsg,error.response.data,error.response.status,responseCode)
+                reject({ 
+                    statusMessage: responseMsg, 
+                    statusCode: responseCode ,
+                    data: error.response.data
+                });         
+                
             }
 
-            // reject(error.data)
-            reject({ 
-                statusMessage: error.response.statusText, 
-                statusCode: error.response.status ,
-                data: error.response.data
-            });            // resolve({ status: 'ok' })
-            // throw createError({ statusMessage: 'Bad Requests', statusCode: 404 })
+     
         })
 
         // resolve({