@iservice365/layer-common 1.4.1 → 1.5.0

package/components/Input/FileV2.vue

@@ -1,26 +1,52 @@
 <template>
-    <v-row no-gutters class="w-100 pb-5" @click="resetErrorMessage">
-        <v-file-upload v-model="uploadFiles" density="compact" @update:model-value="handleUpdateValue"
-            :loading="processing" :disabled="processing" :height="height" :title="title" :accept="accept"
-            name="upload_images" class="text-caption w-100" clearable :multiple="multiple">
-            <template v-slot:item="{ props: itemProps, file }">
-                <v-file-upload-item v-bind="itemProps" lines="one" nav>
-                    <template v-slot:prepend>
-                        <v-avatar size="32" rounded></v-avatar>
-                    </template>
-
-                    <template v-slot:clear="{ props: clearProps }">
-                        <v-btn color="primary" @click="handleRemove(file)"></v-btn>
-                    </template>
-                </v-file-upload-item>
+  <v-row no-gutters class="w-100 pb-5" @click="resetErrorMessage">
+
+    <!-- VIEW MODE -->
+    <template v-if="viewMode">
+      <div class="w-100">
+        <v-file-upload-item v-for="({ file }, idx) in filesCollection" :key="fileKey(file)" :file="file" lines="one" nav
+          @click="handleClickItem(file)">
+          <template #prepend>
+            <v-avatar size="32" rounded></v-avatar>
+          </template>
+
+          <!-- delete hidden in view mode -->
+          <template #clear>
+            <!-- empty on purpose -->
+          </template>
+        </v-file-upload-item>
+      </div>
+    </template>
+
+    <!-- NORMAL MODE -->
+    <template v-else>
+      <v-file-upload v-model="uploadFiles" density="compact" @update:model-value="handleUpdateValue"
+        :loading="processing" :disabled="processing" :height="height" :title="title" :accept="accept"
+        :name="`upload_images`" class="text-caption w-100" clearable :multiple="multiple">
+        <template #item="{ props: itemProps, file }">
+          <v-file-upload-item v-bind="itemProps" lines="one" nav @click="handleClickItem(file)">
+            <template #prepend>
+              <v-avatar size="32" rounded></v-avatar>
             </template>
-        </v-file-upload>
-        <v-row no-gutters class="w-100" v-if="errorMessage">
+
+            <!-- delete button NOT shown in view mode -->
+            <template #clear="{ props: clearProps }">
+              <v-btn v-if="!viewMode" color="primary" @click.stop="handleRemove(file)"></v-btn>
+            </template>
+          </v-file-upload-item>
+        </template>
+      </v-file-upload>
+    </template>
+
+    <v-row no-gutters class="w-100" v-if="errorMessage">
       <p class="text-error w-100 text-center text-subtitle-2">{{ errorMessage }}</p>
     </v-row>
-    </v-row>
+
+    <ImageCarousel v-model="showImageCarousel" :images="idsArray" :active-image-id="activeImageId" />
+  </v-row>
 </template>
 
+
 <script setup lang="ts">
 import { nextTick, ref, onMounted, watch } from 'vue'
 
@@ -44,11 +70,18 @@ const props = defineProps({
   accept: {
     type: String,
     default: "image/*"
+  },
+  viewMode: {
+    type: Boolean,
+    default: false
   }
 })
 
 const { addFile, deleteFile, getFileUrl, urlToFile } = useFile()
 
+const showImageCarousel = ref(false)
+const activeImageId = ref("")
+
 // The parent v-model binding
 const idsArray = defineModel<string[]>({ default: [] })
 
@@ -76,6 +109,21 @@ async function handleRemove(removedFile: File) {
 
 }
 
+function handleClickItem(file: File) {
+  const isImage =
+    file.type.startsWith('image/') ||
+    /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(file.name)
+
+  if (!isImage) return
+
+  const found = filesCollection.value.find((item) => fileKey(item.file) === fileKey(file))
+  if (!found) return
+
+  activeImageId.value = found.id
+  showImageCarousel.value = true
+}
+
+
 async function handleUpdateValue(value: File[]) {
   await nextTick()
   const max = props.maxLength
@@ -95,12 +143,12 @@ async function handleUpdateValue(value: File[]) {
     for (const file of addedFiles) {
       const res = await addFile(file) // should return { id, url }
       if (res?.id) {
-        filesCollection.value.push({ file, id: res.id })
+        filesCollection.value = [...filesCollection.value, { file, id: res.id }]
       }
     }
 
     uploadFiles.value = filesCollection.value.map((x) => x.file)
-    idsArray.value = filesCollection.value.map((x) => x.id)
+
   } catch (err) {
     console.error('Upload failed', err)
     errorMessage.value = 'Failed to upload some files.'
@@ -132,33 +180,30 @@ function resetErrorMessage() {
 
 
 onMounted(async () => {
-  if (idsArray.value.length > 0) {
-    processing.value = true
-    const loaded = await loadFilesFromIds(idsArray.value)
-    filesCollection.value = loaded
-    uploadFiles.value = loaded.map((x) => x.file)
-    processing.value = false
-  }
+  setTimeout(async () => {
+    if (idsArray.value.length > 0) {
+      const loadedFiles = await loadFilesFromIds(idsArray.value)
+      filesCollection.value = loadedFiles
+      uploadFiles.value = loadedFiles.map((x) => x.file)
+    }
+  }, 1000)
 })
 
+watch(filesCollection, () => {
+  idsArray.value = [...filesCollection.value.map(x => x.id)]
+}, { deep: true })
+
 
-watch(
-  filesCollection,
-  (newVal) => {
-    idsArray.value = newVal.map((x) => x.id)
-  },
-  { deep: true }
-)
 </script>
 
 
 <style scoped>
 * :deep(.v-file-upload-title) {
-    font-size: 1rem;
-    font-weight: 500;
+  font-size: 1rem;
+  font-weight: 500;
 }
 
 * :deep(.v-file-upload-items) {
-    min-width: 100%;
+  min-width: 100%;
 }
 </style>

package/components/InvitationForm.vue

@@ -235,6 +235,33 @@ const apps = computed(() => {
     });
   }
 
+  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;
 });
 

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>