@7365admin1/layer-common 1.8.0

package/components/InvitationForm.vue

@@ -0,0 +1,359 @@
+<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" ref="form" :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, emailRule]"
+                  :loading="loading.verifyingEmail"
+                ></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"
+                  @update:model-value="handleUpdateApp"
+                ></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"
+                  :rules="[requiredRule]"
+                  density="comfortable"
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="hasSite" cols="12">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Site" />
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="invite.site"
+                  :items="sites"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                  @update:model-value="handleUpdateSite"
+                ></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"
+            :loading="loading.submittingForm"
+            @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: () => ({}),
+  },
+  app: {
+    type: String,
+    default: "organization",
+  },
+  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 form = ref<HTMLFormElement | null>(null);
+const app = computed(() => useRuntimeConfig().public.APP ?? "");
+
+const loading = reactive({
+  submittingForm: false,
+  verifyingEmail: false,
+});
+
+const invite = ref<Record<string, any>>({
+  email: "",
+  app: "",
+  role: "",
+  org: "",
+  site: "",
+  siteName: "",
+});
+
+invite.value.app = props.app;
+invite.value.org = props.org ?? "";
+
+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 { orgNature } = useLocalSetup();
+
+const apps = computed(() => {
+  const items = [];
+  items.unshift({ title: "Organization", value: "organization" });
+
+  const _org = "security_agency";
+
+  if (props.app === _org || orgNature.value === _org) {
+    items.push({ title: "Security Agency", value: _org });
+  }
+
+  const _cleaning = "cleaning_services";
+
+  if (props.app === _cleaning || orgNature.value === _cleaning) {
+    items.push({ title: "Cleaning Services", value: _cleaning });
+  }
+
+  const _property = "property_management_agency";
+
+  if (props.app === _property || orgNature.value === _property) {
+    items.push({ title: "Property Management Agency", value: _property });
+  }
+
+  const _mechanical = "mechanical_electrical_services";
+
+  if (props.app === _mechanical || orgNature.value === _mechanical) {
+    items.push({
+      title: "Mechanical & Electrical Services",
+      value: _mechanical,
+    });
+  }
+
+  const _pestControl = "pest_control_services";
+
+  if (props.app === _pestControl || orgNature.value === _pestControl) {
+    items.push({
+      title: "Pest Control Services",
+      value: _pestControl,
+    });
+  }
+
+  const _landscaping = "landscaping_services";
+
+  if (props.app === _landscaping || orgNature.value === _landscaping) {
+    items.push({
+      title: "Landscaping Services",
+      value: _landscaping,
+    });
+  }
+
+  const _poolMaintenance = "pool_maintenance_services";
+
+  if (props.app === _poolMaintenance || orgNature.value === _poolMaintenance) {
+    items.push({
+      title: "Pool Maintenance Services",
+      value: _poolMaintenance,
+    });
+  }
+
+  return items;
+});
+
+const hasSite = computed(() => {
+  return natureOfBusiness.map((i) => i.value).includes(invite.value.app);
+});
+
+const sites = ref<Array<Record<string, any>>>([]);
+
+const { getAll: getAllCustomerSite } = useCustomerSite();
+
+const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
+  "get-sites-by-org-" + props.org,
+  async () => await getAllCustomerSite({ org: props.org, limit: 50 })
+);
+
+watchEffect(() => {
+  if (siteData.value) {
+    sites.value = siteData.value.items.map((i: any) => ({
+      title: i.name,
+      value: i.site,
+    }));
+  }
+});
+
+watchEffect(() => {
+  if (hasSite.value) {
+    refreshSiteData();
+  }
+});
+
+const roles = ref<Array<Record<string, any>>>([]);
+
+const { getRoles } = useRole();
+
+const { data: RolesData, refresh: refreshRoles } = 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;
+  }
+});
+
+function handleUpdateApp(value: string) {
+  invite.value.role = "";
+  invite.value.site = "";
+  refreshRoles();
+}
+
+const createMore = ref(false);
+const disable = ref(false);
+
+const { requiredRule, emailRule } = useUtils();
+
+const message = ref("");
+
+function resetInvite() {
+  invite.value.email = "";
+  invite.value.app = "organization";
+  invite.value.role = "";
+  message.value = "";
+}
+
+function handleUpdateSite(siteId: string) {
+  const obj = sites.value.find((x) => x?.value === siteId);
+  invite.value.siteName = obj?.title || "";
+}
+
+const { inviteUser } = useUser();
+
+async function submit() {
+  loading.submittingForm = true;
+  try {
+    await inviteUser(invite.value);
+
+    if (createMore.value) {
+      form.value?.reset();
+      resetInvite();
+      emit("success", false);
+    } else emit("success", true);
+  } catch (error: any) {
+    message.value = error.response._data.message;
+  } finally {
+    loading.submittingForm = false;
+  }
+}
+
+function cancel() {
+  emit("cancel");
+}
+</script>

package/components/InvitationMain.vue

@@ -0,0 +1,310 @@
+<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"
+          size="large"
+          @click="inviteMember()"
+          v-if="props.inviteMember"
+        >
+          Invite member
+        </v-btn>
+      </v-row>
+    </v-col>
+    <v-col cols="12">
+      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn
+              fab
+              icon
+              density="comfortable"
+              @click="_getVerifications({ search: headerSearch, status })"
+            >
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value="getVerifications"
+              />
+            </v-row>
+          </template>
+
+          <template #extension>
+            <v-tabs>
+              <v-tab
+                :to="{
+                  name: props.route,
+                  params: { status: 'pending' },
+                }"
+              >
+                Pending
+              </v-tab>
+              <v-tab
+                :to="{
+                  name: props.route,
+                  params: { status: 'expired' },
+                }"
+              >
+                Expired
+              </v-tab>
+            </v-tabs>
+          </template>
+        </v-toolbar>
+
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="20"
+          fixed-header
+          hide-default-footer
+          style="max-height: calc(100vh - (126px))"
+          :loading="loading"
+        >
+          <template #item.permissions="{ value }">
+            <span class="text-caption font-weight-bold text-capitalize">
+              permissions
+            </span>
+            <v-chip>{{ value.length }}</v-chip>
+          </template>
+          <template #item.createdAt="{ item }">
+            {{ item.createdAt ? formatDate(item.createdAt) : "" }}
+          </template>
+          <template #item.action-table="{ item }">
+            <v-menu
+              :close-on-content-click="false"
+              offset-y
+              width="150"
+              v-if="props.cancelInvitation"
+            >
+              <template v-slot:activator="{ props }">
+                <v-icon v-bind="props">mdi-dots-horizontal</v-icon>
+              </template>
+              <v-list>
+                <v-list-item @click="openConfirmDialog(item._id ?? '')">
+                  Cancel Invite
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </template>
+        </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"
+        @success="handleSuccess"
+        @invited="getVerifications()"
+        :app="props.app"
+      />
+    </v-dialog>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  app: {
+    type: String,
+    default: "organization",
+  },
+  route: {
+    type: String,
+    default: "index",
+  },
+  org: {
+    type: String,
+    default: "",
+  },
+  customerId: {
+    type: String,
+    default: "",
+  },
+  siteId: {
+    type: String,
+    default: "",
+  },
+  status: {
+    type: String,
+    default: "pending",
+  },
+  cancelInvitation: {
+    type: Boolean,
+    default: true,
+  },
+  inviteMember: {
+    type: Boolean,
+    default: true,
+  },
+  viewInvitations: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { authenticate } = useLocalAuth();
+authenticate();
+
+const headers = [
+  {
+    title: "Date",
+    value: "createdAt",
+  },
+  {
+    title: "E-mail",
+    value: "email",
+  },
+  {
+    title: "Action",
+    value: "action-table",
+  },
+];
+
+const status = (useRoute().params.status as string) ?? "";
+
+const { getVerifications: _getVerifications, cancelUserInvitation } =
+  useVerification();
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const items = ref<Array<TMiniVerification>>([]);
+const { headerSearch } = useLocal();
+const { formatDate } = useUtils();
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+const {
+  data: getVerificationsReq,
+  refresh: getVerifications,
+  status: getVerificationsStatus,
+} = useLazyAsyncData<{
+  items: TMiniVerification[];
+  pages: number;
+  pageRange: string;
+}>("get-verifications" + props.status, () =>
+  _getVerifications({
+    page: page.value,
+    status: props.status,
+    search: headerSearch.value,
+    type: "user-invite,member-invite",
+    app: props.app
+  })
+);
+
+const loading = computed(() => getVerificationsStatus.value === "pending");
+
+watchEffect(() => {
+  if (getVerificationsReq.value) {
+    items.value = getVerificationsReq.value.items;
+    pages.value = getVerificationsReq.value.pages;
+    pageRange.value = getVerificationsReq.value.pageRange;
+  }
+});
+
+watch([headerSearch], () => {
+  getVerifications();
+});
+
+const confirmDialog = ref(false);
+const selectedInviteId = ref<string | null>(null);
+const cancelLoading = ref(false);
+
+function openConfirmDialog(id: string) {
+  selectedInviteId.value = id;
+  confirmDialog.value = true;
+}
+
+async function onConfirmCancel() {
+  if (!selectedInviteId.value) return;
+
+  cancelLoading.value = true;
+  try {
+    const res = await cancelUserInvitation(selectedInviteId.value);
+
+    showMessage(res.message || "Invitation cancelled successfully", "success");
+    await getVerifications();
+    confirmDialog.value = false;
+    selectedInviteId.value = null;
+  } catch (error: any) {
+    showMessage(error?.message || "Failed to cancel invitation", "error");
+  }
+  cancelLoading.value = false;
+}
+
+function handleSuccess(closeForm: boolean) {
+  getVerifications();
+  if (closeForm) {
+    dialogMember.value = false;
+  }
+}
+
+watchEffect(() => {
+  if (!props.viewInvitations) {
+    useRouter().back();
+  }
+});
+
+const dialogMember = ref(false);
+
+function inviteMember() {
+  dialogMember.value = true;
+}
+</script>