cedar-embeddable-editor 0.9.0

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

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

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

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

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

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

@@ -0,0 +1,135 @@
+import {AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
+import {FieldComponent} from '../../../shared/models/component/field-component.model';
+import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
+import {ComponentDataService} from '../../../shared/service/component-data.service';
+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 {ErrorStateMatcher} from '@angular/material/core';
+import {Observable} from 'rxjs';
+import {debounceTime, distinctUntilChanged, map, startWith, switchMap} from 'rxjs/operators';
+import {IntegratedSearchResponseItem} from '../../../shared/models/rest/integrated-search/integrated-search-response-item';
+import {JsonSchema} from '../../../shared/models/json-schema.model';
+import {ControlledFieldDataService} from '../../../shared/service/controlled-field-data.service';
+import {MessageHandlerService} from '../../../shared/service/message-handler.service';
+import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
+export class TextFieldErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    return !!(control && control.invalid && (control.dirty || control.touched));
+  }
+}
+
+@Component({
+  selector: 'app-cedar-input-controlled',
+  templateUrl: './cedar-input-controlled.component.html',
+  styleUrls: ['./cedar-input-controlled.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CedarInputControlledComponent extends CedarUIComponent implements OnInit, AfterViewInit {
+  @ViewChild('autoCompleteInput', { static: false, read: MatAutocompleteTrigger }) trigger: MatAutocompleteTrigger;
+  selectedData = new FormControl();
+  component: FieldComponent;
+  options: FormGroup;
+  inputValueControl = new FormControl(null, null);
+  errorStateMatcher = new TextFieldErrorStateMatcher();
+  @Input() handlerContext: HandlerContext;
+  model: IntegratedSearchResponseItem = null;
+
+  filteredOptions: Observable<IntegratedSearchResponseItem[]>;
+
+  constructor(
+    fb: FormBuilder,
+    public cds: ComponentDataService,
+    private activeComponentRegistry: ActiveComponentRegistryService,
+    private controlledFieldDataService: ControlledFieldDataService,
+    private messageHandlerService: MessageHandlerService
+  ) {
+    super();
+    this.options = fb.group({
+      inputValue: this.inputValueControl,
+    });
+  }
+
+  ngOnInit(): void {
+    const validators: any[] = [];
+
+    if (this.component.valueInfo.requiredValue) {
+      validators.push(Validators.required);
+    }
+    this.inputValueControl = new FormControl(null, validators);
+
+    if (this.component.valueInfo.defaultValue &&
+      typeof this.component.valueInfo.defaultValue === 'object' &&
+      (this.component.valueInfo.defaultValue as object).hasOwnProperty(JsonSchema.termUri)) {
+      this.setValueUIAndModel(this.component.valueInfo.defaultValue ? this.component.valueInfo.defaultValue[JsonSchema.termUri] : null,
+        this.component.valueInfo.defaultValue ? this.component.valueInfo.defaultValue[JsonSchema.rdfsLabel] : null);
+    }
+
+    this.filteredOptions = this.inputValueControl.valueChanges
+      .pipe(
+        startWith(''),
+        debounceTime(400),
+        distinctUntilChanged(),
+        switchMap(val => {
+          return this.filter(val || '');
+        })
+      );
+  }
+
+  ngAfterViewInit(): void {
+    this.trigger.panelClosingActions
+      .subscribe(e => {
+        if (!e){
+          this.clearValue();
+        }
+      });
+  }
+
+  filter(val: string): Observable<IntegratedSearchResponseItem[]> {
+    return this.controlledFieldDataService.getData(val, this.component).pipe(
+      map(response => {
+        if (response == null) {
+          return null;
+        } else if (response.collection) {
+          return response.collection.filter(option => {
+            return option.prefLabel.toLowerCase().indexOf(val.toLowerCase()) === 0;
+          });
+        } else {
+          if (!val) {
+            val = 'empty string';
+          }
+          this.messageHandlerService.errorObject(val, response);
+        }
+      })
+    );
+  }
+
+  @Input() set componentToRender(componentToRender: FieldComponent) {
+    this.component = componentToRender;
+    this.activeComponentRegistry.registerComponent(this.component, this);
+  }
+
+  onSelectionChange(option: IntegratedSearchResponseItem): void {
+    this.handlerContext.changeControlledValue(this.component, option[JsonSchema.atId], option.prefLabel);
+  }
+
+  inputChanged(event): void {
+    if (!(event.target as HTMLTextAreaElement).value) {
+      this.clearValue();
+    }
+  }
+
+  setCurrentValue(currentValue: any): void {
+    this.inputValueControl.setValue(currentValue);
+  }
+
+  clearValue(): void {
+    this.inputValueControl.setValue(null);
+    this.handlerContext.changeControlledValue(this.component, null, null);
+  }
+
+  private setValueUIAndModel(atId: string, prefLabel: string): void {
+    this.inputValueControl.setValue(prefLabel);
+    this.handlerContext.changeControlledValue(this.component, atId, prefLabel);
+  }
+}

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

@@ -0,0 +1,44 @@
+<app-date-picker *ngIf="showDatePicker()"
+                 [dateFormat]="dateFormat()"
+                 (dateChangedEvent)="dateInputChanged($event)"
+                 [dateMonthYear]="dateMonthYearControl"
+                 [required]="required"
+                 xmlns="http://www.w3.org/1999/html"></app-date-picker>
+<ng-container *ngIf="showTimePicker()">
+  <div>
+<!--    <mat-label>Select Time</mat-label>-->
+    <ngx-mat-timepicker
+      (ngModelChange)="timeInputChanged($event)"
+      (input)="timeInputChanged($event)"
+      [(ngModel)]="timePickerTime"
+      [showSpinners]="true"
+      [enableMeridian]="enableMeridian()"
+      [disableMinute]="disableMinute()"
+      [showSeconds]="showSeconds()">
+    </ngx-mat-timepicker>
+  </div>
+</ng-container>
+<ng-container *ngIf="showDecimalSeconds()">
+  <mat-form-field>
+<!--    <mat-label>Select Decimal Seconds</mat-label>-->
+    <input matInput type="number"
+           (input)="decimalSecondsChanged($event)"
+           [(ngModel)]="decimalSeconds"
+           name="decimalSeconds"
+           attr.aria-label="{{'Generic.SelectDecimalSeconds' | translate}}">
+  </mat-form-field>
+</ng-container>
+<ng-container *ngIf="showTimezonePicker()">
+  <app-timezone-picker
+    [(ngModel)]="timezone"
+    (ngModelChange)="timezoneInputChanged($event)"
+    customPlaceholderText="{{'Generic.SelectTimeZone' | translate}}"
+    customNotFoundText="{{'Generic.NoTimeZoneFound' | translate}}"
+    [getUserZone]="setDefaultZone"
+    [clearable]="false"
+  ></app-timezone-picker>
+</ng-container>
+<!--<p class="info-box">-->
+<!--  DateTime is:&nbsp;&nbsp;&nbsp;{{datetimeParsed.toDateRepresentation()}}<br/>-->
+<!--  Stored as:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{datetimeParsed.toStorageRepresentation()}}-->
+<!--</p>-->

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

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