OpenSlides/client/src/app/shared/components/attachment-control/attachment-control.component.ts
2020-03-17 07:24:36 +01:00

115 lines
3.4 KiB
TypeScript

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<ViewMediafile[]> implements OnInit {
/**
* Output for an error handler
*/
@Output()
public errorHandler: EventEmitter<string> = new EventEmitter();
/**
* The file list that is necessary for the `SearchValueSelector`
*/
public mediaFileList: Observable<ViewMediafile[]>;
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<HTMLElement>,
@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<string>): 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);
}
}