cedar-embeddable-editor 0.9.0

package/src/app/modules/shared/components/date-picker/date-picker.component.spec.ts

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

package/src/app/modules/shared/components/date-picker/date-picker.component.ts

@@ -0,0 +1,100 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {FormControl, Validators} from '@angular/forms';
+import {DateAdapter} from '@angular/material/core';
+import {MatDatepicker} from '@angular/material/datepicker';
+
+// Depending on whether rollup is used, moment needs to be imported differently.
+// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
+// syntax. However, rollup creates a synthetic default module and we thus need to import it using
+// the `default as` syntax.
+import * as _moment from 'moment';
+// tslint:disable-next-line:no-duplicate-imports
+import {default as _rollupMoment, Moment} from 'moment';
+import {CustomDateAdapter} from '../../service/date-time/custom-date-adapter';
+import {DateTimeService} from '../../service/date-time/date-time.service';
+
+const moment = _rollupMoment || _moment;
+
+@Component({
+  selector: 'app-date-picker',
+  templateUrl: './date-picker.component.html',
+  styleUrls: ['./date-picker.component.scss'],
+  providers: [
+    // DateTimeService is added as a provider to allow it
+    // to be injected as a new instance per component, rather
+    // than a Singleton instance
+    DateTimeService,
+    CustomDateAdapter, // so we could inject services to 'CustomDateAdapter'
+    {provide: DateAdapter, useClass: CustomDateAdapter} // Parse MatDatePicker format
+  ]
+})
+
+export class DatePickerComponent implements OnInit {
+  static readonly YEAR_FORMAT = 'YYYY';
+  static readonly YEAR_MONTH_FORMAT = 'MM/YYYY';
+  static readonly YEAR_MONTH_DAY_FORMAT = 'MM/DD/YYYY';
+  yearFormat = DatePickerComponent.YEAR_FORMAT;
+  yearMonthFormat = DatePickerComponent.YEAR_MONTH_FORMAT;
+  yearMonthDayFormat = DatePickerComponent.YEAR_MONTH_DAY_FORMAT;
+
+  @Input() dateMonthYear: FormControl;
+  @Input() dateFormat = DatePickerComponent.YEAR_FORMAT;
+  @Input() required: boolean;
+  @Output() dateChangedEvent = new EventEmitter<Moment>();
+
+
+  public constructor(private _dateTimeService: DateTimeService) {
+  }
+
+  public ngOnInit(): void {
+    const validators: any[] = [];
+    this._dateTimeService.format = this.dateFormat;
+    const m = moment();
+
+    switch (this.dateFormat) {
+      case this.yearMonthFormat:
+        m.set('date', 1);
+        break;
+      case this.yearFormat:
+        m.set('date', 1);
+        m.set('month', 0);
+        break;
+    }
+    if (this.required) {
+      validators.push(Validators.required);
+    }
+    this.dateMonthYear = new FormControl(null, validators);
+    this.dateChangedEvent.emit(this.dateMonthYear.value);
+  }
+
+  chosenYearHandler(normalizedYear: Moment, datepicker: MatDatepicker<Moment>): void {
+    if (this.dateMonthYear.value == null){
+      this.dateMonthYear.setValue(moment());
+    }
+    const ctrlValue = this.dateMonthYear.value;
+    ctrlValue.year(normalizedYear.year());
+    this.dateMonthYear.setValue(ctrlValue);
+    if (this.dateFormat === this.yearFormat) {
+      datepicker.close();
+      this.dateChangedEvent.emit(this.dateMonthYear.value);
+    }
+  }
+
+  chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>): void {
+    const ctrlValue = this.dateMonthYear.value;
+    ctrlValue.month(normalizedMonth.month());
+    this.dateMonthYear.setValue(ctrlValue);
+
+    if (this.dateFormat === this.yearMonthFormat) {
+      datepicker.close();
+    }
+    this.dateChangedEvent.emit(this.dateMonthYear.value);
+  }
+
+  chosenDateHandler(event): void {
+    if (event) {
+      this.dateChangedEvent.emit(event.value);
+    }
+  }
+
+}

package/src/app/modules/shared/components/file-uploader/bytes/bytes.pipe.spec.ts

@@ -0,0 +1,33 @@
+import { BytesPipe } from './bytes.pipe';
+
+describe('BytesPipe', () => {
+  const pipe = new BytesPipe();
+
+  it('transforms NAN to -', () => {
+    expect(pipe.transform(NaN)).toBe('-');
+  });
+
+  it('transforms 0 to 0', () => {
+    expect(pipe.transform(0)).toBe('0');
+  });
+
+  it('transforms 1024 to 1.0 KB', () => {
+    expect(pipe.transform(1024)).toBe('1.0 KB');
+  });
+
+  it('transforms 1024*1024 to 1.0 MB', () => {
+    expect(pipe.transform(1024 * 1024)).toBe('1.0 MB');
+  });
+
+  it('transforms 1024*1024*1024 to 1.0 GB', () => {
+    expect(pipe.transform(1024 * 1024 * 1024)).toBe('1.0 GB');
+  });
+
+  it('transforms 1024*1024*1024*1024 to 1.0 TB', () => {
+    expect(pipe.transform(1024 * 1024 * 1024 * 1024)).toBe('1.0 TB');
+  });
+
+  it('transforms 1024*1024*1024*1024*1024 to 1.0 PB', () => {
+    expect(pipe.transform(1024 * 1024 * 1024 * 1024 * 1024)).toBe('1.0 PB');
+  });
+});

package/src/app/modules/shared/components/file-uploader/bytes/bytes.pipe.ts

@@ -0,0 +1,16 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'bytes'})
+export class BytesPipe implements PipeTransform {
+  public transform(bytes: number): string {
+    if (isNaN(parseFloat('' + bytes)) || !isFinite(bytes)) {
+      return '-';
+    }
+    if (bytes <= 0) {
+      return '0';
+    }
+    const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+    const num = Math.floor(Math.log(bytes) / Math.log(1024));
+    return (bytes / Math.pow(1024, Math.floor(num))).toFixed(1) + ' ' + units[num];
+  }
+}

package/src/app/modules/shared/components/file-uploader/file-upload-input-for/file-upload-input-for.directive.spec.ts

@@ -0,0 +1,54 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BehaviorSubject } from 'rxjs';
+import { IInput } from '../mat-file-upload.type';
+import { CommonModule } from '@angular/common';
+
+import { FileUploadInputForDirective } from './file-upload-input-for.directive';
+import { Component } from '@angular/core';
+@Component({
+  template: ` <div
+    [fileUploadInputFor]="fileUploadQueue"
+    class="upload-drop-zone"
+  >
+    Just drag and drop files here
+  </div>`,
+})
+class FileDropComponent {}
+export class StubMatFileUploadQueueService {
+  inputValueSubject = new BehaviorSubject<IInput>(null);
+  inputValue$ = this.inputValueSubject.asObservable();
+
+  initialize(input: IInput): void {
+    this.inputValueSubject.next(input);
+  }
+
+  getInputValue(): IInput {
+    return this.inputValueSubject.getValue();
+  }
+}
+
+export class StubFile {
+  name = 'testName';
+  size = 1024;
+}
+
+describe('FileUploadInputForDirective', () => {
+  let component: FileDropComponent;
+  let fixture;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CommonModule],
+      declarations: [FileUploadInputForDirective, FileDropComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(FileDropComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+  });
+});

package/src/app/modules/shared/components/file-uploader/file-upload-input-for/file-upload-input-for.directive.ts

@@ -0,0 +1,67 @@
+import {Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output} from '@angular/core';
+
+/**
+ * A material design file upload queue component.
+ */
+@Directive({
+  selector: 'input[fileUploadInputFor], div[fileUploadInputFor], mat-card[fileUploadInputFor]',
+})
+export class FileUploadInputForDirective {
+
+  private _queue: any = null;
+  private _element: HTMLElement;
+  @Output() public onFileSelected: EventEmitter<File[]> = new EventEmitter<File[]>();
+  @HostBinding('class.fileover') fileOver: boolean;
+
+
+  constructor(private element: ElementRef) {
+    this._element = this.element.nativeElement;
+  }
+
+  @Input('fileUploadInputFor')
+  set fileUploadQueue(value: any) {
+    if (value) {
+      this._queue = value;
+    }
+  }
+
+  @HostListener('change')
+  public onChange(): any {
+    const files = this.element.nativeElement.files;
+    this.onFileSelected.emit(files);
+
+    for (let i = 0; i < files.length; i++) {
+      this._queue.add(files[i]);
+    }
+    this.element.nativeElement.value = '';
+  }
+
+  @HostListener('drop', ['$event'])
+  public onDrop(event: any): any {
+    const files = event.dataTransfer.files;
+    this.onFileSelected.emit(files);
+
+    for (let i = 0; i < files.length; i++) {
+      this._queue.add(files[i]);
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this.element.nativeElement.value = '';
+    this.fileOver = false;
+  }
+
+  @HostListener('dragover', ['$event'])
+  public onDropOver(event: any): any {
+    event.preventDefault();
+    event.stopPropagation();
+    this.fileOver = true;
+  }
+
+  @HostListener('dragleave', ['$event'])
+  public onDragLeave(event): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.fileOver = false;
+  }
+
+}

package/src/app/modules/shared/components/file-uploader/file-uploader.component.html

@@ -0,0 +1,26 @@
+<input type="file" #singleFile id="singleFile"
+       [fileUploadInputFor]="fileUploadQueue"
+       [multiple]="false" [accept]="'.json'" style="display: none;"/>
+<div *ngIf="showSuccess" class="notify-success template-card status-box">{{successMessage}}
+  <button type="button" class="close" (click)="clearSuccess()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div *ngIf="showError" class="notify-error template-card status-box">{{errorMessage}}
+  <button type="button" class="close" (click)="clearError()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<mat-card class="template-card container" [fileUploadInputFor]="fileUploadQueue" appDnd>
+  <h3><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAABoElEQVRoge2YPU7DQBCFP/HT01DFEQ1Q01NxAw7BMSgoKZE4RWSlInABEnMELkCJJWJKpJjCtmSCDbvr2fXfPmnkaLUzb15mNLs2eHh4jBpLIK2wVWlPZGG9bEudhHdq1s9r1lPLv1Vy0ELxr7QFbf66ivQOgxGyV7P+AmxcJtIxfg9riPg563vL78dvW/BTy8MxVKdGAIRAQvUNVtISYA6c6AhRmRoBEDsQsG0xMJEUEuZ7HnQCN8AEWOScM1WniP9fbIp2ciGiwDTn/JAM2tahWck7mAOxTkjbdy0xqLTN6Fvr1iWZytQyrUgK3Bj4NeUVD1j4mVamc0JMxWjxqkwtCSEmbabFa3NqVd2fdCrTaSE6YjonZAO8ApfAGXAgmNuvzdu2qtijixR4Aq6AL+DIwF+Z95lqIeWzxVTIPbAL7ANvwJ2mf2fGbxnXwCfqbSXFKx7wELhogdduwCa8g38f6R2aCEnyZyCRiCKm+XMtGXRO1qsL3IgJgMecM5QMfAq8Y+fb1V8WA8eSQiD7FDQjK7VtAWuySoiL8PAYA74BrJ0x93i8VhIAAAAASUVORK5CYII=" style="vertical-align: middle"/>&nbsp;&nbsp; {{'Uploader.DragAndDrop' | translate}} &nbsp;&nbsp;<label for="singleFile" class="mat-focus-indicator mat-raised-button mat-button-base mat-primary">{{'Uploader.Browse' | translate}}</label></h3>
+</mat-card>
+<mat-file-upload-queue #fileUploadQueue [fileAlias]="fileAlias" [httpUrl]="httpUrl">
+  <mat-file-upload [file]="file" [id]="i" *ngFor="let file of fileUploadQueue.files; let i = index"
+                   (onUpload)="onFileUploaded($event)"
+  ></mat-file-upload>
+</mat-file-upload-queue>
+
+
+
+
+

package/src/app/modules/shared/components/file-uploader/file-uploader.component.scss

@@ -0,0 +1,55 @@
+.container {
+  width: 100%;
+  text-align: center;
+  border: dashed 1px #979797;
+  position: relative;
+  margin: 0 auto;
+  cursor: copy;
+
+  input {
+    opacity: 0;
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #38424c;
+    margin: 0;
+  }
+}
+
+.fileover {
+  animation: shake 1s;
+  animation-iteration-count: infinite;
+  background-color: #ffffff;
+}
+
+/* Shake animation */
+@keyframes shake {
+  10%, 50%, 90% {
+    transform: translateY(-1px);
+  }
+
+  20%, 80% {
+    transform: translateY(0px);
+  }
+
+  30%,  70% {
+    transform: translateY(1px);
+  }
+
+  40%, 60% {
+    transform: translateY(0px);
+  }
+}
+
+.status-box {
+  max-width: 90%;
+  margin: 0 auto;
+}

package/src/app/modules/shared/components/file-uploader/file-uploader.component.spec.ts

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

package/src/app/modules/shared/components/file-uploader/file-uploader.component.ts

@@ -0,0 +1,67 @@
+import {Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';
+import {HttpErrorResponse, HttpResponse} from '@angular/common/http';
+import {TranslateService} from '@ngx-translate/core';
+
+
+@Component({
+    selector: 'app-file-uploader',
+    templateUrl: './file-uploader.component.html',
+    styleUrls: ['./file-uploader.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FileUploaderComponent implements OnInit {
+
+    // Number of milliseconds to display the file upload success message
+    private static readonly SUCCESS_MESSAGE_TIMEOUT = 5000;
+
+    @Input() fileAlias: string;
+    @Input() httpUrl: string;
+    @Output() fileUploaded = new EventEmitter<object>();
+    showSuccess = false;
+    showError = false;
+    successMessage = '';
+    errorMessage = '';
+
+    protected translateService: TranslateService;
+
+    constructor(translateService: TranslateService) {
+        this.translateService = translateService;
+    }
+
+    ngOnInit(): void {
+    }
+
+    onFileUploaded(event): void {
+        if (event && event.event instanceof HttpResponse) {
+            this.clearError();
+            const fileName = event.file.name;
+            this.successMessage = this.translateService.instant('Uploader.Success', {fileName});
+            this.showSuccess = true;
+            setTimeout(() => {
+                this.clearSuccess();
+            }, FileUploaderComponent.SUCCESS_MESSAGE_TIMEOUT);
+        } else if (typeof event === 'object' && event.event instanceof HttpErrorResponse) {
+            this.clearSuccess();
+            const fileName = event.file.name;
+            let responseMessage = '';
+            const response = event.event;
+            if (response.message && response.message.length > 0) {
+                responseMessage = response.message;
+            }
+            this.errorMessage = this.translateService.instant('Uploader.Error', {fileName, responseMessage});
+            this.showError = true;
+        }
+        this.fileUploaded.emit(event);
+    }
+
+    clearSuccess(): void {
+        this.showSuccess = false;
+        this.successMessage = '';
+    }
+
+    clearError(): void {
+        this.showError = false;
+        this.errorMessage = '';
+    }
+
+}

package/src/app/modules/shared/components/file-uploader/mat-file-upload/mat-file-upload.component.html

@@ -0,0 +1,42 @@
+<ng-container *ngIf="uploadProgress$ | async as uploadProgress">
+  <mat-card class="template-card upload-progress-card">
+    <div class="flex-container-file-upload">
+      <div class="flex-child1">
+        <div class="file-icon">
+          <svg id="fileIcon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 58 58"
+               style="enable-background:new 0 0 58 58;" xml:space="preserve">
+            <polygon style="fill:#EDEADA;" points="51.5,14 37.5,0 6.5,0 6.5,58 51.5,58 " />
+            <g>
+              <path style="fill:#CEC9AE;" d="M16.5,23h25c0.552,0,1-0.447,1-1s-0.448-1-1-1h-25c-0.552,0-1,0.447-1,1S15.948,23,16.5,23z" />
+              <path style="fill:#CEC9AE;" d="M16.5,15h10c0.552,0,1-0.447,1-1s-0.448-1-1-1h-10c-0.552,0-1,0.447-1,1S15.948,15,16.5,15z" />
+              <path style="fill:#CEC9AE;" d="M41.5,29h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,29,41.5,29z" />
+              <path style="fill:#CEC9AE;" d="M41.5,37h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,37,41.5,37z" />
+              <path style="fill:#CEC9AE;" d="M41.5,45h-25c-0.552,0-1,0.447-1,1s0.448,1,1,1h25c0.552,0,1-0.447,1-1S42.052,45,41.5,45z" />
+            </g>
+            <polygon style="fill:#CEC9AE;" points="37.5,0 37.5,14 51.5,14 " />
+          </svg>
+        </div>
+      </div>
+      <div class="flex-child2">
+        <span class="file-summary">{{file.name}} ({{file.size | bytes}})</span>
+        <span class="upload-progress">
+          <mat-progress-bar
+            [value]="uploadProgress.progressPercentage"
+          ></mat-progress-bar>
+          <button style="margin-left: 15px;"
+            mat-icon-button
+            [attr.aria-label]="fileUploadAriaLabel"
+            (click)="upload()"
+            [disabled]="uploadInProgress$ | async"
+          ><mat-icon>upload_file</mat-icon></button>
+          <button
+            mat-icon-button
+            [attr.aria-label]="cancelAriaLabel"
+            (click)="remove()"
+          ><mat-icon>close</mat-icon></button>
+        </span>
+        <span class="file-summary">{{uploadProgress.progressPercentage}}% ({{uploadProgress.loaded | bytes}} of {{uploadProgress.total | bytes}})</span>
+      </div>
+    </div>
+  </mat-card>
+</ng-container>

package/src/app/modules/shared/components/file-uploader/mat-file-upload/mat-file-upload.component.scss

@@ -0,0 +1,31 @@
+.file-summary {
+  font-size: 0.85rem;
+}
+
+.upload-progress {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  height: 10px;
+
+  ::ng-deep .mat-progress-bar .mat-progress-bar-element {
+    transition: none;
+  }
+}
+
+.flex-container-file-upload {
+  display: flex;
+
+  .flex-child1 {
+    width: 50px;
+    margin-right: 15px;
+  }
+
+  .flex-child2 {
+    flex: 1 100%;
+  }
+}
+
+.upload-progress-card {
+  margin-bottom: 5px;
+}