From 74001bd0da663b0dec7b151447607d8eb46af572 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 1 Oct 2024 16:13:45 -0700
Subject: [PATCH] Fix: wrap table header columns in row (#7832)

---
 src-ui/messages.xlf                           |  58 ++---
 .../document-list.component.html              | 202 +++++++++---------
 .../document-list.component.spec.ts           |   2 +-
 3 files changed, 132 insertions(+), 130 deletions(-)

diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index f5d270376..9b588ac6b 100644
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -1042,7 +1042,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">211</context>
+          <context context-type="linenumber">212</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/data/document.ts</context>
@@ -1950,7 +1950,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">238</context>
+          <context context-type="linenumber">239</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/data/document.ts</context>
@@ -2752,7 +2752,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">193</context>
+          <context context-type="linenumber">194</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.html</context>
@@ -3341,7 +3341,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">247</context>
+          <context context-type="linenumber">248</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/data/document.ts</context>
@@ -5510,7 +5510,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">286</context>
+          <context context-type="linenumber">288</context>
         </context-group>
       </trans-unit>
       <trans-unit id="78870852467682010" datatype="html">
@@ -5525,7 +5525,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">321</context>
+          <context context-type="linenumber">323</context>
         </context-group>
       </trans-unit>
       <trans-unit id="157572966557284263" datatype="html">
@@ -5540,7 +5540,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">328</context>
+          <context context-type="linenumber">330</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8911158217491828773" datatype="html">
@@ -5830,7 +5830,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">190</context>
+          <context context-type="linenumber">191</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
@@ -5871,7 +5871,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">180</context>
+          <context context-type="linenumber">181</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.html</context>
@@ -5898,7 +5898,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">220</context>
+          <context context-type="linenumber">221</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.html</context>
@@ -5925,7 +5925,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">229</context>
+          <context context-type="linenumber">230</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.html</context>
@@ -6726,7 +6726,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">297</context>
+          <context context-type="linenumber">299</context>
         </context-group>
       </trans-unit>
       <trans-unit id="106713086593101376" datatype="html">
@@ -6939,14 +6939,14 @@
         <source>Sort by ASN</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">167</context>
+          <context context-type="linenumber">168</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7517688192215738656" datatype="html">
         <source>ASN</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">171</context>
+          <context context-type="linenumber">172</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
@@ -6965,28 +6965,28 @@
         <source>Sort by correspondent</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">176</context>
+          <context context-type="linenumber">177</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2066713941761361709" datatype="html">
         <source>Sort by title</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">185</context>
+          <context context-type="linenumber">186</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6232673011753681091" datatype="html">
         <source>Sort by owner</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">198</context>
+          <context context-type="linenumber">199</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3715596725146409911" datatype="html">
         <source>Owner</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">202</context>
+          <context context-type="linenumber">203</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/data/document.ts</context>
@@ -7001,49 +7001,49 @@
         <source>Sort by notes</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">207</context>
+          <context context-type="linenumber">208</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5499001829734502606" datatype="html">
         <source>Sort by document type</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">216</context>
+          <context context-type="linenumber">217</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6213829731736042759" datatype="html">
         <source>Sort by storage path</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">225</context>
+          <context context-type="linenumber">226</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3406167410329973166" datatype="html">
         <source>Sort by created date</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">234</context>
+          <context context-type="linenumber">235</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3769035778779263084" datatype="html">
         <source>Sort by added date</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">243</context>
+          <context context-type="linenumber">244</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4874754501044009042" datatype="html">
         <source>Sort by number of pages</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">252</context>
+          <context context-type="linenumber">253</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3817498941817715969" datatype="html">
         <source>Pages</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">256</context>
+          <context context-type="linenumber">257</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/data/document.ts</context>
@@ -7062,21 +7062,21 @@
         <source> Shared </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">259,261</context>
+          <context context-type="linenumber">260,262</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2179847500064178686" datatype="html">
         <source>Edit document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">293</context>
+          <context context-type="linenumber">295</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2807800733729323332" datatype="html">
         <source>Yes</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">349</context>
+          <context context-type="linenumber">351</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/pipes/yes-no.pipe.ts</context>
@@ -7087,7 +7087,7 @@
         <source>No</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
-          <context context-type="linenumber">349</context>
+          <context context-type="linenumber">351</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/pipes/yes-no.pipe.ts</context>
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 8ca8e111d..e70f4c710 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -160,111 +160,113 @@
       <div class="table-responsive">
         <table class="table table-sm align-middle border shadow-sm">
           <thead>
-            <th></th>
-            @if (activeDisplayFields.includes(DisplayField.ASN)) {
-              <th class="cursor-pointer"
-                pngxSortable="archive_serial_number"
-                title="Sort by ASN" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>ASN</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.CORRESPONDENT) && permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) {
-              <th class="cursor-pointer"
-                pngxSortable="correspondent__name"
-                title="Sort by correspondent" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Correspondent</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.TITLE)) {
-              <th class="cursor-pointer"
-                pngxSortable="title"
-                title="Sort by title" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                style="min-width: 150px;"
-                i18n>Title</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.TAGS) && !activeDisplayFields.includes(DisplayField.TITLE)) {
-              <th i18n>Tags</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.OWNER) && permissionService.currentUserCan(PermissionAction.View, PermissionType.User)) {
-              <th class="cursor-pointer"
-                pngxSortable="owner"
-                title="Sort by owner" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Owner</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.NOTES) && notesEnabled) {
-              <th class="cursor-pointer"
-                pngxSortable="num_notes"
-                title="Sort by notes" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Notes</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.DOCUMENT_TYPE) && permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) {
-              <th class="cursor-pointer"
-                pngxSortable="document_type__name"
-                title="Sort by document type" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Document type</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.STORAGE_PATH) && permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) {
-              <th class="cursor-pointer"
-                pngxSortable="storage_path__name"
-                title="Sort by storage path" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Storage path</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.CREATED)) {
-              <th class="cursor-pointer"
-                pngxSortable="created"
-                title="Sort by created date" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Created</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.ADDED)) {
-              <th class="cursor-pointer"
-                pngxSortable="added"
-                title="Sort by added date" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Added</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.PAGE_COUNT)) {
+            <tr>
+              <th></th>
+              @if (activeDisplayFields.includes(DisplayField.ASN)) {
                 <th class="cursor-pointer"
-                  pngxSortable="page_count"
-                  title="Sort by number of pages" i18n-title
+                  pngxSortable="archive_serial_number"
+                  title="Sort by ASN" i18n-title
                   [currentSortField]="list.sortField"
                   [currentSortReverse]="list.sortReverse"
                   (sort)="onSort($event)"
-                  i18n>Pages</th>
+                  i18n>ASN</th>
               }
-            @if (activeDisplayFields.includes(DisplayField.SHARED)) {
-              <th i18n>
-                Shared
-              </th>
-            }
-            @for (field of activeDisplayCustomFields; track field) {
-              <th>
-                {{getDisplayCustomFieldTitle(field)}}
-              </th>
-            }
+              @if (activeDisplayFields.includes(DisplayField.CORRESPONDENT) && permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) {
+                <th class="cursor-pointer"
+                  pngxSortable="correspondent__name"
+                  title="Sort by correspondent" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Correspondent</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.TITLE)) {
+                <th class="cursor-pointer"
+                  pngxSortable="title"
+                  title="Sort by title" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  style="min-width: 150px;"
+                  i18n>Title</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.TAGS) && !activeDisplayFields.includes(DisplayField.TITLE)) {
+                <th i18n>Tags</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.OWNER) && permissionService.currentUserCan(PermissionAction.View, PermissionType.User)) {
+                <th class="cursor-pointer"
+                  pngxSortable="owner"
+                  title="Sort by owner" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Owner</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.NOTES) && notesEnabled) {
+                <th class="cursor-pointer"
+                  pngxSortable="num_notes"
+                  title="Sort by notes" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Notes</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.DOCUMENT_TYPE) && permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) {
+                <th class="cursor-pointer"
+                  pngxSortable="document_type__name"
+                  title="Sort by document type" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Document type</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.STORAGE_PATH) && permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) {
+                <th class="cursor-pointer"
+                  pngxSortable="storage_path__name"
+                  title="Sort by storage path" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Storage path</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.CREATED)) {
+                <th class="cursor-pointer"
+                  pngxSortable="created"
+                  title="Sort by created date" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Created</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.ADDED)) {
+                <th class="cursor-pointer"
+                  pngxSortable="added"
+                  title="Sort by added date" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Added</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.PAGE_COUNT)) {
+                  <th class="cursor-pointer"
+                    pngxSortable="page_count"
+                    title="Sort by number of pages" i18n-title
+                    [currentSortField]="list.sortField"
+                    [currentSortReverse]="list.sortReverse"
+                    (sort)="onSort($event)"
+                    i18n>Pages</th>
+                }
+              @if (activeDisplayFields.includes(DisplayField.SHARED)) {
+                <th i18n>
+                  Shared
+                </th>
+              }
+              @for (field of activeDisplayCustomFields; track field) {
+                <th>
+                  {{getDisplayCustomFieldTitle(field)}}
+                </th>
+              }
+            </tr>
           </thead>
           <tbody>
             @for (d of list.documents; track trackByDocumentId($index, d)) {
diff --git a/src-ui/src/app/components/document-list/document-list.component.spec.ts b/src-ui/src/app/components/document-list/document-list.component.spec.ts
index ad85652b8..0a8faa4d3 100644
--- a/src-ui/src/app/components/document-list/document-list.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.spec.ts
@@ -302,7 +302,7 @@ describe('DocumentListComponent', () => {
     displayModeButtons[0].triggerEventHandler('change')
     fixture.detectChanges()
     expect(component.list.displayMode).toEqual('table')
-    expect(fixture.debugElement.queryAll(By.css('tr'))).toHaveLength(3)
+    expect(fixture.debugElement.queryAll(By.css('tr'))).toHaveLength(4)
 
     displayModeButtons[1].nativeElement.checked = true
     displayModeButtons[1].triggerEventHandler('change')