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

package/templates/nuxt/pages/[xorg]/mobile/organization/index.vue.eta

@@ -0,0 +1,138 @@
+<template>
+  
+  <div class="w-full flex-col flex">
+    <title>{{ t("organization") }}</title>
+    <MobileToolbar class="bg-gray-600">
+      <template #center><TextTitle class="text-white">{{ t("organization") }}</TextTitle></template>
+      <template #end>
+        <ButtonText @click="showEditOrg = true" class="text-white"
+          ><i class="pi pi-pencil"></i
+        ></ButtonText>
+      </template>
+    </MobileToolbar>
+    
+    <div class="w-full flex flex-row p-2 border-b border-gray-300 ">
+      <div class="p-4">
+        <div class="border w-12 h-12 md:w-24 md:h24"></div>
+      </div>
+      <div class="flex flex-col flex-1 ">
+        <TextTitle>{{ data.orgName }} / {{ data.orgCode }}</TextTitle>
+        <TextSubtitle>
+          {{ data.description }}
+        </TextSubtitle>        
+      </div>
+    </div>
+
+    <div class="w-full p-2 flex flex-col ">
+      
+      <div class="flex flex-row justify-end">
+        <TextTitle class="flex-1 p-2">{{ t('branches') }}</TextTitle>
+        <div>
+          <ButtonPrimary @click="goBranch('new')">
+            <i class="pi pi-plus"></i> <span>{{ t("addBranches") }}</span>
+          </ButtonPrimary>
+        </div>
+      </div>
+      <ListView class="border rounded-lg border-gray-400 dark:border-gray-600"        
+        :list="branchlist"
+        title-field="branchName"
+        sub-title-field="branchCode"
+        :url="getDocumentUrl('organization', id)"
+        #default="{item}"
+      >
+        <div class="flex flex-row">
+          <div class="flex-col flex flex-1">
+            <TextPrimary>{{ item.branchName }}</TextPrimary>
+            <TextSubtitle>{{ item.description }}</TextSubtitle>
+          </div>
+          <div class="flex-col flex text-right">
+            <div>{{ item.branchCode }}</div>
+            <renderer-boolean v-model="item.active"></renderer-boolean>
+          </div>
+        </div>
+      
+      </ListView>
+    </div>
+
+    <OverlaySideBarCrud v-model="showEditOrg" close-event-name="organization">
+      <FormOrganization
+        :_id="getUserProfile()?.orgRecordId"
+        @after="afterOrganization"
+      ></FormOrganization>
+    </OverlaySideBarCrud>
+
+    <OverlaySideBarCrud v-model="showEditBranch" close-event-name="branch">
+      <NuxtPage :_id="id"></NuxtPage>
+    </OverlaySideBarCrud>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator. Every
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2023-10-28
+ * Author: Ks Tan
+ */
+import { FormCrudEvent, SimpleAppInputType } from "~/types";
+import ConfirmPopup from "primevue/confirmpopup";
+import { useConfirm } from "primevue/useconfirm";
+const confirm = useConfirm();
+const showEditOrg = ref<boolean>(false);
+const showEditBranch = ref<boolean>(false);
+
+const { $OrganizationDoc, $BranchDoc, $event, $listen } = useNuxtApp();
+
+const orgId = computed(() => <string>getUserProfile()?.orgRecordId);
+const doc = $OrganizationDoc();
+const brancdoc = $BranchDoc();
+const data = doc.getReactiveData();
+const branchlist = ref([]);
+const isReadOnly = ref(true);
+const getCurrentOrg = async () => {
+  await doc.getById(orgId.value);
+  await fetchRecord();
+};
+const fetchRecord = async () => {
+  //fetch org
+  // await doc.getById(data.value.orgId);
+  //fetch branch
+  branchlist.value = await brancdoc.search({
+    filter: { orgId: data.value.orgId },
+  });
+
+  console.log("reload data", branchlist);
+};
+
+const id = computed((): string => String(useRoute().params.id ?? ""));
+
+definePageMeta({
+  menuPath: "setting/organization",
+});
+
+//branch record update then reload
+$listen("RefreshDocumentList", async (data) => {
+  console.log("trigger RefreshDocumentList", data);
+  if (data.documentName == "branch" || data.documentName == "organization") {
+    await fetchRecord();
+  }
+});
+
+const showBranchDialogIfRequired = () => {
+  if (useRoute().path.includes("/new") || id.value) showEditBranch.value = true;
+};
+
+const afterOrganization = (actionName: FormCrudEvent) => {
+  if (actionName == FormCrudEvent.update) {
+    showEditOrg.value = false;
+    getCurrentOrg();
+  }
+};
+
+watch(
+  () => useRoute().path,
+  () => showBranchDialogIfRequired(),
+);
+onMounted(() => showBranchDialogIfRequired());
+getCurrentOrg();
+</script>

package/templates/nuxt/pages/[xorg]/mobile/pickgroup.vue._eta

@@ -0,0 +1,35 @@
+<template>
+    <div class="flex flex-col w-full gap-4 p-4">
+      <TextTitle class="text-center">{{ t("pickGroup") }}</TextTitle>
+      <div v-for="(groupName, index) in getUserProfile()?.groups" :key="index">
+        <div
+          class="border rounded-lg bg-primary-500 text-white p-4 text-center"
+          @click="pickGroup(groupName)"
+        >
+          {{ t(groupName) }}
+        </div>
+      </div>    
+    </div>
+  </template>
+  <script lang="ts" setup>
+  /**
+   * This file was automatically generated by simpleapp generator during initialization. It is changable.
+   * --remove-this-line-to-prevent-override--
+   * last change 2024-04-09
+   * author: Ks Tan
+   */
+  const pickGroup = async (groupName: string) => {
+      try{        
+          useCookie('currentGroup').value= groupName
+          localStorage.setItem('currentGroup',groupName)
+          useNuxtApp().$userstore.currentGroup = groupName;
+          useNuxtApp().$event("pickGroup", groupName);
+          goTo("");
+      }catch(e){
+          alert("something wrong")
+          console.error(e)
+      }
+    
+  };
+  </script>
+  

package/templates/nuxt/pages/[xorg]/mobile/user/index.vue.eta

@@ -0,0 +1,231 @@
+<template>
+  <div class="w-full flex flex-col p-3">
+
+  
+    <div><TextTitle>{{ t('user') }}</TextTitle></div>
+    <div class="flex flex-row w-full ">
+      <title>{{ t("user") }}</title>    
+      
+      <div class="w-full md:w-1/2 xl:w-1/3">
+        <TabView>
+          <TabPanel header="Active">
+            <ul role="list" class="divide-y divide-gray-100">
+              <li v-for="item in userlist" :key="item.email">
+                <NuxtLink
+                  v-if="item.uid && item.active"
+                  :to="getDocumentUrl('user', item._id)"
+                >
+                  <UserProfileListItem :data="item"></UserProfileListItem>
+                </NuxtLink>
+              </li>
+            </ul>
+          </TabPanel>
+          <TabPanel header="Inactive">
+            <ul role="list" class="divide-y divide-gray-100">
+              <li v-for="item in userlist" :key="item.email">
+                <NuxtLink
+                  v-if="item.uid && !item.active"
+                  :to="getDocumentUrl('user', item._id)"
+                >
+                  <UserProfileListItem :data="item"></UserProfileListItem>
+                </NuxtLink>
+              </li>
+            </ul>
+          </TabPanel>
+          <TabPanel header="Invite">
+            <div class="padding p-2">
+              <form @submit.prevent="true" class="w-full">
+                <div class="p-inputgroup flex flex-row">
+                  <InputText
+                    class="flex-1"
+                    type="email"
+                    placeholder="email"
+                    v-model="inviteemail"
+                  />
+                  <div class="p-inputgroup-addon p p-0">
+                    <button
+                      label="Search"
+                      class="border rounded-tl-none rounded-bl-none btn btn-primary -ml-1 h-full p-3 rounded-r-md"
+                      @click="invite"
+                    >
+                      Invite
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <ul role="list" class="divide-y divide-gray-100">
+              <li v-for="item in userlist" :key="item.email">
+                <NuxtLink v-if="!item.uid" :to="getDocumentUrl('user', item._id)">
+                  <UserProfileListItem :data="item"></UserProfileListItem>
+                </NuxtLink>
+              </li>
+            </ul>
+          </TabPanel>
+        </TabView>
+      </div>
+      <div v-if="!isMobile()" class="flex-1">
+        <NuxtPage :_id="userid" />
+      </div>
+      <OverlaySideBarCrud
+        v-if="dialogvisible"
+        v-model="dialogvisible"
+        closeEventName="user"
+      >
+        <NuxtPage :_id="userid" />
+      </OverlaySideBarCrud>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator. Every
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2023-10-28
+ * Author: Ks Tan
+ */
+// import userchild from './userchild.vue'
+import Menu from "primevue/menu";
+import Dialog from "primevue/dialog";
+import { SearchBody, EventType, UserProfile } from "~/types";
+import _ from "lodash";
+import Panel from "primevue/panel";
+import { ref } from "vue";
+import {
+  UserListItem,
+  BranchListItem,
+  OrgListItem,
+  PermissionListItem,
+} from "~/types";
+import SelectButton from "primevue/selectbutton";
+import Button from "primevue/button";
+import InputText from "primevue/inputtext";
+import Card from "primevue/card";
+import TabView from "primevue/tabview";
+import TabPanel from "primevue/tabpanel";
+import { Permission, User } from "~/simpleapp/generate/openapi/api";
+import BlockUI from "primevue/blockui";
+const dialogvisible = ref(false);
+//initialize api
+const {
+  $listen,
+  $PermissionDoc,
+  $OrganizationDoc,
+  $BranchDoc,
+  $UserDoc,
+  // $InvitationDoc,
+} = useNuxtApp();
+const userid = computed(() => getPathPara("id"));
+const permdoc = $PermissionDoc();
+const orgdoc = $OrganizationDoc();
+const branchdoc = $BranchDoc();
+// const invitedoc = $InvitationDoc();
+const userdoc = $UserDoc();
+const userdata = userdoc.getReactiveData();
+//initialize require list in UI
+const permlist = ref<PermissionListItem[]>([]);
+const userlist = ref<UserListItem[]>([]);
+const orglist = ref<OrgListItem[]>([]);
+const branchlist = ref<BranchListItem[]>([]);
+const currentpermissions = ref<Permission[]>([]);
+const grouplist = getAllGroups().map((item) => {
+  return { value: item, label: _.capitalize(item) };
+});
+
+//initialize some runtime variable
+const blockscreen = ref(false);
+const inviteemail = ref("");
+const selected = ref("");
+const activeuser = ref("");
+const showpermissioninfo = ref(false);
+const permissionselected = ref();
+
+const selectUser = (user: any) => {
+  // goTo('user',user._id)
+};
+
+/**
+ * 1. get all users from this tenant
+ * @param resetpage after reload, will it reset user interface or remain as current
+ */
+const refreshList = async (resetpage: boolean = true) => {
+  const items: any[] = [];
+  const searchbody: SearchBody = {
+    fields: [
+      "uid",
+      "email",
+      "created",
+      "fullName",
+      "active",
+      "lastActivity",
+      "description",
+    ],
+  };
+  userlist.value = await userdoc.search(searchbody);
+  //listUser();
+  // userlist.value = _.uniqBy(permlist.value, "uid");
+  if (resetpage) {
+    selected.value = "";
+    activeuser.value = "";
+  }
+  blockscreen.value = false;
+  // console.log("userlist", userlist.value);
+};
+
+/**
+ * identity branch object under org
+ * @param org object of org
+ * @param branch object of branch
+ */
+
+/**
+ * generate dialog for view each user group have what permission
+ */
+const previewPermission = () => {
+  showpermissioninfo.value = true;
+};
+
+/***** send or remove invitation  ******/
+
+const invite = async () => {
+  // const invitedata:User = {}
+  const currentuser = getUserProfile();
+  const inviteuserdoc = $UserDoc();
+  inviteuserdoc.setNew();
+  const newuserdata = inviteuserdoc.getReactiveData();
+  newuserdata.value.email = inviteemail.value;
+  newuserdata.value.fullName = inviteemail.value.split("@")[0];
+  newuserdata.value.active = true;
+  newuserdata.value.tenantId = currentuser?.tenantId;
+  newuserdata.value.orgId = currentuser?.orgId;
+  newuserdata.value.branchId = currentuser?.branchId;
+
+  const invitedata = await inviteuserdoc.create();
+  inviteemail.value = "";
+  await refreshList();
+  // onSelectUser(invitedata);
+};
+
+const showDialogIfNeeded = () => {
+  if (isMobile()) {
+    if (userid.value != "") dialogvisible.value = true;
+    else dialogvisible.value = false;
+  }
+};
+watch(
+  () => useRoute().path,
+  () => showDialogIfNeeded(),
+);
+$listen("RefreshDocumentList", async () => {
+  await refreshList();
+});
+onMounted(async () => {
+  await refreshList();
+  showDialogIfNeeded();
+});
+
+definePageMeta({
+  menuPath: "setting/user",
+});
+</script>

package/templates/nuxt/pages/[xorg]/organization.vue.eta

@@ -1,47 +1,69 @@
 <template>
-  <title>{{ t("organization") }}</title>
-  <div class="w-full flex-col flex">     
-      <MobileToolbar>
-        <template #center>{{ t('organization') }}</template>
-        <template #end>
-          <ButtonText @click="showEditOrg=true"><i class="pi pi-pencil"></i></ButtonText>
-        </template>
-      </MobileToolbar>
-      <div class="w-full flex flex-row p-2">        
-        <div class="p-4">
-            <div class="border w-12 h-12 md:w-24 md:h24"></div>
-        </div>
-        <div class="flex flex-col flex-1 ">
-            <TextTitle>{{ data.orgName }} / {{ data.orgCode }}</TextTitle>            
-            <div class="text-gray-600 dark:text-gray-400 text-sm">{{ data.description }}</div>
-            <div class="text-gray-600 dark:text-gray-400 text-sm">
-              {{ data.country }}/{{ data.currency }}/{{ data.timeZone }}//{{ data.offsetMinute }}
-            </div>
-            
-        </div>
+  
+  <div class="w-full flex-col flex">
+    <title>{{ t("organization") }}</title>
+    <MobileToolbar class="bg-gray-600">
+      <template #center><TextTitle class="text-white">{{ t("organization") }}</TextTitle></template>
+      <template #end>
+        <ButtonText @click="showEditOrg = true" class="text-white"
+          ><i class="pi pi-pencil"></i
+        ></ButtonText>
+      </template>
+    </MobileToolbar>
+    
+    <div class="w-full flex flex-row p-2 border-b border-gray-300 ">
+      <div class="p-4">
+        <div class="border w-12 h-12 md:w-24 md:h24"></div>
       </div>
+      <div class="flex flex-col flex-1 ">
+        <TextTitle>{{ data.orgName }} / {{ data.orgCode }}</TextTitle>
+        <TextSubtitle>
+          {{ data.description }}
+        </TextSubtitle>        
+      </div>
+    </div>
 
-
-      <div class="w-full p-2">
-          <h1>Branches</h1>
-          <ButtonText @click="goBranch('new')">{{ t('addBranch') }}</ButtonText>
-          <ListView
-            :list="branchlist"
-            title-field="branchName"
-            sub-title-field="branchCode"
-            :url="getDocumentUrl('organization', id)"
-          >            
-          </ListView>          
+    <div class="w-full p-2 flex flex-col ">
+      
+      <div class="flex flex-row justify-end">
+        <TextTitle class="flex-1 p-2">{{ t('branches') }}</TextTitle>
+        <div>
+          <ButtonPrimary @click="goBranch('new')">
+            <i class="pi pi-plus"></i> <span>{{ t("addBranches") }}</span>
+          </ButtonPrimary>
+        </div>
       </div>
-          
+      <ListView class="border rounded-lg border-gray-400 dark:border-gray-600"        
+        :list="branchlist"
+        title-field="branchName"
+        sub-title-field="branchCode"
+        :url="getDocumentUrl('organization', id)"
+        #default="{item}"
+      >
+        <div class="flex flex-row">
+          <div class="flex-col flex flex-1">
+            <TextPrimary>{{ item.branchName }}</TextPrimary>
+            <TextSubtitle>{{ item.description }}</TextSubtitle>
+          </div>
+          <div class="flex-col flex text-right">
+            <div>{{ item.branchCode }}</div>
+            <renderer-boolean v-model="item.active"></renderer-boolean>
+          </div>
+        </div>
       
-      <OverlaySideBarCrud v-model="showEditOrg" close-event-name="organization">
-        <FormOrganization :_id="getUserProfile()?.orgRecordId" @after="afterOrganization"></FormOrganization> 
-      </OverlaySideBarCrud>
-
-      <OverlaySideBarCrud v-model="showEditBranch" close-event-name="branch">
-        <NuxtPage :_id="id"></NuxtPage> 
-      </OverlaySideBarCrud>
+      </ListView>
+    </div>
+
+    <OverlaySideBarCrud v-model="showEditOrg" close-event-name="organization">
+      <FormOrganization
+        :_id="getUserProfile()?.orgRecordId"
+        @after="afterOrganization"
+      ></FormOrganization>
+    </OverlaySideBarCrud>
+
+    <OverlaySideBarCrud v-model="showEditBranch" close-event-name="branch">
+      <NuxtPage :_id="id"></NuxtPage>
+    </OverlaySideBarCrud>
   </div>
 </template>
 
@@ -56,12 +78,12 @@ import { FormCrudEvent, SimpleAppInputType } from "~/types";
 import ConfirmPopup from "primevue/confirmpopup";
 import { useConfirm } from "primevue/useconfirm";
 const confirm = useConfirm();
-const showEditOrg = ref<boolean>(false)
-const showEditBranch = ref<boolean>(false)
+const showEditOrg = ref<boolean>(false);
+const showEditBranch = ref<boolean>(false);
 
 const { $OrganizationDoc, $BranchDoc, $event, $listen } = useNuxtApp();
 
-const orgId = computed(()=><string>getUserProfile()?.orgRecordId)
+const orgId = computed(() => <string>getUserProfile()?.orgRecordId);
 const doc = $OrganizationDoc();
 const brancdoc = $BranchDoc();
 const data = doc.getReactiveData();
@@ -69,7 +91,7 @@ const branchlist = ref([]);
 const isReadOnly = ref(true);
 const getCurrentOrg = async () => {
   await doc.getById(orgId.value);
-  await fetchRecord()
+  await fetchRecord();
 };
 const fetchRecord = async () => {
   //fetch org
@@ -79,41 +101,38 @@ const fetchRecord = async () => {
     filter: { orgId: data.value.orgId },
   });
 
-  console.log("reload data",branchlist)
+  console.log("reload data", branchlist);
 };
 
 const id = computed((): string => String(useRoute().params.id ?? ""));
 
-
 definePageMeta({
   menuPath: "setting/organization",
 });
 
 //branch record update then reload
 $listen("RefreshDocumentList", async (data) => {
-  console.log("trigger RefreshDocumentList",data)
+  console.log("trigger RefreshDocumentList", data);
   if (data.documentName == "branch" || data.documentName == "organization") {
     await fetchRecord();
   }
 });
 
+const showBranchDialogIfRequired = () => {
+  if (useRoute().path.includes("/new") || id.value) showEditBranch.value = true;
+};
 
-
-const showBranchDialogIfRequired = () =>{
-  if(useRoute().path.includes('/new') || id.value) showEditBranch.value=true
-}
-
-const afterOrganization = (actionName:FormCrudEvent)=>{
-  if(actionName==FormCrudEvent.update){
-    showEditOrg.value=false
-    getCurrentOrg()
+const afterOrganization = (actionName: FormCrudEvent) => {
+  if (actionName == FormCrudEvent.update) {
+    showEditOrg.value = false;
+    getCurrentOrg();
   }
-}
+};
 
-watch(()=>useRoute().path,()=>showBranchDialogIfRequired())
-onMounted(()=>showBranchDialogIfRequired())
+watch(
+  () => useRoute().path,
+  () => showBranchDialogIfRequired(),
+);
+onMounted(() => showBranchDialogIfRequired());
 getCurrentOrg();
-
-
-
 </script>

package/templates/nuxt/pages/[xorg]/pickgroup.vue._eta

@@ -0,0 +1,35 @@
+<template>
+    <div class="flex flex-col w-full gap-4 p-4">
+      <TextTitle class="text-center">{{ t("pickGroup") }}</TextTitle>
+      <div v-for="(groupName, index) in getUserProfile()?.groups" :key="index">
+        <div
+          class="border rounded-lg bg-primary-500 text-white p-4 text-center"
+          @click="pickGroup(groupName)"
+        >
+          {{ t(groupName) }}
+        </div>
+      </div>    
+    </div>
+  </template>
+  <script lang="ts" setup>
+  /**
+   * This file was automatically generated by simpleapp generator during initialization. It is changable.
+   * --remove-this-line-to-prevent-override--
+   * last change 2024-04-09
+   * author: Ks Tan
+   */
+  const pickGroup = async (groupName: string) => {
+      try{        
+          useCookie('currentGroup').value= groupName
+          localStorage.setItem('currentGroup',groupName)
+          useNuxtApp().$userstore.currentGroup = groupName;
+          useNuxtApp().$event("pickGroup", groupName);
+          goTo("");
+      }catch(e){
+          alert("something wrong")
+          console.error(e)
+      }
+    
+  };
+  </script>
+