cedar-embeddable-editor 0.9.0 → 0.9.2

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

@@ -1,74 +0,0 @@
-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

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

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

@@ -1,76 +0,0 @@
-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

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

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

@@ -1,58 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,25 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,8 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-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();
-  });
-});

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

@@ -1,104 +0,0 @@
-import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
-import {FieldComponent} from '../../../shared/models/component/field-component.model';
-import {FormArray, 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-checkbox',
-  templateUrl: './cedar-input-checkbox.component.html',
-  styleUrls: ['./cedar-input-checkbox.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class CedarInputCheckboxComponent extends CedarUIComponent implements OnInit {
-  component: FieldComponent;
-  options: FormGroup;
-  @Input() handlerContext: HandlerContext;
-
-
-  constructor(
-    fb: FormBuilder,
-    private activeComponentRegistry: ActiveComponentRegistryService
-  ) {
-    super();
-    this.options = fb.group({
-      // initialize checked box value holder
-      checkedChoices: new FormArray([])
-    });
-  }
-
-  ngOnInit(): void {
-    for (const choice of this.component.choiceInfo.choices) {
-      const fc = new FormControl();
-      this.options.addControl(this.getFormControlName(choice.label), fc);
-    }
-    this.populateValuesOnLoad();
-  }
-
-  @Input() set componentToRender(componentToRender: FieldComponent) {
-    this.component = componentToRender;
-    this.activeComponentRegistry.registerComponent(this.component, this);
-  }
-
-  inputChanged(event): void {
-    this.setInput(event.target.checked, event.target.value);
-  }
-
-  setCurrentValue(currentValue: any): void {
-    const arrVal = currentValue as Array<string>;
-
-    for (const choice of this.component.choiceInfo.choices) {
-      if (arrVal.indexOf(choice.label) >= 0) {
-        this.setInput(true, choice.label);
-      } else {
-        this.setInput(false, choice.label);
-      }
-    }
-  }
-
-  getFormControlName(val): string {
-    return val.replace(/\s+/g, '');
-  }
-
-  private populateValuesOnLoad(): void {
-    for (const choice of this.component.choiceInfo.choices) {
-      this.setInput(choice.selectedByDefault, choice.label);
-    }
-  }
-
-  private setInput(isChecked, val): void {
-    const formArray: FormArray = this.options.get('checkedChoices') as FormArray;
-
-    /* Selected */
-    if (isChecked) {
-      // Add a new control in the arrayForm
-      if (formArray.value.indexOf(val) < 0) {
-        formArray.push(new FormControl(val));
-      }
-      this.options.get(this.getFormControlName(val)).setValue('checked');
-    }
-    /* unselected */
-    else {
-      // find the unselected element
-      let i = 0;
-
-      formArray.controls.forEach((ctrl: FormControl) => {
-        if (ctrl.value === val) {
-          // Remove the unselected element from the arrayForm
-          formArray.removeAt(i);
-          this.options.get(this.getFormControlName(val)).setValue(null);
-          return;
-        }
-        i++;
-      });
-    }
-
-    // Keep the values in the original sort order
-    const sortingArr = this.component.choiceInfo.choices.map(a => a.label);
-    formArray.value.sort((a, b) => sortingArr.indexOf(a) - sortingArr.indexOf(b));
-
-    this.handlerContext.changeListValue(this.component, formArray.value);
-  }
-
-}

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

@@ -1,22 +0,0 @@
-<form class="form-container" [formGroup]="options">
-  <mat-form-field class="full-width">
-<!--    <mat-label>{{cds.getRenderingLabelForComponent(component)}}</mat-label>-->
-    <input matInput type="text"
-           #autoCompleteInput="matAutocompleteTrigger"
-           [formControl]="inputValueControl"
-           [errorStateMatcher]="errorStateMatcher"
-           [matAutocomplete]="auto"
-           (input)="inputChanged($event)"
-           attr.aria-label="{{cds.getRenderingLabelForComponent(component)}}">
-    <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption>
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option.prefLabel"
-                  (onSelectionChange)="onSelectionChange(option)"
-      >{{option.prefLabel}}</mat-option>
-    </mat-autocomplete>
-    <button type="button" tabindex="0" mat-button *ngIf="inputValueControl.value" matSuffix mat-icon-button attr.aria-label="{{'Generic.Clear' | translate}}" (click)="clearValue()">
-      <mat-icon>close</mat-icon>
-    </button>
-    <mat-error tabindex="0" align="start" *ngIf="inputValueControl.getError('required')" class="mat-error">{{'Validation.Required' | translate}}</mat-error>
-  </mat-form-field>
-</form>
-