@simitgroup/simpleapp-generator 1.3.5-alpha → 1.4.1-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/HeaderButtonProfile.vue.eta

@@ -67,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/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/SimpleAppInput.vue.eta

@@ -83,6 +83,22 @@
       v-bind="componentProps as CalendarProps"
     />
 
+    <Calendar
+      :pt="pt"
+      v-else-if="inputType == SimpleAppInputType.datetime"
+      :inputId="slotprops.uuid"
+      :path="setting.instancepath"
+      v-model="datetimevalue"
+      @update:modelValue="updateDateTime"
+      :touchUI="isMobile()"
+      showButtonBar
+      :readonly="isReadonly"
+      :placeholder="placeholder"
+      :date-format="getDateFormat()"
+      showTime 
+      hourFormat="12"
+      v-bind="componentProps as CalendarProps"
+    />
     <!-- select/list component -->
     <Listbox
       v-model="modelValue"
@@ -300,11 +316,12 @@ import Rating, { RatingProps } from "primevue/rating";
 import Slider, { SliderProps } from "primevue/slider";
 import Textarea, { TextareaProps } from "primevue/textarea";
 import { SimpleAppInputType } from "~/types";
-const resetcount = ref(0)
+const resetcount = ref(0);
 const instancepath = ref("");
 const modelValue = defineModel({ required: true });
 
 const datevalue = ref<Date>();
+const datetimevalue = ref<Date>();
 const timevalue = ref<Date>();
 let watchOnChange = 0;
 const props = withDefaults(
@@ -341,6 +358,11 @@ if (props.inputType == SimpleAppInputType.date && modelValue.value) {
 } else {
   datevalue.value = undefined;
 }
+if (props.inputType == SimpleAppInputType.datetime && modelValue.value) {
+  datetimevalue.value = stringToDate(<string>modelValue.value); 
+} else {
+  datetimevalue.value = undefined;
+}
 
 if (props.inputType == SimpleAppInputType.time) {
   if (modelValue.value) {
@@ -405,6 +427,14 @@ const updateDate = (value: any) => {
   }
   onChange();
 };
+const updateDateTime = (value:any)=>{
+  if (value) {
+    modelValue.value = dateToISOString(value);
+  } else {
+    modelValue.value = "";
+  }
+  onChange();
+}
 
 const setFocus = (ev: any) => {
   if (!isMobile()) ev.target.select();
@@ -446,7 +476,15 @@ watch(modelValue, (newvalue: any) => {
     } else {
       timevalue.value = undefined;
     }
-  } else if (props.inputType == SimpleAppInputType.time) {
+  
+  } else if (props.inputType == SimpleAppInputType.datetime) {
+    if (modelValue.value) {
+      datetimevalue.value = stringToDate(modelValue.value as string);
+    } else {
+      timevalue.value = undefined;
+    }
+  }
+   else if (props.inputType == SimpleAppInputType.time) {
     if (modelValue.value) {
       timevalue.value = stringToDate(
         (today() + "T" + modelValue.value) as string,
@@ -467,6 +505,12 @@ onMounted(() => {
     } else {
       datevalue.value = undefined;
     }
+  } else  if (props.inputType == SimpleAppInputType.datetime) {
+    if (modelValue.value) {
+      datetimevalue.value = stringToDate(modelValue.value as string);
+    } else {
+      datetimevalue.value = undefined;
+    }
   } else if (props.inputType == SimpleAppInputType.time) {
     if (modelValue.value) {
       timevalue.value = stringToDate(
@@ -479,8 +523,8 @@ onMounted(() => {
 });
 
 const onChange = () => {
-  pt.value=undefined
-  resetcount.value++
+  pt.value = undefined;
+  resetcount.value++;
   emits("change", modelValue.value);
 };
 

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

@@ -1,7 +1,7 @@
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
- * last change 2023-10-28
+ * last change 2024-03-08
  * Author: Ks Tan
  */
 export const setDateLocale = (localename:string) =>  useDayjs().locale(localename)
@@ -15,11 +15,13 @@ export const getDayJs = ()=>useDayjs()
 export const lastDateOfMonth = (datestr:string) =>  useDayjs()(datestr).endOf('month').format('YYYY-MM-DD');
 export const today = () => useDayjs()().format('YYYY-MM-DD')
 export const dateToString = (date:Date) => useDayjs()(date).format('YYYY-MM-DD')
+export const dateToISOString = (date:Date) => useDayjs()(date).toISOString()
 export const dateToTimeString = (date:Date) => useDayjs()(date).format('HH:mm:ss')
 export const stringToDate = (datestr:string) => new Date(datestr)
 export const dateToDateTimeString = (date:Date)=> useDayjs()(date).format('YYYY-MM-DD HH:mm:ss')
 export const toLocalDate = (date:string | Date)=> useDayjs()(date).format(getDateFormat())
 export const getDateFormat = ():string=> 'DD-MM-YYYY'
+export const calculateHourDifferent = (date1:Date, date2:Date) => (date1.getTime() - date2.getTime())/60/60/1000
 export const getPrimevueCalendarDateFormat = () => {
   const country = <string>getUserProfile()?.country
   return 'dd/mm/yy'

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

@@ -5,7 +5,10 @@
  * Author: Ks Tan
  */
 export const getDocumentUrl = (document:string,id?:string,querystr?:string)=>{
-    let path = `/${getCurrentXorg()}/${document}`
+    
+    let path = useRoute().path.includes('/mobile/') || isMobile() ? 
+            `/${getCurrentXorg()}/mobile/${document}`
+                : `/${getCurrentXorg()}/${document}`
     if(id){
         path = path + '/'+id
     }

package/templates/nuxt/layouts/mobile.vue._eta

@@ -9,7 +9,7 @@
               
         </div> 
         <!-- fixed -->
-        <div v-if="getCurrentXorg()" class="flex h-16  border-t-2 dark:border-t-gray-700  text-3xl  flex-row   left-0 w-full  justify justify-between bottom-0 fixed z-50 bg-white dark:bg-slate-800 opacity opacity-95 " > 
+        <div v-if="getCurrentXorg()" class="flex h-16  border-t-2 dark:border-t-gray-700  text-3xl  flex-row   left-0 w-full  justify justify-between bottom-0 fixed z-50 bg-white dark:bg-slate-900 opacity opacity-95 " > 
                 <div v-for="item in menus">
                     <NuxtLink v-if="item.path !== undefined"
                         :class="`pi ${item.iconClass} p-4 cursor-pointer inline-block align-middle`"
@@ -33,7 +33,6 @@
 <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
  * author: Ks Tan
  */
@@ -42,17 +41,32 @@ const showProfile =ref(false)
 
 const openMenu = ()=>showMenu.value=true
 const openProfile = ()=>showProfile.value=true
-const menus=[
+type MenuType = {iconClass:string,path?:string,command?:Function}
+type AllMenus = {[key:string]:MenuType[]}
+const menus=ref<MenuType[]>([])
     // {iconClass:'pi-bars',path:'managestudents/profile'},
-    {iconClass:'pi-home dark:text-white',path:''},
-    //{iconClass:'pi-users  dark:text-white',path:'managestudents'},
-    //{iconClass:'pi-calendar dark:text-white',path:`manageclasses`},
-    {iconClass:'pi-chart-pie dark:text-white',path:'reports'},
-    {iconClass:'pi-bars dark:text-white',command: openMenu},    
-    {iconClass:'pi-user  dark:text-white',command: openProfile},
-    // {iconClass:'pi-database',path:'managedata'},
-    
-]
+const allmenus:AllMenus = {
+    admin:[
+            {iconClass:'pi-home dark:text-white',path:''},
+            //{iconClass:'pi-users  dark:text-white',path:'managestudents'},
+            //{iconClass:'pi-calendar dark:text-white',path:`manageclasses`},
+            {iconClass:'pi-bars dark:text-white',command: openMenu},    
+            {iconClass:'pi-user  dark:text-white',command: openProfile},            
+        ],
+    teacher: [{iconClass:'pi-home dark:text-white',path:''},
+            {iconClass:'pi-user  dark:text-white',command: openProfile},],
+    unknown:[]
+}
 
+const readGroup=()=>{    
+    if(getUserProfile()?.currentGroup) {
+        menus.value = allmenus[getUserProfile()?.currentGroup ?? 'unknown']
+    }
+}
+
+onMounted(()=>{    
+    readGroup()    
+    useNuxtApp().$listen('pickGroup',()=>readGroup())    
+})
 
 </script>