@eeplatform/nuxt-layer-common 1.7.47 → 1.7.49

package/components/RolePermissionMain.vue

@@ -6,11 +6,11 @@
           class="text-none"
           rounded="pill"
           variant="tonal"
-          @click="createDialog = true"
+          @click="setRole({ mode: 'add', dialog: true })"
           size="large"
           v-if="canCreateRole"
         >
-          Create role
+          Add Role
         </v-btn>
       </v-row>
     </v-col>
@@ -60,98 +60,66 @@
             </span>
             <v-chip>{{ value.length }}</v-chip>
           </template>
-
-          <template #item.action-table="{ item }" v-if="canDeleteRole">
-            <v-menu :close-on-content-click="false" offset-y width="150">
-              <template v-slot:activator="{ props }">
-                <v-icon v-bind="props">mdi-dots-horizontal</v-icon>
-              </template>
-              <v-list>
-                <v-list-item @click="openDeleteDialog(item._id)">
-                  Delete Role
-                </v-list-item>
-              </v-list>
-            </v-menu>
-          </template>
         </v-data-table>
       </v-card>
     </v-col>
 
     <!-- dialogs -->
-    <v-dialog v-model="createDialog" width="500" persistent>
-      <RolePermissionFormCreate
-        @cancel="createDialog = false"
-        :permissions="props.permissions"
-        :id="props.id"
-        @success="success()"
-        v-model:type="type"
-        :types="props.types"
-        @success:create-more="getRoles()"
+    <v-dialog v-model="dialogAdd" width="500" persistent>
+      <RoleForm
+        v-model="role"
+        v-model:message="message"
+        :app="props.app"
+        @cancel="setRole({ mode: 'add' })"
+        @submit="submitAdd()"
       />
     </v-dialog>
 
-    <v-dialog v-model="previewDialog" width="500" persistent>
-      <RolePermissionFormPreviewUpdate
-        @cancel="previewDialog = false"
-        @success="successfulUpdate()"
-        :permissions="Permissions"
-        :original-permissions="originalPermissions"
-        v-model="selectedPermissions"
-        v-model:edit="edit"
-        :name="name"
-        :id="roleId"
+    <v-dialog v-model="dialogPreview" width="500" persistent>
+      <RoleForm
+        title="Role Details"
+        :app="props.app"
+        v-model="role"
+        @close="setRole({ mode: 'view' })"
+        @edit="handOpenEdit()"
+        @delete="handleOpenDelete()"
+        mode="view"
       />
     </v-dialog>
 
-    <ConfirmDialog
-      v-model="confirmDialog"
-      :loading="deleteLoading"
-      @submit="handleDeleteRole"
-    >
-      <template #title>
-        <span class="font-weight-medium text-h5">Delete Role</span>
-      </template>
-
-      <template #description>
-        <p class="text-subtitle-2">
-          Are you sure you want to delete this role? This action cannot be
-          undone.
-        </p>
-      </template>
-
-      <template #footer>
-        <v-btn
-          variant="text"
-          @click="confirmDialog = false"
-          :disabled="deleteLoading"
-        >
-          Close
-        </v-btn>
-        <v-btn
-          color="primary"
-          variant="flat"
-          @click="handleDeleteRole"
-          :loading="deleteLoading"
-        >
-          Delete Role
-        </v-btn>
-      </template>
-    </ConfirmDialog>
+    <v-dialog v-model="dialogEdit" width="500" persistent>
+      <RoleForm
+        title="Edit Role Details"
+        :app="props.app"
+        v-model="role"
+        @cancel="setRole({ mode: 'edit' })"
+        @submit="submitEdit()"
+        mode="edit"
+      />
+    </v-dialog>
 
-    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+    <v-dialog v-model="dialogDelete" width="450" persistent>
+      <ConfirmationPrompt
+        title="Delete Role"
+        action="Delete Role"
+        content="Are you sure you want to delete this role? This action cannot be undone."
+        @cancel="setRole({ mode: 'delete' })"
+        @confirm="submitDelete()"
+        v-model:message="message"
+      />
+    </v-dialog>
   </v-row>
 </template>
 
 <script setup lang="ts">
 const props = defineProps({
-  id: {
+  app: {
     type: String,
     default: "",
   },
-  permissions: {
-    type: Object,
-    required: true,
-    default: () => ({}),
+  org: {
+    type: String,
+    default: "",
   },
   types: {
     type: Array as PropType<Array<{ title: string; value: string }>>,
@@ -168,7 +136,7 @@ const props = defineProps({
         title: "permissions",
         value: "permissions",
       },
-      { title: "Action", value: "action-table" },
+      { title: "App", value: "app" },
     ],
   },
   canCreateRole: {
@@ -193,40 +161,75 @@ const props = defineProps({
   },
 });
 
-const type = defineModel<string>("type", {
-  type: String,
-  default: "",
-});
-
 const { headerSearch } = useLocal();
 
-const { getRoles: _getRoles } = useRole();
+const {
+  role,
+  add: addRole,
+  getAll: _getRoles,
+  updateById,
+  deleteById,
+} = useRole();
 
 const page = ref(1);
 const pages = ref(0);
 const pageRange = ref("-- - -- of --");
+const modeRole = ref("");
 
 const message = ref("");
-const messageSnackbar = ref(false);
-const messageColor = ref("");
+
+function setRole({
+  mode = "",
+  dialog = false,
+  data = useRole().role.value,
+} = {}) {
+  Object.assign(
+    role.value,
+    JSON.parse(
+      JSON.stringify({
+        ...data,
+        app: mode === "admin" || mode === "add" ? props.app : data.app,
+      })
+    )
+  );
+  modeRole.value = mode;
+  message.value = "";
+
+  if (modeRole.value === "add") {
+    dialogAdd.value = dialog;
+  }
+
+  if (modeRole.value === "view") {
+    dialogPreview.value = dialog;
+  }
+
+  if (modeRole.value === "edit") {
+    dialogEdit.value = dialog;
+  }
+
+  if (modeRole.value === "delete") {
+    dialogDelete.value = dialog;
+  }
+}
 
 const items = ref<Array<Record<string, any>>>([]);
 
+const isOrg = computed(() => props.app === "org");
+
 const {
   data: getRoleReq,
   refresh: getRoles,
   status: getRoleReqStatus,
 } = useLazyAsyncData(
-  "roles-permissions-get-all" + "-" + props.id,
+  `roles-permissions-get-all-by-${props.app}-${props.org}-page-${page.value}`,
   () =>
     _getRoles({
       page: page.value,
-      search: headerSearch.value,
-      type: type.value,
-      id: props.id,
+      org: props.org,
+      app: isOrg.value ? "" : props.app,
     }),
   {
-    watch: [page, headerSearch],
+    watch: [page],
   }
 );
 
@@ -241,135 +244,64 @@ watchEffect(() => {
 });
 
 function tableRowClickHandler(_: any, data: any) {
-  previewDialog.value = true;
-  roleId.value = data.item._id;
+  setRole({ data: data.item, mode: "view", dialog: true });
 }
 
-const createDialog = ref(false);
-
-function success() {
-  createDialog.value = false;
-  type.value = "";
-  getRoles();
-}
-
-const previewDialog = ref(false);
-
-const name = ref("");
-const selectedPermissions = ref<Array<string>>([]);
-const originalPermissions = ref<Array<string>>([]);
-const edit = ref(false);
+const dialogAdd = ref(false);
 
-watchEffect(() => {
-  if (!edit.value) {
-    selectedPermissions.value = originalPermissions.value;
-  }
-});
+const dialogPreview = ref(false);
 
-const roleId = ref("");
+const { loggedInUser } = useLocalAuth();
 
-const { getRoleById: _getRoleById, deleteRole } = useRole();
-
-const { data: role, refresh: getRoleById } = useLazyAsyncData(
-  "role-permissions-get-by-id",
-  () => _getRoleById(roleId.value)
-);
-
-watchEffect(() => {
-  if (roleId.value) {
-    getRoleById();
-  }
-});
-
-watchEffect(() => {
-  if (role.value) {
-    name.value = role.value.name as any;
-
-    selectedPermissions.value = role.value.permissions as any;
-    originalPermissions.value = role.value.permissions as any;
+async function submitAdd() {
+  try {
+    await addRole({
+      name: role.value.name,
+      permissions: role.value.permissions,
+      app: role.value.app,
+      org: props.org,
+      createdBy: loggedInUser(),
+    });
+    setRole({ mode: "add" });
+    getRoles();
+  } catch (error: any) {
+    message.value = error.response._data.message;
   }
-});
-
-function filterPermissions(
-  allPermissions: TPermissions,
-  storedPermissions: string[]
-) {
-  const filteredPermissions: TPermissions = {};
-
-  Object.entries(allPermissions).forEach(([resource, actions]) => {
-    const filteredActions = Object.entries(actions)
-      .filter(([action]) => storedPermissions.includes(`${resource}:${action}`))
-      .reduce((acc: Record<string, any>, [action, data]) => {
-        acc[action] = data;
-        return acc;
-      }, {});
-
-    if (Object.keys(filteredActions).length > 0) {
-      filteredPermissions[resource] = filteredActions;
-    }
-  });
-
-  return filteredPermissions;
 }
 
-const { permissions: orgPermissions } = useOrgPermission();
-const { permissions: schoolPermissions } = useSchoolPermission();
-
-const permissions = computed(() => {
-  if (role.value?.type === "organization") {
-    return orgPermissions;
-  }
-
-  if (role.value?.type === "school") {
-    return schoolPermissions;
-  }
-
-  return {};
-});
-
-const Permissions = computed(() => {
-  return edit.value
-    ? permissions.value
-    : filterPermissions(permissions.value, selectedPermissions.value);
-});
+const dialogEdit = ref(false);
+const dialogDelete = ref(false);
 
-function successfulUpdate() {
-  previewDialog.value = false;
-  getRoles();
-  getRoleById();
-  edit.value = false;
+function handOpenEdit() {
+  dialogPreview.value = false;
+  dialogEdit.value = true;
 }
 
-const confirmDialog = ref(false);
-const selectedRoleId = ref<string | null>(null);
-const deleteLoading = ref(false);
-
-function openDeleteDialog(id: string) {
-  selectedRoleId.value = id;
-  confirmDialog.value = true;
+async function submitEdit() {
+  try {
+    await updateById(role.value._id ?? "", {
+      name: role.value.name,
+      permissions: role.value.permissions,
+    });
+    await setRole({ mode: "edit" });
+    await getRoles();
+  } catch (error: any) {
+    message.value = error.response._data.message;
+  }
 }
 
-function showMessage(msg: string, color: string) {
-  message.value = msg;
-  messageColor.value = color;
-  messageSnackbar.value = true;
+function handleOpenDelete() {
+  dialogPreview.value = false;
+  dialogDelete.value = true;
 }
 
-async function handleDeleteRole() {
-  if (!selectedRoleId.value) return;
-  deleteLoading.value = true;
+async function submitDelete() {
   try {
-    const res = await deleteRole(selectedRoleId.value);
-
-    confirmDialog.value = false;
-    showMessage(res.message, "success");
+    await deleteById(role.value._id ?? "");
+    dialogDelete.value = false;
     getRoles();
   } catch (error: any) {
-    const errorMessage = error?.response?._data?.message;
-    showMessage(errorMessage, "error");
-  } finally {
-    deleteLoading.value = false;
-    selectedRoleId.value = null;
+    message.value = error.response._data.message;
   }
 }
 </script>

package/composables/useApps.ts

@@ -0,0 +1,58 @@
+export default function useApps() {
+  const app = ref<TApp>({
+    _id: "",
+    code: "",
+    name: "",
+    description: "",
+    status: "active",
+    createdAt: "",
+    updatedAt: "",
+    deletedAt: "",
+  });
+
+  const resource = "/api/apps";
+
+  function add(value: TApp) {
+    return useNuxtApp().$api(resource, {
+      method: "POST",
+      body: value,
+    });
+  }
+
+  function getAll({
+    page = 1,
+    limit = 10,
+    search = "",
+    status = "active",
+    type = "standard",
+  } = {}) {
+    return useNuxtApp().$api<Record<string, any>>(resource, {
+      method: "GET",
+      query: { page, limit, search, status, type },
+    });
+  }
+
+  function updateById(
+    id: string,
+    value: { name: string; description: string }
+  ) {
+    return useNuxtApp().$api(`${resource}/id/${id}`, {
+      method: "PATCH",
+      body: value,
+    });
+  }
+
+  function deleteById(id: string) {
+    return useNuxtApp().$api(`${resource}/id/${id}`, {
+      method: "DELETE",
+    });
+  }
+
+  return {
+    app,
+    add,
+    getAll,
+    updateById,
+    deleteById,
+  };
+}

package/composables/useLocal.ts

@@ -12,7 +12,7 @@ export default function useLocal() {
   const { APP_STUDENT, APP_PARENT, APP_SCHOOL, APP_DIVISION, APP_REGION } =
     appConfig;
 
-  const apps = computed<Array<TApp>>(() => {
+  const apps = computed(() => {
     return [
       {
         title: "Student",

package/composables/useLocalAuth.ts

@@ -2,6 +2,18 @@ export default function useLocalAuth() {
   const { cookieConfig } = useRuntimeConfig().public;
 
   const currentUser = useState<TUser | null>("currentUser", () => null);
+  const permissions = useState<string[]>("permissions", () => []);
+
+  const hasPermission = (permissionKey: string): ComputedRef<boolean> => {
+    return computed(() => {
+      if (!permissions.value.length) return false;
+      return permissions.value.some((perm) => perm === permissionKey);
+    });
+  };
+
+  function loggedInUser() {
+    return useCookie("user", cookieConfig).value ?? "";
+  }
 
   function authenticate() {
     if (currentUser.value) {
@@ -128,6 +140,9 @@ export default function useLocalAuth() {
   }
 
   return {
+    loggedInUser,
+    permissions,
+    hasPermission,
     authenticate,
     login,
     setSession,

package/composables/useMember.ts

@@ -1,25 +1,19 @@
 export default function useMember() {
-  const members = useState<Array<TMember>>("members", () => []);
-  const page = useState("page", () => 1);
-  const pages = useState("pages", () => 0);
-  const pageRange = useState("pageRange", () => "-- - -- of --");
-
-  const member = useState<TMember>("member", () => ({
-    _id: "",
+  const member = ref<TMember>({
     org: "",
     orgName: "",
-    roleName: "",
     name: "",
     user: "",
     role: "",
-    type: "",
-    customerOrgId: "",
-    customerSiteId: "",
-    status: "",
-    createdAt: "",
-    updatedAt: "",
-    deletedAt: "",
-  }));
+  });
+
+  const invitation = ref<TMemberInvitation>({
+    _id: "",
+    email: "",
+    app: "",
+    org: "",
+    role: "",
+  });
 
   function getByUserId(user: string) {
     return useNuxtApp().$api<TMember>(`/api/members/user/${user}`);
@@ -32,18 +26,41 @@ export default function useMember() {
     });
   }
 
+  function getByApp({ app = "", user = "", org = "" } = {}) {
+    return useNuxtApp().$api<TMember>(`/api/members/app/${app}/user/${user}`, {
+      method: "GET",
+      query: { org },
+    });
+  }
+
+  function getAllByAppUser({
+    app = "",
+    user = "",
+    limit = 10,
+    page = 1,
+    search = "",
+  } = {}) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/members/orgs/app/${app}/user/${user}`,
+      {
+        method: "GET",
+        query: { page, limit, search },
+      }
+    );
+  }
+
   async function getAll({
     page = 1,
     search = "",
     limit = 10,
     user = "",
     org = "",
-    type = "",
+    app = "",
     status = "active",
   } = {}) {
-    return useNuxtApp().$api<Record<string, any>>("/api/members", {
+    return useNuxtApp().$api<Record<string, any>>(`/api/members/app/${app}`, {
       method: "GET",
-      query: { page, limit, search, user, org, type, status },
+      query: { page, limit, search, user, org, status },
     });
   }
   function createUserByVerification(
@@ -76,32 +93,45 @@ export default function useMember() {
     );
   }
 
-  function updateMemberRole(
-    id: string,
-    role: string,
-    type: string,
-    org: string
-  ) {
+  function updateRoleById(id: string, role: string) {
     return useNuxtApp().$api<Record<string, any>>(
-      `/api/members/id/${id}/role/${role}/type/${type}/org/${org}`,
+      `/api/members/role/id/${id}`,
       {
-        method: "PUT",
+        method: "PATCH",
+        body: { role },
       }
     );
   }
+
+  function updateStatusById(id: string, status: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/members/status/id/${id}`,
+      {
+        method: "PATCH",
+        body: { status },
+      }
+    );
+  }
+
+  function deleteById(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/members/id/${id}`, {
+      method: "DELETE",
+    });
+  }
+
   return {
-    members,
     member,
-    page,
-    pages,
-    pageRange,
-
+    invitation,
     getAll,
     getByUserId,
     createUserByVerification,
     createMemberInvite,
     getByUserType,
+    getByApp,
     updateMemberStatus,
-    updateMemberRole,
+    updateRoleById,
+    updateStatusById,
+    deleteById,
+    getAllByAppUser,
   };
 }