@simitgroup/simpleapp-generator 1.0.32 → 1.0.35

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

@@ -0,0 +1,468 @@
+<script setup lang="ts">
+/**
+ * invite user into current tenant (put user into user catalogue)
+ * 1. user accept then have uid
+ * 2. no uid user will put at invite place
+ *
+ */
+import Menu from "primevue/menu";
+import Dialog from "primevue/dialog";
+import {SearchBody} 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";
+
+//initialize api
+const {
+  $PermissionDoc,
+  $OrganizationDoc,
+  $BranchDoc,
+  $UserDoc,
+  // $InvitationDoc,
+} = useNuxtApp();
+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 usertitle = "User Information";
+const permissiontitle = "Permission Information";
+
+/**
+ * 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']}
+  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);
+};
+
+/**
+ * 2. select specific user
+ *    - get list of
+ *        a. orglist
+ *        b. branch list
+ *        c. permission for that user
+ *    - render organization and branch ui
+ * @param user
+ */
+const onSelectUser = async (menuitem: any) => {
+  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:{$or: [{ uid: user.uid }, { user_id: user._id }],},
+    fields:['uid','branchId','tenantId','orgId','active','group','created']
+  }
+  
+  orglist.value = await orgdoc.search(orgsearchbody);
+  branchlist.value = await branchdoc.search(branchsearchbody);
+  permlist.value = await permdoc.search(permsearchbody);
+  userdoc.getById(menuitem._id);
+  // 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
+  const user_id = String(user._id);
+  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,
+      user_id: user_id,
+      tenantId: b.tenantId,
+      orgId: b.orgId,
+      branchId: b.branchId,
+      group: permdata.group,
+    };
+    currentpermissions.value.push(tmp);
+  }
+  blockscreen.value = false;
+};
+
+/**
+ * prepare dataobj (existing or empty dummy data) for each branch permission
+ * @param uid
+ * @param branchId
+ */
+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;
+};
+
+/**
+ * identity branch object under org
+ * @param org object of org
+ * @param branch object of branch
+ */
+const checkBranchInOrg = (org: OrgListItem, branch: BranchListItem) => {
+  return org.orgId === branch.orgId;
+};
+
+/**
+ * generate dialog for view each user group have what permission
+ */
+const previewPermission = () => {
+  showpermissioninfo.value = true;
+};
+
+/***** send or remove invitation  ******/
+const saveUser = async () => {
+  await userdoc.update();
+  refreshList(false);
+};
+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);
+};
+
+/**
+ * delete user
+ * @param user:User object
+ */
+const deleteUser = async (user: any) => {
+  await userdoc.delete(String(user._id));
+  refreshList();
+};
+
+/**********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;
+  blockscreen.value = true;
+  d._id = String(d._id ?? "");
+  d.group = String(d.group ?? "");
+  const data = permdoc.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 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);
+  blockscreen.value = false;
+};
+//init ui
+onMounted(() => {
+  refreshList();
+});
+</script>
+<template>
+  <button
+    @click="refreshList()"
+    v-if="useRuntimeConfig().public.DEBUGDATA"
+    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-4">
+    <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
+                v-if="item.uid && item.active"
+                class="flex m-2 p-2 flex-row border border-b-2 cursor cursor-pointer"
+                @click="onSelectUser(item)"
+              >
+                <div class="flex-col basis-5/6">
+                  <div class="text text-left text-base text-black">
+                    {{ item.fullname }}
+                  </div>
+                  <div class="text text-sm text-right">{{ item.email }}</div>
+                </div>
+                <div class="basis-1/6 m-2">
+                  <!-- only debug mode can delete user -->
+                  <button
+                    v-if="useRuntimeConfig().public.DEBUGDATA"
+                    class="pi pi-times btn-danger"
+                    @click="deleteUser(item)"
+                  ></button>
+                </div>
+              </a>
+            </template>
+          </Menu>
+        </TabPanel>
+        <TabPanel header="Inactive">
+          <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
+                v-if="item.uid && !item.active"
+                class="flex m-2 p-2 flex-row border border-b-2 cursor cursor-pointer"
+                @click="onSelectUser(item)"
+              >
+                <div class="flex-col basis-5/6">
+                  <div class="text text-left text-base text-black">
+                    {{ item.fullname }}
+                  </div>
+                  <div class="text text-sm text-right">{{ item.email }}</div>
+                </div>
+                <div class="basis-1/6 m-2">
+                  <!-- only debug mode can delete user -->
+                  <button
+                    v-if="useRuntimeConfig().public.DEBUGDATA"
+                    class="pi pi-times btn-danger"
+                    @click="deleteUser(item)"
+                  ></button>
+                </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>
+          <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
+                v-if="item.uid == ''"
+                class="flex m-2 p-2 flex-row border border-b-2 cursor cursor-pointer"
+                @click="onSelectUser(item)"
+              >
+                <div class="flex-col basis-5/6">
+                  <div class="text text-left text-base text-black">
+                    {{ item.fullname }}
+                  </div>
+                  <div class="text text-sm text-right">{{ item.email }}</div>
+                </div>
+                <div class="basis-1/6 m-2">
+                  <button
+                    class="pi pi-times btn-danger"
+                    @click="deleteUser(item)"
+                  ></button>
+                </div>
+              </a>
+            </template>
+          </Menu>
+        </TabPanel>
+      </TabView>
+    </div>
+    <div class="col-span-3" v-if="selected">
+      <Panel
+        :pt="{ content: { class: 'bg-sky-50' } }"
+        class="m-2"
+        :header="usertitle"
+      >
+        <SimpleAppForm :document="userdoc" #default="o">
+          <div class="grid grid-cols-4 gap-4 p">
+            <SimpleAppText
+              autofocus
+              :setting="o.getField('#/properties/fullname')"
+              v-model="userdata.fullname"
+            />
+
+            <SimpleAppText
+              autofocus
+              type="string"
+              :setting="o.getField('#/properties/email')"
+              v-model="userdata.email"
+            />
+
+            <SimpleAppCheckbox
+              autofocus
+              :setting="o.getField('#/properties/active')"
+              v-model="userdata.active"
+            />
+            <div>
+              <Button @click="saveUser" class="btn-primary pi pi-save"></Button>
+            </div>
+          </div>
+        </SimpleAppForm>
+      </Panel>
+
+      <Panel
+        :pt="{ content: { class: 'bg-sky-50' } }"
+        class="m-2"
+        :header="permissiontitle"
+      >
+        <BlockUI :blocked="blockscreen">
+          <div class="text-right m mr-2">
+            <button
+              class="btn-primary pi pi-question"
+              @click="previewPermission"
+            ></button>
+          </div>
+
+          <div class="grid grid-cols-2">
+            <Card v-for="o in orglist" class="m-2">
+              <template #title>{{ o.orgName }}</template>
+              <template #content>
+                
+                <table class="w w-full">
+                  <thead class="">
+                    <tr>
+                      <th>Branch Code</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)" clas="flex flex-row">
+                      <div>
+                        <SelectButton
+                          :pt="{
+                            button: {
+                              class: 'text-xs border border-1 bg-sky-primary',
+                            },
+                          }"
+                          v-model="currentpermissions[index].group"
+                          :options="grouplist"
+                          option-label="label"
+                          option-value="value"
+                          @change="applPermission(currentpermissions[index])"
+                        ></SelectButton>
+                      </div>
+                    </td>
+                  </tr>
+                </table>
+              </template>
+            </Card>
+          </div>
+        </BlockUI>
+      </Panel>
+    </div>
+  </div>
+</template>
+<style scoped>
+td {
+  text-align: center;
+}
+</style>

package/templates/nuxt/pages/index.vue.eta

@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * You may modify it for your need
+ * last change 2023-09-09
+ * author: Ks Tan
+ */
+import _ from "lodash";
+import InputText from "primevue/inputtext";
+import Dialog from "primevue/dialog";
+import { ref, Ref } from "vue";
+import { SimpleAppEventType } from "../simpleapp/generate/commons/events";
+import { TenantDoc } from "../simpleapp/docs/TenantDoc";
+import ProgressSpinner from 'primevue/progressspinner';
+import Panel from "primevue/panel";
+import Card from "primevue/card";
+import { AxiosResponse } from "axios";
+
+const { $event, $listen, $userstore } = useNuxtApp();
+const errCreateTenant = ref();
+const branches = ref([]);
+const data = ref();
+const visible = ref(false);
+const userprofile = ref();
+const createtitle = ref("Create My Company");
+const orgList = ref();
+const onhold = ref(false)
+const loadProfile = async () => {
+  await reloadUserStore();
+  userprofile.value = getUserProfile();
+  console.log("useprofile", userprofile.value);
+  data.value = {
+    tenantName: "",
+  };
+
+  branches.value = userprofile.value.branches;
+
+  orgList.value = _.uniqBy(branches.value, "branch.orgId").map((item) => ({
+    orgId: item.branch.orgId,
+    orgName: item.branch.organization.label,
+  }));
+  //.map((item)=>{return {orgId: item.organization.orgId,orgName:item.organization.Name}})
+  console.log("user info.value", branches.value);
+  console.log("org list .value", orgList.value);
+};
+
+$listen(SimpleAppEventType.InvitationAccepted, async () => {
+  loadProfile();
+});
+
+onMounted(() => {
+  loadProfile();
+});
+
+const createTenant = async () => {
+
+  onhold.value=true
+  const { $axios, $listen } = useNuxtApp();
+
+  const openapi = getApi();
+  const apipath = `${useRuntimeConfig().public.API_URL}`;
+  let profileapi = new openapi.PROFILEApi(undefined, apipath, $axios);
+
+  profileapi
+    .createTenant(data.value)
+    .then((res) => {
+      if (res && res.status && res.status == 201) {
+        if (res.data && res.data["xOrg"]) {
+          const xorg = res.data["xOrg"];
+          navigateTo("/" + xorg, { external: true });
+        }
+      }
+
+    })
+    .catch((err) => {
+      errCreateTenant.value = err["message"];
+      console.error("errCreateTenant", err);
+
+    }).finally(()=>{
+      onhold.value=false
+    });
+};
+</script>
+<template>
+  <div class="grid grid-cols-2">
+    <DebugDocumentData v-model="userprofile" label="User"></DebugDocumentData>
+    <Panel header="Create New Tenant">
+      <div>
+        <h1>Create new one?</h1>
+        <DebugDocumentData
+          v-model="data"
+          label="CreateTenant"
+        ></DebugDocumentData>
+        <button class="btn-primary" @click="visible = true">
+          Create My Company
+        </button>
+
+        <Dialog
+          v-model:visible="visible"
+          modal
+          :header="createtitle"
+          class="crudsimple-dialog"
+        >
+          <form @submit.prevent="true" class="flex flex-col text-center">
+
+            <div v-if="errCreateTenant" class="text-error">
+              {{ errCreateTenant }}
+            </div>
+            <ProgressSpinner v-if="onhold"></ProgressSpinner>
+            <InputText v-else
+              type="text"
+              autofocus="true"
+              v-model:model-value="data.tenantName"
+              placeholder="Organization Name"
+            />
+
+            <button class="btn-primary" type="submit" @click="createTenant">
+              Create
+            </button>
+          </form>
+        </Dialog>
+      </div>
+    </Panel>
+    <Panel header="Reserved">
+      <div>
+        <h1>reserved fuction</h1>
+      </div>
+    </Panel>
+    <Panel>
+      <template #header>
+        <div class="flex flex-row">
+          <div class="font font-bold">Login To</div>
+          <button
+            class="pi pi-refresh ml-4"
+            @click="loadProfile"
+            v-if="useRuntimeConfig().public.DEBUGDATA"
+          ></button>
+        </div>
+      </template>
+      <div class="grid grid-cols-2">
+        <Card v-for="org in orgList" class="m-2">
+          <template #header>
+            <div class="font font-bold ml-4">{{ org.orgName }}</div>
+          </template>
+          <template #content>
+            <div v-for="item in branches" class="hover-list-primary">
+              <NuxtLink
+                v-if="org.orgId == item.branch.orgId"
+                :external="true"
+                :to="item.xOrg"
+                class="tenant-link"
+              >
+                <div
+                  class="grid grid-cols-2 p-2 align-items-center gap-0 w-full"
+                >
+                  <div class="">
+                    <p>
+                      <span class="font font-semibold">{{
+                        item.branch.branchName
+                      }}</span
+                      ><span class="ml-2 text text-gray-500">
+                        {{ item.group }}</span
+                      >
+                    </p>
+                    <span class="text-xs italic"
+                      >{{ useRuntimeConfig().public.APP_URL }}/{{
+                        item.xOrg
+                      }}</span
+                    >
+                  </div>
+                  <div class="font-bold text-900">
+                    {{ item.branch.branchCode }}
+                  </div>
+                </div>
+              </NuxtLink>
+            </div>
+          </template>
+        </Card>
+      </div>
+    </Panel>
+  </div>
+</template>
+
+<style scoped>
+.p-panel {
+  @apply m-2;
+}
+/* .tenant-link:hover div {
+  @apply bg-gray-300;
+} */
+</style>

package/templates/nuxt/pages/login.vue.eta

@@ -0,0 +1,21 @@
+<template>
+  <NuxtPage />
+</template>
+<script setup lang="ts">
+definePageMeta({
+  name: "Login",
+  auth: false,
+});
+
+// const route = useRoute();
+const { signIn } = useAuth();
+onMounted(async () => {
+  // logout();
+  let callbackUrl = "/";
+  // console.log("redirect to login");
+  // if(route.params.redirect) {
+  //     callbackUrl = <string>route.params.redirect;
+  // }
+  await signIn("keycloak", { callbackUrl: callbackUrl });
+});
+</script>