Add a scrollbar to the duplicate import modal

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

ui/apos/components/AposDuplicateImportModal.vue

@@ -21,31 +21,33 @@
 
           <div class="apos-import-duplicate__section">
             <table class="apos-table">
+              <thead>
+                  <tr>
+                    <th class="apos-table__header">
+                      <AposButton
+                        class="apos-toggle"
+                        :class="{ 'apos-toggle--blank': !checked.length }"
+                        data-apos-test="contextMenuTrigger"
+                        type="quiet"
+                        :text-color="checkboxIconColor"
+                        :icon="checkboxIcon"
+                        :icon-only="true"
+                        :icon-size="10"
+                        @click.stop="toggle"
+                      />
+                    </th>
+                    <th class="apos-table__header">
+                      {{ $t('aposImportExport:title') }}
+                    </th>
+                    <th class="apos-table__header">
+                      {{ $t('aposImportExport:type') }}
+                    </th>
+                    <th class="apos-table__header">
+                      {{ $t('aposImportExport:lastEdited') }}
+                    </th>
+                  </tr>
+              </thead>
               <tbody>
-                <tr>
-                  <th class="apos-table__header">
-                    <AposButton
-                      class="apos-toggle"
-                      :class="{ 'apos-toggle--blank': !checked.length }"
-                      data-apos-test="contextMenuTrigger"
-                      type="quiet"
-                      :text-color="checkboxIconColor"
-                      :icon="checkboxIcon"
-                      :icon-only="true"
-                      :icon-size="10"
-                      @click.stop="toggle"
-                    />
-                  </th>
-                  <th class="apos-table__header">
-                    {{ $t('aposImportExport:title') }}
-                  </th>
-                  <th class="apos-table__header">
-                    {{ $t('aposImportExport:type') }}
-                  </th>
-                  <th class="apos-table__header">
-                    {{ $t('aposImportExport:lastEdited') }}
-                  </th>
-                </tr>
                 <tr
                   v-for="doc in duplicatedDocs"
                   :key="doc.aposDocId"
@@ -243,7 +245,7 @@
         : 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,15 @@
   display: flex;
   flex-direction: column;
   align-items: baseline;
+  max-height: 210px;
+  overflow-y: auto;
+}
+
+.apos-import-duplicate__section thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--a-background-primary);
 }
 
 .apos-import-duplicate__section .apos-table__header {