@simitgroup/simpleapp-generator 1.2.8 → 1.3.0-alpha

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

@@ -1,160 +1,114 @@
+<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>
+
+
+      <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>
+          
+      
+      <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 everytime regenerate code.
- * delete file "delete-me-for-avoid-override" if you want to modify this file and
- * prevent regenerate code override it.
- * last change 2023-09-09
- * author: Ks Tan
- */
-import { SimpleAppInputType } from "~/types";
+
+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(getUserProfile().orgRecordId);
+  await doc.getById(orgId.value);
+  await fetchRecord()
 };
-const fetchRecord = async (id: string) => {
-  await doc.getById(id);
+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 ?? ""));
-const updateData = async () => {
-  doc
-    .update()
-    .then(() => {
-      refresh();
-      isReadOnly.value = true;
-    })
-    .catch((err) => {
-      console.error(err);
-    });
-};
 
-const refresh = () => {
-  $event("RefreshDocumentList", { documentName: doc.getDocName() });
-};
 
 definePageMeta({
   menuPath: "setting/organization",
 });
 
 //branch record update then reload
-$listen("RefreshDocumentList", (data) => {
-  console.log("refresh from branch", data.documentName, "==", doc.getDocName());
-  if (data.documentName == "branch") {
-    fetchRecord(id.value);
+$listen("RefreshDocumentList", async (data) => {
+  console.log("trigger RefreshDocumentList",data)
+  if (data.documentName == "branch" || data.documentName == "organization") {
+    await fetchRecord();
   }
 });
 
-if (id) {
-  fetchRecord(id.value);
+
+
+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>
-<template>
-  <div class="grid grid-cols-3">
-    <title>{{ t("organization") }}</title>
-    <div class="">
-      <Card>
-        <template #header><h1 class="text-2xl">Organization</h1></template>
-        <template #content>
-          <SimpleAppForm #default="o" :document="doc" :readonly="isReadOnly">
-            <div
-              class="simpleapp-tool-bar col-span-4 text-left gap-4"
-              v-if="canPerform(doc.getDocName(), 'update')"
-            >
-              <Button
-                v-if="isReadOnly"
-                class="btn btn-primary"
-                @click="isReadOnly = false"
-                type="button"
-                >Edit</Button
-              >
-              <Button
-                v-else
-                class="btn btn-primary"
-                @click="updateData"
-                type="button"
-                >Update</Button
-              >
-              <ConfirmPopup></ConfirmPopup>
-            </div>
-            <div class="flex flex-col">
-              <div class="grid grid-cols-2 gap-4">
-                <SimpleAppInput
-                  :input-type="SimpleAppInputType.text"
-                  autofocus
-                  v-model="data.orgCode"
-                  :setting="o.getField('#/properties/orgCode')"
-                />
-                <SimpleAppInput
-                  :input-type="SimpleAppInputType.text"
-                  v-model="data.orgName"
-                  class=""
-                  :setting="o.getField('#/properties/orgName')"
-                />
-                <SimpleAppInput
-                  :input-type="SimpleAppInputType.checkbox"
-                  v-model="data.active"
-                  :setting="o.getField('#/properties/active')"
-                />
-                <SimpleAppInput
-                  :input-type="SimpleAppInputType.text"
-                  v-model="data.timeZone"
-                  :setting="o.getField('#/properties/timeZone')"
-                />
-                <SimpleAppInput
-                  :input-type="SimpleAppInputType.text"
-                  v-model="data.currency"
-                  :setting="o.getField('#/properties/currency')"
-                />
-              </div>
-              <div>
-                <SimpleAppInput
-                  :input-type="SimpleAppInputType.textarea"
-                  :setting="o.getField('#/properties/description')"
-                  v-model="data.description"
-                />
-              </div>
-            </div>
-            <DebugDocumentData v-model="data" label="organization" />
-          </SimpleAppForm>
-        </template>
-      </Card>
-    </div>
-    <div>
-      <Card>
-        <template #header>
-          <!-- <h1 class="text-2xl font-bold">{{ data.orgName }}</h1> -->
-        </template>
-        <template #content>
-          <div class="">
-            <h1>Branches</h1>
-            <Button @click="goBranch('new')">New</Button>
-            <ListView
-              :list="branchlist"
-              title-field="branchName"
-              sub-title-field="branchCode"
-              :url="getDocumentUrl('organization', id)"
-            >
-            </ListView>
-          </div>
-        </template>
-      </Card>
-    </div>
-    <div>
-      <NuxtPage></NuxtPage>
-    </div>
-  </div>
-</template>

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

@@ -1,6 +1,40 @@
-<script setup lang="ts">
-import Index from './index.vue'
-</script>
 <template>
-  <index></index>
+  <Crud :_id="userid" @after="after" />
 </template>
+
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp everytime regenerate code.
+ * delete file "delete-me-for-avoid-override" if you want to modify this file and
+ * prevent regenerate code override it.
+ * last change 2023-09-09
+ * author: Ks Tan
+ */
+import Crud from "./form.vue";
+import { User } from "~/simpleapp/generate/types";
+const userid = computed(() => getPathPara("id"));
+const doc = useNuxtApp().$UserDoc();
+
+const props = defineProps<{ _id: string }>();
+const after = (actionName: string, data: User, result: any) => {
+  switch (actionName) {
+    case "new":
+      goTo(doc.getDocName(),);
+      break;
+    case "create":
+      refreshDocumentList("user");
+      if (isMobile()) goTo("user");
+      else goTo(doc.getDocName(), data._id);
+      break;
+    case "update":
+      refreshDocumentList("user");
+      if (isMobile()) goTo("user");
+      break;
+    case "delete":
+      refreshDocumentList("user");
+      goTo(doc.getDocName(), );
+
+      break;
+  }
+};
+</script>

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

@@ -0,0 +1,329 @@
+<template>
+    <div class="grid grid-cols-1 xl:grid-cols-2">
+        <div v-if="isMobile()"
+            class="flex flex-1 absolute w-full h h-16 z z-20 dark:bg-gray-900 place-items-center content-center">
+            <ButtonText @click="goTo('user')">{{ t("cancel") }}</ButtonText>
+            <TextTitle class="flex-1 text-center">{{userdata.fullName ?? t("user")}}</TextTitle>
+            <ButtonText @click="actionListener('update')">{{ t('save') }}</ButtonText>
+        </div>
+        <div v-else class="h h-16"></div>
+      <Card>
+        <template #header>
+          <h1 class="font-bold">{{ usertitle }}</h1>
+        </template>
+        <template #content>
+          <SimpleAppForm :document="userdoc" #default="o">
+            <div class="flex flex-col gap-2">
+              <SimpleAppInput
+                :input-type="SimpleAppInputType.text"
+                autofocus
+                :setting="o.getField('#/properties/fullName')"
+                v-model="userdata.fullName"
+              />
+  
+              <SimpleAppInput
+                :input-type="SimpleAppInputType.text"
+                type="email"
+                :setting="o.getField('#/properties/email')"
+                v-model="userdata.email"
+              />
+  
+              <SimpleAppInput
+                :input-type="SimpleAppInputType.checkbox"
+                :setting="o.getField('#/properties/active')"
+                v-model="userdata.active"
+              />
+              <SimpleAppInput
+                :input-type="SimpleAppInputType.textarea"
+                :setting="o.getField('#/properties/description')"
+                v-model="userdata.description"
+              />
+              <div>
+                <ButtonPrimary v-if="!isMobile()" @click="actionListener('update')">{{ t('save') }}</ButtonPrimary>
+                <ButtonDanger
+                  v-if="!userdata.uid"
+                  @click="actionListener('delete')"
+                  class="btn btn-danger"
+                  >{{ t('delete') }}</ButtonDanger
+                >
+              </div>
+            </div>
+          </SimpleAppForm>
+        </template>
+      </Card>
+  
+      <Card class="m-2">
+        <template #header>
+          <div class="relative w-full ...">
+            <h1 class="font-bold">{{ permissiontitle }}</h1>
+            <div class="absolute top-0 right-0 h-16 w-16 ...">
+              <UserButtonPermissionInfo></UserButtonPermissionInfo>
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <BlockUI :blocked="blockscreen">
+            <!-- <div class="text-right m mr-2">
+              
+            </div> -->
+  
+            <div class="">
+              <Card
+                v-if="currentpermissions.length > 0"
+                v-for="o in orglist"
+                class="m-2"
+              >
+                <template #title>{{ o.orgName }}</template>
+                <template #content>
+                  <table class="w w-full">
+                    <tr v-for="(b, index) in branchlist">
+                      <td v-if="checkBranchInOrg(o, b)" class="text-center">
+                        {{ b.branchCode }}
+                      </td>
+                      <td
+                        v-if="checkBranchInOrg(o, b)"
+                        class="text-center flex flex-row"
+                      >
+                        <div>
+                          <SelectButton
+                            v-model="currentpermissions[index]['group']"
+                            :options="grouplist"
+                            option-label="label"
+                            option-value="value"
+                            @change="applyPermission(currentpermissions[index])"
+                          ></SelectButton>
+                        </div>
+                      </td>
+                    </tr>
+                  </table>
+                </template>
+              </Card>
+            </div>
+          </BlockUI>
+        </template>
+      </Card>
+    </div>
+  </template>
+  <script setup lang="ts">
+  // import Card from "primevue/card";
+  import { SimpleAppInputType } from "~/types";
+  import { Permission, User } from "../../../simpleapp/generate/openapi/api";
+  import _ from "lodash";
+  import SelectButton from "primevue/selectbutton";
+  import { SearchBody, EventType } from "~/types";
+  import {
+    UserListItem,
+    NotificationStatus,
+    Notification,
+    BranchListItem,
+    OrgListItem,
+    PermissionListItem,
+  } from "~/types";
+  const {
+    $event,
+    $PermissionDoc,
+    $OrganizationDoc,
+    $BranchDoc,
+    $UserDoc,
+    // $InvitationDoc,
+  } = useNuxtApp();
+  const emits = defineEmits(['after'])
+  const props = defineProps<{_id:string}>()
+  const userdoc = $UserDoc();
+  const userdata = userdoc.getReactiveData();
+  const currentpermissions = ref<Permission[]>([]);
+  currentpermissions.value = [];
+  const blockscreen = ref(false);
+  const permlist = ref<PermissionListItem[]>([]);
+  // const userlist = ref<UserListItem[]>([]);
+  const orglist = ref<OrgListItem[]>([]);
+  const branchlist = ref<BranchListItem[]>([]);
+  const permdoc = $PermissionDoc();
+  const orgdoc = $OrganizationDoc();
+  const branchdoc = $BranchDoc();
+  const permissiontitle = "Permission Information";
+  const usertitle = "User Information";
+  const grouplist = getAllGroups().map((item) => {
+    return { value: item, label: _.capitalize(item) };
+  });
+  
+
+const newData = () => userdoc.setNew();
+const createData = async () => await userdoc.create();
+const updateData = async () => await userdoc.update();
+const deleteData = async () => await userdoc.delete(userdata.value._id ?? "");
+
+
+  /**
+   * delete user
+   * @param user:User object
+   */
+  const deleteUser = async (user: any) => {
+    await userdoc.delete(String(userdata.value._id));
+    //NotificationEvent
+    $event("RefreshUser", "");
+    goTo("user");
+  };
+  
+  /**********applPermission ******/
+  /**
+   * apply permission:
+   * _id:'', group:'' => skip
+   * _id: '', group:'something' => create
+   * _id:'something', 'group':'something' => update
+   * _id:'something', group:'' => remove
+   */
+  const applyPermission = async (d: Permission) => {
+    let result;
+    // console.log("apply permission", d);
+    blockscreen.value = true;
+    d._id = String(d._id ?? "");
+    d.group = String(d.group ?? "");
+    permdoc.setNew();
+    const data = permdoc.getReactiveData();
+    data.value = {
+      orgId: d.orgId,
+      branchId: d.branchId,
+      group: d.group,
+      userId: d.userId,
+    };
+    // console.log("apply permission", data.value);
+    if (!d._id && !d.group) {
+      //no changes
+    } else if (!d._id && d.group) {
+      result = await permdoc.create();
+    } else if (d._id && d.group) {
+      data.value = d;
+      result = await permdoc.update();
+    } else if (d._id && !d.group) {
+      d.group = "";
+      data.value = d;
+      result = await permdoc.delete(d._id);
+    } else {
+      console.warn("unknown apply permission", result);
+    }
+    //   refreshList(false);
+    onSelectUser(String(d.userId));
+    blockscreen.value = false;
+  };
+  
+  const checkBranchInOrg = (org: OrgListItem, branch: BranchListItem) => {
+    return org.orgId === branch.orgId;
+  };
+  
+  
+  const onSelectUser = async (userId: string) => {
+    console.log("onSelectUser", userId);
+    // .addRoute()
+    // const user: UserListItem = { ...menuitem };
+    const orgsearchbody: SearchBody = {
+      fields: ["orgId", "orgCode", "orgName", "active"],
+    };
+    const branchsearchbody: SearchBody = {
+      fields: ["orgId", "branchId", "branchCode", "branchName", "active"],
+    };
+    const permsearchbody: SearchBody = {
+      filter: { userId: userId },
+      fields: [
+        "uid",
+        "userId",
+        "branchId",
+        "tenantId",
+        "orgId",
+        "active",
+        "group",
+        "created",
+      ],
+    };
+  
+    orglist.value = await orgdoc.search(orgsearchbody);
+    branchlist.value = await branchdoc.search(branchsearchbody);
+    permlist.value = await permdoc.search(permsearchbody);
+    await userdoc.getById(userId);
+    // console.log("orglist.value", orglist.value);
+    // console.log("branchlist.value", branchlist.value);
+    // console.log("permlist.value", permlist.value);
+    // selected.value = String(user._id);
+  
+    // activeuser.value = user.fullName;
+    //sso id from keycloak
+    // const uid = String(user.uid);
+    //_id from mongodb
+  
+    currentpermissions.value = [];
+  
+    for (let i = 0; i < branchlist.value.length; i++) {
+      const b = branchlist.value[i];
+      const permdata = getPermssionData(userId, b.branchId);
+      const tmp: Permission = {
+        _id: permdata?._id,
+        userId: userId,
+        tenantId: b.tenantId,
+        orgId: b.orgId,
+        branchId: b.branchId,
+        group: permdata.group,
+      };
+      currentpermissions.value.push(tmp);
+    }
+    // console.log("currentpermissions", currentpermissions);
+    blockscreen.value = false;
+    
+  };
+  /**
+   * prepare dataobj (existing or empty dummy data) for each branch permission
+   * @param uid
+   * @param branchId
+   */
+  const getPermssionData = (userId: string, branchId: number) => {
+    // console.log("getPermssionData", userId, branchId);
+    const result = permlist.value.find((item: any) => {
+      // console.log(
+      //   item.userId,
+      //   "== ",
+      //   userId,
+      //   " &&",
+      //   item.branchId,
+      //   "==",
+      //   branchId,
+      // );
+      return item.userId == userId && item.branchId == branchId;
+    });
+  
+    //  console.log("permlist.value.",permlist.value,result)
+    let pm: Permission = {
+      _id: result?._id ?? "",
+      orgId: result?.orgId ?? 0,
+      tenantId: result?.tenantId ?? 0,
+      branchId: branchId,
+      userId: userId,
+      group: result?.group ?? "",
+    };
+    return pm;
+  };
+  
+
+  const actionListener = async (actionName: string) => {
+  switch (actionName) {
+    case "create":
+      await createData();
+      break;
+    case "update":
+      await updateData();
+      break;
+    case "delete":
+      await deleteData();
+      break;
+    case "new":
+      await newData();
+      break;
+  }
+  emits("after", actionName);
+};
+
+
+
+  onMounted(() => {    
+    onSelectUser(props._id);
+  });
+  </script>
+