cedar-embeddable-editor 0.9.0

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "cedar-embeddable-editor",
+  "version": "0.9.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "dependencies": {
+    "@angular-devkit/schematics": "^13.0.4",
+    "@angular-material-components/datetime-picker": "^8.0.0",
+    "@angular/animations": "~14.2.3",
+    "@angular/cdk": "^14.2.7",
+    "@angular/common": "~14.2.12",
+    "@angular/compiler": "~14.2.3",
+    "@angular/core": "~14.2.3",
+    "@angular/elements": "^14.2.3",
+    "@angular/forms": "~14.2.3",
+    "@angular/material": "^14.2.7",
+    "@angular/material-moment-adapter": "^14.2.3",
+    "@angular/platform-browser": "~14.2.3",
+    "@angular/platform-browser-dynamic": "~14.2.3",
+    "@angular/router": "~14.2.3",
+    "@angular/youtube-player": "^14.2.7",
+    "@ng-select/ng-select": "^9.1.0",
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^4.0.0",
+    "@webcomponents/custom-elements": "^1.4.3",
+    "lodash-es": "^4.17.15",
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.34",
+    "ngx-mat-select-search": "^4.0.2",
+    "rxjs": "~6.5.5",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.2.3",
+    "@angular/cli": "~14.2.10",
+    "@angular/compiler-cli": "~14.2.3",
+    "@types/jasmine": "~3.5.0",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/lodash-es": "^4.17.3",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.2",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~6.4.1",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~3.3.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~7.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~4.8.3"
+  }
+}

package/src/app/app.component.dev.ts

@@ -0,0 +1,74 @@
+import {Component, OnInit} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+import {LocalSettingsService} from './modules/shared/service/local-settings.service';
+import {environment} from '../environments/environment';
+
+@Component({
+  selector: 'app-component-dev',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponentDev implements OnInit {
+
+  ceeConfig = {
+    showTemplateUpload: true,
+    templateUploadBaseUrl: 'http://localhost:8000',
+    // templateUploadBaseUrl: 'https://api-php.cee.metadatacenter.orgx',
+    templateUploadEndpoint: '/upload.php',
+    templateDownloadEndpoint: '/download.php',
+    templateUploadParamName: '3520cf061bba4919a8ea4b74a07af01b',
+    templateDownloadParamName: '9ff482bacac84c499655ab58efdf590a',
+
+    showDataSaver: true,
+    dataSaverEndpointUrl: 'http://localhost:8000/datasave.php',
+
+    sampleTemplateLocationPrefix: 'http://localhost:4240/cedar-embeddable-editor-sample-templates/',
+    // sampleTemplateLocationPrefix: 'https://component.staging.metadatacenter.org/cedar-embeddable-editor-sample-templates/',
+    loadSampleTemplateName: '45',
+    showSampleTemplateLinks: true,
+    expandedSampleTemplateLinks: true,
+    showTemplateRenderingRepresentation: true,
+    showHeader: true,
+    showFooter: false,
+
+    // terminologyProxyUrl: 'https://api-php.cee.metadatacenter.orgx/index.php',
+    // terminologyProxyUrl: 'http://localhost:8000/index.php',
+    terminologyProxyUrl: 'https://terminology.metadatacenter.orgx/bioportal/integrated-search',
+    showInstanceDataCore: true,
+    expandedInstanceDataCore: false,
+    showMultiInstanceInfo: true,
+    expandedMultiInstanceInfo: false,
+    collapseStaticComponents: true,
+
+    showStaticText: true,
+  };
+
+  languages = {
+    selected: 'en',
+    options: [{value: 'en', viewValue: 'en'}, {value: 'hu', viewValue: 'hu'}]
+  };
+
+
+  constructor(
+  ) {
+  }
+
+  ngOnInit(): void {
+  }
+
+  // getCurrentLanguageCode() {
+  //   return this.translateService.currentLang;
+  // }
+  //
+  // switchLanguage($event: any, language: string) {
+  //   $event.preventDefault();
+  //   this.translateService.use(language);
+  //   this.localSettings.setLanguage(language);
+  // }
+  //
+  // setLanguage(language: string) {
+  //   this.translateService.use(language);
+  //   this.localSettings.setLanguage(language);
+  // }
+
+}

package/src/app/app.component.html

@@ -0,0 +1,5 @@
+<main>
+  <app-cedar-embeddable-metadata-editor-wrapper
+    [config]="ceeConfig"
+  ></app-cedar-embeddable-metadata-editor-wrapper>
+</main>

package/src/app/app.component.prod.ts

@@ -0,0 +1,76 @@
+import {Component, OnInit} from '@angular/core';
+import {LocalSettingsService} from './modules/shared/service/local-settings.service';
+import {TranslateService} from '@ngx-translate/core';
+import {environment} from '../environments/environment';
+
+@Component({
+  selector: 'app-component-prod',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponentProd implements OnInit {
+
+  ceeConfig = {
+    showTemplateUpload: true,
+    templateUploadBaseUrl: 'http://localhost:8000',
+    // templateUploadBaseUrl: 'https://api-php.cee.metadatacenter.orgx',
+    templateUploadEndpoint: '/upload.php',
+    templateDownloadEndpoint: '/download.php',
+    templateUploadParamName: '3520cf061bba4919a8ea4b74a07af01b',
+    templateDownloadParamName: '9ff482bacac84c499655ab58efdf590a',
+
+    showDataSaver: true,
+    dataSaverEndpointUrl: 'http://localhost:8000/datasave.php',
+
+    sampleTemplateLocationPrefix: 'https://component.metadatacenter.orgx/cedar-embeddable-editor-sample-templates/',
+    // sampleTemplateLocationPrefix: 'https://component.staging.metadatacenter.org/cedar-embeddable-editor-sample-templates/',
+    loadSampleTemplateName: '45',
+    showSampleTemplateLinks: true,
+    expandedSampleTemplateLinks: true,
+    showTemplateRenderingRepresentation: true,
+    showHeader: false,
+    showFooter: false,
+
+    // terminologyProxyUrl: 'https://api-php.cee.metadatacenter.orgx/index.php',
+    // terminologyProxyUrl: 'http://localhost:8000/index.php',
+    terminologyProxyUrl: 'https://terminology.metadatacenter.org/bioportal/integrated-search',
+    showInstanceDataCore: true,
+    expandedInstanceDataCore: false,
+    showMultiInstanceInfo: true,
+    expandedMultiInstanceInfo: false,
+    collapseStaticComponents: true,
+
+    showStaticText: true,
+  };
+
+
+  languages = {
+    selected: 'en',
+    options: [{value: 'en', viewValue: 'en'}, {value: 'hu', viewValue: 'hu'}]
+  };
+
+
+  constructor(
+  ) {
+  }
+
+  ngOnInit(): void {
+  }
+
+  // getCurrentLanguageCode() {
+  //   return this.translateService.currentLang;
+  // }
+  //
+  // switchLanguage($event: any, language: string) {
+  //   $event.preventDefault();
+  //   this.translateService.use(language);
+  //   this.localSettings.setLanguage(language);
+  // }
+  //
+  // setLanguage(language: string) {
+  //   this.translateService.use(language);
+  //   this.localSettings.setLanguage(language);
+  // }
+
+
+}

package/src/app/app.component.scss

@@ -0,0 +1 @@
+@import "@angular/material/prebuilt-themes/indigo-pink.css";

package/src/app/app.module.dev.ts

@@ -0,0 +1,58 @@
+import {BrowserModule} from '@angular/platform-browser';
+import {Injector, NgModule} from '@angular/core';
+import {createCustomElement} from '@angular/elements';
+import {HttpClient, HttpClientModule} from '@angular/common/http';
+import {AppComponentDev} from './app.component.dev';
+import {SharedModule} from './modules/shared/shared.module';
+import {JsonPipe} from '@angular/common';
+import {InputTypesModule} from './modules/input-types/input-types.module';
+import {
+    CedarEmbeddableMetadataEditorWrapperComponent
+} from './modules/shared/components/cedar-embeddable-metadata-editor-wrapper/cedar-embeddable-metadata-editor-wrapper.component';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+
+export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
+  return new TranslateHttpLoader(http, '/assets/i18n-cee/');
+}
+
+@NgModule({
+    declarations: [
+        AppComponentDev
+    ],
+    imports: [
+        BrowserModule,
+        HttpClientModule,
+        SharedModule,
+        InputTypesModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient]
+            }
+        }),
+    ],
+    providers: [
+        JsonPipe
+    ],
+    bootstrap: [
+        AppComponentDev
+    ],
+    exports: [],
+    entryComponents: [
+        CedarEmbeddableMetadataEditorWrapperComponent
+    ]
+})
+export class AppModuleDev {
+
+    constructor(private injector: Injector) {
+    }
+
+    ngDoBootstrap(): void {
+        const cedarCustomElement = createCustomElement(CedarEmbeddableMetadataEditorWrapperComponent, {
+            injector: this.injector
+        });
+        customElements.define('cedar-embeddable-editor', cedarCustomElement);
+    }
+}

package/src/app/app.module.prod.ts

@@ -0,0 +1,56 @@
+import {BrowserModule} from '@angular/platform-browser';
+import {Injector, NgModule} from '@angular/core';
+import {createCustomElement} from '@angular/elements';
+import {HttpClient, HttpClientModule} from '@angular/common/http';
+import {AppComponentProd} from './app.component.prod';
+import {SharedModule} from './modules/shared/shared.module';
+import {JsonPipe} from '@angular/common';
+import {InputTypesModule} from './modules/input-types/input-types.module';
+import {
+    CedarEmbeddableMetadataEditorWrapperComponent
+} from './modules/shared/components/cedar-embeddable-metadata-editor-wrapper/cedar-embeddable-metadata-editor-wrapper.component';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+
+export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
+  return new TranslateHttpLoader(http, '/assets/i18n-cee/');
+}
+
+@NgModule({
+    declarations: [
+        AppComponentProd
+    ],
+    imports: [
+        BrowserModule,
+        HttpClientModule,
+        SharedModule,
+        InputTypesModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient]
+            }
+        }),
+    ],
+    providers: [
+        JsonPipe
+    ],
+    bootstrap: [],
+    exports: [],
+    entryComponents: [
+        CedarEmbeddableMetadataEditorWrapperComponent
+    ]
+})
+export class AppModuleProd {
+
+    constructor(private injector: Injector) {
+    }
+
+    ngDoBootstrap(): void {
+        const cedarCustomElement = createCustomElement(CedarEmbeddableMetadataEditorWrapperComponent, {
+            injector: this.injector
+        });
+        customElements.define('cedar-embeddable-editor', cedarCustomElement);
+    }
+}

package/src/app/modules/input-types/components/cedar-foo-bar/cedar-foo-bar.component.spec.ts

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

package/src/app/modules/input-types/components/cedar-foo-bar/cedar-foo-bar.component.ts

@@ -0,0 +1,39 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {FormBuilder} from '@angular/forms';
+import {CedarUIComponent} from '../../../shared/models/ui/cedar-ui-component.model';
+import {ActiveComponentRegistryService} from '../../../shared/service/active-component-registry.service';
+import {HandlerContext} from '../../../shared/util/handler-context';
+import {StaticFieldComponent} from '../../../shared/models/static/static-field-component.model';
+
+@Component({
+  selector: 'app-cedar-foo-bar',
+  templateUrl: './cedar-foo-bar.component.html',
+  styleUrls: ['./cedar-foo-bar.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CedarFooBarComponent extends CedarUIComponent implements OnInit {
+
+  component: StaticFieldComponent;
+  @Input() handlerContext: HandlerContext;
+
+  constructor(
+    fb: FormBuilder,
+    private activeComponentRegistry: ActiveComponentRegistryService
+  ) {
+    super();
+    this.activeComponentRegistry = activeComponentRegistry;
+  }
+
+  ngOnInit(): void {
+  }
+
+  @Input() set componentToRender(componentToRender: StaticFieldComponent) {
+    this.component = componentToRender;
+    this.activeComponentRegistry.registerComponent(this.component, this);
+  }
+
+  setCurrentValue(currentValue: any): void {
+    // DO NOTHING
+  }
+
+}

package/src/app/modules/input-types/components/cedar-input-attribute-value/cedar-input-attribute-value.component.html

@@ -0,0 +1,25 @@
+<form class="form-container" [formGroup]="options">
+    <mat-form-field class="half-width-with-margin">
+      <mat-label>{{'Generic.Name' | translate}}</mat-label>
+      <input matInput type="text" placeholder="{{'Generic.AttributeName' | translate}}"
+             [formControl]="nameInputControl"
+             (input)="nameChanged($event)"
+             (blur)="nameChanged($event)"
+             attr.aria-label="{{'Generic.AttributeName' | translate}}">
+      <button type="button" mat-button *ngIf="nameInputControl.value" matSuffix mat-icon-button attr.aria-label="{{'Generic.Clear' | translate}}" (click)="clearName()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+
+    <mat-form-field class="half-width">
+      <mat-label>{{'Generic.Value' | translate}}</mat-label>
+      <input matInput type="text" placeholder="{{'Generic.AttributeValue' | translate}}"
+             [formControl]="valueInputControl"
+             (input)="valueChanged($event)"
+             attr.aria-label="{{'Generic.AttributeName' | translate}}">
+      <button type="button" mat-button *ngIf="valueInputControl.value" matSuffix mat-icon-button attr.aria-label="{{'Generic.Clear' | translate}}" (click)="clearValue()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+</form>
+

package/src/app/modules/input-types/components/cedar-input-attribute-value/cedar-input-attribute-value.component.spec.ts

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

package/src/app/modules/input-types/components/cedar-input-attribute-value/cedar-input-attribute-value.component.ts

@@ -0,0 +1,91 @@
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {FieldComponent} from '../../../shared/models/component/field-component.model';
+import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
+import {CedarUIComponent} from '../../../shared/models/ui/cedar-ui-component.model';
+import {ActiveComponentRegistryService} from '../../../shared/service/active-component-registry.service';
+import {HandlerContext} from '../../../shared/util/handler-context';
+
+
+@Component({
+  selector: 'app-cedar-input-attribute-value',
+  templateUrl: './cedar-input-attribute-value.component.html',
+  styleUrls: ['./cedar-input-attribute-value.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CedarInputAttributeValueComponent extends CedarUIComponent implements OnInit {
+
+  component: FieldComponent;
+  options: FormGroup;
+  nameInputControl = new FormControl(null, null);
+  valueInputControl = new FormControl(null, null);
+  @Input() handlerContext: HandlerContext;
+
+  constructor(
+    fb: FormBuilder,
+    private activeComponentRegistry: ActiveComponentRegistryService
+  ) {
+    super();
+    this.options = fb.group({
+      nameInputValue: this.nameInputControl,
+      valueInputValue: this.valueInputControl,
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  @Input() set componentToRender(componentToRender: FieldComponent) {
+    this.component = componentToRender;
+    this.activeComponentRegistry.registerComponent(this.component, this);
+  }
+
+  nameChanged($event: Event): void {
+    let name: string = null;
+
+    if ($event) {
+      name = ($event.target as HTMLTextAreaElement).value;
+    } else {
+      name = this.nameInputControl.value;
+    }
+    const value = this.valueInputControl.value;
+    this.handlerContext.changeAttributeValue(this.component, name, value);
+    this.activeComponentRegistry.updateViewToModel(this.component, this.handlerContext);
+  }
+
+  valueChanged($event: Event): void {
+    let value: string = null;
+
+    if ($event) {
+      value = ($event.target as HTMLTextAreaElement).value;
+    } else {
+      value = this.valueInputControl.value;
+    }
+
+    if (value && value.length === 0) {
+      value = null;
+    }
+    const name = this.nameInputControl.value;
+    this.handlerContext.changeAttributeValue(this.component, name, value);
+  }
+
+  setCurrentValue(currentValue: any): void {
+    this.nameInputControl.setValue(Object.keys(currentValue)[0]);
+    this.valueInputControl.setValue(Object.values(currentValue)[0]);
+  }
+
+  deleteCurrentValue(): void {
+    const name = this.nameInputControl.value;
+    this.handlerContext.deleteAttributeValue(this.component, name);
+  }
+
+  clearName(): void {
+    this.nameInputControl.setValue(null);
+    this.handlerContext.changeAttributeValue(this.component, null, this.valueInputControl.value);
+  }
+
+  clearValue(): void {
+    this.valueInputControl.setValue(null);
+    this.handlerContext.changeAttributeValue(this.component, this.nameInputControl.value, null);
+  }
+
+}

package/src/app/modules/input-types/components/cedar-input-checkbox/cedar-input-checkbox.component.html

@@ -0,0 +1,8 @@
+<form class="form-container" [formGroup]="options">
+  <div *ngFor="let choice of component.choiceInfo.choices">
+    <mat-checkbox (input)="inputChanged($event)"
+                  [formControlName]="getFormControlName(choice.label)"
+                  [value]="choice.label"
+    >{{choice.label}}</mat-checkbox>
+  </div>
+</form>

package/src/app/modules/input-types/components/cedar-input-checkbox/cedar-input-checkbox.component.spec.ts

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