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

support custom components as action elements (#536)

Browse Source 
* support custom components as action elements

* fix action type

* remove testing code

* disable demo button by default
This commit is contained in:
Denys Vuika 2018-07-25 15:14:07 +01:00 committed by GitHub
parent 5c0ab7b8f0
commit 262240c8ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 149 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
extension.schema.json
View File

@ -109,7 +109,7 @@
"type": {
"description": "Element type",
"type": "string",
"enum": ["default", "button", "separator", "menu"]
"enum": ["default", "button", "separator", "menu", "custom"]
},
"title": {
"description": "Element title",
@ -127,6 +127,10 @@
"description": "Toggles disabled state",
"type": "boolean"
},
"component": {
"description": "Custom component id (requires type to be 'custom')",
"type": "string"
},
"children": {
"description": "Child entries for the container types.",
"type": "array",

4
src/app/extensions/action.extensions.ts
View File

@ -27,7 +27,8 @@ export enum ContentActionType {
default = 'button',
button = 'button',
separator = 'separator',
menu = 'menu'
menu = 'menu',
custom = 'custom'
}
export interface ContentActionRef {
@ -39,6 +40,7 @@ export interface ContentActionRef {
icon?: string;
disabled?: boolean;
children?: Array<ContentActionRef>;
component?: string;
actions?: {
click?: string;
[key: string]: string;

75
src/app/extensions/components/custom-component/custom.component.ts Normal file
View File

@ -0,0 +1,75 @@
/*!
* @license
* Alfresco Example Content Application
*
* Copyright (C) 2005 - 2018 Alfresco Software Limited
*
* This file is part of the Alfresco Example Content Application.
* If the software was purchased under a paid Alfresco license, the terms of
* the paid license agreement will prevail. Otherwise, the software is
* provided under the following open source license terms:
*
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
import {
Component,
Input,
ComponentRef,
OnInit,
ComponentFactoryResolver,
ViewChild,
ViewContainerRef,
OnDestroy
} from '@angular/core';
import { ExtensionService } from '../../extension.service';
@Component({
selector: 'app-custom-component',
template: `<div #content></div>`
})
export class CustomExtensionComponent implements OnInit, OnDestroy {
@ViewChild('content', { read: ViewContainerRef })
content: ViewContainerRef;
@Input() id: string;
private componentRef: ComponentRef<any>;
constructor(
private extensions: ExtensionService,
private componentFactoryResolver: ComponentFactoryResolver
) {}
ngOnInit() {
const componentType = this.extensions.getComponentById(this.id);
if (componentType) {
const factory = this.componentFactoryResolver.resolveComponentFactory(
componentType
);
if (factory) {
this.content.clear();
this.componentRef = this.content.createComponent(factory, 0);
// this.setupWidget(this.componentRef);
}
}
}
ngOnDestroy() {
if (this.componentRef) {
this.componentRef.destroy();
this.componentRef = null;
}
}
}

36
src/app/extensions/components/custom-component/demo.button.ts Normal file
View File

@ -0,0 +1,36 @@
/*!
* @license
* Alfresco Example Content Application
*
* Copyright (C) 2005 - 2018 Alfresco Software Limited
*
* This file is part of the Alfresco Example Content Application.
* If the software was purchased under a paid Alfresco license, the terms of
* the paid license agreement will prevail. Otherwise, the software is
* provided under the following open source license terms:
*
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
import { Component } from '@angular/core';
@Component({
selector: 'app-demo-button',
template: `
<button color="primary" mat-icon-button>
<mat-icon>extension</mat-icon>
</button>
`
})
export class DemoButtonComponent {}

7
src/app/extensions/components/toolbar-action/toolbar-action.component.html
View File

@ -6,7 +6,9 @@
(click)="runAction(entry.actions.click)">
<mat-icon>{{ entry.icon }}</mat-icon>
</button>
<adf-toolbar-divider *ngSwitchCase="'separator'"></adf-toolbar-divider>
<ng-container *ngSwitchCase="'menu'">
<button
color="primary"
@ -27,4 +29,9 @@
</ng-container>
</mat-menu>
</ng-container>
<ng-container *ngSwitchCase="'custom'">
<app-custom-component [id]="entry.component"></app-custom-component>
</ng-container>
</ng-container>

19
src/app/extensions/core.extensions.module.ts
View File

@ -31,13 +31,16 @@ import { TrashcanComponent } from '../components/trashcan/trashcan.component';
import { ToolbarActionComponent } from './components/toolbar-action/toolbar-action.component';
import * as app from './evaluators/app.evaluators';
import { ExtensionService } from './extension.service';
import { CustomExtensionComponent } from './components/custom-component/custom.component';
import { DemoButtonComponent } from './components/custom-component/demo.button';
export function setupExtensions(extensions: ExtensionService): Function {
return () =>
new Promise(resolve => {
extensions.setComponents({
'app.layout.main': LayoutComponent,
'app.components.trashcan': TrashcanComponent
'app.components.trashcan': TrashcanComponent,
'app.demo.button': DemoButtonComponent
});
extensions.setAuthGuards({
@ -61,8 +64,18 @@ export function setupExtensions(extensions: ExtensionService): Function {
@NgModule({
imports: [CommonModule, CoreModule.forChild()],
declarations: [ToolbarActionComponent],
exports: [ToolbarActionComponent]
declarations: [
ToolbarActionComponent,
CustomExtensionComponent,
DemoButtonComponent
],
exports: [
ToolbarActionComponent,
CustomExtensionComponent
],
entryComponents: [
DemoButtonComponent
]
})
export class CoreExtensionsModule {
static forRoot(): ModuleWithProviders {

7
src/assets/app.extensions.json
View File

@ -207,6 +207,13 @@
"id": "app.toolbar.separator.2",
"order": 200,
"type": "separator"
},
{
"disabled": true,
"id": "app.toolbar.custom.1",
"order": 200,
"type": "custom",
"component": "app.demo.button"
}
]
}