Enhancement: filter by file type (#8946)

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html

@@ -56,6 +56,7 @@
                   [ngbPopover]="getFileTypeName(filetype)"
                   i18n-ngbPopover
                   triggers="mouseenter:mouseleave"
+                  (click)="filterByFileType(filetype)"
                   [attr.aria-label]="getFileTypeName(filetype)"
                   [class.me-1px]="!last"
                   [style.width]="getFileTypePercent(filetype) + '%'"
@@ -70,7 +71,7 @@
           <div class="d-flex flex-wrap align-items-start">
             @for (filetype of statistics?.document_file_type_counts; track filetype; let i = $index) {
               <div class="d-flex">
-                <div class="text-nowrap me-2">
+                <div class="text-nowrap me-2" [class.cursor-pointer]="!filetype.is_other" (click)="filterByFileType(filetype)">
                   <span class="badge rounded-pill bg-primary d-inline-block p-0 me-1" [style.opacity]="getItemOpacity(i)"></span>
                   <small class="text-nowrap"><span class="fw-bold">{{ getFileTypeExtension(filetype) }}</span>&nbsp;<span class="text-muted">({{getFileTypePercent(filetype) | number: '1.0-1'}}%)</span></small>
                 </div>

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

@@ -9,8 +9,10 @@ import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { Subject } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
+import { FILTER_MIME_TYPE } from 'src/app/data/filter-rule-type'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import {
   FileStatus,
   WebsocketStatusService,
@@ -24,6 +26,7 @@ describe('StatisticsWidgetComponent', () => {
   let fixture: ComponentFixture<StatisticsWidgetComponent>
   let httpTestingController: HttpTestingController
   let websocketStatusService: WebsocketStatusService
+  let documentListViewService: DocumentListViewService
   const fileStatusSubject = new Subject<FileStatus>()
 
   beforeEach(async () => {
@@ -48,6 +51,7 @@ describe('StatisticsWidgetComponent', () => {
     jest
       .spyOn(websocketStatusService, 'onDocumentConsumptionFinished')
       .mockReturnValue(fileStatusSubject)
+    documentListViewService = TestBed.inject(DocumentListViewService)
     component = fixture.componentInstance
 
     httpTestingController = TestBed.inject(HttpTestingController)
@@ -231,4 +235,26 @@ describe('StatisticsWidgetComponent', () => {
       'CurrentASN:'
     )
   })
+
+  it('should support quick filter by mime type', () => {
+    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
+    component.filterByFileType({
+      mime_type: 'application/pdf',
+      mime_type_count: 160,
+    })
+    expect(qfSpy).toHaveBeenCalledWith([
+      {
+        rule_type: FILTER_MIME_TYPE,
+        value: 'application/pdf',
+      },
+    ])
+
+    qfSpy.mockClear()
+    component.filterByFileType({
+      mime_type: 'Other',
+      mime_type_count: 160,
+      is_other: true,
+    })
+    expect(qfSpy).not.toHaveBeenCalled()
+  })
 })

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts

@@ -6,7 +6,10 @@ import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import * as mimeTypeNames from 'mime-names'
 import { first, Subject, Subscription, takeUntil } from 'rxjs'
 import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component'
-import { FILTER_HAS_TAGS_ANY } from 'src/app/data/filter-rule-type'
+import {
+  FILTER_HAS_TAGS_ANY,
+  FILTER_MIME_TYPE,
+} from 'src/app/data/filter-rule-type'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { WebsocketStatusService } from 'src/app/services/websocket-status.service'
@@ -29,6 +32,7 @@ export interface Statistics {
 interface DocumentFileType {
   mime_type: string
   mime_type_count: number
+  is_other?: boolean
 }
 
 @Component({
@@ -77,6 +81,7 @@ export class StatisticsWidgetComponent
             statistics.document_file_type_counts.slice(0, fileTypeMax)
           statistics.document_file_type_counts.push({
             mime_type: $localize`Other`,
+            is_other: true,
             mime_type_count: others.reduce(
               (currentValue, documentFileType) =>
                 documentFileType.mime_type_count + currentValue,
@@ -132,4 +137,14 @@ export class StatisticsWidgetComponent
       },
     ])
   }
+
+  filterByFileType(filetype: DocumentFileType) {
+    if (filetype.is_other) return
+    this.documentListViewService.quickFilter([
+      {
+        rule_type: FILTER_MIME_TYPE,
+        value: filetype.mime_type,
+      },
+    ])
+  }
 }