Add a scrollbar to the duplicate import modal (#71)

* Add a scrollbar to the duplicate import modal * Fixed issue with the type column values * fix on overflow-y * updated PR changelog entry * fix: applied review changes * fix linter * remove z-index --------- Co-authored-by: Etienne Laurent <[email protected]>
apostrophecms · Jul 27, 2024 · 19adf1b · 19adf1b
1 parent ad53c53
commit 19adf1b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## UNRELEASED
+
+### Adds
+
+* Add a scrollbar to the duplicate import modal to handle too many duplicates, and fixed the "Type" column to display the correct document type.
+
 ## 2.2.0 (2024-07-12)
 
 ### Adds

diff --git a/ui/apos/components/AposDuplicateImportModal.vue b/ui/apos/components/AposDuplicateImportModal.vue
@@ -21,7 +21,7 @@
 
           <div class="apos-import-duplicate__section">
             <table class="apos-table">
-              <tbody>
+              <thead>
                 <tr>
                   <th class="apos-table__header">
                     <AposButton
@@ -46,6 +46,8 @@
                     {{ $t('aposImportExport:lastEdited') }}
                   </th>
                 </tr>
+              </thead>
+              <tbody>
                 <tr
                   v-for="doc in duplicatedDocs"
                   :key="doc.aposDocId"
@@ -243,7 +245,7 @@ export default {
         : this.duplicatedDocs.map(({ aposDocId }) => aposDocId);
     },
     docLabel(doc) {
-      const moduleOptions = apos.modules[this.type];
+      const moduleOptions = apos.modules[doc.type];
 
       return moduleOptions?.label
         ? this.$t(moduleOptions?.label)
@@ -323,6 +325,14 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: baseline;
+  max-height: 210px;
+  overflow-y: auto;
+}
+
+.apos-import-duplicate__section thead {
+  position: sticky;
+  top: 0;
+  background-color: var(--a-background-primary);
 }
 
 .apos-import-duplicate__section .apos-table__header {