@7365admin1/layer-common 1.8.0

package/components/ServiceProviderFormCreate.vue

@@ -0,0 +1,154 @@
+<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="email"
+                  density="comfortable"
+                  :rules="[requiredRule, emailRule]"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </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>
+      <v-row class="px-6">
+        <v-col cols="6">
+          <v-btn
+            block
+            variant="text"
+            class="text-none"
+            size="large"
+            @click="cancel"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="large"
+            :disabled="!validForm"
+            @click="submit"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Service Provider Form",
+  },
+  org: {
+    type: String,
+    default: "",
+  },
+  siteId: {
+    type: String,
+    default: "",
+  },
+  siteName: {
+    type: String,
+    default: "",
+  },
+  type: {
+    type: String,
+    default: "app",
+  },
+});
+
+const emit = defineEmits<{
+  (e: "cancel"): void;
+  (e: "success"): void;
+  (e: "success:create-more"): void;
+  (e: "notify", payload: { message: string; color: string }): void;
+}>();
+
+const validForm = ref(false);
+
+const email = ref("");
+const selectedPermissions = ref([]);
+const createMore = ref(false);
+const disable = ref(false);
+
+const { requiredRule, emailRule } = useUtils();
+
+const message = ref("");
+
+const { createServiceProviderInvite } = useServiceProvider();
+
+async function submit() {
+  disable.value = true;
+
+  try {
+    await createServiceProviderInvite({
+      email: email.value,
+      siteId: props.siteId,
+      serviceProviderOrgId: props.org,
+    });
+
+    emit("success");
+    emit("success:create-more");
+    emit("notify", {
+      message: "Service provider created successfully",
+      color: "success",
+    });
+  } catch (error: any) {
+    const msg =
+      error?.response?._data?.message || "Failed to create service provider";
+    message.value = msg;
+
+    emit("notify", {
+      message: msg,
+      color: "error",
+    });
+  } finally {
+    disable.value = false;
+  }
+}
+
+function cancel() {
+  email.value = "";
+  selectedPermissions.value = [];
+  createMore.value = false;
+  message.value = "";
+  emit("cancel");
+}
+</script>

package/components/ServiceProviderMain.vue

@@ -0,0 +1,547 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters align="center" justify="space-between">
+        <div>
+          <v-btn
+            class="text-none mr-2"
+            rounded="pill"
+            variant="tonal"
+            @click="(createDialog = true), setServiceProvider({ mode: 'add' })"
+            size="large"
+          >
+            Add
+          </v-btn>
+          <v-btn
+            class="text-none mr-2"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="
+              (createInviteDialog = true),
+                setServiceProvider({ mode: 'invite' })
+            "
+          >
+            Invite
+          </v-btn>
+          <v-btn
+            class="text-none mr-2"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="
+              useRouter().push({
+                name: 'org-site-service-provider-mgmt-billing',
+              })
+            "
+          >
+            Billing
+          </v-btn>
+        </div>
+
+        <v-text-field
+          placeholder="Search..."
+          variant="outlined"
+          density="comfortable"
+          clearable
+          hide-details
+          class="ml-2"
+          style="max-width: 250px"
+        />
+      </v-row>
+    </v-col>
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn
+              fab
+              icon
+              density="comfortable"
+              @click="_getAllServiceProvider()"
+            >
+              <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="_getAllServiceProvider()"
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="20"
+          fixed-header
+          hide-default-footer
+          hide-default-header
+          style="max-height: calc(100vh - (180px))"
+        >
+          <template #item.category="{ item }">
+            <span class="text-subtitle-2">{{ item.category }}</span>
+          </template>
+        </v-data-table>
+      </v-card>
+    </v-col>
+  </v-row>
+
+  <v-dialog v-model="createDialog" width="500" persistent>
+    <v-card width="100%">
+      <v-toolbar>
+        <v-row no-gutters class="fill-height px-6" align="center">
+          <span class="font-weight-bold text-h5"> Add Service Provider </span>
+        </v-row>
+      </v-toolbar>
+      <v-card-text style="max-height: 100vh; overflow-y: auto">
+        <v-form
+          v-model="validServiceProvider"
+          :disabled="disableServiceProvider"
+        >
+          <v-row no-gutters class="px-4">
+            <v-col cols="12" class="mt-2">
+              <v-row no-gutters>
+                <InputLabel class="text-capitalize" title="Name" required />
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="serviceProvider.name"
+                    density="comfortable"
+                    :rules="[requiredRule]"
+                  ></v-text-field>
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" class="mt-2">
+              <v-row no-gutters>
+                <InputLabel class="text-capitalize" title="Type" required />
+                <v-col cols="12">
+                  <v-select
+                    v-model="serviceProvider.type"
+                    item-title="title"
+                    item-value="value"
+                    :items="natureOfBusiness"
+                    density="comfortable"
+                    :rules="[requiredRule]"
+                  ></v-select>
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <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="serviceProvider.email"
+                    density="comfortable"
+                    :rules="[emailRule, requiredRule]"
+                  ></v-text-field>
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" class="mt-2">
+              <v-row no-gutters>
+                <InputLabel class="text-capitalize" title="Description" />
+                <v-col cols="12">
+                  <v-textarea
+                    v-model="serviceProvider.description"
+                    density="comfortable"
+                    no-resize
+                    rows="2"
+                  ></v-textarea>
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12">
+              <v-checkbox
+                v-model="createMoreServiceProvider"
+                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"
+                  >
+                    {{ messageServiceProvider }}
+                  </span>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+      <v-toolbar>
+        <v-row class="px-6">
+          <v-col cols="6">
+            <v-btn
+              block
+              variant="text"
+              class="text-none"
+              size="large"
+              @click="setServiceProvider({ mode: 'add', dialog: false })"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+
+          <v-col cols="6">
+            <v-btn
+              block
+              variant="flat"
+              color="black"
+              class="text-none"
+              size="large"
+              :disabled="!validServiceProvider"
+              :loading="disableServiceProvider"
+              @click="submitServiceProviderAdd"
+            >
+              Submit
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+
+  <v-dialog v-model="createInviteDialog" width="500" persistent>
+    <v-card width="100%">
+      <v-toolbar>
+        <v-row no-gutters class="fill-height px-6" align="center">
+          <span class="font-weight-bold text-h5">
+            Invite Service Provider
+          </span>
+        </v-row>
+      </v-toolbar>
+      <v-card-text style="max-height: 100vh; overflow-y: auto">
+        <v-form
+          v-model="validServiceProvider"
+          :disabled="disableServiceProvider"
+        >
+          <v-row no-gutters class="px-4">
+            <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="serviceProvider.email"
+                    density="comfortable"
+                    :rules="[requiredRule, emailRule]"
+                  ></v-text-field>
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12">
+              <v-checkbox
+                v-model="createMoreServiceProvider"
+                density="comfortable"
+                hide-details
+              >
+                <template #label>
+                  <span class="text-subtitle-2 font-weight-bold">
+                    Invite 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"
+                  >
+                    {{ messageServiceProvider }}
+                  </span>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+
+      <v-toolbar>
+        <v-row class="px-6">
+          <v-col cols="6">
+            <v-btn
+              block
+              variant="text"
+              class="text-none"
+              size="large"
+              @click="setServiceProvider({ mode: 'invite', dialog: false })"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+
+          <v-col cols="6">
+            <v-btn
+              block
+              variant="flat"
+              color="black"
+              class="text-none"
+              size="large"
+              :disabled="!validServiceProvider"
+              :loading="disableServiceProvider"
+              @click="submitServiceProviderInvite()"
+            >
+              Submit
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  orgId: {
+    type: String,
+    default: "",
+  },
+  customerId: {
+    type: String,
+    default: "",
+  },
+  siteId: {
+    type: String,
+    default: "",
+  },
+  siteName: {
+    type: String,
+    default: "",
+  },
+  serviceProviderOrgId: {
+    type: String,
+    default: "",
+  },
+  type: {
+    type: String,
+    required: true,
+    default: "app",
+  },
+  route: {
+    type: String,
+    default: "",
+  },
+  canAddServiceProvider: {
+    type: Boolean,
+    default: false,
+  },
+  canInviteServiceProvider: {
+    type: Boolean,
+    default: false,
+  },
+  canViewServiceProviders: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const headers = [
+  {
+    title: "Name",
+    value: "name",
+  },
+  {
+    title: "Status",
+    value: "status",
+  },
+  {
+    title: "Category",
+    value: "category",
+  },
+];
+
+const { natureOfBusiness } = useLocal();
+const { requiredRule, emailRule } = useUtils();
+
+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<Record<string, any>>>([]);
+
+const validServiceProvider = ref(false);
+const disableServiceProvider = ref(false);
+const createMoreServiceProvider = ref(false);
+const messageServiceProvider = ref("");
+const serviceProvider = ref({
+  name: "",
+  type: "",
+  email: "",
+  description: "",
+  orgId: "",
+  siteId: "",
+  siteName: "",
+  orgName: "",
+  category: "",
+});
+
+const {
+  getAll: getAllServiceProvider,
+  add: addServiceProvider,
+  invite: inviteServiceProvider,
+} = useServiceProvider();
+
+const loading = ref(true);
+
+const { getSiteById } = useSite();
+
+const { data: site } = await useLazyAsyncData(
+  "get-site-by-id-" + props.siteId,
+  () => getSiteById(props.siteId)
+);
+
+const { data: serviceProviderReq, refresh: _getAllServiceProvider } =
+  await useLazyAsyncData("get-all-service-providers", () =>
+    getAllServiceProvider({ siteId: props.siteId })
+  );
+
+watchEffect(() => {
+  // console.log("serviceProviderReq", serviceProviderReq.value);
+  if (serviceProviderReq.value) {
+    items.value = serviceProviderReq.value.items;
+    pages.value = serviceProviderReq.value.pages;
+    pageRange.value = serviceProviderReq.value.pageRange;
+  }
+  loading.value = false;
+});
+
+const createDialog = ref(false);
+const createInviteDialog = ref(false);
+
+const success = () => {
+  createDialog.value = false;
+  // getServiceProvider();
+  _getAllServiceProvider();
+};
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function onNotify(payload: { message: string; color: string }) {
+  showMessage(payload.message, payload.color);
+}
+
+const dialogServiceProviderInvite = ref(false);
+const dialogServiceProviderAdd = ref(false);
+
+function setServiceProvider({
+  mode = "invite",
+  dialog = true,
+  data = {} as Record<string, any>,
+} = {}) {
+  if (mode === "invite") {
+    // dialogServiceProviderInvite.value = dialog;
+    createInviteDialog.value = dialog;
+  }
+
+  if (mode === "add") {
+    // dialogServiceProviderAdd.value = dialog;
+    createDialog.value = dialog;
+  }
+
+  if (dialog) {
+    serviceProvider.value = {
+      name: "",
+      type: "",
+      email: "",
+      description: "",
+      orgId: props.orgId,
+      siteId: props.siteId,
+      siteName: site.value?.name ?? "",
+      orgName: "Org Name",
+      category: mode === "add" ? "internal" : "external",
+    };
+    return;
+  }
+
+  serviceProvider.value.description = data.description ?? "";
+  serviceProvider.value.email = data.email ?? "";
+  serviceProvider.value.name = data.name ?? "";
+  serviceProvider.value.type = data.type ?? "";
+}
+
+async function submitServiceProviderAdd() {
+  disableServiceProvider.value = true;
+  messageServiceProvider.value = "";
+
+  try {
+    console.log("serviceProvider.value");
+    console.log(serviceProvider.value);
+    await addServiceProvider(serviceProvider.value);
+    await setServiceProvider({ mode: "add", dialog: false });
+    await _getAllServiceProvider();
+  } catch (error: any) {
+    messageServiceProvider.value =
+      error?.response?._data?.message ??
+      "An error occurred while adding the service provider.";
+  } finally {
+    disableServiceProvider.value = false;
+  }
+}
+
+async function submitServiceProviderInvite() {
+  disableServiceProvider.value = true;
+  messageServiceProvider.value = "";
+  try {
+    await inviteServiceProvider({
+      email: serviceProvider.value.email,
+      orgId: props.orgId,
+      siteId: props.siteId,
+      siteName: site.value?.name ?? "",
+    });
+    if (createMoreServiceProvider.value) {
+      serviceProvider.value.email = "";
+    } else {
+      await setServiceProvider({ mode: "invite", dialog: false });
+    }
+  } catch (error: any) {
+    messageServiceProvider.value =
+      error?.response?._data?.message ??
+      "An error occurred while inviting the service provider.";
+  } finally {
+    disableServiceProvider.value = false;
+  }
+}
+</script>