@7365admin1/layer-common 4.96.0 → 4.97.1-staging.500

package/components/DocumentForm.vue

@@ -1,45 +1,177 @@
 <template>
   <v-card width="100%" class="screen-modal">
-    <v-card-title class="text-capitalize">{{ prop.mode }} Document</v-card-title>
+    <v-card-title class="screen-modal__title">{{ heading }}</v-card-title>
 
     <v-card-text class="screen-modal__body pa-0">
-      <v-form v-model="validForm" :disabled="disable">
-        <v-col cols="12" class="px-6">
-          <InputLabel class="text-capitalize" title="Document Attachment" />
-          <InputFileV2
-            v-model="document.attachment"
-            :multiple="false"
-            :max-length="10"
-            title="Upload Files"
-            accept=".pdf,.csv,.doc,.docx"
-          />
+      <!--
+        EDIT: metadata only. The design deliberately shows the attachment as a
+        read-only chip here - swapping the file is what Update- Document is for,
+        and expiry is only set on upload or renewal, so neither control appears.
+      -->
+      <template v-if="isEdit">
+        <v-col cols="12" class="px-6 pt-4">
+          <InputLabel title="Document Attachment" />
+          <div class="doc-form__chip">
+            <v-icon size="20" class="mr-2">mdi-file-document-outline</v-icon>
+            <span class="text-body-2">{{ existingFileName || "—" }}</span>
+          </div>
         </v-col>
 
         <v-col cols="12" class="px-6">
-          <InputLabel class="text-capitalize" title="Document Name" />
+          <InputLabel title="Document Title" required />
           <v-text-field
-            v-model.trim="document.name"
+            v-model.trim="editTitle"
             class="filter-field"
             density="comfortable"
-          ></v-text-field>
+            placeholder="Company Policy"
+            hide-details="auto"
+          />
         </v-col>
 
-        <v-col cols="12">
-          <v-row no-gutters>
-            <v-col cols="12" class="text-center">
-              <span
-                class="text-none text-subtitle-2 font-weight-medium text-error"
-              >
-                {{ message }}
-              </span>
-            </v-col>
-          </v-row>
+        <v-col cols="12" class="px-6 pb-2">
+          <InputLabel title="Remarks (Optional)" />
+          <v-textarea
+            v-model.trim="editRemarks"
+            class="filter-field"
+            density="comfortable"
+            rows="3"
+            placeholder="Enter remarks"
+            hide-details="auto"
+          />
         </v-col>
-      </v-form>
+      </template>
+
+      <!-- ADD and UPDATE: a drop zone, then one configurable row per file. -->
+      <template v-else>
+        <v-col cols="12" class="px-6 pt-4">
+          <InputLabel title="Document Attachment" />
+
+          <!--
+            Hand-rolled rather than `InputFileV2`, which renders its own chip
+            list from internal state and only ever pushes ids outward. The
+            design puts that list in the table below with a per-row delete, and
+            a delete there could not reach back into the uploader to drop the
+            chip - the two lists would disagree on what is about to be saved.
+          -->
+          <div
+            class="doc-form__drop"
+            :class="{ 'doc-form__drop--over': dragging }"
+            role="button"
+            tabindex="0"
+            @click="pickFiles"
+            @keydown.enter.prevent="pickFiles"
+            @keydown.space.prevent="pickFiles"
+            @dragover.prevent="dragging = true"
+            @dragleave.prevent="dragging = false"
+            @drop.prevent="onDrop"
+          >
+            <v-progress-circular v-if="uploading" indeterminate size="24" />
+            <template v-else>
+              <v-icon size="24" class="mr-2">mdi-cloud-upload-outline</v-icon>
+              <span class="text-body-2">{{ dropLabel }}</span>
+            </template>
+          </div>
+
+          <input
+            ref="fileInput"
+            type="file"
+            class="d-none"
+            :accept="ACCEPT"
+            :multiple="isAdd"
+            @change="onPick"
+          />
+        </v-col>
+
+        <v-col v-if="rows.length" cols="12" class="px-6 pb-2">
+          <div class="d-flex align-center justify-space-between">
+            <span class="text-body-2">{{ selectionSummary }}</span>
+            <v-btn
+              v-if="isAdd"
+              variant="flat"
+              class="text-none screen-btn-primary"
+              prepend-icon="mdi-plus"
+              :disabled="uploading"
+              @click="pickFiles"
+            >
+              Add more files
+            </v-btn>
+          </div>
+        </v-col>
+
+        <v-col v-if="rows.length" cols="12" class="pa-0">
+          <v-table class="doc-form__table" density="comfortable">
+            <thead>
+              <tr>
+                <th>Original File Name</th>
+                <th>Custom Name</th>
+                <th>Remarks</th>
+                <th>{{ isAdd ? "Expiry Date (optional)" : "Expiry Date" }}</th>
+                <th class="text-center">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="row in rows" :key="row.id">
+                <td>
+                  <div class="d-flex align-center ga-2">
+                    <v-icon size="20">mdi-file-document-outline</v-icon>
+                    <span>{{ row.originalName }}</span>
+                  </div>
+                </td>
+                <td>
+                  <v-text-field
+                    v-model.trim="row.customName"
+                    class="filter-field"
+                    density="compact"
+                    placeholder="Company Policy"
+                    hide-details
+                  />
+                </td>
+                <td>
+                  <v-text-field
+                    v-model.trim="row.remarks"
+                    class="filter-field"
+                    density="compact"
+                    placeholder="Enter remarks"
+                    hide-details
+                  />
+                </td>
+                <td>
+                  <!--
+                    No `min`. A past date is legitimate on both paths: an estate
+                    may file a contract that already lapsed, and a renewal that
+                    does not move the date forward is defined to leave the
+                    document on the Expired tab rather than be rejected.
+                  -->
+                  <InputDatePicker
+                    v-model="row.expiryDate"
+                    density="compact"
+                    clearable
+                    hide-details
+                  />
+                </td>
+                <td class="text-center">
+                  <v-btn
+                    icon="mdi-trash-can-outline"
+                    variant="text"
+                    size="small"
+                    density="comfortable"
+                    aria-label="Remove file"
+                    @click="removeRow(row.id)"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-col>
+      </template>
+
+      <v-col cols="12" class="pt-0">
+        <p v-if="message" class="text-error text-center text-body-2 mb-0">
+          {{ message }}
+        </p>
+      </v-col>
     </v-card-text>
 
-    <!-- Was a `v-toolbar`: a grey slab with square (`tile`) buttons and a
-         hardcoded `color="black"` primary. The gate on Submit is unchanged. -->
     <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
         <v-col cols="6" class="pr-2">
@@ -47,8 +179,8 @@
             block
             variant="outlined"
             class="text-none screen-btn-ghost"
+            :disabled="saving"
             @click="cancel"
-            :disabled="disable"
           >
             Cancel
           </v-btn>
@@ -59,24 +191,38 @@
             block
             variant="flat"
             class="text-none screen-btn-primary"
-            :disabled="
-              !validForm ||
-              disable ||
-              document.attachment.length == 0 ||
-              document.name == ''
-            "
+            :disabled="!canSubmit || saving"
+            :loading="saving"
             @click="submit"
-            :loading="disable"
           >
-            Submit
+            {{ submitLabel }}
           </v-btn>
         </v-col>
       </v-row>
     </v-card-actions>
   </v-card>
 </template>
+
 <script setup lang="ts">
+/** The upload filter. Kept beside `deriveTypeFromFilename`, which must agree. */
+const ACCEPT = ".pdf,.csv,.doc,.docx";
+
+type DocumentRow = {
+  /** Stored file id, returned by `addFile`. Also the row key. */
+  id: string;
+  originalName: string;
+  customName: string;
+  remarks: string;
+  /** `YYYY-MM-DD` from `InputDatePicker`, or null for "never expires". */
+  expiryDate: string | null;
+};
+
 const prop = defineProps({
+  /**
+   * "add" uploads any number of new documents, "update" replaces the file on
+   * one existing document and re-dates it, "edit" changes title and remarks
+   * only. They are three dialogs in the design and three payloads here.
+   */
   mode: {
     type: String,
     default: "add",
@@ -98,26 +244,55 @@ const prop = defineProps({
 const emit = defineEmits(["cancel", "success"]);
 
 const { add, updateById } = useDocument();
-const { getFileById } = useFile();
+const { addFile, getFileById } = useFile();
 
-const validForm = ref(false);
-const disable = ref(false);
-const message = ref("");
+const isAdd = computed(() => prop.mode === "add");
+const isEdit = computed(() => prop.mode === "edit");
+const isUpdate = computed(() => prop.mode === "update");
 
-const document = ref<Record<string, any>>({
-  name: "",
-  attachment: [],
-  type: "",
+const heading = computed(() => {
+  if (isEdit.value) return "Edit Document";
+  if (isUpdate.value) return "Update- Document";
+  return "Add Document";
 });
 
+const submitLabel = computed(() => (isEdit.value ? "Apply" : "Submit"));
+const dropLabel = computed(() => (isAdd.value ? "Select Files" : "Select File"));
+
+const rows = ref<DocumentRow[]>([]);
+const fileInput = ref<HTMLInputElement | null>(null);
+const dragging = ref(false);
+const uploading = ref(false);
+const saving = ref(false);
+const message = ref("");
+
+const editTitle = ref("");
+const editRemarks = ref("");
+const existingFileName = ref("");
+
 const route = useRoute();
 const siteId = route.params.site as string;
 const orgId = route.params.org as string;
 const routeParentId = computed(() =>
-  typeof route.query.parentId === "string" ? route.query.parentId : ""
+  typeof route.query.parentId === "string" ? route.query.parentId : "",
 );
 const effectiveParentId = computed(() => prop.parentId || routeParentId.value);
 
+const selectionSummary = computed(() =>
+  rows.value.length === 1 ? "1 file selected" : `${rows.value.length} files selected`,
+);
+
+/**
+ * Every row needs a name, because `name` is what the list draws and what the
+ * server requires. Blank-but-present rows are the realistic mistake, so the
+ * gate is on trimmed emptiness rather than on the form's validity flag.
+ */
+const canSubmit = computed(() => {
+  if (uploading.value) return false;
+  if (isEdit.value) return editTitle.value.trim().length > 0;
+  return rows.value.length > 0 && rows.value.every((r) => r.customName.trim());
+});
+
 function getAttachmentId(attachment: any): string {
   if (!attachment) return "";
   if (Array.isArray(attachment)) {
@@ -130,102 +305,222 @@ function getAttachmentId(attachment: any): string {
   return String(attachment?._id || attachment?.id || "");
 }
 
-if (prop.mode === "edit") {
-  document.value.name = prop.document.name;
-  
-  const extractedId = getAttachmentId(prop.document.attachment);
-  document.value.attachment = extractedId ? [extractedId] : [];
-  
-  document.value.type = prop.document.type;
+function deriveTypeFromFilename(name = "") {
+  const n = String(name).toLowerCase();
+  if (n.endsWith(".pdf")) return "pdf";
+  if (n.endsWith(".csv")) return "csv";
+  if (n.endsWith(".doc") || n.endsWith(".docx")) return "doc";
+  return "";
+}
+
+/** `Contract.doc` -> `Contract`, so the name field starts somewhere sensible. */
+function stripExtension(name: string) {
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(0, dot) : name;
+}
+
+/** `2026-12-13` -> a date-only ISO instant the server's `Joi.date()` accepts. */
+function toIsoOrNull(value: string | null) {
+  return value ? new Date(`${value}T00:00:00.000Z`).toISOString() : null;
+}
+
+/** An ISO instant from the server -> the `YYYY-MM-DD` the picker binds to. */
+function toPickerDate(value: unknown) {
+  if (!value) return null;
+  const d = new Date(value as string);
+  return Number.isNaN(d.getTime()) ? null : d.toISOString().slice(0, 10);
+}
+
+const existingAttachmentId = computed(() =>
+  getAttachmentId(prop.document?.attachment),
+);
+
+onMounted(async () => {
+  if (!isEdit.value && !isUpdate.value) return;
+
+  editTitle.value = prop.document?.name ?? "";
+  editRemarks.value = String((prop.document as any)?.remarks ?? "");
+
+  const id = existingAttachmentId.value;
+  if (!id) return;
+
+  try {
+    const file = await getFileById(id);
+    existingFileName.value = file?.data?.name ?? id;
+  } catch {
+    // The name is decoration on a read-only chip; the id still saves.
+    existingFileName.value = id;
+  }
+});
+
+function pickFiles() {
+  if (uploading.value) return;
+  fileInput.value?.click();
+}
+
+function onDrop(event: DragEvent) {
+  dragging.value = false;
+  const files = Array.from(event.dataTransfer?.files ?? []);
+  if (files.length) void uploadFiles(files);
 }
 
-watch(
-  () => document.value.attachment,
-  async (newVal, oldVal) => {
-    const newId = Array.isArray(newVal) ? newVal[0] : newVal;
-    const oldId = Array.isArray(oldVal) ? oldVal[0] : oldVal;
+function onPick(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const files = Array.from(input.files ?? []);
+  // Cleared so re-picking the same file fires `change` again.
+  input.value = "";
+  if (files.length) void uploadFiles(files);
+}
 
-    if (newId && newId !== oldId) {
-      const fileId = newId;
-      const fileData = await getFileById(fileId);
-      if (fileData) {
-        document.value.name = fileData.data.name;
+async function uploadFiles(files: File[]) {
+  message.value = "";
+  uploading.value = true;
+
+  try {
+    // Update replaces one file, so a second pick supersedes the first rather
+    // than queueing behind it.
+    const queue = isAdd.value ? files : files.slice(0, 1);
+
+    for (const file of queue) {
+      if (!deriveTypeFromFilename(file.name)) {
+        message.value = "Unsupported file type. Allowed: pdf, csv, doc, docx.";
+        continue;
+      }
+
+      const stored = await addFile(file);
+      if (!stored?.id) {
+        message.value = "Upload failed. Please try again.";
+        continue;
+      }
+
+      const row: DocumentRow = {
+        id: stored.id,
+        originalName: file.name,
+        customName: stripExtension(file.name),
+        remarks: "",
+        expiryDate: null,
+      };
+
+      if (isAdd.value) {
+        rows.value = [...rows.value, row];
+      } else {
+        // Carry the existing document's title and expiry onto the replacement,
+        // so a renewal that only swaps the file keeps its identity.
+        row.customName = editTitle.value || row.customName;
+        row.remarks = editRemarks.value;
+        row.expiryDate = toPickerDate((prop.document as any)?.expiryDate);
+        rows.value = [row];
       }
     }
+  } catch (error: any) {
+    message.value = error?.response?._data?.message || "Upload failed.";
+  } finally {
+    uploading.value = false;
   }
-);
+}
 
-function deriveTypeFromFilename(name = "") {
-  const n = String(name).toLowerCase();
-  if (n.endsWith(".pdf")) return "pdf";
-  if (n.endsWith(".csv")) return "csv";
-  if (n.endsWith(".doc") || n.endsWith(".docx")) return "doc";
-  return "";
+function removeRow(id: string) {
+  rows.value = rows.value.filter((row) => row.id !== id);
 }
 
 function cancel() {
-  //   createMore.value = false;
   message.value = "";
   emit("cancel");
 }
 
 async function submit() {
-  disable.value = true;
-  try {
-    if (prop.mode === "add") {
-      const fileId = Array.isArray(document.value.attachment)
-        ? document.value.attachment[0]
-        : document.value.attachment;
-
-      const fileData = await getFileById(fileId);
-      const fileName = fileData?.data?.name || String(fileId || "");
-      const derivedType = deriveTypeFromFilename(fileName);
-
-      if (!derivedType) {
-        throw new Error("Unsupported file type. Allowed: pdf, csv, doc.");
-      }
+  saving.value = true;
+  message.value = "";
 
-      const payload = {
-        name: document.value.name,
-        attachment: document.value.attachment,
-        type: derivedType,
-        size: fileData?.data?.size ?? fileData?.data?.file_size ?? 0,
+  try {
+    if (isAdd.value) {
+      await add({
+        // `name` is required on the envelope even when every item names
+        // itself; the first row stands in for it.
+        name: rows.value[0].customName,
         status: "active",
         org: orgId,
         site: siteId,
         parentId: effectiveParentId.value,
-      };
-
-      await add(payload);
+        items: rows.value.map((row) => ({
+          name: row.customName,
+          attachment: [row.id],
+          type: deriveTypeFromFilename(row.originalName),
+          remarks: row.remarks,
+          expiryDate: toIsoOrNull(row.expiryDate),
+        })),
+      });
     }
 
-    if (prop.mode === "edit") {
-      const fileId = Array.isArray(document.value.attachment)
-        ? document.value.attachment[0]
-        : document.value.attachment;
-
-      let payload: Record<string, any> = {
-        name: document.value.name,
-        attachment: document.value.attachment,
-      };
-
-      if (fileId) {
-        const fileData = await getFileById(fileId);
-        const fileName = fileData?.data?.name || String(fileId || "");
-        const derivedType = deriveTypeFromFilename(fileName);
-        if (derivedType) payload.type = derivedType;
-        payload.size = fileData?.data?.size ?? fileData?.data?.file_size ?? 0;
-      }
+    if (isUpdate.value) {
+      const row = rows.value[0];
+      await updateById(prop.document._id ?? "", {
+        name: row.customName,
+        attachment: [row.id],
+        type: deriveTypeFromFilename(row.originalName),
+        remarks: row.remarks,
+        expiryDate: toIsoOrNull(row.expiryDate),
+      });
+    }
 
-      await updateById(prop.document._id ?? "", payload);
+    if (isEdit.value) {
+      // The attachment is resent unchanged on purpose. The update service
+      // treats a missing `attachment` as "no files", blanking the document's
+      // file and zeroing its size - so a title-only edit would destroy the
+      // document it was meant to rename.
+      await updateById(prop.document._id ?? "", {
+        name: editTitle.value,
+        remarks: editRemarks.value,
+        attachment: existingAttachmentId.value
+          ? [existingAttachmentId.value]
+          : [],
+      });
     }
 
     emit("success");
   } catch (error: any) {
     message.value =
-      error.response?._data?.message || "Failed to create document";
+      error?.response?._data?.message || "Failed to save document.";
   } finally {
-    disable.value = false;
+    saving.value = false;
   }
 }
 </script>
+
+<style scoped>
+.doc-form__drop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  border: 1px dashed var(--border);
+  border-radius: var(--r-inner);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.doc-form__drop:hover,
+.doc-form__drop--over {
+  border-color: var(--text);
+  background-color: var(--hover);
+}
+
+.doc-form__chip {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border: 1px dashed var(--border);
+  border-radius: var(--r-inner);
+}
+
+.doc-form__table :deep(th) {
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.doc-form__table :deep(td) {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+</style>