[ACA-3296] Header - support actions order (#1464)

* header action order property

* apply sort for parents and children

* update tests

* use parent class to set style

* render user component through configuration

* header should allow disable actions rendering

* update e2e header resource
This commit is contained in:
Cilibiu Bogdan 2020-05-19 18:56:03 +03:00 committed by GitHub
parent 523d9e5bcb
commit 234b41b917
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 140 additions and 17 deletions

View File

@ -908,11 +908,12 @@
"description": "Application settings",
"icon": "settings",
"disabled": true,
"order": 10,
"actions": {
"click": "app.actions.settings"
},
"rules": {
"visible": "app.toolbar.canViewFile"
"visible": "app.navigation.isNotTrashcan"
}
},
{
@ -920,11 +921,12 @@
"title": "New Button",
"description": "new button description",
"icon": "alarm_on",
"order": 20,
"actions": {
"click": "app.actions.settings"
},
"rules": {
"visible": "app.toolbar.canViewFile"
"visible": "app.navigation.isNotTrashcan"
}
}
]

View File

@ -869,24 +869,118 @@ describe('AppExtensionService', () => {
features: {
userActions: [
{
id: 'aca:toolbar/separator-2',
id: 'aca:toolbar/action-2',
order: 2,
type: ContentActionType.separator,
type: ContentActionType.button,
title: 'action2'
},
{
id: 'aca:toolbar/separator-1',
id: 'aca:toolbar/action-1',
order: 1,
type: ContentActionType.separator,
type: ContentActionType.button,
title: 'action1'
}
]
}
});
expect(service.userActions.length).toBe(2);
expect(service.userActions[0].id).toBe('aca:toolbar/separator-1');
expect(service.userActions[1].id).toBe('aca:toolbar/separator-2');
const actions = service.getUserActions();
expect(actions[0].id).toBe('aca:toolbar/action-1');
expect(actions[1].id).toBe('aca:toolbar/action-2');
});
});
describe('getHeaderActions', () => {
it('should load user actions from the config', () => {
applyConfig({
$id: 'test',
$name: 'test',
$version: '1.0.0',
$license: 'MIT',
$vendor: 'Good company',
$runtime: '1.5.0',
features: {
header: [
{
id: 'header.action.separator.1',
order: 1,
type: ContentActionType.separator
},
{
id: 'header.action.separator.2',
order: 2,
type: ContentActionType.separator
}
]
}
});
expect(service.headerActions.length).toBe(2);
});
it('should sort header actions by order', () => {
applyConfig({
$id: 'test',
$name: 'test',
$version: '1.0.0',
$license: 'MIT',
$vendor: 'Good company',
$runtime: '1.5.0',
features: {
header: [
{
id: 'header.action.1',
order: 2,
type: ContentActionType.button
},
{
id: 'header.action.2',
order: 1,
type: ContentActionType.button
}
]
}
});
const actions = service.getHeaderActions();
expect(actions[0].id).toBe('header.action.2');
expect(actions[1].id).toBe('header.action.1');
});
it('should sort header menu children actions by order', () => {
applyConfig({
$id: 'test',
$name: 'test',
$version: '1.0.0',
$license: 'MIT',
$vendor: 'Good company',
$runtime: '1.5.0',
features: {
header: [
{
id: 'header.action.1',
order: 1,
type: ContentActionType.menu,
children: [
{
id: 'header.action.1',
order: 2,
type: ContentActionType.button
},
{
id: 'header.action.2',
order: 1,
type: ContentActionType.button
}
]
}
]
}
});
const actions = service.getHeaderActions()[0];
expect(actions.children[0].id).toBe('header.action.2');
expect(actions.children[1].id).toBe('header.action.1');
});
});
});

View File

@ -499,7 +499,26 @@ export class AppExtensionService implements RuleContext {
}
getHeaderActions(): Array<ContentActionRef> {
return this.headerActions.filter(action => this.filterVisible(action));
return this.headerActions
.filter(action => this.filterVisible(action))
.map(action => {
if (action.type === ContentActionType.menu) {
const copy = this.copyAction(action);
if (copy.children && copy.children.length > 0) {
copy.children = copy.children
.filter(childAction => this.filterVisible(childAction))
.sort(sortByOrder)
.reduce(reduceEmptyMenus, [])
.reduce(reduceSeparators, []);
}
return copy;
}
return action;
})
.sort(sortByOrder)
.reduce(reduceEmptyMenus, [])
.reduce(reduceSeparators, []);
}
getAllowedContextMenuActions(): Array<ContentActionRef> {

View File

@ -51,6 +51,7 @@ import { LibrariesComponent } from './components/libraries/libraries.component';
import { FavoriteLibrariesComponent } from './components/favorite-libraries/favorite-libraries.component';
import { NodeVersionUploadDialogComponent } from './dialogs/node-version-upload/node-version-upload.dialog';
import { NodeVersionsDialogComponent } from './dialogs/node-versions/node-versions.dialog';
import { CurrentUserComponent } from './components/current-user/current-user.component';
import { AppStoreModule } from './store/app-store.module';
import { MaterialModule } from './material.module';
@ -177,7 +178,8 @@ registerLocaleData(localeSv);
NodeVersionsDialogComponent,
NodeVersionUploadDialogComponent,
LibraryDialogComponent,
CreateFromTemplateDialogComponent
CreateFromTemplateDialogComponent,
CurrentUserComponent
],
bootstrap: [AppComponent]
})

View File

@ -13,8 +13,6 @@
<adf-toolbar-divider></adf-toolbar-divider>
<aca-current-user></aca-current-user>
<ng-container *ngFor="let actionRef of actions; trackBy: trackByActionId">
<aca-toolbar-action [actionRef]="actionRef" color="default">
</aca-toolbar-action>

View File

@ -1,9 +1,8 @@
@mixin toolbar-actions-theme($theme) {
$foreground: map-get($theme, foreground);
app-toolbar-button,
app-toolbar-menu,
adf-dynamic-component {
.aca-toolbar-action {
color: mat-color($foreground, text, 0.72);
margin: 0 5px;
}
}

View File

@ -52,6 +52,7 @@ import { ToggleSharedComponent } from '../components/common/toggle-shared/toggle
import { ViewNodeComponent } from '../components/toolbar/view-node/view-node.component';
import { LanguagePickerComponent } from '../components/common/language-picker/language-picker.component';
import { LogoutComponent } from '../components/common/logout/logout.component';
import { CurrentUserComponent } from '../components/current-user/current-user.component';
import { AppExtensionService } from '@alfresco/aca-shared';
export function setupExtensions(service: AppExtensionService): Function {
@ -105,7 +106,8 @@ export class CoreExtensionsModule {
'app.toolbar.toggleEditOffline': ToggleEditOfflineComponent,
'app.toolbar.viewNode': ViewNodeComponent,
'app.languagePicker': LanguagePickerComponent,
'app.logout': LogoutComponent
'app.logout': LogoutComponent,
'app.user': CurrentUserComponent
});
extensions.setAuthGuards({

View File

@ -38,6 +38,12 @@
}
],
"header": [
{
"id": "app.header.user",
"type": "custom",
"component": "app.user",
"order": 100
},
{
"id": "app.header.more",
"type": "menu",
@ -47,6 +53,7 @@
"children": [
{
"id": "app.header.about",
"order": 100,
"title": "APP.BROWSE.ABOUT.TITLE",
"description": "APP.BROWSE.ABOUT.TITLE",
"icon": "info",