feat(reports): add dialog widget

projects/core/reports/src/interface/widgets-instances/dialog-widget-instance.ts

@@ -0,0 +1,30 @@
+/**
+ * @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 {AjfDialogWidget} from '../widgets/dialog-widget';
+import {AjfWidgetInstance} from './widget-instance';
+import {AjfWidgetWithContentInstance} from './widget-with-content-instance';
+
+export interface AjfDialogWidgetInstance extends AjfWidgetWithContentInstance {
+  widget: AjfDialogWidget;
+  toggle: AjfWidgetInstance;
+}

projects/core/reports/src/interface/widgets-instances/widget-instance.ts

@@ -25,6 +25,7 @@ import {AjfBaseWidgetInstance} from './base-widget-instance';
 import {AjfChartWidgetInstance} from './chart-widget-instance';
 import {AjfColumnWidgetInstance} from './column-widget-instance';
 import {AjfDataWidgetInstance} from './data-widget-instance';
+import {AjfDialogWidgetInstance} from './dialog-widget-instance';
 import {AjfDynamicTableWidgetInstance} from './dynamic-table-widget-instance';
 import {AjfFormulaWidgetInstance} from './formula-widget-instance';
 import {AjfGraphWidgetInstance} from './graph-widget-instance';
@@ -46,6 +47,7 @@ export type AjfWidgetInstance =
   | AjfChartWidgetInstance
   | AjfColumnWidgetInstance
   | AjfDataWidgetInstance
+  | AjfDialogWidgetInstance
   | AjfDynamicTableWidgetInstance
   | AjfFormulaWidgetInstance
   | AjfGraphWidgetInstance

projects/core/reports/src/interface/widgets/dialog-widget.ts

@@ -0,0 +1,30 @@
+/**
+ * @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 {AjfWidget} from './widget';
+import {AjfWidgetWithContent} from './widget-with-content';
+import {AjfWidgetType} from './widget-type';
+
+export interface AjfDialogWidget extends AjfWidgetWithContent {
+  widgetType: AjfWidgetType.Dialog;
+  toggle: AjfWidget;
+}

projects/core/reports/src/interface/widgets/widget-type.ts

@@ -35,5 +35,6 @@ export enum AjfWidgetType {
   DynamicTable,
   Graph,
   PaginatedList,
+  Dialog,
   LENGTH,
 }

projects/core/reports/src/interface/widgets/widget.ts

@@ -24,6 +24,7 @@ import {AjfBaseWidget} from './base-widget';
 import {AjfChartWidget} from './chart-widget';
 import {AjfColumnWidget} from './column-widget';
 import {AjfDataWidget} from './data-widget';
+import {AjfDialogWidget} from './dialog-widget';
 import {AjfDynamicTableWidget} from './dynamic-table-widget';
 import {AjfFormulaWidget} from './formula-widget';
 import {AjfImageContainerWidget} from './image-container-widget';
@@ -45,6 +46,7 @@ export type AjfWidget =
   | AjfChartWidget
   | AjfColumnWidget
   | AjfDataWidget
+  | AjfDialogWidget
   | AjfDynamicTableWidget
   | AjfFormulaWidget
   | AjfGraphWidget

projects/core/reports/src/public_api.ts

@@ -42,6 +42,7 @@ export * from './interface/widgets/chart-widget';
 export * from './interface/widgets/column-widget';
 export * from './interface/widgets/custom-widget';
 export * from './interface/widgets/data-widget';
+export * from './interface/widgets/dialog-widget';
 export * from './interface/widgets/filter';
 export * from './interface/widgets/formula-widget';
 export * from './interface/widgets/graph-widget';
@@ -61,6 +62,7 @@ export * from './interface/widgets-instances/base-widget-instance';
 export * from './interface/widgets-instances/chart-widget-instance';
 export * from './interface/widgets-instances/column-widget-instance';
 export * from './interface/widgets-instances/data-widget-instance';
+export * from './interface/widgets-instances/dialog-widget-instance';
 export * from './interface/widgets-instances/filter-instance';
 export * from './interface/widgets-instances/formula-widget-instance';
 export * from './interface/widgets-instances/graph-widget-instance';

projects/core/reports/src/utils/widgets-instances/is-dialog-widget-instance.ts

@@ -0,0 +1,31 @@
+/**
+ * @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 {AjfDialogWidgetInstance} from '../../interface/widgets-instances/dialog-widget-instance';
+import {AjfWidgetInstance} from '../../interface/widgets-instances/widget-instance';
+import {isDialogWidget} from '../widgets/is-dialog-widget';
+
+export const isDialogWidgetInstance = (
+  instance: AjfWidgetInstance,
+): instance is AjfDialogWidgetInstance => {
+  return instance != null && isDialogWidget(instance.widget);
+};

projects/core/reports/src/utils/widgets-instances/widget-to-widget-instance.ts

@@ -32,6 +32,7 @@ import {AjfWidgetInstance} from '../../interface/widgets-instances/widget-instan
 import {AjfWidget} from '../../interface/widgets/widget';
 import {evaluateAggregation} from '../aggregation/evaluate-aggregation';
 import {isChartWidget} from '../widgets/is-chart-widget';
+import {isDialogWidget} from '../widgets/is-dialog-widget';
 import {isDynamicTableWidget} from '../widgets/is-dynamic-table-widget';
 import {isFormulaWidget} from '../widgets/is-formula-widget';
 import {isGraphWidget} from '../widgets/is-graph-widget';
@@ -43,6 +44,7 @@ import {isTableWidget} from '../widgets/is-table-widget';
 import {isTextWidget} from '../widgets/is-text-widget';
 import {componentsMap} from '../widgets/widgets-map';
 import {isChartWidgetInstance} from '../widgets-instances/is-chart-widget-instance';
+import {isDialogWidgetInstance} from '../widgets-instances/is-dialog-widget-instance';
 import {isDynamicTableWidgetInstance} from '../widgets-instances/is-dynamic-table-widget-instance';
 import {isFormulaWidgetInstance} from '../widgets-instances/is-formula-widget-instance';
 import {isGraphWidgetInstance} from '../widgets-instances/is-graph-widget-instance';
@@ -271,6 +273,8 @@ export function widgetToWidgetInstance(
         return node as AjfGraphNode;
       });
     }
+  } else if (isDialogWidget(widget) && isDialogWidgetInstance(wi)) {
+    wi.toggle = widgetToWidgetInstance(widget.toggle, context, ts, variables);
   } else if (widget.widgetType > 100) {
     const iiFn =
       componentsMap[widget.widgetType] != null

projects/core/reports/src/utils/widgets/is-dialog-widget.ts

@@ -0,0 +1,29 @@
+/**
+ * @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 {AjfDialogWidget} from '../../interface/widgets/dialog-widget';
+import {AjfWidget} from '../../interface/widgets/widget';
+import {AjfWidgetType} from '../../interface/widgets/widget-type';
+
+export const isDialogWidget = (widget: AjfWidget): widget is AjfDialogWidget => {
+  return widget != null && widget.widgetType === AjfWidgetType.Dialog;
+};

projects/dev-app/src/widgets.ts

@@ -292,6 +292,51 @@ export function demoWidgets(ts: TranslocoService): {name: string; instance: AjfW
         })),
       },
     },
+    {
+      name: 'Dialog',
+      instance: {
+        ...createWidgetInstance(
+          {
+            ...baseWidget,
+            widgetType: AjfWidgetType.Dialog,
+            toggle: {
+              ...baseWidget,
+              widgetType: AjfWidgetType.Text,
+              htmlText: '',
+            },
+            content: [],
+          },
+          {},
+          ts,
+        ),
+        toggle: {
+          ...createWidgetInstance(
+            {
+              ...baseWidget,
+              widgetType: AjfWidgetType.Text,
+              htmlText: '',
+            },
+            {},
+            ts,
+          ),
+          htmlText: `Dialog toggle`,
+        },
+        content: [
+          {
+            ...createWidgetInstance(
+              {
+                ...baseWidget,
+                widgetType: AjfWidgetType.Text,
+                htmlText: '',
+              },
+              {},
+              ts,
+            ),
+            htmlText: `Dialog content`,
+          },
+        ],
+      },
+    },
   ];
   return widgets;
 }

projects/ionic/reports/src/dialog-modal.html

@@ -0,0 +1 @@
+<ajf-widget *ngFor="let instance of content" [instance]="instance"></ajf-widget>

projects/ionic/reports/src/dialog-modal.ts

@@ -0,0 +1,34 @@
+/**
+ * @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 {AjfWidgetInstance} from '@ajf/core/reports';
+import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  templateUrl: 'dialog-modal.html',
+  styleUrls: ['dialog-modal.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AjfDialogModal {
+  @Input() content: AjfWidgetInstance[] = [];
+}

projects/ionic/reports/src/dialog-widget.html

@@ -0,0 +1,3 @@
+<a *ngIf="instance" class="ajf-dialog-toggle" (click)="openDialog()">
+  <ajf-widget [instance]="instance.toggle"></ajf-widget>
+</a>

projects/ionic/reports/src/dialog-widget.scss

@@ -0,0 +1,4 @@
+.ajf-dialog-toggle {
+  display: block;
+  cursor: pointer;
+}

projects/ionic/reports/src/dialog-widget.ts

@@ -0,0 +1,74 @@
+/**
+ * @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, AjfDialogWidgetInstance} from '@ajf/core/reports';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnDestroy,
+  ViewEncapsulation,
+} from '@angular/core';
+import {ModalController} from '@ionic/angular';
+
+import {AjfDialogModal} from './dialog-modal';
+
+@Component({
+  templateUrl: 'dialog-widget.html',
+  styleUrls: ['dialog-widget.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AjfDialogWidgetComponent
+  extends AjfBaseWidgetComponent<AjfDialogWidgetInstance>
+  implements OnDestroy
+{
+  private _modal?: HTMLIonModalElement;
+
+  constructor(cdr: ChangeDetectorRef, el: ElementRef, private _modalCtrl: ModalController) {
+    super(cdr, el);
+  }
+
+  ngOnDestroy(): void {
+    if (this._modal) {
+      this._modal.dismiss();
+    }
+  }
+
+  openDialog(): void {
+    if (this.instance == null || this.instance.content.length === 0) {
+      return;
+    }
+    this._modalCtrl
+      .create({
+        component: AjfDialogModal,
+        componentProps: {
+          content: this.instance.content,
+        },
+      })
+      .then(modal => {
+        this._modal = modal;
+        modal.present();
+      });
+  }
+}

projects/ionic/reports/src/public_api.ts

@@ -21,6 +21,7 @@
  */
 
 export * from './chart-widget';
+export * from './dialog-widget';
 export * from './formula-widget';
 export * from './image-container-widget';
 export * from './image-widget';