113 lines
4.8 KiB
TypeScript
113 lines
4.8 KiB
TypeScript
import { Component, Input, OnInit } from '@angular/core';
|
|
import { UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
|
|
import { DescriptionTemplateUploadOption } from '@app/core/model/description-template/description-template';
|
|
import { ConfigurationService } from "@app/core/services/configuration/configuration.service";
|
|
import { DescriptionTemplateUploadDataEditorModel, DescriptionTemplateUploadOptionEditorModel } from '../../../description-template-editor.model';
|
|
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
|
|
|
|
@Component({
|
|
selector: 'app-description-template-editor-upload-field-component',
|
|
styleUrls: ['./description-template-editor-upload-field.component.scss'],
|
|
templateUrl: './description-template-editor-upload-field.component.html'
|
|
})
|
|
export class DescriptionTemplateEditorUploadFieldComponent implements OnInit {
|
|
types: Array<DescriptionTemplateUploadOption> = [
|
|
// images
|
|
{ label: "Animated Portable Network Graphics (APNG)", value: "image/apng" },
|
|
{ label: "AV1 Image File Format (AVIF)", value: "image/avif" },
|
|
{ label: "Graphics Interchange Format (GIF)", value: "image/gif" },
|
|
{ label: "Joint Photographic Expert Group image (JPEG)", value: "image/jpeg" },
|
|
{ label: "Portable Network Graphics (PNG)", value: "image/png" },
|
|
{ label: "Scalable Vector Graphics (SVG)", value: "image/svg+xml" },
|
|
{ label: "Web Picture format (WEBP)", value: "image/webp" },
|
|
{ label: "Tagged Image File Format (TIFF)", value: "image/tiff" },
|
|
|
|
// office word
|
|
{ label: "Microsoft Word 97-2003", value: "application/msword" }, // .doc, .dot
|
|
{ label: "Microsoft Word 2007-2013", value: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }, // .docx
|
|
{ label: "OpenDocument Text", value: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }, // .odt
|
|
|
|
// office excel
|
|
{ label: "Microsoft Excel 97-2003", value: "application/vnd.ms-excel" }, // .xls, .xlt, .xla
|
|
{ label: "Microsoft Excel 2007-2013", value: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }, // .xlsx
|
|
{ label: "OpenDocument Spreadsheet", value: "application/vnd.oasis.opendocument.spreadsheet" }, // .ods
|
|
|
|
// office powerpoint
|
|
{ label: "Microsoft PowerPoint 97-2003", value: "application/vnd.ms-powerpoint" }, // .ppt, .pot, .pps, .ppa
|
|
{ label: "Microsoft PowerPoint 2007-2013", value: "application/vnd.openxmlformats-officedocument.presentationml.presentation" }, // .pptx
|
|
{ label: "OpenDocument Presentation", value: "application/vnd.oasis.opendocument.presentation" }, // .odp
|
|
|
|
|
|
{ label: "Comma-Seperated Values (CSV)", value: "text/csv" },
|
|
{ label: "Adobe Portable Document Format (PDF)", value: "application/pdf" }
|
|
];
|
|
|
|
selected: string[] = [];
|
|
public typesFormControl = new UntypedFormControl();
|
|
|
|
@Input() form: UntypedFormGroup;
|
|
@Input() validationErrorModel: ValidationErrorModel;
|
|
@Input() validationRootPath: string;
|
|
|
|
constructor(private configurationService: ConfigurationService) { }
|
|
|
|
ngOnInit() {
|
|
let typeValues: string[] = this.types.map(type => type.value);
|
|
if (this.form.get('data') && this.form.get('data').get('types')) {
|
|
for (let type of this.form.get('data').get('types').value) {
|
|
if (typeValues.indexOf(type.value) != -1) {
|
|
this.selected.push(type.value);
|
|
}
|
|
}
|
|
this.typesFormControl.setValue(this.selected);
|
|
|
|
}
|
|
}
|
|
|
|
selectedType(type: DescriptionTemplateUploadOption) {
|
|
if (!this.form.get('data').get('types').disabled) {
|
|
let index = this.selected.indexOf(type.value);
|
|
if (index == -1) {
|
|
this.selected.push(type.value);
|
|
this.addNewRow(type);
|
|
} else {
|
|
this.selected.splice(index, 1);
|
|
this.deleteRow(index);
|
|
}
|
|
}
|
|
}
|
|
|
|
isCustomType(value: string) {
|
|
return this.selected.indexOf(value) == -1;
|
|
}
|
|
|
|
addNewRow(type: DescriptionTemplateUploadOption = null) {
|
|
const typesArray = this.form.get('data').get('types') as UntypedFormArray;
|
|
const typeListOptions: DescriptionTemplateUploadOptionEditorModel = new DescriptionTemplateUploadOptionEditorModel(this.validationErrorModel);
|
|
if (type != null) {
|
|
typeListOptions.fromModel(type);
|
|
}
|
|
(<UntypedFormGroup>this.form.get('data')).addControl('types', new UntypedFormBuilder().array([]));
|
|
typesArray.push(typeListOptions.buildForm({rootPath: this.validationRootPath + 'data.types[' + typesArray.length + '].'}));
|
|
}
|
|
|
|
deleteRow(index: number) {
|
|
if (this.form.get('data').get('types')) {
|
|
(<UntypedFormArray>this.form.get('data').get('types')).removeAt(index);
|
|
DescriptionTemplateUploadDataEditorModel.reapplyUploadDataValidators(
|
|
{
|
|
formGroup: this.form.get('data') as UntypedFormGroup,
|
|
validationErrorModel: this.validationErrorModel,
|
|
rootPath: `${this.validationRootPath}data.`,
|
|
}
|
|
);
|
|
|
|
this.form.get('data').get('types').markAsDirty();
|
|
}
|
|
}
|
|
|
|
public getConfiguration() {
|
|
return this.configurationService;
|
|
}
|
|
}
|