@simitgroup/simpleapp-generator 1.0.32 → 1.0.35

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

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+/**
+* This file was automatically generated by simpleapp generator during initialization.
+ * DO NOT MODIFY IT BY HAND.
+ * last change 2023-09-09
+ * author: Ks Tan
+ */
+import {ref} from 'vue'
+import _ from 'lodash'
+import { SimpleAppClient } from  '../simpleapp/generate/clients/SimpleAppClient' //'../SimpleAppClient';
+// import SimpleAppForm from '@simitgroup/simpleapp-vue-component/src/components/SimpleAppForm.vue';
+// import SimpleAppDatatable from '@simitgroup/simpleapp-vue-component/src/components/SimpleAppDatatable.vue';
+import Dialog from 'primevue/dialog';
+// import axios from 'axios'
+import ProgressSpinner from 'primevue/progressspinner';
+import ConfirmPopup from 'primevue/confirmpopup';
+import { useConfirm } from "primevue/useconfirm";
+import {SearchBody} from '~/types'
+const confirm = useConfirm();
+const props = defineProps<{
+    document:SimpleAppClient<any,any>
+    listColumns:string[]
+    path:string
+    title:string
+    sorts?: any
+}>()
+const resourcename = ref( _.upperFirst(props.document.getDocName()))
+const visible = ref(false)
+const obj = props.document
+const data = obj.getReactiveData()
+const disabled=ref(false)
+const recordlist = ref();
+const router = useRouter()
+const route = useRoute()
+const filters = ref()
+const popuptitle = ref("New "+props.title)
+const systemwindows = ref(false)
+const {$event} = useNuxtApp()
+const currentjsonschema:any = props.document.getSchema()
+
+if(['none'].includes(currentjsonschema['x-isolation-type'])){
+  systemwindows.value=true
+}
+watch(visible,(newvalue )=>{
+  if(newvalue == false){
+    if(data.value.created!=''){
+      newData()
+    }    
+  }
+
+})
+defineShortcuts({
+  'ctrl_enter': () => newData()
+})
+
+const refresh = () => {
+  const searchbody: SearchBody = {
+    fields: props.listColumns.concat(['created']),
+    sorts:props.sorts
+  }
+  obj.search(searchbody).then((res:any) => {    
+    recordlist.value = res;
+    disabled.value=false
+  });
+};
+const newData = () => {
+  router.push({ path: `${props.path}` })  
+  obj.setNew()    
+  visible.value=true;
+  $event("newRecord")
+};
+
+const triggerEdit = (event: any) => {
+  let id = event.data._id.toString()
+  router.push({ path: `${props.path}/${id}` })  
+};
+const editRecord = (id:string) => {
+  
+  console.log("editRecord",id)
+  
+  obj.getById(id).then(()=>{
+    visible.value=true
+    popuptitle.value = "Edit "+props.title
+    $event("editRecord",id)
+  });
+  
+};
+const createData = async () => {
+  disabled.value=true
+  
+    obj.create().then(()=>{
+      visible.value=false
+      refresh()
+    }).catch(err=>{
+      console.error(err)
+    }).finally(()=>disabled.value=false)
+ 
+};
+const updateData = async () => {
+  disabled.value=true
+  
+    obj.update().then(()=>{
+      visible.value=false
+      refresh()
+    }).catch(err=>{
+      console.error(err)
+    }).finally(()=>disabled.value=false)
+  
+};
+const deleteData = (event:Event) => {
+    
+    confirm.require({
+        target: event.currentTarget as HTMLElement,
+        message:'Delete?',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        accept: ()=>{
+            disabled.value=true 
+            obj.delete(data.value._id ?? "").then(()=>visible.value=false).finally(() => {
+                refresh();    
+            });
+        },
+        reject: () => {
+            console.log("Cancel delete")
+        }
+    })  
+};
+
+onNuxtReady(()=>{
+  refresh()
+  if (route.params.id) {
+    const recordid:string = route.params.id.toString()
+    editRecord(recordid)  
+  }
+  
+})
+
+
+</script>
+ 
+<template>
+    <div class="simpleapp-crudsimple">    
+      <h1 v-if="systemwindows" class="error-text text-center">* system administration screen</h1>
+      
+      <button class="btn-primary" @click="newData" v-tooltip="'Add new(ctrl+enter)'" v-if="canPerform(resourcename,'create')">New</button>
+      <SimpleAppDatatable
+            @row-dblclick="triggerEdit"
+            v-model="recordlist"                                 
+            :setting="{}"
+            :columns="listColumns"
+          >         
+        </SimpleAppDatatable>
+
+      <DebugDocumentData v-model="data"/>
+    </div>
+
+    <Dialog v-model:visible="visible" modal :header="popuptitle" class="crudsimple-dialog" :autoZIndex="false" :style="{zIndex:100, width: '80vw' }">        
+        <SimpleAppForm :document="obj"  #default="o">     
+            <div class="simpleapp-tool-bar   col-span-4 text-left gap-4"  >
+              <button class="btn-default" :disabled="disabled" @click="newData" type="button" v-if="canPerform(resourcename,'create')">New</button>
+              <button class="btn-primary" :disabled="disabled" @click="createData" type="button" v-if="canPerform(resourcename,'create') && data.created==''">Create</button>
+              <button class="btn-primary" :disabled="disabled" @click="updateData" type="button" v-if="canPerform(resourcename,'update') && data.created!=''">Update</button>
+              <button class="btn-danger" :disabled="disabled" @click="deleteData($event)" type="button" v-if="canPerform(resourcename,'delete') && data.created!=''">Delete</button>
+              <ProgressSpinner v-if="disabled==true" style="width: 2rem; height: 2rem" ></ProgressSpinner>
+              <ConfirmPopup></ConfirmPopup>
+              
+            </div>
+            <div class="grid grid-cols-4 gap-4 w-full">
+          <slot :data="o.data" :getField="o.getField" name="default"></slot>
+        </div>
+      </SimpleAppForm>
+    </Dialog>
+</template>
+
+<style scoped>
+.crudsimple-dialog{
+    z-index: 100;
+}
+</style>

package/templates/nuxt/{components.debugdocdata.vue.eta → components/DebugDocumentData.vue.eta}

@@ -13,10 +13,12 @@ import {ref} from 'vue'
 const modelValue = defineModel()
 const isdebug = ref(useRuntimeConfig().public.DEBUGDATA)
 const visible = ref(false)
+const props = defineProps<{label?:string}>()
+const label = ref(props.label??'Debug')
 </script>
 <template>
     <div class="floatright" v-if="isdebug=='1'">
-        <button @click="visible=true">Debug</button>
+        <button @click="visible=true">{{ label }}</button>
         <Dialog v-model:visible="visible" modal header="Debug data" :style="{ width: '80vw' }">
             <pre>{{ modelValue }}</pre>
         </Dialog>                
@@ -30,5 +32,6 @@ const visible = ref(false)
     background-color: antiquewhite;
     font-size: large;    
     top: 20;
+    z-index: 999999;
 }
 </style>

package/templates/nuxt/{components.eventmonitor.vue.eta → components/EventMonitor.vue.eta}

@@ -10,75 +10,75 @@ import { useToast, } from 'primevue/usetoast';
 import type {  ToastMessageOptions } from 'primevue/toast';
 import Toast from 'primevue/toast';
 import { stringify } from 'ajv';
+import {upperFirst, last } from 'lodash'
 const toast = useToast();
 const { $event,$listen } = useNuxtApp()
+
 let resmsg:ToastMessageOptions = {} as ToastMessageOptions
 
-$listen('*',(type:string,data:any)=>{
-    
-    
+
+$listen('*',(type:any,data:any)=>{ //simple use case, use any to prevent error
+    let arrupdate = type.split(':')
+    let eventdata = data
     let duration = 3000
     let severity:typeof resmsg['severity'] 
     let isshow=true
     let toastgroup='default'
+    let eventname = arrupdate[1]
+    let eventtype = arrupdate[0]
+    let title = ''
     if(type.indexOf('error')>=0){
         duration = 0
         severity='error'
-        
+        title=upperFirst(eventname) +' failed'
     }
     else if(type.indexOf('warn')>=0){
         duration = 10000
         severity='warn'
+        title=upperFirst(eventname) +' with warning'
     }
     else if(type.indexOf('info')>=0){
         duration = 3000
         severity='info'
         isshow=false
+        title='Info'
     }
     else if(type.indexOf('success')>=0){
         duration = 3000
         severity='success'
+        title= upperFirst(eventname) +' successfully'
     }
     if(Array.isArray(data)){
         toastgroup='list'
+    }else if(typeof data == 'object'){
+        // title = camelCaseToWords(useCamelCase(title.replace(":","-")))
+        eventdata = data.message
     }
-    // let msg:string=prepareMsg(data,severity?.toString()??'')
+    
 
-    if(isshow){
+    if(isshow && severity){
+        console.log("isshow",isshow,"event:",severity,eventdata)
         toast.removeAllGroups()
-        resmsg = { severity: severity, summary: type, detail :data, life: duration, group:toastgroup}
+        resmsg = { severity: severity, summary: title, detail :eventdata, life: duration, group:toastgroup}
         toast.add(resmsg)
     }
-    
+    isshow=false
     
 })
-const prepareMsg=(data:any,msgtype:string):string=>{
-    let res : string =''
-    
-    if(typeof data == 'string'){
-        res = data
-    }else if(Array.isArray(data)){
-        res+='<ul>'
-        for(let i=0;i<data.length;i++){
-            const d=data[i]
-            res+= '<li>'+d['instancePath']+':'+(d['message']?? JSON.stringify(d))+'</li>'
-        }
-        res+='</ul>'
-    }else if(typeof data =='object'){
-        res=JSON.stringify(data)
-    }
-    return res
 
-    
-}
 
+const getFieldName = (path:string)=>{
+    const lastword :string= last<string>(path.split('/'))??''
+    return camelCaseToWords(lastword)
+    // const lastField = path.split
+}
 </script>
 <template>
     <Toast group="default"/>
     <Toast group="list">
         <template #message="p">
             <ol>
-                <li v-for="(item,index) in  p.message.detail" :key="index">{{item.instancePath}} {{ item.message }}</li>
+                <li v-for="(item,index) in  p.message.detail" :key="index"><b>{{getFieldName(item.instancePath)}}</b>: {{ item.message }}</li>
             </ol>            
         </template>
     </Toast>

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

@@ -0,0 +1,50 @@
+<template>
+    <Dialog v-model:visible="visible" modal :header="popuptitle" class="crudsimple-dialog" :autoZIndex="false" :style="{zIndex:100 }">            
+        <div v-if="invites">
+            
+            <div v-for="item in invites" class="w w-auto p p-2 grid grid-cols-3 hover-list-primary border">
+                <div class="flex flex-col col-span-2">
+                    <div class="font font-bold">{{item.tenantName}}</div>
+                    <div class="text text-xs text-gray-500 italic">{{ item.created }}</div>
+                </div>
+                <div >
+                    <button class="btn-primary" @click="approve(item._id)">Approve</button>
+                    <button class="btn-danger" @click="decline(item._id)">Decline</button>
+                </div>
+            </div>
+        </div>        
+    </Dialog>
+    </template>
+    <script setup lang="ts">
+    import Dialog from 'primevue/dialog';
+    import {onMounted, ref} from 'vue'
+    import {SimpleAppEventType} from '../simpleapp/generate/commons/events'
+    import ProgressSpinner from 'primevue/progressspinner'
+    const {$userstore,$event}= useNuxtApp()
+    const disabled = ref(false)
+    const visible=ref(false)
+    const invites = ref()
+    const invitationmsg = "There is some invitation to join their organization:"
+    const popuptitle = ref(invitationmsg)
+    onMounted(()=>{
+        invites.value =  getUserProfile().invites
+        if(invites.value.length>0){
+            visible.value=true
+        }
+    })
+    
+    const approve = async (id:string) =>{
+       
+    //    await reloadUserStore()
+       await $userstore.decideInvitation(id,'accept')
+       $event(SimpleAppEventType.InvitationAccepted,id)
+       visible.value=false
+    }
+    const decline = async (id:string) => {
+    //    await reloadUserStore()
+       await $userstore.decideInvitation(id,'reject')
+       $event(SimpleAppEventType.InvitationRejected,id)
+       visible.value=false
+    }
+    
+    </script>

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * You may modify it by hand
+ * last change 2023-09-10
+ * author: Ks Tan
+ */
+
+// import MegaMenu from 'primevue/megamenu';
+// import Menubar from 'primevue/menubar';
+// const route = useRoute()
+// const menus = getMenus(route.params.xorg)
+import MenuIndex from "../pages/[xorg]/index.vue"
+// import XorgPicker from "../pages/index.vue"
+import Dialog from 'primevue/dialog';
+import {ref} from 'vue'
+const visible = ref(false)
+const visibletenant = ref(false)
+
+</script>
+<template>
+    <!-- <header>       -->
+        <!-- <MegaMenu :model="getMenus()" orientation="horizontal" />               -->
+    <div class="bg-white border-b-2 border-b-gray-300  h-10 flex">
+        
+        <Dialog v-model:visible="visible" modal header="Pick Document" :autoZIndex="false" :style="{zIndex:100, width: '80vw' }">
+            <MenuIndex></MenuIndex>
+        </Dialog>
+        <Dialog v-model:visible="visibletenant" modal header="Pick Tenant" :autoZIndex="false" :style="{zIndex:100, width: '80vw' }">
+            <XorgPicker></XorgPicker>
+        </Dialog>
+        
+        <div class="flex-1">
+            <NuxtLink to="/" :external="true"><i class="pi pi-home m-2"></i>Home</NuxtLink>     
+        </div>
+        <div class="flex-1 p-1">
+            <button class="text-center border-none  cursor-pointer" v-if="useRoute().params.xorg" @click="visible=true">
+                <i class="pi pi-microsoft mr-2"></i>Menu</button>
+            <span v-else></span>
+        </div>
+        <div class="flex-1 p-1">
+            <button class="text-center border-none cursor-pointer"  v-if="useRoute().params.xorg" @click="visibletenant=true">
+                <i class="pi pi-globe mr-2"></i> 
+              
+                {{ getUserProfile().branchCode }} - {{ getUserProfile().branchName }}
+            </button>
+            <span v-else></span>
+        </div>
+        <div class="flex-1 text-right p-1">
+            <button class=" cursor-pointer border-none" @click="logout()">
+                <i class="pi pi-sign-out mr-2"></i>logout {{ getUserProfile().fullName }}
+            </button>
+        </div>
+            
+        
+    </div>
+    <!-- </header> -->
+</template>

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

@@ -0,0 +1,92 @@
+<template>
+  <div>        
+       <SelectButton v-model="selectedgroup"  @change="selectGroup" :options="grouplist" option-label="label" option-value="value"></SelectButton>                                          
+       <div v-if="selectedgroup">
+            <div  v-if="useRuntimeConfig().public.DEBUGDATA" class="flex flex-row gap-2 p-2">
+                <div class="flex align-items-center">
+                    <RadioButton v-model="mode" inputId="modepreview" name="pizza" value="preview" />
+                    <label for="modepreview" class="ml-2">Preview</label>
+                </div>
+                <div class="flex align-items-center">
+                    <RadioButton v-model="mode" inputId="modeedit" name="edit" value="edit" />
+                    <label for="modeedit" class="ml-2">Edit</label>
+                </div>
+                <div class="flex align-items-center">
+                    <RadioButton v-model="mode" inputId="modejson" name="json" value="json" />
+                    <label for="modejson" class="ml-2">JSON</label>
+                </div>
+                
+            </div>
+            <div v-if="mode=='json'">
+                <div class="flex-row">
+                    <div><button @click="copyText">copy</button> </div>
+                    <div class="text text-gray-400">{{ copied }}</div>
+                </div>
+                <pre id="permissionstr">
+                    {{ permissions }}
+                </pre>
+            </div>
+            <div class="permission-block flex flex-col m mt-4" v-for="res in allresources" v-else="showjson">
+               <div class="m mr-3 ">{{ res }}</div>
+               <div class="gap-4" v-if="allactions">                
+                    <SelectButton v-if="mode=='edit'" multiple :options="allactions[res]" v-model="permissions[res]"></SelectButton>
+                    
+                    <span v-else v-for="actionname in allactions[res]" class="m m-1">
+                        <Chip class="bg-primary" v-if="canPerformAction(selectedgroup,res,actionname)" severity="success" :label="actionname" ></Chip>
+                        <Chip v-else :label="actionname" ></Chip>
+                    </span>
+                   
+                   
+               </div>
+            </div>
+       </div>
+  </div>
+</template>
+<script setup lang="ts">
+import _ from "lodash";
+import Tag from "primevue/tag"
+import Badge from 'primevue/badge';
+import Chip from 'primevue/chip';
+import RadioButton from 'primevue/radiobutton';
+import {ref} from 'vue'
+import ToggleButton from 'primevue/togglebutton';
+import SelectButton from "primevue/selectbutton";
+import Checkbox from "primevue/checkbox";
+const selectedgroup = ref('')
+const grouplist = getAllGroups().map((item)=>{return {value:item,label:_.capitalize(item)}})
+const mode = ref('preview')
+
+const allresources = getUniqueResource()
+const allactions = ref()
+const permissions=ref()
+
+const activeroles = ref()
+const copied = ref('')
+const copyText = () => {
+    copied.value="copied!"
+    const storage = document.createElement('textarea');
+    storage.value = String(document.getElementById('permissionstr')?.innerHTML)
+    document.body.appendChild(storage);
+    storage.select();
+    storage.setSelectionRange(0, 99999);
+    document.execCommand('copy');
+    document.body.removeChild(storage);
+    
+
+
+}
+const selectGroup = (selectedgroup:any) => {
+    const groupname = selectedgroup.value
+    activeroles.value= getGroupRoles(groupname)
+    allactions.value={}
+    permissions.value={}
+    for(let i=0; i< allresources.length; i++){
+        const r = allresources[i]
+        console.log(r)
+        const actions = getActionFromResource(r)
+        allactions.value[r]=actions
+        permissions.value[r]=getGroupResourcePermission(groupname,r).map(item=>item.action)
+    }
+    console.log(allactions.value,permissions.value)
+}
+</script>

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

@@ -0,0 +1,131 @@
+<template>
+  <FieldContainer :hidelabel="hidelabel" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+     
+  <div v-if="componentErr!=''" class="input-error">{{componentErr}}</div>
+  <AutoComplete v-else 
+      class="simpleapp-inputfield simpleapp-autocomplete flex flex-row "    
+      :inputId="slotprops.uuid"   
+      v-model="selecteditem"
+      v-bind="$attrs"        
+      :optionLabel="optionLabel"
+      :path="setting.instancepath"   
+      @blur="onblur"
+      @item-select="pickValue"
+      @complete="getListFromAutocompleteApi"
+      :suggestions="list"
+      forceSelection
+      :dropdown="dropdown"
+      :pt="{
+        // root:{class: 'w-full' },
+        // container:{class: 'w-full' },
+        input:{class:'border w-full'}
+      }"
+      
+        />       
+        
+  </FieldContainer>
+</template>
+<script lang="ts" setup>
+
+import {computed,watch,ref} from 'vue'
+import AutoComplete from 'primevue/autocomplete';
+import FieldContainer from './SimpleFieldContainer.vue'
+import {prepareList} from './helper'
+import type {SimpleAppFieldSetting,ListOptionType} from './type'
+import { SimpleAppClient } from  '../generate/docs/SimpleAppClient' //'../SimpleAppClient';
+import type { JSONSchema7 } from 'json-schema';
+
+type autocompletetype={[key:string]:any}
+
+const props = withDefaults(defineProps<{
+  label?:string  
+  description?:string
+  error?:string
+  setting:SimpleAppFieldSetting
+  instancepath?:string
+  optionLabel:string
+  dropdown?: boolean
+  remoteSrc?: any
+  hidelabel?:boolean
+  readonly?:boolean
+}>(),{
+  dropdown:true,
+  hidelabel:false
+})
+//{type:boolean, default:true, require:false},
+// {type:boolean, default:false, require:false},
+interface typefieldsetting extends JSONSchema7 {
+  'x-foreignkey'?:string
+}
+const modelValue = defineModel<autocompletetype>()
+const labelfield = props.optionLabel
+const list = ref()
+const componentErr = ref('')
+let tmp:autocompletetype={} 
+const fieldsetting:typefieldsetting  = props.setting.fieldsetting 
+
+Object.assign(tmp,modelValue.value)
+const selecteditem=ref(tmp)
+
+if(!selecteditem.value[labelfield]){    
+  selecteditem.value[labelfield]=''
+}
+
+const getListFromAutocompleteApi =  (event:any)=>{    
+  const keyword = event.query??''  
+  const remoteSrc =  props.remoteSrc
+  remoteSrc.autoComplete(keyword).then((res:any)=>{
+          list.value = res.data                   
+      }).catch((res:any)=>{
+          console.error(res)
+      })
+}
+const emit = defineEmits(['change'])
+watch(modelValue,(newvalue:autocompletetype)=>{
+  selecteditem.value=newvalue
+  if(newvalue){
+    console.log("newvalue",newvalue,props.optionLabel)
+    if(typeof newvalue[props.optionLabel] == 'undefined'){
+        selecteditem.value[props.optionLabel]=''
+    }
+    // props.setting.document.validateFailed()
+    emit('change',modelValue.value)
+  }
+  
+})
+
+if(fieldsetting['x-foreignkey'] == 'undefined'){
+  componentErr.value='undefine "x-foreignkey" of this field in jsonschema'
+}else if( !props['remoteSrc'] || !props['remoteSrc']['autoComplete']){
+  componentErr.value='invalid property "remoteSrc" cause props.remoteSrc.autoComplete(keyword:string) does not exists)'
+}else{
+  componentErr.value=''
+}
+
+
+const pickValue = (event:any)=>{
+  if(typeof event.value.query == 'undefined'){
+      modelValue.value=event.value
+  }
+}
+
+const onblur = ()=>{
+  selecteditem.value={...modelValue.value}
+  if(typeof selecteditem.value[labelfield]=='undefined'){
+      selecteditem.value[labelfield]=''
+  }
+  // console.log("selecteditem.value",selecteditem.value)
+}
+const capitalizeFirstLetter = (str: string) => {
+  const res = str == '' ? '' : str.slice(0, 1).toUpperCase() + str.slice(1);
+  // const res = str;
+  return res;
+};
+</script>
+<style scoped>
+.simpleapp-autocomplete{
+  @apply w-auto ;
+  line-height: 1rem;
+}
+
+</style>