@simitgroup/simpleapp-generator 1.1.26 → 1.1.27

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

@@ -0,0 +1,106 @@
+<template>
+    <div class="simpleapp-tool-bar flex flex-row text-left gap-4">           
+        <div v-for="(menu,index) in menus" :key="index">
+            <div>
+                <Button v-if="showMenuButton(menu)" @click="emitEvent(menu,$event)">{{ menu.label  }}</Button>
+            </div>
+            
+        </div>  
+        <div v-for="(menu,index) in getDocActions()" :key="index">
+            <div>
+                <Button @click="emitEvent(menu,$event)">{{ menu.label  }}</Button>
+            </div>
+            
+        </div>     
+        <ConfirmPopup></ConfirmPopup>    
+    </div>
+</template>
+<script setup lang="ts">
+
+import { SimpleAppClient } from '~/simpleapp/generate/clients/SimpleAppClient';
+import { useConfirm } from "primevue/useconfirm";
+const confirm = useConfirm();
+import {FormActions,FormMenu} from '~/types'
+
+const ismodify = ref(false)
+const props = defineProps<{
+    document: SimpleAppClient<any,any>,    
+    disableaction? : string[]
+}>()
+
+const emits = defineEmits(['on'])
+const doc = props.document
+const data = doc.getReactiveData()
+
+const menus = ref<FormMenu[]>([])
+
+
+const getActions = () => {
+    const actions = doc.getActions()
+    
+    // Object.keys(actions).forEach((key)=>{ //crud, api, docstatus
+        actions['crud'].forEach((item)=>{ 
+            if(props.disableaction && props.disableaction.includes(item)){/*skip this item*/}
+            else{                
+                menus.value.push({
+                    action: item,
+                    label: t(item),                    
+                    type: 'crud'               
+                })
+            }
+        })
+    // })        
+    return actions
+}
+
+getActions()
+
+const emitEvent = (menu:FormMenu, clickEvent:any)=>{  
+    if(menu.action=='delete'){
+        confirm.require({
+            target: clickEvent.currentTarget as HTMLElement,
+            message: `${t("delete")}?`,
+            icon: "pi pi-exclamation-triangle",
+            acceptClass: "p-button-danger",
+            accept: () => emits('on',menu.action)
+        });
+    }else{
+        emits('on',menu.action)    
+    }   
+    
+}
+
+
+const getDocActions = () =>{
+        const docstatus:string = data.value.documentStatus
+        const allstatus = doc.getSchema()['x-simpleapp-config'].allStatus
+        let docactionmenus:FormMenu[] = []
+        type stringlist = {[key:string]:string}
+        const statusNames:stringlist = {}
+        allstatus?.forEach(item=>{
+            statusNames[item.status]=t(item.statusName)
+        })
+        if(allstatus){
+            const stateconfig = allstatus.find((item)=>item.status===docstatus)
+            docactionmenus = stateconfig?.actions.map(item=>({
+                    action: item,
+                    label: statusNames[item],                    
+                    type: 'docstatus'  
+            })) ?? []                   
+        }
+        return docactionmenus
+    
+}
+const showMenuButton = (menu:FormMenu)=>{
+    
+    if(!canPerform(doc.getDocName(),menu.action)) return false
+    if(doc.isNew() && menu.action == 'create')  return true    
+    if(!doc.isNew() && menu.action == 'new')  return true
+    if(!doc.isNew() && menu.action == 'update')  return true
+    if(!doc.isNew() && menu.action == 'delete')  return true    
+    
+    if(menu.type == 'api' ) return false
+    return false
+}
+
+</script>

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

@@ -2,45 +2,60 @@
     <SimpleAppFieldContainer :hidelabel="hidelabel" v-model="modelValue" 
                 :label="label" :description="description" :pt="pt"
                 :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
-        <!-- binary input -->
-        <component :is="inputComponent" :readonly="isReadonly" :pt="pt"
-                v-if="[SimpleAppInputType.checkbox,SimpleAppInputType.switch ].includes(inputType)" 
+        <Checkbox v-if="inputType ==SimpleAppInputType.checkbox"  :readonly="isReadonly" :pt="pt"
                 :inputId="slotprops.uuid" :path="setting.instancepath"
                 v-model="modelValue" :binary="true"
-                v-bind="componentProps"/>
+                v-bind="(componentProps as CheckboxProps)"/>
+        <InputSwitch v-else-if="inputType ==SimpleAppInputType.switch"  :readonly="isReadonly" :pt="pt"
+                :inputId="slotprops.uuid" :path="setting.instancepath"
+                v-model="modelValue as boolean" :binary="true"
+                v-bind="(componentProps as InputSwitchProps)"/>
 
-        <!-- date component -->        
-        <component :is="inputComponent" type="date" :pt="pt" 
+        <InputText type="date" :pt="pt" 
             v-else-if="inputType == SimpleAppInputType.date"            
             :inputId="slotprops.uuid" :path="setting.instancepath"
-            v-model="datevalue" @update:modelValue="updateDate" :readonly="isReadonly"
-            v-bind="componentProps"/>
+            v-model="(datevalue as string)" @update:modelValue="updateDate" :readonly="isReadonly"
+            :placeholder="placeholder"
+            v-bind="(componentProps as InputTextProps)"/>
         <!-- calendar component -->        
-        <component :is="inputComponent" type="date" :pt="pt" :class="'flex flex-col yyy-'+modelValue+ ' xxx-'+datevalue"
+        <Calendar type="date" :pt="pt" class="flex flex-col"
             v-else-if="SimpleAppInputType.calendar==inputType"
             :inputId="slotprops.uuid" :path="setting.instancepath"
-            v-model="datevalue" @update:modelValue="updateDate" :readonly="isReadonly"
-            v-bind="componentProps"/>
+            v-model="(datevalue as string)" @update:modelValue="updateDate" :readonly="isReadonly"
+            :placeholder="placeholder"
+            v-bind="(componentProps as CalendarProps)"/>
         <!-- time component -->        
-        <component :is="inputComponent" :pt="pt" 
+        <InputText  :pt="pt" 
             v-else-if="inputType == SimpleAppInputType.time"            
             :inputId="slotprops.uuid" :path="setting.instancepath"
-            v-model="modelValue" :readonly="isReadonly"
-            v-bind="componentProps"/>
+            v-model="(modelValue as string)" :readonly="isReadonly"
+            :placeholder="placeholder"
+            v-bind="(componentProps as InputTextProps)"/>
         <!-- select/list component -->                
-        <component :is="inputComponent" v-model="modelValue"  :pt="pt"
-            v-else-if="[SimpleAppInputType.select,SimpleAppInputType.list].includes(inputType)"
+        <Listbox v-model="modelValue"  :pt="pt"
+            v-else-if="SimpleAppInputType.list==inputType"
             :inputId="slotprops.uuid" :path="setting.instancepath"  
             :readonly="isReadonly"
             class="w w-full lg:w-full"
             :disabled="isReadonly"
             :options="getListOptions()" optionLabel="label" optionValue="value"
+            :placeholder="placeholder"
+            v-bind="(componentProps as ListboxProps)"/>
+
+        <Dropdown  v-model="modelValue"  :pt="pt"
+            v-else-if="SimpleAppInputType.select == inputType"
+            :inputId="slotprops.uuid" :path="setting.instancepath"  
+            :readonly="isReadonly"
+            class="w w-full lg:w-full"
+            :disabled="isReadonly"
+            :options="getListOptions()" optionLabel="label" optionValue="value"
+            :placeholder="placeholder"
             v-bind="componentProps"/>
         
         <!-- radio component -->                
         <div v-else-if="inputType == SimpleAppInputType.radio" >
             <div v-for="(item,index) in getListOptions()">
-                <component :pt="pt" :is="inputComponent" v-model="modelValue" 
+                <RadioButton :pt="pt"  v-model="modelValue" 
                         :inputId="setting.key+'-'+index" name="smaple" :value="item.value"
                         :readonly="isReadonly"
                         />  {{ ' ' }}
@@ -50,18 +65,19 @@
         
         <!-- autocomplete, need do more enterprise grade component-->
         <SimpleAppAutocomplete     v-else-if="inputType==SimpleAppInputType.autocomplete"  
-                v-model="modelValue"                          
+                v-model="(modelValue as autocompletetype)"                          
                 :pt="pt"
                 :setting="setting"
                 :disabled="isReadonly"                                                             
                 :inputId="slotprops.uuid"
                 :path="setting.instancepath"
                 :readonly="isReadonly"                
+                :placeholder="placeholder"
                  />
         <!-- v-bind:attributes="componentProps" -->
         <!--  document no input-->
         <SimpleAppDocumentNo v-else-if="inputType == SimpleAppInputType.documentno" 
-            :setting="setting" v-model="modelValue" :inputId="slotprops.uuid"
+            :setting="setting" v-model="(modelValue as string)" :inputId="slotprops.uuid"
             :readonly="isReadonly" @update:docNoFormat="triggerDocNoFormatChange"     
             :pt="pt"
              :path="setting.instancepath"
@@ -69,47 +85,51 @@
            
         
         <!-- password -->
-        <component :is="inputComponent"
+        <Password 
                 v-else-if="inputType == SimpleAppInputType.password" 
-                :type="type" v-model="modelValue" :pt="pt" 
+                :type="type" v-model="(modelValue as string)" :pt="pt" 
                 :readonly="isReadonly" class="flex flex-col"
                 :inputId="slotprops.uuid" :path="setting.instancepath"
-                v-bind="componentProps"/>
+                :placeholder="placeholder"
+                v-bind="(componentProps as PasswordProps)"/>
 
         <!-- rating -->
-        <component v-else-if="inputType == SimpleAppInputType.rating" 
-          :type="type" v-model="modelValue" :pt="pt" 
+        <Rating v-else-if="inputType == SimpleAppInputType.rating" 
+          :type="type" v-model="(modelValue as number)" :pt="pt" 
                 :readonly="isReadonly"                 
                 :inputId="slotprops.uuid" :path="setting.instancepath"
-                v-bind="componentProps"/>
+                v-bind="(componentProps as RatingProps)"/>
             
         <!-- chip -->
-        <component  v-else-if="inputType == SimpleAppInputType.chip" 
-         :is="inputComponent" :type="type" v-model="modelValue"
+        <Chips  v-else-if="inputType == SimpleAppInputType.chip" 
+          :type="type" v-model="(modelValue as string[])"
                  :pt="pt" 
                 :disabled="isReadonly"                                 
                 :inputId="slotprops.uuid" :path="setting.instancepath"
-                v-bind="componentProps"
+                :placeholder="placeholder"
+                v-bind="(componentProps as ChipsProps)"
                 />
         <!-- simple component -->        
-        <InputNumber v-else-if="inputType == SimpleAppInputType.number" 
-                :type="type" v-model="modelValue"
+        <InputNumber v-else-if="inputType == SimpleAppInputType.number"                 
+                :type="type" v-model="(modelValue as number)"
                 :readonly="isReadonly"        
                 :pt="pt"
                 :class="!pt ? 'w-full flex flex-col' :''"
                 :inputId="slotprops.uuid" :path="setting.instancepath"
-                v-bind="componentProps"
+                v-bind="(componentProps as InputNumber)"
+                :placeholder="placeholder"
                 />
 
-        <component v-else
-            v-model="modelValue"
-                :is="inputComponent"
+        <InputText v-else
+            v-model="(modelValue as string)"                
                 :readonly="isReadonly"        
                 :pt="pt"
                 :type="type"
                 class="w-full flex flex-col"
-                :inputId="slotprops.uuid" :path="setting.instancepath"
-                v-bind="componentProps"
+                :inputId="slotprops.uuid" 
+                :path="setting.instancepath"
+                :placeholder="placeholder"
+                v-bind="(componentProps as InputTextProps)"
                 />
             
         
@@ -119,6 +139,7 @@
 </template>
 
 <script lang="ts" setup>
+import {autocompletetype} from '~/types'
 import moment from 'moment'
 import AutoComplete,{ AutoCompleteProps } from 'primevue/autocomplete';
 import Calendar,{ CalendarProps } from 'primevue/calendar';
@@ -140,9 +161,6 @@ import Textarea, { TextareaProps } from 'primevue/textarea';
 import {SimpleAppInputType} from '~/types'
 
 
-let inputComponent :Component
-
-
 const datevalue = ref('')
 const modelValue = defineModel()
 
@@ -162,72 +180,73 @@ const props = withDefaults( defineProps<{
     hidelabel?: boolean
     readonly?: boolean
     pt?:any,
+    placeholder?:string
     componentProps?: InputNumberProps | InputSwitchProps | InputTextProps | TextareaProps | DropdownProps | CalendarProps | RatingProps
 
 }>(),{type:'text'})
 
 
-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;
+// 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
@@ -267,7 +286,7 @@ const getListOptions = () =>{
 const emits = defineEmits(['change','update:modelValue','update:docNoFormat'])
 
 watch(modelValue ,(newvalue:any)=>{
-
+    
     if([SimpleAppInputType.date,SimpleAppInputType.calendar].includes(props.inputType)){
         if(modelValue.value){
             datevalue.value = moment(modelValue.value as string ).format('YYYY-MM-DD')

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

@@ -0,0 +1 @@
+export const refreshDocumentList = (docName:string)=>useNuxtApp().$event('RefreshDocumentList',{documentName:docName})

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

@@ -17,4 +17,6 @@ export const getAvatarLink = (email:string, size:number):string=>{
 export const toLocalDate = (dateiso8601:string)=> new Date(String(dateiso8601)).toLocaleDateString()
 export const t = (txt:string,options?:any):string => useNuxtApp().$i18n.t(txt,options)
 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');

package/templates/nuxt/lang/{df.ts._eta → df.ts.eta}

@@ -1,6 +1,14 @@
-export default {
+import more from './more'
+export default ()=> ({
+    ...more,
     welcome: 'Welcome',
     create: 'Create',
+    update: 'Update',
+    delete:'Delete',
+    modify: 'Modify',
+    confirm:'Confirm',
+    void:'Void',
+    draft:'Draft',
     profile: 'Profile',
     logout: 'logout',
     language: 'Language',
@@ -26,12 +34,12 @@ export default {
     decision: 'Decision',
     simpleApproveMessage: 'Approve or reject',
     suspendcustomer:"Suspend Customer",
-    formKeyNotFound:'Formkey not found "{formKey}"',
-    
+    formKeyNotFound:'Formkey not found "{formKey}"',    
+    selectAll:'Select All',
     //auto generate from schema
     <% for(let i=0; i< it.allfields.length; i++){ %>
     <% let f = it.allfields[i] %>
         <%=f%> : '<%= camelCaseToWords(f) %>',
     <%}%>    
 
-}
+})

package/templates/nuxt/lang/more.ts._eta

@@ -0,0 +1,3 @@
+export default {
+ 
+}

package/templates/nuxt/simpleapp/generate/clients/SimpleAppClient.ts.eta

@@ -10,7 +10,7 @@ import addErrors from 'ajv-errors';
 import { ref } from 'vue';
 import type { Ref } from 'vue';
 import type { AxiosResponse } from 'axios';
-import {SearchBody,Notification,NotificationStatus,SchemaType} from '~/types'
+import {SearchBody,Notification,NotificationStatus,SchemaType,FormActions} from '~/types'
 
 // import { useToast, } from 'primevue/usetoast';
 // import type {  ToastMessageOptions } from 'primevue/toast';
@@ -37,6 +37,7 @@ export class SimpleAppClient<
   protected docname = '';
   protected errorlist = ref({});
   protected completeformula = true;
+  
   constructor(apiobj: TApi,doctype:string,docname:string) {
     this.docapi = apiobj;
     this.doctype=doctype
@@ -54,12 +55,13 @@ export class SimpleAppClient<
   getApi = () =>this.docapi;
   getReactiveData = () => this.data;
   public reCalculateValue (){}
+  public isReadOnly():boolean{return false}  //if there is readonly attribute in data, will override it at processor and client    
   setData = (data: any) => {
     // this.data.value = data;
     Object.assign(this.data.value, data);
   };
   
-  async getById(id: string) {
+  async getById(id?: string) {
     return await this.docapi.runFindOne(id,{timeout:this.defaultTimeOut})
     .then((res: AxiosResponse) => {
       // if(this.event){this.event('info:getById',res.data)}
@@ -152,7 +154,10 @@ export class SimpleAppClient<
         });
     }
   }
-  async delete(id: string) {
+  async delete(id?: string) {
+    if(!id){
+      id = this.data.value._id ?? ''
+    }
     const {$event} =useNuxtApp()
     return await this.docapi.runDelete(id,{timeout:this.defaultTimeOut})
       .then((res:AxiosResponse)=>{
@@ -233,4 +238,12 @@ export class SimpleAppClient<
     }
   }
 
+  public getActions():FormActions{
+    const data:FormActions =  {
+      crud:['new','create','update','delete',],
+      docstatus:[],
+      api:[]
+    }
+    return data
+  }
 }

package/templates/nuxt/types/others.ts.eta

@@ -1,6 +1,15 @@
+
 import {SimpleAppClient} from '~/simpleapp/generate/clients/SimpleAppClient'
 import {CellSetting} from './documentlist'
 import { Component } from 'vue'
+
+  export type ForeignKey = {
+    _id: string;
+    label: string;
+    code?: string
+    [key:string]: any
+  };
+  
   export type DocumentMetaData =  {
     docName:string
     docType:string
@@ -28,10 +37,6 @@ import { Component } from 'vue'
     sample:string
     }
   
-  export type ForeignKey = {
-    _id : string
-    label: string
-  }
   
   
   export type SearchBody = {

package/templates/nuxt/types/simpleappinput.ts.eta

@@ -38,4 +38,15 @@ export type autocompletetype={
     label:string
     code:string
     [key:string]:any
+}
+
+export type FormActions = {
+    [key:string]:string[]    
+}
+
+export type FormMenu = {
+    type:string
+    action:string
+    label:string
+    command? : Function
 }