@7365admin1/layer-common 1.8.0

package/components/DocumentManagement.vue

@@ -0,0 +1,376 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters>
+        <v-btn
+          class="text-none"
+          rounded="pill"
+          variant="tonal"
+          size="large"
+          @click="setDocument()"
+          v-if="canCreate && canCreateDocument"
+        >
+          Add Document
+        </v-btn>
+      </v-row>
+    </v-col>
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="getDocuments">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value="getDocuments"
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="10"
+          fixed-header
+          hide-default-footer
+          @click:row="tableRowClickHandler"
+          style="max-height: calc(100vh - (200px))"
+        ></v-data-table>
+      </v-card>
+    </v-col>
+
+    <!-- Create Dialog -->
+    <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>Type:</strong> {{ selectedDocument?.type ?? "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-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
+                    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">
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [
+      {
+        title: "Name",
+        value: "name",
+      },
+      {
+        title: "Type",
+        value: "type",
+      },
+      // { title: "Action", value: "action-table" },
+    ],
+  },
+  canCreate: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  canCreateDocument: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdateDocument: {
+    type: Boolean,
+    default: true,
+  },
+  canDeleteDocument: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { headerSearch } = useLocal();
+const { getAll: _getAllDocuments, deleteById } = useDocument();
+const { getFileUrl } = useFile();
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const items = ref<Array<Record<string, any>>>([]);
+
+const {
+  data: getDocumentReq,
+  refresh: getDocuments,
+  status: getAllReqStatus,
+} = useLazyAsyncData(
+  "get-all-documents",
+  () =>
+    _getAllDocuments({
+      page: page.value,
+      search: headerSearch.value,
+    }),
+  {
+    watch: [page, headerSearch],
+  }
+);
+
+const loading = computed(() => getAllReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getDocumentReq.value) {
+    items.value = getDocumentReq.value.items;
+    pages.value = getDocumentReq.value.pages;
+    pageRange.value = getDocumentReq.value.pageRange;
+  }
+});
+
+const createDialog = ref(false);
+const editDialog = ref(false);
+const previewDialog = ref(false);
+const selectedDocument = ref<TDocument>({
+  _id: "",
+  name: "",
+  attachment: "",
+  type: ""
+});
+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;
+  previewDialog.value = true;
+}
+
+function setDocument({
+  mode = "create",
+  dialog = true,
+  data = {} as TDocument,
+} = {}) {
+  if (mode === "create") {
+    createDialog.value = dialog;
+  } else if (mode === "edit") {
+    editDialog.value = dialog;
+    selectedDocument.value = data;
+  } else if (mode === "preview") {
+    previewDialog.value = dialog;
+    selectedDocument.value = data;
+  }
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function successCreate() {
+  createDialog.value = false;
+  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

@@ -0,0 +1,95 @@
+<template>
+  <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,
+} from 'ckeditor5'
+import { Ckeditor } from '@ckeditor/ckeditor5-vue'
+import 'ckeditor5/ckeditor5.css';
+
+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',
+  ],
+}))
+
+
+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>
+.ckeditor-container {
+  width: 100%;
+  max-width: 100% !important;
+  overflow: hidden;
+}
+
+:deep(.ck.ck-editor) {
+  width: 100% !important;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+:deep(.ck-editor__editable_inline) {
+  min-height: 200px;
+  width: 100% !important;
+  box-sizing: border-box;
+}
+</style>