@simitgroup/simpleapp-generator 1.3.4-alpha → 1.4.0-alpha

package/templates/nuxt/components/form/FormUser.vue._eta

@@ -0,0 +1,91 @@
+<template>
+  <SimpleAppForm #default="o" :document="doc">
+    <SimpleAppFormToolBar
+      :document="doc"
+      @on="actionListener"
+    ></SimpleAppFormToolBar>
+    <title v-if="id">{{ data.fullName ?? data.email }}</title>
+    <TabView lazy>
+      <TabPanel :header="t('profile')">
+        <div
+          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-2"
+        >
+          <SimpleAppInput
+            :input-type="SimpleAppInputType.text"
+            :setting="o.getField('#/properties/fullName')"
+            v-model="data.fullName"
+          />
+
+          <SimpleAppInput
+            :input-type="SimpleAppInputType.text"
+            :setting="o.getField('#/properties/email')"
+            v-model="data.email"
+            readonly
+            type="email"
+          />
+
+          <SimpleAppInput
+            :input-type="SimpleAppInputType.checkbox"
+            :setting="o.getField('#/properties/active')"
+            v-model="data.active"
+          />
+
+          <SimpleAppInput
+            :input-type="SimpleAppInputType.text"
+            :setting="o.getField('#/properties/description')"
+            v-model="data.description"
+          />
+        </div>
+
+        <DebugDocumentData v-model="data" :label="doc.getDocName()" />
+      </TabPanel>
+      <TabPanel :header="t('permission')">
+        <!-- <UserButtonPermissionInfo></UserButtonPermissionInfo> -->
+        <form-user-permission :id="id"></form-user-permission>
+      </TabPanel>
+    </TabView>
+  </SimpleAppForm>
+</template>
+
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator.
+ * --remove-this-line-to-prevent-override--
+ * last change 2024-02-16
+ * Author: Ks Tan
+ */
+import { SimpleAppInputType, FormCrudEvent } from "~/types";
+import { User } from "~/simpleapp/generate/types";
+import { UserDoc } from "~/simpleapp/docs/UserDoc";
+
+const props = defineProps<{ _id?: string; doc?: UserDoc; paras?: User }>();
+const doc = props.doc ?? useNuxtApp().$UserDoc();
+const data = doc.getReactiveData();
+const emits = defineEmits(["after"]);
+const id = computed(() => props._id ?? "");
+
+/************ start default methods ****************/
+
+const newData = () => doc.setNew();
+
+const getRecord = async () => {
+  if (id.value && id.value != "new") {
+    await doc.getById(id.value);
+  } else {
+    newData();
+  }
+};
+
+getRecord();
+watch(id, async () => await getRecord());
+/************ end default methods ****************/
+
+const actionListener = async (actionName: string) => {
+  emits("after", actionName, data.value);
+};
+
+onMounted(async () => await actionListener(FormCrudEvent.mount));
+/************ start api methods ****************/
+
+/************ end api methods ****************/
+</script>

package/templates/nuxt/components/form/user/FormUserPermission.vue.eta

@@ -0,0 +1,83 @@
+<template>
+  <div class=" w-full">    
+    <div v-for="(b, index) in branchList" :key="index" class="flex flex-col">
+      <div>{{ b.branchName }}</div>    
+      <div>        
+        <SelectButton :options="grouplist" v-model="permdata[b.branchId??0].groups" 
+            @update:model-value="updatePermission($event,b.branchId ??0)"
+            multiple option-value="value" option-label="label"/>
+        </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { Branch, Permission, UserPermission } from "~/simpleapp/generate/openapi";
+import _ from 'lodash'
+const props = defineProps<{ id: string }>();
+const perm = useNuxtApp().$PermissionDoc();
+const branchList = ref<Branch[]>()
+const branch = useNuxtApp().$BranchDoc()
+const grouplist = getAllGroups().map((item) => {
+  return { value: item, label: _.capitalize(item) };
+});
+const orgs = ref<UserPermission[]>();
+const selectedGroup=ref()
+type PermDataType = {[key:number]: {groups?:string[],permId?:string}}
+const permdata=ref<PermDataType>({})
+const loadBranches = async ()=>{
+    branchList.value=await branch.search({
+        filter:{orgId:getUserProfile()?.orgId},
+        fields:['branchCode','branchName','active','branchId'],
+        sorts:[['branchCode','asc']]
+    })
+
+    branchList.value?.forEach(b=>{
+        const branchId:number = b.branchId ?? 0
+        permdata.value[branchId] ={groups:[],permId:''}
+    })
+}
+const loadPermission = async () => {
+  const permissions:Permission[] = await perm.search({
+    filter:{userId:props.id},
+    fields:['groups','userId','uid','branchId']
+  })
+  console.log("load permissions" , permissions)
+  permissions.forEach(p=>{
+    console.log("PPP",p)
+    if(p.branchId && permdata.value[p.branchId]){
+        permdata.value[p.branchId].groups = p.groups ??[]
+        permdata.value[p.branchId].permId = p._id
+    }
+  })
+};
+const updatePermission = async (newgroups:string[],branchId:number)=>{
+    const data =perm.getReactiveData()
+    if(permdata.value[branchId] && permdata.value[branchId].permId){        
+        await perm.getById(permdata.value[branchId].permId)
+    }else{
+        data.value._id=randomUUID()
+        data.value.userId=props.id     
+    }
+    data.value.groups=newgroups
+    
+     
+    if(permdata.value[branchId] && permdata.value[branchId].permId){        
+        await perm.update()
+    }else{
+        await perm.create()
+    }
+    await loadPermission()
+}
+onMounted(async () => {
+    await loadBranches()
+    await loadPermission()
+
+});
+watch(
+  () => props.id,
+  async () => {
+    await loadPermission()
+
+}
+);
+</script>

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

@@ -1,62 +1,66 @@
 <template>
-    <!-- <header>       -->
-        <!-- <MegaMenu :model="getMenus()" orientation="horizontal" />               -->
-    
-    <div >
-        <client-only>
-        
-        <div class="flex-1 flex flex-row gap-2 p-2">
-            <!-- <div class="">
+  <!-- <header>       -->
+  <!-- <MegaMenu :model="getMenus()" orientation="horizontal" />               -->
+
+  <div>
+    <client-only>
+      <div class="flex-1 flex flex-row gap-2 p-2">
+        <!-- <div class="">
                 <HeaderButtonMenuPicker/>                
             </div>      -->
-            
-            <!-- <div class="">
+
+        <!-- <div class="">
                 <HeaderButtonHome/>                
             </div> -->
-            <div v-if="isMobile()" class="dark:text-white max-w-[15rem] truncate ...">                
-                <div v-if="useRoute().fullPath.split('/').length<=3">{{ t('home') }}</div>
-                <div v-else>{{ _.last(useRoute().fullPath.split('/'))  }}</div>
-            </div>
-            <div v-else>
-                <HeaderBreadcrumb class="hidden md:block" v-if="useRoute().fullPath!='/'"></HeaderBreadcrumb>       
-            </div>
-            
+        <div
+          v-if="isMobile()"
+          class="dark:text-white max-w-[15rem] truncate ..."
+        >
+          <div v-if="useRoute().fullPath.split('/').length <= 3">
+            {{ t("home") }}
+          </div>
+          <div v-else>{{ _.last(useRoute().fullPath.split("/")) }}</div>
         </div>
-        <div class="flex-1 flex flex-row-reverse  gap-2 p-2">
-            <!--
+        <div v-else>
+          <HeaderBreadcrumb
+            class="hidden md:block"
+            v-if="useRoute().fullPath != '/'"
+          ></HeaderBreadcrumb>
+        </div>
+      </div>
+     <!-- <div class="flex-1 flex flex-row-reverse gap-2 p-2">
+       
             <div class=" text-right" v-if="!isMobile()">
                 <HeaderButtonProfile/>
             </div>
              <div class=" text-right">
                 <HeaderButtonTaskList/>
-            </div> -->
-            <!-- <div class="">
+            </div> 
+         <div class="">
                 <HeaderSelectBranch/>              
-            </div>         -->
-        </div>
+            </div>         
+      </div>-->
+    </client-only>
+  </div>
 
-        
-    </client-only>    
-    </div>
-    
-    <!-- </header> -->
+  <!-- </header> -->
 </template>
 <script setup lang="ts">
 /**
  * This file was automatically generated by simpleapp generator during initialization. It is changable.
  * --remove-this-line-to-prevent-override--
- * last change 2024-02-22
+ * last change 2024-04-10
  * author: Ks Tan
  */
- 
-import _ from 'lodash'
+
+import _ from "lodash";
 //import ButtonMenuPicker from "./ButtonMenuPicker.vue"
 
 //import ButtonProfile from './ButtonProfile.vue';
-const pageTitle = ref<string>('')
-onMounted(()=>{
-    // useNuxtApp().$listen('SetTitle',(title:string)=>{
-        // pageTitle.value = title
-    // })
-})
-</script>
+const pageTitle = ref<string>("");
+onMounted(() => {
+  // useNuxtApp().$listen('SetTitle',(title:string)=>{
+  // pageTitle.value = title
+  // })
+});
+</script>

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

@@ -5,52 +5,60 @@
  * last change 2024-02-22
  * author: Ks Tan
  */
- 
-import Dialog from 'primevue/dialog';
-// import {ref} from 'vue'
-import {MenuData} from '~/types'
-const visible = defineModel<boolean>({default:true,required:true})
 
-// const emit = defineEmits(['select'])
-const selectMenu = (menuname:{name:string,children:any}) =>{
-  goTo(menuname.name)
-  visible.value=false  
-}
+import { MenuData } from "~/types";
+const visible = defineModel<boolean>({ default: true, required: true });
 
+// const emit = defineEmits(['select'])
+const selectMenu = (menuname: { name: string; children: any }) => {
+  goTo(menuname.name);
+  visible.value = false;
+};
 
-const m =  getMenustFromPageMeta()
-let treemenu:any[] = []
+const m = getMenustFromPageMeta();
+let treemenu: any[] = [];
 
-getMenustFromPageMeta().reduce((r, item) => {
-    item.split('/').
-    reduce((o, name) => {
-        var temp = (o.children = o.children || []).find(q => q.name === name);
-        if (!temp) o.children.push(temp = { name });
-        return temp;
+getMenustFromPageMeta().reduce(
+  (r, item) => {
+    item.split("/").reduce((o, name) => {
+      var temp = (o.children = o.children || []).find((q) => q.name === name);
+      if (!temp) o.children.push((temp = { name }));
+      return temp;
     }, r);
     return r;
-}, { children: treemenu })
+  },
+  { children: treemenu },
+);
 
-treemenu = treemenu.sort((a,b)=>a.name<b.name ?-1:1)
+treemenu = treemenu.sort((a, b) => (a.name < b.name ? -1 : 1));
 </script>
 <template>
-  
-    <!-- <button class="text-center border-none  cursor-pointer pi pi-bars dark:text-white" v-if="getCurrentXorg()" @click="visible=true">      -->
-      <Dialog v-model:visible="visible" modal :header="t('pickDocument')" :pt="{dialog:{ class:' bg-primary-800 ' }}">
-      <div class="">
-        
-          <div v-for="m in treemenu.sort()" class="m-4">
-            
-            <h3>{{ t(m.name) }}</h3>
-            <div class="grid md:grid-cols-2 lg:grid-cols-6 gap-4">              
-              <ButtonPrimary v-for="submenu in m.children.sort((a:any,b:any)=>a.name<b.name ?-1:1)" class="border rounded-lg p-2" @click="selectMenu(submenu)">              
-                {{ t(submenu.name) }}
-              </ButtonPrimary>
-            </div>
-            
-          </div>
-          
+  <!-- <button class="text-center border-none  cursor-pointer pi pi-bars dark:text-white" v-if="getCurrentXorg()" @click="visible=true">      -->
+  <Dialog
+    v-model:visible="visible"
+    modal
+    dismissableMask
+    position="top"
+    :header="t('pickDocument')"    
+    :pt="{root:{class:'h-6/7',},}"
+    :pt-options="{mergeProps:true,mergeSections:true}"
+  >
+    <div class="">
+      <div v-for="(m,index) in treemenu.sort()" class="m-4" :key="index">
+        <h3>{{ t(m.name) }}</h3>
+        <div class="grid md:grid-cols-2 lg:grid-cols-6 gap-4">
+          <ButtonPrimary
+            v-for="(submenu,menuindex) in m.children.sort((a: any, b: any) =>
+              a.name < b.name ? -1 : 1,
+            )"
+            class="border rounded-lg p-2"
+            :key="menuindex"
+            @click="selectMenu(submenu)"
+          >
+            {{ t(submenu.name) }}
+          </ButtonPrimary>
         </div>
-    </Dialog>           
-    
+      </div>
+    </div>
+  </Dialog>
 </template>

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

@@ -43,6 +43,8 @@ const saveLocale = async (v: string) => {
   <!-- </div> -->
 
   <Dialog
+    modal
+    dismissableMask
     appendTo="body"
     ref="userprofileoverlay"
     v-model:visible="modelValue"
@@ -65,22 +67,20 @@ const saveLocale = async (v: string) => {
         </div>
         <div class="flex flex-col">
           <h1
-            class="text-left text-gray-800 dark:text-gray-100 font-lg font-bold tracking-normal leading-tight ml-2"
+            class="text-left text-gray-800 dark:text-gray-100 font-lg font-bold tracking-normal leading-tight"
           >
             {{ 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>
+          <NuxtLink :to="getDocumentUrl('pickgroup')" @click="modelValue=false">
+            <TextPrimary>{{ getUserProfile()?.currentGroup }} </TextPrimary>
+          </NuxtLink>
         </div>
       </div>
       <div class="pt-2 pb-2">
         <TextTitle>{{ getUserProfile()?.branchName }}</TextTitle>
-        <TextPrimary @click="goTenantPicker">{{
-          t("switchDatabase")
-        }} </TextPrimary>
+        <TextPrimary @click="goTenantPicker"
+          >{{ t("switchDatabase") }}
+        </TextPrimary>
       </div>
       <div class="col-span-full">
         <label

package/templates/nuxt/components/mobile/MobileToolbar.vue.eta

@@ -1,11 +1,15 @@
-<template>
-  <div
-    class="w-full dark:bg-gray-800 z-20 justify justify-between absolute h h-14 flex flex-row place-items-center opacity-90 dark:text-white"
-  >
-    <div class="text-left"><slot name="start"></slot></div>
-    <div class="flex-1 text-center line-clamp-2"><slot name="center"></slot></div>
-    <div class=" text-right"><slot name="end"></slot></div>
-  </div>
+<template>  
+    <div v-bind="$attrs"
+      class="w-full dark:bg-gray-800 z-20 justify justify-between absolute h h-14 flex flex-row place-items-center opacity-90 dark:text-white"
+    >
+      <div class="text-left"><slot name="start"></slot></div>
+      <div class="flex-1 text-center line-clamp-2">
+        <slot name="center"></slot>
+      </div>
+      <div class="text-right"><slot name="end"></slot></div>
+    </div>
+    <div class="h-14"></div>
+  
 </template>
 <script setup lang="ts">
 /**

package/templates/nuxt/components/overlay/OverlayPanelWithToolBar.vue.eta

@@ -19,7 +19,7 @@
           <slot name="headerRight"></slot>
         </template>
       </MobileToolbar>
-      <div class="mt-14">
+      <div >
         <slot name="default"></slot>
       </div>
     </div>

package/templates/nuxt/components/page/PageDocList.vue.eta

@@ -154,10 +154,12 @@ watch(showDialog, () => {
 watch(
   () => useRoute().path,
   async () => {
-    if (getPathPara("id")) {
-      showDialog.value = true;
-    } else {
-      showDialog.value = false;
+    if(!isMobile()){
+      if (getPathPara("id")) {
+        showDialog.value = true;
+      } else {
+        showDialog.value = false;
+      }
     }
   },
 );

package/templates/nuxt/components/renderer/RendererDateTime.vue.eta

@@ -0,0 +1,13 @@
+<template>
+  <span v-if="modelValue">{{ toLocalDateTime(modelValue) }}</span>
+  <span v-else>-</span>
+</template>
+<script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DONT CHANGE THIS FILE CAUSE IT OVERRIDE
+ * last change 2024-03-10
+ * author: Ks Tan
+ */
+const modelValue = defineModel<Date | string>();
+</script>

package/templates/nuxt/components/renderer/RendererForeignKey.vue.eta

@@ -2,12 +2,11 @@
   <span
     v-if="setting?.collection"
     @click="viewRecord"
-    class="text-primary-700 hover:text-primary-500  dark:text-primary-400 cursor-pointer"
+    class="text-primary-700 hover:text-primary-500 dark:text-primary-400 cursor-pointer"
   >
     <slot>
       {{ displayText }}
     </slot>
-    
   </span>
   <span v-else>{{ displayText }}</span>
 </template>
@@ -18,10 +17,11 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-import { ForeignKey } from "~/types";
+import { ForeignKey, FormCrudEvent } from "~/types";
 
 type SettingProp = { collection: string; displayField?: string };
 const modelValue = defineModel<ForeignKey>();
+const emits = defineEmits(['after'])
 const props = defineProps<{ setting: SettingProp }>();
 const displayText = computed(() => {
   const s = props.setting;
@@ -44,6 +44,9 @@ const viewRecord = () => {
     documentName: props.setting.collection,
     viewer: viewer.value,
     readonly: true,
+    after: async(actionName:FormCrudEvent,data)=>{
+      emits('after',actionName,data)
+    }
   });
 };
 </script>

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

@@ -91,8 +91,7 @@
             <i class="pi pi-plus"></i>
             </ButtonText>  -->
             </template>
-          </mobile-toolbar>
-          <div class="h-16"></div>
+          </mobile-toolbar>          
           <ListView
             :list="list"
             :withFilter="true"
@@ -229,7 +228,7 @@ const onBlurAutocomplete = () => {
 };
 
 const showAutocompleteDialog = (isbutton: boolean) => {
-  mobileListMode.value='list'
+  mobileListMode.value = "list";
   if (modelValue.value && isbutton) {
     openViewer(false);
   } else {
@@ -300,7 +299,7 @@ const setFocus = (ev: any) => {
 
 //pop up records
 const openViewer = (readonly: boolean) => {
-  if (remotedoc) {    
+  if (remotedoc) {
     $event("ViewRecord", {
       _id: modelValue.value?._id as string,
       eventId: randomUUID(),

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

@@ -15,16 +15,21 @@
     <!-- <div :uuid="uuid" >{{ modelValue }}</div> -->
     <!-- <div v-if="typeof modelValue =='object' && typeof modelValue['_id']!='undefined' && typeof modelValue['label']!='undefined' &&  readonly ==true " :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue['label'] }}</div> -->
     <!-- <div v-else-if="readonly==true" :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue }}</div> -->
-    <!-- <slot v-else name="default" :uuid="uuid" :error="error"></slot> -->    
-    <slot name="default" :uuid="uuid" :error="error"></slot>    
-    
+    <!-- <slot v-else name="default" :uuid="uuid" :error="error"></slot> -->
+    <slot name="default" :uuid="uuid" :error="error"></slot>
 
-    <small v-if="error" class="text-danger-600 dark:text-danger-400">{{ error }}</small>
+    <small v-if="error" class="text-danger-600 dark:text-danger-400">{{
+      error
+    }}</small>
     <small v-else class="input-desc">{{ fielddesc }}</small>
   </div>
   <div v-else :class="defaultcssclass">
-    <label class="etext-danger-600 dark:text-danger-400">wrong path in getField()</label>
-    <div class="text-danger-600 dark:text-danger-400">{{ props.setting.path }}</div>
+    <label class="etext-danger-600 dark:text-danger-400"
+      >wrong path in getField()</label
+    >
+    <div class="text-danger-600 dark:text-danger-400">
+      {{ props.setting.path }}
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -55,6 +60,7 @@ const props = defineProps<{
   readonly?: boolean;
   // error?:string,
   setting: any;
+  resetcount: number;
 }>();
 
 const readonly = computed(() => {
@@ -85,7 +91,7 @@ const getLabelClass = () => {
     class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
   else if (modelValue.value !== undefined)
     class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100";
-  else class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100 hidden";
+  else class1 += "-mb-4 ml-1 z-10 text-xs dark:text-gray-100 ";
   return class1;
 };
 
@@ -137,4 +143,11 @@ watch(props.setting.errors, (newvalue, oldvalue) => {
   // console.log("validation result",props.setting.instancepath,)
   // error.value = newvalue[props.setting.instancepath].message
 });
+
+watch(
+  () => props.resetcount,
+  () => {
+    error.value = "";
+  },
+);
 </script>

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

@@ -32,8 +32,7 @@
         </slot>
         <ContextMenu ref="menu" :model="menus as MenuItem[]" />
       </template>
-    </MobileToolbar>
-    <div class="h-14"></div>
+    </MobileToolbar>    
     <ConfirmDialog></ConfirmDialog>
   </div>
   <div v-else class="simpleapp-tool-bar">
@@ -121,9 +120,7 @@ const title = computed(() =>
 
 const menu = ref();
 const menus = computed(() =>
-  [...getActions(),  ...getDocActions()].filter((item) =>
-    showMenuButton(item),
-  ),
+  [...getActions(), ...getDocActions()].filter((item) => showMenuButton(item)),
 );
 
 const isShow = computed(