cedar-embeddable-editor 0.9.0

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

@@ -0,0 +1,177 @@
+import {
+  ComponentFixture,
+  TestBed,
+  tick,
+  fakeAsync,
+} from '@angular/core/testing';
+
+import {MatFileUploadComponent} from './mat-file-upload.component';
+import {MatFileUploadQueueService} from '../mat-file-upload-queue/mat-file-upload-queue.service';
+import {BehaviorSubject, of} from 'rxjs';
+import {IInput} from '../mat-file-upload.type';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatCardModule} from '@angular/material/card';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {HttpClientModule} from '@angular/common/http';
+import {CommonModule} from '@angular/common';
+import {BytesPipe} from '../bytes/bytes.pipe';
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from '@angular/common/http/testing';
+
+export class StubMatFileUploadQueueService {
+  inputValueSubject = new BehaviorSubject<IInput>(null);
+  inputValue$ = this.inputValueSubject.asObservable();
+
+  initialize(input: IInput) {
+    this.inputValueSubject.next(input);
+  }
+
+  getInputValue() {
+    return this.inputValueSubject.getValue();
+  }
+}
+
+export class StubFile {
+  name = 'testName';
+  size = 1024;
+}
+
+describe('MatFileUploadComponent', () => {
+  let component: MatFileUploadComponent;
+  let fixture: ComponentFixture<MatFileUploadComponent>;
+  let service: StubMatFileUploadQueueService;
+  let httpTestingController: HttpTestingController;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        MatProgressBarModule,
+        MatCardModule,
+        MatButtonModule,
+        MatIconModule,
+        HttpClientModule,
+        CommonModule,
+        HttpClientTestingModule,
+      ],
+      declarations: [MatFileUploadComponent, BytesPipe],
+      providers: [MatFileUploadQueueService],
+    }).compileComponents();
+    service = TestBed.get(MatFileUploadQueueService);
+
+    httpTestingController = TestBed.get(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpTestingController.verify();
+  });
+
+  function initComponent() {
+    fixture = TestBed.createComponent(MatFileUploadComponent);
+    component = fixture.componentInstance;
+  }
+
+  describe('', () => {
+    it('should create', () => {
+      initComponent();
+      component.file = new StubFile();
+      let result;
+      component.uploadProgress$.subscribe((vm) => (result = vm));
+      fixture.detectChanges();
+      expect(component).toBeTruthy();
+      expect(result).toEqual({
+        progressPercentage: 0,
+        loaded: 0,
+        total: 1024,
+      });
+    });
+
+    it('should use the Queue inputs if inputs are not set', fakeAsync(() => {
+      service.inputValueSubject.next({
+        httpUrl: 'http://queue.url',
+        httpRequestHeaders: { queuekey: 'queuevalue' },
+        httpRequestParams: { queueParamkey: 'queueParamValue' },
+        fileAlias: 'queue alias',
+      });
+      initComponent();
+      component.file = new StubFile();
+      tick();
+      fixture.detectChanges();
+      expect(component.httpUrl).toBe('http://queue.url');
+      expect(component.httpRequestHeaders).toEqual({ queuekey: 'queuevalue' });
+      expect(component.httpRequestParams).toEqual({
+        queueParamkey: 'queueParamValue',
+      });
+      expect(component.fileAlias).toBe('queue alias');
+    }));
+
+    it('should NOT use the Queue inputs if inputs are set', () => {
+      service.inputValueSubject.next({
+        httpUrl: 'http://queue.url',
+        httpRequestHeaders: { queuekey: 'queuevalue' },
+        httpRequestParams: { queueParamkey: 'queueParamValue' },
+        fileAlias: 'queue alias',
+      });
+      initComponent();
+      component.file = new StubFile();
+      component.httpUrl = 'http://fileupload.url';
+      component.httpRequestHeaders = { queuekey: 'fileUploadqueuevalue' };
+      component.httpRequestParams = {
+        queueParamkey: 'fileUploadqueueParamValue',
+      };
+      component.fileAlias = 'file upload queue alias';
+      fixture.detectChanges();
+
+      expect(component.httpUrl).toBe('http://fileupload.url');
+      expect(component.httpRequestHeaders).toEqual({
+        queuekey: 'fileUploadqueuevalue',
+      });
+      expect(component.httpRequestParams).toEqual({
+        queueParamkey: 'fileUploadqueueParamValue',
+      });
+      expect(component.fileAlias).toBe('file upload queue alias');
+    });
+
+    it('should upload', fakeAsync(() => {
+      service.inputValueSubject.next({
+        httpUrl: 'http://queue.url',
+        httpRequestHeaders: { queuekey: 'queuevalue' },
+        httpRequestParams: { queueParamkey: 'queueParamValue' },
+        fileAlias: 'queue alias',
+      });
+      initComponent();
+      component.file = new Blob();
+      fixture.detectChanges();
+
+      component.upload();
+      const req = httpTestingController.expectOne(
+        'http://queue.url?queueParamkey=queueParamValue'
+      );
+
+      expect(req.request.method).toEqual('POST');
+      expect(req.request.headers.get('queuekey')).toEqual('queuevalue');
+      expect(req.request.params.get('queueParamkey')).toEqual(
+        'queueParamValue'
+      );
+      req.flush(null);
+    }));
+
+    it('should send remove event on remove()', fakeAsync(() => {
+      service.inputValueSubject.next({
+        httpUrl: 'http://queue.url',
+        httpRequestHeaders: { queuekey: 'queuevalue' },
+        httpRequestParams: { queueParamkey: 'queueParamValue' },
+        fileAlias: 'queue alias',
+      });
+      initComponent();
+      component.file = new Blob();
+      fixture.detectChanges();
+      let result;
+      component.removeEvent.subscribe((vm) => (result = vm));
+      component.remove();
+      expect(result).toBe(component);
+    }));
+  });
+});

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

@@ -0,0 +1,145 @@
+import {Component, OnInit, ChangeDetectionStrategy, OnDestroy, Input, Output, EventEmitter} from '@angular/core';
+import {ReplaySubject, BehaviorSubject, Subscription} from 'rxjs';
+import {HttpHeaders, HttpParams, HttpClient, HttpEventType} from '@angular/common/http';
+import {MatFileUploadQueueService} from '../mat-file-upload-queue/mat-file-upload-queue.service';
+import {IUploadProgress} from '../mat-file-upload.type';
+import {MatFileUploadService} from './mat-file-upload.service';
+import {MessageHandlerService} from '../../../service/message-handler.service';
+
+@Component({
+  selector: 'mat-file-upload',
+  templateUrl: './mat-file-upload.component.html',
+  styleUrls: ['./mat-file-upload.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatFileUploadComponent implements OnInit, OnDestroy {
+
+  private uploadProgressSubject = new ReplaySubject<IUploadProgress>();
+  uploadProgress$ = this.uploadProgressSubject.asObservable();
+
+  private uploadInProgressSubject = new BehaviorSubject<boolean>(false);
+  uploadInProgress$ = this.uploadInProgressSubject.asObservable();
+
+  public subs = new Subscription();
+
+  /* Http request input bindings */
+  @Input()
+  httpUrl: string;
+
+  @Input()
+  httpRequestHeaders:
+    | HttpHeaders
+    | {
+        [header: string]: string | string[];
+      };
+
+  @Input()
+  httpRequestParams:
+    | HttpParams
+    | {
+        [param: string]: string | string[];
+      };
+
+  @Input()
+  fileAlias: string;
+
+  private _file: any;
+  private _id: number;
+
+  @Input()
+  get file(): any {
+    return this._file;
+  }
+  set file(file: any) {
+    this._file = file;
+  }
+
+  @Input()
+  set id(id: number) {
+    this._id = id;
+  }
+  get id(): number {
+    return this._id;
+  }
+
+  @Input()
+  fileUploadAriaLabel = 'File Upload';
+
+  @Input()
+  cancelAriaLabel = 'Cancel File Upload';
+
+  /** Output  */
+  @Output() removeEvent = new EventEmitter<MatFileUploadComponent>();
+  @Output() onUpload = new EventEmitter();
+
+
+  constructor(private httpClient: HttpClient, private matFileUploadQueueService: MatFileUploadQueueService,
+              private matFileUploadService: MatFileUploadService, private messageHandlerService: MessageHandlerService) {
+    const queueInput = this.matFileUploadQueueService.getInputValue();
+    if (queueInput) {
+      this.httpUrl = this.httpUrl || queueInput.httpUrl;
+      this.httpRequestHeaders =
+        this.httpRequestHeaders || queueInput.httpRequestHeaders;
+      this.httpRequestParams =
+        this.httpRequestParams || queueInput.httpRequestParams;
+      this.fileAlias = this.fileAlias || queueInput.fileAlias;
+    }
+  }
+
+  ngOnInit(): void {
+    this.uploadProgressSubject.next({
+      progressPercentage: 0,
+      loaded: 0,
+      total: this._file.size,
+    });
+  }
+
+  public upload(): void {
+    this.uploadInProgressSubject.next(true);
+    // How to set the alias?
+    const formData = new FormData();
+    formData.set(this.fileAlias, this._file, this._file.name);
+    this.subs.add(
+      this.httpClient.post(this.httpUrl, formData, {
+        headers: this.httpRequestHeaders,
+        observe: 'events',
+        params: this.httpRequestParams,
+        reportProgress: true,
+        responseType: 'json',
+      }).subscribe(
+        (event: any) => {
+          if (event.type === HttpEventType.UploadProgress) {
+            this.uploadProgressSubject.next({
+              progressPercentage: Math.floor(
+                (event.loaded * 100) / event.total
+              ),
+              loaded: event.loaded,
+              total: event.total,
+            });
+          }
+          const value = {file: this._file, event: event};
+          this.matFileUploadService.setUploadedFile(value);
+          this.onUpload.emit(value);
+        },
+        (error: any) => {
+          this.uploadInProgressSubject.next(false);
+          const value = {file: this._file, event: error};
+          this.matFileUploadService.setUploadedFile(value);
+          this.messageHandlerService.error('Error uploading template file: ' + JSON.stringify(error));
+          this.onUpload.emit(value);
+        },
+        () => this.uploadInProgressSubject.next(false)
+      )
+    );
+  }
+
+  public remove(): void {
+    this.subs.unsubscribe();
+    this.removeEvent.emit(this);
+  }
+
+  ngOnDestroy(): void {
+    this.subs.unsubscribe();
+  }
+
+}

package/src/app/modules/shared/components/file-uploader/mat-file-upload/mat-file-upload.service.ts

@@ -0,0 +1,21 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MatFileUploadService {
+
+  private uploadedFileSubject = new BehaviorSubject<object>(null);
+  uploadedFile$ = this.uploadedFileSubject.asObservable();
+
+
+  setUploadedFile(file): void {
+    this.uploadedFileSubject.next(file);
+  }
+
+  getUploadedFile(): object {
+    return this.uploadedFileSubject.getValue();
+  }
+
+}

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

@@ -0,0 +1 @@
+<ng-content></ng-content>

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

@@ -0,0 +1,59 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatFileUploadQueueComponent} from './mat-file-upload-queue.component';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatCardModule} from '@angular/material/card';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {CommonModule} from '@angular/common';
+
+describe('MatFileUploadQueueComponent', () => {
+  let component: MatFileUploadQueueComponent;
+  let fixture: ComponentFixture<MatFileUploadQueueComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        MatProgressBarModule,
+        MatCardModule,
+        MatButtonModule,
+        MatIconModule,
+        CommonModule,
+      ],
+      declarations: [MatFileUploadQueueComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatFileUploadQueueComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should add file', () => {
+    expect(component.files).toEqual([]);
+    component.add(new Blob());
+    expect(component.files.length).toBe(1);
+  });
+
+  it('should add more file', () => {
+    expect(component.files).toEqual([]);
+    component.add(new Blob());
+    component.add(new Blob());
+    component.add(new Blob());
+    expect(component.files.length).toBe(3);
+  });
+
+  it('should remove all files', () => {
+    expect(component.files).toEqual([]);
+    component.add(new Blob());
+    component.add(new Blob());
+    component.add(new Blob());
+    expect(component.files.length).toBe(3);
+    component.removeAll();
+    expect(component.files).toEqual([]);
+  });
+});

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

@@ -0,0 +1,139 @@
+import {
+  Component, ChangeDetectionStrategy, ContentChildren, forwardRef, OnDestroy, OnChanges,
+  QueryList, SimpleChanges, Input, ChangeDetectorRef, AfterViewInit
+} from '@angular/core';
+import {Subscription, Observable, merge} from 'rxjs';
+import {HttpHeaders, HttpParams} from '@angular/common/http';
+import {startWith} from 'rxjs/operators';
+import {MatFileUploadQueueService} from './mat-file-upload-queue.service';
+import {MatFileUploadComponent} from '../mat-file-upload/mat-file-upload.component';
+
+@Component({
+  selector: 'mat-file-upload-queue',
+  templateUrl: './mat-file-upload-queue.component.html',
+  styleUrls: ['./mat-file-upload-queue.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [MatFileUploadQueueService],
+})
+export class MatFileUploadQueueComponent implements OnChanges, OnDestroy, AfterViewInit {
+  @ContentChildren(forwardRef(() => MatFileUploadComponent))
+  fileUploads: QueryList<MatFileUploadComponent>;
+
+  /** Subscription to remove changes in files. */
+  private _fileRemoveSubscription: Subscription | null;
+
+  /** Subscription to changes in the files. */
+  private _changeSubscription: Subscription;
+
+  /** Combined stream of all of the file upload remove change events. */
+  get fileUploadRemoveEvents(): Observable<MatFileUploadComponent> {
+    return merge(
+      ...this.fileUploads.map((fileUpload) => fileUpload.removeEvent)
+    );
+  }
+
+  public files: Array<any> = [];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.matFileUploadQueueService.initialize({
+      httpUrl: changes.httpUrl ? changes.httpUrl.currentValue : undefined,
+      httpRequestHeaders: changes.httpRequestHeaders
+        ? changes.httpRequestHeaders.currentValue
+        : undefined,
+      httpRequestParams: changes.httpRequestParams
+        ? changes.httpRequestParams.currentValue
+        : undefined,
+      fileAlias: changes.fileAlias
+        ? changes.fileAlias.currentValue
+        : undefined,
+    });
+  }
+
+  constructor(private matFileUploadQueueService: MatFileUploadQueueService, private changeDetectorRef: ChangeDetectorRef) {
+  }
+
+  /* Http request input bindings */
+  @Input()
+  httpUrl: string;
+
+  @Input()
+  httpRequestHeaders:
+    | HttpHeaders
+    | {
+        [header: string]: string | string[];
+      } = new HttpHeaders();
+
+  @Input()
+  httpRequestParams:
+    | HttpParams
+    | {
+        [param: string]: string | string[];
+      } = new HttpParams();
+
+  @Input()
+  fileAlias = 'file';
+
+  @Input()
+  uploadAllColor = 'primary';
+
+  @Input()
+  uploadAllLabel = 'Upload All';
+
+  @Input()
+  removeAllColor = 'primary';
+
+  @Input()
+  removeAllLabel = 'Remove All';
+
+  ngAfterViewInit(): void {
+    // When the list changes, re-subscribe
+    this._changeSubscription = this.fileUploads.changes
+      .pipe(startWith(null))
+      .subscribe(() => {
+        if (this._fileRemoveSubscription) {
+          this._fileRemoveSubscription.unsubscribe();
+        }
+        this._listenTofileRemoved();
+      });
+  }
+
+  private _listenTofileRemoved(): void {
+    this._fileRemoveSubscription = this.fileUploadRemoveEvents.subscribe(
+      (event: MatFileUploadComponent) => {
+        this.files.splice(event.id, 1);
+        this.changeDetectorRef.markForCheck();
+      }
+    );
+  }
+
+  add(file: any): void {
+    this.files.push(file);
+    this.changeDetectorRef.markForCheck();
+  }
+
+  public uploadAll(): void {
+    this.fileUploads.forEach((fileUpload) => {
+      fileUpload.upload();
+    });
+  }
+
+  public removeAll(): void {
+    this.files.splice(0, this.files.length);
+    this.changeDetectorRef.markForCheck();
+  }
+
+  ngOnDestroy(): void {
+    if (this._changeSubscription) {
+      this._changeSubscription.unsubscribe();
+    }
+
+    if (this._fileRemoveSubscription) {
+      this._fileRemoveSubscription.unsubscribe();
+    }
+
+    if (this.files) {
+      this.removeAll();
+    }
+  }
+
+}

package/src/app/modules/shared/components/file-uploader/mat-file-upload-queue/mat-file-upload-queue.service.spec.ts

@@ -0,0 +1,33 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MatFileUploadQueueService } from './mat-file-upload-queue.service';
+
+describe('MatFileUploadQueueService', () => {
+  let service: MatFileUploadQueueService;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: [MatFileUploadQueueService],
+    }).compileComponents();
+    service = TestBed.get(MatFileUploadQueueService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should initialize', () => {
+    expect(service.getInputValue()).toBe(null);
+    service.initialize({
+      fileAlias: 'test',
+      httpRequestHeaders: {},
+      httpRequestParams: {},
+      httpUrl: 'test',
+    });
+    expect(service.getInputValue()).toEqual({
+      fileAlias: 'test',
+      httpRequestHeaders: {},
+      httpRequestParams: {},
+      httpUrl: 'test',
+    });
+  });
+});

package/src/app/modules/shared/components/file-uploader/mat-file-upload-queue/mat-file-upload-queue.service.ts

@@ -0,0 +1,17 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+import {IInput} from '../mat-file-upload.type';
+
+@Injectable()
+export class MatFileUploadQueueService {
+  private inputValueSubject = new BehaviorSubject<IInput>(null);
+  inputValue$ = this.inputValueSubject.asObservable();
+
+  initialize(input: IInput): void {
+    this.inputValueSubject.next(input);
+  }
+
+  getInputValue(): IInput {
+    return this.inputValueSubject.getValue();
+  }
+}

package/src/app/modules/shared/components/file-uploader/mat-file-upload.module.ts

@@ -0,0 +1,35 @@
+import {NgModule} from '@angular/core';
+import {BytesPipe} from './bytes/bytes.pipe';
+import {MatIconModule} from '@angular/material/icon';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatCardModule} from '@angular/material/card';
+import {MatButtonModule} from '@angular/material/button';
+import {CommonModule} from '@angular/common';
+import {HttpClientModule} from '@angular/common/http';
+import {MatFileUploadQueueComponent} from './mat-file-upload-queue/mat-file-upload-queue.component';
+import {MatFileUploadComponent} from './mat-file-upload/mat-file-upload.component';
+import {FileUploadInputForDirective} from './file-upload-input-for/file-upload-input-for.directive';
+
+@NgModule({
+  declarations: [
+    BytesPipe,
+    MatFileUploadQueueComponent,
+    MatFileUploadComponent,
+    FileUploadInputForDirective
+  ],
+  imports: [
+    MatProgressBarModule,
+    MatCardModule,
+    MatButtonModule,
+    MatIconModule,
+    HttpClientModule,
+    CommonModule,
+  ],
+  exports: [
+    BytesPipe,
+    MatFileUploadQueueComponent,
+    MatFileUploadComponent,
+    FileUploadInputForDirective
+  ],
+})
+export class MatFileUploadModule {}

package/src/app/modules/shared/components/file-uploader/mat-file-upload.type.ts

@@ -0,0 +1,24 @@
+import { HttpHeaders, HttpParams } from '@angular/common/http';
+
+export interface IInput {
+  httpUrl: string;
+  httpRequestHeaders:
+    | HttpHeaders
+    | {
+        [header: string]: string | string[];
+      };
+  httpRequestParams:
+    | HttpParams
+    | {
+        [param: string]: string | string[];
+      };
+
+  fileAlias: string;
+}
+
+export interface IUploadProgress {
+  isLoading?: boolean;
+  progressPercentage?: number;
+  loaded?: number;
+  total?: number;
+}

package/src/app/modules/shared/components/preferences-menu/preferences-menu.component.html

@@ -0,0 +1,18 @@
+<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+  <mat-icon>more_vert</mat-icon>
+</button>
+<mat-menu #menu="matMenu">
+  <mat-slide-toggle>Slide me!</mat-slide-toggle>
+  <button mat-menu-item>
+    <mat-icon>dialpad</mat-icon>
+    <span>Redial</span>
+  </button>
+  <button mat-menu-item disabled>
+    <mat-icon>voicemail</mat-icon>
+    <span>Check voice mail</span>
+  </button>
+  <button mat-menu-item>
+    <mat-icon>notifications_off</mat-icon>
+    <span>Disable alerts</span>
+  </button>
+</mat-menu>