From 5f8f11108f9130ebec1f7de617b81275fcf7091d Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Fri, 23 Jul 2021 03:09:30 +0300 Subject: [PATCH] working entire platform search --- apps/red-ui/src/app/app.component.html | 4 +- apps/red-ui/src/app/app.module.ts | 11 +- .../base-screen/base-screen.component.html | 70 ++------ .../base-screen/base-screen.component.ts | 53 +++++- .../spotlight-search-action.ts | 6 + .../spotlight-search-dialog-data.ts | 6 + .../spotlight-search.component.html | 43 +++++ .../spotlight-search.component.scss | 51 ++++++ .../spotlight-search.component.ts | 68 ++++++++ .../src/app/modules/auth/red-role.guard.ts | 59 ++++--- .../file-actions/file-actions.component.scss | 4 - .../scroll-button.component.html | 12 +- .../scroll-button/scroll-button.component.ts | 24 +-- .../dossier/dossiers-routing.module.ts | 24 ++- .../app/modules/dossier/dossiers.module.ts | 3 +- .../search-screen.component.html | 98 +++++++++++ .../search-screen.component.scss | 38 +++++ .../search-screen/search-screen.component.ts | 155 ++++++++++++++++++ .../src/app/modules/icons/icons.module.ts | 6 +- .../shared/base/base-listing.component.ts | 2 +- .../input-with-action.component.html | 12 +- .../input-with-action.component.ts | 2 +- .../page-header/page-header.component.html | 3 +- .../page-header/page-header.component.ts | 9 +- .../shared/directives/sync-width.directive.ts | 4 +- .../shared/services/screen-state.service.ts | 2 +- .../modules/shared/services/search.service.ts | 16 +- .../src/app/services/loading.service.ts | 2 +- .../app/services/router-history.service.ts | 2 +- .../red-ui/src/app/state/app-state.service.ts | 11 +- apps/red-ui/src/assets/i18n/en.json | 19 +++ .../red-ui/src/assets/icons/general/enter.svg | 15 ++ .../src/assets/styles/red-page-layout.scss | 8 + libs/red-ui-http/src/lib/model/models.ts | 1 + 34 files changed, 688 insertions(+), 155 deletions(-) create mode 100644 apps/red-ui/src/app/components/spotlight-search/spotlight-search-action.ts create mode 100644 apps/red-ui/src/app/components/spotlight-search/spotlight-search-dialog-data.ts create mode 100644 apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html create mode 100644 apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss create mode 100644 apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts create mode 100644 apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html create mode 100644 apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss create mode 100644 apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts create mode 100644 apps/red-ui/src/assets/icons/general/enter.svg diff --git a/apps/red-ui/src/app/app.component.html b/apps/red-ui/src/app/app.component.html index 3ac47a12a..dbdf8372d 100644 --- a/apps/red-ui/src/app/app.component.html +++ b/apps/red-ui/src/app/app.component.html @@ -1,4 +1,2 @@ - + diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index e6788e007..b61e28269 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -32,6 +32,7 @@ import { GlobalErrorHandler } from '@utils/global-error-handler.service'; import { REDMissingTranslationHandler } from '@utils/missing-translations-handler'; import { configurationInitializer } from '@app-config/configuration.initializer'; import { AppConfigService } from '@app-config/app-config.service'; +import { SpotlightSearchComponent } from '@components/spotlight-search/spotlight-search.component'; export function httpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -49,7 +50,15 @@ function cleanupBaseUrl(baseUrl: string) { const screens = [BaseScreenComponent, DownloadsListScreenComponent, UserProfileScreenComponent]; -const components = [AppComponent, LogoComponent, AuthErrorComponent, ToastComponent, NotificationsComponent, ...screens]; +const components = [ + AppComponent, + LogoComponent, + AuthErrorComponent, + ToastComponent, + NotificationsComponent, + SpotlightSearchComponent, + ...screens +]; @NgModule({ declarations: [...components], diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html index a4e3893fd..8a5dbedc2 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html @@ -6,11 +6,7 @@ - + -
+
- - + + @@ -90,26 +66,21 @@
{{ titleService.getTitle() }}
- + - + + + - @@ -124,10 +95,5 @@
-
- +
diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts index bb3359453..1c25f91f1 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts @@ -7,6 +7,10 @@ import { Router } from '@angular/router'; import { Title } from '@angular/platform-browser'; import { FileDownloadService } from '@upload-download/services/file-download.service'; import { TranslateService } from '@ngx-translate/core'; +import { MatDialog } from '@angular/material/dialog'; +import { SpotlightSearchComponent } from '@components/spotlight-search/spotlight-search.component'; +import { SpotlightSearchAction } from '@components/spotlight-search/spotlight-search-action'; +import { SpotlightSearchDialogData } from '@components/spotlight-search/spotlight-search-dialog-data'; interface MenuItem { name: string; @@ -44,6 +48,8 @@ export class BaseScreenComponent { } ]; + showSearch = false; + constructor( readonly appStateService: AppStateService, readonly permissionsService: PermissionsService, @@ -52,10 +58,11 @@ export class BaseScreenComponent { readonly fileDownloadService: FileDownloadService, private readonly _router: Router, private readonly _userService: UserService, - private readonly _translateService: TranslateService + private readonly _translateService: TranslateService, + private readonly _dialog: MatDialog ) { _router.events.subscribe(() => { - this._dossiersView = _router.url.indexOf('/main/dossiers') === 0; + this._dossiersView = _router.url.includes('/main/dossiers') && !this.isSearchScreen; }); } @@ -65,6 +72,10 @@ export class BaseScreenComponent { return this._dossiersView; } + get isSearchScreen() { + return this._router.url.includes('/search'); + } + get user() { return this._userService.user; } @@ -77,6 +88,44 @@ export class BaseScreenComponent { return this._translateService.langs; } + openSpotlightSearch() { + const spotlightSearchActions: SpotlightSearchAction[] = [ + { + text: this._translateService.instant('search.this-dossier'), + icon: 'red:enter', + hide: !this.appStateService.activeDossier, + action: query => this._searchThisDossier(query) + }, + { + text: this._translateService.instant('search.entire-platform'), + icon: 'red:enter', + action: query => this._searchEntirePlatform(query) + } + ]; + + this._dialog.open(SpotlightSearchComponent, { + data: { + actionsConfig: spotlightSearchActions, + placeholder: this._translateService.instant('search.placeholder') + } as SpotlightSearchDialogData + }); + } + + private _searchThisDossier(query: string) { + this._router + .navigate(['main/dossiers/search'], { + queryParams: { + query: query, + dossierId: this.appStateService.activeDossier.dossierId + } + }) + .then(); + } + + private _searchEntirePlatform(query: string) { + this._router.navigate(['main/dossiers/search'], { queryParams: { query: query } }).then(); + } + logout() { this._userService.logout(); } diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search-action.ts b/apps/red-ui/src/app/components/spotlight-search/spotlight-search-action.ts new file mode 100644 index 000000000..76601b616 --- /dev/null +++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search-action.ts @@ -0,0 +1,6 @@ +export interface SpotlightSearchAction { + text: string; + action: (query: string) => void; + icon?: string; + hide?: boolean; +} diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search-dialog-data.ts b/apps/red-ui/src/app/components/spotlight-search/spotlight-search-dialog-data.ts new file mode 100644 index 000000000..cfbeca85c --- /dev/null +++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search-dialog-data.ts @@ -0,0 +1,6 @@ +import { SpotlightSearchAction } from './spotlight-search-action'; + +export interface SpotlightSearchDialogData { + actionsConfig: SpotlightSearchAction[]; + placeholder: string; +} diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html new file mode 100644 index 000000000..065a072ea --- /dev/null +++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html @@ -0,0 +1,43 @@ +
+
+
+ + + + + +
+ +
+ + + + + + +
+
diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss new file mode 100644 index 000000000..d25232d1a --- /dev/null +++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss @@ -0,0 +1,51 @@ +@import 'apps/red-ui/src/assets/styles/red-variables'; + +.spotlight-wrapper { + overflow: hidden; + width: 750px; + margin: auto; + position: absolute; + top: 15%; + left: 0; + right: 0; + border-radius: 10px; + box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3); +} + +.spotlight-row { + display: block; + width: 750px; + height: 60px; + margin: auto; + text-align: left; + font-size: 16px; + font-weight: 500; + border: none; + outline: none; + color: $grey-1; + padding: 0 24px; + background-color: $white; +} + +.focus:focus { + background-color: $grey-2; +} + +.search { + background-color: $white; + align-items: center; +} + +.divider { + height: 1px; + background-color: rgba(226, 228, 233, 0.9); +} + +input { + width: 668px !important; +} + +mat-icon { + width: 14px; + height: 14px; +} diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts new file mode 100644 index 000000000..67cb666aa --- /dev/null +++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts @@ -0,0 +1,68 @@ +import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Inject, QueryList, ViewChildren } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; +import { debounceTime, map, startWith, tap } from 'rxjs/operators'; +import { debounce } from '@utils/debounce'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { SpotlightSearchDialogData } from '@components/spotlight-search/spotlight-search-dialog-data'; + +@Component({ + selector: 'redaction-spotlight-search', + templateUrl: './spotlight-search.component.html', + styleUrls: ['./spotlight-search.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SpotlightSearchComponent { + @ViewChildren('actions') + private readonly _actions: QueryList; + private _currentActionIdx = 0; + + formGroup = this._formBuilder.group({ query: [''] }); + query$ = this.formGroup.get('query').valueChanges.pipe(startWith('')); + showActions$ = this.query$.pipe( + debounceTime(300), + tap(value => this._restoreFocusOnAction(value === '')), + map(value => value !== '') + ); + + constructor( + private readonly _formBuilder: FormBuilder, + private readonly _dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) + readonly data: SpotlightSearchDialogData + ) {} + + close() { + this._dialogRef.close(); + } + + @HostListener('document:keyup', ['$event']) + handleKeyDown(event: KeyboardEvent) { + console.log(event); + if (event.code === 'ArrowDown' && this._actions) { + this._currentActionIdx++; + return this._restoreFocusOnAction(this._currentActionIdx === this._actions.length); + } + + if (event.code === 'ArrowUp' && this._actions) { + if (this._currentActionIdx === 0) this._currentActionIdx = this._actions.length - 1; + else this._currentActionIdx--; + return this._restoreFocusOnAction(); + } + + if (['Tab'].includes(event.code)) { + return; + } + + document.getElementById('query').focus(); + let query = this.formGroup.get('query').value as string; + if (event.code === 'Backspace') query = query.substring(0, query.length - 1); + else if (event.key.length === 1) query = query + event.key; + this.formGroup.patchValue({ query: query }); + } + + @debounce(50) + private _restoreFocusOnAction(resetToFirst = false) { + if (resetToFirst) this._currentActionIdx = 0; + this._actions.find((_, index) => index === this._currentActionIdx)?.nativeElement.focus(); + } +} diff --git a/apps/red-ui/src/app/modules/auth/red-role.guard.ts b/apps/red-ui/src/app/modules/auth/red-role.guard.ts index 5c9c0d5d5..fd0af5036 100644 --- a/apps/red-ui/src/app/modules/auth/red-role.guard.ts +++ b/apps/red-ui/src/app/modules/auth/red-role.guard.ts @@ -21,42 +21,39 @@ export class RedRoleGuard implements CanActivate { this._loadingService.stop(); obs.next(false); obs.complete(); - } else { - // we have at least 1 RED Role -> if it's not user he must be admin + return; + } + // we have at least 1 RED Role -> if it's not user he must be admin - if ( - this._userService.user.isUserAdmin && - !this._userService.user.isAdmin && - !( - state.url.startsWith('/main/admin/users') || - state.url.startsWith('/main/my-profile') - ) - ) { - this._router.navigate(['/main/admin/users']); - obs.next(false); - obs.complete(); - return; - } + if ( + this._userService.user.isUserAdmin && + !this._userService.user.isAdmin && + !(state.url.startsWith('/main/admin/users') || state.url.startsWith('/main/my-profile')) + ) { + this._router.navigate(['/main/admin/users']); + obs.next(false); + obs.complete(); + return; + } - if (!this._userService.isUser() && state.url.startsWith('/main/dossiers')) { - this._router.navigate(['/main/admin']); - obs.next(false); - obs.complete(); - return; - } - if (route.data.requiredRoles) { - if (this._userService.hasAnyRole(route.data.requiredRoles)) { - obs.next(true); - obs.complete(); - } else { - this._router.navigate(['/main/dossiers']); - obs.next(false); - obs.complete(); - } - } else { + if (!this._userService.isUser() && state.url.startsWith('/main/dossiers')) { + this._router.navigate(['/main/admin']); + obs.next(false); + obs.complete(); + return; + } + if (route.data.requiredRoles) { + if (this._userService.hasAnyRole(route.data.requiredRoles)) { obs.next(true); obs.complete(); + } else { + this._router.navigate(['/main/dossiers']); + obs.next(false); + obs.complete(); } + } else { + obs.next(true); + obs.complete(); } }); } diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss index f3d8e6d9e..d98d4d2d1 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss @@ -27,10 +27,6 @@ mat-slide-toggle { line-height: 33px; } -.mr-24 { - margin-right: 24px; -} - mat-slide-toggle { margin-left: 8px; margin-right: 5px; diff --git a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.html b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.html index a0319cacd..8c69dd7d9 100644 --- a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.html @@ -1,15 +1,7 @@ - - diff --git a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.ts b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.ts index ef1bf7051..6c253406f 100644 --- a/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/scroll-button/scroll-button.component.ts @@ -1,10 +1,12 @@ import { Component, HostListener, Input } from '@angular/core'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; -enum ButtonType { - TOP = 'top', - BOTTOM = 'bottom' -} +const ButtonTypes = { + top: 'top', + bottom: 'bottom' +} as const; + +type ButtonType = keyof typeof ButtonTypes; @Component({ selector: 'redaction-scroll-button', @@ -12,7 +14,7 @@ enum ButtonType { styleUrls: ['./scroll-button.component.scss'] }) export class ScrollButtonComponent { - buttonType = ButtonType; + buttonType = ButtonTypes; @Input() scrollViewport: CdkVirtualScrollViewport; @@ -20,9 +22,7 @@ export class ScrollButtonComponent { itemSize: number; scroll(type: ButtonType): void { - const viewportSize = - (this.scrollViewport?.getViewportSize() - this.itemSize) * - (type === ButtonType.TOP ? -1 : 1); + const viewportSize = (this.scrollViewport?.getViewportSize() - this.itemSize) * (type === ButtonTypes.top ? -1 : 1); const scrollOffset = this.scrollViewport?.measureScrollOffset('top'); this.scrollViewport?.scrollToOffset(scrollOffset + viewportSize, 'smooth'); } @@ -37,10 +37,10 @@ export class ScrollButtonComponent { @HostListener('document:keyup', ['$event']) spaceAndPageDownScroll(event: KeyboardEvent): void { - if (['Space', 'PageDown'].includes(event.code)) { - this.scroll(ButtonType.BOTTOM); - } else if (['PageUp'].includes(event.code)) { - this.scroll(ButtonType.TOP); + if (['Space', 'PageDown'].includes(event.code) && (event.target as any).tagName === 'BODY') { + this.scroll(ButtonTypes.bottom); + } else if (['PageUp'].includes(event.code) && (event.target as any).tagName === 'BODY') { + this.scroll(ButtonTypes.top); } } } diff --git a/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts b/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts index aec5ebc6c..b695f17eb 100644 --- a/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts +++ b/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts @@ -1,21 +1,21 @@ import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { RouterModule, Routes } from '@angular/router'; import { DossierListingScreenComponent } from './screens/dossier-listing-screen/dossier-listing-screen.component'; import { CompositeRouteGuard } from '@guards/composite-route.guard'; import { AuthGuard } from '../auth/auth.guard'; import { RedRoleGuard } from '../auth/red-role.guard'; import { AppStateGuard } from '@state/app-state.guard'; -import { DossierOverviewScreenComponent } from './screens/dossier-overview-screen/dossier-overview-screen.component'; +import { SearchScreenComponent } from './screens/search-screen/search-screen.component'; import { FilePreviewScreenComponent } from './screens/file-preview-screen/file-preview-screen.component'; +import { DossierOverviewScreenComponent } from './screens/dossier-overview-screen/dossier-overview-screen.component'; -const routes = [ +const routes: Routes = [ { - path: '', - component: DossierListingScreenComponent, + path: 'search', + component: SearchScreenComponent, canActivate: [CompositeRouteGuard], data: { - routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard], - reuse: true + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] } }, { @@ -35,6 +35,16 @@ const routes = [ routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard], reuse: true } + }, + { + path: '', + pathMatch: 'full', + component: DossierListingScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard], + reuse: true + } } ]; diff --git a/apps/red-ui/src/app/modules/dossier/dossiers.module.ts b/apps/red-ui/src/app/modules/dossier/dossiers.module.ts index dd9079db2..13f373519 100644 --- a/apps/red-ui/src/app/modules/dossier/dossiers.module.ts +++ b/apps/red-ui/src/app/modules/dossier/dossiers.module.ts @@ -49,8 +49,9 @@ import { RecategorizeImageDialogComponent } from './dialogs/recategorize-image-d import { EditDossierAttributesComponent } from './dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component'; import { DossiersService } from './services/dossiers.service'; import { DossierDetailsStatsComponent } from './components/dossier-details-stats/dossier-details-stats.component'; +import { SearchScreenComponent } from './screens/search-screen/search-screen.component'; -const screens = [DossierListingScreenComponent, DossierOverviewScreenComponent, FilePreviewScreenComponent]; +const screens = [DossierListingScreenComponent, DossierOverviewScreenComponent, FilePreviewScreenComponent, SearchScreenComponent]; const dialogs = [ AddDossierDialogComponent, diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html new file mode 100644 index 000000000..59d849feb --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html @@ -0,0 +1,98 @@ +
+ + +
+ +
+
+ + + + + +
+
+
+ + {{ item.fileName }} +
+ + +
+ +
+
+ +
+ + +
+ + {{ 'search-screen.missing' | translate }}: {{ term }}. {{ 'search-screen.must-contain' | translate }}: +  {{ term }} + +
+
+ +
+ +
+ +
+ {{ item.dossierName }} +
+ +
+
+ + {{ item.pages }} +
+
+ +
+
+ + + +
+
+
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss new file mode 100644 index 000000000..092360fde --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss @@ -0,0 +1,38 @@ +@import 'apps/red-ui/src/assets/styles/red-mixins'; +@import 'apps/red-ui/src/assets/styles/red-variables'; + +.content-container { + position: relative; + + cdk-virtual-scroll-viewport { + ::ng-deep.cdk-virtual-scroll-content-wrapper { + grid-template-columns: 2fr 1fr 1fr auto 11px; + + .table-item { + > div { + height: 85px; + padding: 0 24px; + } + + .status-container { + width: 160px; + padding-right: 13px; + } + + .highlights em { + background-color: #fffcc4; + } + + .highlights { + @include line-clamp(1); + } + } + } + + &.has-scrollbar:hover { + ::ng-deep.cdk-virtual-scroll-content-wrapper { + grid-template-columns: 2fr 1fr 1fr auto; + } + } + } +} diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts new file mode 100644 index 000000000..994acab65 --- /dev/null +++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts @@ -0,0 +1,155 @@ +import { Component, Injector, OnDestroy } from '@angular/core'; +import { BaseListingComponent } from '../../../shared/base/base-listing.component'; +import { SearchControllerService, SearchResult } from '@redaction/red-ui-http'; +import { BehaviorSubject, Observable } from 'rxjs'; +import { debounceTime, map, switchMap, tap } from 'rxjs/operators'; +import { ActivatedRoute, Router } from '@angular/router'; +import { MatchedDocument } from '@redaction/red-ui-http'; +import { TableColConfig } from '../../../shared/components/table-col-name/table-col-name.component'; +import { FilterService } from '../../../shared/services/filter.service'; +import { SearchService } from '../../../shared/services/search.service'; +import { ScreenStateService } from '../../../shared/services/screen-state.service'; +import { SortingService } from '../../../../services/sorting.service'; +import { AppStateService } from '../../../../state/app-state.service'; +import { FileStatusWrapper } from '../../../../models/file/file-status.wrapper'; +import { TranslateService } from '@ngx-translate/core'; +import { LoadingService } from '../../../../services/loading.service'; + +interface ListItem { + fileName: string; + matchedDocument: MatchedDocument; + unmatched: string[] | null; + highlights: { [key: string]: string[] }; + routerLink: string; + status: string; + dossierName: string; + pages: number; +} + +@Component({ + templateUrl: './search-screen.component.html', + styleUrls: ['./search-screen.component.scss'], + providers: [FilterService, SearchService, ScreenStateService, SortingService] +}) +export class SearchScreenComponent extends BaseListingComponent implements OnDestroy { + protected readonly _primaryKey = 'fileName'; + readonly itemSize = 85; + + readonly search$ = new BehaviorSubject(null); + readonly searchResults$: Observable = this.search$.asObservable().pipe( + switchMap(query => this._search(query)), + map(searchResult => this._toMatchedDocuments(searchResult)), + map(documents => this._toListItems(documents)), + tap(result => this.screenStateService.setEntities(result)), + tap(() => this._loadingService.stop()) + ); + + private _dossierId: string; + + readonly tableColConfigs: TableColConfig[] = [ + { + label: this._translateService.instant('search-screen.cols.document') + }, + { + label: this._translateService.instant('search-screen.cols.status') + }, + { + label: this._translateService.instant('search-screen.cols.dossier') + }, + { + label: this._translateService.instant('search-screen.cols.pages') + } + ]; + + constructor( + protected readonly _injector: Injector, + private readonly _searchControllerService: SearchControllerService, + private readonly _activatedRoute: ActivatedRoute, + private readonly _appStateService: AppStateService, + private readonly _translateService: TranslateService, + private readonly _loadingService: LoadingService, + private readonly _router: Router + ) { + super(_injector); + + this.addSubscription = _activatedRoute.queryParamMap + .pipe( + tap(() => this._loadingService.start()), + map(value => ({ query: value.get('query'), dossierId: value.get('dossierId') })), + tap(mappedValue => this._updateValues(mappedValue)) + ) + .subscribe(); + + this.addSubscription = this.searchService.searchForm + .get('query') + .valueChanges.pipe(debounceTime(300)) + .subscribe(value => this.updateNavigation({ query: value })); + } + + setInitialConfig() { + return; + } + + updateNavigation({ query, mustContain }: { readonly query: string; readonly mustContain?: string }) { + const newQuery = query?.replace(mustContain, `"${mustContain}"`); + const queryParams = newQuery && newQuery !== '' ? { query: newQuery } : {}; + const queryParamsHandling = this._dossierId ? 'merge' : ''; + this._router + .navigate([], { + queryParams, + queryParamsHandling + }) + .then(); + } + + private _search(query: string): Observable { + return this._searchControllerService.search({ + dossierId: this._dossierId, + queryString: query ?? '', + from: 0, + returnSections: true, + size: 100 + }); + } + + private _updateValues({ query, dossierId }: { readonly query: string; readonly dossierId: string }) { + this._dossierId = dossierId; + this.searchService.searchValue = query; + this.search$.next(query); + } + + private _getFileWrapper(dossierId: string, fileId: string): FileStatusWrapper { + return this._appStateService.getFileById(dossierId, fileId); + } + + private _getDossierWrapper(dossierId: string) { + return this._appStateService.getDossierById(dossierId); + } + + private _toMatchedDocuments({ matchedDocuments }: SearchResult) { + return matchedDocuments.filter(doc => doc.score > 0 && doc.matchedTerms.length > 0); + } + + private _toListItems(matchedDocuments: MatchedDocument[]) { + return matchedDocuments + .map(document => { + const fileStatus = this._getFileWrapper(document.dossierId, document.fileId); + if (!fileStatus) { + return undefined; + } + + const { dossierId, dossierName } = this._getDossierWrapper(document.dossierId); + return { + matchedDocument: document, + unmatched: document.unmatchedTerms.length ? document.unmatchedTerms : null, + highlights: document.highlights, + status: fileStatus.status, + pages: fileStatus.numberOfPages, + dossierName: dossierName, + fileName: fileStatus.filename, + routerLink: `/main/dossiers/${dossierId}/file/${fileStatus.fileId}` + } as ListItem; + }) + .filter(value => value); + } +} diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts index a8dace459..1a8b11b9d 100644 --- a/apps/red-ui/src/app/modules/icons/icons.module.ts +++ b/apps/red-ui/src/app/modules/icons/icons.module.ts @@ -9,10 +9,7 @@ import { DomSanitizer } from '@angular/platform-browser'; exports: [MatIconModule] }) export class IconsModule { - constructor( - private readonly _iconRegistry: MatIconRegistry, - private readonly _sanitizer: DomSanitizer - ) { + constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) { const icons = [ 'add', 'analyse', @@ -38,6 +35,7 @@ export class IconsModule { 'download', 'edit', 'entries', + 'enter', 'error', 'exclude-pages', 'exit-fullscreen', diff --git a/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts b/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts index 9a3d2e34c..990211374 100644 --- a/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts +++ b/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts @@ -17,7 +17,7 @@ export abstract class BaseListingComponent extends AutoUnsubscribeComponent i readonly permissionsService: PermissionsService; readonly filterService: FilterService; readonly sortingService: SortingService; - readonly searchService: SearchService; + readonly searchService: SearchService; readonly screenStateService: ScreenStateService; readonly sortedDisplayedEntities$: Observable; diff --git a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html index e3af231a4..9dcc0a08c 100644 --- a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html +++ b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html @@ -11,11 +11,7 @@ - + - + > - + >
diff --git a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.ts b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.ts index 10e87ca2b..cc00278b3 100644 --- a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.ts @@ -29,7 +29,7 @@ export class InputWithActionComponent { } clearContent() { - this.form.patchValue({ query: '' }); + this.form.patchValue({ query: '' }, { emitEvent: true }); } executeAction($event?: MouseEvent) { diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html index 1c9ef9031..7f6fa8bb4 100644 --- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html +++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html @@ -1,7 +1,7 @@
{{ pageLabel }}
-
+
@@ -16,6 +16,7 @@ { +export class PageHeaderComponent { @Input() pageLabel: string; @Input() showCloseButton: boolean; @Input() actionConfigs: ActionConfig[]; @Input() buttonConfigs: ButtonConfig[]; @Input() searchPlaceholder: string; + @Input() searchWidth: number | 'full'; readonly filters$ = this.filterService?.filterGroups$.pipe(map(all => all.filter(f => f.icon))); readonly showResetFilters$ = this._showResetFilters$; - constructor(@Optional() readonly filterService: FilterService, @Optional() readonly searchService: SearchService) {} + constructor(@Optional() readonly filterService: FilterService, @Optional() readonly searchService: SearchService) {} get _showResetFilters$(): Observable { if (!this.filterService) return of(false); @@ -36,6 +37,10 @@ export class PageHeaderComponent { ); } + get computedWidth() { + return this.searchWidth === 'full' ? '100%' : `${this.searchWidth}px`; + } + resetFilters(): void { this.filterService.reset(); this.searchService.reset(); diff --git a/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts b/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts index 8a2398c4d..9b4b9e8f8 100644 --- a/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts +++ b/apps/red-ui/src/app/modules/shared/directives/sync-width.directive.ts @@ -25,8 +25,8 @@ export class SyncWidthDirective implements AfterViewInit, OnDestroy { @debounce(10) matchWidth() { const headerItems = this._elementRef.nativeElement.children; - // const tableRows = document.getElementsByClassName(this.redactionSyncWidth); - const tableRows = this._elementRef.nativeElement.parentElement.getElementsByClassName(this.redactionSyncWidth); + const tableRows = document.getElementsByClassName(this.redactionSyncWidth); + // const tableRows = this._elementRef.nativeElement.parentElement.getElementsByClassName(this.redactionSyncWidth); if (!tableRows || !tableRows.length) { return; diff --git a/apps/red-ui/src/app/modules/shared/services/screen-state.service.ts b/apps/red-ui/src/app/modules/shared/services/screen-state.service.ts index 9ad198c66..57279b1f8 100644 --- a/apps/red-ui/src/app/modules/shared/services/screen-state.service.ts +++ b/apps/red-ui/src/app/modules/shared/services/screen-state.service.ts @@ -26,7 +26,7 @@ export class ScreenStateService { readonly areSomeEntitiesSelected$ = this._areSomeEntitiesSelected$; readonly notAllEntitiesSelected$ = this._notAllEntitiesSelected$; - constructor(private readonly _filterService: FilterService, private readonly _searchService: SearchService) { + constructor(private readonly _filterService: FilterService, private readonly _searchService: SearchService) { // setInterval(() => { // console.log('All entities subs: ', this._allEntities$.observers); // console.log('Displayed entities subs: ', this._displayedEntities$.observers); diff --git a/apps/red-ui/src/app/modules/shared/services/search.service.ts b/apps/red-ui/src/app/modules/shared/services/search.service.ts index 93a4453e9..e4d32014f 100644 --- a/apps/red-ui/src/app/modules/shared/services/search.service.ts +++ b/apps/red-ui/src/app/modules/shared/services/search.service.ts @@ -3,7 +3,7 @@ import { FormBuilder } from '@angular/forms'; import { startWith } from 'rxjs/operators'; @Injectable() -export class SearchService { +export class SearchService { private _searchKey: string; readonly searchForm = this._formBuilder.group({ @@ -14,7 +14,7 @@ export class SearchService { constructor(private readonly _formBuilder: FormBuilder) {} - searchIn(entities: T[]) { + searchIn(entities: T[]) { if (!this._searchKey) return entities; const searchValue = this.searchValue.toLowerCase(); @@ -29,11 +29,15 @@ export class SearchService { return this.searchForm.get('query').value; } - reset(): void { - this.searchForm.reset({ query: '' }); + set searchValue(value: string) { + this.searchForm.patchValue({ query: value }); } - private _searchField(entity: T): string { - return entity[this._searchKey].toLowerCase(); + reset(): void { + this.searchForm.reset({ query: '' }, { emitEvent: true }); + } + + private _searchField(entity: T): string { + return entity[this._searchKey].toString().toLowerCase(); } } diff --git a/apps/red-ui/src/app/services/loading.service.ts b/apps/red-ui/src/app/services/loading.service.ts index 66f938fe1..322faa823 100644 --- a/apps/red-ui/src/app/services/loading.service.ts +++ b/apps/red-ui/src/app/services/loading.service.ts @@ -10,7 +10,7 @@ export class LoadingService { private readonly _loadingEvent = new BehaviorSubject(false); private _loadingStarted: number; - get isLoading(): Observable { + get isLoading$(): Observable { return this._loadingEvent.asObservable(); } diff --git a/apps/red-ui/src/app/services/router-history.service.ts b/apps/red-ui/src/app/services/router-history.service.ts index 5c9fbf827..8ffe2364f 100644 --- a/apps/red-ui/src/app/services/router-history.service.ts +++ b/apps/red-ui/src/app/services/router-history.service.ts @@ -10,7 +10,7 @@ export class RouterHistoryService { constructor(private readonly _router: Router) { this._router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => { - if (event.url.startsWith('/main/dossiers')) { + if (event.url.startsWith('/main/dossiers') && !event.url.includes('/search')) { this._lastDossiersScreen = event.url; } }); diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts index 3d2ac93f5..fb78a07bd 100644 --- a/apps/red-ui/src/app/state/app-state.service.ts +++ b/apps/red-ui/src/app/state/app-state.service.ts @@ -9,7 +9,7 @@ import { ReanalysisControllerService, StatusControllerService } from '@redaction/red-ui-http'; -import { Toaster } from '../services/toaster.service'; +import { Toaster } from '@services/toaster.service'; import { TranslateService } from '@ngx-translate/core'; import { Event, NavigationEnd, ResolveStart, Router } from '@angular/router'; import { UserService } from '@services/user.service'; @@ -156,7 +156,12 @@ export class AppStateService { } private static _isDossierOverviewRoute(event: Event) { - return event instanceof ResolveStart && event.url.includes('/main/dossiers/') && !event.url.includes('/file/'); + return ( + event instanceof ResolveStart && + event.url.includes('/main/dossiers/') && + !event.url.includes('/file/') && + !event.url.includes('/search') + ); } private static _isRandomRoute(event: Event) { @@ -205,7 +210,7 @@ export class AppStateService { } getFileById(dossierId: string, fileId: string) { - return this.getDossierById(dossierId).files.find(file => file.fileId === fileId); + return this.getDossierById(dossierId)?.files.find(file => file.fileId === fileId); } async loadAllDossiers(emitEvents: boolean = true) { diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 9a251498a..c581e389e 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -1435,5 +1435,24 @@ "hours": "hours", "day": "day", "days": "days" + }, + "search": { + "header-label": "Search entire platform", + "placeholder": "Search for documents or document content", + "this-dossier": "in this dossier", + "entire-platform": "entire platform", + "close": "Close" + }, + "search-screen": { + "table-header": "{{length}} search results", + "cols": { + "document": "Document", + "status": "Status", + "dossier": "Dossier", + "pages": "Pages" + }, + "no-data": "Please enter a keyword in the search input to look for documents or document content.", + "missing": "Missing", + "must-contain": "Must contain" } } diff --git a/apps/red-ui/src/assets/icons/general/enter.svg b/apps/red-ui/src/assets/icons/general/enter.svg new file mode 100644 index 000000000..af96126ca --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/enter.svg @@ -0,0 +1,15 @@ + + + B99F3D5E-879A-47E3-A8C7-84877EE418F3 + + + + + + + + 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 5cd71d2de..379d333e6 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -256,6 +256,10 @@ section.settings { margin-left: 14px; } +.mr-24 { + margin-right: 24px; +} + .pb-24 { padding-bottom: 24px; } @@ -358,6 +362,10 @@ section.settings { margin-right: 16px; } +.mr-34 { + margin-right: 34px; +} + .fit-content { width: fit-content; } diff --git a/libs/red-ui-http/src/lib/model/models.ts b/libs/red-ui-http/src/lib/model/models.ts index 84c0c04f4..a4aeed8e6 100644 --- a/libs/red-ui-http/src/lib/model/models.ts +++ b/libs/red-ui-http/src/lib/model/models.ts @@ -78,3 +78,4 @@ export * from './legalBasisChangeRequest'; export * from './manualLegalBasisChange'; export * from './searchRequest'; export * from './searchResult'; +export * from './matchedDocument';