@iservice365/layer-common 1.4.1 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.4.2
+
+### Patch Changes
+
+- d71fd3b: Add new services
+
 ## 1.4.1
 
 ### Patch Changes

package/components/FacilityForm.vue

@@ -0,0 +1,226 @@
+<template>
+  <v-card width="100%" :loading="processing">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5 text-capitalize">
+          {{ prop.mode }} Facility
+        </span>
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
+      <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
+        <v-row no-gutters class="pt-4">
+
+          <v-col cols="12">
+            <v-expansion-panels v-model="panels">
+              <template v-for="section in sections" :key="section.value">
+                <v-expansion-panel :value="section.value" :color="panels.includes(section.value) ? 'primary-button' : 'grey-lighten-3'" elevation="3" >
+                  <v-expansion-panel-title>
+                    <span class="font-weight-bold">{{ section.label }}</span>
+                  </v-expansion-panel-title>
+                  <v-expansion-panel-text>
+                    <component :is="section.component" class="" />
+                    <!-- v-model="form[section.value]" -->
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
+              </template>
+            </v-expansion-panels>
+          </v-col>
+
+          <v-col v-if="prop.mode === 'add'" 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-row>
+      </v-form>
+    </v-card-text>
+
+    <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-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn tile block variant="text" class="text-none" size="48" @click="close" text="Close" />
+        </v-col>
+        <v-col cols="6">
+          <v-btn tile block variant="flat" color="primary-button" class="text-none" size="48" :disabled="processing || !validForm" text="Submit" />
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import FacilityFormInformation from './FacilityFormInformation.vue';
+import FacilityFormAvailability from './FacilityFormAvailability.vue';
+import FacilityFormDescription from './FacilityFormDescription.vue';
+import FacilityFormRefund from './FacilityFormRefund.vue';
+import FacilityFormBookingFee from './FacilityFormBookingFee.vue';
+import FacilityFormDepositFee from './FacilityFormDepositFee.vue';
+import FacilityFormBookingPolicy from './FacilityFormBookingPolicy.vue';
+import FacilityFormSecurityChecklist from './FacilityFormSecurityChecklist.vue';
+import FacilityFormRulesAndPolicies from './FacilityFormRulesAndPolicies.vue';
+
+
+
+const prop = defineProps({
+  site: {
+    type: String,
+    required: true
+  },
+  mode: {
+    type: String as PropType<'add' | 'edit'>,
+    default: 'add'
+  },
+  activeId: {
+    type: String as PropType<string | null>, // id of person you are trying to update
+    default: null
+  },
+  people: {
+    type: Object as PropType<TPeople>,
+    required: false
+  }
+});
+
+const { requiredRule, formatDateISO8601 } = useUtils();
+const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
+const { create, updateById } = usePeople();
+
+const emit = defineEmits(['back', 'select', 'done', 'done:more', 'error', 'close']);
+const panels = ref<string[]>(['facilityInformation'])
+
+const sections = [
+  { label: "Facility Information", value: "facilityInformation", component: FacilityFormInformation },
+  { label: "Facility Availability", value: "facilityAvailability", component: FacilityFormAvailability },
+  { label: "Facility Description", value: "facilityDescription", component: FacilityFormDescription },
+  { label: "Refund", value: "refund", component: FacilityFormRefund },
+  { label: "Booking Fee", value: "bookingFee", component: FacilityFormBookingFee },
+  { label: "Deposit Fee", value: "depositFee", component: FacilityFormDepositFee },
+  { label: "Booking Policy", value: "bookingPolicy", component: FacilityFormBookingPolicy },
+  { label: "Security Checklist", value: "securityChecklist", component: FacilityFormSecurityChecklist },
+  { label: "Facility Rules and Policies", value: "facilityRulesAndPolicies", component: FacilityFormRulesAndPolicies },
+];
+
+const form = reactive<Partial<TPeoplePayload>>({})
+
+
+const validForm = ref(false);
+const formRef = ref<HTMLFormElement | null>(null);
+const processing = ref(false);
+const message = ref('');
+const errorMessage = ref('');
+const createMore = ref(false)
+
+
+const step = ref(1)
+
+
+
+function dateToday() {
+  const today = new Date()
+  return today.toISOString()
+}
+
+
+
+function close(){
+  emit('close')
+}
+
+
+function resetForm() {
+  formRef.value?.resetValidation();
+  Object.assign(form, {
+  });
+
+  validForm.value = false;
+}
+
+
+
+async function submit() {
+  formRef.value!.validate()
+  errorMessage.value = '';
+  processing.value = true;
+
+  let payload: Partial<TPeoplePayload> = {}
+
+  if (prop.mode === 'add') {
+    payload = {
+      ...payload,
+      site: prop.site,
+      ...form,
+    }
+
+  } else if (prop.mode === 'edit') {
+    const { type, ...rest } = form
+    payload = {
+      ...payload,
+      ...rest
+    }
+
+  }
+  try {
+    if (prop.mode === 'add') {
+      await create(payload)
+    } else if (prop.mode === 'edit') {
+      const userId = prop.activeId
+      if (!userId) {
+        throw new Error('User Id prop is not defined')
+      }
+
+      await updateById(userId, payload)
+    }
+
+    if (createMore.value) {
+      resetForm()
+      step.value = 1;
+      errorMessage.value = ""
+      emit("done:more")
+      createMore.value = false
+    } else emit("done")
+
+  } catch (error: any) {
+    const err = error?.data?.message
+    errorMessage.value = err || `Failed to ${prop.mode === 'add' ? 'add' : 'update'}. Please try again.`;
+  } finally {
+    processing.value = false;
+  }
+}
+
+
+async function mountExistingData() {
+  setTimeout(() => {
+    const people = prop.people
+    if (!people) return
+
+    (Object.keys(form) as (keyof typeof form)[]).forEach((key) => {
+      if (key in people) {
+        form[key] = people[key as keyof TPeople]
+      }
+    })
+  }, 100)
+}
+
+onMounted(() => {
+  createMore.value = false;
+  if (prop.mode === 'edit') {
+    mountExistingData()
+  } else {
+    form.start = dateToday()
+  }
+})
+
+</script>
+<style scoped>
+.button-outline-class {
+  border: 1px solid rgba(var(--v-theme-primary));
+}
+</style>

package/components/FacilityFormAvailability.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        Im a Form
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

package/components/FacilityFormBookingFee.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        Im a Form
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

package/components/FacilityFormBookingPolicy.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        Im a Form
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

package/components/FacilityFormDepositFee.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        Im a Form
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

package/components/FacilityFormDescription.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        Im a Form
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

package/components/FacilityFormInformation.vue

@@ -0,0 +1,40 @@
+<template>
+    <v-row no-gutters>
+        <v-col cols="12">
+            <InputLabel class="text-capitalize" title="Facility Name" required />
+            <v-text-field v-model.trim="form.name" density="compact" :rules="[requiredRule]" />
+        </v-col>
+
+        <v-col cols="12">
+            <InputLabel class="text-capitalize" title="Select Icon" required />
+            <v-select v-model="form.icon" :items="iconsArray" density="comfortable"
+                 @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
+        </v-col>
+
+        <v-col cols="12">
+            <InputLabel class="text-capitalize" title="Attach Image" />
+            <InputFileV2 v-model="form.gallery" multiple :max-length="3" />
+        </v-col>
+    </v-row>
+</template>
+
+<script setup lang="ts">
+const { requiredRule } = useUtils()
+
+const form = defineModel({
+    default: {
+        name: "",
+        icon: "",
+        gallery: [] as string[]
+    }
+})
+
+const iconsArray = ref([])
+
+function handleChangeLevel(){
+    
+}
+
+</script>
+
+<style scoped></style>

package/components/FacilityFormRefund.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        Im a Form
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

package/components/FacilityFormRulesAndPolicies.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        Im a Form
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

package/components/FacilityFormSecurityChecklist.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        Im a Form
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

package/components/FeedbackMain.vue

@@ -1,78 +1,73 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
+      <v-row no-gutters align="center" justify="space-between">
         <v-btn
           class="text-none text-capitalize"
           rounded="pill"
           variant="tonal"
-          @click="showCreateDialog = true"
           size="large"
+          @click="showCreateDialog = true"
           v-if="canCreateFeedback"
         >
           Create Feedback
         </v-btn>
+
+        <v-text-field
+          v-model="searchText"
+          placeholder="Search feedback..."
+          variant="outlined"
+          density="comfortable"
+          clearable
+          hide-details
+          class="ml-2"
+          style="max-width: 250px"
+        />
       </v-row>
     </v-col>
 
     <v-col cols="12">
-      <ListView
-        :headers="headers"
-        :items="items"
-        :pages="pages"
-        :page-range="pageRange"
-        :loading="loading || onNextPrevPageLoading"
-        :height="'calc(100vh - 175px)'"
-        v-model:page="page"
-        :selected="selected"
-        @update:value="getAllReqRefresh"
-        @update:selected="onSelectedUpdate"
-        @click:create="showCreateDialog = true"
-        :viewPage="{ name: 'org-site-feedbacks-id' }"
-        :clickable-rows="true"
-        :length="pages"
-        @update:pagination="updatePage"
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
       >
-        <template #title>
-          <span class="text-h6 font-weight-regular">Feedbacks</span>
-        </template>
-
-        <template #category="{ item }">
-          <span class="text-capitalize">{{ item.category }}</span>
-        </template>
-
-        <template #status="{ item }">
-          <v-chip
-            :color="getColorStatus(item.status || 'No Status')"
-            text-color="white"
-            variant="flat"
-          >
-            {{ item.status || "No Status" }}
-          </v-chip>
-        </template>
-
-        <template #action-table="{ item }">
-          <v-menu
-            v-model="item.menuOpen"
-            :close-on-content-click="false"
-            offset-y
-            width="150"
-          >
-            <template v-slot:activator="{ props }">
-              <v-icon v-bind="props">mdi-dots-horizontal-circle-outline</v-icon>
-            </template>
-            <v-list>
-              <v-list-item @click="onViewFeedback(item)">View</v-list-item>
-              <v-list-item @click="editFeedback(item)">Edit</v-list-item>
-              <v-list-item
-                @click="confirmDeleteFeedback(item)"
-                v-if="canDeleteFeedback"
-                >Delete</v-list-item
-              >
-            </v-list>
-          </v-menu>
-        </template>
-      </ListView>
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="updatePage">
+              <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="updatePage"
+              />
+            </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
+          @click:row="tableRowClickHandler"
+          style="max-height: calc(100vh - (200px))"
+        >
+        </v-data-table>
+      </v-card>
     </v-col>
   </v-row>
 
@@ -123,6 +118,82 @@
   </ConfirmDialog>
 
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+
+  <!-- Preview Dialog -->
+  <v-dialog v-model="dialogPreview" width="450" persistent>
+    <v-card width="100%">
+      <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+        <v-row no-gutters v-if="selectedFeedback" class="mb-4">
+          <v-col cols="12">
+            <strong>Subject:</strong> {{ selectedFeedback.subject }}
+          </v-col>
+          <v-col cols="12">
+            <strong>Category:</strong>
+            {{ selectedFeedback.category }}
+          </v-col>
+          <v-col cols="12">
+            <strong>Status:</strong>
+            {{ selectedFeedback.status }}
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-toolbar class="pa-0" density="compact">
+        <v-row no-gutters>
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="text"
+              class="text-none"
+              size="large"
+              @click="dialogPreview = false"
+              height="48"
+            >
+              Close
+            </v-btn>
+          </v-col>
+          <v-col cols="6" class="pa-0">
+            <v-menu>
+              <template #activator="{ props }">
+                <v-btn
+                  block
+                  variant="flat"
+                  color="black"
+                  class="text-none"
+                  height="48"
+                  v-bind="props"
+                  tile
+                >
+                  More actions
+                </v-btn>
+              </template>
+
+              <v-list class="pa-0">
+                <v-list-item @click="onViewFeedback(selectedFeedback)">
+                  <v-list-item-title class="text-subtitle-2">
+                    View
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="editFeedback(selectedFeedback)">
+                  <v-list-item-title class="text-subtitle-2">
+                    Edit
+                  </v-list-item-title>
+                </v-list-item>
+
+                <v-list-item
+                  @click="confirmDeleteFeedback(selectedFeedback)"
+                  class="text-red"
+                >
+                  <v-list-item-title class="text-subtitle-2">
+                    Delete
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card></v-dialog
+  >
 </template>
 
 <script setup lang="ts">
@@ -225,7 +296,7 @@ const selected = ref<string[]>([]);
 
 const { getColorStatus } = useUtils();
 
-const headers = [
+const headers: Array<Record<string, any>> = [
   { title: "Name", value: "createdByName", align: "start" },
   { title: "Subject", value: "subject", align: "start" },
   { title: "Category", value: "category", align: "start" },
@@ -311,6 +382,7 @@ async function editFeedback(item: any) {
     _feedbackId.value = item._id;
     isEditMode.value = true;
     showCreateDialog.value = true;
+    dialogPreview.value = false;
   } catch (error) {
     showMessage("Failed to load full feedback", "error");
   }
@@ -326,6 +398,7 @@ function onViewFeedback(item: any) {
     name: props.detailRoute,
     params: { org, site, id },
   });
+  dialogPreview.value = false;
 }
 
 function confirmDeleteFeedback(item: any) {
@@ -349,6 +422,7 @@ async function submitDelete() {
     submitting.value = false;
     showDeleteDialog.value = false;
     feedbackToDelete.value = null;
+    dialogPreview.value = false;
   }
 }
 
@@ -483,5 +557,15 @@ const categories = computed(() =>
   }))
 );
 
+function tableRowClickHandler(_: any, data: any) {
+  console.log(data.item);
+  selectedFeedback.value = data.item;
+  dialogPreview.value = true;
+}
+
+const dialogPreview = ref(false);
+const selectedFeedback = ref<TFeedback | null>(null);
+const searchText = ref("")
+
 getServiceProviderCategories();
 </script>

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/TableMain.vue

@@ -4,11 +4,18 @@
     <v-col cols="12" class="mb-2" v-if="(canCreate || $slots.actions)">
       <v-row no-gutters>
         <slot name="actions">
-          <v-btn v-if="canCreate" class="text-none" rounded="pill" variant="tonal" size="large"
-            @click="emits('create')">
-            {{ createLabel }}
-          </v-btn>
+          <v-col cols="12">
+            <v-row no-gutters justify="space-between">
+              <v-btn v-if="canCreate" class="text-none" rounded="pill" variant="tonal" size="large"
+                @click="emits('create')">
+                {{ createLabel }}
+              </v-btn>
+              <v-text-field v-if="props.canSearch" v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
+                append-inner-icon="mdi-magnify" hide-details />
+            </v-row>
+          </v-col>
         </slot>
+
       </v-row>
     </v-col>
 
@@ -35,7 +42,7 @@
           </template>
 
           <template v-if="$slots.extension" #extension>
-            <slot name="extension"/>
+            <slot name="extension" />
           </template>
         </v-toolbar>
 
@@ -43,12 +50,13 @@
         <!-- Data Table -->
         <v-data-table :headers="headers" :items="items" :item-value="itemValue" :items-per-page="itemsPerPage"
           fixed-header hide-default-footer :hide-default-header="!showHeader"
-          @click:row="(_: any, data: any) => emits('row-click', data)" :style="`max-height: calc(100vh - (${offset}px))`">
+          @click:row="(_: any, data: any) => emits('row-click', data)"
+          :style="`max-height: calc(100vh - (${offset}px))`">
           <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
             <slot :name="slotName" v-bind="slotProps" />
           </template>
         </v-data-table>
-        <slot  name="footer"/>
+        <slot name="footer" />
       </v-card>
     </v-col>
   </v-row>
@@ -72,6 +80,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  canSearch: {
+    type: Boolean,
+    default: false,
+  },
   createLabel: {
     type: String,
     default: "Add",
@@ -112,6 +124,8 @@ const props = defineProps({
 
 const emits = defineEmits(["create", "refresh", "update:page", "row-click"]);
 
+const searchInput = defineModel('search', { default: "" })
+
 const internalPage = ref(props.page);
 watch(
   () => props.page,
@@ -121,4 +135,8 @@ watch(
 );
 </script>
 
-<style scoped></style>
+<style scoped>
+.v-data-table :deep(thead th) {
+  font-weight: bold !important;
+}
+</style>

package/package.json

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