@simitgroup/simpleapp-generator 1.0.32 → 1.0.35

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

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import Menu from "primevue/menu";
+import Dialog from "primevue/dialog";
+import _ from "lodash";
+import Panel from "primevue/panel";
+import { ref } from "vue";
+import {
+  UserListItem,
+  BranchListItem,
+  OrgListItem,
+  InvitationListItem,
+  PermissionListItem,
+} from "../../../types";
+import SelectButton from "primevue/selectbutton";
+import Button from "primevue/button";
+import InputText from "primevue/inputtext";
+
+import TabView from "primevue/tabview";
+import TabPanel from "primevue/tabpanel";
+import { Permission } from "../../../simpleapp/generate/openapi/api";
+//initialize api
+const { $PermissionDoc, $OrganizationDoc, $BranchDoc, $InvitationDoc } =
+  useNuxtApp();
+const doc = $PermissionDoc();
+const orgdoc = $OrganizationDoc();
+const branchdoc = $BranchDoc();
+const invitedoc = $InvitationDoc();
+
+//initialize require list in UI
+const permlist = ref<PermissionListItem[]>([]);
+const userlist = ref<PermissionListItem[]>([]);
+const invitationlist = ref<InvitationListItem[]>([]);
+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 inviteemail = ref("");
+const selected = ref("");
+const activeuser = ref("");
+const showpermissioninfo = ref(false);
+const permissionselected = ref();
+const permissiontitle = "Permission Information";
+
+//initialize UI methods
+const getPermssionData = (uid: string, branchId: number) => {
+  const result = permlist.value.find(
+    (el) => el.uid == uid && el.branchId == branchId,
+  );
+  let pm: Permission = {
+    _id: result?._id ?? "",
+    orgId: result?.orgId ?? 0,
+    tenantId: result?.tenantId ?? 0,
+    branchId: branchId,
+    uid: uid,
+    group: result?.group ?? "",
+  };
+
+  return pm;
+};
+const onSelectUser = async (item: any) => {
+  orglist.value = await orgdoc.list();
+  branchlist.value = await branchdoc.list();
+  selected.value = item.uid;
+  activeuser.value = item.fullName;
+  const uid = item.uid;
+  currentpermissions.value = [];
+  for (let i = 0; i < branchlist.value.length; i++) {
+    const b = branchlist.value[i];
+    const permdata = getPermssionData(uid, b.branchId);
+    const tmp: Permission = {
+      _id: permdata?._id,
+      uid: uid,
+      tenantId: b.tenantId,
+      orgId: b.orgId,
+      branchId: b.branchId,
+      group: permdata.group,
+    };
+    currentpermissions.value.push(tmp);
+  }
+  console.log("currentpermissions", currentpermissions.value);
+};
+const refreshList = async (resetpage:boolean=true) => {
+  const items: any[] = [];
+  permlist.value = await doc.listUser();
+  userlist.value = _.uniqBy(permlist.value, "uid");
+  if(resetpage){
+    selected.value=''
+    activeuser.value=''
+  
+  }
+  console.log(permlist.value);
+};
+
+
+const refreshInvitation = async () => {
+  inviteemail.value = "";
+  invitationlist.value = await invitedoc.list();
+};
+const checkBranchInOrg = (org: OrgListItem, branch: BranchListItem) => {
+  return org.orgId === branch.orgId;
+};
+const previewPermission = () => {
+  showpermissioninfo.value = true;
+};
+
+/***** send or remove invitation  ******/
+const invite = async () => {
+  const result = await sendInvitation(inviteemail.value);
+  refreshInvitation();
+};
+const deleteInvitation = async (recordId: string) => {
+  await cancelInvitation(recordId);
+  refreshInvitation();
+};
+
+/**********applPermission ******/
+/**
+ * apply permission:
+ * _id:'', group:'' => skip
+ * _id: '', group:'something' => create
+ * _id:'something', 'group':'something' => update
+ * _id:'something', group:'' => remove
+ */
+const applPermission = async (d: Permission) => {
+  let result;
+
+  d._id = String(d._id ?? "");
+  d.group = String(d.group ?? "");
+  const data = doc.getReactiveData();
+  data.value = d;
+  console.log("apply permission", data.value)
+  if (!d._id && !d.group) {
+    //no changes
+  } else if (!d._id && d.group) {
+    result = await doc.create();
+  } else if (d._id && d.group) {
+    data.value = d;
+    result = await doc.update();
+  } else if (d._id && !d.group) {
+    d.group = "";
+    data.value = d;
+    result = await doc.delete(d._id);
+  } else {
+    console.warn("unknown apply permission", result);
+  }
+  refreshList(false)
+};
+//init ui
+onMounted(() => {
+  refreshList();
+  refreshInvitation();
+});
+</script>
+<template>
+  <button @click="refreshList()" class="pi pi-refresh"></button>
+  <Dialog
+    v-model:visible="showpermissioninfo"
+    modal
+    :header="permissiontitle"
+    :autoZIndex="false"
+    :style="{ zIndex: 100, width: '80vw' }"
+  >
+    <PermissionInfo></PermissionInfo>
+  </Dialog>
+
+  <div class="grid grid-cols-3">
+    <div v-if="userlist">
+      <TabView>
+        <TabPanel header="Active">
+          <Menu
+            :model="userlist"
+            class="w w-auto border border-solid border-1"
+            :pt="{ root: { class: 'w-auto ' } }"
+          >
+            <template #start>
+              <div class="flex flex-column align">
+                <h1>Users</h1>
+              </div>
+            </template>
+            <template #item="{ item, label, props }">
+              <a
+                class="flex m-2 p-2 flex-col border border-b-2 cursor cursor-pointer"
+                @click="onSelectUser(item)"
+              >
+                <div class="text text-left text-base text-black">
+                  {{ item.fullName }}
+                </div>
+                <div class="text text-sm text-right">{{ item.email }}</div>
+              </a>
+            </template>
+          </Menu>
+        </TabPanel>       
+        <TabPanel header="Invite">
+          <div class="padding p-2">
+            <form @submit.prevent="true" class="w-full">
+            <div class="p-inputgroup flex-1">
+              
+                <InputText
+                  type="email"
+                  placeholder="email"
+                  v-model="inviteemail"
+                />
+                <button label="Search" class="btn btn-primary" @click="invite"
+                  >Invite</button
+              >
+            
+            </div>
+          </form>
+          </div>
+          <div class="flex flex-col">
+            <div
+              v-for="(invitation, index) in invitationlist"
+              class="grid grid-cols-4"
+            >
+              <div class="text text-base m-2">{{ index + 1 }}</div>
+              <div class="col-span-2 text text-base m-2">
+                {{ invitation.email }}
+              </div>
+              <div>
+                <button
+                  class="btn-danger pi pi-times"
+                  @click="deleteInvitation(invitation._id)"
+                ></button>
+              </div>
+            </div>
+          </div>
+        </TabPanel>
+      </TabView>
+    </div>
+    <div class="col-span-2" v-if="selected">
+      <div class="flex flex-row w w-full">
+        <div class="text text-xl p p-2 text-left flex-1">{{ activeuser }}</div>
+        <div class="text-right m mr-2">
+          <button
+            class="btn-primary pi pi-question"
+            @click="previewPermission"
+          ></button>
+        </div>
+      </div>
+
+      <Panel v-for="o in orglist" :header="o.orgName" class="m-2">
+        <table class="w w-full">
+          <thead class="">
+            <tr>
+              <th>Branch Code</th>
+              <th>Branch Name</th>
+              <th>Access Right</th>
+            </tr>
+          </thead>
+          <tr v-for="(b, index) in branchlist">
+            <td v-if="checkBranchInOrg(o, b)">{{ b.branchCode }}</td>
+            <td v-if="checkBranchInOrg(o, b)">{{ b.branchName }}</td>
+            <td v-if="checkBranchInOrg(o, b)" clas="flex flex-row">
+              <div class="grid gap-4 grid-cols-5">
+                <div class="col-span-4">
+                  <SelectButton
+                    v-model="currentpermissions[index].group"
+                    :options="grouplist"
+                    option-label="label"
+                    option-value="value"
+                    @change="applPermission(currentpermissions[index])"
+                  ></SelectButton>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </table>
+      </Panel>
+    </div>
+  </div>
+</template>
+<style scoped>
+td {
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,93 @@
+<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 {
+  InputTableColumnType,
+  InputTableColumn,
+} from "@simitgroup/simpleapp-vue-component/src/type";
+import Column from "primevue/column";
+const { $TenantDoc } = useNuxtApp();
+const doc = $TenantDoc();
+const data = doc.getReactiveData();
+const columns = [
+    '_id',
+  'tenantId',
+  "tenantName",
+  "description",
+  "owner.label"
+   /* skip system columns _id*/,
+  /* skip system columns doctype*/
+  /* skip system columns created*/
+  /* skip system columns updated*/
+  /* skip system columns createdby*/
+  /* skip system columns updatedby*/
+  /* skip system columns orgId*/
+  /* skip system columns branchId*/
+];
+//prepare subtable if exists
+/*
+          
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+        */
+//end
+</script>
+<template>
+  <div>
+    <CrudSimple
+      :document="doc"
+      title="Tenant"
+      #default="o"
+      :path="`/${useRoute().params.xorg}/tenant`"
+      :listColumns="columns"
+    >
+   
+      <SimpleAppText
+        autofocus
+        :setting="o.getField('#/properties/tenantName')"
+        v-model="data.tenantName"
+      />
+
+      <SimpleAppCheckbox
+        autofocus
+        :setting="o.getField('#/properties/active')"
+        v-model="data.active"
+      />
+
+      <SimpleAppText
+        autofocus
+        :setting="o.getField('#/properties/description')"
+        v-model="data.description"
+      />
+
+      <SimpleAppAutocomplete
+        :setting="o.getField('#/properties/owner')"
+        v-model="data.owner"
+        optionLabel="label"
+        :remote-src="getAutocomplete('user')"
+      />
+    <SimpleAppNumber
+        :readonly="true"
+        :setting="o.getField('#/properties/tenantId')"
+        v-model="data.tenantId"
+      />
+    </CrudSimple>
+  </div>
+</template>