@goweekdays/layer-common 1.3.0 → 1.3.2

package/components/MemberMain.vue

@@ -1,18 +1,15 @@
 <template>
   <v-row no-gutters>
-    <v-col v-if="props.seatManagement !== 'index'" cols="12" class="mb-2">
+    <v-col cols="12" class="mb-2">
       <v-row no-gutters>
         <v-btn
-          class="text-none"
+          class="text-none mr-2"
           rounded="pill"
           variant="tonal"
-          :to="{
-            name: props.seatManagement,
-            params: { organization: props.orgId },
-          }"
           size="large"
+          @click="setInvite()"
         >
-          Manage seats
+          Invite
         </v-btn>
       </v-row>
     </v-col>
@@ -31,11 +28,7 @@
               <span class="mr-2 text-caption text-font gray">
                 {{ pageRange }}
               </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="getAll()"
-              />
+              <local-pagination v-model="page" :length="pages" />
             </v-row>
           </template>
 
@@ -51,7 +44,7 @@
                   name: props.route,
                   params: setRouteParams({
                     status: tab.status,
-                    organization: props.orgId,
+                    org: props.orgId,
                   }),
                 }"
               >
@@ -66,166 +59,86 @@
           :items="items"
           item-value="_id"
           items-per-page="20"
-          fixed-header
+          hide-default-header
           hide-default-footer
           style="max-height: calc(100vh - (126px))"
           :loading="loading"
+          @click:row="handleRowClick"
         >
-          <template #item.nature="{ item }">
-            {{ replaceMatch(item.nature, "_", " ") }}
-          </template>
-          <template #item.action-table="{ item }">
-            <v-menu
-              v-if="
-                (status === 'active' &&
-                  (canSuspendMembers || canDeleteMembers)) ||
-                (status === 'suspended' &&
-                  (canActivateMembers || canDeleteMembers))
-              "
-              v-model="item.menuOpen"
-              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
-                  v-if="props.assignRole"
-                  @click="
-                    setMember({
-                      dialog: true,
-                      mode: 'assign-role',
-                      role: item,
-                    })
-                  "
-                >
-                  Assign Role
-                </v-list-item>
-
-                <v-list-item
-                  v-if="status === 'active' && canSuspendMembers"
-                  @click="openUpdateDialog(item.user, 'suspended')"
-                >
-                  Suspend
-                </v-list-item>
-                <v-list-item
-                  v-if="status === 'suspended' && canActivateMembers"
-                  @click="openUpdateDialog(item.user, 'active')"
-                >
-                  Activate
-                </v-list-item>
-                <v-list-item
-                  v-if="canDeleteMembers"
-                  @click="openUpdateDialog(item.user, 'deleted')"
-                >
-                  Delete
-                </v-list-item>
-              </v-list>
-            </v-menu>
-          </template>
         </v-data-table>
       </v-card>
     </v-col>
-    <ConfirmDialog
-      v-model="confirmDialog"
-      :loading="updateLoading"
-      @submit="handleUpdateMemberStatus"
-    >
-      <template #title>
-        <span class="font-weight-medium text-h5">
-          {{ updateActionText }} Member</span
-        >
-      </template>
 
-      <template #description>
-        <p class="text-subtitle-2">
-          Are you sure you want to {{ updateActionText }} this Member? This
-          action cannot be undone.
-        </p>
-      </template>
+    <v-dialog v-model="dialogInvite" width="450" persistent>
+      <MemberInvite
+        v-model="invitation"
+        :app="type"
+        :org="orgId"
+        :disabled="disabledInvite"
+        @cancel="setInvite(false)"
+        @submit="submitInvite()"
+        v-model:message="message"
+      />
+    </v-dialog>
 
-      <template #footer>
-        <v-btn
-          variant="text"
-          @click="confirmDialog = false"
-          :disabled="updateLoading"
-        >
-          Close
-        </v-btn>
-        <v-btn
-          color="primary"
-          variant="flat"
-          @click="handleUpdateMemberStatus"
-          :loading="updateLoading"
-        >
-          {{ updateActionText }} Member
-        </v-btn>
-      </template>
-    </ConfirmDialog>
-
-    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
-
-    <v-dialog v-model="assignRoleDialog" max-width="400px">
-      <v-card>
-        <v-card-title class="text-h5">Assign Role</v-card-title>
-        <v-card-text>
-          <v-form v-model="memberRoleForm" @submit.prevent="updateMemberRole()">
-            <v-row no-gutters>
-              <v-col cols="12" class="mb-2">
-                <v-row no-gutters>
-                  <InputLabel class="text-capitalize" title="Name" required />
-                  <v-col cols="12">
-                    <v-select
-                      v-model="selectedRole"
-                      :items="roles"
-                      item-value="_id"
-                      item-title="name"
-                      density="comfortable"
-                      :rules="[requiredRule]"
-                      :error-messages="
-                        selectedRole === selectedMemberRole
-                          ? 'Role already assigned'
-                          : ''
-                      "
-                      persistent-hint
-                    ></v-select>
-                  </v-col>
-
-                  <v-col cols="12" class="text-error text-center">
-                    {{ message }}
-                  </v-col>
-                </v-row>
-              </v-col>
-
-              <v-col cols="12">
-                <v-row>
-                  <v-col cols="6">
-                    <v-btn
-                      block
-                      variant="text"
-                      @click="setMember({ mode: 'assign-role' })"
-                    >
-                      Cancel
-                    </v-btn>
-                  </v-col>
-                  <v-col cols="6">
-                    <v-btn
-                      block
-                      variant="flat"
-                      color="black"
-                      :disabled="!memberRoleForm"
-                      type="submit"
-                    >
-                      Submit
-                    </v-btn>
-                  </v-col>
-                </v-row>
-              </v-col>
-            </v-row>
-          </v-form>
-        </v-card-text>
-      </v-card>
+    <v-dialog v-model="dialogView" width="450" persistent>
+      <MemberForm
+        title="View member details"
+        v-model="member"
+        mode="view"
+        @close="dialogView = false"
+        @assign="handleOpenAssignRole()"
+        @suspend="handleOpenSuspension()"
+        @activate="handleOpenActivation()"
+        @delete="handleOpenDelete()"
+      />
+    </v-dialog>
+
+    <v-dialog v-model="dialogAssignRole" width="450" persistent>
+      <MemberForm
+        title="Assign Role"
+        v-model="member"
+        mode="assign-role"
+        @cancel="dialogAssignRole = false"
+        @submit="submitAssignRole()"
+        :disabled="disabledAssignRole"
+      />
+    </v-dialog>
+
+    <v-dialog v-model="dialogSuspend" width="450" persistent>
+      <ConfirmationPrompt
+        title="Suspend Member"
+        action="Suspend Member"
+        content="Are you sure you want to suspend this member?"
+        @cancel="handleCancelSuspension()"
+        @confirm="submitStatus('suspended')"
+        v-model:message="message"
+        :disabled="disabledStatusChange"
+      />
+    </v-dialog>
+
+    <v-dialog v-model="dialogActive" width="450" persistent>
+      <ConfirmationPrompt
+        title="Unsuspend Member"
+        action="Unsuspend Member"
+        content="Are you sure you want to unsuspend this member?"
+        @cancel="handleCancelSuspension()"
+        @confirm="submitStatus('active')"
+        v-model:message="message"
+        :disabled="disabledStatusChange"
+      />
+    </v-dialog>
+
+    <v-dialog v-model="dialogDelete" width="450" persistent>
+      <ConfirmationPrompt
+        title="Remove Member"
+        action="Remove Member"
+        content="Are you sure you want to remove this member?"
+        @cancel="handleCancelDelete()"
+        @confirm="submitDelete()"
+        v-model:message="message"
+        :disabled="disabledDelete"
+      />
     </v-dialog>
   </v-row>
 </template>
@@ -250,7 +163,7 @@ const props = defineProps({
   },
   type: {
     type: String,
-    default: "organization",
+    default: "org",
   },
   seatManagement: {
     type: String,
@@ -293,15 +206,6 @@ const props = defineProps({
 
         value: "roleName",
       },
-      {
-        title: "Organization",
-
-        value: "orgName",
-      },
-      {
-        title: "Action",
-        value: "action-table",
-      },
     ],
   },
 });
@@ -311,31 +215,35 @@ const page = ref(1);
 const pages = ref(10);
 const pageRange = ref("-- - -- of --");
 
-const message = ref("");
-const messageSnackbar = ref(false);
-const messageColor = ref("");
-
 const {
+  invitation,
+  member,
   getAll: _getAll,
-  updateMemberStatus: _updateMemberStatus,
-  updateMemberRole: _updateMemberRole,
+  updateStatusById: _updateStatusById,
+  updateRoleById: _updateRoleById,
+  deleteById: _deleteById,
 } = useMember();
 
 const { headerSearch } = useLocal();
-const { replaceMatch, setRouteParams, requiredRule } = useUtils();
+const { setRouteParams } = useUtils();
 
 const {
   data: getAllReq,
   refresh: getAll,
   status: getAllReqStatus,
-} = useLazyAsyncData("get-all-members-by-status" + props.status, () =>
-  _getAll({
-    status: props.status,
-    org: props.orgId,
-    search: headerSearch.value,
-    page: page.value,
-    type: props.type,
-  })
+} = await useLazyAsyncData(
+  "get-all-members-by-status" + props.status,
+  () =>
+    _getAll({
+      status: props.status,
+      org: props.orgId,
+      search: headerSearch.value,
+      page: page.value,
+      app: props.type,
+    }),
+  {
+    watch: [headerSearch, page],
+  }
 );
 
 const loading = computed(() => getAllReqStatus.value === "pending");
@@ -348,105 +256,151 @@ watchEffect(() => {
   }
 });
 
-watch(headerSearch, () => {
-  getAll();
-});
-
-const confirmDialog = ref(false);
-const selectedMemberId = ref<string | null>(null);
-const updateLoading = ref(false);
-const updateAction = ref("");
-
-const memberRoleForm = ref(false);
-const assignRoleDialog = ref(false);
-const selectedRole = ref<string | null>(null);
-const selectedMemberRole = ref("");
+const dialogInvite = ref(false);
+const dialogView = ref(false);
+const modeMember = ref("");
+const message = ref("");
 
 function setMember({
-  dialog = false,
+  data = useMember().member.value,
   mode = "",
-  role = {} as Record<string, any>,
+  dialog = true,
 } = {}) {
-  if (mode === "assign-role") {
-    assignRoleDialog.value = dialog;
+  dialogView.value = dialog;
+  Object.assign(member.value, JSON.parse(JSON.stringify(data)));
+  modeMember.value = mode;
+
+  if (mode === "view") {
+    dialogView.value = true;
   }
+}
 
-  selectedMemberId.value = role._id;
-  selectedRole.value = role.role;
-  selectedMemberRole.value = role.role;
+function setInvite(dialog = true) {
+  dialogInvite.value = dialog;
+  Object.assign(
+    invitation.value,
+    JSON.parse(JSON.stringify(useMember().invitation.value))
+  );
 }
 
-const roles = ref<Array<Record<string, any>>>([]);
-const { getRoles } = useRole();
-const { data: getAllRoleReq } = useLazyAsyncData("get-roles", () =>
-  getRoles({ org: props.orgId, type: props.type, limit: 20 })
-);
+const disabledInvite = ref(false);
 
-watchEffect(() => {
-  if (getAllRoleReq.value) {
-    roles.value = getAllRoleReq.value.items;
+const { inviteMember } = useVerification();
+
+async function submitInvite() {
+  disabledInvite.value = true;
+  try {
+    await inviteMember({
+      app: props.type,
+      org: props.orgId,
+      email: invitation.value.email,
+      role: invitation.value.role,
+    });
+    await setInvite(false);
+  } catch (error: any) {
+    message.value = error.response._data.message || "An error occurred.";
+  } finally {
+    disabledInvite.value = false;
   }
-});
+}
 
-watchEffect(() => {
-  if (selectedRole.value) {
-    message.value = "";
+function handleRowClick(_: any, data: any) {
+  setMember({ data: data.item, mode: "view" });
+}
+
+const dialogAssignRole = ref(false);
+
+const disabledAssignRole = ref(false);
+
+function handleOpenAssignRole() {
+  dialogView.value = false;
+  dialogAssignRole.value = true;
+}
+
+async function submitAssignRole() {
+  disabledAssignRole.value = true;
+  try {
+    await _updateRoleById(member.value._id ?? "", member.value.role);
+    await getAll();
+    dialogAssignRole.value = false;
+    setMember({ dialog: false });
+  } catch (error: any) {
+    message.value = error.response._data.message || "An error occurred.";
+  } finally {
+    disabledAssignRole.value = false;
   }
-});
+}
+
+const dialogSuspend = ref(false);
+
+function handleOpenSuspension() {
+  dialogView.value = false;
+  dialogSuspend.value = true;
+}
+
+function handleCancelSuspension() {
+  dialogSuspend.value = false;
+  setMember({ dialog: false });
+}
+
+const dialogActive = ref(false);
+
+function handleOpenActivation() {
+  dialogView.value = false;
+  dialogActive.value = true;
+}
 
-async function updateMemberRole() {
+function handleCancelActivation() {
+  dialogActive.value = false;
+  setMember({ dialog: false });
+}
+
+const disabledStatusChange = ref(false);
+
+async function submitStatus(status = "") {
+  disabledStatusChange.value = true;
   try {
-    await _updateMemberRole(
-      selectedMemberId.value ?? "",
-      selectedRole.value ?? "",
-      props.type,
-      props.orgId
-    );
-    await setMember({ mode: "assign-role" });
+    await _updateStatusById(member.value._id ?? "", status);
     await getAll();
+    if (status === "suspended") {
+      dialogSuspend.value = false;
+    }
+    if (status === "active") {
+      dialogActive.value = false;
+    }
+    setMember({ dialog: false });
   } catch (error: any) {
-    message.value = error?.response?._data?.message || "Failed to update role";
+    message.value = error.response._data.message || "An error occurred.";
+  } finally {
+    disabledStatusChange.value = false;
   }
 }
 
-function openUpdateDialog(id: string, action: string) {
-  updateAction.value = action;
-  selectedMemberId.value = id;
-  confirmDialog.value = true;
+const dialogDelete = ref(false);
+
+function handleOpenDelete() {
+  dialogView.value = false;
+  dialogDelete.value = true;
 }
 
-function showMessage(msg: string, color: string) {
-  message.value = msg;
-  messageColor.value = color;
-  messageSnackbar.value = true;
+function handleCancelDelete() {
+  dialogDelete.value = false;
+  setMember({ dialog: false });
 }
 
-async function handleUpdateMemberStatus() {
-  if (!selectedMemberId.value) return;
-  updateLoading.value = true;
+const disabledDelete = ref(false);
+
+async function submitDelete() {
+  disabledDelete.value = true;
   try {
-    const res = await _updateMemberStatus(
-      selectedMemberId.value,
-      updateAction.value
-    );
-
-    confirmDialog.value = false;
-    showMessage(res.message, "success");
-    getAll();
+    await _deleteById(member.value._id ?? "");
+    await getAll();
+    dialogDelete.value = false;
+    setMember({ dialog: false });
   } catch (error: any) {
-    const errorMessage = error?.response?._data?.message;
-    showMessage(errorMessage, "error");
+    message.value = error.response._data.message || "An error occurred.";
   } finally {
-    updateLoading.value = false;
-    selectedMemberId.value = null;
+    disabledDelete.value = false;
   }
 }
-const updateActionText = computed(() => {
-  const map: Record<string, string> = {
-    active: "Activate",
-    suspended: "Suspend",
-    deleted: "Delete",
-  };
-  return map[updateAction.value] || updateAction.value;
-});
 </script>

package/components/RoleForm.vue

@@ -75,7 +75,7 @@
               />
               <v-col cols="12">
                 <v-select
-                  v-model="role.type"
+                  v-model="role.app"
                   :items="apps"
                   item-title="name"
                   item-value="code"

package/components/RolePermissionMain.vue

@@ -68,6 +68,7 @@
     <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()"
@@ -77,6 +78,7 @@
     <v-dialog v-model="dialogPreview" width="500" persistent>
       <RoleForm
         title="Role Details"
+        :app="props.app"
         v-model="role"
         @close="setRole({ mode: 'view' })"
         @edit="handOpenEdit()"
@@ -115,15 +117,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  orgId: {
+  org: {
     type: String,
     default: "",
   },
-  permissions: {
-    type: Object,
-    required: true,
-    default: () => ({}),
-  },
   types: {
     type: Array as PropType<Array<{ title: string; value: string }>>,
     default: () => [],
@@ -165,11 +162,6 @@ const props = defineProps({
   },
 });
 
-const type = defineModel<string>("type", {
-  type: String,
-  default: "",
-});
-
 const { headerSearch } = useLocal();
 
 const {
@@ -197,7 +189,7 @@ function setRole({
     JSON.parse(
       JSON.stringify({
         ...data,
-        type: props.app,
+        app: props.app,
       })
     )
   );
@@ -233,8 +225,8 @@ const {
     _getRoles({
       page: page.value,
       search: headerSearch.value,
-      type: type.value,
-      org: props.orgId,
+      app: props.app,
+      org: props.org,
     }),
   {
     watch: [page, headerSearch],
@@ -259,13 +251,16 @@ const dialogAdd = ref(false);
 
 const dialogPreview = ref(false);
 
+const { loggedInUser } = useLocalAuth();
+
 async function submitAdd() {
   try {
     await addRole({
       name: role.value.name,
       permissions: role.value.permissions,
-      type: role.value.type,
-      org: props.orgId,
+      app: role.value.app,
+      org: props.org,
+      createdBy: loggedInUser(),
     });
     setRole({ mode: "add" });
     getRoles();