@simitgroup/simpleapp-generator 1.1.0 → 1.1.2

package/templates/basic/nuxt/pages.new.vue.eta

@@ -16,6 +16,7 @@
  import ConfirmPopup from 'primevue/confirmpopup';
  import { useConfirm } from "primevue/useconfirm";
  const confirm = useConfirm();
+ const props = defineProps<{_id?:string}>()
  const isReadOnly =ref(true)
  const {$<%= it.typename %>Doc,$event } = useNuxtApp();
   const doc = $<%= it.typename %>Doc()
@@ -25,7 +26,7 @@ const fetchRecord = async (recordid:string) =>{
   await doc.getById(recordid)
 }
 
-const id = computed(()=>String(useRoute().params.id??''))
+const id = computed(() => props._id ? props._id :  String(useRoute().params.id ?? ""));
   
 
 const disabled = computed(()=>{
@@ -91,15 +92,15 @@ if (id.value) {
     <SimpleAppForm #default="o" :document="doc" :readonly="isReadOnly">
         <div v-if="isReadOnly" class="w-full">
             <Button
-                class="btn btn-primary" @click="isReadOnly=false"
+                class="btn-primary" @click="isReadOnly=false"
                 type="button" >Edit</Button>
             <Button class="" :disabled="disabled" @click="newData" type="button" v-if="canPerform(doc.getDocName(),'create')">New</Button>
         </div>
         <div v-else class="simpleapp-tool-bar   col-span-4 text-left gap-4"  >
               <Button class="" :disabled="disabled" @click="newData" type="button" v-if="canPerform(doc.getDocName(),'create')">New</Button>
-              <Button class="btn btn-primary" :disabled="disabled" @click="createData" type="button" v-if="canPerform(doc.getDocName(),'create') && doc.isNew()">Create</Button>
-              <Button class="btn btn-primary" :disabled="disabled" @click="updateData" type="button" v-if="canPerform(doc.getDocName(),'update') && !doc.isNew()">Update</Button>
-              <Button class="btn btn-danger" :disabled="disabled" @click="deleteData($event)" type="button" v-if="canPerform(doc.getDocName(),'delete') && !doc.isNew()">Delete</Button>
+              <Button class="btn-primary" :disabled="disabled" @click="createData" type="button" v-if="canPerform(doc.getDocName(),'create') && doc.isNew()">Create</Button>
+              <Button class="btn-primary" :disabled="disabled" @click="updateData" type="button" v-if="canPerform(doc.getDocName(),'update') && !doc.isNew()">Update</Button>
+              <Button class="btn-danger" :disabled="disabled" @click="deleteData($event)" type="button" v-if="canPerform(doc.getDocName(),'delete') && !doc.isNew()">Delete</Button>
 
               
               <ProgressSpinner v-if="disabled==true" style="width: 2rem; height: 2rem" ></ProgressSpinner>
@@ -141,7 +142,7 @@ if (id.value) {
                 <% } else if(obj['oneOf']){ %>
                     <% for(let f = 0; f < obj['oneOf'].length; f++){ %>
                         <%if(obj['oneOf'][f]['format']){ %>
-                            <%~ getBasicElement('text',`#/properties/${key}`,`data.${key}`,obj['anyOf'][f]['format']) %>            
+                            <%~ getBasicElement('text',`#/properties/${key}`,`data.${key}`,obj['oneOf'][f]['format']) %>            
                         <%}%>
                     <%}%>
 
@@ -218,5 +219,5 @@ if (id.value) {
       <%})%>  
       </div>
     </SimpleAppForm>
-    <DebugDocumentData v-model="data"/>
+    <DebugDocumentData v-model="data" :label="doc.getDocName()"/>
 </template>

package/templates/basic/nuxt/pages.viewer.vue.eta

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp everytime regenerate code.
+ * delete file "delete-me-for-avoid-override" if you want to modify this file and 
+ * prevent regenerate code override it.
+ * last change 2023-09-09
+ * author: Ks Tan
+ */
+import Crud from './new.vue'
+</script>
+<template>
+    <Crud/>
+</template>

package/templates/nest/src/simpleapp/services/docno.service.ts.eta

@@ -67,7 +67,7 @@ export class DocnoformatService extends DocnoformatProcessor {
     doctype = doctype.toUpperCase();
     const searchresult = await this.search(
       appuser,
-     { docNoType:doctype},
+     { docNoType: doctype,'branch.branchId':appuser.getBranchId() },
      undefined,
      {default:'desc'}
     );

package/templates/nuxt/app.vue.eta

@@ -2,13 +2,17 @@
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
- * last change 2023-10-28
+ * last change 2023-11-12
  * Author: Ks Tan
  */
+watch(()=>useRoute().params['xorg'],(newval,oldvalue)=>{
+  reloadUserStore()
+})
 </script>
 <template>
   <div>
     <NuxtLayout>      
+      <EventDocumentViewer></EventDocumentViewer>      
       <EventDecision/>
       <EventNotification/>
       <NuxtPage />

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

@@ -1,7 +1,11 @@
-.router-link-exact-active{
-    @apply  bg-primary-100 block
+
+[disabled] ,[readonly]{
+    @apply bg-gray-300 dark:bg-gray-900
 }
 
+[aria-selected=true]{
+    @apply bg-primary-100
+}
 
 [data-pc-group-section=pagebutton]{
     @apply p-2 m-0 rounded-none border
@@ -9,27 +13,41 @@
 [data-pc-section=pagebutton]{
     @apply p-3 m-0 border
 }
+
+
+input {
+    @apply  bg-opacity-0	 bg-black
+}
+
+.route-link-list {
+ @apply hover:bg-secondary-200  dark:hover:bg-gray-800 
+}
+
+.router-link-exact-active{
+    @apply  bg-primary-100  dark:bg-gray-800  block
+}
+
+
+.title-text{
+    @apply text-xl font-bold text-gray-700
+}
+.subtitle-text{
+    @apply text-base text-gray-500
+}
+
 .btn {
-    @apply font-medium
+    @apply font-medium  text-gray-50 dark:text-gray-300 border
 }
 
 .btn-primary {
-    @apply bg-primary-600 hover:bg-primary-400 text-white
+    @apply btn bg-primary-600 hover:bg-primary-400 dark:!bg-primary-700 dark:hover:bg-primary-800 
 }
 .btn-secondary {
-    @apply bg-secondary-600 hover:bg-secondary-400 text-white
+    @apply btn bg-secondary-600 hover:bg-secondary-400 
 }
 .btn-danger {
-    @apply bg-danger-600 hover:bg-danger-400 text-white
+    @apply btn bg-danger-600 hover:bg-danger-400  dark:bg-danger-700 dark:hover:bg-danger-800 
 }
 .btn-warn {
-    @apply bg-warning-600 hover:bg-warning-400 text-white
+    @apply btn bg-warning-600 hover:bg-warning-400 
 }
-
-[disabled] ,[readonly]{
-    @apply bg-gray-300
-}
-
-[aria-selected=true]{
-    @apply bg-primary-100
-}

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

@@ -13,22 +13,29 @@ const CustomTailwind = usePassThrough(
             content:{class:'flex flex-row-reverse w-full'},
             buttonContainer:{class:'hidden'},
         },
-        card:{root:{class:'shadow p-4'}},       
-        tabpanel:{headerTitle:{class:'m-3 p-3 bg bg-text-300'},},
+        card:{
+            root:{class:'shadow p-4 rounded-2xl m-2'},
+            // title:{class:''},
+            // header:{class:''}
+        },       
+        tabpanel:{
+            headerTitle:{class:'m-0 p-0'},            
+        },
         selectbutton:{
             root:{class:'flex flex-row gap-1'},
             button: ({ context }) => ({
-                class: ['text-center border rounded  p-2 cursor-pointer hover:bg-primary-400 hover:text-white', context.active ? 'bg-primary-600 text-white' : '']
+                class: ['text-center border-gray-400 dark:border-gray-700 text-gray-50 dark:text-gray-300 rounded-lg  p-2 cursor-pointer hover:bg-primary-400 dark:hover:bg-primary-800 hover:text-white', context.active ? 'bg-primary-600  dark:bg-primary-700 text-white' : '']
             }),
             label:{class: 'text-sm'},
         },
-        button:{root:{class: 'focus:outline-none transition duration-150 ease-in-out rounded px-8 py-2 m-1 border'}},
+        button:{root:{class: 'focus:outline-none transition duration-150 ease-in-out rounded p-2 m-1 border dark:border-gray-600'}},
         dialog:{root:{class:['border p-2']}},        
         autocomplete:{
-            input:{class:'m-0 font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40  rounded-lg  rounded-tr-none rounded-br-none transition-colors duration-200 appearance-none hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] p-3 text-base flex-1'},
-            loadingIcon:{class:'animate-spin mt-4 -ml-6 mr-2'},
+            root:{class:'border border-gray-300 dark:!border-blue-900/40  rounded-lg flex flex-row'},
+            input:{class:'w-full p-2 font-sans  rounded-lg  rounded-tr-none rounded-br-none transition-colors duration-200 appearance-none hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]  text-base'},
+            loadingIcon:{class:'hidden'},
             dropdownbutton: {
-                root:' bg-primary-600 hover:bg-primary-400 text-white rounded flex flex-row  p-3  -ml-6 rounded-tl-none rounded-bl-none '
+                root:' btn-primary dark:shadow-primary-800 dark:border-primary-900 text-white rounded-lg flex flex-row  p-3 rounded-tl-none rounded-bl-none '
             }
         },
         sidebar:{

package/templates/nuxt/components/debug/DebugDocumentData.vue.eta

@@ -1,3 +1,24 @@
+<template>
+    <div class="p-0 top-0  absolute left-1/2 text-right bg-yellow-200" v-if="isdebug=='1'">
+        <Button @click="visible=true"  class=" text-white bg-warning-800">
+            <i class="pi pi-code"></i>
+            {{ label }}</Button>      
+        <Sidebar v-model:visible="visible" class="text-red-100">
+            
+            <template #header >
+                <h1 class="text-gray-700 text-lg font-bold content-center">{{ label }} Data</h1>    
+            </template>
+            <template #default>                
+                <pre class="border rounder-lg m-0 p-0 dark:bg-gray-500">{{ modelValue }}
+                </pre>                
+            </template>
+                
+        </Sidebar>
+
+    </div>
+        
+</template>
+
 <script setup lang="ts">
 /**
  * This file was automatically generated by simpleapp generator during initialization.
@@ -14,28 +35,8 @@ 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')
+const props = withDefaults(defineProps<{label?:string}>(),{label:'label'})
+const buttonlabel = computed(()=>props.label??'debug')
 const op = ref();
 
 </script>
-<template>
-    <div class="floatright" v-if="isdebug=='1'">
-        <Button @click="visible=true" >{{ label }}</Button>      
-        <Sidebar v-model:visible="visible">
-            <pre class="pb-2">{{ modelValue }}</pre>
-        </Sidebar>
-
-    </div>
-        
-</template>
-<style scoped>
-.floatright{
-    position: fixed;
-    right: 0;
-    background-color: antiquewhite;
-    font-size: large;    
-    top: 20;
-    z-index: 999999;
-}
-</style>

package/templates/nuxt/components/docPage/DocPageList.vue.eta

@@ -0,0 +1,112 @@
+<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 {SearchBody,CellSetting} from '~/types'
+const props = defineProps<{
+    document:SimpleAppClient<any,any>
+    columns:CellSetting[]    
+    sorts?: string[][]
+}>()
+const resourcename = ref( _.upperFirst(props.document.getDocName()))
+const visible = ref(false)
+const doc = props.document
+const data = doc.getReactiveData()
+const disabled=ref(false)
+const recordlist = ref();
+const router = useRouter()
+const route = useRoute()
+const filters = ref()
+const popuptitle = ref("New "+doc.getDocName())
+const systemwindows = ref(false)
+const {$event,$listen} = useNuxtApp()
+
+const refresh = () => {
+  const searchbody: SearchBody = {
+    fields: getWantedFields(props.columns),
+    sorts:props.sorts
+  }
+  console.log('searchbody',searchbody)
+  doc.search(searchbody).then((res:any) => { 
+    console.log("refreshrefreshrefresh",recordlist.value)   
+    recordlist.value = res;
+    disabled.value=false
+  });
+};
+const newData = () => {
+  router.push({ path: getDocumentUrl(doc.getDocName(),'new') })  
+  doc.setNew()    
+  visible.value=true;
+};
+
+
+
+
+onNuxtReady(()=>{
+  refresh()   
+})
+$listen('RefreshDocumentList',(data)=>{
+  if(data.documentName == doc.getDocName()){
+    refresh()
+  }
+})
+
+const getWantedFields = (selectedCols:CellSetting[]) =>{
+        let cols:string[] = []
+        
+        selectedCols.forEach((item)=>{
+
+            if(typeof item=='string'){
+                cols.push(item)
+            }else if(typeof item =='object'){
+                if(item.field !='*'){
+                    cols.push(item.field)
+                }
+                if(item.moreFields && item.moreFields.length>0){
+                    cols = cols.concat(item.moreFields)
+                }                
+            }
+        })        
+        return cols
+    }
+
+const selectRow =  (data:any) =>{  
+  console.log("select row",data)
+  goTo(doc.getDocName(),data._id)  
+}
+</script>
+ 
+<template>
+    <div class="simpleapp-crudsimple">    
+      <h1 v-if="systemwindows" class="error-text text-center">* system administration screen</h1>      
+      <div class="grid grid-cols-2">
+        <div v-if="recordlist" class="p-4">
+          <TableDocuments :value="recordlist" :columns="columns" :title="t(doc.getDocName())"  @select-row="selectRow"> 
+            <template #toolbar>
+                <div class="w-full text-left">
+                    <Button class=" btn-primary" @click="newData" v-tooltip="'Add new(ctrl+enter)'" v-if="canPerform(resourcename,'create')">{{ t('new') }}</Button>
+                </div>                
+            </template>
+            <template #additionaltoolbar>
+                <Button class="bg-secondary-600 hover:bg-secondary-400 text-white" @click="refresh()" type="button" >{{ t('refresh') }}</Button>                                                                            
+            </template>
+        </TableDocuments>  
+      
+        </div>
+        <div class="p-4">
+          <slot>
+              undefine page content
+          </slot> 
+        </div>
+      </div>
+      
+      <DebugDocumentData v-model="data" :label="doc.getDocName()"/>
+    </div>
+</template>

package/templates/nuxt/components/event/EventDocumentViewer.vue.eta

@@ -0,0 +1,69 @@
+<template>
+    <Dialog v-model:visible="visible" 
+        @update:visible="closeDialog" 
+        :pt="{root:{class:'w-5/6 h-5/6'}}"
+        :modal="true" 
+        :close-on-escape="false" >                
+        <template #header>
+            <div class="flex flex-row">
+                <Chip v-for="(v,index) in allview" :label="v.label" @remove="deleteTab" :removable="index == allview.length-1"/>
+            </div>            
+        </template>
+        <template #default>
+            <div v-for="(v,index) in allview">
+                <component v-if="index == allview.length-1" :is="defineAsyncComponent(v.viewer)" :_id="v._id" :readonly="v.readonly"></component>
+            </div>
+        </template>                
+    </Dialog>
+</template>
+<script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core'
+
+import { useDialog } from 'primevue/usedialog';
+import {defineAsyncComponent} from 'vue'
+import { ViewRecord } from '~/types';
+// import TabView from 'primevue/tabview';
+import Chip from 'primevue/chip';
+
+const tabindex =ref(0)
+const activetabindex=ref(0)
+const findindex = ref(0)
+const dialog = useDialog()
+const {$listen,} = useNuxtApp()
+const visible = ref(false)
+const _id = ref('')
+const ViewRecordComponent = ref()
+const readonly =  ref<boolean>()
+const allview = ref<ViewRecord[]>([])
+
+    
+onKeyStroke('Escape', (e) => {
+  e.preventDefault()
+  deleteTab()
+})
+
+const deleteTab=()=>{
+    
+    const index = allview.value.length- 1
+    allview.value.splice(index,1)
+
+    if(allview.value.length==0){
+        visible.value=false
+        return
+    }else{
+        activetabindex.value = activetabindex.value >0 ? activetabindex.value - 1 : 0
+    }
+}
+const closeDialog = ()=>{
+    allview.value=[]
+}
+$listen('ViewRecord',(setting)=>{     
+
+    visible.value=true
+    
+    allview.value.push(setting)
+    activetabindex.value = allview.value.length-1
+    
+})
+
+</script>

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

@@ -8,32 +8,34 @@
 <template>
     <!-- <header>       -->
         <!-- <MegaMenu :model="getMenus()" orientation="horizontal" />               -->
-    <div class="bg-white  border-b-gray-300  h-10 flex flex-row">
+    <client-only>
+    <div class="flex flex-row">
         
         
         <div class="flex-1 flex flex-row gap-2 p-2">
             <div class="">
-                <HeaderButtonMenuPicker/>
-                
-            </div>            
-            <div class="">
-                <HeaderButtonHome/>                
-            </div>
+                <HeaderButtonMenuPicker/>                
+            </div>     
             
+            <!-- <div class="">
+                <HeaderButtonHome/>                
+            </div> -->
+            <HeaderBreadcrumb class="hidden md:block" v-if="useRoute().fullPath!='/'"></HeaderBreadcrumb>       
         </div>
         <div class="flex-1 flex flex-row-reverse  gap-2 p-2">
 
             <div class=" text-right">
-                <HeaderButtonProfile/>                                
+                <HeaderButtonProfile/>
             </div>
          
-            <div class="">
+            <!-- <div class="">
                 <HeaderSelectBranch/>              
-            </div>        
+            </div>         -->
         </div>
 
         
         
     </div>
+    </client-only>
     <!-- </header> -->
 </template>

package/templates/nuxt/components/header/HeaderBreadcrumb.vue.eta

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import OverlayPanel from 'primevue/overlaypanel';
+const op = ref()
+
+const home = ref({
+    icon: 'pi pi-home',
+    url: '/'
+
+});
+const items = computed(()=>{
+    const fullpath = useRoute().fullPath    
+    let path = fullpath
+    const params = useRoute().params
+    const name = useRoute().meta.name
+    const data = []
+    const patharr = fullpath.split('/').filter((item)=>item!='')
+    let pathurl = ''
+    for(let i=0; i< patharr.length;i++){
+        const p = patharr[i]
+        pathurl = `${pathurl}/${p}`        
+        let pathlabel = ''
+        if(i==0 && params['xorg']){
+            
+            pathlabel = getUserProfile().branchName
+            data.push ({ label: pathlabel }) 
+        }else{
+            pathlabel = t(p)
+            data.push ({ label: pathlabel  , url:pathurl}) 
+        }
+
+           
+    }
+    if(params['xorg']){
+    
+     path = path.replace('/'+params['xorg'],'')
+    }
+
+    return data
+})
+
+const showSwitcher=(event:any)=>{
+    op.value.toggle(event)
+}
+
+const getBranches = ()=>{
+    const orgId = getUserProfile().orgId
+    const tenantId=getUserProfile().tenantId
+    return getUserProfile().branches.filter((item:any)=>{return item.branch.tenantId == tenantId &&  item.branch.orgId == orgId})    
+}
+</script>
+<template>
+    <Breadcrumb :home="home" :model="items" class="!p-0 border-none ">
+                <template #item="{ item }">
+                        <NuxtLink :to="item.url" v-if="item.url" :active-class="'-'" :exact-active-class="'-'">
+                            <span :class="item.icon"></span>{{ item.label }}
+                        </NuxtLink>
+                        <div v-else>
+                            <span class="cursor-pointer" @click="showSwitcher">{{ item.label }}</span>
+                            <OverlayPanel ref="op">
+                                <div>
+                                    <ul class="flex flex-col">
+                                        <li  v-for="b in getBranches()" class="p-1 route-link-list ">
+                                            <NuxtLink  :to="'/'+b['xOrg']" >
+                                            {{ b['branch']['branchCode']}} - {{ b['branch']['branchName']}}
+                                            </NuxtLink>          
+                                        </li>
+                                    </ul>
+                                </div>
+                            </OverlayPanel>
+                        </div>
+
+                </template>
+                <template #separator> <span class="pi pi-chevron-right"></span></template>        
+    </Breadcrumb>    
+
+</template>

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

@@ -3,18 +3,19 @@ import Dialog from 'primevue/dialog';
 import {ref} from 'vue'
 import {MenuData} from '~/types'
 const visible = ref(false)
-const menus = getMenus();
+
 // const emit = defineEmits(['select'])
 const selectMenu = (menu:MenuData) =>{
   navigateTo(menu.url)
   visible.value=false
+  
   // emit('select',menu)
 }
 </script>
 <template>
   <div>
 
-    <button class="text-center border-none  cursor-pointer" v-if="useRoute().params.xorg" @click="visible=true">
+    <button class="text-center border-none  cursor-pointer" v-if="getCurrentXorg()" @click="visible=true">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
       </svg>
@@ -22,17 +23,14 @@ const selectMenu = (menu:MenuData) =>{
 
      <Dialog v-model:visible="visible" modal header="Pick Document" :pt="{dialog:{ class:' bg-primary-800 ' }}">
       <div class="">
-          <Button v-for="menu in menus" @click="selectMenu(menu)" >
+          <Button v-for="menu in getMenus()" @click="selectMenu(menu)" >
             <div v-if="menu.isolationType == 'none'" class="text-warning-600 hover:text-warning-500">
               * {{ camelCaseToWords(menu.label) }}
             </div>
             <div v-else class="">{{ camelCaseToWords(menu.label) }}</div>
           </Button>
         </div>
-    </Dialog>
-       
-
-    
+    </Dialog>           
   </div>
 </template>
 <style scoped>