@goweekdays/layer-common 1.0.0 → 1.0.2

package/components/RolePermissionFormPreviewUpdate.vue

@@ -0,0 +1,184 @@
+<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">
+          {{ props.name }}
+        </span>
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+      <v-form v-model="validForm" :disabled="disable">
+        <v-row no-gutters>
+          <v-col cols="12" class="mt-4">
+            <InputListGroupSelection
+              v-model="definedModel"
+              :items="props.permissions"
+              variant="outlined"
+              border="thin"
+              :error-messages="errorMessages"
+              :readonly="!edit"
+              :hint="
+                edit ? 'Select permissions' : 'Permissions are not editable'
+              "
+              persistent-hint
+            />
+          </v-col>
+
+          <v-col v-if="edit" cols="12" class="my-2">
+            <v-row no-gutters>
+              <v-col cols="12" class="text-center">
+                <span
+                  class="text-none text-subtitle-2 font-weight-medium text-error"
+                >
+                  {{ message }}
+                </span>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="my-2">
+            <v-row no-gutters>
+              <v-col cols="12" class="text-center">
+                <span
+                  class="text-none text-subtitle-2 font-weight-medium text-error"
+                >
+                  {{ message }}
+                </span>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card-text>
+
+    <v-toolbar>
+      <v-row class="px-6">
+        <v-col v-if="!edit" cols="6">
+          <v-btn
+            block
+            variant="text"
+            class="text-none"
+            size="large"
+            @click="emit('cancel')"
+          >
+            Close
+          </v-btn>
+        </v-col>
+
+        <v-col v-else cols="6">
+          <v-btn
+            block
+            variant="text"
+            class="text-none"
+            size="large"
+            @click="edit = false"
+            :disabled="disable"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col v-if="!edit" cols="6">
+          <v-btn
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="large"
+            :disabled="!validForm"
+            @click="edit = true"
+          >
+            Edit
+          </v-btn>
+        </v-col>
+
+        <v-col v-else cols="6">
+          <v-btn
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="large"
+            :disabled="!validForm"
+            @click="submit()"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const definedModel = defineModel<Array<string>>({
+  default: () => [],
+});
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: "Role",
+  },
+  id: {
+    type: String,
+    default: "",
+  },
+  permissions: {
+    type: Object,
+    default: () => ({}),
+  },
+  originalPermissions: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const validForm = ref(false);
+const message = ref("");
+const disable = ref(false);
+
+const emit = defineEmits(["success", "cancel"]);
+
+const edit = defineModel<boolean>("edit", {
+  default: false,
+});
+
+function equalListValue() {
+  return JSON.stringify(definedModel.value) ===
+    JSON.stringify(props.originalPermissions)
+    ? "No changes made"
+    : "";
+}
+
+const { requireListRule } = useUtils();
+
+const errorMessages = computed(() => {
+  const equalValue = equalListValue();
+  if (edit.value && equalValue) {
+    return equalValue;
+  }
+
+  const requiredValue = requireListRule(definedModel.value);
+  if (requiredValue) {
+    return requiredValue;
+  }
+
+  return "";
+});
+
+const { updatePermissionById } = useRole();
+
+async function submit() {
+  disable.value = true;
+  try {
+    await updatePermissionById(props.id, definedModel.value);
+    emit("success");
+  } catch (error: any) {
+    message.value = error.response._data.message;
+  } finally {
+    disable.value = false;
+  }
+}
+</script>

package/components/RolePermissionMain.vue

@@ -0,0 +1,376 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters>
+        <v-btn
+          class="text-none"
+          rounded="pill"
+          variant="tonal"
+          @click="createDialog = true"
+          size="large"
+          v-if="canCreateRole"
+        >
+          Create role
+        </v-btn>
+      </v-row>
+    </v-col>
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="getRoles()">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value="getRoles()"
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+
+        <v-data-table
+          :headers="props.headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="20"
+          fixed-header
+          hide-default-footer
+          hide-default-header
+          @click:row="tableRowClickHandler"
+          style="max-height: calc(100vh - (180px))"
+        >
+          <template #item.permissions="{ value }">
+            <span class="text-caption font-weight-bold text-capitalize">
+              permissions
+            </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"
+        :org="props.orgId"
+        @success="success()"
+        v-model:type="type"
+        :types="props.types"
+        @success:create-more="getRoles()"
+      />
+    </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>
+
+    <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>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  orgId: {
+    type: String,
+    default: "",
+  },
+  permissions: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+  types: {
+    type: Array as PropType<Array<{ title: string; value: string }>>,
+    default: () => [],
+  },
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [
+      {
+        title: "name",
+        value: "name",
+      },
+      {
+        title: "permissions",
+        value: "permissions",
+      },
+      { title: "App", value: "type" },
+      { title: "Action", value: "action-table" },
+    ],
+  },
+  canCreateRole: {
+    type: Boolean,
+    default: false,
+  },
+  canViewRole: {
+    type: Boolean,
+    default: false,
+  },
+  canViewByRole: {
+    type: Boolean,
+    default: false,
+  },
+  canDeleteRole: {
+    type: Boolean,
+    default: false,
+  },
+  canUpdateRole: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const type = defineModel<string>("type", {
+  type: String,
+  default: "",
+});
+
+const { headerSearch } = useLocal();
+
+const { getRoles: _getRoles } = useRole();
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const items = ref<Array<Record<string, any>>>([]);
+
+const {
+  data: getRoleReq,
+  refresh: getRoles,
+  status: getRoleReqStatus,
+} = useLazyAsyncData(
+  "roles-permissions-get-all",
+  () =>
+    _getRoles({
+      page: page.value,
+      search: headerSearch.value,
+      type: type.value,
+      org: props.orgId,
+    }),
+  {
+    watch: [page, headerSearch],
+  }
+);
+
+const loading = computed(() => getRoleReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getRoleReq.value) {
+    items.value = getRoleReq.value.items;
+    pages.value = getRoleReq.value.pages;
+    pageRange.value = getRoleReq.value.pageRange;
+  }
+});
+
+function tableRowClickHandler(_: any, data: any) {
+  previewDialog.value = true;
+  roleId.value = data.item._id;
+}
+
+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);
+
+watchEffect(() => {
+  if (!edit.value) {
+    selectedPermissions.value = originalPermissions.value;
+  }
+});
+
+const roleId = ref("");
+
+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;
+
+    selectedPermissions.value = role.value.permissions;
+    originalPermissions.value = role.value.permissions;
+  }
+});
+
+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);
+});
+
+function successfulUpdate() {
+  previewDialog.value = false;
+  getRoles();
+  getRoleById();
+  edit.value = false;
+}
+
+const confirmDialog = ref(false);
+const selectedRoleId = ref<string | null>(null);
+const deleteLoading = ref(false);
+
+function openDeleteDialog(id: string) {
+  selectedRoleId.value = id;
+  confirmDialog.value = true;
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+async function handleDeleteRole() {
+  if (!selectedRoleId.value) return;
+  deleteLoading.value = true;
+  try {
+    const res = await deleteRole(selectedRoleId.value);
+
+    confirmDialog.value = false;
+    showMessage(res.message, "success");
+    getRoles();
+  } catch (error: any) {
+    const errorMessage = error?.response?._data?.message;
+    showMessage(errorMessage, "error");
+  } finally {
+    deleteLoading.value = false;
+    selectedRoleId.value = null;
+  }
+}
+</script>

package/components/SwitchContext.vue

@@ -0,0 +1,109 @@
+<template>
+  <v-menu
+    v-model="menu"
+    location="bottom"
+    offset="5px"
+    :close-on-content-click="false"
+  >
+    <template #activator="{ props }">
+      <v-list class="pa-0">
+        <v-list-item
+          v-bind="props"
+          :key="props.title"
+          :prepend-icon="prop.icon"
+          append-icon="mdi-chevron-down"
+          :to="props.route"
+          class="text-subtitle-2 font-weight-bold"
+          rounded="e-pill"
+        >
+          <v-list-item-title class="text-truncate">
+            {{ name || `Select ${prop.title}` }}
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </template>
+
+    <v-card width="300px" rounded="lg" class="pa-4">
+      <span class="text-subtitle-2 font-weight-bold">
+        Switch {{ prop.title }} context
+      </span>
+      <v-text-field
+        v-model="search"
+        @keydown.enter="emit('search')"
+        density="compact"
+        width="100%"
+        hide-details
+        class="mb-2"
+      >
+        <template #prepend-inner>
+          <v-icon>mdi-magnify</v-icon>
+        </template>
+      </v-text-field>
+      <v-divider />
+      <v-list class="pa-0 my-2" density="compact" max-height="200px">
+        <v-list-item
+          density="compact"
+          class="text-caption font-weight-bold"
+          v-for="item in prop.items"
+          :key="item.value"
+          @click="selectItem(item.value)"
+        >
+          <v-icon size="16" class="mr-2">
+            {{ selected === item.value ? "mdi-check" : "" }}
+          </v-icon>
+
+          {{ item.text }}
+        </v-list-item>
+      </v-list>
+
+      <slot name="footer"></slot>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+  title: {
+    type: String,
+    required: true,
+    default: "app",
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    required: false,
+    default: () => [],
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: "mdi-domain",
+  },
+  logo: {
+    type: String,
+    required: false,
+    default: "",
+  },
+});
+
+const menu = defineModel<boolean>("menu", { required: false, default: false });
+const selected = defineModel<string>("selected", {
+  required: false,
+  default: "",
+});
+const search = defineModel<string>("search", {
+  required: false,
+  default: "",
+});
+
+const emit = defineEmits(["search", "select"]);
+
+const name = computed(() => {
+  return prop.items.find((item) => item.value === selected.value)?.text ?? "";
+});
+
+const selectItem = (value: string) => {
+  selected.value = value;
+  menu.value = false;
+  emit("select", value);
+};
+</script>

package/components/SwitchOrg.vue

@@ -90,7 +90,7 @@ const profile = computed(() => {
   return `/api/public/${currentUser.value?.profile}`;
 });
 
-const { getOrgs: _getOrgs, currentOrg } = useOrg();
+const { getByUserId: _getByUserId, currentOrg } = useOrg();
 
 const orgs = ref<Array<Record<string, any>>>([]);
 const page = ref(1);
@@ -106,18 +106,17 @@ watch(currentOrg, () => {
   setOrg();
 });
 
-async function getOrgs() {
-  try {
-    const res = await _getOrgs({ user: currentUser.value?._id });
-    orgs.value = res.items;
-    page.value = res.page;
+const { data: userOrgReq } = useLazyAsyncData("orgs-by-user", () => {
+  return _getByUserId({ user: currentUser.value?._id });
+});
+
+watchEffect(() => {
+  if (userOrgReq.value) {
+    orgs.value = userOrgReq.value.items;
+    page.value = userOrgReq.value.page;
     setOrg();
-  } catch (error) {
-    console.log(error);
   }
-}
-
-getOrgs();
+});
 
 function switchOrg(org: string) {
   navigateTo({