@7365admin1/layer-common 4.90.2-staging.491 → 4.90.2

package/components/DocumentForm.vue

@@ -1,177 +1,45 @@
 <template>
   <v-card width="100%" class="screen-modal">
-    <v-card-title class="screen-modal__title">{{ heading }}</v-card-title>
+    <v-card-title class="text-capitalize">{{ prop.mode }} Document</v-card-title>
 
     <v-card-text class="screen-modal__body pa-0">
-      <!--
-        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-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"
+          />
         </v-col>
 
         <v-col cols="12" class="px-6">
-          <InputLabel title="Document Title" required />
+          <InputLabel class="text-capitalize" title="Document Name" />
           <v-text-field
-            v-model.trim="editTitle"
+            v-model.trim="document.name"
             class="filter-field"
             density="comfortable"
-            placeholder="Company Policy"
-            hide-details="auto"
-          />
+          ></v-text-field>
         </v-col>
 
-        <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 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>
-      </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-form>
     </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">
@@ -179,8 +47,8 @@
             block
             variant="outlined"
             class="text-none screen-btn-ghost"
-            :disabled="saving"
             @click="cancel"
+            :disabled="disable"
           >
             Cancel
           </v-btn>
@@ -191,38 +59,24 @@
             block
             variant="flat"
             class="text-none screen-btn-primary"
-            :disabled="!canSubmit || saving"
-            :loading="saving"
+            :disabled="
+              !validForm ||
+              disable ||
+              document.attachment.length == 0 ||
+              document.name == ''
+            "
             @click="submit"
+            :loading="disable"
           >
-            {{ submitLabel }}
+            Submit
           </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",
@@ -244,55 +98,26 @@ const prop = defineProps({
 const emit = defineEmits(["cancel", "success"]);
 
 const { add, updateById } = useDocument();
-const { addFile, getFileById } = useFile();
-
-const isAdd = computed(() => prop.mode === "add");
-const isEdit = computed(() => prop.mode === "edit");
-const isUpdate = computed(() => prop.mode === "update");
-
-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 { getFileById } = useFile();
 
-const rows = ref<DocumentRow[]>([]);
-const fileInput = ref<HTMLInputElement | null>(null);
-const dragging = ref(false);
-const uploading = ref(false);
-const saving = ref(false);
+const validForm = ref(false);
+const disable = ref(false);
 const message = ref("");
 
-const editTitle = ref("");
-const editRemarks = ref("");
-const existingFileName = ref("");
+const document = ref<Record<string, any>>({
+  name: "",
+  attachment: [],
+  type: "",
+});
 
 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)) {
@@ -305,222 +130,102 @@ function getAttachmentId(attachment: any): string {
   return String(attachment?._id || attachment?.id || "");
 }
 
-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);
+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 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);
-}
+watch(
+  () => document.value.attachment,
+  async (newVal, oldVal) => {
+    const newId = Array.isArray(newVal) ? newVal[0] : newVal;
+    const oldId = Array.isArray(oldVal) ? oldVal[0] : oldVal;
 
-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];
+    if (newId && newId !== oldId) {
+      const fileId = newId;
+      const fileData = await getFileById(fileId);
+      if (fileData) {
+        document.value.name = fileData.data.name;
       }
     }
-  } catch (error: any) {
-    message.value = error?.response?._data?.message || "Upload failed.";
-  } finally {
-    uploading.value = false;
   }
-}
+);
 
-function removeRow(id: string) {
-  rows.value = rows.value.filter((row) => row.id !== id);
+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 cancel() {
+  //   createMore.value = false;
   message.value = "";
   emit("cancel");
 }
 
 async function submit() {
-  saving.value = true;
-  message.value = "";
-
+  disable.value = true;
   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,
+    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.");
+      }
+
+      const payload = {
+        name: document.value.name,
+        attachment: document.value.attachment,
+        type: derivedType,
+        size: fileData?.data?.size ?? fileData?.data?.file_size ?? 0,
         status: "active",
         org: orgId,
         site: siteId,
         parentId: effectiveParentId.value,
-        items: rows.value.map((row) => ({
-          name: row.customName,
-          attachment: [row.id],
-          type: deriveTypeFromFilename(row.originalName),
-          remarks: row.remarks,
-          expiryDate: toIsoOrNull(row.expiryDate),
-        })),
-      });
-    }
+      };
 
-    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 add(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]
-          : [],
-      });
+    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;
+      }
+
+      await updateById(prop.document._id ?? "", payload);
     }
 
     emit("success");
   } catch (error: any) {
     message.value =
-      error?.response?._data?.message || "Failed to save document.";
+      error.response?._data?.message || "Failed to create document";
   } finally {
-    saving.value = false;
+    disable.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>