Fixhancement: config option reset (#12176)

src-ui/src/app/components/admin/config/config.component.html

@@ -19,13 +19,18 @@
                                 <div class="col">
                                     <div class="card bg-light">
                                         <div class="card-body">
-                                            <div class="card-title">
+                                            <div class="card-title d-flex align-items-center">
-                                                <h6>
+                                                <h6 class="mb-0">
                                                   {{option.title}}
+                                                </h6>
                                                 <a class="btn btn-sm btn-link" title="Read the documentation about this setting" i18n-title [href]="getDocsUrl(option.config_key)" target="_blank" referrerpolicy="no-referrer">
                                                     <i-bs name="info-circle"></i-bs>
                                                 </a>
-                                                </h6>
+                                                @if (isSet(option.key)) {
+                                                  <button type="button" class="btn btn-sm btn-link text-danger ms-auto pe-0" title="Reset" i18n-title (click)="resetOption(option.key)">
+                                                      <i-bs class="me-1" name="x"></i-bs><ng-container i18n>Reset</ng-container>
+                                                  </button>
+                                                }
                                             </div>
                                             <div class="mb-n3">
                                                 @switch (option.type) {

src-ui/src/app/components/admin/config/config.component.spec.ts

@@ -144,4 +144,18 @@ describe('ConfigComponent', () => {
     component.uploadFile(new File([], 'test.png'), 'app_logo')
     expect(initSpy).toHaveBeenCalled()
   })
+
+  it('should reset option to null', () => {
+    component.configForm.patchValue({ output_type: OutputTypeConfig.PDF_A })
+    expect(component.isSet('output_type')).toBeTruthy()
+    component.resetOption('output_type')
+    expect(component.configForm.get('output_type').value).toBeNull()
+    expect(component.isSet('output_type')).toBeFalsy()
+    component.configForm.patchValue({ app_title: 'Test Title' })
+    component.resetOption('app_title')
+    expect(component.configForm.get('app_title').value).toBeNull()
+    component.configForm.patchValue({ barcodes_enabled: true })
+    component.resetOption('barcodes_enabled')
+    expect(component.configForm.get('barcodes_enabled').value).toBeNull()
+  })
 })

src-ui/src/app/components/admin/config/config.component.ts

@@ -208,4 +208,12 @@ export class ConfigComponent
         },
       })
   }
+
+  public isSet(key: string): boolean {
+    return this.configForm.get(key).value != null
+  }
+
+  public resetOption(key: string) {
+    this.configForm.get(key).setValue(null)
+  }
 }

src-ui/src/app/components/manage/management-list/management-list.component.html

@@ -62,9 +62,9 @@
 
 @if (!loading) {
   <div class="d-flex mb-2">
-    @if (collectionSize > 0) {
+    @if (displayCollectionSize > 0) {
       <div>
-        <ng-container i18n>{collectionSize, plural, =1 {One {{typeName}}} other {{{collectionSize || 0}} total {{typeNamePlural}}}}</ng-container>
+        <ng-container i18n>{displayCollectionSize, plural, =1 {One {{typeName}}} other {{{displayCollectionSize || 0}} total {{typeNamePlural}}}}</ng-container>
         @if (selectedObjects.size > 0) {
           &nbsp;({{selectedObjects.size}} selected)
         }

src-ui/src/app/components/manage/management-list/management-list.component.spec.ts

@@ -229,7 +229,7 @@ describe('ManagementListComponent', () => {
     expect(reloadSpy).toHaveBeenCalled()
   })
 
-  it('should use the all list length for collection size when provided', fakeAsync(() => {
+  it('should use API count for pagination and all ids for displayed total', fakeAsync(() => {
     jest.spyOn(tagService, 'listFiltered').mockReturnValueOnce(
       of({
         count: 1,
@@ -241,7 +241,8 @@ describe('ManagementListComponent', () => {
     component.reloadData()
     tick(100)
 
-    expect(component.collectionSize).toBe(3)
+    expect(component.collectionSize).toBe(1)
+    expect(component.displayCollectionSize).toBe(3)
   }))
 
   it('should support quick filter for objects', () => {

src-ui/src/app/components/manage/management-list/management-list.component.ts

@@ -23,6 +23,7 @@ import {
   MatchingModel,
 } from 'src/app/data/matching-model'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
+import { Results } from 'src/app/data/results'
 import {
   SortableDirective,
   SortEvent,
@@ -88,6 +89,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
   public page = 1
 
   public collectionSize = 0
+  public displayCollectionSize = 0
 
   public sortField: string
   public sortReverse: boolean
@@ -141,6 +143,14 @@ export abstract class ManagementListComponent<T extends MatchingModel>
     return data
   }
 
+  protected getCollectionSize(results: Results<T>): number {
+    return results.all?.length ?? results.count
+  }
+
+  protected getDisplayCollectionSize(results: Results<T>): number {
+    return this.getCollectionSize(results)
+  }
+
   getDocumentCount(object: MatchingModel): number {
     return (
       object.document_count ??
@@ -171,7 +181,8 @@ export abstract class ManagementListComponent<T extends MatchingModel>
         tap((c) => {
           this.unfilteredData = c.results
           this.data = this.filterData(c.results)
-          this.collectionSize = c.all?.length ?? c.count
+          this.collectionSize = this.getCollectionSize(c)
+          this.displayCollectionSize = this.getDisplayCollectionSize(c)
         }),
         delay(100)
       )

src-ui/src/app/components/manage/tag-list/tag-list.component.ts

@@ -7,6 +7,7 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type'
+import { Results } from 'src/app/data/results'
 import { Tag } from 'src/app/data/tag'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
@@ -77,6 +78,16 @@ export class TagListComponent extends ManagementListComponent<Tag> {
     return data.filter((tag) => !tag.parent || !availableIds.has(tag.parent))
   }
 
+  protected override getCollectionSize(results: Results<Tag>): number {
+    // Tag list pages are requested with is_root=true (when unfiltered), so
+    // pagination must follow root count even though `all` includes descendants
+    return results.count
+  }
+
+  protected override getDisplayCollectionSize(results: Results<Tag>): number {
+    return super.getCollectionSize(results)
+  }
+
   protected override getSelectableIDs(tags: Tag[]): number[] {
     const ids: number[] = []
     for (const tag of tags.filter(Boolean)) {