lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add link for advanced search if helpful

Browse Source
This commit is contained in:
shamoon 2024-04-28 10:11:08 -07:00
parent b9dd89e222
commit 9972e26de8
6 changed files with 345 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

432
src-ui/messages.xlf
View File

File diff suppressed because it is too large Load Diff

25
src-ui/src/app/components/app-frame/global-search/global-search.component.html
View File

@ -2,16 +2,25 @@
<div ngbDropdown #resultsDropdown="ngbDropdown" (openChange)="onDropdownOpenChange">
<form class="form-inline position-relative">
<i-bs width="1em" height="1em" name="search"></i-bs>
<input #searchInput class="form-control form-control-sm" 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)" ngbDropdownAnchor>
<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 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">

43
src-ui/src/app/components/app-frame/global-search/global-search.component.scss
View File

@ -1,7 +1,7 @@
form {
position: relative;
> i-bs {
> i-bs[name="search"] {
position: absolute;
left: 0.6rem;
top: .35rem;
@ -14,7 +14,7 @@ form {
}
&:focus-within {
i-bs,
i-bs[name="search"],
.badge {
display: none !important;
}
@ -27,25 +27,34 @@ form {
.badge {
font-size: 0.8rem;
}
}
.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
&::placeholder {
color: rgba(255, 255, 255, 0.4);
.input-group .btn {
border-color: rgba(255, 255, 255, 0.2);
color: var(--pngx-primary-text-contrast);
}
&:focus {
background-color: rgba(0, 0, 0, 0.3);
color: var(--bs-light);
flex-grow: 1;
padding-left: 0.5rem;
.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;
}
}
}
* {

10
src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts
View File

@ -20,6 +20,7 @@ import { DocumentListViewService } from 'src/app/services/document-list-view.ser
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,
@ -440,4 +441,13 @@ describe('GlobalSearchComponent', () => {
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' },
])
})
})

10
src-ui/src/app/components/app-frame/global-search/global-search.component.ts
View File

@ -10,6 +10,7 @@ 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,
@ -62,7 +63,7 @@ export class GlobalSearchComponent implements OnInit {
@ViewChildren('secondaryButton') secondaryButtons: QueryList<ElementRef>
constructor(
private searchService: SearchService,
public searchService: SearchService,
private router: Router,
private modalService: NgbModal,
private documentService: DocumentService,
@ -351,4 +352,11 @@ export class GlobalSearchComponent implements OnInit {
object
)
}
runAdvanedSearch() {
this.documentListViewService.quickFilter([
{ rule_type: FILTER_FULLTEXT_QUERY, value: this.query },
])
this.reset(true)
}
}

8
src-ui/src/app/services/rest/search.service.ts
View File

@ -37,6 +37,8 @@ export interface GlobalSearchResult {
providedIn: 'root',
})
export class SearchService {
public readonly searchResultObjectLimit: number = 3 // documents/views.py GlobalSearchView > OBJECT_LIMIT
constructor(
private http: HttpClient,
private settingsService: SettingsService
@ -51,7 +53,7 @@ export class SearchService {
globalSearch(query: string): Observable<GlobalSearchResult> {
let params = new HttpParams().set('query', query)
if (this.settingsService.get(SETTINGS_KEYS.SEARCH_DB_ONLY)) {
if (this.searchDbOnly) {
params = params.set('db_only', true)
}
return this.http.get<GlobalSearchResult>(
@ -59,4 +61,8 @@ export class SearchService {
{ params }
)
}
public get searchDbOnly(): boolean {
return this.settingsService.get(SETTINGS_KEYS.SEARCH_DB_ONLY)
}
}