@goweekdays/layer-common 1.3.1 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @goweekdays/layer-common
 
+## 1.3.2
+
+### Patch Changes
+
+- d3b466d: Revamp member and verification
+
 ## 1.3.1
 
 ### Patch Changes

package/components/InvitationMain.vue

@@ -1,20 +1,5 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          class="text-none mr-2"
-          rounded="pill"
-          variant="tonal"
-          :to="props.inviteRoute"
-          size="large"
-          v-if="props.inviteMember"
-        >
-          Invite member
-        </v-btn>
-      </v-row>
-    </v-col>
-
     <v-col cols="12">
       <v-card
         width="100%"
@@ -46,24 +31,11 @@
           <template #extension>
             <v-tabs>
               <v-tab
-                :to="{
-                  name: props.route,
-                  params: props.org
-                    ? { status: 'pending', org: props.org }
-                    : { status: 'active' },
-                }"
-              >
-                Pending
-              </v-tab>
-              <v-tab
-                :to="{
-                  name: props.route,
-                  params: props.org
-                    ? { status: 'expired', org: props.org }
-                    : { status: 'pending' },
-                }"
+                v-for="(routeStatus, routeStatusIndex) in props.routeStatus"
+                :key="routeStatusIndex"
+                :to="routeStatus"
               >
-                Expired
+                {{ routeStatus.title }}
               </v-tab>
             </v-tabs>
           </template>
@@ -90,6 +62,29 @@
         </v-data-table>
       </v-card>
     </v-col>
+
+    <v-dialog v-model="dialogView" width="450" persistent>
+      <MemberInvite
+        title="Invite Details"
+        :app="props.app"
+        v-model="invitation"
+        @close="setInvite({ dialog: false })"
+        @cancel:invite="handleOpenCancelInvite()"
+        mode="view"
+      />
+    </v-dialog>
+
+    <v-dialog v-model="dialogCancelInvite" width="450" persistent>
+      <ConfirmationPrompt
+        title="Cancel Invite"
+        action="Cancel Invite"
+        :content="`Are you sure you want to cancel invitation to ${invitation.email}?`"
+        @cancel="dialogCancelInvite = false"
+        @confirm="submitCancelInvite()"
+        v-model:message="message"
+        :disabled="disabledDelete"
+      />
+    </v-dialog>
   </v-row>
 </template>
 
@@ -105,27 +100,20 @@ const props = defineProps({
   },
   app: {
     type: String,
-    default: "organization",
-  },
-  inviteMember: {
-    type: Boolean,
-    default: false,
-  },
-  inviteRoute: {
-    type: Object as PropType<Record<string, any>>,
-    default: () => ({
-      name: "index",
-      params: {},
-    }),
+    default: "org",
   },
   route: {
     type: String,
     default: "index",
   },
+  routeStatus: {
+    type: Array as PropType<
+      { title: string; name: string; params?: Record<string, any> }[]
+    >,
+    default: () => [],
+  },
 });
 
-const organization = (useRoute().params.organization as string) ?? "";
-
 const headers = [
   {
     title: "Date",
@@ -137,11 +125,14 @@ const headers = [
   },
   {
     title: "App",
-    value: "metadata.app",
+    value: "metadata.roleName",
   },
 ];
 
-const { getVerifications } = useVerification();
+const { getVerifications, cancelInvite } = useVerification();
+const { invitation } = useMember();
+
+const dialogView = ref(false);
 
 const page = ref(1);
 const pages = ref(0);
@@ -180,11 +171,27 @@ watchEffect(() => {
   }
 });
 
-function tableRowClickHandler(_: any, row: any) {
-  const item = items.value[row.index];
-  useRouter().push({
-    name: "roles-permissions-id",
-    params: { id: item._id },
+function setInvite({
+  dialog = true,
+  data = useMember().invitation.value,
+} = {}) {
+  Object.assign(invitation.value, JSON.parse(JSON.stringify(data)));
+
+  if (dialog) {
+    dialogView.value = dialog;
+  }
+}
+
+function tableRowClickHandler(_: any, data: any) {
+  setInvite({
+    data: {
+      _id: data.item._id,
+      email: data.item.email,
+      role: data.item.metadata.role,
+      org: data.item.metadata.org,
+      app: data.item.metadata.app,
+    },
+    dialog: true,
   });
 }
 
@@ -198,6 +205,29 @@ watch(selectAll, (curr) => {
     selected.value.push(...ids);
   }
 });
+
+const dialogCancelInvite = ref(false);
+const disabledDelete = ref(false);
+const message = ref("");
+
+function handleOpenCancelInvite() {
+  dialogCancelInvite.value = true;
+  dialogView.value = false;
+}
+
+async function submitCancelInvite() {
+  disabledDelete.value = true;
+  try {
+    await cancelInvite(invitation.value._id ?? "");
+    await getInvitations();
+
+    dialogCancelInvite.value = false;
+  } catch (error: any) {
+    message.value = error.response._data.message || "An error occurred.";
+  } finally {
+    disabledDelete.value = false;
+  }
+}
 </script>
 
 <style scoped>

package/components/Layout/Header.vue

@@ -155,7 +155,7 @@
                 rounded="xl"
                 variant="tonal"
                 size="x-large"
-                @click="logout()"
+                :to="{ name: 'logout' }"
                 class="text-none text-subtitle-1 font-weight-regular"
               >
                 Logout

package/components/ListGroupSelection.vue

@@ -37,25 +37,27 @@
           >
             <v-divider></v-divider>
             <v-list-item v-if="attrs.readonly" density="compact">
-              <template #title class="pl-2">
-                <span class="text-subtitle-2 text-capitalize">
+              <template #title>
+                <span class="text-subtitle-2 text-capitalize pl-11">
                   {{ item.title }}
                 </span>
               </template>
 
-              <template #subtitle class="pl-2">
-                <span class="text-subtitle-2">{{ item.description }}</span>
+              <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 class="pl-2">
+              <template #title>
                 <span class="text-subtitle-2 text-capitalize">
                   {{ item.title }}
                 </span>
               </template>
 
-              <template #subtitle class="pl-2">
+              <template #subtitle>
                 <span class="text-subtitle-2 text-capitalize">
                   {{ item.description }}
                 </span>

package/components/MemberForm.vue

@@ -0,0 +1,227 @@
+<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" :disabled="localProps.disabled">
+        <v-row no-gutters>
+          <v-col cols="12" class="mb-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Name" />
+              <v-col cols="12">
+                <v-text-field v-model="member.name" readonly></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mb-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Role" />
+              <v-col cols="12">
+                <v-select
+                  v-model="member.role"
+                  :items="roles"
+                  item-title="name"
+                  item-value="_id"
+                  :rules="isMutable ? [requiredRule] : []"
+                  :readonly="!isMutable"
+                  :loading="loadingRoles"
+                ></v-select>
+              </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="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="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-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('assign')">
+                <v-list-item-title class="text-subtitle-2">
+                  Assign Role
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="member.status === 'active'"
+                @click="emits('suspend')"
+                class="text-red"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  Suspend Member
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="member.status === 'suspended'"
+                @click="emits('activate')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  Unsuspend Member
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item @click="emits('delete')">
+                <v-list-item-title class="text-subtitle-2">
+                  Remove Member
+                </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.disabled"
+          >
+            {{
+              localProps.mode === "assign-role" ? "Assign 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",
+  "suspend",
+  "activate",
+  "assign",
+  "delete",
+]);
+
+const isMutable = computed(() => ["assign-role"].includes(localProps.mode));
+
+const localProps = defineProps({
+  title: {
+    type: String,
+    default: "Member Form",
+  },
+  app: {
+    type: String,
+    default: "",
+  },
+  org: {
+    type: String,
+    default: "",
+  },
+  mode: {
+    type: String,
+    default: "add",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const member = defineModel<TMember>({
+  default: () => useMember().member.value,
+});
+
+const perm = defineModel<TPerm>("perm", {
+  default: () => usePermission().perm.value,
+});
+
+const message = defineModel("message", { default: "" });
+
+const valid = ref(false);
+
+const { requiredRule } = useUtils();
+
+const { getAll: getAllRoles } = useRole();
+
+const roles = ref<Array<Record<string, any>>>([]);
+
+const { data: roleData, status: roleReqStatus } = await useLazyAsyncData(
+  `get-all-role-app-${localProps.app}-${localProps.org ?? "org"}`,
+  () => getAllRoles({ org: localProps.org, app: localProps.app, limit: 50 })
+);
+
+const loadingRoles = computed(() => roleReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (roleData.value && roleData.value.items) {
+    roles.value = roleData.value.items;
+  }
+});
+</script>

package/components/MemberInvite.vue

@@ -13,11 +13,16 @@
         <v-row no-gutters>
           <v-col cols="12" class="mb-1">
             <v-row no-gutters>
-              <InputLabel class="text-capitalize" title="Email" required />
+              <InputLabel
+                class="text-capitalize"
+                title="Email"
+                :required="isMutable"
+              />
               <v-col cols="12">
                 <v-text-field
                   v-model="invite.email"
-                  :rules="[requiredRule, emailRule]"
+                  :rules="isMutable ? [requiredRule, emailRule] : []"
+                  :readonly="!isMutable"
                 ></v-text-field>
               </v-col>
             </v-row>
@@ -25,7 +30,11 @@
 
           <v-col cols="12" class="mb-1">
             <v-row no-gutters>
-              <InputLabel class="text-capitalize" title="Role" required />
+              <InputLabel
+                class="text-capitalize"
+                title="Role"
+                :required="isMutable"
+              />
               <v-col cols="12">
                 <v-select
                   v-model="invite.role"
@@ -33,7 +42,8 @@
                   item-title="name"
                   item-value="_id"
                   :loading="loadingRoles"
-                  :rules="[requiredRule]"
+                  :rules="isMutable ? [requiredRule] : []"
+                  :readonly="!isMutable"
                 ></v-select>
               </v-col>
             </v-row>
@@ -72,7 +82,7 @@
 
     <v-toolbar density="compact">
       <v-row no-gutters>
-        <v-col cols="6">
+        <v-col v-if="localProps.mode === 'add'" cols="6">
           <v-btn
             tile
             block
@@ -85,7 +95,20 @@
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
+        <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 === 'add'" cols="6">
           <v-btn
             tile
             block
@@ -99,13 +122,35 @@
             Invite
           </v-btn>
         </v-col>
+
+        <v-col v-if="localProps.mode === 'view'" cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            @click="emits('cancel:invite')"
+            :disabled="localProps.disabled"
+          >
+            Cancel Invite
+          </v-btn>
+        </v-col>
       </v-row>
     </v-toolbar>
   </v-card>
 </template>
 
 <script setup lang="ts">
-const emits = defineEmits(["submit", "cancel", "edit", "delete"]);
+const emits = defineEmits([
+  "submit",
+  "cancel",
+  "edit",
+  "delete",
+  "close",
+  "cancel:invite",
+]);
 
 const localProps = defineProps({
   title: {
@@ -124,8 +169,14 @@ const localProps = defineProps({
     type: Boolean,
     default: false,
   },
+  mode: {
+    type: String,
+    default: "add",
+  },
 });
 
+const isMutable = computed(() => ["add"].includes(localProps.mode));
+
 const invite = defineModel<TMemberInvitation>({
   default: () => useMember().invitation.value,
 });