feat(material/reports): add support for custom report widgets definition

src/dev-app/mat-reports/BUILD.bazel

@@ -7,6 +7,7 @@ ng_module(
     srcs = glob(["**/*.ts"]),
     assets = [
         "reports-demo.html",
+        ":custom_widget_scss",
         ":reports_demo_scss",
     ],
     deps = [
@@ -15,6 +16,11 @@ ng_module(
     ],
 )
 
+sass_binary(
+    name = "custom_widget_scss",
+    src = "custom-widget.scss",
+)
+
 sass_binary(
     name = "reports_demo_scss",
     src = "reports-demo.scss",

src/dev-app/mat-reports/custom-widget.html

@@ -0,0 +1 @@
+Custom widget

src/dev-app/mat-reports/custom-widget.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) 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 Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {AjfBaseWidgetComponent} from '@ajf/core/reports';
+import {ChangeDetectorRef, Component, ElementRef} from '@angular/core';
+
+@Component({
+  selector: 'demo-custom-widget',
+  templateUrl: 'custom-widget.html',
+  styleUrls: ['custom-widget.css'],
+})
+export class CustomWidget extends AjfBaseWidgetComponent {
+  constructor(cdr: ChangeDetectorRef, el: ElementRef) {
+    super(cdr, el);
+  }
+}

src/dev-app/mat-reports/report.ts

@@ -21,51 +21,56 @@
  */
 
 export const testReport = {
-  'header': {
-    'styles': {'background-color': '#56d3cf', 'color': '#ffffff'},
-    'content': [{
-      'columns': [0.55, -1, 0.45],
-      'widgetType': 0,
-      'content': [
-        {
-          'widgetType': 0,
-          'columns': [-1, -1],
-          'styles': {'background-color': '#37c4ca'},
-          'content': [
-            {
-              'widgetType': 2,
-              'styles': {
-                'width': '44px',
-                'height': '44px',
-                'border-radius': '22px',
-                'background-color': '#2bb7c0',
-                'padding': '10px',
-                'margin': '0 15px'
+  header: {
+    styles: {'background-color': '#56d3cf', color: '#ffffff'},
+    content: [
+      {
+        columns: [0.55, -1, 0.45],
+        widgetType: 0,
+        content: [
+          {
+            widgetType: 0,
+            columns: [-1, -1],
+            styles: {'background-color': '#37c4ca'},
+            content: [
+              {
+                widgetType: 2,
+                styles: {
+                  width: '44px',
+                  height: '44px',
+                  'border-radius': '22px',
+                  'background-color': '#2bb7c0',
+                  padding: '10px',
+                  margin: '0 15px'
+                },
+                imageUrl: 'https://dl.dropboxusercontent.com/u/53590771/wash.png'
               },
-              'imageUrl': 'https://dl.dropboxusercontent.com/u/53590771/wash.png'
-            },
-            {'widgetType': 3, 'htmlText': 'prova', 'styles': {'padding': '0 15px'}}
-          ]
-        },
-        {
-          'widgetType': 0,
-          'styles': {
-            'border-top': '2em solid transparent',
-            'border-bottom': '2em solid transparent',
-            'border-left': '2em solid #37c4ca'
-          }
-        },
-        {
-          'widgetType': 3,
-          'styles': {'padding': '15px', 'color': 'white'},
-          'htmlText': '<b>inutile</b>'
-        }
-      ]
-    }]
+              {widgetType: 3, htmlText: 'prova', styles: {padding: '0 15px'}}
+            ]
+          },
+          {
+            widgetType: 0,
+            styles: {
+              'border-top': '2em solid transparent',
+              'border-bottom': '2em solid transparent',
+              'border-left': '2em solid #37c4ca'
+            }
+          },
+          {widgetType: 3, styles: {padding: '15px', color: 'white'}, htmlText: '<b>inutile</b>'}
+        ]
+      },
+      {widgetType: 101},
+    ]
   },
-  'footer': [],
-  'content': [{
-    'styles': {'margin': '15px 0'},
-    'content': [{'columns': [0.5, -1, 0.5], 'widgetType': 0, 'content': []}]
+  footer: [],
+  content: [{
+    styles: {margin: '15px 0'},
+    content: [
+      {
+        columns: [0.5, -1, 0.5],
+        widgetType: 0,
+        content: [],
+      },
+    ]
   }]
 };

src/dev-app/mat-reports/reports-demo-module.ts

@@ -23,19 +23,23 @@
 import {AjfReportsModule} from '@ajf/material/reports';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
 import {MatGridListModule} from '@angular/material/grid-list';
 import {RouterModule} from '@angular/router';
 
+import {CustomWidget} from './custom-widget';
 import {ReportsDemo} from './reports-demo';
 
 @NgModule({
   imports: [
     AjfReportsModule,
     FormsModule,
+    MatButtonModule,
     MatGridListModule,
     RouterModule.forChild([{path: '', component: ReportsDemo}]),
   ],
   declarations: [
+    CustomWidget,
     ReportsDemo,
   ],
 })

src/dev-app/mat-reports/reports-demo.ts

@@ -21,9 +21,11 @@
  */
 
 import {AjfReportInstance, AjfReportSerializer, createReportInstance} from '@ajf/core/reports';
+import {AjfWidgetService} from '@ajf/material/reports';
 import {Component} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
 
+import {CustomWidget} from './custom-widget';
 import {testReport} from './report';
 
 @Component({
@@ -36,7 +38,8 @@ export class ReportsDemo {
   reportStr: string = JSON.stringify(testReport);
   context: string = '{}';
 
-  constructor(private _ts: TranslateService) {
+  constructor(private _ts: TranslateService, widgetService: AjfWidgetService) {
+    widgetService.registerCustomWidget({widgetType: 101, component: CustomWidget});
     const engDict = {
       'Salva': 'Save',
       'Esempio': 'Sample',

src/material/reports/public-api.ts

@@ -33,3 +33,4 @@ export * from './reports-module';
 export * from './table-widget';
 export * from './text-widget';
 export * from './widget';
+export * from './widget-service';

src/material/reports/widget-service.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) 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 Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {AjfWidgetService as CoreService, AjfWidgetType as wt} from '@ajf/core/reports';
+import {Injectable} from '@angular/core';
+
+import {AjfChartWidgetComponent} from './chart-widget';
+import {AjfColumnWidgetComponent} from './column-widget';
+import {AjfFormulaWidgetComponent} from './formula-widget';
+import {AjfImageContainerWidgetComponent} from './image-container-widget';
+import {AjfImageWidgetComponent} from './image-widget';
+import {AjfLayoutWidgetComponent} from './layout-widget';
+import {AjfMapWidgetComponent} from './map-widget';
+import {AjfPageBreakWidgetComponent} from './page-break-widget';
+import {AjfTableWidgetComponent} from './table-widget';
+import {AjfTextWidgetComponent} from './text-widget';
+
+@Injectable({providedIn: 'root'})
+export class AjfWidgetService extends CoreService {
+  constructor() {
+    super();
+    this.componentsMap[wt.Layout] = {component: AjfLayoutWidgetComponent};
+    this.componentsMap[wt.PageBreak] = {component: AjfPageBreakWidgetComponent};
+    this.componentsMap[wt.Image] = {component: AjfImageWidgetComponent};
+    this.componentsMap[wt.Text] = {component: AjfTextWidgetComponent};
+    this.componentsMap[wt.Chart] = {component: AjfChartWidgetComponent};
+    this.componentsMap[wt.Table] = {component: AjfTableWidgetComponent};
+    this.componentsMap[wt.DynamicTable] = {component: AjfTableWidgetComponent};
+    this.componentsMap[wt.Map] = {component: AjfMapWidgetComponent};
+    this.componentsMap[wt.Column] = {component: AjfColumnWidgetComponent};
+    this.componentsMap[wt.Formula] = {component: AjfFormulaWidgetComponent};
+    this.componentsMap[wt.ImageContainer] = {component: AjfImageContainerWidgetComponent};
+  }
+}

src/material/reports/widget.ts

@@ -20,25 +20,16 @@
  *
  */
 
-import {AjfReportWidget as CoreComponent, AjfWidgetType} from '@ajf/core/reports';
+import {AjfReportWidget as CoreComponent, AjfWidgetComponentsMap} from '@ajf/core/reports';
 import {
   ChangeDetectionStrategy,
   Component,
   ComponentFactoryResolver,
   Renderer2,
-  ViewEncapsulation
+  ViewEncapsulation,
 } from '@angular/core';
 
-import {AjfChartWidgetComponent} from './chart-widget';
-import {AjfColumnWidgetComponent} from './column-widget';
-import {AjfFormulaWidgetComponent} from './formula-widget';
-import {AjfImageContainerWidgetComponent} from './image-container-widget';
-import {AjfImageWidgetComponent} from './image-widget';
-import {AjfLayoutWidgetComponent} from './layout-widget';
-import {AjfMapWidgetComponent} from './map-widget';
-import {AjfPageBreakWidgetComponent} from './page-break-widget';
-import {AjfTableWidgetComponent} from './table-widget';
-import {AjfTextWidgetComponent} from './text-widget';
+import {AjfWidgetService} from './widget-service';
 
 @Component({
   selector: 'ajf-widget',
@@ -48,21 +39,10 @@ import {AjfTextWidgetComponent} from './text-widget';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AjfReportWidget extends CoreComponent {
-  constructor(cfr: ComponentFactoryResolver, renderer: Renderer2) {
+  readonly widgetsMap: AjfWidgetComponentsMap;
+
+  constructor(cfr: ComponentFactoryResolver, renderer: Renderer2, widgetService: AjfWidgetService) {
     super(cfr, renderer);
+    this.widgetsMap = widgetService.componentsMap;
   }
-
-  widgetsMap = {
-    [AjfWidgetType.Layout]: {component: AjfLayoutWidgetComponent},
-    [AjfWidgetType.PageBreak]: {component: AjfPageBreakWidgetComponent},
-    [AjfWidgetType.Image]: {component: AjfImageWidgetComponent},
-    [AjfWidgetType.Text]: {component: AjfTextWidgetComponent},
-    [AjfWidgetType.Chart]: {component: AjfChartWidgetComponent},
-    [AjfWidgetType.Table]: {component: AjfTableWidgetComponent},
-    [AjfWidgetType.DynamicTable]: {component: AjfTableWidgetComponent},
-    [AjfWidgetType.Map]: {component: AjfMapWidgetComponent},
-    [AjfWidgetType.Column]: {component: AjfColumnWidgetComponent},
-    [AjfWidgetType.Formula]: {component: AjfFormulaWidgetComponent},
-    [AjfWidgetType.ImageContainer]: {component: AjfImageContainerWidgetComponent},
-  };
 }

tools/public_api_guard/material/reports.d.ts

@@ -59,42 +59,8 @@ export declare class AjfReportsModule {
 }
 
 export declare class AjfReportWidget extends CoreComponent {
-    widgetsMap: {
-        0: {
-            component: typeof AjfLayoutWidgetComponent;
-        };
-        1: {
-            component: typeof AjfPageBreakWidgetComponent;
-        };
-        2: {
-            component: typeof AjfImageWidgetComponent;
-        };
-        3: {
-            component: typeof AjfTextWidgetComponent;
-        };
-        4: {
-            component: typeof AjfChartWidgetComponent;
-        };
-        5: {
-            component: typeof AjfTableWidgetComponent;
-        };
-        10: {
-            component: typeof AjfTableWidgetComponent;
-        };
-        6: {
-            component: typeof AjfMapWidgetComponent;
-        };
-        7: {
-            component: typeof AjfColumnWidgetComponent;
-        };
-        8: {
-            component: typeof AjfFormulaWidgetComponent;
-        };
-        9: {
-            component: typeof AjfImageContainerWidgetComponent;
-        };
-    };
-    constructor(cfr: ComponentFactoryResolver, renderer: Renderer2);
+    readonly widgetsMap: AjfWidgetComponentsMap;
+    constructor(cfr: ComponentFactoryResolver, renderer: Renderer2, widgetService: AjfWidgetService);
     static ɵcmp: i0.ɵɵComponentDefWithMeta<AjfReportWidget, "ajf-widget", never, {}, {}, never, never>;
     static ɵfac: i0.ɵɵFactoryDef<AjfReportWidget, never>;
 }
@@ -110,3 +76,9 @@ export declare class AjfTextWidgetComponent extends AjfBaseWidgetComponent<AjfTe
     static ɵcmp: i0.ɵɵComponentDefWithMeta<AjfTextWidgetComponent, "ng-component", never, {}, {}, never, never>;
     static ɵfac: i0.ɵɵFactoryDef<AjfTextWidgetComponent, never>;
 }
+
+export declare class AjfWidgetService extends CoreService {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDef<AjfWidgetService, never>;
+    static ɵprov: i0.ɵɵInjectableDef<AjfWidgetService>;
+}