From b7ba7b94b246e79ce75043c1ad825e233f3b847f Mon Sep 17 00:00:00 2001 From: Vito Date: Wed, 16 Jun 2021 15:21:29 +0100 Subject: [PATCH] [ACA-4471] - Added show preview action for files in search results (#2169) * [ACA-4472] - added preview button on info drawer * [ACA-4472] - added preview button on info drawer * [ACA-4472] - added preview button on info drawer * [ACA-4472] - fixed lint * [ACA-4472] - fixed unit test * [ACA-4472] - fixed wrong import * [ACA-4472] - reverted app.config * [ACA-4472] - added some upgrades for styling * [ACA-4472] - added some upgrades for styling * [ACA-4472] - start fixing e2e * [ACA-4472] - wrong whitespace * [ACA-4471] - readded view button and fixed bug on closing * [ACA-4471] - readded action * [ACA-4238] - fix e2e #2 * [ACA-4471] - readded view button for e2e * [ACA-4471] - readded view button for e2e --- projects/aca-shared/rules/src/app.rules.ts | 13 ++++++++ .../info-drawer/info-drawer.component.html | 2 +- .../info-drawer/info-drawer.component.ts | 15 +++++++-- .../store/src/actions/app.actions.ts | 14 ++++++++- .../store/src/selectors/app.selectors.ts | 1 + .../aca-shared/store/src/states/app.state.ts | 1 + .../search-results.component.html | 29 +++++++++++++++-- .../search-results.component.scss | 29 +++++++++++++++++ .../search-results.component.ts | 22 ++++++++++++- .../toggle-info-drawer.component.ts | 2 +- src/app/extensions/core.extensions.module.ts | 2 ++ src/app/material.module.ts | 5 +-- src/app/store/initial-state.ts | 1 + src/app/store/reducers/app.reducer.ts | 31 ++++++++++++++++++- src/assets/app.extensions.json | 24 +++++++++++++- src/assets/i18n/en.json | 3 +- 16 files changed, 180 insertions(+), 14 deletions(-) diff --git a/projects/aca-shared/rules/src/app.rules.ts b/projects/aca-shared/rules/src/app.rules.ts index cb8c78070..567bac9d8 100644 --- a/projects/aca-shared/rules/src/app.rules.ts +++ b/projects/aca-shared/rules/src/app.rules.ts @@ -495,3 +495,16 @@ export function canShowLogout(context: AcaRuleContext): boolean { export function isLibraryManager(context: RuleContext): boolean { return hasLibrarySelected(context) && context.selection.library.entry && context.selection.library.entry.role === 'SiteManager'; } + +/** + * Checks if the preview button for search results can be showed + * JSON ref: `canInfoPreview` + * @param context Rule execution context + */ +export function canInfoPreview(context: RuleContext): boolean { + return navigation.isSearchResults(context) && !isMultiselection(context) && !hasFolderSelected(context) && !navigation.isPreview(context); +} + +export function showInfoSelectionButton(context: RuleContext): boolean { + return navigation.isSearchResults(context) && !navigation.isPreview(context); +} diff --git a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html index 47e911092..0a309120a 100644 --- a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html +++ b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html @@ -9,7 +9,7 @@ > - + diff --git a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts index c1ade264c..96f5beca8 100644 --- a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts +++ b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts @@ -27,12 +27,11 @@ import { Component, HostListener, Input, OnChanges, OnDestroy, OnInit } from '@a import { MinimalNodeEntity, MinimalNodeEntryEntity, SiteEntry } from '@alfresco/js-api'; import { ContentActionRef, SidebarTabRef } from '@alfresco/adf-extensions'; import { Store } from '@ngrx/store'; -import { getAppSelection, SetInfoDrawerStateAction, ToggleInfoDrawerAction } from '@alfresco/aca-shared/store'; +import { getAppSelection, SetInfoDrawerStateAction, ToggleInfoDrawerAction, infoDrawerPreview } from '@alfresco/aca-shared/store'; import { AppExtensionService } from '../../services/app.extension.service'; import { ContentApiService } from '../../services/content-api.service'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; - @Component({ selector: 'aca-info-drawer', templateUrl: './info-drawer.component.html' @@ -49,6 +48,7 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy { tabs: Array = []; actions: Array = []; onDestroy$ = new Subject(); + preventFromClosing = false; @HostListener('keydown.escape') onEscapeKeyboardEvent(): void { @@ -65,12 +65,21 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy { .subscribe(() => { this.actions = this.extensions.getAllowedSidebarActions(); }); + + this.store + .select(infoDrawerPreview) + .pipe(takeUntil(this.onDestroy$)) + .subscribe((isInfoDrawerPreviewOpened) => { + this.preventFromClosing = isInfoDrawerPreviewOpened; + }); } ngOnDestroy() { this.onDestroy$.next(true); this.onDestroy$.complete(); - this.store.dispatch(new SetInfoDrawerStateAction(false)); + if (!this.preventFromClosing) { + this.store.dispatch(new SetInfoDrawerStateAction(false)); + } } ngOnChanges() { diff --git a/projects/aca-shared/store/src/actions/app.actions.ts b/projects/aca-shared/store/src/actions/app.actions.ts index 01679f437..6f4ac3b2a 100644 --- a/projects/aca-shared/store/src/actions/app.actions.ts +++ b/projects/aca-shared/store/src/actions/app.actions.ts @@ -44,7 +44,9 @@ export enum AppActionTypes { SetInfoDrawerState = 'SET_INFO_DRAWER_STATE', SetInfoDrawerMetadataAspect = 'SET_INFO_DRAWER_METADATA_ASPECT', CloseModalDialogs = 'CLOSE_MODAL_DIALOGS', - SetFileUploadingDialog = 'SET_FILE_UPLOADING_DIALOG' + SetFileUploadingDialog = 'SET_FILE_UPLOADING_DIALOG', + ShowInfoDrawerPreview = 'SHOW_INFO_DRAWER_PREVIEW', + SetInfoDrawerPreviewState = 'SET_INFO_DRAWER_PREVIEW_STATE' } export class SetSettingsParameterAction implements Action { @@ -134,3 +136,13 @@ export class SetFileUploadingDialogAction implements Action { constructor(public payload: boolean) {} } + +export class ShowInfoDrawerPreviewAction implements Action { + readonly type = AppActionTypes.ShowInfoDrawerPreview; +} + +export class SetInfoDrawerPreviewStateAction implements Action { + readonly type = AppActionTypes.SetInfoDrawerPreviewState; + + constructor(public payload: boolean) {} +} diff --git a/projects/aca-shared/store/src/selectors/app.selectors.ts b/projects/aca-shared/store/src/selectors/app.selectors.ts index 709311fc2..6b57b7113 100644 --- a/projects/aca-shared/store/src/selectors/app.selectors.ts +++ b/projects/aca-shared/store/src/selectors/app.selectors.ts @@ -39,6 +39,7 @@ export const getAppSelection = createSelector(selectApp, (state) => state.select export const getSharedUrl = createSelector(selectApp, (state) => state.sharedUrl); export const getNavigationState = createSelector(selectApp, (state) => state.navigation); export const isInfoDrawerOpened = createSelector(selectApp, (state) => state.infoDrawerOpened); +export const infoDrawerPreview = createSelector(selectApp, (state) => state.infoDrawerPreview); export const showFacetFilter = createSelector(selectApp, (state) => state.showFacetFilter); export const getDocumentDisplayMode = createSelector(selectApp, (state) => state.documentDisplayMode); export const getRepositoryStatus = createSelector(selectApp, (state) => state.repository); diff --git a/projects/aca-shared/store/src/states/app.state.ts b/projects/aca-shared/store/src/states/app.state.ts index 9b30803aa..984c8570b 100644 --- a/projects/aca-shared/store/src/states/app.state.ts +++ b/projects/aca-shared/store/src/states/app.state.ts @@ -37,6 +37,7 @@ export interface AppState { user: ProfileState; navigation: NavigationState; infoDrawerOpened: boolean; + infoDrawerPreview: boolean; infoDrawerMetadataAspect: string; showFacetFilter: boolean; documentDisplayMode: string; diff --git a/src/app/components/search/search-results/search-results.component.html b/src/app/components/search/search-results/search-results.component.html index af905470b..04350b64d 100644 --- a/src/app/components/search/search-results/search-results.component.html +++ b/src/app/components/search/search-results/search-results.component.html @@ -112,8 +112,33 @@ -
- +
+ + +
+
+ +
+
+ + +
+
+ + + +
+ +
+
diff --git a/src/app/components/search/search-results/search-results.component.scss b/src/app/components/search/search-results/search-results.component.scss index 0b6a76287..0ce7b1833 100644 --- a/src/app/components/search/search-results/search-results.component.scss +++ b/src/app/components/search/search-results/search-results.component.scss @@ -29,6 +29,35 @@ color: rgba(0, 0, 0, 0.54); } + &--embedded_viewer { + position: unset; + display: flex; + width: 100%; + } + + &--right_panel_section { + display: flex; + justify-content: flex-start; + } + + &--right_panel_section-extended { + display: flex; + justify-content: flex-start; + flex-basis: 55%; + } + + &--preview-toolbar { + display: flex; + align-items: flex-end; + justify-content: space-between; + margin: 0px 5px; + padding-right: 24px; + } + + &--visibility_button { + margin-right: 8px; + } + .adf-search-filter { min-width: 260px; max-width: 320px; diff --git a/src/app/components/search/search-results/search-results.component.ts b/src/app/components/search/search-results/search-results.component.ts index 2b536dbb2..c71dac3bd 100644 --- a/src/app/components/search/search-results/search-results.component.ts +++ b/src/app/components/search/search-results/search-results.component.ts @@ -29,7 +29,16 @@ import { ActivatedRoute, Params, Router } from '@angular/router'; import { SearchQueryBuilderService, SearchFilterComponent } from '@alfresco/adf-content-services'; import { PageComponent } from '../../page.component'; import { Store } from '@ngrx/store'; -import { AppStore, NavigateToFolder, SnackbarErrorAction, showFacetFilter } from '@alfresco/aca-shared/store'; +import { + AppStore, + NavigateToFolder, + SnackbarErrorAction, + showFacetFilter, + infoDrawerPreview, + ShowInfoDrawerPreviewAction, + SetInfoDrawerStateAction, + SetInfoDrawerPreviewStateAction +} from '@alfresco/aca-shared/store'; import { ContentManagementService } from '../../../services/content-management.service'; import { AppConfigService, TranslationService } from '@alfresco/adf-core'; import { Observable } from 'rxjs'; @@ -46,6 +55,7 @@ export class SearchResultsComponent extends PageComponent implements OnInit { searchFilter: SearchFilterComponent; showFacetFilter$: Observable; + infoDrawerPreview$: Observable; searchedWord: string; queryParamName = 'q'; @@ -73,6 +83,7 @@ export class SearchResultsComponent extends PageComponent implements OnInit { }; this.showFacetFilter$ = store.select(showFacetFilter); + this.infoDrawerPreview$ = store.select(infoDrawerPreview); } ngOnInit() { @@ -239,4 +250,13 @@ export class SearchResultsComponent extends PageComponent implements OnInit { hideSearchFilter() { return !this.totalResults && !this.hasSelectedFilters; } + + onPreviewClosed() { + this.store.dispatch(new ShowInfoDrawerPreviewAction()); + } + + onDrawerClosed() { + this.store.dispatch(new SetInfoDrawerPreviewStateAction(false)); + this.store.dispatch(new SetInfoDrawerStateAction(false)); + } } diff --git a/src/app/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts b/src/app/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts index f4c24b359..285cc2a57 100644 --- a/src/app/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts +++ b/src/app/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts @@ -39,7 +39,7 @@ import { ToggleInfoDrawerAction, isInfoDrawerOpened } from '@alfresco/aca-shared [attr.title]="'APP.ACTIONS.DETAILS' | translate" (click)="onClick()" > - info_outline + menu_open `, encapsulation: ViewEncapsulation.None, diff --git a/src/app/extensions/core.extensions.module.ts b/src/app/extensions/core.extensions.module.ts index fd3c40cd3..d5dc82834 100644 --- a/src/app/extensions/core.extensions.module.ts +++ b/src/app/extensions/core.extensions.module.ts @@ -132,6 +132,8 @@ export class CoreExtensionsModule { canToggleFavorite: rules.canToggleFavorite, isLibraryManager: rules.isLibraryManager, canEditAspects: rules.canEditAspects, + canInfoPreview: rules.canInfoPreview, + showInfoSelectionButton: rules.showInfoSelectionButton, 'app.selection.canDelete': rules.canDeleteSelection, 'app.selection.file.canUnlock': rules.canUnlockFile, diff --git a/src/app/material.module.ts b/src/app/material.module.ts index 3a966e3cc..85dfb8e1e 100644 --- a/src/app/material.module.ts +++ b/src/app/material.module.ts @@ -31,10 +31,11 @@ import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/d import { MatInputModule } from '@angular/material/input'; import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatCardModule } from '@angular/material/card'; @NgModule({ - imports: [MatMenuModule, MatIconModule, MatButtonModule, MatDialogModule, MatInputModule, MatSnackBarModule, MatProgressBarModule], - exports: [MatMenuModule, MatIconModule, MatButtonModule, MatDialogModule, MatInputModule, MatSnackBarModule, MatProgressBarModule], + imports: [MatMenuModule, MatIconModule, MatButtonModule, MatDialogModule, MatInputModule, MatSnackBarModule, MatProgressBarModule, MatCardModule], + exports: [MatMenuModule, MatIconModule, MatButtonModule, MatDialogModule, MatInputModule, MatSnackBarModule, MatProgressBarModule, MatCardModule], providers: [ { provide: MAT_DIALOG_DEFAULT_OPTIONS, diff --git a/src/app/store/initial-state.ts b/src/app/store/initial-state.ts index 39bfd3a93..04c355b3e 100644 --- a/src/app/store/initial-state.ts +++ b/src/app/store/initial-state.ts @@ -48,6 +48,7 @@ export const INITIAL_APP_STATE: AppState = { }, currentNodeVersion: null, infoDrawerOpened: false, + infoDrawerPreview: false, infoDrawerMetadataAspect: '', showFacetFilter: true, fileUploadingDialog: true, diff --git a/src/app/store/reducers/app.reducer.ts b/src/app/store/reducers/app.reducer.ts index 0e04c1a34..029715dcc 100644 --- a/src/app/store/reducers/app.reducer.ts +++ b/src/app/store/reducers/app.reducer.ts @@ -39,7 +39,8 @@ import { SetInfoDrawerMetadataAspectAction, SetHeaderColorAction, SetCurrentNodeVersionAction, - SetFileUploadingDialogAction + SetFileUploadingDialogAction, + SetInfoDrawerPreviewStateAction } from '@alfresco/aca-shared/store'; import { INITIAL_APP_STATE } from '../initial-state'; @@ -98,6 +99,12 @@ export function appReducer(state: AppState = INITIAL_APP_STATE, action: Action): case AppActionTypes.SetFileUploadingDialog: newState = setUploadDialogVisibility(state, action as SetFileUploadingDialogAction); break; + case AppActionTypes.ShowInfoDrawerPreview: + newState = showInfoDrawerPreview(state); + break; + case AppActionTypes.SetInfoDrawerPreviewState: + newState = setInfoDrawerPreview(state, action as SetInfoDrawerPreviewStateAction); + break; default: newState = { ...state }; } @@ -186,6 +193,21 @@ function toggleInfoDrawer(state: AppState) { return newState; } +function showInfoDrawerPreview(state: AppState) { + const newState = { ...state }; + + let value = state.infoDrawerPreview; + if (state.selection.isEmpty) { + value = false; + } else { + value = !value; + } + + newState.infoDrawerPreview = value; + + return newState; +} + function toggleDocumentDisplayMode(state: AppState) { return { ...state, @@ -248,6 +270,13 @@ function setInfoDrawer(state: AppState, action: SetInfoDrawerStateAction) { }; } +function setInfoDrawerPreview(state: AppState, action: SetInfoDrawerPreviewStateAction) { + return { + ...state, + infoDrawerPreview: action.payload + }; +} + function setInfoDrawerAspect(state: AppState, action: SetInfoDrawerMetadataAspectAction) { return { ...state, diff --git a/src/assets/app.extensions.json b/src/assets/app.extensions.json index 2c71854cc..e646cf71c 100644 --- a/src/assets/app.extensions.json +++ b/src/assets/app.extensions.json @@ -1116,8 +1116,30 @@ "sidebar": { "toolbar": [ { - "id": "app.sidebar.expand", + "id": "app.sidebar.preview", "order": 100, + "title": "Preview File", + "icon": "visibility", + "actions": { + "click": "SHOW_INFO_DRAWER_PREVIEW" + }, + "rules": { + "visible": "canInfoPreview" + } + }, + { + "id": "app.sidebar.infoDetails", + "order": 150, + "title": "Info Details", + "icon": "info_outline", + "color": "accent", + "rules": { + "visible": "showInfoSelectionButton" + } + }, + { + "id": "app.sidebar.expand", + "order": 200, "title": "APP.INFO_DRAWER.TABS.EXPAND", "icon": "chevron_left", "actions": { diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 8ec0deb57..cccf994fa 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -564,7 +564,8 @@ }, "ADF_VIEWER": { "ACTIONS": { - "INFO": "View details" + "INFO": "View details", + "PREVIEW": "Show preview" } }, "FILE_UPLOAD": {