@7365admin1/layer-common 1.8.0

package/components/BuildingUnitFormEdit.vue

@@ -0,0 +1,429 @@
+<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">
+            <v-row>
+              <v-col cols="12" class="mt-2">
+                <v-row no-gutters>
+                  <InputLabel
+                    class="text-capitalize font-weight-bold"
+                    title="Owner"
+                  />
+                  <v-col cols="12">
+                  <v-autocomplete
+                    v-model="buildingUnit.ownerName"
+                    :items="peopleItems"
+                    item-title="name"
+                    return-object
+                    density="comfortable">
+                  </v-autocomplete>
+                  </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"
+                    title="Company Name"
+                    required
+                  />
+                  <v-col cols="12">
+                    <v-text-field
+                      v-model="buildingUnit.companyName"
+                      density="comfortable"
+                      :rules="[requiredRule]"
+                    ></v-text-field>
+                  </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"
+                    title="Company Registration Number"
+                  />
+                  <v-col cols="12">
+                    <v-text-field
+                      v-model="buildingUnit.companyRegistrationNumber"
+                      density="comfortable"
+                    ></v-text-field>
+                  </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"
+                    title="Lease Start"
+                    required
+                  />
+                  <v-col cols="12">
+                    <InputDateTimePicker
+                      ref="startDateRef"
+                      v-model="buildingUnit.leaseStart"
+                      :rules="[requiredRule]"
+                    />
+                  </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"
+                    title="Lease End"
+                    required
+                  />
+                  <v-col cols="12">
+                    <InputDateTimePicker
+                      ref="endDateRef"
+                      v-model="buildingUnit.leaseEnd"
+                      :rules="[requiredRule]"
+                    />
+                  </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 || 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: "",
+      owner: "",
+      ownerName: "",
+      building: "",
+      buildingName: "",
+      category: "",
+      block: null,
+      level: 0,
+      status: "active",
+      buildingUnitFiles: [],
+      companyName: "",
+      companyRegistrationNumber: "",
+      leaseStart: "",
+      leaseEnd: "",
+    }),
+  },
+});
+
+const buildingUnit = ref({
+  _id: "",
+  site: "",
+  name: "",
+  owner: "",
+  ownerName: "",
+  building: "",
+  buildingName: "",
+  level: 0,
+  category: "",
+  block: null,
+  status: "active",
+  buildingUnitFiles: [],
+  companyName: "",
+  companyRegistrationNumber: "",
+  leaseStart: "",
+  leaseEnd: "",
+});
+
+buildingUnit.value = JSON.parse(JSON.stringify(prop.roomFacility));
+
+const emit = defineEmits(["cancel", "success", "success:create-more"]);
+
+const validForm = ref(false);
+
+const { getAll } = useBuilding();
+const { getPeopleByUnit } = usePeople();
+
+const buildings = ref<Record<string, any>[]>([]);
+const peopleItems = ref<Array<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,
+    }));
+  }
+});
+
+const { data: getUnitPeople } = useLazyAsyncData(
+  "get-unit-people",
+  async () => getPeopleByUnit(prop.roomFacility._id as string)
+);
+
+watch(getUnitPeople, (newData: any) => {
+  if (newData) {
+      peopleItems.value = newData ?? [];
+  }
+});
+
+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 {
+    
+    if (buildingUnit.value.ownerName) {
+      buildingUnit.value.owner = (buildingUnit.value.ownerName as any)._id
+      buildingUnit.value.ownerName = (buildingUnit.value.ownerName as any).name
+    }
+
+    await updateById(buildingUnit.value._id ?? "", {
+      name: buildingUnit.value.name,
+      level: buildingUnit.value.level,
+      category: buildingUnit.value.category,
+      buildingUnitFiles: buildingUnit.value.buildingUnitFiles || [],
+      companyName: buildingUnit.value.companyName,
+      companyRegistrationNumber: buildingUnit.value.companyRegistrationNumber || "",
+      leaseStart: buildingUnit.value.leaseStart,
+      leaseEnd: buildingUnit.value.leaseEnd,
+      owner: buildingUnit.value.owner || "",
+      ownerName: buildingUnit.value.ownerName || ""
+    });
+
+    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/CameraForm.vue

@@ -0,0 +1,264 @@
+<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 text-capitalize">
+          {{ title }}
+        </span>
+      </v-row>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
+      <v-form ref="formRef" v-model="validForm" :disabled="disable">
+        <v-row no-gutters class="pt-4">
+          <v-col cols="12">
+            <InputLabel class="text-capitalize" title="URL" required />
+            <v-text-field
+              v-model.trim="camera.host"
+              density="comfortable"
+              :rules="[requiredRule, isValidBaseURL]"
+              placeholder="Enter camera URL"
+            />
+          </v-col>
+
+          <v-col v-if="isANPR" cols="12">
+            <InputLabel class="text-capitalize" title="Category" required />
+            <v-select
+              v-model="camera.category"
+              :items="anprCategoryOptions"
+              density="comfortable"
+              :rules="[requiredRule]"
+            />
+          </v-col>
+
+          <v-col v-if="isANPR" cols="12">
+            <InputLabel class="text-capitalize" title="Direction" required />
+            <v-select
+              v-model="camera.direction"
+              :items="anprDirectionOptions"
+              density="comfortable"
+              :rules="[requiredRule]"
+            />
+          </v-col>
+
+          <v-col v-if="isANPR" cols="12">
+            <InputLabel class="text-capitalize" title="Guard House" />
+            <v-select
+              v-model="camera.guardPost"
+              :items="guardPostOptions"
+              density="comfortable"
+            />
+          </v-col>
+
+          <v-col cols="12">
+            <InputLabel class="text-capitalize" title="User" required />
+            <v-text-field
+              v-model.trim="camera.username"
+              density="comfortable"
+              :rules="[requiredRule]"
+              placeholder="Enter username"
+            />
+          </v-col>
+
+          <v-col cols="12">
+            <InputLabel class="text-capitalize" title="Password" required />
+            <v-text-field
+              v-model.trim="camera.password"
+              type="password"
+              density="comfortable"
+              :rules="[requiredRule]"
+              placeholder="Enter password"
+            />
+          </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="back"
+            text="Cancel"
+          />
+        </v-col>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!validForm || disable || !hasChanges"
+            @click="submit"
+            :loading="disable"
+            text="Submit"
+          />
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import useSiteSettings from '../composables/useSiteSettings';
+
+const prop = defineProps({
+  title: {
+    type: String,
+    default: "Site Camera Form",
+  },
+  site: {
+    type: String,
+    required: true,
+  },
+  guardPosts: {
+    type: Number,
+    default: 0,
+  },
+  type: {
+    type: String as PropType<TSiteCamera["type"]>,
+    default: "anpr",
+  },
+  mode: {
+    type: String,
+    default: "add",
+  },
+  camera: {
+    type: Object as PropType<TSiteCamera>,
+    default: () => ({
+      site: "",
+      host: "",
+      username: "",
+      password: "",
+      type: "ip",
+      category: "standard",
+      direction: "none",
+      guardPost: null,
+      status: "active",
+    }),
+  },
+});
+
+const { requiredRule, isValidBaseURL } = useUtils();
+const emit = defineEmits(["cancel", "select", "success", "error"]);
+
+const camera = ref<TSiteCamera>({
+  site: "",
+  host: "",
+  username: "",
+  password: "",
+  type: "ip",
+  category: "standard",
+  direction: "none",
+  guardPost: null,
+  status: "active",
+});
+
+camera.value.site = prop.site;
+
+if (prop.mode === "edit") {
+  camera.value = JSON.parse(JSON.stringify(prop.camera));
+}
+
+camera.value.site = prop.site;
+camera.value.type = prop.type;
+camera.value.category = prop.type === "anpr" ? "resident" : "standard";
+camera.value.direction = prop.type === "anpr" ? "both" : "none";
+
+const validForm = ref(false);
+const formRef = ref<HTMLFormElement | null>(null);
+const disable = ref(false);
+const message = ref("");
+
+const isANPR = computed(() => prop.type === "anpr");
+
+const anprCategoryOptions = computed(() => [
+  { title: "Resident", value: "resident" },
+  { title: "Visitor", value: "visitor" },
+]);
+
+const anprDirectionOptions = computed(() => [
+  { title: "Entry", value: "entry" },
+  { title: "Exit", value: "exit" },
+  { title: "Both", value: "both" },
+  { title: "None", value: "none" },
+]);
+
+function back() {
+  message.value = "";
+
+  if (formRef.value) {
+    formRef.value.reset();
+  }
+
+  emit("cancel");
+}
+
+const hasChanges = computed(() => {
+  // Only check for changes in edit mode
+  if (prop.mode === "edit") {
+    return (
+      camera.value.host !== prop.camera.host ||
+      camera.value.username !== prop.camera.username ||
+      camera.value.password !== prop.camera.password ||
+      camera.value.category !== prop.camera.category ||
+      camera.value.guardPost !== prop.camera.guardPost ||
+      camera.value.direction !== prop.camera.direction
+    );
+  }
+
+  // For add mode, always return true (allow submission)
+  return true;
+});
+
+const { addCamera, updateSiteCamera } = useSiteSettings();
+
+async function submit() {
+  disable.value = true;
+  camera.value.guardPost = camera.value.guardPost ?? 0;
+
+  try {
+    if (prop.mode === "add") {
+      await addCamera(camera.value);
+    }
+
+    if (prop.mode === "edit") {
+      await updateSiteCamera(camera.value._id ?? "", {
+        host: camera.value.host,
+        username: camera.value.username,
+        password: camera.value.password,
+        category: camera.value.category,
+        guardPost: camera.value.guardPost,
+        direction: camera.value.direction,
+      });
+    }
+
+    emit("success", `${prop.title} added successfully!`);
+  } catch (error: any) {
+    emit("error", error.response?._data?.message || "Failed to add camera");
+  } finally {
+    disable.value = false;
+  }
+}
+
+const guardPostOptions = computed(() => {
+  const items = [];
+
+  for (let index = 0; index < prop.guardPosts; index++) {
+    items.push({
+      title: `Guard House ${index + 1}`,
+      value: index + 1,
+    });
+  }
+
+  return items;
+});
+</script>
+<style scoped></style>