@eeplatform/nuxt-layer-common 1.7.46 → 1.7.48

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eeplatform/nuxt-layer-common
 
+## 1.7.48
+
+### Patch Changes
+
+- 47a0840: Revise role management
+
+## 1.7.47
+
+### Patch Changes
+
+- 7b536bb: Fix enrollment form, birthdate limit
+
 ## 1.7.46
 
 ### Patch Changes

package/components/EnrollmentForm.vue

@@ -1496,6 +1496,18 @@ const birthdateRules = [
     }
     return age >= 5 || "Learner must be at least 5 years old (Kindergarten age)";
   },
+  (v: any) => {
+    if (!v) return true;
+    const date = parseBirthdate(v);
+    if (date.toString() === "Invalid Date") return true;
+    const today = new Date();
+    let age = today.getFullYear() - date.getFullYear();
+    const monthDiff = today.getMonth() - date.getMonth();
+    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < date.getDate())) {
+      age--;
+    }
+    return age <= 80 || "Learner must be at most 80 years old";
+  },
 ];
 
 const enrollment = defineModel<TLearner>({

package/components/Layout/Header.vue

@@ -79,7 +79,7 @@
 
                 <v-row no-gutters class="px-2 pb-2">
                   <v-col
-                    v-for="item in props.apps"
+                    v-for="item in apps"
                     :key="item.title"
                     cols="4"
                     class="pa-2"
@@ -206,7 +206,7 @@ const props = defineProps({
     default: "Title",
   },
   defaults: {
-    type: Array as PropType<Array<TApp>>,
+    type: Array as PropType<Record<string, any>[]>,
     default: () => [
       {
         title: "Account",
@@ -223,11 +223,11 @@ const props = defineProps({
     ],
   },
   apps: {
-    type: Array as PropType<Array<TApp>>,
+    type: Array as PropType<Record<string, any>[]>,
     default: () => [],
   },
   others: {
-    type: Array as PropType<Array<TApp>>,
+    type: Array as PropType<Record<string, any>[]>,
     default: () => [],
   },
 });
@@ -244,7 +244,7 @@ function setSearchValue() {
   search.value = _search.value;
 }
 
-const { redirect, drawer } = useLocal();
+const { redirect, drawer, apps } = useLocal();
 
 const { APP_NAME, APP_NAME_ROUTE } = useRuntimeConfig().public;
 

package/components/ListGroupSelection.vue

@@ -0,0 +1,134 @@
+<template>
+  <v-card width="100%" v-bind="attrs">
+    <v-list
+      v-model:selected="selected"
+      lines="two"
+      :select-strategy="attrs.readonly ? 'classic' : 'leaf'"
+      class="pa-0"
+      density="compact"
+      read-only
+      open-strategy="single"
+    >
+      <template name="prepend"></template>
+
+      <template
+        v-for="(keyGroup, keyGroupIndex) in props.items"
+        :key="keyGroupIndex"
+      >
+        <v-divider v-if="keyGroupIndex > 0"></v-divider>
+        <v-list-group :value="keyGroup.title" fluid>
+          <template v-slot:activator="{ props }">
+            <v-list-item v-bind="props" density="compact">
+              <span class="text-capitalize">
+                {{ keyGroup.title }}
+              </span>
+
+              <template #prepend>
+                <v-chip class="mr-2" small>
+                  {{ selectedActionCount(String(keyGroup.key)) }}
+                </v-chip>
+              </template>
+            </v-list-item>
+          </template>
+
+          <template
+            v-for="(item, itemIndex) in keyGroup.children"
+            :key="itemIndex"
+          >
+            <v-divider></v-divider>
+            <v-list-item v-if="attrs.readonly" density="compact">
+              <template #title>
+                <span class="text-subtitle-2 text-capitalize pl-11">
+                  {{ item.title }}
+                </span>
+              </template>
+
+              <template #subtitle>
+                <span class="text-subtitle-2 pl-11">{{
+                  item.description
+                }}</span>
+              </template>
+            </v-list-item>
+
+            <v-list-item v-else :value="item.key" density="compact">
+              <template #title>
+                <span class="text-subtitle-2 text-capitalize">
+                  {{ item.title }}
+                </span>
+              </template>
+
+              <template #subtitle>
+                <span class="text-subtitle-2 text-capitalize">
+                  {{ item.description }}
+                </span>
+              </template>
+
+              <template #prepend="{ isSelected }">
+                <v-list-item-action start class="pl-1">
+                  <v-checkbox-btn
+                    :model-value="isSelected"
+                    readonly
+                    @click="addItem(item.key)"
+                  ></v-checkbox-btn>
+                </v-list-item-action>
+              </template>
+            </v-list-item>
+          </template>
+        </v-list-group>
+      </template>
+
+      <slot v-if="noData" name="no-data">
+        <v-list-item>
+          <v-list-item-title>No data</v-list-item-title>
+        </v-list-item>
+      </slot>
+
+      <template name="append"></template>
+    </v-list>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const selected = defineModel<Array<string>>({ default: [] });
+const attrs = useAttrs();
+
+function addItem(key: string) {
+  if (selected.value.includes(key)) {
+    // remove item from selected without reassigning the array
+    const index = selected.value.indexOf(key);
+    if (index > -1) {
+      selected.value.splice(index, 1);
+    }
+  } else {
+    selected.value.push(key);
+  }
+}
+
+type TListGroup = {
+  title: string;
+  key: string;
+  children: { title: string; key: string; description: string }[];
+};
+
+const props = defineProps({
+  items: {
+    // Array of object
+    type: Array as PropType<TListGroup[]>,
+    required: true,
+    default: () => [],
+  },
+  message: {
+    type: String,
+    default: "",
+  },
+});
+
+const selectedActionCount = (resource: string) => {
+  return selected.value.filter((permission) => permission.startsWith(resource))
+    .length;
+};
+
+const noData = computed(() => {
+  return Object.keys(props.items).length === 0;
+});
+</script>

package/components/RoleForm.vue

@@ -0,0 +1,327 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5 text-capitalize">
+          {{ localProps.title }}
+        </span>
+      </v-row>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto">
+      <v-form v-model="valid">
+        <v-row no-gutters>
+          <v-col v-if="isOrg" cols="12" class="mb-1">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="App"
+                :required="isMutable"
+              />
+              <v-col cols="12">
+                <v-select
+                  v-model="role.app"
+                  :items="apps"
+                  item-title="name"
+                  item-value="code"
+                  :readonly="!isMutable"
+                  :loading="loadingApps"
+                ></v-select>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mb-1">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="Name"
+                :required="isMutable"
+              />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="role.name"
+                  :rules="isMutable ? [requiredRule] : []"
+                  :readonly="!isMutable"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mb-1">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize"
+                title="Permissions"
+                :required="isMutable"
+              />
+              <v-col cols="12">
+                <ListGroupSelection
+                  v-model="role.permissions"
+                  :items="permissions"
+                  :readonly="!isMutable"
+                  variant="outlined"
+                  border="thin"
+                  :loading="loadingPermissions"
+                />
+                <v-input
+                  :messages="errorPermissionSelection"
+                  :error="!!errorPermissionSelection"
+                ></v-input>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mb-1">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Description" />
+              <v-col cols="12">
+                <v-textarea
+                  v-model="role.description"
+                  rows="2"
+                  no-resize
+                  :readonly="!isMutable"
+                ></v-textarea>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-form>
+
+      <v-alert
+        v-if="message"
+        type="error"
+        variant="flat"
+        closable
+        position="absolute"
+        location="bottom"
+        style="bottom: 48px"
+        @click:close="message = ''"
+        width="100%"
+        tile
+        class="text-caption"
+      >
+        {{ message }}
+      </v-alert>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col v-if="isMutable" cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="emits('cancel')"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col v-if="localProps.mode === 'view'" cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="emits('close')"
+          >
+            Close
+          </v-btn>
+        </v-col>
+
+        <v-col v-if="localProps.mode === 'view'" cols="6">
+          <v-menu>
+            <template #activator="{ props }">
+              <v-btn
+                block
+                variant="flat"
+                color="black"
+                class="text-none"
+                height="48"
+                v-bind="props"
+                tile
+              >
+                More actions
+              </v-btn>
+            </template>
+
+            <v-list class="pa-0">
+              <v-list-item @click="emits('edit')">
+                <v-list-item-title class="text-subtitle-2">
+                  Edit Role
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item @click="emits('delete')" class="text-red">
+                <v-list-item-title class="text-subtitle-2">
+                  Delete Role
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+
+        <v-col v-if="isMutable" cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            @click="emits('submit')"
+            :disabled="!valid"
+          >
+            {{ localProps.mode === "add" ? "Add Role" : "Save Changes" }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const emits = defineEmits(["submit", "cancel", "close", "edit", "delete"]);
+
+const isMutable = computed(() => ["add", "edit"].includes(localProps.mode));
+
+const localProps = defineProps({
+  title: {
+    type: String,
+    default: "Role Form",
+  },
+  app: {
+    type: String,
+    default: "",
+  },
+  mode: {
+    type: String,
+    default: "add",
+  },
+});
+
+const role = defineModel<TRole>({
+  default: () => useRole().role.value,
+});
+
+const errorPermissionSelection = computed(() =>
+  requireListRule(role.value.permissions ?? [])
+);
+
+const message = defineModel("message", { default: "" });
+
+const valid = ref(false);
+
+const { requiredRule, requireListRule } = useUtils();
+
+const apps = ref<TApp[]>([]);
+
+const { getAll: getAllApps } = useApps();
+
+const isOrg = computed(() => localProps.app === "org");
+
+const {
+  data: appsData,
+  status: appsReqStatus,
+  refresh: refreshApps,
+} = await useLazyAsyncData(
+  `role-form-get-apps-${localProps.app}`,
+  () =>
+    getAllApps({
+      limit: 20,
+    }),
+  {
+    immediate: isOrg.value,
+  }
+);
+
+const loadingApps = computed(() => appsReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (appsData.value) {
+    apps.value = appsData.value.items;
+  }
+});
+
+type PermChild = {
+  title: string;
+  key: string;
+  description: string;
+};
+
+type PermGroup = {
+  title: string;
+  key: string;
+  children: PermChild[];
+};
+
+const permissions = ref<PermGroup[]>([]);
+
+const { getAllPerm } = usePermission();
+
+const {
+  data: permissionsData,
+  status: permissionsReqStatus,
+  refresh: refreshPermissions,
+} = await useLazyAsyncData(
+  `role-form-get-all-permission-${role.value.app}`,
+  () =>
+    getAllPerm({
+      app: role.value.app,
+      limit: 200,
+    }),
+  {
+    watch: [() => role.value.app],
+  }
+);
+
+const loadingPermissions = computed(
+  () => permissionsReqStatus.value === "pending"
+);
+
+function groupPermissions(permissions: TPerm[]): PermGroup[] {
+  const groups: Record<string, PermGroup> = {};
+
+  for (const perm of permissions) {
+    if (perm.status !== "active") continue;
+
+    const groupKey = perm.group;
+
+    if (!groups[groupKey]) {
+      groups[groupKey] = {
+        title: groupKey,
+        key: groupKey,
+        children: [],
+      };
+    }
+
+    groups[groupKey].children.push({
+      title: perm.name,
+      key: perm.key,
+      description: perm.description,
+    });
+  }
+
+  return Object.values(groups);
+}
+
+watchEffect(() => {
+  if (
+    permissionsData.value &&
+    permissionsData.value &&
+    permissionsData.value.items
+  ) {
+    let items = permissionsData.value.items;
+    if (localProps.mode === "view") {
+      items = permissionsData.value.items.filter((p: TPerm) =>
+        role.value.permissions?.includes(p.key)
+      );
+    }
+    permissions.value = groupPermissions(items);
+  }
+});
+</script>

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/usePermission.ts

@@ -47,8 +47,105 @@ export default function usePermission() {
     return false;
   }
 
+  const perm = ref<TPerm>({
+    app: "",
+    key: "",
+    name: "",
+    group: "",
+    description: "",
+  });
+
+  function addPerm(value: TPerm) {
+    return useNuxtApp().$api("/api/permissions", {
+      method: "POST",
+      body: value,
+    });
+  }
+
+  function updatePermById(
+    id: string,
+    value: Pick<TPerm, "key" | "name" | "group" | "description">
+  ) {
+    return useNuxtApp().$api(`/api/permissions/id/${id}`, {
+      method: "PATCH",
+      body: value,
+    });
+  }
+
+  function getAllPerm({
+    page = 1,
+    limit = 10,
+    search = "",
+    app = "",
+    status = "active",
+  } = {}) {
+    return useNuxtApp().$api<Record<string, any>>("/api/permissions", {
+      method: "GET",
+      query: { page, limit, search, app, status },
+    });
+  }
+
+  function deletePermById(id: string) {
+    return useNuxtApp().$api(`/api/permissions/id/${id}`, {
+      method: "DELETE",
+    });
+  }
+
+  const permGroup = ref<TPermGroup>({
+    app: "",
+    key: "",
+    label: "",
+    order: 0,
+  });
+
+  function addPermGroup(value: Pick<TPermGroup, "app" | "key" | "label">) {
+    return useNuxtApp().$api("/api/permissions/groups", {
+      method: "POST",
+      body: value,
+    });
+  }
+
+  function updatePermGroupById(
+    id: string,
+    value: Pick<TPermGroup, "key" | "label">
+  ) {
+    return useNuxtApp().$api(`/api/permissions/groups/id/${id}`, {
+      method: "PATCH",
+      body: value,
+    });
+  }
+
+  function getAllPermGroup({
+    page = 1,
+    limit = 10,
+    search = "",
+    app = "",
+    status = "active",
+  } = {}) {
+    return useNuxtApp().$api<Record<string, any>>("/api/permissions/groups", {
+      method: "GET",
+      query: { page, limit, search, app, status },
+    });
+  }
+
+  function deletePermGroupById(id: string) {
+    return useNuxtApp().$api(`/api/permissions/groups/id/${id}`, {
+      method: "DELETE",
+    });
+  }
+
   return {
     listPermissions,
     hasPermission,
+    perm,
+    addPerm,
+    updatePermById,
+    getAllPerm,
+    deletePermById,
+    permGroup,
+    addPermGroup,
+    updatePermGroupById,
+    getAllPermGroup,
+    deletePermGroupById,
   };
 }

package/composables/useRole.ts

@@ -1,44 +1,36 @@
 export default function useRole() {
-  function createRole(
-    { name, permissions, type } = {} as {
-      name: string;
-      permissions: Array<string>;
-      type: string;
-    }
+  function add(
+    value: Pick<TRole, "name" | "permissions" | "app" | "org" | "createdBy">
   ) {
     return useNuxtApp().$api("/api/roles", {
       method: "POST",
-      body: { name, permissions, type },
+      body: value,
     });
   }
 
-  function getRoles({
+  function getAll({
     search = "",
     page = 1,
     limit = 20,
-    type = "",
-    id = "",
+    app = "",
+    org = "",
   } = {}) {
     return useNuxtApp().$api<Record<string, any>>("/api/roles", {
       method: "GET",
-      query: { search, page, limit, type, id },
+      query: { search, page, limit, app, org },
     });
   }
 
-  function getRoleById(id: string) {
-    return useNuxtApp().$api<TRole>(`/api/roles/id/${id}`, {
+  function getById(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/roles/id/${id}`, {
       method: "GET",
     });
   }
 
-  function updateRoleById(
-    _id: string,
-    name?: string,
-    permissions?: Array<string>
-  ) {
-    return useNuxtApp().$api(`/api/roles/id/${_id}`, {
+  function updateById(id: string, value: Pick<TRole, "name" | "permissions">) {
+    return useNuxtApp().$api(`/api/roles/id/${id}`, {
       method: "PATCH",
-      body: { name, permissions },
+      body: value,
     });
   }
 
@@ -56,33 +48,28 @@ export default function useRole() {
     });
   }
 
-  function deleteRole(_id: string) {
+  function deleteById(_id: string) {
     return useNuxtApp().$api<Record<string, any>>(`/api/roles/${_id}`, {
       method: "DELETE",
     });
   }
 
-  const role = useState("userRole", (): TRole => {
-    return {
-      _id: "",
-      name: "",
-      id: "",
-      permissions: [],
-      createdAt: "",
-      updatedAt: "",
-      deletedAt: "",
-      default: false,
-    };
+  const role = ref<TRole>({
+    name: "",
+    org: "",
+    permissions: [],
+    app: "",
+    description: "",
   });
 
   return {
     role,
-    createRole,
-    getRoles,
-    getRoleById,
-    updateRoleById,
+    add,
+    getAll,
+    getById,
+    updateById,
     updateRoleFieldById,
-    deleteRole,
+    deleteById,
     updatePermissionById,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@eeplatform/nuxt-layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.7.46",
+  "version": "1.7.48",
   "main": "./nuxt.config.ts",
   "publishConfig": {
     "access": "public"

package/types/local.d.ts

@@ -19,8 +19,12 @@ declare type TNavigationItem = {
 };
 
 declare type TApp = {
-  title: string;
-  icon: string;
-  link: string;
-  landingPage?: string;
+  _id?: string;
+  code: string;
+  name: string;
+  description: string;
+  status?: string;
+  createdAt?: string | Date;
+  updatedAt?: string | Date;
+  deletedAt?: string | Date;
 };

package/types/permission.d.ts

@@ -12,3 +12,27 @@ declare type TPermissions = {
     [action: string]: TPermission;
   };
 };
+
+declare type TPerm = {
+  _id?: string;
+  app: string;
+  name: string;
+  key: string;
+  group: string;
+  description: string;
+  status?: string;
+  createdAt?: string | Date;
+  updatedAt?: string | Date;
+  deletedAt?: string | Date;
+};
+
+declare type TPermGroup = {
+  _id?: string;
+  app: string;
+  key: string;
+  label: string;
+  order: number;
+  createdAt?: string | Date;
+  updatedAt?: string | Date;
+  deletedAt?: string | Date;
+};

package/types/role.d.ts

@@ -2,8 +2,9 @@ declare type TRole = {
   _id?: string;
   name?: string;
   permissions?: Array<string>;
-  type?: string;
-  id?: string;
+  app: string;
+  org?: string;
+  description?: string;
   status?: string;
   default?: boolean;
   createdBy?: string;