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

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());

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

@@ -1,73 +1,90 @@
 <template>
-  <button
+  <div
     @click="openUploadDialog"
     :title="selectedBase64Img"
-    class="place-content-center image-to-base64-uploader rounded-lg border block"
+    class="vvv place-content-center image-to-base64-uploader rounded-lg border block"
   >
-    <slot name="default">
-      <Image v-if="selectedBase64Img" :src="selectedBase64Img" />
-      <i v-else class="pi pi-upload text-3xl"></i>
-    </slot>
+    <ClientOnly>
+      <slot name="default">
+        <Image v-if="selectedBase64Img" :src="selectedBase64Img" />
+        <i v-else class="pi pi-upload text-3xl"></i>
+      </slot>
 
-    <Dialog
-      v-model:visible="dialogVisible"
-      header="Image Upload"
-      :pt="{ root: { class: 'w-4/5' } }"
-    >
-      <div class="upload-container">
-        <input
-          type="file"
-          ref="fileInput"
-          accept="image/*"
-          @change="handleImageUpload"
-        />
-        <div id="preview" v-if="scaledImage" class="w-7/8">
-          <Cropper
-            ref="cropperInstance"
-            :src="scaledImage"
-            :stencil-props="{ aspectRatio: 1 }"
-            :options="cropperOptions"
-            @change="changeChropper"
-          />
-          <!-- :maxWidth="50" 
-					  :maxHeight="50" -->
+      <Dialog
+        v-if="dialogVisible"
+        v-model:visible="dialogVisible"
+        header="Image Upload"
+        :pt="{ root: { class: 'w-4/5' } }"
+      >
+        <div class="w-full grid grid-cols-2 gap-2">
+          <div class="w-7/8 border rounded p-4">
+            <TabView lazy>
+              <TabPanel :header="t('upload')">
+                <div class="upload-container">
+                  <input
+                    type="file"
+                    ref="fileInput"
+                    accept="image/*"
+                    @change="handleImageUpload"
+                  />
+                </div>
+              </TabPanel>
+              <TabPanel :header="t('webcam')">
+                <div class="webcam-container h h-1/6">
+                  <WebCamUI :fullscreenState="false" @photoTaken="photoTaken" />
+                </div>
+              </TabPanel>
+            </TabView>
+          </div>
+          <div id="preview" class="w-7/8 border rounded p-4">
+            <Cropper
+              v-if="scaledImage"
+              ref="cropperInstance"
+              :src="scaledImage"
+              :stencil-props="{ aspectRatio: 1 }"
+              :options="cropperOptions"
+              @change="changeChropper"
+            />
+          </div>
         </div>
-      </div>
-      <template #footer>
-        <div class="flex flex-row gap-4">
-          <ButtonWarning @click="dialogVisible = false">{{
-            t("cancel")
-          }}</ButtonWarning>
-          <ButtonPrimary @click="confirm">{{ t("confirm") }}</ButtonPrimary>
-        </div>
-      </template>
-    </Dialog>
-  </button>
+
+        <template #footer>
+          <div class="flex flex-row gap-4">
+            <ButtonDefault @click="dialogVisible = false">{{
+              t("cancel")
+            }}</ButtonDefault>
+            <ButtonPrimary @click="confirm">{{ t("confirm") }}</ButtonPrimary>
+          </div>
+        </template>
+      </Dialog>
+    </ClientOnly>
+  </div>
 </template>
 
 <script setup lang="ts">
-/**
- * This file was automatically generated by simpleapp generator during initialization. 
- * IT IS NOT CHANGABLE
- * last change 2024-04-06
- * author: Ks Tan
- */
 // Assuming the Dialog component and Cropper component are globally available or imported in a parent component
-import { defineEmits } from "vue";
+// import { defineEmits } from "vue";
+import { WebCamUI } from "vue-camera-lib";
+import VueCameraLib from "vue-camera-lib";
+
 // import Cropper from 'cropperjs'; // Assuming CropperJS is installed using a package manager
 import { Cropper } from "vue-advanced-cropper";
 import "vue-advanced-cropper/dist/style.css";
+
 const selectedBase64Img = ref("");
 const cropedBase64Img = ref("");
 const dialogVisible = ref(false);
 const previewImage = ref<string | null>(null);
 const scaledImage = ref<string | null>(null);
-const image = ref<string | null>(null);
-
+// const image = ref<string | null>(null);
 const emit = defineEmits<{
   (event: "image-uploaded", imageData: string): void;
 }>();
 
+// Use camera reference to call functions
+const photoTaken = (data: any) => {
+  scaledImage.value = data.image_data_url;
+};
 const openUploadDialog = () => {
   dialogVisible.value = true;
 };
@@ -79,8 +96,8 @@ const handleImageUpload = (event) => {
     reader.onload = (e) => {
       const img = new Image();
       img.onload = () => {
-        const maxWidth = 800; // Set your desired maximum width
-        const maxHeight = 600; // Set your desired maximum height
+        const maxWidth = 400; // Set your desired maximum width
+        const maxHeight = 300; // Set your desired maximum height
         const scale = Math.min(maxWidth / img.width, maxHeight / img.height);
         const scaledWidth = img.width * scale;
         const scaledHeight = img.height * scale;

package/templates/nuxt/components/list/ListDocumentTable.vue.eta

@@ -1,5 +1,6 @@
 <template>
   <DataTable
+    ref="documentlisttable" 
     v-bind="$attrs"
     stripedRows
     dataKey="_id"
@@ -29,15 +30,17 @@
             </h1>
           </slot>
         </div>
-        <span class="p-input-icon-left flex-1">
-          
+        <div class="p-input-icon-left gap-2 flex flex-row">
+          <ButtonPrimary @click="exportData">
+            <i class="pi pi-external-link"/>
+          </ButtonPrimary>
           <InputText
             type="search"
             v-model="filters['global'].value"
             class="w-full dark:text-white text-sm"
             placeholder="Keyword Search"
           />
-        </span>
+        </div>
       </div>
     </template>
     <!-- no data found -->
@@ -46,10 +49,10 @@
         <div class="text-3xl text-gray-400 pi pi-exclamation-circle"></div>
         <div class="text-3xl text-gray-400">{{ t("noDataFound") }}</div>
       </div>
-    </template>    
-      <slot name="default">
-        <Column header="undefineColumns"></Column>
-      </slot>    
+    </template>
+    <slot name="default">
+      <Column header="undefineColumns"></Column>
+    </slot>
   </DataTable>
 </template>
 <script setup lang="ts" generic="T">
@@ -65,18 +68,23 @@ import DataTable from "primevue/datatable";
 import Column from "primevue/column";
 import renderComponent from "~/components/renderer";
 import { emit } from "process";
+import ButtonPrimary from "../button/ButtonPrimary.vue";
+const documentlisttable = ref()
 const props = defineProps<{
-  value: T[]
-  title: string
-  columns: string[]
-  uniqueKey: string
-  documentTitle: string
+  value: T[];
+  title: string;
+  columns: string[];
+  uniqueKey: string;
+  documentTitle: string;
 }>();
 const emits = defineEmits(["selectRow"]);
 const clickRow = (eventdata: any) => {
   emits("selectRow", eventdata.data);
 };
 
+const exportData = ()=>{
+  documentlisttable.value.exportCSV()
+}
 const filters = ref({
   global: { value: null, matchMode: FilterMatchMode.CONTAINS },
 });