@goweekdays/layer-common 1.2.4 → 1.2.6

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,90 +60,61 @@
             </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-model="dialogAdd" width="500" persistent>
+      <RoleForm
+        v-model="role"
+        :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"
+        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()"
+        :message="message"
+      />
+    </v-dialog>
   </v-row>
 </template>
 
 <script setup lang="ts">
 const props = defineProps({
+  app: {
+    type: String,
+    default: "",
+  },
   orgId: {
     type: String,
     default: "",
@@ -201,15 +172,54 @@ const type = defineModel<string>("type", {
 
 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,
+        type: props.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>>>([]);
 
@@ -242,135 +252,61 @@ watchEffect(() => {
 });
 
 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();
+  setRole({ data: data.item, mode: "view", dialog: true });
 }
 
-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 dialogAdd = ref(false);
 
-const { getRoleById: _getRoleById, deleteRole } = useRole();
-
-const { data: role, refresh: getRoleById } = useLazyAsyncData(
-  "role-permissions-get-by-id",
-  () => _getRoleById(roleId.value)
-);
-
-watchEffect(() => {
-  if (roleId.value) {
-    getRoleById();
-  }
-});
+const dialogPreview = ref(false);
 
-watchEffect(() => {
-  if (role.value) {
-    name.value = role.value.name;
-
-    selectedPermissions.value = role.value.permissions;
-    originalPermissions.value = role.value.permissions;
+async function submitAdd() {
+  try {
+    await addRole({
+      name: role.value.name,
+      permissions: role.value.permissions,
+      type: role.value.type,
+      org: props.orgId,
+    });
+    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/useAddress.ts

@@ -13,7 +13,7 @@ export default function useAddress() {
     postalCode = "",
     taxId = "",
   } = {}) {
-    return useNuxtApp().$api("/api/addresses", {
+    return $fetch("/api/addresses", {
       method: "POST",
       body: {
         type,
@@ -57,18 +57,18 @@ export default function useAddress() {
       payload.org = orgId;
     }
 
-    return useNuxtApp().$api(`/api/addresses/details/${id}`, {
+    return $fetch(`/api/addresses/details/${id}`, {
       method: "PUT",
       body: payload,
     });
   }
 
   function getByUserId(user = "") {
-    return useNuxtApp().$api<TAddress>(`/api/addresses/user/${user}`);
+    return $fetch<TAddress>(`/api/addresses/user/${user}`);
   }
 
   function getByOrgId(id = "") {
-    return useNuxtApp().$api<TAddress>(`/api/addresses/org/${id}`);
+    return $fetch<TAddress>(`/api/addresses/org/${id}`);
   }
 
   const _address = useState("address", (): TAddress => {

package/composables/useChartOfAccount.ts

@@ -7,7 +7,7 @@ export default function useChartOfAccount() {
       children?: number;
     }
   ) {
-    return useNuxtApp().$api<Record<string, any>>("/api/chart-of-accounts", {
+    return $fetch<Record<string, any>>("/api/chart-of-accounts", {
       method: "GET",
       query: { page, status, orgId, children },
     });
@@ -23,33 +23,30 @@ export default function useChartOfAccount() {
   };
 
   function add(value: TAddPayload) {
-    return useNuxtApp().$api<TAddPayload>("/api/chart-of-accounts", {
+    return $fetch<TAddPayload>("/api/chart-of-accounts", {
       method: "POST",
       body: value,
     });
   }
 
   function getById(id: string) {
-    return useNuxtApp().$api<Record<string, any>>(
-      `/api/chart-of-accounts/id/${id}`
-    );
+    return $fetch<Record<string, any>>(`/api/chart-of-accounts/id/${id}`);
   }
 
   function updateById(
     id: string,
     value: Pick<TAddPayload, "name" | "code" | "normalBalance" | "parent">
   ) {
-    return useNuxtApp().$api<TAddPayload>(`/api/chart-of-accounts/id/${id}`, {
+    return $fetch<TAddPayload>(`/api/chart-of-accounts/id/${id}`, {
       method: "PUT",
       body: value,
     });
   }
 
   function deleteById(id: string) {
-    return useNuxtApp().$api<Record<string, any>>(
-      `/api/chart-of-accounts/id/${id}`,
-      { method: "DELETE" }
-    );
+    return $fetch<Record<string, any>>(`/api/chart-of-accounts/id/${id}`, {
+      method: "DELETE",
+    });
   }
 
   return {

package/composables/useFile.ts

@@ -7,19 +7,16 @@ export default function useFile() {
     const formData = new FormData();
     formData.append("file", file);
 
-    return useNuxtApp().$api<Record<string, any>>("/api/files", {
+    return $fetch<Record<string, any>>("/api/files", {
       method: "POST",
       body: formData,
     });
   }
 
   function deleteFile(attachmentId: string) {
-    return useNuxtApp().$api<Record<string, any>>(
-      `/api/files/${attachmentId}`,
-      {
-        method: "DELETE",
-      }
-    );
+    return $fetch<Record<string, any>>(`/api/files/${attachmentId}`, {
+      method: "DELETE",
+    });
   }
 
   return {

package/composables/useInvoice.ts

@@ -4,29 +4,23 @@ export default function useInvoice() {
       throw new Error("Subscription ID is required");
     }
 
-    return useNuxtApp().$api<Record<string, any>>(
-      `/api/invoices/subscription/${id}`,
-      {
-        method: "GET",
-        params: {
-          search,
-          page,
-        },
-      }
-    );
+    return $fetch<Record<string, any>>(`/api/invoices/subscription/${id}`, {
+      method: "GET",
+      params: {
+        search,
+        page,
+      },
+    });
   }
 
   function getByNumber(number: string) {
-    return useNuxtApp().$api<Record<string, any>>(
-      `/api/invoices/number/${number}`,
-      {
-        method: "GET",
-      }
-    );
+    return $fetch<Record<string, any>>(`/api/invoices/number/${number}`, {
+      method: "GET",
+    });
   }
 
   function getByDueDateStatus(date: string, status: string) {
-    return useNuxtApp().$api<Record<string, any>>(
+    return $fetch<Record<string, any>>(
       `/api/invoices/due-date/${date}/status/${status}`,
       {
         method: "GET",

package/composables/useLocalAuth.ts

@@ -21,7 +21,7 @@ export default function useLocalAuth() {
 
     const { data: getCurrentUserReq, error: getCurrentUserErr } =
       useLazyAsyncData("get-current-user", () =>
-        useNuxtApp().$api<TUser>(`/api/users/id/${user}`)
+        $fetch<TUser>(`/api/users/id/${user}`)
       );
 
     watchEffect(() => {
@@ -39,7 +39,7 @@ export default function useLocalAuth() {
   }
 
   async function login({ email = "", password = "", role = "" }) {
-    return useNuxtApp().$api<Record<string, any>>("/api/auth/login", {
+    return $fetch<Record<string, any>>("/api/auth/login", {
       method: "POST",
       body: JSON.stringify({ email, password, role }),
     });
@@ -55,7 +55,7 @@ export default function useLocalAuth() {
     const user = useCookie("user", cookieConfig).value;
     if (!user) return null;
     try {
-      const _user = await useNuxtApp().$api<TUser>(`/api/users/id/${user}`, {
+      const _user = await $fetch<TUser>(`/api/users/id/${user}`, {
         method: "GET",
       });
 
@@ -72,7 +72,7 @@ export default function useLocalAuth() {
     }
 
     try {
-      const response = await useNuxtApp().$api("/api/auth/forget-password", {
+      const response = await $fetch("/api/auth/forget-password", {
         method: "POST",
         body: JSON.stringify({ email }),
         headers: { "Content-Type": "application/json" },
@@ -90,7 +90,7 @@ export default function useLocalAuth() {
     passwordConfirmation: string
   ) {
     try {
-      return await useNuxtApp().$api("/api/auth/reset-password", {
+      return await $fetch("/api/auth/reset-password", {
         method: "POST",
         body: JSON.stringify({ otp, newPassword, passwordConfirmation }),
         headers: { "Content-Type": "application/json" },
@@ -102,13 +102,13 @@ export default function useLocalAuth() {
   }
 
   function verify(id: string) {
-    return useNuxtApp().$api<TKeyValuePair>(`/api/auth/verify/${id}`, {
+    return $fetch<TKeyValuePair>(`/api/auth/verify/${id}`, {
       method: "GET",
     });
   }
 
   function signUp(email: string, referral: string) {
-    return useNuxtApp().$api<TKeyValuePair>("/api/auth/sign-up", {
+    return $fetch<TKeyValuePair>("/api/auth/sign-up", {
       method: "POST",
       body: { email, referral },
     });

package/composables/useMember.ts

@@ -22,11 +22,11 @@ export default function useMember() {
   }));
 
   function getByUserId(user: string) {
-    return useNuxtApp().$api<TMember>(`/api/members/user/${user}`);
+    return $fetch<TMember>(`/api/members/user/${user}`);
   }
 
   function getByUserType(user: string, type: string, org?: string) {
-    return useNuxtApp().$api<TMember>(`/api/members/user/${user}/app/${type}`, {
+    return $fetch<TMember>(`/api/members/user/${user}/app/${type}`, {
       method: "GET",
       query: { org },
     });
@@ -41,7 +41,7 @@ export default function useMember() {
     type = "",
     status = "active",
   } = {}) {
-    return useNuxtApp().$api<Record<string, any>>("/api/members", {
+    return $fetch<Record<string, any>>("/api/members", {
       method: "GET",
       query: { page, limit, search, user, org, type, status },
     });
@@ -50,25 +50,19 @@ export default function useMember() {
     verificationId: string,
     payload: Record<string, any>
   ) {
-    return useNuxtApp().$api<Record<string, any>>(
-      `/api/users/invite/${verificationId}`,
-      {
-        method: "POST",
-        body: payload,
-      }
-    );
+    return $fetch<Record<string, any>>(`/api/users/invite/${verificationId}`, {
+      method: "POST",
+      body: payload,
+    });
   }
 
   function createMemberInvite(verificatonId: string) {
-    return useNuxtApp().$api<TMember>(
-      `/api/members/verification/${verificatonId}`,
-      {
-        method: "POST",
-      }
-    );
+    return $fetch<TMember>(`/api/members/verification/${verificatonId}`, {
+      method: "POST",
+    });
   }
   function updateMemberStatus(id: string, status: string) {
-    return useNuxtApp().$api<Record<string, any>>(
+    return $fetch<Record<string, any>>(
       `/api/members/status/${status}/id/${id}`,
       {
         method: "PUT",
@@ -82,7 +76,7 @@ export default function useMember() {
     type: string,
     org: string
   ) {
-    return useNuxtApp().$api<Record<string, any>>(
+    return $fetch<Record<string, any>>(
       `/api/members/id/${id}/role/${role}/type/${type}/org/${org}`,
       {
         method: "PUT",

package/composables/useOrder.ts

@@ -5,7 +5,7 @@ export default function useOrder() {
     page = 1,
     status = "succeeded",
   } = {}) {
-    return useNuxtApp().$api<Record<string, any>>("/api/orders", {
+    return $fetch<Record<string, any>>("/api/orders", {
       method: "GET",
       query: {
         search,