@iservice365/layer-common 1.5.6 → 1.6.0

package/components/DocumentForm.vue

@@ -15,10 +15,19 @@
             v-model="document.attachment"
             :multiple="false"
             :max-length="10"
-            title="Upload Images"
+            title="Upload PDF Files"
+            accept=".pdf, .doc, .docx, .xls, .xlsx, .txt"
           />
         </v-col>
 
+        <v-col cols="12" class="px-6">
+          <InputLabel class="text-capitalize" title="Document Name" />
+          <v-text-field
+            v-model.trim="document.name"
+            density="comfortable"
+          ></v-text-field>
+        </v-col>
+
         <v-col cols="12">
           <v-row no-gutters>
             <v-col cols="12" class="text-center">
@@ -57,7 +66,12 @@
             color="black"
             class="text-none"
             size="48"
-            :disabled="!validForm || disable"
+            :disabled="
+              !validForm ||
+              disable ||
+              document.attachment.length == 0 ||
+              document.name == ''
+            "
             @click="submit"
             :loading="disable"
           >
@@ -78,17 +92,42 @@ const prop = defineProps({
     type: Object as PropType<TDocument>,
     default: () => ({
       name: "",
-      attachment: "",
+      attachment: [],
     }),
   },
 });
 
 const emit = defineEmits(["cancel", "success"]);
 
+const { add, updateById } = useDocument();
+const { getFileById } = useFile();
+
 const validForm = ref(false);
 const disable = ref(false);
 const message = ref("");
 
+const document = ref<Record<string, any>>({
+  name: "",
+  attachment: [],
+});
+
+if (prop.mode === "edit") {
+  document.value.name = prop.document.name;
+  document.value.attachment = [prop.document.attachment];
+}
+
+watch(
+  () => document.value.attachment,
+  async (newVal) => {
+    if (newVal) {
+      const fileData = await getFileById(newVal);
+      if (fileData) {
+        document.value.name = fileData.data.name;
+      }
+    }
+  }
+);
+
 function cancel() {
   //   createMore.value = false;
   message.value = "";
@@ -97,5 +136,30 @@ function cancel() {
 
 async function submit() {
   disable.value = true;
+  try {
+    if (prop.mode === "add") {
+      const payload = {
+        name: document.value.name,
+        attachment: document.value.attachment,
+        status: "active",
+      };
+      await add(payload);
+    }
+
+    if (prop.mode === "edit") {
+      const payload = {
+        name: document.value.name,
+        attachment: document.value.attachment,
+      }
+      await updateById(prop.document._id ?? "", payload);
+    }
+
+    emit("success");
+  } catch (error: any) {
+    message.value =
+      error.response?._data?.message || "Failed to create document";
+  } finally {
+    disable.value = false;
+  }
 }
 </script>

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/Input/InputPhoneNumberV2.vue

@@ -21,6 +21,7 @@
 <script setup lang="ts">
 import { ref, computed, type PropType } from 'vue'
 import type { ValidationRule } from 'vuetify/lib/types.mjs'
+//@ts-ignore
 import phoneMasks from '~/utils/phoneMasks'
 
 const props = defineProps({

package/components/SupplyManagement.vue

@@ -58,7 +58,7 @@ const loading = ref(false);
 
 const page = ref(1);
 const pages = ref(0);
-const pageRange = ref("-- - -- of --");
+const pageRange = ref("1-10 of 10");
 const items = ref<Array<Record<string, any>>>([]);
 
 const headers: Array<Record<string, any>> = [