From fb5be981f95c0acd442255937469c1ce33b4177f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Thu, 26 Nov 2020 23:50:24 +0200 Subject: [PATCH 1/2] Search in project overview --- apps/red-ui/src/app/icons/icons.module.ts | 1 + .../dictionary-listing-screen.component.html | 2 +- .../file/pdf-viewer/pdf-viewer.component.ts | 2 +- .../project-overview-screen.component.html | 6 +++++ .../project-overview-screen.component.ts | 26 ++++++++++++++++--- apps/red-ui/src/assets/i18n/en.json | 1 + .../assets/icons/general/search-viewer.svg | 11 -------- .../src/assets/icons/general/search.svg | 7 +++++ apps/red-ui/src/assets/styles/red-input.scss | 13 ++++++++++ .../src/assets/styles/red-page-layout.scss | 13 ++++++++++ 10 files changed, 66 insertions(+), 16 deletions(-) delete mode 100644 apps/red-ui/src/assets/icons/general/search-viewer.svg create mode 100644 apps/red-ui/src/assets/icons/general/search.svg diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index 1519a8993..daec5a982 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -44,6 +44,7 @@ export class IconsModule { 'radio-selected', 'refresh', 'report', + 'search', 'secret', 'sort-asc', 'sort-desc', diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html index a46dd8726..5e66aedfa 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html @@ -24,7 +24,7 @@ - {{ 'dictionary-listing.table-header.title' | translate: { length: 0 } }} + {{ 'dictionary-listing.table-header.title' | translate: { length: dictionaries.length } }} diff --git a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts index ec70f31f3..351f7c062 100644 --- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts @@ -189,7 +189,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { private _configureTextPopup() { this.instance.textPopup.add({ type: 'actionButton', - img: '/assets/icons/general/search-viewer.svg', + img: '/assets/icons/general/search.svg', title: this._translateService.instant('pdf-viewer.text-popup.actions.search'), onClick: () => { const text = this.instance.docViewer.getSelectedText(); diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index 50637a647..48598d542 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -22,6 +22,12 @@ [filters]="needsWorkFilters" [icon]="'red:needs-work'" > +
+
+ + +
+
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index 75b049a0e..e259d489c 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -23,6 +23,8 @@ import { Subscription, timer } from 'rxjs'; import { tap } from 'rxjs/operators'; import { RedactionFilterSorter } from '../../common/sorters/redaction-filter-sorter'; import { StatusSorter } from '../../common/sorters/status-sorter'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { debounce } from '../../utils/debounce'; @Component({ selector: 'redaction-project-overview-screen', @@ -35,6 +37,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { public peopleFilters: FilterModel[]; public needsWorkFilters: FilterModel[]; public collapsedDetails = false; + public searchForm: FormGroup; displayedFiles: FileStatusWrapper[] = []; @@ -61,8 +64,15 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { private readonly _router: Router, private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _translateService: TranslateService, - private readonly _fileDropOverlayService: FileDropOverlayService + private readonly _fileDropOverlayService: FileDropOverlayService, + private readonly _formBuilder: FormBuilder ) { + this.searchForm = this._formBuilder.group({ + query: [''] + }); + + this.searchForm.valueChanges.subscribe((value) => this._executeSearch(value)); + this._activatedRoute.params.subscribe((params) => { this.appStateService.activateProject(params.projectId); }); @@ -89,6 +99,12 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { this.filesAutoUpdateTimer.unsubscribe(); } + @debounce(200) + private _executeSearch(value: { query: string }) { + this.displayedFiles = this._filteredFiles.filter((file) => file.filename.toLowerCase().includes(value.query.toLowerCase())); + this.selectedFileIds = this.displayedFiles.map((d) => d.fileId).filter((x) => this.selectedFileIds.includes(x)); + } + get displayReanalyseBtn() { return !!( this.permissionsService.isManagerAndOwner() && @@ -263,7 +279,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { : []; } - private _filterFiles() { + private get _filteredFiles(): FileStatusWrapper[] { const filters = [ { values: this.statusFilters, checker: keyChecker('status') }, { values: this.peopleFilters, checker: keyChecker('currentReviewer') }, @@ -274,7 +290,11 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { checkerArgs: this.permissionsService } ]; - this.displayedFiles = getFilteredEntities(this.appStateService.activeProject.files, filters); + return getFilteredEntities(this.appStateService.activeProject.files, filters); + } + + private _filterFiles() { + this.displayedFiles = this._filteredFiles.filter((file) => file.filename.toLowerCase().includes(this.searchForm.get('query').value.toLowerCase())); this.selectedFileIds = this.displayedFiles.map((d) => d.fileId).filter((x) => this.selectedFileIds.includes(x)); this.detailsContainerFilters = { needsWorkFilters: this.needsWorkFilters.map((f) => ({ ...f })), diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 60cd5cfcd..29807acad 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -146,6 +146,7 @@ "collapse": "Hide Details" }, "project-overview": { + "search": "Document name...", "header-actions": { "edit": "Edit", "delete": "Delete", diff --git a/apps/red-ui/src/assets/icons/general/search-viewer.svg b/apps/red-ui/src/assets/icons/general/search-viewer.svg deleted file mode 100644 index 9fdd792d5..000000000 --- a/apps/red-ui/src/assets/icons/general/search-viewer.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - diff --git a/apps/red-ui/src/assets/icons/general/search.svg b/apps/red-ui/src/assets/icons/general/search.svg new file mode 100644 index 000000000..f0fc5c809 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/search.svg @@ -0,0 +1,7 @@ + + + search + + + + diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss index 5424f52e4..52a79db9d 100644 --- a/apps/red-ui/src/assets/styles/red-input.scss +++ b/apps/red-ui/src/assets/styles/red-input.scss @@ -5,6 +5,7 @@ display: flex; flex-direction: column; margin-top: 13px; + position: relative; .mat-form-field-underline { display: none; @@ -20,6 +21,14 @@ margin-top: 0; } + .icon-right { + width: 14px; + height: 14px; + position: absolute; + top: 10px; + right: 10px; + } + input, textarea, mat-select { @@ -36,6 +45,10 @@ margin-top: 3px; min-height: 34px; + &.with-icon { + padding-right: 34px; + } + &:focus { border-color: $grey-1; } diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index 5adeaa5eb..de52c2284 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -29,9 +29,22 @@ body { gap: 2px; display: flex; align-items: center; + > div:first-child { margin-right: 6px; } + + form { + margin-left: 6px; + + .red-input-group { + width: 250px; + + input { + margin-top: 0; + } + } + } } .actions { From 14f828cbcae5839bcd5ee5de3b21f05bad88f9b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Fri, 27 Nov 2020 00:06:19 +0200 Subject: [PATCH 2/2] Project listing search --- .../project-listing-screen.component.html | 6 ++++ .../project-listing-screen.component.ts | 30 ++++++++++++++++--- apps/red-ui/src/assets/i18n/en.json | 1 + 3 files changed, 33 insertions(+), 4 deletions(-) diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html index ee2c62b7f..eca81039d 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html @@ -21,6 +21,12 @@ [filters]="needsWorkFilters" [icon]="'red:needs-work'" > +
+
+ + +
+
this._executeSearch(value)); + } public ngOnInit(): void { this.appStateService.reset(); @@ -237,19 +248,30 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy { this._filterProjects(); } - private _filterProjects() { + private get _filteredProjects(): ProjectWrapper[] { const filters = [ { values: this.statusFilters, checker: projectStatusChecker }, { values: this.peopleFilters, checker: projectMemberChecker }, { values: this.needsWorkFilters, checker: annotationFilterChecker, matchAll: true, checkerArgs: this.permissionsService } ]; + return getFilteredEntities(this.appStateService.allProjects, filters); + } + + private _filterProjects() { this.detailsContainerFilters = { statusFilters: this.statusFilters.map((f) => ({ ...f })) }; - this.displayedProjects = getFilteredEntities(this.appStateService.allProjects, filters); + this.displayedProjects = this._filteredProjects.filter((project) => + project.name.toLowerCase().includes(this.searchForm.get('query').value.toLowerCase()) + ); this._changeDetectorRef.detectChanges(); } + @debounce(200) + private _executeSearch(value: { query: string }) { + this.displayedProjects = this._filteredProjects.filter((project) => project.name.toLowerCase().includes(value.query.toLowerCase())); + } + openEditProjectDialog($event: MouseEvent, project: Project) { this._dialogService.openEditProjectDialog($event, project, () => { this._calculateData(); diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 29807acad..6b769f02e 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -69,6 +69,7 @@ "action": "Download Redaction Report" }, "project-listing": { + "search": "Project name...", "reanalyse": { "action": "Reanalyse entire project" },