Link file types from statistics

This commit is contained in:
shamoon 2025-01-16 13:40:34 -08:00
parent bb026c64c4
commit c44521e646
3 changed files with 41 additions and 2 deletions

View File

@ -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.mime_type !== '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>

View File

@ -9,12 +9,14 @@ 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 {
FileStatus,
WebsocketStatusService,
} from 'src/app/services/websocket-status.service'
import { DocumentListViewService } from 'src/app/services/document-list-view.service'
import { environment } from 'src/environments/environment'
import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
import { StatisticsWidgetComponent } from './statistics-widget.component'
@ -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,25 @@ 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,
})
expect(qfSpy).not.toHaveBeenCalled()
})
})

View File

@ -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'
@ -132,4 +135,14 @@ export class StatisticsWidgetComponent
},
])
}
filterByFileType(filetype: DocumentFileType) {
if (filetype.mime_type === 'Other') return
this.documentListViewService.quickFilter([
{
rule_type: FILTER_MIME_TYPE,
value: filetype.mime_type,
},
])
}
}