@iservice365/layer-common 1.4.2 → 1.5.0

package/components/ServiceProviderMain.vue

@@ -1,16 +1,49 @@
 <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"
-          @click="createDialog = true"
-          size="large"
-        >
-          Add Service Provider
-        </v-btn>
+      <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"
+          >
+            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">
@@ -23,7 +56,12 @@
       >
         <v-toolbar density="compact" color="grey-lighten-4">
           <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getServiceProvider()">
+            <v-btn
+              fab
+              icon
+              density="comfortable"
+              @click="_getAllServiceProvider()"
+            >
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
           </template>
@@ -36,7 +74,7 @@
               <local-pagination
                 v-model="page"
                 :length="pages"
-                @update:value="_getServiceProvider()"
+                @update:value="_getAllServiceProvider()"
               />
             </v-row>
           </template>
@@ -52,28 +90,8 @@
           hide-default-header
           style="max-height: calc(100vh - (180px))"
         >
-          <template #item.permissions="{ value }">
-            <span class="text-caption font-weight-bold text-capitalize">
-              permissions
-            </span>
-            <v-chip>{{ value.length }}</v-chip>
-          </template>
-
-          <template #item.nature="{ item }">
-            <span class="text-capitalize">
-              {{ item.nature }}
-            </span>
-          </template>
-
-          <template #item.action-table="{ item }">
-            <v-menu :close-on-content-click="false" 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 @click=""> Delete Service Provider </v-list-item>
-              </v-list>
-            </v-menu>
+          <template #item.category="{ item }">
+            <span class="text-subtitle-2">{{ item.category }}</span>
           </template>
         </v-data-table>
       </v-card>
@@ -81,16 +99,143 @@
   </v-row>
 
   <v-dialog v-model="createDialog" width="500" persistent>
-    <ServiceProviderFormCreate
+    <!-- <ServiceProviderFormCreate
       @cancel="createDialog = false"
       :org="props.orgId"
       :type="props.type"
       :site-id="props.siteId"
       :service-provider-org-id="props.orgId"
       @success="success()"
-      @success:create-more="getServiceProvider()"
+      @success:create-more="_getAllServiceProvider()"
       @notify="onNotify"
-    />
+    /> -->
+    <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>
 
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
@@ -130,10 +275,23 @@ const props = defineProps({
 });
 
 const headers = [
-  { title: "Name", value: "name" },
-  { title: "Nature", value: "nature" },
+  {
+    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 --");
@@ -144,43 +302,58 @@ const messageColor = ref("");
 
 const items = ref<Array<Record<string, any>>>([]);
 
-const { getAll: _getServiceProvider } = useServiceProvider();
+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 {
-  data: getAllReq,
-  refresh: getServiceProvider,
-  status: getServiceProviderReqStatus,
-} = useLazyAsyncData(
-  "service-provider-get-all",
-  () =>
-    _getServiceProvider({
-      page: page.value,
-      orgId: props.orgId,
-    }),
-  {
-    watch: [page],
-  }
+  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 loading = computed(() => getServiceProviderReqStatus.value === "pending");
+const { data: serviceProviderReq, refresh: _getAllServiceProvider } =
+  await useLazyAsyncData("get-all-service-providers", () =>
+    getAllServiceProvider({ siteId: props.siteId })
+  );
 
 watchEffect(() => {
-  if (getAllReq.value) {
-    items.value = getAllReq.value.items.map((i: any) => ({
-      ...i,
-      name: i.name,
-      nature: i.nature.replace(/_/g, " "),
-    }));
-    pages.value = getAllReq.value.pages;
-    pageRange.value = getAllReq.value.pageRange;
+  // 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 success = () => {
   createDialog.value = false;
-  getServiceProvider();
+  // getServiceProvider();
+  _getAllServiceProvider();
 };
 
 function showMessage(msg: string, color: string) {
@@ -192,4 +365,61 @@ function showMessage(msg: string, color: string) {
 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;
+  }
+
+  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;
+  }
+}
 </script>