@iservice365/layer-common 1.5.7 → 1.7.0

package/components/DocumentManagement.vue

@@ -24,7 +24,7 @@
       >
         <v-toolbar density="compact" color="grey-lighten-4">
           <template #prepend>
-            <v-btn fab icon density="comfortable" @click="">
+            <v-btn fab icon density="comfortable" @click="getDocuments">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
           </template>
@@ -37,7 +37,7 @@
               <local-pagination
                 v-model="page"
                 :length="pages"
-                @update:value=""
+                @update:value="getDocuments"
               />
             </v-row>
           </template>
@@ -60,6 +60,154 @@
     <v-dialog v-model="createDialog" width="450" persistent>
       <DocumentForm @cancel="createDialog = false" @success="successCreate()" />
     </v-dialog>
+
+    <!-- Edit Dialog -->
+    <v-dialog v-model="editDialog" width="450" persistent>
+      <DocumentForm
+        mode="edit"
+        @cancel="editDialog = false"
+        @success="successUpdate()"
+        :document="selectedDocument"
+      />
+    </v-dialog>
+
+    <!-- Preview Dialog -->
+    <v-dialog v-model="previewDialog" width="450" persistent>
+      <v-card width="100%">
+        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+          <v-row no-gutters class="mb-4">
+            <v-col cols="12">
+              <strong>Name:</strong> {{ selectedDocument?.name ?? "N/A" }}
+            </v-col>
+
+            <v-col cols="12">
+              <strong>Document: </strong>
+              <NuxtLink
+                :to="getFileUrl(selectedDocument.attachment)"
+                external
+                target="_blank"
+              >
+                View Document
+              </NuxtLink>
+            </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="previewDialog = false"
+                height="48"
+              >
+                Close
+              </v-btn>
+            </v-col>
+            <v-col cols="6" class="pa-0" v-if="canUpdate">
+              <v-menu>
+                <template #activator="{ props }">
+                  <v-btn
+                    block
+                    variant="flat"
+                    color="black"
+                    class="text-none"
+                    height="48"
+                    v-bind="props"
+                    tile
+                    :disabled="!canUpdateDocument && !canDeleteDocument"
+                  >
+                    More actions
+                  </v-btn>
+                </template>
+                <v-list class="pa-0">
+                  <v-list-item
+                    v-if="canUpdateDocument"
+                    @click="openEditDialog()"
+                  >
+                    <v-list-item-title class="text-subtitle-2">
+                      Edit Document
+                    </v-list-item-title>
+                  </v-list-item>
+
+                  <v-list-item
+                    v-if="canDeleteDocument"
+                    @click="openDeleteDialog()"
+                    class="text-red"
+                  >
+                    <v-list-item-title class="text-subtitle-2">
+                      Delete Document
+                    </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="confirmDialog"
+      :loading="deleteLoading"
+      width="450"
+      persistent
+    >
+      <v-card width="100%">
+        <v-toolbar density="compact" class="pl-4">
+          <span class="font-weight-medium text-h5">Delete Document</span>
+        </v-toolbar>
+        <v-card-text>
+          <p class="text-subtitle-2 text-center">
+            Are you sure you want to delete this document? This action cannot be
+            undone.
+          </p>
+
+          <v-row v-if="message" no-gutters justify="center" class="mt-4">
+            <span class="text-caption text-error text-center">
+              {{ message }}
+            </span>
+          </v-row>
+        </v-card-text>
+
+        <v-toolbar density="compact">
+          <v-row no-gutters>
+            <v-col cols="6">
+              <v-btn
+                tile
+                block
+                size="48"
+                variant="text"
+                class="text-none"
+                @click="confirmDialog = false"
+                :disabled="deleteLoading"
+              >
+                Close
+              </v-btn>
+            </v-col>
+            <v-col cols="6">
+              <v-btn
+                tile
+                block
+                size="48"
+                color="black"
+                variant="flat"
+                class="text-none"
+                @click="handleDeleteDocument"
+                :loading="deleteLoading"
+              >
+                Delete Document
+              </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">
@@ -105,7 +253,8 @@ const props = defineProps({
 });
 
 const { headerSearch } = useLocal();
-const { getAll: _getAllDocuments } = useDocument();
+const { getAll: _getAllDocuments, deleteById } = useDocument();
+const { getFileUrl } = useFile();
 
 const page = ref(1);
 const pages = ref(0);
@@ -149,8 +298,11 @@ const previewDialog = ref(false);
 const selectedDocument = ref<TDocument>({
   _id: "",
   name: "",
-  attachment: [],
+  attachment: "",
 });
+const deleteLoading = ref(false);
+const confirmDialog = ref(false);
+const selectedDocumentId = ref<string | null>(null);
 
 function tableRowClickHandler(_: any, data: any) {
   selectedDocument.value = data.item as TDocument;
@@ -184,4 +336,36 @@ function successCreate() {
   getDocuments();
   showMessage("Document created successfully!", "success");
 }
+
+function openDeleteDialog() {
+  confirmDialog.value = true;
+  message.value = "";
+}
+
+function openEditDialog() {
+  editDialog.value = true;
+}
+
+async function handleDeleteDocument() {
+  deleteLoading.value = true;
+  try {
+    await deleteById(selectedDocument.value._id ?? "");
+    await getDocuments();
+    selectedDocumentId.value = null;
+    confirmDialog.value = false;
+    previewDialog.value = false;
+  } catch (error: any) {
+    message.value =
+      error?.response?._data?.message || "Failed to delete document";
+  } finally {
+    deleteLoading.value = false;
+  }
+}
+
+function successUpdate() {
+  editDialog.value = false;
+  previewDialog.value = false;
+  getDocuments();
+  showMessage("Document updated successfully!", "success");
+};
 </script>

package/components/Editor.vue

@@ -1,23 +1,30 @@
 <template>
-    <ClientOnly>
-        <v-row no-gutters class="ckeditor-container w-100">
-            <ckeditor v-model="data" :editor="ClassicEditor" :config="config" />
-        </v-row>
-    </ClientOnly>
+  <ClientOnly>
+    <v-row no-gutters class="ckeditor-container w-100">
+      <ckeditor v-model="data" :editor="ClassicEditor" :config="config" @ready="onReady" :key="prop.readOnly" />
+    </v-row>
+  </ClientOnly>
 </template>
 
 <script setup>
+
+const prop = defineProps({
+  readOnly: {
+    type: Boolean,
+    required: false
+  }
+})
 import {
-    ClassicEditor,
-    Essentials,
-    Paragraph,
-    Bold,
-    Italic,
-    Heading,
-    List,
-    Link,
-    Alignment,
-    Font
+  ClassicEditor,
+  Essentials,
+  Paragraph,
+  Bold,
+  Italic,
+  Heading,
+  List,
+  Link,
+  Alignment,
+  Font,
 } from 'ckeditor5'
 import { Ckeditor } from '@ckeditor/ckeditor5-vue'
 import 'ckeditor5/ckeditor5.css';
@@ -26,17 +33,45 @@ import 'ckeditor5/ckeditor5.css'
 
 const data = defineModel({ required: true, default: "" })
 
+const editorInstance = ref(null);
+
 const config = computed(() => ({
-    licenseKey: 'GPL',
-    plugins: [Essentials, Paragraph, Bold, Italic, Heading, List, Alignment, Font],
-    toolbar: [
-        'undo', 'redo',
-        '|', 'bold', 'italic',
-        '|', 'fontSize', 'fontColor', 'fontBackgroundColor',
-        '|', 'bulletedList', 'numberedList',
-        '|', 'heading', '|', 'alignment:left', 'alignment:center', 'alignment:right', 'alignment:justify',
-    ]
+  licenseKey: 'GPL',
+  plugins: [Essentials, Paragraph, Bold, Italic, Heading, List, Alignment, Font],
+  toolbar: [
+    'undo', 'redo',
+    '|', 'bold', 'italic',
+    '|', 'fontSize', 'fontColor', 'fontBackgroundColor',
+    '|', 'bulletedList', 'numberedList',
+    '|', 'heading', '|', 'alignment:left', 'alignment:center', 'alignment:right', 'alignment:justify',
+  ],
 }))
+
+
+function onReady(editor) {
+  editorInstance.value = editor;
+  toggleReadOnly(prop.readOnly);
+}
+
+function toggleReadOnly(isReadOnly) {
+  if (!editorInstance.value) return;
+
+
+  if (isReadOnly) {
+    editorInstance.value.enableReadOnlyMode("view-mode-lock");
+  } else {
+    editorInstance.value.disableReadOnlyMode("view-mode-lock");
+  }
+}
+
+watch(
+  () => prop.readOnly,
+  (newVal) => {
+    toggleReadOnly(newVal);
+  }
+);
+
+
 </script>
 
 <style scoped>
@@ -58,4 +93,3 @@ const config = computed(() => ({
   box-sizing: border-box;
 }
 </style>
-

package/components/EntryPassMain.vue

@@ -0,0 +1,231 @@
+<template>
+  <v-row no-gutters class="">
+    <v-col cols="12" elevation="3" class="border">
+      <v-row no-gutters class="px-6 pt-4">
+        <div class="d-flex mt-7 pb-5">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Physical / Key Pass
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              A Physical Pass Card is a tangible identification or access card
+              used for entry and verification purposes at a specific site or
+              property. Its primary functions include granting authorized
+              access, enhancing security, and tracking attendance or movement.
+            </span>
+          </p>
+          <v-switch color="success" hide-details></v-switch>
+        </div>
+        <v-divider thickness="1"></v-divider>
+        <div class="d-flex mt-7 pb-5">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            NFC / QR Code Pass
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              NFC Card Pass is a type of access card that uses Near Field
+              Communication (NFC) technology to enable secure and convenient
+              entry to a site or property. This technology facilitates wireless
+              communication between the card and an NFC reader when they are
+              placed in close proximity (typically within 4 cm).
+            </span>
+          </p>
+          <v-switch color="success" hide-details></v-switch>
+        </div>
+        <v-divider thickness="1"></v-divider>
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Upload Access Cards Template
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              <a
+                target="_blank"
+                class="text-truncate d-flex items-center text-decoration-none"
+                href=""
+              >
+                <v-icon class="mr-2" size="24px"> mdi-paperclip </v-icon>
+                template
+              </a>
+            </span>
+          </p>
+          <v-btn
+            variant="flat"
+            color="error"
+            size="small"
+            style="height: 40px; margin-left: auto"
+            prepend-icon="mdi-file-document-remove-outline"
+          >
+            Remove
+          </v-btn>
+        </div>
+        <v-divider thickness="1"></v-divider>
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Printer Setup
+            <v-col cols="12">
+              <v-row>
+                <v-col cols="3">
+                  <v-text-field
+                    label="Vendor ID"
+                    hide-details
+                    clearable
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="3">
+                  <v-text-field
+                    label="Product ID"
+                    hide-details
+                    clearable
+                  ></v-text-field>
+                </v-col>
+                <v-col cols="3">
+                  <v-btn
+                    color="primary"
+                    variant="outlined"
+                    prepend-icon="mdi-magnify"
+                    block
+                  >
+                    Scan Printer
+                  </v-btn>
+                </v-col>
+                <v-col cols="3">
+                  <v-btn
+                    color="success"
+                    variant="outlined"
+                    prepend-icon="mdi-printer-check"
+                    block
+                  >
+                    Test & Print
+                  </v-btn>
+                </v-col>
+              </v-row>
+              <v-row class="mt-4">
+                <v-col cols="12" sm="6" md="4">
+                  <v-btn
+                    color="primary"
+                    variant="flat"
+                    prepend-icon="mdi-content-save"
+                    block
+                  >
+                    Save Printer Settings
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-col>
+          </p>
+        </div>
+
+        <v-divider thickness="1"></v-divider>
+
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            QR Code Template
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              <v-col cols="12">
+                <v-row>
+                  <v-col cols="12">
+                    <v-text-field
+                      label="Header"
+                      placeholder="Enter qr code header eg. Welcome to Company Name"
+                      hide-details
+                      density="comfortable"
+                      clearable
+                    ></v-text-field>
+                  </v-col>
+                  <v-col cols="12">
+                    <v-text-field
+                      label="Subtext"
+                      placeholder="Enter qr code sub header"
+                      hide-details
+                      density="comfortable"
+                      clearable
+                      class="mb-2"
+                    ></v-text-field>
+                  </v-col>
+                  <v-row class="mt-3">
+                    <v-col cols="12" md="2">
+                      <v-btn color="primary" variant="flat" block>
+                        Preview
+                      </v-btn>
+                    </v-col>
+                    <v-col cols="12" md="2">
+                      <v-btn color="primary" variant="flat" block> Save </v-btn>
+                    </v-col>
+                  </v-row>
+                </v-row>
+              </v-col>
+            </span>
+          </p>
+        </div>
+
+        <v-divider thickness="1"></v-divider>
+
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Resident-app Disclaimer Message
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              <v-col cols="12">
+                <v-row no-gutters>
+                  <v-col cols="12" class="mb-5">
+                    <v-textarea
+                      label="Disclaimer Message"
+                      placeholder="Enter disclaimer message for resident app"
+                      hide-details
+                      density="comfortable"
+                      clearable
+                      rows="5"
+                      auto-grow
+                    ></v-textarea>
+                  </v-col>
+                  <v-row class="mt-3">
+                    <v-col cols="12" md="2">
+                      <v-btn color="primary" variant="flat" block> Save </v-btn>
+                    </v-col>
+                  </v-row>
+                </v-row>
+              </v-col>
+            </span>
+          </p>
+        </div>
+
+        <v-divider thickness="1"></v-divider>
+
+        <div class="d-flex w-100 mt-7 pb-10">
+          <p class="mr-6 font-weight-medium flex-grow-1">
+            Entrypass URL
+            <span class="d-block text-caption text-grey-darken-1 mt-1">
+              <v-col>
+                <v-text-field
+                  label="Enter entrypass URL"
+                  placeholder="https://example.com"
+                  outlined
+                  clearable
+                  hide-details
+                />
+              </v-col>
+              <v-col>
+                <v-btn color="primary">Save</v-btn>
+              </v-col>
+            </span>
+          </p>
+        </div>
+      </v-row>
+    </v-col></v-row
+  >
+</template>
+<script lang="ts" setup>
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+const prop = defineProps({
+  site: {
+    type: String,
+    required: true,
+  },
+  siteName: {
+    type: String,
+    required: true,
+  },
+
+  orgId: {
+    type: String,
+    required: true,
+  },
+});
+</script>