Feature: page count (#7750)

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts

@@ -65,6 +65,7 @@ const savedView: SavedView = {
     DisplayField.CORRESPONDENT,
     DisplayField.DOCUMENT_TYPE,
     DisplayField.STORAGE_PATH,
+    DisplayField.PAGE_COUNT,
     `${DisplayField.CUSTOM_FIELD}11` as any,
     `${DisplayField.CUSTOM_FIELD}15` as any,
   ],
@@ -344,6 +345,7 @@ describe('SavedViewWidgetComponent', () => {
     expect(component.getColumnTitle(DisplayField.STORAGE_PATH)).toEqual(
       'Storage path'
     )
+    expect(component.getColumnTitle(DisplayField.PAGE_COUNT)).toEqual('Pages')
   })
 
   it('should get correct column title for custom field', () => {

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -111,6 +111,12 @@
                   </div>
                 }
               }
+              @if (displayFields.includes(DisplayField.PAGE_COUNT) && document.page_count) {
+                <div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center">
+                  <i-bs width=".9em" height=".9em" class="me-2 text-muted" name="files"></i-bs>
+                  <small i18n>{document.page_count, plural, =1 {1 page} other {{{document.page_count}} pages}}</small>
+                </div>
+              }
               @if (displayFields.includes(DisplayField.OWNER) && document.owner && document.owner !== settingsService.currentUser.id) {
                 <div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center">
                   <i-bs width=".9em" height=".9em" class="me-2 text-muted" name="person-fill-lock"></i-bs><small>{{document.owner | username}}</small>

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts

@@ -31,6 +31,7 @@ const doc = {
   correspondent: 8,
   document_type: 10,
   storage_path: null,
+  page_count: 8,
   notes: [
     {
       id: 11,
@@ -80,6 +81,7 @@ describe('DocumentCardLargeComponent', () => {
   it('should display a document', () => {
     expect(fixture.nativeElement.textContent).toContain('Document 10')
     expect(fixture.nativeElement.textContent).toContain('Cupcake ipsum')
+    expect(fixture.nativeElement.textContent).toContain('8 pages')
   })
 
   it('should show preview on mouseover after delay to preload content', fakeAsync(() => {

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -88,6 +88,14 @@
             </div>
           </div>
         }
+        @if (displayFields.includes(DisplayField.PAGE_COUNT) && document.page_count) {
+          <div class="list-group-item bg-transparent p-0 border-0 d-flex flex-wrap-reverse justify-content-between">
+            <div class="ps-0 p-1" placement="top">
+              <i-bs width="1em" height="1em" class="me-2 text-muted" name="files"></i-bs>
+              <small i18n>{document.page_count, plural, =1 {1 page} other {{{document.page_count}} pages}}</small>
+            </div>
+          </div>
+        }
         @if (displayFields.includes(DisplayField.ASN) && document.archive_serial_number | isNumber) {
           <div class="ps-0 p-1">
             <i-bs width="1em" height="1em" class="me-2 text-muted" name="upc-scan"></i-bs>

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts

@@ -34,6 +34,7 @@ const doc = {
   correspondent: 8,
   document_type: 10,
   storage_path: null,
+  page_count: 12,
   notes: [
     {
       id: 11,
@@ -91,6 +92,10 @@ describe('DocumentCardSmallComponent', () => {
     fixture.detectChanges()
   })
 
+  it('should display page count', () => {
+    expect(fixture.nativeElement.textContent).toContain('12 pages')
+  })
+
   it('should display a document, limit tags to 5', () => {
     expect(fixture.nativeElement.textContent).toContain('Document 10')
     expect(

src-ui/src/app/components/document-list/document-list.component.html

@@ -246,6 +246,15 @@
                 (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
@@ -330,6 +339,11 @@
                     {{d.added | customDate}}
                   </td>
                 }
+                @if (activeDisplayFields.includes(DisplayField.PAGE_COUNT)) {
+                    <td>
+                        {{ d.page_count }}
+                    </td>
+                  }
                 @if (activeDisplayFields.includes(DisplayField.SHARED)) {
                   <td>
                     @if (d.is_shared_by_requester) { <ng-container i18n>Yes</ng-container> } @else { <ng-container i18n>No</ng-container> }

src-ui/src/app/components/document-list/document-list.component.spec.ts

@@ -602,7 +602,7 @@ describe('DocumentListComponent', () => {
 
     expect(
       fixture.debugElement.queryAll(By.directive(SortableDirective))
-    ).toHaveLength(9)
+    ).toHaveLength(10)
 
     expect(component.notesEnabled).toBeTruthy()
     settingsService.set(SETTINGS_KEYS.NOTES_ENABLED, false)
@@ -610,14 +610,14 @@ describe('DocumentListComponent', () => {
     expect(component.notesEnabled).toBeFalsy()
     expect(
       fixture.debugElement.queryAll(By.directive(SortableDirective))
-    ).toHaveLength(8)
+    ).toHaveLength(9)
 
     // insufficient perms
     jest.spyOn(permissionService, 'currentUserCan').mockReturnValue(false)
     fixture.detectChanges()
     expect(
       fixture.debugElement.queryAll(By.directive(SortableDirective))
-    ).toHaveLength(4)
+    ).toHaveLength(5)
   })
 
   it('should support toggle on document objects', () => {

src-ui/src/app/data/document.ts

@@ -26,6 +26,7 @@ export enum DisplayField {
   OWNER = 'owner',
   SHARED = 'shared',
   ASN = 'asn',
+  PAGE_COUNT = 'pagecount',
 }
 
 export const DEFAULT_DISPLAY_FIELDS = [
@@ -73,6 +74,10 @@ export const DEFAULT_DISPLAY_FIELDS = [
     id: DisplayField.ASN,
     name: $localize`ASN`,
   },
+  {
+    id: DisplayField.PAGE_COUNT,
+    name: $localize`Pages`,
+  },
 ]
 
 export const DEFAULT_DASHBOARD_VIEW_PAGE_SIZE = 10
@@ -94,6 +99,7 @@ export const DOCUMENT_SORT_FIELDS = [
   { field: 'modified', name: $localize`Modified` },
   { field: 'num_notes', name: $localize`Notes` },
   { field: 'owner', name: $localize`Owner` },
+  { field: 'page_count', name: $localize`Pages` },
 ]
 
 export const DOCUMENT_SORT_FIELDS_FULLTEXT = [
@@ -164,4 +170,6 @@ export interface Document extends ObjectWithPermissions {
 
   // write-only field
   remove_inbox_tags?: boolean
+
+  page_count?: number
 }

src-ui/src/app/services/settings.service.ts

@@ -345,6 +345,7 @@ export class SettingsService {
             DisplayField.CREATED,
             DisplayField.ADDED,
             DisplayField.ASN,
+            DisplayField.PAGE_COUNT,
             DisplayField.SHARED,
           ].includes(field.id)
         ) {