mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-09-01 01:46:16 +00:00
Feature: global search, keyboard shortcuts / hotkey support (#6449)
This commit is contained in:
shamoon
@@ -0,0 +1,163 @@
|
||||
|
||||
<div ngbDropdown #resultsDropdown="ngbDropdown" (openChange)="onDropdownOpenChange">
|
||||
<form class="form-inline position-relative">
|
||||
<i-bs width="1em" height="1em" name="search"></i-bs>
|
||||
<div class="input-group">
|
||||
<div class="form-control form-control-sm">
|
||||
<input class="bg-transparent border-0 w-100 h-100" #searchInput type="text" name="query"
|
||||
placeholder="Search" aria-label="Search" i18n-placeholder
|
||||
autocomplete="off" spellcheck="false"
|
||||
[(ngModel)]="query" (ngModelChange)="this.queryDebounce.next($event)" (keydown)="searchInputKeyDown($event)">
|
||||
<div class="position-absolute top-50 end-0 translate-middle">
|
||||
@if (loading) {
|
||||
<div class="spinner-border spinner-border-sm text-muted mt-1"></div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@if (query && (searchResults?.documents.length === searchService.searchResultObjectLimit || searchService.searchDbOnly)) {
|
||||
<button class="btn btn-sm btn-outline-secondary" type="button" (click)="runAdvanedSearch()">
|
||||
<ng-container i18n>Advanced search</ng-container>
|
||||
<i-bs width="1em" height="1em" name="arrow-right-short"></i-bs>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ng-template #resultItemTemplate let-item="item" let-nameProp="nameProp" let-type="type" let-icon="icon" let-date="date">
|
||||
<div #resultItem ngbDropdownItem class="py-2 d-flex align-items-center focus-ring border-0 cursor-pointer" tabindex="-1"
|
||||
(click)="primaryAction(type, item)"
|
||||
(mouseenter)="onItemHover($event)">
|
||||
<i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs>
|
||||
<div class="text-truncate">
|
||||
{{item[nameProp]}}
|
||||
@if (date) {
|
||||
<small class="small text-muted">{{date | customDate}}</small>
|
||||
}
|
||||
</div>
|
||||
<div class="btn-group ms-auto">
|
||||
<button #primaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
|
||||
(click)="primaryAction(type, item); $event.stopPropagation()"
|
||||
[disabled]="disablePrimaryButton(type, item)"
|
||||
(mouseenter)="onButtonHover($event)">
|
||||
@if (type === DataType.Document) {
|
||||
<i-bs width="1em" height="1em" name="pencil"></i-bs>
|
||||
<span> <ng-container i18n>Open</ng-container></span>
|
||||
} @else if (type === DataType.SavedView) {
|
||||
<i-bs width="1em" height="1em" name="eye"></i-bs>
|
||||
<span> <ng-container i18n>Open</ng-container></span>
|
||||
} @else if (type === DataType.Workflow || type === DataType.CustomField || type === DataType.Group || type === DataType.User || type === DataType.MailAccount || type === DataType.MailRule) {
|
||||
<i-bs width="1em" height="1em" name="pencil"></i-bs>
|
||||
<span> <ng-container i18n>Edit</ng-container></span>
|
||||
} @else {
|
||||
<i-bs width="1em" height="1em" name="filter"></i-bs>
|
||||
<span> <ng-container i18n>Filter documents</ng-container></span>
|
||||
}
|
||||
</button>
|
||||
@if (type !== DataType.SavedView && type !== DataType.Workflow && type !== DataType.CustomField && type !== DataType.Group && type !== DataType.User && type !== DataType.MailAccount && type !== DataType.MailRule) {
|
||||
<button #secondaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
|
||||
(click)="secondaryAction(type, item); $event.stopPropagation()"
|
||||
[disabled]="disableSecondaryButton(type, item)"
|
||||
(mouseenter)="onButtonHover($event)">
|
||||
@if (type === DataType.Document) {
|
||||
<i-bs width="1em" height="1em" name="download"></i-bs>
|
||||
<span> <ng-container i18n>Download</ng-container></span>
|
||||
} @else {
|
||||
<i-bs width="1em" height="1em" name="pencil"></i-bs>
|
||||
<span> <ng-container i18n>Edit</ng-container></span>
|
||||
}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<div ngbDropdownMenu class="w-100 mh-75 overflow-y-scroll shadow-lg" (keydown)="dropdownKeyDown($event)">
|
||||
@if (searchResults?.total === 0) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.noResults">No results</h6>
|
||||
} @else {
|
||||
@if (searchResults?.documents.length) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.documents">Documents</h6>
|
||||
@for (document of searchResults.documents; track document.id) {
|
||||
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: document, nameProp: 'title', type: DataType.Document, icon: 'file-text', date: document.added}"></ng-container>
|
||||
}
|
||||
}
|
||||
@if (searchResults?.saved_views.length) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.saved_views">Saved Views</h6>
|
||||
@for (saved_view of searchResults.saved_views; track saved_view.id) {
|
||||
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: saved_view, nameProp: 'name', type: DataType.SavedView, icon: 'funnel'}"></ng-container>
|
||||
}
|
||||
}
|
||||
|
||||
@if (searchResults?.tags.length) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.tags">Tags</h6>
|
||||
@for (tag of searchResults.tags; track tag.id) {
|
||||
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: tag, nameProp: 'name', type: DataType.Tag, icon: 'tag'}"></ng-container>
|
||||
}
|
||||
}
|
||||
|
||||
@if (searchResults?.correspondents.length) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.correspondents">Correspondents</h6>
|
||||
@for (correspondent of searchResults.correspondents; track correspondent.id) {
|
||||
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: correspondent, nameProp: 'name', type: DataType.Correspondent, icon: 'person'}"></ng-container>
|
||||
}
|
||||
}
|
||||
|
||||
@if (searchResults?.document_types.length) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.documentTypes">Document types</h6>
|
||||
@for (documentType of searchResults.document_types; track documentType.id) {
|
||||
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: documentType, nameProp: 'name', type: DataType.DocumentType, icon: 'file-earmark'}"></ng-container>
|
||||
}
|
||||
}
|
||||
|
||||
@if (searchResults?.storage_paths.length) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.storagePaths">Storage paths</h6>
|
||||
@for (storagePath of searchResults.storage_paths; track storagePath.id) {
|
||||
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: storagePath, nameProp: 'name', type: DataType.StoragePath, icon: 'folder'}"></ng-container>
|
||||
}
|
||||
}
|
||||
|
||||
@if (searchResults?.users.length) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.users">Users</h6>
|
||||
@for (user of searchResults.users; track user.id) {
|
||||
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: user, nameProp: 'username', type: DataType.User, icon: 'person-square'}"></ng-container>
|
||||
}
|
||||
}
|
||||
|
||||
@if (searchResults?.groups.length) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.groups">Groups</h6>
|
||||
@for (group of searchResults.groups; track group.id) {
|
||||
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: group, nameProp: 'name', type: DataType.Group, icon: 'people'}"></ng-container>
|
||||
}
|
||||
}
|
||||
|
||||
@if (searchResults?.custom_fields.length) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.customFields">Custom fields</h6>
|
||||
@for (customField of searchResults.custom_fields; track customField.id) {
|
||||
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: customField, nameProp: 'name', type: DataType.CustomField, icon: 'ui-radios'}"></ng-container>
|
||||
}
|
||||
}
|
||||
|
||||
@if (searchResults?.mail_accounts.length) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.mailAccounts">Mail accounts</h6>
|
||||
@for (mailAccount of searchResults.mail_accounts; track mailAccount.id) {
|
||||
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: mailAccount, nameProp: 'name', type: DataType.MailAccount, icon: 'envelope-at'}"></ng-container>
|
||||
}
|
||||
}
|
||||
|
||||
@if (searchResults?.mail_rules.length) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.mailRules">Mail rules</h6>
|
||||
@for (mailRule of searchResults.mail_rules; track mailRule.id) {
|
||||
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: mailRule, nameProp: 'name', type: DataType.MailRule, icon: 'envelope'}"></ng-container>
|
||||
}
|
||||
}
|
||||
|
||||
@if (searchResults?.workflows.length) {
|
||||
<h6 class="dropdown-header" i18n="@@searchResults.workflows">Workflows</h6>
|
||||
@for (workflow of searchResults.workflows; track workflow.id) {
|
||||
<ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: workflow, nameProp: 'name', type: DataType.Workflow, icon: 'boxes'}"></ng-container>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,97 @@
|
||||
form {
|
||||
position: relative;
|
||||
|
||||
> i-bs[name="search"] {
|
||||
position: absolute;
|
||||
left: 0.6rem;
|
||||
top: .35rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
// adjust for smaller font size on non-mobile
|
||||
top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
i-bs[name="search"],
|
||||
.badge {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.input-group .btn {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: var(--pngx-primary-text-contrast);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
padding-left: 1.8rem;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
transition: all .3s ease, padding-left 0s ease, background-color 0s ease; // Safari requires all
|
||||
> input {
|
||||
outline: none;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
color: var(--bs-light);
|
||||
flex-grow: 1;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
--pngx-focus-alpha: 0;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mh-75 {
|
||||
max-height: 75vh;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
&:has(button:focus) {
|
||||
background-color: var(--pngx-bg-darker);
|
||||
}
|
||||
|
||||
& button {
|
||||
transition: all 0.3s ease, color 0.15s ease;
|
||||
max-width: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& button span {
|
||||
opacity: 0;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
&:hover button,
|
||||
&:has(button:focus) button {
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
&:hover button span,
|
||||
&:has(button:focus) span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,453 @@
|
||||
import {
|
||||
ComponentFixture,
|
||||
TestBed,
|
||||
fakeAsync,
|
||||
tick,
|
||||
} from '@angular/core/testing'
|
||||
import { GlobalSearchComponent } from './global-search.component'
|
||||
import { of } from 'rxjs'
|
||||
import { SearchService } from 'src/app/services/rest/search.service'
|
||||
import { Router } from '@angular/router'
|
||||
import {
|
||||
NgbDropdownModule,
|
||||
NgbModal,
|
||||
NgbModalModule,
|
||||
NgbModalRef,
|
||||
} from '@ng-bootstrap/ng-bootstrap'
|
||||
import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
|
||||
import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
|
||||
import { DocumentListViewService } from 'src/app/services/document-list-view.service'
|
||||
import { HttpClientTestingModule } from '@angular/common/http/testing'
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
|
||||
import {
|
||||
FILTER_FULLTEXT_QUERY,
|
||||
FILTER_HAS_CORRESPONDENT_ANY,
|
||||
FILTER_HAS_DOCUMENT_TYPE_ANY,
|
||||
FILTER_HAS_STORAGE_PATH_ANY,
|
||||
FILTER_HAS_TAGS_ANY,
|
||||
} from 'src/app/data/filter-rule-type'
|
||||
import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
|
||||
import { DocumentService } from 'src/app/services/rest/document.service'
|
||||
import { MailRuleEditDialogComponent } from '../../common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
|
||||
import { MailAccountEditDialogComponent } from '../../common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
|
||||
import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
|
||||
import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
|
||||
import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
|
||||
import { ElementRef } from '@angular/core'
|
||||
import { ToastService } from 'src/app/services/toast.service'
|
||||
import { DataType } from 'src/app/data/datatype'
|
||||
|
||||
const searchResults = {
|
||||
total: 11,
|
||||
documents: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Test',
|
||||
created_at: new Date(),
|
||||
updated_at: new Date(),
|
||||
document_type: { id: 1, name: 'Test' },
|
||||
storage_path: { id: 1, path: 'Test' },
|
||||
tags: [],
|
||||
correspondents: [],
|
||||
custom_fields: [],
|
||||
},
|
||||
],
|
||||
saved_views: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'TestSavedView',
|
||||
},
|
||||
],
|
||||
correspondents: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'TestCorrespondent',
|
||||
},
|
||||
],
|
||||
document_types: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'TestDocumentType',
|
||||
},
|
||||
],
|
||||
storage_paths: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'TestStoragePath',
|
||||
},
|
||||
],
|
||||
tags: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'TestTag',
|
||||
},
|
||||
],
|
||||
users: [
|
||||
{
|
||||
id: 1,
|
||||
username: 'TestUser',
|
||||
},
|
||||
],
|
||||
groups: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'TestGroup',
|
||||
},
|
||||
],
|
||||
mail_accounts: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'TestMailAccount',
|
||||
},
|
||||
],
|
||||
mail_rules: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'TestMailRule',
|
||||
},
|
||||
],
|
||||
custom_fields: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'TestCustomField',
|
||||
},
|
||||
],
|
||||
workflows: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'TestWorkflow',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
describe('GlobalSearchComponent', () => {
|
||||
let component: GlobalSearchComponent
|
||||
let fixture: ComponentFixture<GlobalSearchComponent>
|
||||
let searchService: SearchService
|
||||
let router: Router
|
||||
let modalService: NgbModal
|
||||
let documentService: DocumentService
|
||||
let documentListViewService: DocumentListViewService
|
||||
let toastService: ToastService
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [GlobalSearchComponent],
|
||||
imports: [
|
||||
HttpClientTestingModule,
|
||||
NgbModalModule,
|
||||
NgbDropdownModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
NgxBootstrapIconsModule.pick(allIcons),
|
||||
],
|
||||
}).compileComponents()
|
||||
|
||||
searchService = TestBed.inject(SearchService)
|
||||
router = TestBed.inject(Router)
|
||||
modalService = TestBed.inject(NgbModal)
|
||||
documentService = TestBed.inject(DocumentService)
|
||||
documentListViewService = TestBed.inject(DocumentListViewService)
|
||||
toastService = TestBed.inject(ToastService)
|
||||
|
||||
fixture = TestBed.createComponent(GlobalSearchComponent)
|
||||
component = fixture.componentInstance
|
||||
fixture.detectChanges()
|
||||
})
|
||||
|
||||
it('should handle keyboard nav', () => {
|
||||
const focusSpy = jest.spyOn(component.searchInput.nativeElement, 'focus')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: '/' }))
|
||||
expect(focusSpy).toHaveBeenCalled()
|
||||
|
||||
component.searchResults = searchResults as any
|
||||
component.resultsDropdown.open()
|
||||
fixture.detectChanges()
|
||||
|
||||
component['currentItemIndex'] = 0
|
||||
component['setCurrentItem']()
|
||||
const firstItemFocusSpy = jest.spyOn(
|
||||
component.primaryButtons.get(1).nativeElement,
|
||||
'focus'
|
||||
)
|
||||
component.dropdownKeyDown(
|
||||
new KeyboardEvent('keydown', { key: 'ArrowDown' })
|
||||
)
|
||||
expect(component['currentItemIndex']).toBe(1)
|
||||
expect(firstItemFocusSpy).toHaveBeenCalled()
|
||||
|
||||
const secondaryItemFocusSpy = jest.spyOn(
|
||||
component.secondaryButtons.get(1).nativeElement,
|
||||
'focus'
|
||||
)
|
||||
component.dropdownKeyDown(
|
||||
new KeyboardEvent('keydown', { key: 'ArrowRight' })
|
||||
)
|
||||
expect(secondaryItemFocusSpy).toHaveBeenCalled()
|
||||
|
||||
component.dropdownKeyDown(
|
||||
new KeyboardEvent('keydown', { key: 'ArrowLeft' })
|
||||
)
|
||||
expect(firstItemFocusSpy).toHaveBeenCalled()
|
||||
|
||||
const zeroItemSpy = jest.spyOn(
|
||||
component.primaryButtons.get(0).nativeElement,
|
||||
'focus'
|
||||
)
|
||||
component.dropdownKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
|
||||
expect(component['currentItemIndex']).toBe(0)
|
||||
expect(zeroItemSpy).toHaveBeenCalled()
|
||||
|
||||
const inputFocusSpy = jest.spyOn(
|
||||
component.searchInput.nativeElement,
|
||||
'focus'
|
||||
)
|
||||
component.dropdownKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
|
||||
expect(component['currentItemIndex']).toBe(-1)
|
||||
expect(inputFocusSpy).toHaveBeenCalled()
|
||||
|
||||
component.dropdownKeyDown(
|
||||
new KeyboardEvent('keydown', { key: 'ArrowDown' })
|
||||
)
|
||||
component['currentItemIndex'] = searchResults.total - 1
|
||||
component['setCurrentItem']()
|
||||
component.dropdownKeyDown(
|
||||
new KeyboardEvent('keydown', { key: 'ArrowDown' })
|
||||
)
|
||||
expect(component['currentItemIndex']).toBe(-1)
|
||||
|
||||
// Search input
|
||||
|
||||
component.searchInputKeyDown(
|
||||
new KeyboardEvent('keydown', { key: 'ArrowUp' })
|
||||
)
|
||||
expect(component['currentItemIndex']).toBe(searchResults.total - 1)
|
||||
|
||||
component.searchInputKeyDown(
|
||||
new KeyboardEvent('keydown', { key: 'ArrowDown' })
|
||||
)
|
||||
expect(component['currentItemIndex']).toBe(0)
|
||||
|
||||
component.searchResults = { total: 1 } as any
|
||||
const primaryActionSpy = jest.spyOn(component, 'primaryAction')
|
||||
component.searchInputKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
|
||||
expect(primaryActionSpy).toHaveBeenCalled()
|
||||
|
||||
component.query = 'test'
|
||||
const resetSpy = jest.spyOn(GlobalSearchComponent.prototype as any, 'reset')
|
||||
component.searchInputKeyDown(
|
||||
new KeyboardEvent('keydown', { key: 'Escape' })
|
||||
)
|
||||
expect(resetSpy).toHaveBeenCalled()
|
||||
|
||||
component.query = ''
|
||||
const blurSpy = jest.spyOn(component.searchInput.nativeElement, 'blur')
|
||||
component.searchInputKeyDown(
|
||||
new KeyboardEvent('keydown', { key: 'Escape' })
|
||||
)
|
||||
expect(blurSpy).toHaveBeenCalled()
|
||||
|
||||
component.searchResults = { total: 1 } as any
|
||||
component.resultsDropdown.close()
|
||||
const openSpy = jest.spyOn(component.resultsDropdown, 'open')
|
||||
component.searchInputKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
|
||||
expect(openSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should search on query debounce', fakeAsync(() => {
|
||||
const query = 'test'
|
||||
const searchSpy = jest.spyOn(searchService, 'globalSearch')
|
||||
searchSpy.mockReturnValue(of({} as any))
|
||||
const dropdownOpenSpy = jest.spyOn(component.resultsDropdown, 'open')
|
||||
component.queryDebounce.next(query)
|
||||
tick(401)
|
||||
expect(searchSpy).toHaveBeenCalledWith(query)
|
||||
expect(dropdownOpenSpy).toHaveBeenCalled()
|
||||
}))
|
||||
|
||||
it('should support primary action', () => {
|
||||
const object = { id: 1 }
|
||||
const routerSpy = jest.spyOn(router, 'navigate')
|
||||
const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
|
||||
const modalSpy = jest.spyOn(modalService, 'open')
|
||||
|
||||
let modal: NgbModalRef
|
||||
modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
|
||||
|
||||
component.primaryAction(DataType.Document, object)
|
||||
expect(routerSpy).toHaveBeenCalledWith(['/documents', object.id])
|
||||
|
||||
component.primaryAction(DataType.SavedView, object)
|
||||
expect(routerSpy).toHaveBeenCalledWith(['/view', object.id])
|
||||
|
||||
component.primaryAction(DataType.Correspondent, object)
|
||||
expect(qfSpy).toHaveBeenCalledWith([
|
||||
{ rule_type: FILTER_HAS_CORRESPONDENT_ANY, value: object.id.toString() },
|
||||
])
|
||||
|
||||
component.primaryAction(DataType.DocumentType, object)
|
||||
expect(qfSpy).toHaveBeenCalledWith([
|
||||
{ rule_type: FILTER_HAS_DOCUMENT_TYPE_ANY, value: object.id.toString() },
|
||||
])
|
||||
|
||||
component.primaryAction(DataType.StoragePath, object)
|
||||
expect(qfSpy).toHaveBeenCalledWith([
|
||||
{ rule_type: FILTER_HAS_STORAGE_PATH_ANY, value: object.id.toString() },
|
||||
])
|
||||
|
||||
component.primaryAction(DataType.Tag, object)
|
||||
expect(qfSpy).toHaveBeenCalledWith([
|
||||
{ rule_type: FILTER_HAS_TAGS_ANY, value: object.id.toString() },
|
||||
])
|
||||
|
||||
component.primaryAction(DataType.User, object)
|
||||
expect(modalSpy).toHaveBeenCalledWith(UserEditDialogComponent, {
|
||||
size: 'lg',
|
||||
})
|
||||
|
||||
component.primaryAction(DataType.Group, object)
|
||||
expect(modalSpy).toHaveBeenCalledWith(GroupEditDialogComponent, {
|
||||
size: 'lg',
|
||||
})
|
||||
|
||||
component.primaryAction(DataType.MailAccount, object)
|
||||
expect(modalSpy).toHaveBeenCalledWith(MailAccountEditDialogComponent, {
|
||||
size: 'xl',
|
||||
})
|
||||
|
||||
component.primaryAction(DataType.MailRule, object)
|
||||
expect(modalSpy).toHaveBeenCalledWith(MailRuleEditDialogComponent, {
|
||||
size: 'xl',
|
||||
})
|
||||
|
||||
component.primaryAction(DataType.CustomField, object)
|
||||
expect(modalSpy).toHaveBeenCalledWith(CustomFieldEditDialogComponent, {
|
||||
size: 'md',
|
||||
})
|
||||
|
||||
component.primaryAction(DataType.Workflow, object)
|
||||
expect(modalSpy).toHaveBeenCalledWith(WorkflowEditDialogComponent, {
|
||||
size: 'xl',
|
||||
})
|
||||
|
||||
const editDialog = modal.componentInstance as CustomFieldEditDialogComponent
|
||||
const toastErrorSpy = jest.spyOn(toastService, 'showError')
|
||||
const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
|
||||
|
||||
// fail first
|
||||
editDialog.failed.emit({ error: 'error creating item' })
|
||||
expect(toastErrorSpy).toHaveBeenCalled()
|
||||
|
||||
// succeed
|
||||
editDialog.succeeded.emit(true)
|
||||
expect(toastInfoSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should support secondary action', () => {
|
||||
const doc = searchResults.documents[0]
|
||||
const openSpy = jest.spyOn(window, 'open')
|
||||
component.secondaryAction('document', doc)
|
||||
expect(openSpy).toHaveBeenCalledWith(documentService.getDownloadUrl(doc.id))
|
||||
|
||||
const correspondent = searchResults.correspondents[0]
|
||||
const modalSpy = jest.spyOn(modalService, 'open')
|
||||
|
||||
let modal: NgbModalRef
|
||||
modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
|
||||
|
||||
component.secondaryAction(DataType.Correspondent, correspondent)
|
||||
expect(modalSpy).toHaveBeenCalledWith(CorrespondentEditDialogComponent, {
|
||||
size: 'md',
|
||||
})
|
||||
|
||||
component.secondaryAction(
|
||||
DataType.DocumentType,
|
||||
searchResults.document_types[0]
|
||||
)
|
||||
expect(modalSpy).toHaveBeenCalledWith(CorrespondentEditDialogComponent, {
|
||||
size: 'md',
|
||||
})
|
||||
|
||||
component.secondaryAction(
|
||||
DataType.StoragePath,
|
||||
searchResults.storage_paths[0]
|
||||
)
|
||||
expect(modalSpy).toHaveBeenCalledWith(CorrespondentEditDialogComponent, {
|
||||
size: 'md',
|
||||
})
|
||||
|
||||
component.secondaryAction(DataType.Tag, searchResults.tags[0])
|
||||
expect(modalSpy).toHaveBeenCalledWith(CorrespondentEditDialogComponent, {
|
||||
size: 'md',
|
||||
})
|
||||
|
||||
const editDialog = modal.componentInstance as CustomFieldEditDialogComponent
|
||||
const toastErrorSpy = jest.spyOn(toastService, 'showError')
|
||||
const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
|
||||
|
||||
// fail first
|
||||
editDialog.failed.emit({ error: 'error creating item' })
|
||||
expect(toastErrorSpy).toHaveBeenCalled()
|
||||
|
||||
// succeed
|
||||
editDialog.succeeded.emit(true)
|
||||
expect(toastInfoSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should support reset', () => {
|
||||
const debounce = jest.spyOn(component.queryDebounce, 'next')
|
||||
const closeSpy = jest.spyOn(component.resultsDropdown, 'close')
|
||||
component['reset'](true)
|
||||
expect(debounce).toHaveBeenCalledWith(null)
|
||||
expect(component.searchResults).toBeNull()
|
||||
expect(component['currentItemIndex']).toBe(-1)
|
||||
expect(closeSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should support focus current item', () => {
|
||||
component.searchResults = searchResults as any
|
||||
fixture.detectChanges()
|
||||
const focusSpy = jest.spyOn(
|
||||
component.primaryButtons.get(0).nativeElement,
|
||||
'focus'
|
||||
)
|
||||
component['currentItemIndex'] = 0
|
||||
component['setCurrentItem']()
|
||||
expect(focusSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should reset on dropdown close', () => {
|
||||
const resetSpy = jest.spyOn(GlobalSearchComponent.prototype as any, 'reset')
|
||||
component.onDropdownOpenChange(false)
|
||||
expect(resetSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should focus button on dropdown item hover', () => {
|
||||
component.searchResults = searchResults as any
|
||||
fixture.detectChanges()
|
||||
const item: ElementRef = component.resultItems.first
|
||||
const focusSpy = jest.spyOn(
|
||||
component.primaryButtons.first.nativeElement,
|
||||
'focus'
|
||||
)
|
||||
component.onItemHover({ currentTarget: item.nativeElement } as any)
|
||||
expect(component['currentItemIndex']).toBe(0)
|
||||
expect(focusSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should focus on button hover', () => {
|
||||
const event = { currentTarget: { focus: jest.fn() } }
|
||||
const focusSpy = jest.spyOn(event.currentTarget, 'focus')
|
||||
component.onButtonHover(event as any)
|
||||
expect(focusSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should support explicit advanced search', () => {
|
||||
const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
|
||||
component.query = 'test'
|
||||
component.runAdvanedSearch()
|
||||
expect(qfSpy).toHaveBeenCalledWith([
|
||||
{ rule_type: FILTER_FULLTEXT_QUERY, value: 'test' },
|
||||
])
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,362 @@
|
||||
import {
|
||||
Component,
|
||||
ViewChild,
|
||||
ElementRef,
|
||||
ViewChildren,
|
||||
QueryList,
|
||||
OnInit,
|
||||
} from '@angular/core'
|
||||
import { Router } from '@angular/router'
|
||||
import { NgbDropdown, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
|
||||
import { Subject, debounceTime, distinctUntilChanged, filter, map } from 'rxjs'
|
||||
import {
|
||||
FILTER_FULLTEXT_QUERY,
|
||||
FILTER_HAS_CORRESPONDENT_ANY,
|
||||
FILTER_HAS_DOCUMENT_TYPE_ANY,
|
||||
FILTER_HAS_STORAGE_PATH_ANY,
|
||||
FILTER_HAS_TAGS_ANY,
|
||||
} from 'src/app/data/filter-rule-type'
|
||||
import { DataType } from 'src/app/data/datatype'
|
||||
import { ObjectWithId } from 'src/app/data/object-with-id'
|
||||
import { DocumentListViewService } from 'src/app/services/document-list-view.service'
|
||||
import {
|
||||
PermissionsService,
|
||||
PermissionAction,
|
||||
} from 'src/app/services/permissions.service'
|
||||
import { DocumentService } from 'src/app/services/rest/document.service'
|
||||
import {
|
||||
GlobalSearchResult,
|
||||
SearchService,
|
||||
} from 'src/app/services/rest/search.service'
|
||||
import { ToastService } from 'src/app/services/toast.service'
|
||||
import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
|
||||
import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
|
||||
import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
|
||||
import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
|
||||
import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
|
||||
import { MailAccountEditDialogComponent } from '../../common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
|
||||
import { MailRuleEditDialogComponent } from '../../common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
|
||||
import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
|
||||
import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
|
||||
import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
|
||||
import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
|
||||
import { HotKeyService } from 'src/app/services/hot-key.service'
|
||||
|
||||
@Component({
|
||||
selector: 'pngx-global-search',
|
||||
templateUrl: './global-search.component.html',
|
||||
styleUrl: './global-search.component.scss',
|
||||
})
|
||||
export class GlobalSearchComponent implements OnInit {
|
||||
public DataType = DataType
|
||||
public query: string
|
||||
public queryDebounce: Subject<string>
|
||||
public searchResults: GlobalSearchResult
|
||||
private currentItemIndex: number = -1
|
||||
private domIndex: number = -1
|
||||
public loading: boolean = false
|
||||
|
||||
@ViewChild('searchInput') searchInput: ElementRef
|
||||
@ViewChild('resultsDropdown') resultsDropdown: NgbDropdown
|
||||
@ViewChildren('resultItem') resultItems: QueryList<ElementRef>
|
||||
@ViewChildren('primaryButton') primaryButtons: QueryList<ElementRef>
|
||||
@ViewChildren('secondaryButton') secondaryButtons: QueryList<ElementRef>
|
||||
|
||||
constructor(
|
||||
public searchService: SearchService,
|
||||
private router: Router,
|
||||
private modalService: NgbModal,
|
||||
private documentService: DocumentService,
|
||||
private documentListViewService: DocumentListViewService,
|
||||
private permissionsService: PermissionsService,
|
||||
private toastService: ToastService,
|
||||
private hotkeyService: HotKeyService
|
||||
) {
|
||||
this.queryDebounce = new Subject<string>()
|
||||
|
||||
this.queryDebounce
|
||||
.pipe(
|
||||
debounceTime(400),
|
||||
map((query) => query?.trim()),
|
||||
filter((query) => !query?.length || query?.length > 2),
|
||||
distinctUntilChanged()
|
||||
)
|
||||
.subscribe((text) => {
|
||||
this.query = text
|
||||
if (text) this.search(text)
|
||||
})
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.hotkeyService
|
||||
.addShortcut({ keys: '/', description: $localize`Global search` })
|
||||
.subscribe(() => {
|
||||
this.searchInput.nativeElement.focus()
|
||||
})
|
||||
}
|
||||
|
||||
private search(query: string) {
|
||||
this.loading = true
|
||||
this.searchService.globalSearch(query).subscribe((results) => {
|
||||
this.searchResults = results
|
||||
this.loading = false
|
||||
this.resultsDropdown.open()
|
||||
})
|
||||
}
|
||||
|
||||
public primaryAction(type: string, object: ObjectWithId) {
|
||||
this.reset(true)
|
||||
let filterRuleType: number
|
||||
let editDialogComponent: any
|
||||
let size: string = 'md'
|
||||
switch (type) {
|
||||
case DataType.Document:
|
||||
this.router.navigate(['/documents', object.id])
|
||||
return
|
||||
case DataType.SavedView:
|
||||
this.router.navigate(['/view', object.id])
|
||||
return
|
||||
case DataType.Correspondent:
|
||||
filterRuleType = FILTER_HAS_CORRESPONDENT_ANY
|
||||
break
|
||||
case DataType.DocumentType:
|
||||
filterRuleType = FILTER_HAS_DOCUMENT_TYPE_ANY
|
||||
break
|
||||
case DataType.StoragePath:
|
||||
filterRuleType = FILTER_HAS_STORAGE_PATH_ANY
|
||||
break
|
||||
case DataType.Tag:
|
||||
filterRuleType = FILTER_HAS_TAGS_ANY
|
||||
break
|
||||
case DataType.User:
|
||||
editDialogComponent = UserEditDialogComponent
|
||||
size = 'lg'
|
||||
break
|
||||
case DataType.Group:
|
||||
editDialogComponent = GroupEditDialogComponent
|
||||
size = 'lg'
|
||||
break
|
||||
case DataType.MailAccount:
|
||||
editDialogComponent = MailAccountEditDialogComponent
|
||||
size = 'xl'
|
||||
break
|
||||
case DataType.MailRule:
|
||||
editDialogComponent = MailRuleEditDialogComponent
|
||||
size = 'xl'
|
||||
break
|
||||
case DataType.CustomField:
|
||||
editDialogComponent = CustomFieldEditDialogComponent
|
||||
break
|
||||
case DataType.Workflow:
|
||||
editDialogComponent = WorkflowEditDialogComponent
|
||||
size = 'xl'
|
||||
break
|
||||
}
|
||||
|
||||
if (filterRuleType) {
|
||||
this.documentListViewService.quickFilter([
|
||||
{ rule_type: filterRuleType, value: object.id.toString() },
|
||||
])
|
||||
} else if (editDialogComponent) {
|
||||
const modalRef: NgbModalRef = this.modalService.open(
|
||||
editDialogComponent,
|
||||
{ size }
|
||||
)
|
||||
modalRef.componentInstance.dialogMode = EditDialogMode.EDIT
|
||||
modalRef.componentInstance.object = object
|
||||
modalRef.componentInstance.succeeded.subscribe(() => {
|
||||
this.toastService.showInfo($localize`Successfully updated object.`)
|
||||
})
|
||||
modalRef.componentInstance.failed.subscribe((e) => {
|
||||
this.toastService.showError($localize`Error occurred saving object.`, e)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
public secondaryAction(type: string, object: ObjectWithId) {
|
||||
this.reset(true)
|
||||
let editDialogComponent: any
|
||||
let size: string = 'md'
|
||||
switch (type) {
|
||||
case DataType.Document:
|
||||
window.open(this.documentService.getDownloadUrl(object.id))
|
||||
break
|
||||
case DataType.Correspondent:
|
||||
editDialogComponent = CorrespondentEditDialogComponent
|
||||
break
|
||||
case DataType.DocumentType:
|
||||
editDialogComponent = DocumentTypeEditDialogComponent
|
||||
break
|
||||
case DataType.StoragePath:
|
||||
editDialogComponent = StoragePathEditDialogComponent
|
||||
break
|
||||
case DataType.Tag:
|
||||
editDialogComponent = TagEditDialogComponent
|
||||
break
|
||||
}
|
||||
|
||||
if (editDialogComponent) {
|
||||
const modalRef: NgbModalRef = this.modalService.open(
|
||||
editDialogComponent,
|
||||
{ size }
|
||||
)
|
||||
modalRef.componentInstance.dialogMode = EditDialogMode.EDIT
|
||||
modalRef.componentInstance.object = object
|
||||
modalRef.componentInstance.succeeded.subscribe(() => {
|
||||
this.toastService.showInfo($localize`Successfully updated object.`)
|
||||
})
|
||||
modalRef.componentInstance.failed.subscribe((e) => {
|
||||
this.toastService.showError($localize`Error occurred saving object.`, e)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
private reset(close: boolean = false) {
|
||||
this.queryDebounce.next(null)
|
||||
this.searchResults = null
|
||||
this.currentItemIndex = -1
|
||||
if (close) {
|
||||
this.resultsDropdown.close()
|
||||
}
|
||||
}
|
||||
|
||||
private setCurrentItem() {
|
||||
// QueryLists do not always reflect the current DOM order, so we need to find the actual element
|
||||
// Yes, using some vanilla JS
|
||||
const result: HTMLElement = this.resultItems.first.nativeElement.parentNode
|
||||
.querySelectorAll('.dropdown-item')
|
||||
.item(this.currentItemIndex)
|
||||
this.domIndex = this.resultItems
|
||||
.toArray()
|
||||
.indexOf(this.resultItems.find((item) => item.nativeElement === result))
|
||||
const item: ElementRef = this.primaryButtons.get(this.domIndex)
|
||||
item.nativeElement.focus()
|
||||
}
|
||||
|
||||
onItemHover(event: MouseEvent) {
|
||||
const item: ElementRef = this.resultItems
|
||||
.toArray()
|
||||
.find((item) => item.nativeElement === event.currentTarget)
|
||||
this.currentItemIndex = this.resultItems.toArray().indexOf(item)
|
||||
this.setCurrentItem()
|
||||
}
|
||||
|
||||
onButtonHover(event: MouseEvent) {
|
||||
;(event.currentTarget as HTMLElement).focus()
|
||||
}
|
||||
|
||||
public searchInputKeyDown(event: KeyboardEvent) {
|
||||
if (
|
||||
event.key === 'ArrowDown' &&
|
||||
this.searchResults?.total &&
|
||||
this.resultsDropdown.isOpen()
|
||||
) {
|
||||
event.preventDefault()
|
||||
this.currentItemIndex = 0
|
||||
this.setCurrentItem()
|
||||
} else if (
|
||||
event.key === 'ArrowUp' &&
|
||||
this.searchResults?.total &&
|
||||
this.resultsDropdown.isOpen()
|
||||
) {
|
||||
event.preventDefault()
|
||||
this.currentItemIndex = this.searchResults.total - 1
|
||||
this.setCurrentItem()
|
||||
} else if (
|
||||
event.key === 'Enter' &&
|
||||
this.searchResults?.total === 1 &&
|
||||
this.resultsDropdown.isOpen()
|
||||
) {
|
||||
this.primaryButtons.first.nativeElement.click()
|
||||
this.searchInput.nativeElement.blur()
|
||||
} else if (
|
||||
event.key === 'Enter' &&
|
||||
this.searchResults?.total &&
|
||||
!this.resultsDropdown.isOpen()
|
||||
) {
|
||||
this.resultsDropdown.open()
|
||||
} else if (event.key === 'Escape' && !this.resultsDropdown.isOpen()) {
|
||||
if (this.query?.length) {
|
||||
this.reset(true)
|
||||
} else {
|
||||
this.searchInput.nativeElement.blur()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dropdownKeyDown(event: KeyboardEvent) {
|
||||
if (
|
||||
this.searchResults?.total &&
|
||||
this.resultsDropdown.isOpen() &&
|
||||
document.activeElement !== this.searchInput.nativeElement
|
||||
) {
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault()
|
||||
if (this.currentItemIndex < this.searchResults.total - 1) {
|
||||
this.currentItemIndex++
|
||||
this.setCurrentItem()
|
||||
} else {
|
||||
this.searchInput.nativeElement.focus()
|
||||
this.currentItemIndex = -1
|
||||
}
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
event.preventDefault()
|
||||
if (this.currentItemIndex > 0) {
|
||||
this.currentItemIndex--
|
||||
this.setCurrentItem()
|
||||
} else {
|
||||
this.searchInput.nativeElement.focus()
|
||||
this.currentItemIndex = -1
|
||||
}
|
||||
} else if (event.key === 'ArrowRight') {
|
||||
event.preventDefault()
|
||||
this.secondaryButtons.get(this.domIndex)?.nativeElement.focus()
|
||||
} else if (event.key === 'ArrowLeft') {
|
||||
event.preventDefault()
|
||||
this.primaryButtons.get(this.domIndex).nativeElement.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public onDropdownOpenChange(open: boolean) {
|
||||
if (!open) {
|
||||
this.reset()
|
||||
}
|
||||
}
|
||||
|
||||
public disablePrimaryButton(type: DataType, object: ObjectWithId): boolean {
|
||||
if (
|
||||
[
|
||||
DataType.Workflow,
|
||||
DataType.CustomField,
|
||||
DataType.Group,
|
||||
DataType.User,
|
||||
].includes(type)
|
||||
) {
|
||||
return !this.permissionsService.currentUserHasObjectPermissions(
|
||||
PermissionAction.Change,
|
||||
object
|
||||
)
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
public disableSecondaryButton(type: DataType, object: ObjectWithId): boolean {
|
||||
if (DataType.Document === type) {
|
||||
return false
|
||||
}
|
||||
|
||||
return !this.permissionsService.currentUserHasObjectPermissions(
|
||||
PermissionAction.Change,
|
||||
object
|
||||
)
|
||||
}
|
||||
|
||||
runAdvanedSearch() {
|
||||
this.documentListViewService.quickFilter([
|
||||
{ rule_type: FILTER_FULLTEXT_QUERY, value: this.query },
|
||||
])
|
||||
this.reset(true)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user