[Feature] Add editable table with PDF file matching for PDF-only uploads

extralit-frontend/components/base/base-render-table/RenderTable.vue

@@ -150,6 +150,7 @@ export default {
     //     }
     //   },
     // },
+
     validation: {
       handler(newValidation, oldValidation) {
         if (this.isLoaded) {
@@ -196,7 +197,7 @@ export default {
       var configs = this.tableJSON.schema.fields.map((column: DataFrameField) => {
         const commonConfig = this.generateColumnConfig(column.name);
         const editableConfig = this.generateColumnEditableConfig(column.name);
-        return { ...commonConfig, ...editableConfig };
+        return { ...commonConfig, ...editableConfig, ...column };
       });
 
       if (!this.editable) {
@@ -913,6 +914,7 @@ export default {
 
         this.tabulator.on("cellEdited", (cell: CellComponent) => {
           this.updateTableJsonData();
+          this.$emit("cell-edited", cell);
           // const rowPos: number | boolean = cell.getRow().getPosition();
           // if (typeof rowPos != 'number' || rowPos < 0 || rowPos > this.tableJSON.data.length) return;
           // this.$set(this.tableJSON.data[rowPos-1], cell.getColumn().getField(), cell.getValue());

extralit-frontend/components/base/base-simple-table/BaseSimpleTable.vue

@@ -6,6 +6,7 @@
       :editable="editable"
       :hasValidValues="hasValidValues"
       :questions="questions"
+      :validation="validation || validators"
       @table-built="$emit('table-built')"
       @row-click="(e, row) => $emit('row-click', e, row)"
       @cell-edited="(cell) => $emit('cell-edited', cell)"
@@ -71,9 +72,11 @@ export default {
   computed: {
     // Convert simple data/columns to TableData format for RenderTable
     computedTableJSON(): TableData {
+      // FIX 1: Use "...col" to preserve editor config (dropdowns), validators, and freezing
       const fields = this.columns.map((col: any) => ({
         name: col.field,
         type: col.type || "string",
+        ...col // <--- THIS IS THE MAGIC FIX
       }));
 
       const schema = new DataFrameSchema(
@@ -89,7 +92,14 @@ export default {
         null
       );
 
-      if (this.validation) {
+      // FIX 2: Handle both 'validation' and 'validators' props
+      // ImportFileUpload passes :validators, so we must prioritize that.
+      if (this.validators) {
+        // We wrap it in a structure RenderTable understands
+        tableData.validation = { columns: {}, ...this.validation };
+        // We might need to pass this directly to the RenderTable prop instead,
+        // but attaching it to tableData is the safest way for the Schema to know about it.
+      } else if (this.validation) {
         tableData.validation = this.validation;
       }
 

extralit-frontend/components/features/import/analysis/useImportAnalysisTableViewModel.ts

@@ -98,6 +98,8 @@ export const useImportAnalysisTableViewModel = (props: {
       workspaceId: props.workspace?.id,
       dataframeLength: props.dataframeData?.data?.length,
       matchedFilesLength: props.pdfData?.matchedFiles?.length,
+      // Add deep watch on dataframe data to catch cell edits
+      dataframeDataHash: props.dataframeData ? JSON.stringify(props.dataframeData.data) : null,
     }),
     (newVal, oldVal) => {
       // Only trigger if we have all required data and something actually changed
@@ -107,7 +109,8 @@ export const useImportAnalysisTableViewModel = (props: {
           !oldVal ||
           newVal.workspaceId !== oldVal.workspaceId ||
           newVal.dataframeLength !== oldVal.dataframeLength ||
-          newVal.matchedFilesLength !== oldVal.matchedFilesLength
+          newVal.matchedFilesLength !== oldVal.matchedFilesLength ||
+          newVal.dataframeDataHash !== oldVal.dataframeDataHash
         ) {
           analyzeImport(props.workspace!, props.dataframeData!, props.pdfData!.matchedFiles);
         }

extralit-frontend/components/features/import/file-upload/ImportFileUpload.vue

@@ -12,6 +12,34 @@
 
           <!-- Table Upload Section -->
           <TableUpload :initial-data="bibData" @update="handleBibUpdate"  />
+
+          <!-- Editable Table for PDF-Only Upload -->
+          <div v-if="shouldShowEditableTable" class="import-file-upload__editable-table">
+            <div class="import-file-upload__editable-table-header">
+              <h3 class="import-file-upload__section-title">Reference Metadata</h3>
+              <p class="import-file-upload__section-description">
+                Create reference entries for your PDFs. The <strong>reference</strong> column must be unique, and you can select which PDFs to associate with each entry in the <strong>files</strong> column.
+              </p>
+            </div>
+
+            <BaseSimpleTable
+              ref="editableTable"
+              :data="editableTableData"
+              :columns="editableTableColumns"
+              :editable="true"
+              :validators="editableTableValidators"
+              @cell-edited="handleTableCellEdit"
+              @table-built="handleTableBuilt"
+            />
+
+            <!-- Unmapped PDFs Section -->
+            <div v-if="unmappedPdfFiles.length > 0" class="import-file-upload__unmapped-pdfs">
+              <h4>Unmapped PDF Files ({{ unmappedPdfFiles.length }})</h4>
+              <ul class="unmapped-files-list">
+                <li v-for="file in unmappedPdfFiles" :key="file">{{ file }}</li>
+              </ul>
+            </div>
+          </div>
         </div>
 
         <!-- Summary Sidebar -->
@@ -24,6 +52,7 @@
   import TableUpload from "./TableUpload.vue";
   import PdfUpload from "./PdfUpload.vue";
   import ImportSummarySidebar from "./ImportSummarySidebar.vue";
+  import BaseSimpleTable from "~/components/base/base-simple-table/BaseSimpleTable.vue";
   import { useImportFileUploadViewModel } from "./useImportFileUploadViewModel";
 
   export default {
@@ -33,6 +62,7 @@
       TableUpload,
       PdfUpload,
       ImportSummarySidebar,
+      BaseSimpleTable,
     } as any,
 
     props: {
@@ -686,5 +716,68 @@
         flex-direction: column;
       }
     }
+
+    // Editable Table Styles
+    &__editable-table {
+      display: flex;
+      flex-direction: column;
+      gap: $base-space * 2;
+      padding: $base-space * 3;
+      background: var(--bg-accent-grey-1);
+      border: 1px solid var(--border-field);
+      border-radius: $border-radius-m;
+    }
+
+    &__editable-table-header {
+      margin-bottom: $base-space;
+
+      .import-file-upload__section-title {
+        font-size: 1.2rem;
+        font-weight: 600;
+        margin-bottom: $base-space;
+        color: var(--fg-primary);
+      }
+
+      .import-file-upload__section-description {
+        color: var(--fg-secondary);
+        font-size: 0.9rem;
+        margin-bottom: 0;
+        line-height: 1.4;
+
+        strong {
+          color: var(--fg-primary);
+          font-weight: 600;
+        }
+      }
+    }
+
+    &__unmapped-pdfs {
+      margin-top: $base-space * 2;
+      padding: $base-space * 2;
+      background: var(--bg-banner-warning);
+      border: 1px solid var(--color-warning);
+      border-radius: $border-radius;
+
+      h4 {
+        margin: 0 0 $base-space 0;
+        color: var(--fg-primary);
+        font-size: 1rem;
+        font-weight: 600;
+      }
+
+      .unmapped-files-list {
+        margin: 0;
+        padding-left: $base-space * 3;
+        max-height: 200px;
+        overflow-y: auto;
+
+        li {
+          color: var(--fg-primary);
+          font-size: 0.9rem;
+          margin-bottom: calc($base-space / 2);
+          font-family: $quaternary-font-family;
+        }
+      }
+    }
   }
   </style>