@goweekdays/layer-common 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @goweekdays/layer-common
 
+## 1.3.1
+
+### Patch Changes
+
+- 8e6b91a: Fix sign up and member invite
+
 ## 1.3.0
 
 ### Minor Changes

package/components/MemberInvite.vue

@@ -0,0 +1,155 @@
+<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-1">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Email" required />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="invite.email"
+                  :rules="[requiredRule, emailRule]"
+                ></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="Role" required />
+              <v-col cols="12">
+                <v-select
+                  v-model="invite.role"
+                  :items="roles"
+                  item-title="name"
+                  item-value="_id"
+                  :loading="loadingRoles"
+                  :rules="[requiredRule]"
+                ></v-select>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="!localProps.app" cols="12" class="mb-1">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="App" required />
+              <v-col cols="12">
+                <v-select
+                  v-model="invite.app"
+                  :rules="[requiredRule]"
+                ></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 cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="emits('cancel')"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            @click="emits('submit')"
+            :disabled="localProps.disabled || !valid"
+          >
+            Invite
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const emits = defineEmits(["submit", "cancel", "edit", "delete"]);
+
+const localProps = defineProps({
+  title: {
+    type: String,
+    default: "Invite Member",
+  },
+  app: {
+    type: String,
+    default: "",
+  },
+  org: {
+    type: String,
+    default: "",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const invite = defineModel<TMemberInvitation>({
+  default: () => useMember().invitation.value,
+});
+
+const message = defineModel("message", { default: "" });
+
+const valid = ref(false);
+
+const { requiredRule, emailRule } = 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/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,
                   }),
                 }"
               >
@@ -70,162 +63,22 @@
           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>
-
-      <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="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>
   </v-row>
 </template>
@@ -250,7 +103,7 @@ const props = defineProps({
   },
   type: {
     type: String,
-    default: "organization",
+    default: "org",
   },
   seatManagement: {
     type: String,
@@ -311,31 +164,34 @@ 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,
 } = 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,
+      type: props.type,
+    }),
+  {
+    watch: [headerSearch, page],
+  }
 );
 
 const loading = computed(() => getAllReqStatus.value === "pending");
@@ -348,105 +204,55 @@ 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;
-  }
-
-  selectedMemberId.value = role._id;
-  selectedRole.value = role.role;
-  selectedMemberRole.value = role.role;
-}
-
-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 })
-);
-
-watchEffect(() => {
-  if (getAllRoleReq.value) {
-    roles.value = getAllRoleReq.value.items;
-  }
-});
-
-watchEffect(() => {
-  if (selectedRole.value) {
-    message.value = "";
-  }
-});
+  dialogView.value = dialog;
+  Object.assign(member.value, JSON.parse(JSON.stringify(data)));
+  modeMember.value = mode;
 
-async function updateMemberRole() {
-  try {
-    await _updateMemberRole(
-      selectedMemberId.value ?? "",
-      selectedRole.value ?? "",
-      props.type,
-      props.orgId
-    );
-    await setMember({ mode: "assign-role" });
-    await getAll();
-  } catch (error: any) {
-    message.value = error?.response?._data?.message || "Failed to update role";
+  if (mode === "view") {
+    dialogView.value = true;
   }
 }
 
-function openUpdateDialog(id: string, action: string) {
-  updateAction.value = action;
-  selectedMemberId.value = id;
-  confirmDialog.value = true;
+function setInvite(dialog = true) {
+  dialogInvite.value = dialog;
+  Object.assign(
+    invitation.value,
+    JSON.parse(JSON.stringify(useMember().invitation.value))
+  );
 }
 
-function showMessage(msg: string, color: string) {
-  message.value = msg;
-  messageColor.value = color;
-  messageSnackbar.value = true;
-}
+const disabledInvite = ref(false);
 
-async function handleUpdateMemberStatus() {
-  if (!selectedMemberId.value) return;
-  updateLoading.value = true;
-  try {
-    const res = await _updateMemberStatus(
-      selectedMemberId.value,
-      updateAction.value
-    );
+const { inviteMember } = useVerification();
 
-    confirmDialog.value = false;
-    showMessage(res.message, "success");
-    getAll();
+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) {
-    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;
+    disabledInvite.value = false;
   }
 }
-const updateActionText = computed(() => {
-  const map: Record<string, string> = {
-    active: "Activate",
-    suspended: "Suspend",
-    deleted: "Delete",
-  };
-  return map[updateAction.value] || updateAction.value;
-});
+
+function handleRowClick(_: any, data: any) {
+  setMember({ data: data.item, mode: "view" });
+}
 </script>

package/composables/useLocalAuth.ts

@@ -12,32 +12,6 @@ export default function useLocalAuth() {
     });
   };
 
-  function authenticate() {
-    if (currentUser.value) {
-      return;
-    }
-
-    const user = useCookie("user", cookieConfig).value;
-
-    const { data: getCurrentUserReq, error: getCurrentUserErr } =
-      useLazyAsyncData("get-current-user", () =>
-        $fetch<TUser>(`/api/users/id/${user}`)
-      );
-
-    watchEffect(() => {
-      if (getCurrentUserReq.value) {
-        currentUser.value = getCurrentUserReq.value;
-      }
-    });
-
-    watchEffect(() => {
-      if (getCurrentUserErr.value) {
-        // Redirect to login page if user authentication fails
-        navigateTo({ name: "index" });
-      }
-    });
-  }
-
   async function login({ email = "", password = "", role = "" }) {
     return $fetch<Record<string, any>>("/api/auth/login", {
       method: "POST",
@@ -107,25 +81,16 @@ export default function useLocalAuth() {
     });
   }
 
-  function signUp(email: string, referral: string) {
-    return $fetch<TKeyValuePair>("/api/auth/sign-up", {
-      method: "POST",
-      body: { email, referral },
-    });
-  }
-
   return {
     currentUser,
     membership,
     permissions,
     hasPermission,
-    authenticate,
     login,
     logout,
     getCurrentUser,
     forgotPassword,
     resetPassword,
     verify,
-    signUp,
   };
 }

package/composables/useMember.ts

@@ -1,25 +1,18 @@
 export default function useMember() {
-  const members = useState<Array<TMember>>("members", () => []);
-  const page = useState("page", () => 1);
-  const pages = useState("pages", () => 0);
-  const pageRange = useState("pageRange", () => "-- - -- of --");
-
-  const member = useState<TMember>("member", () => ({
-    _id: "",
+  const member = ref<TMember>({
     org: "",
     orgName: "",
-    roleName: "",
     name: "",
     user: "",
     role: "",
-    type: "",
-    customerOrgId: "",
-    customerSiteId: "",
-    status: "",
-    createdAt: "",
-    updatedAt: "",
-    deletedAt: "",
-  }));
+  });
+
+  const invitation = ref<TMemberInvitation>({
+    email: "",
+    app: "",
+    org: "",
+    role: "",
+  });
 
   function getByUserId(user: string) {
     return $fetch<TMember>(`/api/members/user/${user}`);
@@ -32,6 +25,13 @@ export default function useMember() {
     });
   }
 
+  function getByApp({ app = "", user = "", org = "" } = {}) {
+    return $fetch<TMember>(`/api/members/app/${app}`, {
+      method: "GET",
+      query: { user, org },
+    });
+  }
+
   async function getAll({
     page = 1,
     search = "",
@@ -84,17 +84,14 @@ export default function useMember() {
     );
   }
   return {
-    members,
     member,
-    page,
-    pages,
-    pageRange,
-
+    invitation,
     getAll,
     getByUserId,
     createUserByVerification,
     createMemberInvite,
     getByUserType,
+    getByApp,
     updateMemberStatus,
     updateMemberRole,
   };

package/composables/useRole.ts

@@ -10,12 +10,12 @@ export default function useRole() {
     search = "",
     page = 1,
     limit = 20,
-    type = "",
+    app = "",
     org = "",
   } = {}) {
     return $fetch<Record<string, any>>("/api/roles", {
       method: "GET",
-      query: { search, page, limit, type, org },
+      query: { search, page, limit, app, org },
     });
   }
 

package/composables/useVerification.ts

@@ -13,7 +13,28 @@ export default function useUser() {
     });
   }
 
+  function inviteMember(value: {
+    email: string;
+    app: string;
+    org: string;
+    role: string;
+  }) {
+    return $fetch<Record<string, any>>("/api/verifications/member", {
+      method: "POST",
+      body: value,
+    });
+  }
+
+  function signUp(email: string) {
+    return $fetch<Record<string, any>>("/api/verifications/sign-up", {
+      method: "POST",
+      body: { email },
+    });
+  }
+
   return {
     getVerifications,
+    inviteMember,
+    signUp,
   };
 }

package/package.json

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

package/plugins/member.client.ts

@@ -1,6 +1,6 @@
 export default defineNuxtPlugin(() => {
   const router = useRouter();
-  const { getByUserType } = useMember();
+  const { getByApp } = useMember();
   const { getById: getRoleById } = useRole();
   const { membership, permissions } = useLocalAuth();
 
@@ -15,7 +15,7 @@ export default defineNuxtPlugin(() => {
 
     if (!membership.value) {
       try {
-        const member = await getByUserType(userId, APP, org);
+        const member = await getByApp({ app: APP, user: userId, org });
         membership.value = member;
 
         const role = await getRoleById(member.role);

package/types/member.d.ts

@@ -10,3 +10,10 @@ declare type TMember = {
   updatedAt?: string;
   deletedAt?: string;
 };
+
+declare type TMemberInvitation = {
+  email: string;
+  app: string;
+  org: string;
+  role: string;
+};

package/types/verification.d.ts

@@ -1,15 +1,20 @@
-declare type TVerificationMetadata = {
+declare type TVerMetadata = {
+  name?: string;
   app?: string;
   role?: string;
+  roleName?: string;
+  referralCode?: string;
+  org?: string;
+  orgName?: string;
 };
 
-declare type TVerification = {
+declare type TVer = {
   _id?: string;
   type: string;
   email: string;
-  metadata?: TVerificationMetadata;
+  metadata?: TVerMetadata;
   status?: string;
   createdAt: string;
-  updatedAt?: string | null;
+  updatedAt?: string;
   expireAt: string;
 };