@iservice365/layer-common 1.0.5 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.0.6
+
+### Patch Changes
+
+- adf0043: Revision - add invitation form as component
+
 ## 1.0.5
 
 ### Patch Changes

package/components/InvitationForm.vue

@@ -0,0 +1,237 @@
+<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.title }}
+        </span>
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto">
+      <v-form v-model="validForm" :disabled="disable">
+        <v-row no-gutters>
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Email" required />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="invite.email"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="APP === 'organization'" cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="App" required />
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="invite.app"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  :items="apps"
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Role" />
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="invite.role"
+                  :items="roles"
+                  item-title="name"
+                  item-value="_id"
+                  density="comfortable"
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-checkbox v-model="createMore" density="comfortable" hide-details>
+              <template #label>
+                <span class="text-subtitle-2 font-weight-bold">
+                  Create more
+                </span>
+              </template>
+            </v-checkbox>
+          </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 density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="cancel"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!validForm"
+            @click="submit"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const APP = useRuntimeConfig().public.APP;
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Invite Form",
+  },
+  mode: {
+    type: String,
+    default: "create",
+  },
+  permissions: {
+    type: Object,
+    default: () => ({}),
+  },
+  type: {
+    type: String,
+    default: "app",
+  },
+  org: {
+    type: String,
+    default: "",
+  },
+  site: {
+    type: Object as PropType<TCustomerSite>,
+    default: () => ({
+      name: "",
+      site: "",
+      siteOrg: "",
+      siteOrgName: "",
+      org: "",
+    }),
+  },
+  invite: {
+    type: Object as PropType<TVerification>,
+    default: () => ({
+      email: "",
+      metadata: { app: "organization", role: "" },
+    }),
+  },
+});
+
+const emit = defineEmits(["cancel", "success", "success:create-more"]);
+
+const validForm = ref(false);
+
+const invite = ref<Record<string, any>>({
+  email: "",
+  app: "organization",
+  role: "",
+});
+
+if (props.mode === "edit") {
+  invite.value.email = props.invite.email;
+  invite.value.app = props.invite.metadata?.app;
+  invite.value.role = props.invite.metadata?.role;
+}
+
+const { natureOfBusiness } = useLocal();
+
+const apps = computed(() => {
+  const items = natureOfBusiness.slice(1);
+  items.unshift({ title: "Organization", value: "organization" });
+  return items;
+});
+
+const roles = ref<Array<Record<string, any>>>([]);
+
+const { getRoles } = useRole();
+
+const app = computed(() => invite.value.metadata?.app ?? "");
+
+const { data: RolesData } = await useLazyAsyncData(
+  "get-roles-by-type",
+  () => getRoles({ org: props.org, type: app.value, limit: 50 }),
+  { watch: [app] }
+);
+
+watchEffect(() => {
+  if (RolesData.value) {
+    roles.value = RolesData.value.items;
+  }
+});
+
+watchEffect(() => {
+  if (invite.value.app) {
+    roles.value = [];
+    invite.value.role = "";
+  }
+});
+
+const createMore = ref(false);
+const disable = ref(false);
+
+const { requiredRule } = useUtils();
+
+const message = ref("");
+
+function resetInvite() {
+  invite.value.email = "";
+  invite.value.app = "organization";
+  invite.value.role = "";
+  message.value = "";
+}
+
+const { inviteUser } = useUser();
+
+async function submit() {
+  try {
+    await inviteUser(invite.value);
+    emit("success");
+
+    if (createMore.value) {
+      resetInvite();
+    }
+  } catch (error: any) {
+    message.value = error.response._data.message;
+  }
+}
+
+function cancel() {
+  emit("cancel");
+}
+</script>

package/components/InvitationMain.vue

@@ -6,10 +6,8 @@
           class="text-none mr-2"
           rounded="pill"
           variant="tonal"
-          :to="{
-            name: 'org-customer-site-invitations-invite',
-          }"
           size="large"
+          @click="inviteMember()"
           v-if="props.inviteMember"
         >
           Invite member
@@ -47,7 +45,7 @@
             <v-tabs>
               <v-tab
                 :to="{
-                  name: 'org-customer-site-invitations-status-status',
+                  name: props.route,
                   params: { status: 'pending' },
                 }"
               >
@@ -55,7 +53,7 @@
               </v-tab>
               <v-tab
                 :to="{
-                  name: 'org-customer-site-invitations-status-status',
+                  name: props.route,
                   params: { status: 'expired' },
                 }"
               >
@@ -82,7 +80,7 @@
             <v-chip>{{ value.length }}</v-chip>
           </template>
           <template #item.createdAt="{ item }">
-            {{ formatDate(item.createdAt) }}
+            {{ item.createdAt ? formatDate(item.createdAt) : "" }}
           </template>
           <template #item.action-table="{ item }">
             <v-menu
@@ -95,7 +93,7 @@
                 <v-icon v-bind="props">mdi-dots-horizontal</v-icon>
               </template>
               <v-list>
-                <v-list-item @click="openConfirmDialog(item._id)">
+                <v-list-item @click="openConfirmDialog(item._id ?? '')">
                   Cancel Invite
                 </v-list-item>
               </v-list>
@@ -104,40 +102,50 @@
         </v-data-table>
       </v-card>
     </v-col>
+
+    <ConfirmDialog
+      v-model="confirmDialog"
+      :loading="cancelLoading"
+      @submit="onConfirmCancel"
+    >
+      <template #title>
+        <span class="font-weight-medium text-h5">Cancel Invitation</span>
+      </template>
+      <template #description>
+        <p class="text-subtitle-2">
+          Are you sure you want to cancel this invitation? This action cannot be
+          undone.
+        </p>
+      </template>
+      <template #footer>
+        <v-btn
+          variant="text"
+          @click="confirmDialog = false"
+          :disabled="cancelLoading"
+        >
+          Close
+        </v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          @click="onConfirmCancel"
+          :loading="cancelLoading"
+        >
+          Cancel Invite
+        </v-btn>
+      </template>
+    </ConfirmDialog>
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+
+    <v-dialog v-model="dialogMember" max-width="450">
+      <InvitationForm
+        title="Invite member"
+        :org="org"
+        @cancel="dialogMember = false"
+        @invited="getVerifications()"
+      />
+    </v-dialog>
   </v-row>
-  <ConfirmDialog
-    v-model="confirmDialog"
-    :loading="cancelLoading"
-    @submit="onConfirmCancel"
-  >
-    <template #title>
-      <span class="font-weight-medium text-h5">Cancel Invitation</span>
-    </template>
-    <template #description>
-      <p class="text-subtitle-2">
-        Are you sure you want to cancel this invitation? This action cannot be
-        undone.
-      </p>
-    </template>
-    <template #footer>
-      <v-btn
-        variant="text"
-        @click="confirmDialog = false"
-        :disabled="cancelLoading"
-      >
-        Close
-      </v-btn>
-      <v-btn
-        color="primary"
-        variant="flat"
-        @click="onConfirmCancel"
-        :loading="cancelLoading"
-      >
-        Cancel Invite
-      </v-btn>
-    </template>
-  </ConfirmDialog>
-  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 </template>
 
 <script setup lang="ts">
@@ -146,7 +154,7 @@ const props = defineProps({
     type: String,
     default: "index",
   },
-  orgId: {
+  org: {
     type: String,
     default: "",
   },
@@ -179,8 +187,6 @@ const props = defineProps({
 const { authenticate } = useLocalAuth();
 authenticate();
 
-const organization = (useRoute().params.org as string) ?? "";
-
 const headers = [
   {
     title: "Date",
@@ -281,4 +287,10 @@ watchEffect(() => {
     useRouter().back();
   }
 });
+
+const dialogMember = ref(false);
+
+function inviteMember() {
+  dialogMember.value = true;
+}
 </script>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iservice365/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/plugins/secure-member.client.ts

@@ -9,14 +9,7 @@ export default defineNuxtPlugin(() => {
   router.afterEach((to) => {
     const isMember = to.meta?.memberOnly;
 
-    if (typeof isMember === "boolean" && !isMember) {
-      navigateTo(
-        {
-          name: "index",
-        },
-        { replace: true }
-      );
-    }
+    if (!isMember) return;
 
     const APP = useRuntimeConfig().public.APP;
     const org = computed(

package/types/verification.d.ts

@@ -9,12 +9,12 @@ declare type TMiniVerification = Pick<
 >;
 
 declare type TVerification = {
-  _id: string;
+  _id?: string;
   type: string;
   email: string;
   metadata?: TVerificationMetadata;
   status?: string;
-  createdAt: string;
+  createdAt?: string;
   updatedAt?: string | null;
-  expireAt: string;
+  expireAt?: string;
 };