inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-10533] Replace shell with adf-shell (#2806)

Browse Source 
* [AAE-10533] Use shell from ADF

* Remove shell.md
This commit is contained in:
Bartosz Sekuła 2022-11-25 08:48:03 +01:00 committed by GitHub
parent 60ba8eb6ce
commit ed20971962
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 3 additions and 520 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
app/src/app/app-shell/app-shell.module.ts
View File

@ -1,72 +0,0 @@
/*
* Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
*
* License rights for this program may be obtained from Alfresco Software, Ltd.
* pursuant to a written agreement and any use of this program without such an
* agreement is prohibited.
*/
import { CommonModule } from '@angular/common';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, provideRoutes, RouterModule, Route } from '@angular/router';
import { SHELL_LAYOUT_ROUTE } from './app-shell.routes';
import { SidenavLayoutModule } from '@alfresco/adf-core';
import { ExtensionsModule } from '@alfresco/adf-extensions';
import { ShellLayoutComponent } from './components/shell/shell.component';
export interface AppShellRoutesConfig {
shellParentRoute?: Route;
shellChildren: Routes;
}
@NgModule({
imports: [SidenavLayoutModule, ExtensionsModule, RouterModule.forChild([]), CommonModule],
exports: [ShellLayoutComponent],
declarations: [ShellLayoutComponent]
})
export class AppShellModule {
static withRoutes(routes: Routes | AppShellRoutesConfig): ModuleWithProviders<AppShellModule> {
if (Array.isArray(routes)) {
return getModuleForRoutes(routes);
}
return getModuleForRouteConfig(routes);
}
}
function getModuleForRoutes(routes: Routes): ModuleWithProviders<AppShellModule> {
const shellLayoutRoute = SHELL_LAYOUT_ROUTE;
routes.forEach((childRoute) => {
shellLayoutRoute.children.push(childRoute);
});
return {
ngModule: AppShellModule,
providers: provideRoutes([shellLayoutRoute])
};
}
function getModuleForRouteConfig(config: AppShellRoutesConfig): ModuleWithProviders<AppShellModule> {
const shellLayoutRoute = SHELL_LAYOUT_ROUTE;
const shellParentRoute = config.shellParentRoute;
const shellChildrenRoutes = config.shellChildren;
shellLayoutRoute.children.push(...shellChildrenRoutes);
const rootRoute = shellParentRoute ? shellParentRoute : shellLayoutRoute;
if (config.shellParentRoute) {
if (rootRoute.children === undefined) {
rootRoute.children = [];
}
rootRoute.children.push(shellLayoutRoute);
}
return {
ngModule: AppShellModule,
providers: provideRoutes([rootRoute])
};
}

20
app/src/app/app-shell/app-shell.routes.ts
View File

@ -1,20 +0,0 @@
/*
* Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
*
* License rights for this program may be obtained from Alfresco Software, Ltd.
* pursuant to a written agreement and any use of this program without such an
* agreement is prohibited.
*/
import { InjectionToken } from '@angular/core';
import { CanActivate, CanActivateChild, Route } from '@angular/router';
import { ShellLayoutComponent } from './components/shell/shell.component';
export const SHELL_AUTH_TOKEN = new InjectionToken<CanActivate & CanActivateChild>('SHELL_AUTH_TOKEN');
export const SHELL_LAYOUT_ROUTE: Route = {
path: '',
component: ShellLayoutComponent,
canActivate: [SHELL_AUTH_TOKEN],
children: []
};

48
app/src/app/app-shell/components/shell/shell.component.html
View File

@ -1,48 +0,0 @@
<adf-sidenav-layout
#layout
[sidenavMin]="70"
[sidenavMax]="320"
[stepOver]="600"
[hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav"
(expanded)="onExpanded($event)"
>
<adf-sidenav-layout-header>
<ng-template let-isMenuMinimized="isMenuMinimized">
<div
role="heading"
aria-level="1"
*ngIf="!hideSidenav"
>
<adf-dynamic-component id="app.layout.header" [data]="{ layout }">
</adf-dynamic-component>
</div>
</ng-template>
</adf-sidenav-layout-header>
<adf-sidenav-layout-navigation>
<ng-template let-isMenuMinimized="isMenuMinimized">
<div
(swipeleft)="hideMenu($event)"
[attr.data-automation-id]="isMenuMinimized() ? 'collapsed' : 'expanded'"
>
<adf-dynamic-component
id="app.layout.sidenav"
[data]="{ mode: layout.isMenuMinimized ? 'collapsed' : 'expanded'}"
>
</adf-dynamic-component>
</div>
</ng-template>
</adf-sidenav-layout-navigation>
<adf-sidenav-layout-content>
<ng-template>
<router-outlet></router-outlet>
</ng-template>
</adf-sidenav-layout-content>
</adf-sidenav-layout>
<adf-dynamic-component id="app.shell.sibling">
</adf-dynamic-component>
<router-outlet name="viewer"></router-outlet>

34
app/src/app/app-shell/components/shell/shell.component.scss
View File

@ -1,34 +0,0 @@
.app-shell {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
overflow: hidden;
min-height: 0;
router-outlet[name='viewer'] + * {
width: 100%;
height: 100%;
z-index: 999;
position: absolute;
top: 0;
right: 0;
background-color: white;
}
adf-file-uploading-dialog {
z-index: 1000;
}
}
@media screen and (max-width: 599px) {
.adf-app-title {
display: none;
}
}
@media screen and (max-width: 719px) {
.adf-app-logo {
display: none;
}
}

169
app/src/app/app-shell/components/shell/shell.component.spec.ts
View File

@ -1,169 +0,0 @@
/*
* Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
*
* License rights for this program may be obtained from Alfresco Software, Ltd.
* pursuant to a written agreement and any use of this program without such an
* agreement is prohibited.
*/
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { AppConfigService, SidenavLayoutModule } from '@alfresco/adf-core';
import { ShellLayoutComponent } from './shell.component';
import { Store } from '@ngrx/store';
import { Router, NavigationStart, RouterModule } from '@angular/router';
import { of, Subject } from 'rxjs';
import { ExtensionsModule } from '@alfresco/adf-extensions';
import { CommonModule } from '@angular/common';
import { ShellAppService, SHELL_APP_SERVICE } from '../../services/shell-app.service';
import { HttpClientModule } from '@angular/common/http';
import { TranslateService } from '@ngx-translate/core';
import { TranslateServiceMock } from '@alfresco/aca-shared';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
class MockRouter {
private url = 'some-url';
private subject = new Subject();
events = this.subject.asObservable();
routerState = { snapshot: { url: this.url } };
navigateByUrl(url: string) {
const navigationStart = new NavigationStart(0, url);
this.subject.next(navigationStart);
}
}
describe('AppLayoutComponent', () => {
let fixture: ComponentFixture<ShellLayoutComponent>;
let component: ShellLayoutComponent;
let appConfig: AppConfigService;
let shellAppService: ShellAppService;
beforeEach(() => {
const shellService: ShellAppService = {
pageHeading$: of('Title'),
hideSidenavConditions: [],
minimizeSidenavConditions: [],
preferencesService: {
get: (_key: string) => 'true',
set: (_key: string, _value: any) => {}
}
};
TestBed.configureTestingModule({
imports: [CommonModule, NoopAnimationsModule, HttpClientModule, SidenavLayoutModule, ExtensionsModule, RouterModule.forChild([])],
providers: [
Store,
{
provide: Router,
useClass: MockRouter
},
{
provide: SHELL_APP_SERVICE,
useValue: shellService
},
{ provide: TranslateService, useClass: TranslateServiceMock }
],
declarations: [ShellLayoutComponent],
schemas: [NO_ERRORS_SCHEMA]
});
fixture = TestBed.createComponent(ShellLayoutComponent);
component = fixture.componentInstance;
appConfig = TestBed.inject(AppConfigService);
shellAppService = TestBed.inject(SHELL_APP_SERVICE);
});
beforeEach(() => {
appConfig.config.languages = [];
appConfig.config.locale = 'en';
});
describe('sidenav state', () => {
it('should get state from configuration', () => {
appConfig.config.sideNav = {
expandedSidenav: false,
preserveState: false
};
fixture.detectChanges();
expect(component.expandedSidenav).toBe(false);
});
it('should resolve state to true is no configuration', () => {
appConfig.config.sidenav = {};
fixture.detectChanges();
expect(component.expandedSidenav).toBe(true);
});
it('should get state from user settings as true', () => {
appConfig.config.sideNav = {
expandedSidenav: false,
preserveState: true
};
spyOn(shellAppService.preferencesService, 'get').and.callFake((key) => {
if (key === 'expandedSidenav') {
return 'true';
}
return 'false';
});
fixture.detectChanges();
expect(component.expandedSidenav).toBe(true);
});
it('should get state from user settings as false', () => {
appConfig.config.sidenav = {
expandedSidenav: false,
preserveState: true
};
spyOn(shellAppService.preferencesService, 'get').and.callFake((key) => {
if (key === 'expandedSidenav') {
return 'false';
}
return 'true';
});
fixture.detectChanges();
expect(component.expandedSidenav).toBe(false);
});
});
it('should close menu on mobile screen size', () => {
component.minimizeSidenav = false;
component.layout.container = {
isMobileScreenSize: true,
toggleMenu: () => {}
};
spyOn(component.layout.container, 'toggleMenu');
fixture.detectChanges();
component.hideMenu({ preventDefault: () => {} } as any);
expect(component.layout.container.toggleMenu).toHaveBeenCalled();
});
it('should close menu on mobile screen size also when minimizeSidenav true', () => {
fixture.detectChanges();
component.minimizeSidenav = true;
component.layout.container = {
isMobileScreenSize: true,
toggleMenu: () => {}
};
spyOn(component.layout.container, 'toggleMenu');
fixture.detectChanges();
component.hideMenu({ preventDefault: () => {} } as any);
expect(component.layout.container.toggleMenu).toHaveBeenCalled();
});
});

123
app/src/app/app-shell/components/shell/shell.component.ts
View File

@ -1,123 +0,0 @@
/*
* Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
*
* License rights for this program may be obtained from Alfresco Software, Ltd.
* pursuant to a written agreement and any use of this program without such an
* agreement is prohibited.
*/
import { AppConfigService, SidenavLayoutComponent } from '@alfresco/adf-core';
import { Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { Subject, Observable } from 'rxjs';
import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators';
import { BreakpointObserver } from '@angular/cdk/layout';
import { Directionality } from '@angular/cdk/bidi';
import { SHELL_APP_SERVICE, ShellAppService } from '../../services/shell-app.service';
@Component({
selector: 'app-shell',
templateUrl: './shell.component.html',
styleUrls: ['./shell.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { class: 'app-shell' }
})
export class ShellLayoutComponent implements OnInit, OnDestroy {
@ViewChild('layout', { static: true })
layout: SidenavLayoutComponent;
onDestroy$: Subject<boolean> = new Subject<boolean>();
isSmallScreen$: Observable<boolean>;
expandedSidenav: boolean;
minimizeSidenav = false;
hideSidenav = false;
direction: Directionality;
constructor(
private router: Router,
private appConfigService: AppConfigService,
private breakpointObserver: BreakpointObserver,
@Inject(SHELL_APP_SERVICE) private shellService: ShellAppService
) {}
ngOnInit() {
this.isSmallScreen$ = this.breakpointObserver.observe(['(max-width: 600px)']).pipe(map((result) => result.matches));
this.hideSidenav = this.shellService.hideSidenavConditions.some((el) => this.router.routerState.snapshot.url.includes(el));
this.minimizeSidenav = this.shellService.minimizeSidenavConditions.some((el) => this.router.routerState.snapshot.url.includes(el));
if (!this.minimizeSidenav) {
this.expandedSidenav = this.getSidenavState();
} else {
this.expandedSidenav = false;
}
this.router.events
.pipe(
withLatestFrom(this.isSmallScreen$),
filter(([event, isSmallScreen]) => isSmallScreen && event instanceof NavigationEnd),
takeUntil(this.onDestroy$)
)
.subscribe(() => {
this.layout.container.sidenav.close();
});
this.router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
takeUntil(this.onDestroy$)
)
.subscribe((event: NavigationEnd) => {
this.minimizeSidenav = this.shellService.minimizeSidenavConditions.some((el) => event.urlAfterRedirects.includes(el));
this.hideSidenav = this.shellService.hideSidenavConditions.some((el) => event.urlAfterRedirects.includes(el));
this.updateState();
});
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
hideMenu(event: Event) {
if (this.layout.container.isMobileScreenSize) {
event.preventDefault();
this.layout.container.toggleMenu();
}
}
private updateState() {
if (this.minimizeSidenav && !this.layout.isMenuMinimized) {
this.layout.isMenuMinimized = true;
if (!this.layout.container.isMobileScreenSize) {
this.layout.container.toggleMenu();
}
}
if (!this.minimizeSidenav) {
if (this.getSidenavState() && this.layout.isMenuMinimized) {
this.layout.isMenuMinimized = false;
this.layout.container.toggleMenu();
}
}
}
onExpanded(state: boolean) {
if (!this.minimizeSidenav && this.appConfigService.get('sideNav.preserveState')) {
this.shellService.preferencesService.set('expandedSidenav', state);
}
}
private getSidenavState(): boolean {
const expand = this.appConfigService.get<boolean>('sideNav.expandedSidenav', true);
const preserveState = this.appConfigService.get<boolean>('sideNav.preserveState', true);
if (preserveState) {
return this.shellService.preferencesService.get('expandedSidenav', expand.toString()) === 'true';
}
return expand;
}
}

10
app/src/app/app-shell/index.ts
View File

@ -1,10 +0,0 @@
/*
* Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
*
* License rights for this program may be obtained from Alfresco Software, Ltd.
* pursuant to a written agreement and any use of this program without such an
* agreement is prohibited.
*/
export * from './app-shell.module';
export * from './services/shell-app.service';

24
app/src/app/app-shell/services/shell-app.service.ts
View File

@ -1,24 +0,0 @@
/*
* Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
*
* License rights for this program may be obtained from Alfresco Software, Ltd.
* pursuant to a written agreement and any use of this program without such an
* agreement is prohibited.
*/
import { InjectionToken } from '@angular/core';
import { Observable } from 'rxjs';
export interface ShellPreferencesService {
set(preferenceKey: string, value: any): void;
get(preferenceKey: string, defaultValue: string): string;
}
export interface ShellAppService {
pageHeading$: Observable<string>;
hideSidenavConditions: string[];
minimizeSidenavConditions: string[];
preferencesService: ShellPreferencesService;
}
export const SHELL_APP_SERVICE = new InjectionToken<ShellAppService>('SHELL_APP_SERVICE');

5
app/src/app/app.module.ts
View File

@ -50,11 +50,9 @@ import localePl from '@angular/common/locales/pl';
import localeFi from '@angular/common/locales/fi';
import localeDa from '@angular/common/locales/da';
import localeSv from '@angular/common/locales/sv';
import { AppShellModule, SHELL_APP_SERVICE } from './app-shell';
import { TranslateModule } from '@ngx-translate/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.components';
import { SHELL_AUTH_TOKEN } from './app-shell/app-shell.routes';
import { CONTENT_LAYOUT_ROUTES } from './content-plugin/content.routes';
import { ContentServiceExtensionModule } from './content-plugin/content-services-extension.module';
import { CoreExtensionsModule } from './extensions/core.extensions.module';
@ -62,6 +60,7 @@ import { INITIAL_APP_STATE } from './content-plugin/store/initial-state';
import { ContentVersionService } from '@alfresco/adf-content-services';
import { ContentUrlService } from './content-plugin/services/content-url.service';
import { STORE_INITIAL_APP_DATA } from '@alfresco/aca-shared/store';
import { ShellModule, SHELL_APP_SERVICE, SHELL_AUTH_TOKEN } from '@alfresco/adf-core/shell';
registerLocaleData(localeFr);
registerLocaleData(localeDe);
@ -94,7 +93,7 @@ registerLocaleData(localeSv);
relativeLinkResolution: 'legacy'
}),
AppExtensionsModule,
AppShellModule.withRoutes({
ShellModule.withRoutes({
shellChildren: [CONTENT_LAYOUT_ROUTES]
}),
ContentServiceExtensionModule

17
docs/extending/app-shell.md
View File

@ -1,17 +0,0 @@
---
Title: Shell
---
# Shell
[AppShellModule](../../app/src/app/app-shell/app-shell.module.ts) is designated as a main layout for the application.
I order to attach routes to appShell, `withRoutes(routes: Routes | AppShellRoutesConfig)` method should be used.
Passed routes are going to be attached to [shell main route](../../app/src/app/app-shell/app-shell.routes.ts)
If you would like to provide custom app guard, you can provide your own using [SHELL_AUTH_TOKEN](../../app/src/app/app-shell/app-shell.routes.ts)
## Shell Service
In order to use `shell`, you need to provide `SHELL_APP_SERVICE` which provides necessary options for shell component to work.

1
tsconfig.adf.json
View File

@ -24,6 +24,7 @@
"@alfresco/adf-testing/shared": ["../alfresco-ng2-components/lib/testing/src/lib/shared"],
"@alfresco/adf-core": ["../alfresco-ng2-components/lib/core"],
"@alfresco/adf-core/*": ["../alfresco-ng2-components/lib/core/*/public-api.ts"],
"@alfresco/adf-core/shell": ["../alfresco-ng2-components/lib/core/shell/src/index.ts"],
"@alfresco/adf-core/auth": ["../alfresco-ng2-components/lib/core/auth/src/index.ts"],
"@alfresco/adf-extensions": ["../alfresco-ng2-components/lib/extensions"],
"@alfresco/adf-content-services": ["../alfresco-ng2-components/lib/content-services"],