/* * Squidex Headless CMS * * @license * Copyright (c) Sebastian Stehle. All rights reserved */ // tslint:disable:prefer-for-of import { Component, forwardRef, Input } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { AppComponentBase, AppsStoreService, ContentDto, ContentsService, FieldDto, ImmutableArray, NotificationService, SchemaDetailsDto, SchemasService } from 'shared'; const NOOP = () => { /* NOOP */ }; export const SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ReferencesEditorComponent), multi: true }; @Component({ selector: 'sqx-references-editor', styleUrls: ['./references-editor.component.scss'], templateUrl: './references-editor.component.html', providers: [SQX_REFERENCES_EDITOR_CONTROL_VALUE_ACCESSOR] }) export class ReferencesEditorComponent extends AppComponentBase implements ControlValueAccessor { private changeCallback: (value: any) => void = NOOP; private touchedCallback: () => void = NOOP; @Input() public schemaId: string; @Input() public languageCode: string; public schema: SchemaDetailsDto; public contentItems = ImmutableArray.empty(); public contentFields: FieldDto[]; public columnWidth: number; public isDisabled = false; public isInvalidSchema = false; constructor(apps: AppsStoreService, notifications: NotificationService, private readonly contentsService: ContentsService, private readonly schemasService: SchemasService ) { super(notifications, apps); } public ngOnInit() { this.appNameOnce() .switchMap(app => this.schemasService.getSchema(app, this.schemaId)) .subscribe(dto => { this.schema = dto; this.loadFields(); }, error => { this.isInvalidSchema = true; }); } public writeValue(value: any) { this.contentItems = ImmutableArray.empty(); if (value && value.length > 0) { const contentIds: string[] = value; this.appNameOnce() .switchMap(app => this.contentsService.getContents(app, this.schemaId, 10000, 0, undefined, contentIds)) .subscribe(dtos => { this.contentItems = ImmutableArray.of(dtos.items); }); } } public setDisabledState(isDisabled: boolean): void { this.isDisabled = isDisabled; } public registerOnChange(fn: any) { this.changeCallback = fn; } public registerOnTouched(fn: any) { this.touchedCallback = fn; } public canDrop() { const component = this; return (dragData: any) => { return dragData.content instanceof ContentDto && dragData.schemaId === component.schemaId && !component.contentItems.find(c => c.id === dragData.content.id); }; } public onContentDropped(content: ContentDto) { if (content) { this.contentItems = this.contentItems.pushFront(content); this.updateValue(); } } public onContentRemoving(content: ContentDto) { if (content) { this.contentItems = this.contentItems.remove(content); this.updateValue(); } } public onContentsSorted(contents: ContentDto[]) { if (contents) { this.contentItems = ImmutableArray.of(contents); this.updateValue(); } } private updateValue() { let ids: string[] | null = this.contentItems.values.map(x => x.id); if (ids.length === 0) { ids = null; } this.touchedCallback(); this.changeCallback(ids); } private loadFields() { this.contentFields = this.schema.fields.filter(x => x.properties.isListField); this.columnWidth = 100 / this.contentFields.length; if (this.contentFields.length === 0 && this.schema.fields.length > 0) { this.contentFields = [this.schema.fields[0]]; } } }