@simitgroup/simpleapp-generator 1.0.59 → 1.0.60

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

@@ -1,7 +1,36 @@
-<template>
-    <DataTable v-bind="$attrs" class="simpleapp-datatable" stripedRows :value="valueModel">
+<!-- <template>
+    <DataTable v-bind="$attrs" 
+    stripedRows 
+    dataKey="_id"
+    :pt="{
+             bodyRow:{class:'bg-blue-200'},
+             wrapper:{class:'bg-red-100'},
+            
+             root:{class:'bg-green-100'},
+             header:{class:'bg-blue-600'},
+             pagebutton:{class:'bg-red-800'},
+
+             tfoot:{class:'bg-red-800  boder round m-4 gap-4'},  
+    }"
+
+    :value="valueModel" 
+    :filters="filters"
+    :paginator="true" :rows="20"
+    :rowsPerPageOptions="[20,40,60,100]"
+    filterDisplay="row"
+    >
+
         <template #empty> <div class="text-center">No record found.</div> </template>
-        <template #header><slot name="header"></slot></template>
+        <template #header><slot name="header">
+            <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
+                <h4 class="m-0 flex-1">Records</h4>
+                <span class="p-input-icon-left">
+                    <i class="pi pi-search" />
+                    <InputText v-model="filters['global'].value" placeholder="Search..." />
+                </span>    
+            </div>
+            
+        </slot></template>
         <Column v-for="(col,index) in columns" :field="col" :header="camelCaseToWords(col)"></Column>                        
         <slot >
 
@@ -9,11 +38,128 @@
     </DataTable>
 </template>
 <script setup lang="ts">
+import { FilterMatchMode } from 'primevue/api';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import {camelCaseToWords} from './helper'
-const props = defineProps<{columns:string[]}>()
+const props = defineProps<{columns:string[]|string[][]}>()
 const valueModel = defineModel<Object[]>()
+    const filters = ref({
+    'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
+});
+
+</script> -->
+<template>
+    <DataTable v-bind="$attrs" 
+            stripedRows 
+            dataKey="_id"
+            :showGridlines="true"
+            :pt="{
+                // header:{ class:'border bg-gray-100'},
+                headerRow:{ class:'border bg-gray-200'},                                
+            }"
+            :value="value" 
+            :filters="filters"
+            :paginator="true" :rows="20"
+            :rowsPerPageOptions="[20,40,60,100]"            
+            >
+            <!-- header -->
+            <template #header>
+                <div class=" flex flex-row w-full text-right justify-content-end">
+                    <div class="flex-1">
+                        <slot name="toolbar"></slot>
+                    </div>
+                    <div class="flex-1">
+                        <slot name="title">
+                            <h1 class="text text-2xl pt-2 text-center">{{ title }}</h1>
+                        </slot>
+                        
+                    </div>                    
+                    <span class="p-input-icon-left flex-1">                        
+                        <i class="pi pi-search  mt-4 ml-2 text-gray-400 absolute" />
+                        <InputText type ="search" v-model="filters['global'].value" class="text-right" placeholder="Keyword Search" />                        
+                    </span>
+                </div>
+            </template>
+            <!-- no data found -->
+            <template #empty>
+                <div class="text-center ">
+                    <div class="text-3xl   text-gray-400 pi pi-exclamation-circle"></div>
+                    <div class="text-3xl text-gray-400">no data found</div>
+                    
+                </div>
+            </template>
+
+            <Column v-for="(col,index) in columns"  :field="typeof col == 'string' ? col : col.field">
+                <template v-if="typeof col == 'string'" #header>            
+                    <p >{{ col }}</p>
+                </template>               
+                <template v-else-if="typeof col =='object'" #header>            
+                    <span>{{ col.title }} </span>
+                </template>
+                <template v-else #header>
+                    <span class="text-danger-600">unknown</span>
+                </template>
+                
+                <template v-if="typeof col == 'string'" #body="{index,data}">            
+                    <p >{{ data[col] }}</p>
+                </template>                
+                <template v-else-if="typeof col =='object'" #body="{index,data}">            
+                    <div v-if="col.component && col.field=='*'">
+                        <component  :is="col.component" :value="data" :fields="col.moreFields" :class="col.cssClass" :setting="col.componentSetting"></component>                        
+                    </div>
+                    <div v-else-if="col.component && col.field!='*'">                        
+                        <component :is="col.component" v-model="data[col.field]" :moreFields="col.moreFields" :class="col.cssClass" :setting="col.componentSetting" ></component>                    
+                    </div>
+                    <div v-else class="flex flex-col">                                
+                        <div :class="col.class">{{ data[col.field] }}</div>
+                        <div v-for="(f,findex) in col.moreFields" class="flex flex-col">
+                            <!-- additional field define as string -->
+                            <div v-if="typeof f == 'string'" :class="'text-gray-400 text-sm' + f.cssClass??'' ">{{ data[f] }}</div>
+                            <!-- additional field define as object -->
+                            <div v-else>                                
+                                <div v-if="f.component && f.field=='*'">
+                                    <component  :is="f.component" :value="data"  :class="f.cssClass" :setting="f.componentSetting"></component>                        
+                                </div>
+                                <div v-else-if="f.component && f.field!='*'">              
+                                    <component :is="f.component" v-model="data[f.field]" :class="f.cssClass" :setting="f.componentSetting" ></component>                    
+                                </div>
+                                <div v-else>                                    
+                                    <div :class="f.cssClass">{{ data[f.field] }}</div>
+                                </div>
+                            </div>
+                            
+                            
+                        </div>
+                    </div>                    
+                </template>
+                <template v-else #body>
+                    <span class="text-danger-600">unknown col {{ col }}</span>
+                </template>
+            </Column>            
+            <slot>
+
+            </slot>
+    </Datatable>
+</template>
+<script setup lang="ts">
+import {SearchBody,CellSetting} from '~/types'
+import { FilterMatchMode } from 'primevue/api';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+
+const props = defineProps<{
+    value:any[]
+    columns: CellSetting[]
+    title:string
+    
+    
+}>()
+
+const filters = ref({
+    'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
+});
+
 
+</script>
 
-</script>

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

@@ -0,0 +1,75 @@
+<template>
+    <card>
+        <template #header>
+            <h1 class="font font-bold text text-gray-700">{{ tenant.tenantName }}</h1>
+        </template>
+        <template #content>   
+            
+            <ul >
+                <li v-for="o in orglist">
+                    <h1>{{ o.orgName }}</h1>
+                    <ul role="list" class="divide-y divide-gray-100 rounded-md border border-gray-200">
+                        <li v-for="b in branchlist"   class="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6">
+                            <NuxtLink :href="`/${b.xOrg }`"  v-if="o.orgId==b.orgId" :external="true" class="hover:bg-primary-100">                    
+                                <div class="flex w-full flex-1 items-center ">
+                                    <!-- <i class="pi pi-sitemap"></i> -->
+                                    <p class="flex-1 flex-shrink-0 font-bold text-primary-600 ">
+                                        {{ b.branchCode }}
+                                    </p>
+                                    <p class=" text-right min-w-0 flex-1 gap-2">
+                                        <span href="#" class="font-medium text-gray-600 ">{{ b.group }}</span>    
+                                    </p>
+                                </div>
+                                <div class=" flex-shrink-0">
+                                    
+                                    <span class=" font-medium text-gray-400">{{useRuntimeConfig().public.APP_URL}}/{{b.xOrg }}</span>
+                                    
+                                </div>
+                                    
+                                </NuxtLink>
+                            </li>
+                    </ul>
+
+                </li>
+            </ul>
+            
+           <!-- <ul>
+            <li v-for="b in branches" class="border border-b-1">
+                <NuxtLink :href="`/${b.xOrg }`" :external="true">
+
+                    <div class="flex flex-col">
+                        <div class="flex">
+                            <p class="flex-1">{{b.branch.branchCode}}</p>
+                            <p class="flex-1 text-right">{{b.group }}</p>
+                        </div>
+                        
+                        
+                        <p class="text-gray-500">{{useRuntimeConfig().public.APP_URL}}/{{b.xOrg }}</p>
+                        
+                    </div>
+                    
+                </NuxtLink>
+            </li>
+           </ul> -->
+        </template>
+    </card>
+</template>
+
+<script setup lang="ts">
+import _ from 'lodash'
+const props = defineProps<{
+   tenant:any
+}>()
+const branchlist = computed(()=>props.tenant.permissions)
+
+
+const orglist = computed(()=>_.uniqBy(branchlist.value,'orgId')
+        .map((item:any)=>({ orgId:item.orgId,orgCode:item.orgCode,orgName:item.orgName}) ) )
+
+
+
+onMounted(()=>{
+
+})
+
+</script>

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

@@ -0,0 +1,65 @@
+<template>
+  <!-- <ul role="list" class="divide-y divide-gray-100">
+    <li v-for="person in people" :key="person.email" class="flex justify-between gap-x-6 py-5"> -->
+      <div class="flex justify-between gap-x-6 py-5 cursor-pointer">
+        <div class="flex min-w-0 gap-x-4">
+          <img class="h-12 w-12 flex-none rounded-full bg-gray-50" :src="`${getAvatarLink(data.email,32)}`" alt="" />
+          <div class="min-w-0 flex-auto">
+            <p class="text-sm font-semibold leading-6 text-gray-900">{{ data.fullname }}</p>
+            <p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ data.email }}</p>
+          </div>
+        </div>
+        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
+          
+          <div v-if="isOnline" class="mt-1 flex items-center gap-x-1.5">
+            <div class="flex-none rounded-full bg-emerald-500/20 p-1">
+              <div class="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+            </div>
+            <p class="text-xs leading-5 text-gray-500">Online</p>
+          </div>
+          <p v-else class="mt-1 text-xs leading-5 text-gray-500">            
+            <span v-if="datedifferent.get('years')>0">{{ datedifferent.get('years') }} year(s)</span>
+            <span v-if="datedifferent.get('months')>0">{{ datedifferent.get('months') }} month(s)</span>
+            <span v-if="datedifferent.get('days')>0">{{ datedifferent.get('days') }} day(s)</span>
+            <span v-if="datedifferent.get('hours')>0">{{ datedifferent.get('hours') }} Hour(s)</span>
+            <span v-if="datedifferent.get('minutes')>0">{{ datedifferent.get('minutes') }} min(s)</span>                        
+          </p>          
+          <p class="text-sm text-right leading-6 text-gray-400 w-[120px] truncate ...">
+            {{ data.description }}
+          </p>
+        </div>
+      </div>
+    
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import moment from 'moment'
+const props = defineProps<{
+  data:any
+}>()
+
+
+
+const datedifferent = computed(()=>{  
+  const data = moment.duration(differentTime.value)
+  return data
+})
+const differentTime =  computed(()=>{
+    const lasttime = new Date(props.data.lastActivity).getTime()
+    const current = new Date().getTime()
+    const result  =  current - lasttime
+    return result
+})
+const isOnline = computed(()=>{
+  if(props.data.lastActivity) {
+    const diffminutes = differentTime.value/ 1000/60
+    return diffminutes < 1
+  }else{
+    return false
+  }
+  
+})
+
+
+</script>

package/templates/nuxt/components/renderers/BooleanRender.vue.eta

@@ -0,0 +1,7 @@
+<template>    
+    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': modelValue, 'pi-times-circle text-red-500': !modelValue }"></i>
+</template>
+<script lang="ts" setup>
+
+const modelValue = defineModel()
+</script>

package/templates/nuxt/components/renderers/DateRender.vue.eta

@@ -0,0 +1,6 @@
+<template >
+    <span>{{ toLocalDate(modelValue) }}</span>
+</template>
+<script lang="ts" setup>
+    const modelValue = defineModel()    
+</script>

package/templates/nuxt/components/renderers/ForeignKeyRender.vue.eta

@@ -0,0 +1,10 @@
+<template>    
+    <NuxtLink :to="getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')" class="text-primary-700 hover:text-primary-500">
+        {{modelValue?.label}}
+    </NuxtLink>
+</template>
+<script setup lang="ts">
+const modelValue = defineModel()
+
+const props = defineProps<{setting:any}>()
+</script>

package/templates/nuxt/components/renderers/MoneyRender.vue.eta

@@ -0,0 +1,7 @@
+
+<template>
+    <span>{{ modelValue }}</span>
+</template>
+<script lang="ts" setup>
+const props = defineProps(['modelValue'])
+</script>

package/templates/nuxt/components/renderers/MultiTextRender.vue.eta

@@ -0,0 +1,11 @@
+
+<template>
+    <p v-for="(f,index) in fields" >
+        <span v-if="index==0">{{ value[f] }}</span>
+        <span v-else class="text-gray-400 text-sm">{{ value[f] }}</span>
+    </p>
+</template>
+<script lang="ts" setup>
+const props = defineProps(['value','fields'])
+
+</script>

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

@@ -0,0 +1,4 @@
+import {getAllDocuments} from '~/simpleapp/generate/commons/documents'
+export const getDocument = (docname:string) =>{
+        return getAllDocuments().find((item)=>item.docName==docname)?.docClass
+}

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

@@ -6,48 +6,52 @@
  */
 import _ from 'lodash'
 import {MenuData} from '~/types'
-import {alldocuments} from '../simpleapp/generate/commons/documents'
+import {getAllDocuments} from '../simpleapp/generate/commons/documents'
 export const getDocTypes = ()=>{
-  return alldocuments.filter(item=>item.page!='')
+  return getAllDocuments().filter(item=>item.page!='')
+}
+
+export const getPublicResource = (xorg:string) : MenuData[] => {
+  // const xorg = getUserStore().getCurrentXorg()
+  const menus:MenuData[] = [
+    {label: 'Home',icon: 'pi pi-fw pi-home', url:`/${xorg}`},
+    {label: "Profile", url:`/profile`, isolationType:'none', icon:''},
+    {label: "Profile", url:`/${xorg}/profile`, isolationType:'none', icon:''},
+    {label: 'Signout',icon: 'pi pi-fw pi-home', command: () => logout()},
+    {label: 'Signin',icon: 'pi pi-fw pi-home', 'url':'/login'},
+  ]
+  return menus
 }
 export const getMenus =() :MenuData[]=>{
-    const logout = async () => {
-        const { signOut } = useAuth();
-        const { data } = await <any>useFetch('/api/auth/logout');
-        const addPath = encodeURIComponent("/login");
-        signOut({ redirect: false });
-        window.location.href = data?.value?.path + addPath;
-    };
-  const {$userstore}=useNuxtApp()
-  const route = useRoute();
-  const xorg = route.params.xorg
-  let data =[];
-  //sss
-  let allmenus = alldocuments.filter(item=>item.page!='')
+//     const logout = async () => {
+//         const { signOut } = useAuth();
+//         const { data } = await <any>useFetch('/api/auth/logout');
+//         const addPath = encodeURIComponent("/login");
+//         signOut({ redirect: false });
+//         window.location.href = data?.value?.path + addPath;
+//     };
+  
+//   const route = useRoute();
+  const xorg = getUserStore().getCurrentXorg()
+//   let data:MenuData[] =[];
+//   //sss
+  let allmenus = getAllDocuments().filter(item=>item.page!='')
 
- const roles = $userstore.getUserInfo().roles
+ const roles = getUserProfile().roles
   let allowmenus=[]
   for(let i=0; i< allmenus.length;i++){
     const keyword = allmenus[i].docName
     // if(m.label)
    
-    if($userstore.haveAccess(keyword)){
+    if(getUserStore().haveAccess(keyword)){
       const m:MenuData = {label: keyword, url:`/${xorg}/${keyword}`, isolationType:allmenus[i].isolationType}
       allowmenus.push(m)
     }     
   }
-
-  if(xorg){
-    data =[
-      {label: 'Home',icon: 'pi pi-fw pi-home', url:'/'},
-      {label: 'Cruds',icon: 'pi pi-fw pi-pencil',items:allowmenus},      
-      {label: 'Signout',icon: 'pi pi-fw pi-home', command: () => logout()},
-    ]
-  }else{
-    data= [
-      {label: 'Home',icon: 'pi pi-fw pi-home', url:'/'},
-      {label: 'Signout',icon: 'pi pi-fw pi-home', command: () => logout()},
-      ]
-  }
-  return data
+//   data = publicMenus()
+//   if(xorg){
+//     data.push({label: 'Cruds',icon: 'pi pi-fw pi-pencil',items:allowmenus})
+//   }
+//   console.log('data',data)
+  return allowmenus
 }

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

@@ -10,7 +10,12 @@ export const reloadUserStore = async () =>{
 export const getUserProfile =  () =>{
     return getUserStore().getUserInfo()
 }
-
+export const getCurrentXorg = () =>{
+    return getUserStore().getCurrentXorg()
+}
+export const getPageBaseUrl = (resourcename:string) =>{
+    return `/${getCurrentXorg()}/${resourcename}`;
+}
 /**
  * verify current user can perform specific action base on backend RBAC
  * @param resource:string upper case first letter document name

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

@@ -0,0 +1,15 @@
+export const getDocumentUrl = (document:string,id?:string,querystr?:string)=>{
+    let path = `/${getCurrentXorg()}/${document}`
+    if(id){
+        path = path + '/'+id
+    }
+    if(querystr){
+        path=path+'?'+querystr
+    }
+    return path
+}
+
+
+export const goTo = (document:string,id?:string,querystr?:string)=>{    
+    navigateTo(getDocumentUrl(document,id,querystr))   
+}

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

@@ -0,0 +1,21 @@
+import {NotificationStatus} from '~/types'
+export const getStatusColor = (status:NotificationStatus) => {
+    console.log("get status color",status)
+    switch(status){
+        case NotificationStatus.error:
+            return 'bg bg-danger-600 text-white';
+        break;
+        case NotificationStatus.warn:
+            return 'bg bg-warning-600 text-white';
+        break;
+        case NotificationStatus.info:
+            return 'bg bg-secondary-600 text-white';
+        break;        
+        case NotificationStatus.success:
+        default:    
+            return 'bg bg-primary-600 text-white';
+        break;
+
+    }
+
+}

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

@@ -1,5 +1,15 @@
+import {Md5} from 'ts-md5'
 export const camelCaseToWords = (s: string) =>{
     const result = s.replace(/([A-Z])/g, ' $1');
     return result.charAt(0).toUpperCase() + result.slice(1);
   }
-  
+  
+
+export const md5=(s:string)=>  new Md5().appendStr(s).end()
+
+export const getAvatarLink = (email:string, size:number):string=>{
+  return `https://api.simbiz.cloud/cloudapi/avatar/${md5(email)}?size=${size}`
+  
+}
+
+export const toLocalDate = (dateiso8601:string)=> new Date(String(dateiso8601)).toLocaleDateString()

package/templates/nuxt/error.vue._eta

@@ -1,9 +1,24 @@
 <template>
-    <div class="mt-7 max-w-sm mx-auto text-center card">
-      <p class="mt text-7xl font font-bold">{{error.statusCode}}</p>
-      <p class="mt text-6xl">Oops</p>
-      <p class="mt ">{{error.message}}</p>
-    </div>
+  <div class="flex items-center justify-center py-12 bg bg-gray-500">
+            <div class="bg-white border rounded-md flex items-center justify-center mx-4 md:w-2/3">
+                <div class="flex flex-col items-center py-16">
+                    
+                    <div class="flex flex-row">
+                      <div class="w w-40">
+                        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-13.59 -13.59 480.17 480.17" xml:space="preserve" fill="#000000" stroke="#000000" stroke-width="0.00452986"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <g> <path style="fill:#010002;" d="M0,0v452.986h452.986V0H0z M403.223,24.655c8.132,0,14.668,6.558,14.668,14.625 c0,8.111-6.536,14.711-14.668,14.711c-8.089,0-14.668-6.601-14.668-14.711C388.576,31.234,395.134,24.655,403.223,24.655z M352.035,24.655c8.046,0,14.647,6.558,14.647,14.625c0,8.111-6.601,14.711-14.647,14.711c-8.132,0-14.668-6.601-14.668-14.711 C337.389,31.234,343.903,24.655,352.035,24.655z M417.955,418.624H35.053V85.701h382.903V418.624z"></path> <path style="fill:#010002;" d="M226.493,398.952c80.394,0,145.495-65.101,145.495-145.43s-65.101-145.495-145.495-145.495 c-80.373,0-145.516,65.165-145.516,145.495C80.977,333.873,146.12,398.952,226.493,398.952z M142.044,198.516l29.444-29.444 l55.005,55.027l54.984-55.027l29.379,29.444L255.894,253.5l54.984,54.941l-29.423,29.444l-54.962-54.962l-55.005,54.984 l-29.444-29.444l54.984-54.941L142.044,198.516z"></path> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </g> </g></svg>
+                      </div>
+                      <div>
+                        <h1 class="px-4 pt-2 pb-4 text-left text-5xl font-bold leading-10 text-gray-800">OOPS!</h1>                    
+                        <p class="px-4 mt mb-4 text-4xl text-left font font-bold">{{error.statusCode}} Error</p>                    
+                        <p class="px-4 pb-10 text-base leading-none text-left text-gray-400">{{error.message}}</p>                    
+                      </div>
+                    </div>
+                    
+                </div>
+                
+                
+            </div>
+        </div>
 </template>
 <script setup lang="ts">