@iservice365/layer-common 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.2.0
+
+### Minor Changes
+
+- 770867c: People mgmt - initial release
+
 ## 1.1.0
 
 ### Minor Changes

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>

package/components/CameraMain.vue

@@ -0,0 +1,352 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
+        <v-toolbar density="compact" color="grey-lighten-4 pl-2 pr-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="getCameraRefresh()">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-btn
+              variant="flat"
+              color="primary"
+              class="text-none"
+              @click="dialogAdd = true"
+            >
+              Add
+            </v-btn>
+          </template>
+        </v-toolbar>
+
+        <v-card-text class="pa-0 bg-red">
+          <v-data-table
+            :headers="prop.headers"
+            :items="items"
+            fixed-header
+            hide-default-footer
+            hide-default-header
+            @click:row="handleRowClick"
+            style="max-height: 300px"
+          >
+          </v-data-table>
+        </v-card-text>
+
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-font gray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value="$emit('update:value', $event)"
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+      </v-card>
+    </v-col>
+
+    <!-- dialog -->
+    <v-dialog v-model="dialogAdd" persistent width="450">
+      <CameraForm
+        title="Add Camera"
+        :site="prop.site"
+        :guard-posts="prop.guardPosts"
+        :type="prop.type"
+        @cancel="dialogAdd = false"
+        @success="handleSuccess"
+      />
+    </v-dialog>
+
+    <v-dialog v-model="dialogEdit" persistent width="450">
+      <CameraForm
+        title="Edit Camera"
+        :site="prop.site"
+        :guard-posts="prop.guardPosts"
+        :type="prop.type"
+        @cancel="dialogEdit = false"
+        @success="handleSuccess"
+        mode="edit"
+        :camera="camera"
+      />
+    </v-dialog>
+
+    <v-dialog v-model="dialogPreview" persistent width="540">
+      <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">
+              Preview
+            </span>
+          </v-row>
+        </v-toolbar>
+
+        <v-card-text
+          style="max-height: 100vh; overflow-y: auto"
+          class="pa-5 my-5 px-7"
+        >
+          <v-row no-gutters>
+            <v-col cols="12" class="mb-2">
+              Host:
+              <span class="font-weight-bold">
+                {{ camera.host }}
+              </span>
+            </v-col>
+
+            <v-col cols="12" class="mb-2">
+              Username:
+              <span class="font-weight-bold">
+                {{ camera.username }}
+              </span>
+            </v-col>
+
+            <v-col cols="12" class="mb-2">
+              Password:
+              <span class="font-weight-bold">
+                {{ camera.password }}
+              </span>
+            </v-col>
+
+            <v-col cols="12" class="mb-2">
+              Type:
+              <span class="font-weight-bold">
+                {{ camera.type }}
+              </span>
+            </v-col>
+
+            <v-col cols="12" class="mb-2">
+              Category:
+              <span class="font-weight-bold">
+                {{ camera.category }}
+              </span>
+            </v-col>
+
+            <v-col v-if="camera.type === 'anpr'" cols="12" class="mb-2">
+              Direction:
+              <span class="font-weight-bold">
+                {{ camera.direction }}
+              </span>
+            </v-col>
+
+            <v-col v-if="camera.type === 'anpr'" cols="12">
+              Guard House:
+              <span class="font-weight-bold">
+                {{ camera.guardPost }}
+              </span>
+            </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="openDialogEdit()">
+                    <v-list-item-title class="text-subtitle-2">
+                      Edit Building
+                    </v-list-item-title>
+                  </v-list-item>
+
+                  <v-list-item @click="openDialogDelete()" class="text-red">
+                    <v-list-item-title class="text-subtitle-2">
+                      Delete Building
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="dialogDelete" persistent width="540">
+      <v-card width="100%">
+        <v-card-text
+          style="max-height: 100vh; overflow-y: auto"
+          class="pa-5 my-5 px-7 text-center"
+        >
+          Are you sure want to delete this {{ camera.type }} camera?
+        </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"
+                tile
+                @click="dialogDelete = false"
+                height="48"
+              >
+                Cancel
+              </v-btn>
+            </v-col>
+
+            <v-col cols="6" class="pa-0">
+              <v-btn
+                block
+                tile
+                variant="flat"
+                class="text-none"
+                size="large"
+                height="48"
+                color="black"
+                @click="submitDelete()"
+              >
+                Delete
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import useSiteSettings from "../composables/useSiteSettings";
+
+const events = defineEmits(["update:value", "row-click"]);
+
+const prop = defineProps({
+  site: {
+    type: String,
+    required: true,
+    default: "site",
+  },
+  type: {
+    type: String as PropType<TSiteCamera["type"]>,
+    default: "anpr",
+  },
+  guardPosts: {
+    type: Number,
+    default: 0,
+  },
+  headers: {
+    type: Array as PropType<Array<any>>,
+    default: () => [
+      { text: "Host", value: "host" },
+      { text: "Category", value: "category" },
+      { text: "Guard House", value: "guardPost" },
+      { text: "Actions", value: "action", sortable: false },
+    ],
+  },
+});
+
+const items = ref<Array<TCamera>>([]);
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const { getAllSiteCameras, deleteSiteCameraById } = useSiteSettings();
+const { data: getCameraReq, refresh: getCameraRefresh } =
+  await useLazyAsyncData(
+    `get-site-${prop.site}-${prop.type}-cameras`,
+    () =>
+      getAllSiteCameras({ site: prop.site, type: prop.type, page: page.value }),
+    {
+      watch: [page],
+    }
+  );
+
+watchEffect(() => {
+  if (getCameraReq.value) {
+    items.value = getCameraReq.value.items;
+    pageRange.value = getCameraReq.value.pageRange;
+    pages.value = getCameraReq.value.pages;
+  }
+});
+
+const dialogAdd = ref(false);
+const dialogEdit = ref(false);
+const dialogPreview = ref(false);
+const dialogDelete = ref(false);
+
+function openDialogEdit() {
+  dialogEdit.value = true;
+
+  if (dialogPreview.value) dialogPreview.value = false;
+}
+
+function openDialogDelete() {
+  dialogDelete.value = true;
+
+  if (dialogPreview.value) dialogPreview.value = false;
+}
+
+function handleSuccess() {
+  if (dialogAdd.value) dialogAdd.value = false;
+
+  if (dialogEdit.value) dialogEdit.value = false;
+
+  if (dialogPreview.value) dialogPreview.value = false;
+
+  if (dialogDelete.value) dialogDelete.value = false;
+
+  getCameraRefresh();
+}
+
+const camera = ref<TSiteCamera>({
+  site: "",
+  host: "",
+  username: "",
+  password: "",
+  type: "ip",
+  category: "standard",
+  direction: "none",
+  guardPost: null,
+  status: "active",
+});
+
+function handleRowClick(_: any, data: any) {
+  dialogPreview.value = true;
+  camera.value = JSON.parse(JSON.stringify(data.item));
+}
+
+async function submitDelete() {
+  try {
+    await deleteSiteCameraById(camera.value._id ?? "");
+    await getCameraRefresh();
+    dialogDelete.value = false;
+  } catch (error) {
+    console.error("Error deleting camera:", error);
+  }
+}
+</script>

package/components/Card/DeleteConfirmation.vue

@@ -0,0 +1,51 @@
+<template>
+    <v-card width="100%" :disabled="loading" :loading="loading">
+        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
+            <span> {{ promptTitle }}</span>
+
+            <span v-if="message" class="text-error mt-2">
+                {{ message }} Do you want to delete anyway?
+            </span>
+        </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" tile @click="emit('close')"
+                        height="48">
+                        Cancel
+                    </v-btn>
+                </v-col>
+
+                <v-col cols="6" class="pa-0">
+                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="black"
+                        @click="emit('delete')">
+                        Delete
+                    </v-btn>
+                </v-col>
+            </v-row>
+        </v-toolbar>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    message: {
+        type: String,
+        default: ""
+    },
+    promptTitle: {
+        type: String,
+        default: "Are you sure want to delete this? "
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(["close", "delete"])
+
+</script>
+
+<style scoped></style>