Enhancement: management list button improvements (#7848)

src-ui/src/app/components/manage/custom-fields/custom-fields.component.html

@@ -26,7 +26,21 @@
         <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editField(field)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.CustomField)">{{field.name}}</button></div>
         <div class="col d-flex align-items-center">{{getDataType(field)}}</div>
         <div class="col">
-          <div class="btn-group">
+          <div class="btn-group d-block d-sm-none">
+            <div ngbDropdown container="body" class="d-inline-block">
+              <button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle>
+                <i-bs name="three-dots-vertical"></i-bs>
+              </button>
+              <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
+                <button (click)="editField(field)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" ngbDropdownItem i18n>Edit</button>
+                <button class="text-danger" (click)="deleteField(field)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.CustomField }" ngbDropdownItem i18n>Delete</button>
+                @if (field.document_count > 0) {
+                  <button (click)="filterDocuments(field)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents ({{ field.document_count }})</button>
+                }
+              </div>
+            </div>
+          </div>
+          <div class="btn-group d-none d-sm-inline-block">
             <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editField(field)">
               <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
             </button>
@@ -34,6 +48,13 @@
               <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
             </button>
           </div>
+          @if (field.document_count > 0) {
+            <div class="btn-group d-none d-sm-inline-block ms-2">
+              <button class="btn btn-sm btn-outline-secondary" type="button" (click)="filterDocuments(field)">
+                <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container><span class="badge bg-light text-secondary ms-2">{{ field.document_count }}</span>
+              </button>
+            </div>
+          }
         </div>
       </div>
     </li>

src-ui/src/app/components/manage/custom-fields/custom-fields.component.scss

@@ -0,0 +1,4 @@
+// hide caret on mobile dropdown
+.d-block.d-sm-none .dropdown-toggle::after {
+    display: none;
+}

src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts

@@ -22,6 +22,12 @@ import { PageHeaderComponent } from '../../common/page-header/page-header.compon
 import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { FILTER_CUSTOM_FIELDS_QUERY } from 'src/app/data/filter-rule-type'
+import {
+  CustomFieldQueryLogicalOperator,
+  CustomFieldQueryOperator,
+} from 'src/app/data/custom-field-query'
 
 const fields: CustomField[] = [
   {
@@ -42,6 +48,7 @@ describe('CustomFieldsComponent', () => {
   let customFieldsService: CustomFieldsService
   let modalService: NgbModal
   let toastService: ToastService
+  let listViewService: DocumentListViewService
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -83,6 +90,7 @@ describe('CustomFieldsComponent', () => {
     )
     modalService = TestBed.inject(NgbModal)
     toastService = TestBed.inject(ToastService)
+    listViewService = TestBed.inject(DocumentListViewService)
 
     fixture = TestBed.createComponent(CustomFieldsComponent)
     component = fixture.componentInstance
@@ -145,7 +153,7 @@ describe('CustomFieldsComponent', () => {
     const deleteSpy = jest.spyOn(customFieldsService, 'delete')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[4]
+    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[5]
     deleteButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -162,4 +170,18 @@ describe('CustomFieldsComponent', () => {
     editDialog.confirmClicked.emit()
     expect(reloadSpy).toHaveBeenCalled()
   })
+
+  it('should support filter documents', () => {
+    const filterSpy = jest.spyOn(listViewService, 'quickFilter')
+    component.filterDocuments(fields[0])
+    expect(filterSpy).toHaveBeenCalledWith([
+      {
+        rule_type: FILTER_CUSTOM_FIELDS_QUERY,
+        value: JSON.stringify([
+          CustomFieldQueryLogicalOperator.Or,
+          [[fields[0].id, CustomFieldQueryOperator.Exists, true]],
+        ]),
+      },
+    ])
+  })
 })

src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts

@@ -9,6 +9,12 @@ import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dial
 import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { FILTER_CUSTOM_FIELDS_QUERY } from 'src/app/data/filter-rule-type'
+import {
+  CustomFieldQueryLogicalOperator,
+  CustomFieldQueryOperator,
+} from 'src/app/data/custom-field-query'
 
 @Component({
   selector: 'pngx-custom-fields',
@@ -26,7 +32,8 @@ export class CustomFieldsComponent
     private customFieldsService: CustomFieldsService,
     public permissionsService: PermissionsService,
     private modalService: NgbModal,
-    private toastService: ToastService
+    private toastService: ToastService,
+    private documentListViewService: DocumentListViewService
   ) {
     super()
   }
@@ -92,4 +99,16 @@ export class CustomFieldsComponent
   getDataType(field: CustomField): string {
     return DATA_TYPE_LABELS.find((l) => l.id === field.data_type).name
   }
+
+  filterDocuments(field: CustomField) {
+    this.documentListViewService.quickFilter([
+      {
+        rule_type: FILTER_CUSTOM_FIELDS_QUERY,
+        value: JSON.stringify([
+          CustomFieldQueryLogicalOperator.Or,
+          [[field.id, CustomFieldQueryOperator.Exists, true]],
+        ]),
+      },
+    ])
+  }
 }

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

@@ -79,16 +79,15 @@
                   <i-bs name="three-dots-vertical"></i-bs>
                 </button>
                 <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
-                  <button (click)="filterDocuments(object)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents</button>
                   <button (click)="openEditDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" ngbDropdownItem i18n>Edit</button>
                   <button class="text-danger" (click)="openDeleteDialog(object)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" ngbDropdownItem i18n>Delete</button>
+                  @if (object.document_count > 0) {
+                    <button (click)="filterDocuments(object)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }" ngbDropdownItem i18n>Filter Documents ({{ object.document_count }})</button>
+                  }
                 </div>
               </div>
             </div>
-            <div class="btn-group d-none d-sm-block">
-              <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-                <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container>
-              </button>
+            <div class="btn-group d-none d-sm-inline-block">
               <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
                 <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
               </button>
@@ -96,6 +95,13 @@
                 <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
               </button>
             </div>
+            @if (object.document_count > 0) {
+              <div class="btn-group d-none d-sm-inline-block ms-2">
+                <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+                  <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container><span class="badge bg-light text-secondary ms-2">{{ object.document_count }}</span>
+                </button>
+              </div>
+            }
           </td>
         </tr>
       }

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

@@ -49,16 +49,19 @@ const tags: Tag[] = [
     name: 'Tag1 Foo',
     matching_algorithm: MATCH_LITERAL,
     match: 'foo',
+    document_count: 35,
   },
   {
     id: 2,
     name: 'Tag2',
     matching_algorithm: MATCH_NONE,
+    document_count: 0,
   },
   {
     id: 3,
     name: 'Tag3',
     matching_algorithm: MATCH_AUTO,
+    document_count: 5,
   },
 ]
 
@@ -180,7 +183,7 @@ describe('ManagementListComponent', () => {
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
     const reloadSpy = jest.spyOn(component, 'reloadData')
 
-    const editButton = fixture.debugElement.queryAll(By.css('button'))[7]
+    const editButton = fixture.debugElement.queryAll(By.css('button'))[6]
     editButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -205,7 +208,7 @@ describe('ManagementListComponent', () => {
     const deleteSpy = jest.spyOn(tagService, 'delete')
     const reloadSpy = jest.spyOn(component, 'reloadData')
 
-    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[8]
+    const deleteButton = fixture.debugElement.queryAll(By.css('button'))[7]
     deleteButton.triggerEventHandler('click')
 
     expect(modal).not.toBeUndefined()
@@ -225,7 +228,7 @@ describe('ManagementListComponent', () => {
 
   it('should support quick filter for objects', () => {
     const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
-    const filterButton = fixture.debugElement.queryAll(By.css('button'))[6]
+    const filterButton = fixture.debugElement.queryAll(By.css('button'))[8]
     filterButton.triggerEventHandler('click')
     expect(qfSpy).toHaveBeenCalledWith([
       { rule_type: FILTER_HAS_TAGS_ALL, value: tags[0].id.toString() },

src-ui/src/app/data/custom-field.ts

@@ -59,4 +59,5 @@ export interface CustomField extends ObjectWithId {
     select_options?: string[]
     default_currency?: string
   }
+  document_count?: number
 }