cedar-embeddable-editor 0.9.0

package/src/app/modules/shared/components/cedar-data-saver/cedar-data-saver.component.ts

@@ -0,0 +1,139 @@
+import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
+import {DataContext} from '../../util/data-context';
+import {HttpClient, HttpHeaders, HttpParams, HttpResponse} from '@angular/common/http';
+import {Observable, Subscription} from 'rxjs';
+import {MessageHandlerService} from '../../service/message-handler.service';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-cedar-data-saver',
+    templateUrl: 'cedar-data-saver.component.html',
+    styleUrls: ['./cedar-data-saver.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class CedarDataSaverComponent implements OnInit, OnDestroy {
+
+    // Number of milliseconds to display the submission success message
+    private static readonly SUCCESS_MESSAGE_TIMEOUT = 5000;
+    private static readonly PARAM_ID = 'id';
+    private static readonly PARAM_TITLE = 'title';
+
+    @Input() dataContext: DataContext = null;
+    @Input() endpointUrl: string = null;
+    httpRequestParams: | HttpParams | { [param: string]: string | string[]; };
+    httpPostSubscription = new Subscription();
+
+    showProgress = false;
+    showSuccess = false;
+    showError = false;
+    progressMessage = 'Processing...';
+    successMessage = '';
+    errorMessage = '';
+
+    constructor(
+        private httpClient: HttpClient,
+        private messageHandlerService: MessageHandlerService,
+        private translateService: TranslateService
+        ) {
+    }
+
+    ngOnInit(): void {
+    }
+
+    saveTemplate(event): void {
+        this.httpPostSubscription.add(
+            this.httpRequest().subscribe(
+                (data: any) => {
+                    if (data instanceof HttpResponse) {
+                        this.clearProgress();
+                        this.clearError();
+                        this.showSuccess = true;
+                        this.successMessage = 'Metadata saved successfully';
+
+                        if (data.body[CedarDataSaverComponent.PARAM_ID]) {
+                            this.dataContext.savedTemplateID = data.body[CedarDataSaverComponent.PARAM_ID];
+                        }
+                        this.messageHandlerService.traceObject('Data received from the server:', data);
+                    } else {
+                        this.clearSuccess();
+                        this.clearError();
+                        this.showProgress = true;
+                    }
+                },
+                (error: any) => {
+                    this.clearProgress();
+                    this.clearSuccess();
+                    this.showError = true;
+                    this.errorMessage = this.translateService.instant('Saver.Error');
+
+                    if (typeof error === 'object' && error.hasOwnProperty('message')) {
+                        this.messageHandlerService.errorObject(error.message, error);
+                    }
+                },
+                () => {
+                    // remove success message in SUCCESS_MESSAGE_TIMEOUT seconds (
+                    if (this.showSuccess) {
+                        setTimeout(() => {
+                            this.clearSuccess();
+                        }, CedarDataSaverComponent.SUCCESS_MESSAGE_TIMEOUT);
+                    }
+                }
+            )
+        );
+        this.stopPropagation(event);
+    }
+
+    private httpRequest(): Observable<any> {
+        const body = {
+            metadata: this.dataContext.instanceFullData,
+            info: {}
+        };
+
+        if (this.dataContext.templateInfo) {
+            Object.assign(body.info, this.dataContext.templateInfo);
+        }
+        const httpHeaders = new HttpHeaders({
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-cache'
+        });
+        let method = 'POST';
+        this.httpRequestParams = {};
+        this.httpRequestParams[CedarDataSaverComponent.PARAM_TITLE] = this.dataContext.templateRepresentation.labelInfo.label;
+
+        if (this.dataContext.savedTemplateID) {
+            method = 'PUT';
+            this.httpRequestParams[CedarDataSaverComponent.PARAM_ID] = this.dataContext.savedTemplateID;
+        }
+        return this.httpClient.request(method, this.endpointUrl, {
+            body,
+            headers: httpHeaders,
+            observe: 'events',
+            params: this.httpRequestParams,
+            reportProgress: true,
+            responseType: 'json',
+        });
+    }
+
+    clearProgress(): void {
+        this.showProgress = false;
+    }
+
+    clearSuccess(): void {
+        this.showSuccess = false;
+        this.successMessage = '';
+    }
+
+    clearError(): void {
+        this.showError = false;
+        this.errorMessage = '';
+    }
+
+    stopPropagation(event): void {
+        event.stopPropagation();
+    }
+
+    ngOnDestroy(): void {
+        this.httpPostSubscription.unsubscribe();
+    }
+
+}

package/src/app/modules/shared/components/cedar-embeddable-metadata-editor/cedar-embeddable-metadata-editor.component.html

@@ -0,0 +1,56 @@
+<app-static-header *ngIf="dataAvailableForRender() && showHeader"
+                   [callbackOwnerObject]="sampleTemplateLoaderObject"
+                   [showSampleTemplateLinks]="showSampleTemplateLinks"></app-static-header>
+<app-file-uploader *ngIf="dataAvailableForRender() && showTemplateUpload"
+                   [fileAlias]="templateUploadParamName"
+                   [httpUrl]="templateUploadBaseUrl + templateUploadEndpoint"
+></app-file-uploader>
+<!--<preferences-menu>-->
+<!--  </preferences-menu>-->
+<mat-card class="template-card" *ngIf="dataAvailableForRender()">
+  <mat-card-header>
+    <div mat-card-avatar class="header-image" ></div>
+    <h1>{{dataContext.templateRepresentation.labelInfo.label}}</h1>
+    <h2 *ngIf=dataContext.templateRepresentation.labelInfo.description>{{dataContext.templateRepresentation.labelInfo.description}}</h2>
+    <div *ngIf="dataContext.templateRepresentation.hasPageBreaks()" class="header-flex-child">
+      <app-cedar-static-page-break
+        [dataContext]="dataContext"
+        [pageBreakPaginatorService] = "pageBreakPaginatorService"
+      ></app-cedar-static-page-break>
+    </div>
+  </mat-card-header>
+  <mat-card-content>
+    <button mat-button (click)="openAll()">{{'Generic.ExpandAll' | translate}}</button>
+    <button mat-button (click)="closeAll()">{{'Generic.CollapseAll' | translate}}</button>
+    <ng-container *ngFor="let childComponent of pageBreakPaginatorService.currentPage()">
+      <app-cedar-component-renderer
+        [componentToRender]="childComponent"
+        [handlerContext]="handlerContext"
+        [allExpanded]="allExpanded"
+        [showStaticText]="showStaticText"
+      ></app-cedar-component-renderer>
+    </ng-container>
+    <app-cedar-data-saver *ngIf="showDataSaver"
+                          [endpointUrl]="dataSaverEndpointUrl"
+                          [dataContext]="dataContext"
+    ></app-cedar-data-saver>
+  </mat-card-content>
+</mat-card>
+<app-source-panels *ngIf="dataAvailableForRender()"
+                   [dataContext]="dataContext"
+                   [showTemplateRenderingRepresentation]="showTemplateRenderingRepresentation"
+                   [showMultiInstanceInfo]="showMultiInstanceInfo"
+                   [showTemplateSourceData]="showTemplateSourceData"
+                   [showInstanceDataCore]="showInstanceDataCore"
+                   [showInstanceDataFull]="showInstanceDataFull"
+                   [expandedTemplateRenderingRepresentation]="expandedTemplateRenderingRepresentation"
+                   [expandedMultiInstanceInfo]="expandedMultiInstanceInfo"
+                   [expandedTemplateSourceData]="expandedTemplateSourceData"
+                   [expandedInstanceDataCore]="expandedInstanceDataCore"
+                   [expandedInstanceDataFull]="expandedInstanceDataFull"
+></app-source-panels>
+<app-sample-templates *ngIf="dataAvailableForRender() && showSampleTemplateLinks"
+                      [callbackOwnerObject]="sampleTemplateLoaderObject"
+                      [expandedSampleTemplateLinks]="expandedSampleTemplateLinks"
+></app-sample-templates>
+<app-static-footer *ngIf="dataAvailableForRender() && showFooter"></app-static-footer>

package/src/app/modules/shared/components/cedar-embeddable-metadata-editor/cedar-embeddable-metadata-editor.component.scss

@@ -0,0 +1,13 @@
+.mat-card {
+  padding: 5px;
+  margin-bottom: 5px;
+}
+
+.header-flex-child {
+  flex: auto;
+}
+
+.mat-card-header {
+  margin-bottom: 5px;
+  vertical-align: middle;
+}

package/src/app/modules/shared/components/cedar-embeddable-metadata-editor/cedar-embeddable-metadata-editor.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CedarEmbeddableMetadataEditorComponent } from './cedar-embeddable-metadata-editor.component';
+
+describe('CedarEmbeddableMetadataEditorComponent', () => {
+  let component: CedarEmbeddableMetadataEditorComponent;
+  let fixture: ComponentFixture<CedarEmbeddableMetadataEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CedarEmbeddableMetadataEditorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CedarEmbeddableMetadataEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/shared/components/cedar-embeddable-metadata-editor/cedar-embeddable-metadata-editor.component.ts

@@ -0,0 +1,184 @@
+import {Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';
+import {NullTemplate} from '../../models/template/null-template.model';
+import {DataContext} from '../../util/data-context';
+import {HandlerContext} from '../../util/handler-context';
+import {PageBreakPaginatorService} from '../../service/page-break-paginator.service';
+
+
+@Component({
+    selector: 'app-cedar-embeddable-metadata-editor',
+    templateUrl: './cedar-embeddable-metadata-editor.component.html',
+    styleUrls: ['./cedar-embeddable-metadata-editor.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class CedarEmbeddableMetadataEditorComponent implements OnInit {
+    private static SHOW_TEMPLATE_RENDERING = 'showTemplateRenderingRepresentation';
+    private static SHOW_MULTI_INSTANCE = 'showMultiInstanceInfo';
+    private static SHOW_TEMPLATE_SOURCE = 'showTemplateSourceData';
+    private static SHOW_INSTANCE_CORE = 'showInstanceDataCore';
+    private static SHOW_INSTANCE_FULL = 'showInstanceDataFull';
+    private static SHOW_SAMPLE_TEMPLATE_LINKS = 'showSampleTemplateLinks';
+
+    private static SHOW_HEADER = 'showHeader';
+    private static SHOW_FOOTER = 'showFooter';
+
+    private static EXPANDED_TEMPLATE_RENDERING = 'expandedTemplateRenderingRepresentation';
+    private static EXPANDED_MULTI_INSTANCE = 'expandedMultiInstanceInfo';
+    private static EXPANDED_TEMPLATE_SOURCE = 'expandedTemplateSourceData';
+    private static EXPANDED_INSTANCE_CORE = 'expandedInstanceDataCore';
+    private static EXPANDED_INSTANCE_FULL = 'expandedInstanceDataFull';
+    private static EXPANDED_SAMPLE_TEMPLATE_LINKS = 'expandedSampleTemplateLinks';
+
+    private static COLLAPSE_STATIC_COMPONENTS = 'collapseStaticComponents';
+
+    private static SHOW_TEMPLATE_UPLOAD = 'showTemplateUpload';
+    private static TEMPLATE_UPLOAD_BASE_URL = 'templateUploadBaseUrl';
+    private static TEMPLATE_UPLOAD_ENDPOINT = 'templateUploadEndpoint';
+    private static TEMPLATE_UPLOAD_PARAM_NAME = 'templateUploadParamName';
+
+    private static SHOW_DATA_SAVER = 'showDataSaver';
+    private static DATA_SAVER_ENDPOINT_URL = 'dataSaverEndpointUrl';
+    private static SHOW_STATIC_TEXT = 'showStaticText';
+
+    private readonly dataContext: DataContext = null;
+
+    private readonly handlerContext: HandlerContext = null;
+    @Output() handlerContextEvent = new EventEmitter<HandlerContext>();
+
+    private readonly pageBreakPaginatorService: PageBreakPaginatorService = null;
+
+    @Input() sampleTemplateLoaderObject: any = null;
+
+    showTemplateRenderingRepresentation = false;
+    showMultiInstanceInfo = false;
+    showTemplateSourceData = true;
+    showInstanceDataCore = false;
+    showInstanceDataFull = true;
+    showSampleTemplateLinks = false;
+    showStaticText = false;
+
+    showHeader = false;
+    showFooter = false;
+
+    expandedTemplateRenderingRepresentation = false;
+    expandedMultiInstanceInfo = false;
+    expandedTemplateSourceData = false;
+    expandedInstanceDataCore = false;
+    expandedInstanceDataFull = false;
+    expandedSampleTemplateLinks = false;
+
+    collapseStaticComponents = true;
+
+    showTemplateUpload = false;
+    templateUploadBaseUrl: string;
+    templateUploadEndpoint: string;
+    templateUploadParamName: string;
+
+    showDataSaver = false;
+    dataSaverEndpointUrl: string;
+    @Input() externalTemplateInfo: object;
+    allExpanded: boolean;
+
+    constructor() {
+        this.pageBreakPaginatorService = new PageBreakPaginatorService();
+        this.dataContext = new DataContext();
+        this.handlerContext = new HandlerContext(this.dataContext);
+    }
+
+    ngOnInit(): void {
+        this.dataContext.externalTemplateInfo = this.externalTemplateInfo;
+    }
+
+    @Input() set config(value: object) {
+        if (value != null) {
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.SHOW_TEMPLATE_RENDERING)) {
+                this.showTemplateRenderingRepresentation = value[CedarEmbeddableMetadataEditorComponent.SHOW_TEMPLATE_RENDERING];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.SHOW_MULTI_INSTANCE)) {
+                this.showMultiInstanceInfo = value[CedarEmbeddableMetadataEditorComponent.SHOW_MULTI_INSTANCE];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.SHOW_TEMPLATE_SOURCE)) {
+                this.showTemplateSourceData = value[CedarEmbeddableMetadataEditorComponent.SHOW_TEMPLATE_SOURCE];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.SHOW_INSTANCE_CORE)) {
+                this.showInstanceDataCore = value[CedarEmbeddableMetadataEditorComponent.SHOW_INSTANCE_CORE];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.SHOW_INSTANCE_FULL)) {
+                this.showInstanceDataFull = value[CedarEmbeddableMetadataEditorComponent.SHOW_INSTANCE_FULL];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.SHOW_SAMPLE_TEMPLATE_LINKS)) {
+                this.showSampleTemplateLinks = value[CedarEmbeddableMetadataEditorComponent.SHOW_SAMPLE_TEMPLATE_LINKS];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.SHOW_FOOTER)) {
+                this.showFooter = value[CedarEmbeddableMetadataEditorComponent.SHOW_FOOTER];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.SHOW_HEADER)) {
+                this.showHeader = value[CedarEmbeddableMetadataEditorComponent.SHOW_HEADER];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.EXPANDED_TEMPLATE_RENDERING)) {
+                this.expandedTemplateRenderingRepresentation = value[CedarEmbeddableMetadataEditorComponent.EXPANDED_TEMPLATE_RENDERING];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.EXPANDED_MULTI_INSTANCE)) {
+                this.expandedMultiInstanceInfo = value[CedarEmbeddableMetadataEditorComponent.EXPANDED_MULTI_INSTANCE];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.EXPANDED_TEMPLATE_SOURCE)) {
+                this.expandedTemplateSourceData = value[CedarEmbeddableMetadataEditorComponent.EXPANDED_TEMPLATE_SOURCE];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.EXPANDED_INSTANCE_CORE)) {
+                this.expandedInstanceDataCore = value[CedarEmbeddableMetadataEditorComponent.EXPANDED_INSTANCE_CORE];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.EXPANDED_INSTANCE_FULL)) {
+                this.expandedInstanceDataFull = value[CedarEmbeddableMetadataEditorComponent.EXPANDED_INSTANCE_FULL];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.EXPANDED_SAMPLE_TEMPLATE_LINKS)) {
+                this.expandedSampleTemplateLinks = value[CedarEmbeddableMetadataEditorComponent.EXPANDED_SAMPLE_TEMPLATE_LINKS];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.COLLAPSE_STATIC_COMPONENTS)) {
+                this.collapseStaticComponents = value[CedarEmbeddableMetadataEditorComponent.COLLAPSE_STATIC_COMPONENTS];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.SHOW_TEMPLATE_UPLOAD)) {
+                this.showTemplateUpload = value[CedarEmbeddableMetadataEditorComponent.SHOW_TEMPLATE_UPLOAD];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.TEMPLATE_UPLOAD_BASE_URL)) {
+                this.templateUploadBaseUrl = value[CedarEmbeddableMetadataEditorComponent.TEMPLATE_UPLOAD_BASE_URL];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.TEMPLATE_UPLOAD_ENDPOINT)) {
+                this.templateUploadEndpoint = value[CedarEmbeddableMetadataEditorComponent.TEMPLATE_UPLOAD_ENDPOINT];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.TEMPLATE_UPLOAD_PARAM_NAME)) {
+                this.templateUploadParamName = value[CedarEmbeddableMetadataEditorComponent.TEMPLATE_UPLOAD_PARAM_NAME];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.SHOW_DATA_SAVER)) {
+                this.showDataSaver = value[CedarEmbeddableMetadataEditorComponent.SHOW_DATA_SAVER];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.DATA_SAVER_ENDPOINT_URL)) {
+                this.dataSaverEndpointUrl = value[CedarEmbeddableMetadataEditorComponent.DATA_SAVER_ENDPOINT_URL];
+            }
+            if (value.hasOwnProperty(CedarEmbeddableMetadataEditorComponent.SHOW_STATIC_TEXT)) {
+                this.showStaticText = value[CedarEmbeddableMetadataEditorComponent.SHOW_STATIC_TEXT];
+            }
+        }
+    }
+
+    @Input() set templateJsonObject(value: object) {
+        if (value != null) {
+            this.dataContext.setInputTemplate(value, this.handlerContext, this.pageBreakPaginatorService, this.collapseStaticComponents);
+            this.handlerContextEvent.emit(this.handlerContext);
+        }
+    }
+
+    dataAvailableForRender(): boolean {
+        return this.dataContext != null
+            && this.dataContext.templateRepresentation != null
+            && !(this.dataContext.templateRepresentation instanceof NullTemplate)
+            && this.dataContext.multiInstanceData != null;
+    }
+
+    openAll(): void {
+        this.allExpanded = true;
+    }
+
+    closeAll(): void {
+        this.allExpanded = false;
+    }
+}

package/src/app/modules/shared/components/cedar-embeddable-metadata-editor-wrapper/cedar-embeddable-metadata-editor-wrapper.component.html

@@ -0,0 +1,15 @@
+<app-cedar-embeddable-metadata-editor *ngIf="editorDataReady()"
+                                      [config]="innerConfig"
+                                      [templateJsonObject]="templateJson"
+                                      [sampleTemplateLoaderObject]="sampleTemplateLoaderObject"
+                                      [externalTemplateInfo]="externalTemplateInfo"
+                                      (handlerContextEvent)="handlerContextChanged($event)"
+></app-cedar-embeddable-metadata-editor>
+<div class="spinner-wrapper" *ngIf="!editorDataReady() && showSpinnerBeforeInit">
+  <mat-progress-spinner
+    diameter="24"
+    mode="indeterminate">
+  </mat-progress-spinner>
+  <h1>{{'Process.Initializing' | translate}}</h1>
+</div>
+

package/src/app/modules/shared/components/cedar-embeddable-metadata-editor-wrapper/cedar-embeddable-metadata-editor-wrapper.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../../styles.scss';
+@import '../../../../../styles-own.scss';

package/src/app/modules/shared/components/cedar-embeddable-metadata-editor-wrapper/cedar-embeddable-metadata-editor-wrapper.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {CedarEmbeddableMetadataEditorWrapperComponent} from './cedar-embeddable-metadata-editor-wrapper.component';
+
+
+describe('CedarEmbeddableMetadataEditorWrapperComponent', () => {
+  let component: CedarEmbeddableMetadataEditorWrapperComponent;
+  let fixture: ComponentFixture<CedarEmbeddableMetadataEditorWrapperComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CedarEmbeddableMetadataEditorWrapperComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CedarEmbeddableMetadataEditorWrapperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});