@iservice365/layer-common 1.3.0 → 1.3.1

package/components/BuildingUnitFormAdd.vue

@@ -0,0 +1,338 @@
+<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"> Add Unit </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="Name" required />
+              <v-col cols="12">
+                <v-text-field
+                  v-model="buildingUnit.name"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12">
+            <v-row>
+              <v-col cols="12" class="mt-2">
+                <v-row no-gutters>
+                  <InputLabel
+                    class="text-capitalize"
+                    title="Building"
+                    required
+                  />
+                  <v-col cols="12">
+                    <v-autocomplete
+                      v-model="buildingUnit.building"
+                      :items="buildings"
+                      item-title="name"
+                      item-value="_id"
+                      v-model:search="searchBuilding"
+                      :hide-no-data="false"
+                      density="comfortable"
+                      :rules="[requiredRule]"
+                      variant="outlined"
+                    ></v-autocomplete>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize" title="Category" required />
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="buildingUnit.category"
+                  :items="unitCategories"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12">
+            <v-row>
+              <v-col cols="6" class="mt-2">
+                <v-row no-gutters>
+                  <InputLabel class="text-capitalize" title="Level" required />
+                  <v-col cols="12">
+                    <v-select
+                      v-model="buildingUnit.level"
+                      :items="buildingLevels"
+                      density="comfortable"
+                      :rules="[requiredRule]"
+                    ></v-select>
+                  </v-col>
+                </v-row>
+              </v-col>
+
+              <v-col cols="6" class="mt-2">
+                <v-row no-gutters>
+                  <InputLabel
+                    class="text-capitalize"
+                    title="No. of Units"
+                    required
+                  />
+                  <v-col cols="12">
+                    <v-text-field
+                      v-model.number="buildingUnitQty"
+                      density="comfortable"
+                      :rules="[requiredRule]"
+                      type="number"
+                      @update:model-value="setBuildingLevels()"
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="buildingLevels" cols="12">
+            <v-row justify="center">
+              <v-col cols="6">
+                <v-btn
+                  block
+                  color="primary"
+                  variant="text"
+                  class="text-none font-weight-bold"
+                  text="Set unit labels"
+                  @click="show = !show"
+                ></v-btn>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-expand-transition>
+            <v-row v-show="show" no-gutters>
+              <template
+                v-for="(unitLabel, unitLabelIndex) in unitLabels"
+                :key="levelIndex"
+              >
+                <v-col cols="12">
+                  <v-row no-gutters>
+                    <InputLabel
+                      class="text-capitalize font-weight-bold"
+                      :title="`Unit ${unitLabelIndex + 1}`"
+                    />
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model.trim="unitLabels[unitLabelIndex]"
+                        density="comfortable"
+                      ></v-text-field>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </template>
+            </v-row>
+          </v-expand-transition>
+
+          <v-col cols="12" class="mt-5">
+            <InputLabel class="text-capitalize" title="Upload Files (Lease of Contract, Cert. of Occupancy)" />
+            <InputFileV2 v-model="buildingUnit.buildingUnitFiles" :multiple="false" :max-length="10" title="Upload PDF Files" accept="application/pdf" />
+          </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"
+            :disabled="disable"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!validForm || disable"
+            @click="submit"
+            :loading="disable"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+  site: {
+    type: String,
+    default: "",
+  },
+});
+
+const searchBuilding = ref("");
+
+const emit = defineEmits(["cancel", "success", "success:create-more"]);
+
+const validForm = ref(false);
+
+const { getAll } = useBuilding();
+
+const buildings = ref<TBuilding[]>([]);
+
+const { data: getBuildingReq } = useLazyAsyncData(
+  "get-all-buildings",
+  async () => getAll({ site: prop.site, status: "active" })
+);
+
+watchEffect(() => {
+  if (getBuildingReq.value) {
+    buildings.value = getBuildingReq.value.items;
+  }
+});
+
+const buildingUnitQty = ref(1);
+
+const buildingUnit = ref<TBuildingUnit>({
+  site: "",
+  name: "Unit",
+  building: "",
+  buildingName: "",
+  block: 0,
+  level: "",
+  category: "",
+  status: "active",
+  buildingUnitFiles: []
+});
+
+buildingUnit.value.site = prop.site;
+
+const selectedBuilding = computed(() => {
+  return buildings.value.find((b) => b._id === buildingUnit.value.building);
+});
+
+watchEffect(() => {
+  if (buildingUnit.value.building) {
+    buildingUnit.value.buildingName = selectedBuilding.value?.name;
+    buildingUnit.value.block = selectedBuilding.value?.block || 0;
+  } else {
+    buildingUnit.value.buildingName = "";
+    buildingUnit.value.block = 0;
+  }
+});
+
+const buildingLevels = computed(() => {
+  return selectedBuilding.value?.levels || [];
+});
+
+const unitLabels = ref<string[]>([]);
+unitLabels.value.push("Unit 1");
+
+const show = ref(false);
+
+function setBuildingLevels() {
+  unitLabels.value.length = 0;
+  for (let index = 0; index < buildingUnitQty.value; index++) {
+    unitLabels.value.push(`Unit ${index + 1}`);
+  }
+}
+
+const name = ref("");
+const directorName = ref("");
+const createMore = ref(false);
+const disable = ref(false);
+
+const { requiredRule } = useUtils();
+
+const message = ref("");
+
+const { add, categories: unitCategories } = useBuildingUnit();
+
+function setBuildingUnit() {
+  buildingUnit.value.site = prop.site ?? "";
+  buildingUnit.value.name = "Unit";
+  buildingUnit.value.building = "";
+  buildingUnit.value.buildingName = "";
+  buildingUnit.value.level = "";
+  buildingUnit.value.category = "";
+  buildingUnit.value.status = "active";
+  buildingUnit.value.buildingUnitFiles = []
+  buildingUnitQty.value = 1;
+  message.value = "";
+}
+
+async function submit() {
+  disable.value = true;
+  try {
+    await add({
+      labels: unitLabels.value,
+      unit: buildingUnit.value,
+      qty: buildingUnitQty.value,
+    });
+
+    if (createMore.value) {
+      setBuildingUnit();
+      message.value = "";
+      emit("success:create-more");
+      return;
+    }
+
+    emit("success");
+  } catch (error: any) {
+    message.value =
+      error.response?._data?.message || "Failed to create building";
+  } finally {
+    disable.value = false;
+  }
+}
+
+function cancel() {
+  name.value = "";
+  directorName.value = "";
+  createMore.value = false;
+  message.value = "";
+  emit("cancel");
+}
+</script>

package/components/BuildingUnitFormEdit.vue

@@ -0,0 +1,278 @@
+<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"> Edit Unit </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">
+            <v-row>
+              <v-col cols="12" class="mt-2">
+                <v-row no-gutters>
+                  <InputLabel
+                    class="text-capitalize font-weight-bold"
+                    title="Building"
+                  />
+                  <v-col cols="12">
+                    {{ buildingUnit.buildingName }}
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12">
+            <v-row>
+              <v-col cols="12" class="mt-2">
+                <v-row no-gutters>
+                  <InputLabel
+                    class="text-capitalize font-weight-bold"
+                    title="Block"
+                  />
+                  <v-col cols="12">
+                    {{ buildingUnit.block }}
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12">
+            <v-row>
+              <v-col cols="12" class="mt-2">
+                <v-row no-gutters>
+                  <InputLabel
+                    class="text-capitalize font-weight-bold"
+                    title="Unit Name"
+                  />
+                  <v-col cols="12">
+                    <v-text-field
+                      v-model="buildingUnit.name"
+                      density="comfortable"
+                      :rules="[requiredRule]"
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel
+                class="text-capitalize font-weight-bold"
+                title="Category"
+                required
+              />
+              <v-col cols="12">
+                <v-autocomplete
+                  v-model="buildingUnit.category"
+                  :items="unitCategories"
+                  density="comfortable"
+                  :rules="[requiredRule]"
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12">
+            <v-row>
+              <v-col cols="6" class="mt-2">
+                <v-row no-gutters>
+                  <InputLabel
+                    class="text-capitalize font-weight-bold"
+                    title="Level"
+                    required
+                  />
+                  <v-col cols="12">
+                    <v-select
+                      v-model="buildingUnit.level"
+                      :items="buildingLevels"
+                      density="comfortable"
+                      :rules="[requiredRule]"
+                    ></v-select>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col cols="12" class="mt-5">
+            <InputLabel class="text-capitalize" title="Upload Files (Lease of Contract, Cert. of Occupancy)" />
+            <InputFileV2 v-model="buildingUnit.buildingUnitFiles" :multiple="false" :max-length="10" title="Upload PDF Files" accept="application/pdf" />
+          </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 || !hasChanges || disable"
+            @click="submit"
+            :loading="disable"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+  site: {
+    type: String,
+    default: "",
+  },
+  roomFacility: {
+    type: Object as PropType<TBuildingUnit>,
+    default: () => ({
+      _id: "",
+      site: "",
+      name: "",
+      building: "",
+      buildingName: "",
+      category: "",
+      block: null,
+      level: 0,
+      status: "active",
+      buildingUnitFiles: []
+    }),
+  },
+});
+
+const buildingUnit = ref({
+  _id: "",
+  site: "",
+  name: "",
+  building: "",
+  buildingName: "",
+  level: 0,
+  category: "",
+  block: null,
+  status: "active",
+  buildingUnitFiles: []
+});
+
+buildingUnit.value = JSON.parse(JSON.stringify(prop.roomFacility));
+
+const emit = defineEmits(["cancel", "success", "success:create-more"]);
+
+const validForm = ref(false);
+
+const { getAll } = useBuilding();
+
+const buildings = ref<Record<string, any>[]>([]);
+
+const { data: getBuildingReq } = useLazyAsyncData(
+  "get-all-buildings",
+  async () => getAll({ site: prop.site, status: "active" })
+);
+
+watchEffect(() => {
+  if (getBuildingReq.value) {
+    buildings.value = getBuildingReq.value.items.map((building: TBuilding) => ({
+      title: building.name,
+      value: building._id,
+      levels: building.levels,
+    }));
+  }
+});
+
+buildingUnit.value.site = prop.site;
+
+const selectedBuilding = computed(() => {
+  return buildings.value.find((b) => b.value === buildingUnit.value.building);
+});
+
+const buildingLevels = computed(() => {
+  return Array.from(
+    { length: selectedBuilding.value?.levels || 0 },
+    (_, i) => i + 1
+  );
+});
+
+const disable = ref(false);
+
+const { requiredRule } = useUtils();
+
+const message = ref("");
+
+const { updateById, categories: unitCategories } = useBuildingUnit();
+
+function arraysAreEqual(a: any[], b: any[]): boolean {
+  return a.length === b.length && a.every((val, index) => val === b[index]);
+}
+
+
+
+const hasChanges = computed(() => {
+  return (
+    prop.roomFacility.name !== buildingUnit.value.name ||
+    prop.roomFacility.category !== buildingUnit.value.category ||
+    prop.roomFacility.level !== buildingUnit.value.level || 
+    !arraysAreEqual(prop.roomFacility.buildingUnitFiles, buildingUnit.value.buildingUnitFiles)
+  );
+});
+
+async function submit() {
+  disable.value = true;
+  try {
+    await updateById(buildingUnit.value._id ?? "", {
+      name: buildingUnit.value.name,
+      level: buildingUnit.value.level,
+      category: buildingUnit.value.category,
+      buildingUnitFiles: buildingUnit.value.buildingUnitFiles || []
+    });
+
+    emit("success");
+  } catch (error: any) {
+    message.value =
+      error.response?._data?.message || "Failed to create building";
+  } finally {
+    disable.value = false;
+  }
+}
+
+function cancel() {
+  message.value = "";
+  emit("cancel");
+}
+</script>

package/components/Chat/Information.vue

@@ -299,7 +299,7 @@ watchEffect(() => {
     serviceProviders.value = getAllReq.value.map((i: any) => ({
       title: i.nature.replace(/_/g, " "),
       subtitle: i.title,
-      value: i._id.org,
+      value: i.nature
     }));
   }
 });

package/components/Input/NRICNumber.vue

@@ -6,6 +6,7 @@
     :placeholder="placeholder"
     :counter="maxlength"
     @input="onInput"
+    :loading="loading"
     outlined
     clearable
   />
@@ -25,9 +26,15 @@ const props = defineProps({
   maxlength: {
     type: [Number, String],
     default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
   }
 })
 
+const emit = defineEmits(['update:modelValue'])
+
 const model = defineModel({required: true, default: ""})
 
 function onInput(event) {
@@ -38,4 +45,9 @@ function onInput(event) {
 
   model.value = formatted
 }
+
+
+watch(model, (newVal) => {
+  emit('update:modelValue:', newVal)
+})
 </script>

package/components/TableMain.vue

@@ -43,7 +43,7 @@
         <!-- 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 - (200px))">
+          @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>
@@ -103,6 +103,10 @@ const props = defineProps({
   extensionHeight: {
     type: Number,
     default: 50
+  },
+  offset: {
+    type: Number,
+    default: 200
   }
 });