@simitgroup/simpleapp-generator 1.0.59 → 1.0.60

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

@@ -21,13 +21,12 @@ const selectMenu = (menu:MenuData) =>{
     </button>
 
      <Dialog v-model:visible="visible" modal header="Pick Document" >
-      <div class="desktop-shortcut-link">
-          
-          <Button v-for="menu in menus[1].items" @click="selectMenu(menu)">
-            <div v-if="menu.isolationType == 'none'" class="adminmenu">
+      <div class="">
+          <Button v-for="menu in menus" @click="selectMenu(menu)">
+            <div v-if="menu.isolationType == 'none'" class="">
               * {{ camelCaseToWords(menu.label) }}
             </div>
-            <div v-else class="usermenu">{{ camelCaseToWords(menu.label) }}</div>
+            <div v-else class="">{{ camelCaseToWords(menu.label) }}</div>
           </Button>
         </div>
     </Dialog>
@@ -37,19 +36,5 @@ const selectMenu = (menu:MenuData) =>{
   </div>
 </template>
 <style scoped>
-.desktop-shortcut-link {
-  @apply m-2 p-2 space-x-2 rounded-sm text-center grid grid-cols-4 gap-4;
-}
-.desktop-shortcut-link .adminmenu {
-  @apply bg-red-300 p-2;
-}
-.desktop-shortcut-link .adminmenu:hover {
-  @apply bg-red-600 p-2;
-}
-.desktop-shortcut-link .usermenu {
-  @apply bg-teal-300 p-2;
-}
-.desktop-shortcut-link .usermenu:hover {
-  @apply bg-teal-600 p-2;
-}
+
 </style>

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

@@ -1,20 +1,18 @@
 <template>
     
   <div>        
-        <Button
-              class="btn-primary pi pi-question"
-              @click="previewPermission"
-            >          
-        </Button>
+        <button class="" @click="previewPermission">
+            <i class="pi pi-question-circle" ></i>
+        </button>
         <Sidebar
                 v-model:visible="showpermissioninfo"
-                modal
+                modal                
                 :header="permissiontitle"
                 position="right"
             >
             <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  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>

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

@@ -5,7 +5,21 @@ import {ref} from 'vue'
 
 const userprofileoverlay = ref();
 const toggle = (event:any) => {
-    userprofileoverlay.value.toggle(event);
+    userprofileoverlay.value.toggle(event);   
+}
+const toProfile = ()=>{    
+    userprofileoverlay.value.toggle();   
+
+    if(getCurrentXorg()){
+        navigateTo(`/${getCurrentXorg()}/profile`)
+    }else{
+        navigateTo(`/profile`)
+    }
+    
+}
+const toFrontpage = () =>{
+    userprofileoverlay.value.toggle();   
+    navigateTo('/')
 }
 
 </script>
@@ -16,37 +30,40 @@ const toggle = (event:any) => {
             
             <div class="flex flex-row-reverse  cursor-pointer border-none w-full" @click="toggle">                    
                 <p>{{ getUserProfile().fullName }}</p>
-                <Avatar :image="getUserStore().getAvatarLink(32)" class="" size="normal" shape="circle" />                
+                <!-- <Avatar :image="getUserStore().getAvatarLink(32)" class="" size="normal" shape="circle" />                 -->
+                <div class="w-8 h-8 bg-cover bg-center rounded-md">
+                    <img :src="getAvatarLink(getUserProfile().email,32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
+                </div>
             </div>
             
         </div>
-        <OverlayPanel ref="userprofileoverlay">                    
-            <div class="flex flex-col">
-                <div class="flex flex-row">
-                    <div class="content-center	border">            
-                        <Avatar :image="getUserStore().getAvatarLink(60)" class="mr-2" size="xlarge" shape="circle" />            
-                    </div>
-                    <div>
-                        <div  class="text text-center border">
-                            {{getUserProfile().fullName }}
-                        </div>
-                        <div  class="text text-center text-sm border" >
-                            {{getUserProfile().group }}
+        <OverlayPanel :pt="{root:{class:'w w-80'}}" ref="userprofileoverlay">                    
+            <div>
+                <div class="py-2 transition duration-150 ease-in-out z-10 absolute top-0 right-0 bottom-0 left-0" id="modal">
+                    <div role="alert" class="container mx-auto w-full md:w-full max-w-lg">
+                        <div class="relative p-4 md:p-8 bg-white dark:bg-gray-800 shadow-md rounded border border-gray-400">
+                            <div class="w-full flex items-center justify-start text-gray-600 dark:text-gray-400 mb-5 cursor-pointer" @click="toProfile">
+                                <div class="w-12 h-12 bg-cover bg-center rounded-md">
+                                    <img :src="getAvatarLink(getUserProfile().email,32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
+                                </div>
+                                <div class="flex flex-col cursor-pointer" >
+                                    <h1 class="text-left text-gray-800 dark:text-gray-100 font-lg font-bold tracking-normal leading-tight ml-2">{{ getUserProfile().fullName }}</h1>
+                                    <p  class="text-gray-400 dark:text-gray-100 font-normal text-base tracking-normal ml-2 mr-4">{{getUserProfile().group }}</p>
+                                </div>
+                                
+                            </div>
+                            
+                            <div class="flex items-center justify-start w-full">
+                                <button class="focus:outline-none transition duration-150 ease-in-out hover:bg-gray-600 bg-gray-700 rounded text-white px-8 py-2 text-sm" @click="toFrontpage">Tenant</button>
+                                <!-- <button class="focus:outline-none transition duration-150 ease-in-out bg-gray-600  rounded text-white px-8 py-2 text-sm" @click="toFrontpage">Pick Tenant</button> -->
+                                <button class="focus:outline-none ml-3 bg-warning-100 dark:bg-warning-700 dark:border-warning-700 dark:hover:bg-warning-600 transition duration-150 text-gray-600 dark:text-gray-400 ease-in-out hover:border-gray-400 hover:bg-gray-300 border rounded px-8 py-2 text-sm" @click="logout()">Logout</button>
+                            </div>                            
                         </div>
                     </div>
                 </div>
-            
-            
-            <div class="flex flex-row gap-2 border">
-                <Button class="border">
-                    <i class="pi pi-user"></i>profile
-                </Button>    
-                <Button class="border" @click="logout()">
-                    <i class="pi pi-sign-out"></i>logout
-                </Button>    
+                
             </div>
-            
-        </div>
+
         </OverlayPanel>
     </div>
 </template>

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

@@ -156,7 +156,7 @@ onNuxtReady(()=>{
       <DebugDocumentData v-model="data"/>
     </div>
 
-    <Dialog v-model:visible="visible" modal :header="popuptitle" class="crudsimple-dialog" :autoZIndex="false" :style="{zIndex:100, width: '80vw' }">        
+    <Dialog v-model:visible="visible" modal :header="popuptitle" class="crudsimple-dialog" :autoZIndex="false" :pt="{root:{class:'h-full w-full bg-white'}}">        
         <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>

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

@@ -0,0 +1,115 @@
+<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 {Notification, EventType} from '~/types'
+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()
+// WildcardHandler<Record<EventType, unknown>>
+// let resmsg:ToastMessageOptions = {} as ToastMessageOptions
+
+
+// $listen('*',(type:key of EventType,data:any)=>{ 
+//     console.log("Event type",type,'data',data)
+//     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
+//     }
+    
+    
+//     if(isshow && severity){
+//         console.log("isshow",isshow,"event:",severity,eventdata)
+//         toast.removeAllGroups()
+//         resmsg = { severity: severity, summary: title, detail :eventdata, life: duration, group:toastgroup}
+//         toast.add(resmsg)
+//     }
+//     isshow=false
+    
+// })
+
+
+// const getFieldName = (path:string)=>{
+//     const lastword :string= last<string>(path.split('/'))??''
+//     return camelCaseToWords(lastword)
+//     // const lastField = path.split
+// }
+</script>
+<template>
+    <div></div>
+    <!-- <Toast group="default" :pt="{}">
+        <template #message="p">
+            <div class="bg-gray-200 dark:bg-gray-900 h-full w-full border">                
+                <div class=" flex content content-end w-full">
+                    <div role="alert" class="w-full bg-white dark:bg-gray-800 shadow-lg rounded flex flex-row  transition duration-150 ease-in-out" id="notification">
+                        <div class=" flex items-center justify-center bg-primary-500 sm:rounded-tl sm:rounded-bl  h-12 sm:h-auto sm:w-auto text-white">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40" fill="currentColor">
+                                <path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-2.3-8.7l1.3 1.29 3.3-3.3a1 1 0 0 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-2-2a1 1 0 0 1 1.4-1.42z" />
+                            </svg>
+                        </div>
+                        <div class="flex flex-col justify-center  pl-4 xl:pl-1 w-96 pt-4 sm:pb-4 pb-2">
+                            <p class="text-lg text-gray-800 dark:text-gray-100 font-semibold pb-1">{{ p.message.summary }}</p>
+                            <p class="text-sm text-gray-600 dark:text-gray-400 font-normal"></p>
+                        </div>
+                        <div class="flex sm:flex-col sm:justify-center sm:border-l dark:border-gray-700  w w-36 items-center border-gray-300 pl-4">
+                            <div class="sm:pt-4 pb-4 sm:border-b dark:border-gray-700 border-gray-300 w w-full flex sm:justify-center">
+                                <span class="sm:text-sm text-xs text-green-400 font-bold mr-4 sm:mr-0 cursor-pointer">View</span>
+                            </div>
+                            <div class="sm:pt-4 pb-4 flex sm:justify-center w w-full cursor-pointer" >
+                                <span class="sm:text-sm text-xs text-gray-600 dark:text-gray-400 cursor-pointer" @click="toast.remove(p.message)">Dismiss</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </Toast>
+    <Toast group="list">
+        <template #message="p">
+            
+            <ol>
+                <li v-for="(item,index) in  p.message.detail" :key="index"><b>{{getFieldName(item.instancePath)}}</b>: {{ item.message }}</li>
+            </ol>            
+        </template>
+    </Toast> -->
+</template>

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

@@ -0,0 +1,157 @@
+<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 {Notification, NotificationStatus} from '~/types'
+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()
+// WildcardHandler<Record<EventType, unknown>>
+let resmsg:ToastMessageOptions = {} as ToastMessageOptions
+
+$listen("Notification",(data:Notification)=>{
+    // $listen('*',(type:key of EventType,data:any)=>{ 
+    console.log("Event type",'data',data)
+    const type:NotificationStatus = data.status
+    // 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 = ''
+    switch(type){
+        case NotificationStatus.success:
+            duration = 3000
+        break;
+        case NotificationStatus.danger:
+            duration = 0
+        break;
+        case NotificationStatus.warning:
+            duration = 5000
+        break;
+        case NotificationStatus.info:
+            duration = 3000
+        break;
+
+    }
+    // if(type=='error'){
+    //     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
+    // }
+    
+    
+    // if(isshow && severity){
+    //     console.log("isshow",isshow,"event:",severity,eventdata)
+         toast.removeAllGroups()
+        resmsg = { severity: type as typeof resmsg['severity'], summary: data.summary, detail :data.data, life: duration, group:toastgroup}
+        toast.add(resmsg)
+    // }
+    // isshow=false
+    
+})
+
+
+const getFieldName = (path:string)=>{
+    const lastword :string= last<string>(path.split('/'))??''
+    return camelCaseToWords(lastword)
+    // const lastField = path.split
+}
+</script>
+<template>
+    <Toast group="default" :pt="{}">
+        <template #message="p">
+            <div class="bg-gray-200 dark:bg-gray-900 h-full w-full border">                
+                <div class=" flex content content-end w-full">
+                    <div role="alert" class="w-full bg-white dark:bg-gray-800 shadow-lg rounded flex flex-row  transition duration-150 ease-in-out" id="notification">
+                        <div :class="'flex items-center justify-center sm:rounded-tl sm:rounded-bl  h-12 sm:h-auto sm:w-auto text-white'+getStatusColor(p.message.severity)">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40" fill="currentColor">
+                                <path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-2.3-8.7l1.3 1.29 3.3-3.3a1 1 0 0 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-2-2a1 1 0 0 1 1.4-1.42z" />
+                            </svg>
+                        </div>
+                        <div class="flex flex-col justify-center  pl-4 xl:pl-1 w-96 pt-4 sm:pb-4 pb-2">
+                            <p class="text-lg text-gray-800 dark:text-gray-100 font-semibold pb-1">{{ p.message.summary }}</p>
+                            
+                            <div v-if="p.message.detail">                            
+                                <p v-if="Array.isArray(p.message.detail)" 
+                                    v-for="item in p.message.detail"
+                                    class="text-sm text-gray-600 dark:text-gray-400 font-normal">
+                                    <span v-if="item.instancePath">{{ item.instancePath }}&nbsp;</span>
+                                    <span v-if="item.message"> {{ item.message }}&nbsp;</span>
+                                    
+                                </p>
+                                <p v-else-if="typeof p.message.detail == 'string'" class="text-sm text-gray-600 dark:text-gray-400 font-normal">{{ p.message.detail }}</p>
+                                <p v-else></p>
+                            </div>
+                        </div>
+                        <div class="rounded m m-6"><button @click="toast.remove(p.message)" class="text-gray-800 hover:text-gray-300 "><i class="pi pi-times"></i></button></div>                       
+                    </div>
+                </div>
+            </div>
+        </template>
+    </Toast>
+    <!-- <Toast group="list">
+        <template #message="p">
+            <div class="bg-gray-200 dark:bg-gray-900 h-full">
+                <div class="relative mx-auto flex justify-center sm:justify-end pt-16 sm:pt-6 pb-6 sm:pb-16 h-64 overflow-x-hidden">
+                    <div role="alert" class="sm:mr-6 mt-16 sm:mt-6 mb-6 sm:mb-0 xl:w-5/12 mx-auto absolute left-0 sm:left-auto right-0 sm:top-0 sm:w-6/12 md:w-3/5 justify-between w-11/12 bg-white dark:bg-gray-800 shadow-lg rounded flex sm:flex-row flex-col transition duration-150 ease-in-out" id="notification">
+                        <div class="sm:px-6 p-2 flex mt-4 sm:mt-0 ml-4 sm:ml-0 items-center justify-center bg-green-400 sm:rounded-tl sm:rounded-bl w-12 h-12 sm:h-auto sm:w-auto text-white">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40" fill="currentColor">
+                                <path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-2.3-8.7l1.3 1.29 3.3-3.3a1 1 0 0 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-2-2a1 1 0 0 1 1.4-1.42z" />
+                            </svg>
+                        </div>
+                        <div class="flex flex-col justify-center xl:-ml-4 pl-4 xl:pl-1 sm:w-3/5 pt-4 sm:pb-4 pb-2">
+                            <p class="text-lg text-gray-800 dark:text-gray-100 font-semibold pb-1">Action Completed</p>
+                            <p class="text-sm text-gray-600 dark:text-gray-400 font-normal">You have successfully completed the survey. You will soon receive a reward email. Stay tuned.</p>
+                        </div>
+                        <div class="flex sm:flex-col sm:justify-center sm:border-l dark:border-gray-700 items-center border-gray-300 sm:w-1/6 pl-4 sm:pl-0">
+                            <div class="sm:pt-4 pb-4 sm:border-b dark:border-gray-700 border-gray-300 sm:w-full flex sm:justify-center">
+                                <span class="sm:text-sm text-xs text-green-400 font-bold mr-4 sm:mr-0 cursor-pointer">View</span>
+                            </div>
+                            <div class="sm:pt-4 pb-4 flex sm:justify-center w-full cursor-pointer" @click="toast.remove(p.message)">
+                                <span class="sm:text-sm text-xs text-gray-600 dark:text-gray-400 cursor-pointer">Dismiss</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <ol>
+                <li v-for="(item,index) in  p.message.detail" :key="index"><b>{{getFieldName(item.instancePath)}}</b>: {{ item.message }}</li>
+            </ol>            
+        </template>
+    </Toast> -->
+</template>

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

@@ -8,7 +8,7 @@ import ButtonProfile from './ButtonProfile.vue';
 <template>
     <!-- <header>       -->
         <!-- <MegaMenu :model="getMenus()" orientation="horizontal" />               -->
-    <div class="bg-white border-b-2 border-b-gray-300  h-10 flex flex-row">
+    <div class="bg-white  border-b-gray-300  h-10 flex flex-row">
         
         
         <div class="flex-1 flex flex-row gap-2 p-2">
@@ -17,7 +17,7 @@ import ButtonProfile from './ButtonProfile.vue';
                 
             </div>            
             <div class="">
-                <ButtonHome @click="navigateTo(`/${getUserProfile().currentxorg}`)"/>                
+                <ButtonHome/>                
             </div>
             
         </div>

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

@@ -18,7 +18,7 @@
     <script setup lang="ts">
     import Dialog from 'primevue/dialog';
     import {onMounted, ref} from 'vue'
-    import {SimpleAppEventType} from '../simpleapp/generate/commons/events'
+    import {EventType} from '../types'
     import ProgressSpinner from 'primevue/progressspinner'
     const {$userstore,$event}= useNuxtApp()
     const disabled = ref(false)
@@ -37,13 +37,13 @@
        
     //    await reloadUserStore()
        await $userstore.decideInvitation(id,'accept')
-       $event(SimpleAppEventType.InvitationAccepted,id)
+       $event('InvitationAccepted',id)
        visible.value=false
     }
     const decline = async (id:string) => {
     //    await reloadUserStore()
        await $userstore.decideInvitation(id,'reject')
-       $event(SimpleAppEventType.InvitationRejected,id)
+       $event('InvitationRejected',id)
        visible.value=false
     }
     

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

@@ -2,7 +2,7 @@
 import _ from 'lodash'
 import {ref} from 'vue'
 
-const selectedbranch = ref(getUserProfile().currentxorg)
+const selectedbranch = ref(getCurrentXorg())
 const currentTenant=ref(getUserProfile().tenantId)
 console.log("currentTenant",currentTenant.value)
 type Org = {orgId:number, label:string,_id:string}
@@ -23,10 +23,13 @@ const getBranchesForOrg = (org:Org)=>{
 const switchXorg = ()=>{
     navigateTo(`/${selectedbranch.value}`,{external:true})    
 }
+
+console.log("selectedbranch",selectedbranch.value)
 </script>
 <template>
     <div>        
-        <select v-model="selectedbranch" class="  text-right" @change="switchXorg()">
+        
+        <select v-if="selectedbranch" v-model="selectedbranch" class="  text-right" @change="switchXorg()">
                     <optgroup v-for="o in orgList" :label="o.label">
                         <option v-for="b in getBranchesForOrg(o)" :value="b['xOrg']">{{ b['branch']['branchCode']}} </option>
                     </optgroup>