@7365admin1/layer-common 1.8.0

package/components/NFC/NFCTagForm.vue

@@ -0,0 +1,236 @@
+<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 px-7"
+    >
+      <v-form ref="formRef" v-model="valid" @submit.prevent="submit">
+        <v-row no-gutters>
+          <v-col cols="12" class="mb-4">
+            <label class="text-subtitle-2 font-weight-medium mb-2">
+              Name <span class="text-red">*</span>
+            </label>
+            <v-text-field
+              v-model="form.name"
+              placeholder="Enter name"
+              variant="outlined"
+              density="comfortable"
+              :rules="[rules.required]"
+              hide-details="auto"
+            />
+          </v-col>
+
+          <v-col cols="12" class="mb-4">
+            <label class="text-subtitle-2 font-weight-medium mb-2">
+              Tag ID <span class="text-red">*</span>
+            </label>
+            <v-text-field
+              v-model="form.tagID"
+              placeholder="Enter tag id"
+              variant="outlined"
+              density="comfortable"
+              :rules="[rules.required, rules.noSpaces]"
+              hide-details="auto"
+              @input="handleTagIDInput"
+            />
+          </v-col>
+
+        </v-row>
+      </v-form>
+    </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="$emit('cancel')"
+            height="48"
+            :disabled="loading"
+          >
+            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="submit"
+            :loading="loading"
+            :disabled="!valid || loading || !hasChanges"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+
+import useNFCPatrolTag from "../../composables/useNFCPatrolTag";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Add NFC Tag",
+  },
+  site: {
+    type: String,
+    required: true,
+  },
+  orgId: {
+    type: String,
+    required: true,
+  },
+  mode: {
+    type: String as PropType<"create" | "edit">,
+    default: "create",
+  },
+  nfcTag: {
+    type: Object as PropType<any>,
+    default: () => ({
+      name: "",
+      tagID: "",
+      status: "active",
+    }),
+  },
+});
+
+const emit = defineEmits(["cancel", "success", "error"]);
+
+const formRef = ref();
+const valid = ref(false);
+const loading = ref(false);
+
+const form = ref({
+  name: "",
+  tagID: "",
+  status: "active",
+});
+
+
+const originalForm = ref({
+  name: "",
+  tagID: "",
+  status: "active",
+});
+
+const statusOptions = [
+  { title: "Active", value: "active" },
+  { title: "Inactive", value: "inactive" },
+];
+
+const rules = {
+  required: (v: any) => !!v || "This field is required",
+  noSpaces: (v: any) => !/\s/.test(v) || "Spaces are not allowed",
+};
+
+const hasChanges = computed(() => {
+  if (props.mode === "create") {
+  
+    return true;
+  }
+  
+
+  return (
+    form.value.name !== originalForm.value.name ||
+    form.value.tagID !== originalForm.value.tagID ||
+    form.value.status !== originalForm.value.status
+  );
+});
+
+
+watchEffect(() => {
+  if (props.mode === "edit" && props.nfcTag) {
+    form.value = {
+      name: props.nfcTag.name || "",
+      tagID: props.nfcTag.tagID || "",
+      status: props.nfcTag.status || "active",
+    };
+   
+    originalForm.value = {
+      name: props.nfcTag.name || "",
+      tagID: props.nfcTag.tagID || "",
+      status: props.nfcTag.status || "active",
+    };
+  }
+});
+
+const { add: addNFCTag, updateById: updateNFCTag } = useNFCPatrolTag();
+
+function handleTagIDInput(event: any) {
+
+  const value = event.target.value;
+  form.value.tagID = value.toUpperCase().replace(/\s/g, "");
+}
+
+async function submit() {
+  const { valid: isValid } = await formRef.value.validate();
+
+  if (!isValid) return;
+  
+  
+  if (props.mode === "edit" && !hasChanges.value) {
+    return;
+  }
+
+  loading.value = true;
+
+  try {
+    
+    const payload: any = {
+      site: props.site,
+      tagID: form.value.tagID,
+      name: form.value.name,
+    };
+    
+  
+    if (props.mode === "edit") {
+      payload._id = props.nfcTag._id;
+      payload.updateType = "Edit";
+    }
+
+    if (props.mode === "create") {
+      await addNFCTag(payload);
+    } else {
+      await updateNFCTag(props.nfcTag._id, payload);
+    }
+
+    emit("success");
+
+
+    if (props.mode === "create") {
+      form.value = {
+        name: "",
+        tagID: "",
+        status: "active",
+      };
+      formRef.value.reset();
+    }
+  } catch (error: any) {
+    console.error("Error submitting NFC tag:", error);
+    emit("error", error);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>

package/components/NFC/NFCTagMain.vue

@@ -0,0 +1,337 @@
+<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="getNFCTagRefresh()">
+              <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">
+          <v-data-table
+            :headers="headers"
+            :items="items"
+            fixed-header
+            hide-default-footer
+            @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>
+
+    <!-- Add Dialog -->
+    <v-dialog v-model="dialogAdd" persistent width="450">
+      <NFCTagForm
+        title="Add NFC Tag"
+        :site="props.site"
+        :org-id="props.orgId"
+        @cancel="dialogAdd = false"
+        @success="handleSuccess"
+        @error="handleError"
+      />
+    </v-dialog>
+
+    <!-- Edit Dialog -->
+    <v-dialog v-model="dialogEdit" persistent width="450">
+      <NFCTagForm
+        title="Edit NFC Tag"
+        :site="props.site"
+        :org-id="props.orgId"
+        @cancel="dialogEdit = false"
+        @success="handleSuccess"
+        @error="handleError"
+        mode="edit"
+        :nfc-tag="selectedTag"
+      />
+    </v-dialog>
+
+    <!-- Preview 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">
+              NFC Tag Details
+            </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">
+              Name:
+              <span class="font-weight-bold">
+                {{ selectedTag.name }}
+              </span>
+            </v-col>
+
+            <v-col cols="12" class="mb-2">
+              Tag ID:
+              <span class="font-weight-bold">
+                {{ selectedTag.tagID }}
+              </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 NFC Tag
+                    </v-list-item-title>
+                  </v-list-item>
+
+                  <v-list-item @click="openDialogDelete()" class="text-red">
+                    <v-list-item-title class="text-subtitle-2">
+                      Delete NFC Tag
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
+    <!-- Delete 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 you want to delete this NFC Tag?
+        </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>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </v-row>
+</template>
+
+<script setup lang="ts">
+
+import useNFCPatrolTag from "../../composables/useNFCPatrolTag";
+
+const events = defineEmits(["update:value", "row-click"]);
+
+const props = defineProps({
+  site: {
+    type: String,
+    required: true,
+  },
+  siteName: {
+    type: String,
+    default: "",
+  },
+  orgId: {
+    type: String,
+    required: true,
+  },
+  headers: {
+    type: Array as PropType<Array<any>>,
+    default: () => [
+      { title: "ID", value: "tagID" },
+      { title: "Name", value: "name" },
+      { title: "Status", value: "status" },
+    ],
+  },
+});
+
+const items = ref<Array<any>>([]);
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("1-20 of 1");
+
+const { getAll: getAllNFCTags, deleteById: deleteNFCTagById } = useNFCPatrolTag();
+
+const { data: getNFCTagReq, refresh: getNFCTagRefresh } = await useLazyAsyncData(
+  `get-nfc-tags-${props.site}`,
+  () => getAllNFCTags({ site: props.site, page: page.value }),
+  {
+    watch: [page],
+  }
+);
+
+watchEffect(() => {
+  if (getNFCTagReq.value) {
+    items.value = getNFCTagReq.value.items;
+    pageRange.value = getNFCTagReq.value.pageRange;
+    pages.value = getNFCTagReq.value.pages;
+  }
+});
+
+const dialogAdd = ref(false);
+const dialogEdit = ref(false);
+const dialogPreview = ref(false);
+const dialogDelete = ref(false);
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+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;
+    showMessage("NFC Tag created successfully!", "success");
+  }
+
+  if (dialogEdit.value) {
+    dialogEdit.value = false;
+    showMessage("NFC Tag updated successfully!", "success");
+  }
+
+  if (dialogPreview.value) dialogPreview.value = false;
+
+  if (dialogDelete.value) dialogDelete.value = false;
+
+  getNFCTagRefresh();
+}
+
+function handleError(error: any) {
+  const errorMessage = error?.data?.message || error?.message || "An error occurred";
+  showMessage(errorMessage, "error");
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+const selectedTag = ref<any>({
+  name: "",
+  tagID: "",
+  status: "active",
+});
+
+function handleRowClick(_: any, data: any) {
+  dialogPreview.value = true;
+  selectedTag.value = JSON.parse(JSON.stringify(data.item));
+}
+
+async function submitDelete() {
+  try {
+    await deleteNFCTagById(selectedTag.value._id ?? "");
+    await getNFCTagRefresh();
+    dialogDelete.value = false;
+    showMessage("NFC Tag deleted successfully!", "success");
+  } catch (error) {
+    console.error("Error deleting NFC tag:", error);
+    handleError(error);
+  }
+}
+</script>

package/components/NFC/PatrolSettings.vue

@@ -0,0 +1,130 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
+        <v-row no-gutters class="pa-6" align="center">
+          <v-col cols="12" md="7" class="pr-md-8">
+            <div class="text-subtitle-1 font-weight-medium">
+              Early Start Allowance
+            </div>
+            <div class="text-body-2 text-medium-emphasis mt-1">
+              The number of minutes before the scheduled time that a guard is
+              allowed to click ‘Start Patrol’. For example,<br />
+              if set to 10 minutes, a guard can start their 8:00 AM patrol as
+              early as 7:50 AM.
+            </div>
+          </v-col>
+
+          <v-col cols="12" md="5" class="d-flex justify-md-end mt-4">
+            <v-text-field
+              v-model="earlyStartAllowance"
+              type="number"
+              min="0"
+              variant="outlined"
+              density="default"
+              suffix="mins"
+              hide-details="auto"
+              style="max-width: 167px"
+            >
+              <template #label>
+                Early Start Allowance
+                <span class="text-error">*</span>
+              </template>
+            </v-text-field>
+          </v-col>
+        </v-row>
+
+        <v-row no-gutters class="pa-6 pt-0">
+          <v-col cols="12" class="d-flex justify-end">
+            <v-btn
+              text="Save"
+              color="primary"
+              class="text-none"
+              size="large"
+              variant="flat"
+              @click="submit"
+              :loading="loading"
+            />
+          </v-col>
+        </v-row>
+      </v-card>
+    </v-col>
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import useNFCPatrolSettings from "../../composables/useNFCPatrolSettings";
+
+const props = defineProps({
+  site: {
+    type: String,
+    required: true,
+  },
+  siteName: {
+    type: String,
+    default: "",
+  },
+  orgId: {
+    type: String,
+    required: true,
+  },
+});
+
+const loading = ref<boolean>(false);
+
+const message = ref<string>("");
+const messageSnackbar = ref<boolean>(false);
+const messageColor = ref<string>("");
+
+function handleError(error: any) {
+  const errorMessage =
+    error?.data?.message || error?.message || "An error occurred";
+  showMessage(errorMessage, "error");
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+const earlyStartAllowance = ref<any>(0);
+
+const {
+  getBySite: getNfcPatrolSettings,
+  updateBySite: updateNfcPatrolSettings,
+} = useNFCPatrolSettings();
+
+const { data: nfcPatrolSetting } = await useLazyAsyncData(
+  `fetch-nfc-patrol-settings-${props.site}`,
+  async () => getNfcPatrolSettings(props.site)
+);
+
+watchEffect(() => {
+  if (nfcPatrolSetting.value) {
+    earlyStartAllowance.value = nfcPatrolSetting.value.earlyStartAllowance ?? 0;
+  }
+});
+
+async function submit() {
+  if (
+    [null, ""].includes(earlyStartAllowance.value) ||
+    earlyStartAllowance.value < 0
+  )
+    return showMessage("Please complete all required fields *", "error");
+
+  loading.value = true;
+
+  try {
+    const response: any = await updateNfcPatrolSettings(props.site, {
+      earlyStartAllowance: earlyStartAllowance.value,
+    });
+    showMessage(response.message, "success");
+  } catch (error) {
+    handleError(error);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>