@simitgroup/simpleapp-generator 1.6.2-alpha → 1.6.4-alpha

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

@@ -1,18 +1,16 @@
 <template>
   <OverlayViewer v-model="visible">
-    <!-- <template #header>
-      
-    </template> -->
+    <template #header>
+      <div class="flex flex-row gap-4">
+        <Chip
+          v-for="(v, k) in allview"
+          :label="v.label"
+          @remove="deleteTab"
+          :removable="lastDocumentName == v.documentName"
+        />
+      </div>
+    </template>
     <div class="w-full h-full">
-      <!-- <div class="flex flex-row gap-4" v-if="allview.length>0">
-            <Chip              
-              v-for="(v, k) in allview"
-              :label="v.label"
-              @remove="deleteTab"
-              :removable="true"
-            />
-          </div> -->
-
       <div
         v-for="(v, k) in allview"
         v-memo="[k]"
@@ -37,7 +35,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
  */
@@ -47,9 +44,18 @@ import { defineAsyncComponent } from "vue";
 import { ViewRecord, FormCrudEvent } from "~/types";
 // import TabView from 'primevue/tabview';
 import Chip from "primevue/chip";
+const lastDocumentName = computed(() => {
+  const keys = Object.keys(allview.value);
+
+  if (keys.length == 0) return "";
 
+  const keyname = keys[keys.length - 1];
+
+  return allview.value[keyname].documentName;
+});
 const { $listen } = useNuxtApp();
 const visible = ref(false);
+const autodeletetab = ref(true);
 const allview = ref<{ [key: string]: ViewRecord }>({});
 const after = (
   v: ViewRecord,
@@ -58,10 +64,12 @@ const after = (
   result: any,
 ) => {
   if (v.after) {
-    v.after(eventType, data);
-    
+    v.after(eventType, data, visible);
+    console.log("eventTypeeventType",eventType,"setting['autoclose'] ",autodeletetab.value)
     //only after mount consider no remove tab
-    if (eventType != "mount") deleteTab();
+    if (eventType == "mount") return
+    
+    deleteTab();
   }
 };
 
@@ -73,18 +81,30 @@ onKeyStroke("Escape", (e) => {
 const deleteTab = () => {
   const keys = Object.keys(allview.value);
   const lastkey = keys[keys.length - 1];
-  delete allview.value[lastkey];
+  console.log("Trigger delete tab")
+  if (keys.length == 1) {
+    const callback = allview.value[lastkey]?.after;
+    if (typeof callback == "function") {
+      callback(FormCrudEvent.exit, undefined, visible);
+    }
 
-  // updateprops.value++
-  if (Object.keys(allview.value).length == 0) {
-    visible.value = false;
-    useNuxtApp().$event("CloseDialog", "viewer");
-    return;
+    if(autodeletetab.value){
+      delete allview.value[lastkey];
+      visible.value = false;
+      useNuxtApp().$event("CloseDialog", "viewer");  
+    }
+    
+  }else{
+    console.log("Trigger delete tab2")
+    delete allview.value[lastkey];
   }
 };
 
 $listen("ViewRecord", (setting) => {
   visible.value = true;
+  if (setting["autoclose"] != undefined) {
+    autodeletetab.value = setting["autoclose"] ==0 ? false : true;
+  }
   allview.value[setting.eventId] = setting;
 });
 
@@ -104,6 +124,26 @@ $listen("CloseDialog", (documentName: string) => {
 //   visible.value = true;
 //   allview.value[setting.eventId] = setting;
 // });
+//
+const clearView = () => {
+  const firstId = Object.keys(allview.value)[0];
+  console.log("clear view", allview.value);
+  const callback = allview.value[firstId]?.after;
+  if (typeof callback == "function") {
+    callback(FormCrudEvent.exit, undefined, visible);
+  }
+  allview.value = {};
+};
+// watch(visible,()=>{
+//       if(visible.value==false){
+//         v.after(FormCrudEvent.exit, data,visible);
+//       }
+//     })
+watch(visible, () => {
+  if (!visible.value) {
+    clearView();
+  }
+});
 </script>
 
 <style scoped>

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

@@ -7,9 +7,7 @@
         :document="doc"
         @on="actionListener"
       ></SimpleAppFormToolBar>
-      <div
-        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-2"
-      >
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 p-2">
         <SimpleAppInput
           :input-type="SimpleAppInputType.text"
           :setting="o.getField('#/properties/branchName')"
@@ -27,7 +25,53 @@
           :setting="o.getField('#/properties/active')"
           v-model="data.active"
         />
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.selectmultiple"
+          :setting="o.getField('#/properties/offdays')"
+          v-model="data.offdays"
+        />
+
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/street1')"
+          v-model="data.street1"
+        />
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/street2')"
+          v-model="data.street2"
+        />
 
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/postcode')"
+          v-model="data.postcode"
+        />
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/city')"
+          v-model="data.city"
+        />
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/region')"
+          v-model="data.region"
+        />
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/country')"
+          v-model="data.country"
+        />
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/tel')"
+          v-model="data.tel"
+        />
+        <SimpleAppInput
+          :input-type="SimpleAppInputType.text"
+          :setting="o.getField('#/properties/email')"
+          v-model="data.email"
+        />
         <SimpleAppInput
           :input-type="SimpleAppInputType.textarea"
           :setting="o.getField('#/properties/description')"
@@ -41,8 +85,7 @@
 
 <script setup lang="ts">
 /**
- * This file was automatically generated by simpleapp generator during initialization. 
- * --remove-this-line-to-prevent-override--
+ * This file was automatically generated by simpleapp generator during initialization.
  * last change 2024-02-22
  * author: Ks Tan
  */
@@ -69,6 +112,10 @@ const getRecord = async () => {
     await doc.getById(id.value);
   } else {
     newData();
+    data.value.organization={
+      _id:getUserProfile()?.orgRecordId,
+      label:getUserProfile()?.orgName
+    }
   }
 };
 

package/templates/nuxt/components/form/FormDocnoformat.vue.eta

@@ -8,13 +8,21 @@
         @on="actionListener"
       ></SimpleAppFormToolBar>
       <div
-        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-2"
+        class="grid grid-cols-1 lg:grid-cols-2 gap-4 p-2"
       >
         <SimpleAppInput
           :input-type="SimpleAppInputType.autocomplete"
           :setting="o.getField('#/properties/branch')"
           v-model="data.branch"
         />
+        <SimpleAppInput
+          :readonly="!doc.isNew()"
+          :input-type="SimpleAppInputType.select"
+          :setting="o.getField('#/properties/docNoType')"
+          :options="getAllDocFormats().map((item) => item.docType)"
+          v-model="data.docNoType"
+        />
+
 
         <SimpleAppInput
           :input-type="SimpleAppInputType.text"
@@ -39,14 +47,7 @@
           v-model="data.default"
         />
 
-        <SimpleAppInput
-          :readonly="!doc.isNew()"
-          :input-type="SimpleAppInputType.select"
-          :setting="o.getField('#/properties/docNoType')"
-          :options="getAllDocFormats().map((item) => item.docType)"
-          v-model="data.docNoType"
-        />
-
+        
         <SimpleAppInput
           :input-type="SimpleAppInputType.text"
           :setting="o.getField('#/properties/docNoPattern')"
@@ -91,7 +92,10 @@ const id = computed(() => props._id ?? "");
 
 /************ start default methods ****************/
 
-const newData = () => doc.setNew();
+const newData = () => {
+  doc.setNew()
+  delete data.value.branch
+}
 
 const getRecord = async () => {
   if (id.value && id.value != "new") {

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

@@ -8,7 +8,7 @@
     <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"
+          class="grid grid-cols-1 lg:grid-cols-2 gap-4 p-2"
         >
           <SimpleAppInput
             :input-type="SimpleAppInputType.text"

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

@@ -1,83 +1,101 @@
 <template>
-  <div class=" w-full">    
+  <div class="w-full">    
+    <UserButtonPermissionInfo/>
     <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>{{ 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'
+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 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']]
-    })
+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:''}
-    })
-}
+  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 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()
+const updatePermission = async (newgroups: string[], branchId: number) => {
+  const data = perm.getReactiveData();
+  const userdoc = useNuxtApp().$UserDoc()
+  await userdoc.getById(props.id);
+  const userdata = userdoc.getReactiveData()
+  console.log("userdata",userdata.value)
+  
+  if (permdata.value[branchId] && permdata.value[branchId].permId) {
+    await perm.getById(permdata.value[branchId].permId);
+    if(!data.value.uid && userdata.value.uid){
+      data.value.uid = userdata.value.uid
     }
-    await loadPermission()
-}
+  } else {
+    data.value._id = randomUUID();
+    data.value.userId = props.id;
+    data.value.uid = userdata.value.uid
+    data.value.branchId = branchId
+  }
+  data.value.groups = newgroups;
+  // console.log("data",data.value)
+  // return false
+  if (permdata.value[branchId] && permdata.value[branchId].permId) {
+    await perm.update();
+  } else {
+    await perm.create();
+  }
+  await loadPermission();
+};
 onMounted(async () => {
-    await loadBranches()
-    await loadPermission()
-
+  await loadBranches();
+  await loadPermission();
 });
 watch(
   () => props.id,
   async () => {
-    await loadPermission()
-
-}
+    await loadPermission();
+  },
 );
 </script>

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

@@ -1,3 +1,21 @@
+<template>
+  <div>
+    <select
+      v-if="selectedbranch"
+      v-model="selectedbranch"
+      style="background: transparent;  border: none;"
+      class="text-right pt-3 pb-3 text-lg"
+      @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>
+    </select>
+  </div>
+</template>
+
 <script setup lang="ts">
 /**
  * This file was automatically generated by simpleapp generator. Every
@@ -5,42 +23,31 @@
  * last change 2023-10-28
  * Author: Ks Tan
  */
-import _ from 'lodash'
-import {ref} from 'vue'
+import _ from "lodash";
+import { ref } from "vue";
 
-const selectedbranch = ref(getCurrentXorg())
-const currentTenant=ref(getUserProfile().tenantId)
-
-type Org = {orgId:number, label:string,_id:string}
-const branches = getUserProfile().branches.filter((item:any)=>{return item.branch.tenantId == currentTenant.value})
-const orgList:Org[] = _.uniqBy(branches,'branch.orgId').map((item)=>({
-    _id:item['branch']['organization']['_id'],
-    orgId:item['branch']['orgId'],
-    label:item['branch']['organization']['label']}))
-    // console.log("orgList",orgList)
-const getBranchesForOrg = (org:Org)=>{
-    const branchlist =  branches.filter((item,index)=>{
-        // console.log(org['orgId'] ,'===', item['branch']['orgId'])
-        return org['orgId'] === item['branch']['orgId']
-    })
-    
-    return branchlist
-}
-const switchXorg = ()=>{
-    navigateTo(`/${selectedbranch.value}`,{external:true})    
-}
+const selectedbranch = ref(getCurrentXorg());
+const currentTenant = ref(getUserProfile()?.tenantId);
 
+type Org = { orgId: number; label: string; _id: string };
+const branches = getUserProfile()?.branches.filter((item: any) => {
+  return item.branch.tenantId == currentTenant.value;
+});
+const orgList: Org[] = _.uniqBy(branches, "branch.orgId").map((item) => ({
+  _id: item["branch"]["organization"]["_id"],
+  orgId: item["branch"]["orgId"],
+  label: item["branch"]["organization"]["label"],
+}));
+// console.log("orgList",orgList)
+const getBranchesForOrg = (org: Org) => {
+  const branchlist = branches.filter((item, index) => {
+    // console.log(org['orgId'] ,'===', item['branch']['orgId'])
+    return org["orgId"] === item["branch"]["orgId"];
+  });
 
+  return branchlist;
+};
+const switchXorg = () => {
+  navigateTo(`/${selectedbranch.value}`, { external: true });
+};
 </script>
-<template>
-    <div>        
-        
-        <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>
-                    
-                </select>  
-    </div>
-    
-</template>

package/templates/nuxt/components/image/ImageAvatar.vue.eta._vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="inline-block border rounded-lg w-20 h-20 bg-white">
+    <Avatar v-if="email"
+      :image="getAvatarLink(<string>email, size)"
+      shape="circle"
+      size="xlarge"
+    />
+    <Avatar v-else-if="id"
+      :image="getAvatarByUid(<string>id, size)"
+      shape="circle"
+      size="xlarge"
+    />
+  </div>
+
+  
+</template>
+<script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization. 
+ * --remove-this-line-to-prevent-override--
+ * last change 2024-04-06
+ * author: Ks Tan
+ */
+const props = defineProps<{
+  email?: string;
+  id?: string;
+  size: number;
+}>();
+
+</script>

package/templates/nuxt/components/image/ImageOrganization.vue.eta.vue

@@ -5,10 +5,12 @@
     class="w-20 h-20 place-content-center"
     @image-uploaded="handleBase64"
   >
-    <Image :src="imageData"></Image>
+    <Image v-if="imageData!=''" :src="imageData"></Image>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M21 10h-2V4h1V2H4v2h1v6H3a1 1 0 0 0-1 1v9h20v-9a1 1 0 0 0-1-1m-7 8v-4h-4v4H7V4h10v14z"/><path fill="black" d="M9 6h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z"/></svg>
   </ImageToBase64Uploader>
-  <div v-else class="inline-block border rounded-lg w-20 h-20">
-    <Image :src="imageData"></Image>
+  <div v-else class="inline-block border rounded-lg w-20 h-20 bg-white">
+    <Image v-if="imageData!=''" :src="imageData"></Image>
+    <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M21 10h-2V4h1V2H4v2h1v6H3a1 1 0 0 0-1 1v9h20v-9a1 1 0 0 0-1-1m-7 8v-4h-4v4H7V4h10v14z"/><path fill="black" d="M9 6h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z"/></svg>
   </div>
 </template>
 <script lang="ts" setup>
@@ -22,7 +24,7 @@ const handleBase64 = async (data: string) => {
     key: "organizationLogo",
     value: data,
   };
-  
+
   const uploadok = await useNuxtApp()
     .$OrganizationDoc()
     .getApi()
@@ -33,7 +35,7 @@ const handleBase64 = async (data: string) => {
 };
 const loadLogo = async () => {
   await refreshOrgLogo();
-  imageData.value = getOrgLogo();  
+  imageData.value = getOrgLogo();
 };
 
 onMounted(async () => await loadLogo());