import { FocusMonitor } from '@angular/cdk/a11y'; import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, OnInit, Optional, Output, Self, TemplateRef } from '@angular/core'; import { FormBuilder, NgControl } from '@angular/forms'; import { MatDialog, MatFormFieldControl } from '@angular/material'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { MediafileRepositoryService } from 'app/core/repositories/mediafiles/mediafile-repository.service'; import { BaseFormControlComponent } from 'app/shared/models/base/base-form-control'; import { mediumDialogSettings } from 'app/shared/utils/dialog-settings'; import { ViewMediafile } from 'app/site/mediafiles/models/view-mediafile'; @Component({ selector: 'os-attachment-control', templateUrl: './attachment-control.component.html', styleUrls: ['./attachment-control.component.scss'], providers: [{ provide: MatFormFieldControl, useExisting: AttachmentControlComponent }], changeDetection: ChangeDetectionStrategy.OnPush }) export class AttachmentControlComponent extends BaseFormControlComponent implements OnInit { /** * Output for an error handler */ @Output() public errorHandler: EventEmitter = new EventEmitter(); /** * The file list that is necessary for the `SearchValueSelector` */ public mediaFileList: Observable; public get empty(): boolean { return !this.contentForm.value.length; } public get controlType(): string { return 'attachment-control'; } /** * Default constructor * * @param dialogService Reference to the `MatDialog` * @param mediaService Reference for the `MediaFileRepositoryService` */ public constructor( fb: FormBuilder, fm: FocusMonitor, element: ElementRef, @Optional() @Self() public ngControl: NgControl, private dialogService: MatDialog, private mediaService: MediafileRepositoryService ) { super(fb, fm, element, ngControl); } /** * On init method */ public ngOnInit(): void { this.mediaFileList = this.mediaService .getViewModelListObservable() .pipe(map(files => files.filter(file => !file.is_directory))); } /** * Function to open a given dialog * * @param dialog the dialog to open */ public openUploadDialog(dialog: TemplateRef): void { this.dialogService.open(dialog, { ...mediumDialogSettings, disableClose: false }); } /** * Function to set the value for the `SearchValueSelector` after successful upload * * @param fileIDs a list with the ids of the uploaded files */ public uploadSuccess(fileIDs: number[]): void { const newValues = [...this.contentForm.value, ...fileIDs]; this.updateForm(newValues); this.dialogService.closeAll(); } /** * Function to emit an occurring error. * * @param error The occurring error */ public uploadError(error: string): void { this.errorHandler.emit(error); } public onContainerClick(event: MouseEvent): void { // TODO: implement } protected initializeForm(): void { this.contentForm = this.fb.control([]); } protected updateForm(value: ViewMediafile[]): void { this.contentForm.setValue(value); } }