Enhancement: filter by file type (#8946)

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,
+      },
+    ])
+  }
 }