Ab#74320

libs/shared/src/lib/components/widgets/common/html-widget-content/html-widget-content.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, ElementRef, Input } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 
 /**
@@ -16,4 +16,11 @@ import { SafeHtml } from '@angular/platform-browser';
 export class HtmlWidgetContentComponent {
   @Input() html: SafeHtml = '';
   @Input() style?: string;
+
+  /**
+   * HTML Widget content component
+   *
+   * @param {ElementRef} el Element reference
+   */
+  constructor(public el: ElementRef) {}
 }

libs/shared/src/lib/components/widgets/editor/editor.component.ts

@@ -4,10 +4,11 @@ import {
   Input,
   TemplateRef,
   ViewChild,
+  HostListener,
 } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { Apollo } from 'apollo-angular';
-import { firstValueFrom } from 'rxjs';
+import { firstValueFrom, takeUntil } from 'rxjs';
 import {
   GET_LAYOUT,
   GET_RESOURCE_METADATA,
@@ -26,6 +27,8 @@ import {
   ReferenceDataQueryResponse,
 } from '../../../models/reference-data.model';
 import { GET_REFERENCE_DATA } from './graphql/queries';
+import { HtmlWidgetContentComponent } from '../common/html-widget-content/html-widget-content.component';
+import { UnsubscribeComponent } from '../../utils/unsubscribe/unsubscribe.component';
 
 /**
  * Text widget component using KendoUI
@@ -35,13 +38,14 @@ import { GET_REFERENCE_DATA } from './graphql/queries';
   templateUrl: './editor.component.html',
   styleUrls: ['./editor.component.scss'],
 })
-export class EditorComponent implements OnInit {
+export class EditorComponent extends UnsubscribeComponent implements OnInit {
   /** Widget settings */
   @Input() settings: any;
   /** Should show padding */
   @Input() usePadding = true;
 
   private layout: any;
+  private record?: any;
   /** Configured reference data */
   private referenceData?: ReferenceData;
   private fields: any[] = [];
@@ -53,6 +57,9 @@ export class EditorComponent implements OnInit {
   public formattedStyle?: string;
 
   @ViewChild('headerTemplate') headerTemplate!: TemplateRef<any>;
+  /** Reference to html content component */
+  @ViewChild(HtmlWidgetContentComponent)
+  htmlContentComponent!: HtmlWidgetContentComponent;
 
   /** @returns does the card use reference data */
   get useReferenceData() {
@@ -87,7 +94,9 @@ export class EditorComponent implements OnInit {
     private translate: TranslateService,
     private gridService: GridService,
     private referenceDataService: ReferenceDataService
-  ) {}
+  ) {
+    super();
+  }
 
   /** Sanitizes the text. */
   async ngOnInit(): Promise<void> {
@@ -132,6 +141,60 @@ export class EditorComponent implements OnInit {
     }
   }
 
+  /**
+   * Listen to click events from host element, if record editor is clicked, open record editor modal
+   *
+   * @param event Click event from host element
+   */
+  @HostListener('click', ['$event'])
+  onContentClick(event: any) {
+    const content = this.htmlContentComponent.el.nativeElement;
+    const editorTriggers = content.querySelectorAll('.record-editor');
+    editorTriggers.forEach((recordEditor: HTMLElement) => {
+      if (recordEditor.contains(event.target)) {
+        this.openEditRecordModal();
+      }
+    });
+  }
+
+  /**
+   * Open edit record modal.
+   */
+  private async openEditRecordModal() {
+    if (this.record && this.record.canUpdate) {
+      const { FormModalComponent } = await import(
+        '../../form-modal/form-modal.component'
+      );
+      const dialogRef = this.dialog.open(FormModalComponent, {
+        disableClose: true,
+        data: {
+          recordId: this.record.id,
+          // template: this.settings.template || null,
+          template: null,
+        },
+        autoFocus: false,
+      });
+      dialogRef.closed.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+        if (value) {
+          // Update the record, based on new configuration
+          this.getRecord().then(() => {
+            this.formattedStyle = this.dataTemplateService.renderStyle(
+              this.settings.wholeCardStyles || false,
+              this.fieldsValue,
+              this.styles
+            );
+            this.formattedHtml = this.dataTemplateService.renderHtml(
+              this.settings.text,
+              this.fieldsValue,
+              this.fields,
+              this.styles
+            );
+          });
+        }
+      });
+    }
+  }
+
   /**
    * Get reference data.
    */
@@ -225,8 +288,8 @@ export class EditorComponent implements OnInit {
           },
         })
       );
-      const record: any = get(res.data, `${queryName}.edges[0].node`, null);
-      this.fieldsValue = { ...record };
+      this.record = get(res.data, `${queryName}.edges[0].node`, null);
+      this.fieldsValue = { ...this.record };
       const metaQuery = this.queryBuilder.buildMetaQuery(this.layout.query);
       if (metaQuery) {
         const metaData = await firstValueFrom(metaQuery);

libs/shared/src/lib/components/widgets/summary-card/summary-card-item-content/summary-card-item-content.component.ts

@@ -1,12 +1,20 @@
 import {
   Component,
+  HostListener,
   Input,
   OnChanges,
   OnInit,
+  Optional,
+  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { DataTemplateService } from '../../../../services/data-template/data-template.service';
+import { UnsubscribeComponent } from '../../../utils/unsubscribe/unsubscribe.component';
+import { Dialog } from '@angular/cdk/dialog';
+import { HtmlWidgetContentComponent } from '../../common/html-widget-content/html-widget-content.component';
+import { takeUntil } from 'rxjs';
+import { SummaryCardItemComponent } from '../summary-card-item/summary-card-item.component';
 
 /**
  * Content component of Single Item of Summary Card.
@@ -18,22 +26,42 @@ import { DataTemplateService } from '../../../../services/data-template/data-tem
   styleUrls: ['./summary-card-item-content.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class SummaryCardItemContentComponent implements OnInit, OnChanges {
+export class SummaryCardItemContentComponent
+  extends UnsubscribeComponent
+  implements OnInit, OnChanges
+{
+  /** Html template */
   @Input() html = '';
+  /** Available fields */
   @Input() fields: any[] = [];
+  /** Fields value */
   @Input() fieldsValue: any;
+  /** Styles to load */
   @Input() styles: any[] = [];
+  /** Should style apply to whole card */
   @Input() wholeCardStyles = false;
-
+  /** Reference to html content component */
+  @ViewChild(HtmlWidgetContentComponent)
+  htmlContentComponent!: HtmlWidgetContentComponent;
+  /** Formatted html, to be rendered */
   public formattedHtml: SafeHtml = '';
+  /** Formatted style, to be applied */
   public formattedStyle?: string;
 
   /**
    * Content component of Single Item of Summary Card.
    *
    * @param dataTemplateService Shared data template service, used to render content from template
+   * @param dialog CDK Dialog service
+   * @param parent Reference to parent summary card item component
    */
-  constructor(private dataTemplateService: DataTemplateService) {}
+  constructor(
+    private dataTemplateService: DataTemplateService,
+    private dialog: Dialog,
+    @Optional() public parent: SummaryCardItemComponent
+  ) {
+    super();
+  }
 
   ngOnInit(): void {
     this.formattedStyle = this.dataTemplateService.renderStyle(
@@ -66,6 +94,22 @@ export class SummaryCardItemContentComponent implements OnInit, OnChanges {
     );
   }
 
+  /**
+   * Listen to click events from host element, if record editor is clicked, open record editor modal
+   *
+   * @param event Click event from host element
+   */
+  @HostListener('click', ['$event'])
+  onContentClick(event: any) {
+    const content = this.htmlContentComponent.el.nativeElement;
+    const editorTriggers = content.querySelectorAll('.record-editor');
+    editorTriggers.forEach((recordEditor: HTMLElement) => {
+      if (recordEditor.contains(event.target)) {
+        this.openEditRecordModal();
+      }
+    });
+  }
+
   /**
    * Pass click event to data template service
    *
@@ -74,4 +118,46 @@ export class SummaryCardItemContentComponent implements OnInit, OnChanges {
   public onClick(event: any) {
     this.dataTemplateService.onClick(event, this.fieldsValue);
   }
+
+  /**
+   * Open edit record modal.
+   */
+  private async openEditRecordModal() {
+    if (
+      this.parent.card.resource &&
+      this.parent.card.layout &&
+      this.fieldsValue.canUpdate
+    ) {
+      const { FormModalComponent } = await import(
+        '../../../form-modal/form-modal.component'
+      );
+      const dialogRef = this.dialog.open(FormModalComponent, {
+        disableClose: true,
+        data: {
+          recordId: this.fieldsValue.id,
+          template: this.parent.card.template,
+        },
+        autoFocus: false,
+      });
+      dialogRef.closed.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+        if (value) {
+          this.parent.refresh();
+          // Update the record, based on new configuration
+          // this.getRecord().then(() => {
+          //   this.formattedStyle = this.dataTemplateService.renderStyle(
+          //     this.settings.wholeCardStyles || false,
+          //     this.fieldsValue,
+          //     this.styles
+          //   );
+          //   this.formattedHtml = this.dataTemplateService.renderHtml(
+          //     this.settings.text,
+          //     this.fieldsValue,
+          //     this.fields,
+          //     this.styles
+          //   );
+          // });
+        }
+      });
+    }
+  }
 }

libs/shared/src/lib/components/widgets/summary-card/summary-card-item/summary-card-item.component.ts

@@ -1,6 +1,6 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, Optional } from '@angular/core';
 import { get } from 'lodash';
-import { CardT } from '../summary-card.component';
+import { CardT, SummaryCardComponent } from '../summary-card.component';
 
 /**
  * Single Item component of Summary card widget.
@@ -25,6 +25,13 @@ export class SummaryCardItemComponent implements OnInit, OnChanges {
     return get(this.card, 'usePadding') ?? true;
   }
 
+  /**
+   * Single Item component of Summary card widget.
+   *
+   * @param parent Reference to parent summary card component
+   */
+  constructor(@Optional() public parent: SummaryCardComponent) {}
+
   ngOnInit(): void {
     this.setContent();
   }
@@ -57,13 +64,13 @@ export class SummaryCardItemComponent implements OnInit, OnChanges {
    * Set content of the card item, querying associated record.
    */
   private async setContentFromLayout(): Promise<void> {
-    await this.getStyles();
+    this.getStyles();
     this.fieldsValue = { ...this.card.record };
     this.fields = this.card.metadata || [];
   }
 
   /** Sets layout style */
-  private async getStyles(): Promise<void> {
+  private getStyles(): void {
     this.styles = get(this.card.layout, 'query.style', []);
   }
 
@@ -79,4 +86,11 @@ export class SummaryCardItemComponent implements OnInit, OnChanges {
       editor: 'text',
     }));
   }
+
+  /**
+   * Refresh card
+   */
+  public refresh() {
+    this.parent.refresh();
+  }
 }

libs/shared/src/lib/components/widgets/summary-card/summary-card.component.ts

@@ -259,13 +259,7 @@ export class SummaryCardComponent
     this.contextService.filter$
       .pipe(debounceTime(500), takeUntil(this.destroy$))
       .subscribe(() => {
-        this.onPage({
-          pageSize: DEFAULT_PAGE_SIZE,
-          skip: 0,
-          previousPageIndex: 0,
-          pageIndex: 0,
-          totalItems: 0,
-        });
+        this.refresh();
       });
   }
 
@@ -730,6 +724,19 @@ export class SummaryCardComponent
     }
   }
 
+  /**
+   * Refresh view
+   */
+  public refresh() {
+    this.onPage({
+      pageSize: DEFAULT_PAGE_SIZE,
+      skip: 0,
+      previousPageIndex: 0,
+      pageIndex: 0,
+      totalItems: 0,
+    });
+  }
+
   /**
    * Open the dataSource modal.
    */