support custom components as action elements (#536)

* support custom components as action elements

* fix action type

* remove testing code

* disable demo button by default

extension.schema.json

@@ -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",

src/app/extensions/action.extensions.ts

@@ -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;

src/app/extensions/components/custom-component/custom.component.ts

@@ -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;
+        }
+    }
+}

src/app/extensions/components/custom-component/demo.button.ts

@@ -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 {}

src/app/extensions/components/toolbar-action/toolbar-action.component.html

@@ -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>
+

src/app/extensions/core.extensions.module.ts

@@ -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],
+    declarations: [
-    exports: [ToolbarActionComponent]
+        ToolbarActionComponent,
+        CustomExtensionComponent,
+        DemoButtonComponent
+    ],
+    exports: [
+        ToolbarActionComponent,
+        CustomExtensionComponent
+    ],
+    entryComponents: [
+        DemoButtonComponent
+    ]
 })
 export class CoreExtensionsModule {
     static forRoot(): ModuleWithProviders {

src/assets/app.extensions.json

@@ -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"
                 }
             ]
         }