src/app/features/forms/attachments/components/attachments-form-group.component.ts

/********************************************************************************
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/

import {Component, Input, OnDestroy, OnInit} from "@angular/core";
import {FormControl} from "@angular/forms";
import {select, Store} from "@ngrx/store";
import {defer} from "rxjs";
import {take, takeUntil} from "rxjs/operators";
import {
    clearFileCacheAction,
    getStatementAttachmentsSelector,
    getStatementFileCacheSelector,
    IAttachmentFormValue,
    openAttachmentAction,
    queryParamsIdSelector
} from "../../../../store";
import {arrayJoin, createFormGroup} from "../../../../util";
import {AbstractReactiveFormComponent} from "../../abstract";

@Component({
    selector: "app-attachments-form-group",
    templateUrl: "./attachments-form-group.component.html",
    styleUrls: ["./attachments-form-group.component.scss"]
})
export class AttachmentsFormGroupComponent extends AbstractReactiveFormComponent<IAttachmentFormValue> implements OnInit, OnDestroy {

    @Input()
    public appAutoTagIds: string[];

    @Input()
    public appForbiddenTagIds: string[];

    @Input()
    public appRestrictedTagIds: string[];

    @Input()
    public appWithoutTagControl: boolean;

    @Input()
    public appCollapsed: boolean;

    @Input()
    public appFormGroup = createFormGroup<IAttachmentFormValue>({
        add: new FormControl([]),
        edit: new FormControl([])
    });

    @Input()
    public appTitle: string;

    public statementId$ = this.store.pipe(select(queryParamsIdSelector));

    public attachments$ = defer(() => this.store.pipe(
        select(getStatementAttachmentsSelector, {
            restrictedTagIds: this.appRestrictedTagIds,
            forbiddenTagIds: this.appForbiddenTagIds
        })
    ));

    public fileCache$ = this.store.pipe(select(getStatementFileCacheSelector));

    public constructor(public store: Store) {
        super();
    }

    public async ngOnInit() {
        // This await is required to avoid the ExpressionChangedAfterItHasBeenCheckedError:
        await Promise.resolve();
        this.filterAttachmentsInCurrentValue();
        this.updateFiles();
    }

    public ngOnDestroy() {
        this.clearFileCache();
        super.ngOnDestroy();
    }

    public async openAttachment(attachmentId: number) {
        const statementId = await this.statementId$.pipe(take(1)).toPromise();
        this.store.dispatch(openAttachmentAction({statementId, attachmentId}));
    }

    private clearFileCache() {
        this.statementId$.pipe(take(1))
            .subscribe((statementId) => this.store.dispatch(clearFileCacheAction({statementId})));
    }

    private filterAttachmentsInCurrentValue() {
        this.attachments$.pipe(takeUntil(this.destroy$)).subscribe((attachments) => {
            const value = this.getValue();
            this.patchValue({
                ...value,
                edit: arrayJoin(value.edit).filter((_) => {
                    return attachments.some((attachment) => _.attachment === attachment.id);
                })
            });
        });
    }

    private updateFiles() {
        this.fileCache$.pipe(takeUntil(this.destroy$)).subscribe((files) => {
            const add = files;
            this.patchValue({add});
        });
    }

}