alfresco-ng2-components/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts

/*!
 * @license
 * Copyright © 2005-2026 Hyland Software, Inc. and its affiliates. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {
    ChangeDetectorRef,
    Component,
    DestroyRef,
    EventEmitter,
    HostListener,
    inject,
    InjectionToken,
    Input,
    OnChanges,
    OnInit,
    Output,
    SimpleChanges,
    ViewChild
} from '@angular/core';
import { forkJoin, isObservable, Observable, of, Subscription } from 'rxjs';
import { filter, map, switchMap } from 'rxjs/operators';
import {
    ConfirmDialogComponent,
    ContentLinkModel,
    FormatSpacePipe,
    FormBaseComponent,
    FormEvent,
    FormFieldModel,
    FormRulesEvent,
    FormFieldValidator,
    FormModel,
    FormOutcomeEvent,
    FormOutcomeModel,
    FormRendererComponent,
    FormService,
    FormValues,
    IconModule,
    ToolbarComponent,
    ToolbarDividerComponent,
    UploadWidgetContentLinkModel,
    WidgetVisibilityService
} from '@alfresco/adf-core';
import { FormCloudService } from '../services/form-cloud.service';
import { TaskVariableCloud } from '../models/task-variable-cloud.model';
import { TaskDetailsCloudModel } from '../../task/models/task-details-cloud.model';
import { MatDialog } from '@angular/material/dialog';
import { v4 as uuidGeneration } from 'uuid';
import { FormCloudDisplayMode, FormCloudDisplayModeConfiguration } from '../../services/form-fields.interfaces';
import { FormCloudSpinnerService } from '../services/spinner/form-cloud-spinner.service';
import { DisplayModeService } from '../services/display-mode.service';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { UpperCasePipe } from '@angular/common';
import { TranslatePipe } from '@ngx-translate/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { A11yModule } from '@angular/cdk/a11y';

interface FormFieldRuntimeState {
    value: any;
    required: boolean;
    readOnly: boolean;
    isVisible: boolean;
    visibilityCondition: any;
}

export const FORM_CLOUD_FIELD_VALIDATORS_TOKEN = new InjectionToken<FormFieldValidator[]>('FORM_CLOUD_FIELD_VALIDATORS_TOKEN');
export const ADF_FORM_TAB_NAV_ENABLED = new InjectionToken<Observable<boolean> | boolean>('ADF_FORM_TAB_NAV_ENABLED');

@Component({
    selector: 'adf-cloud-form',
    imports: [
        UpperCasePipe,
        TranslatePipe,
        FormatSpacePipe,
        MatButtonModule,
        MatCardModule,
        FormRendererComponent,
        IconModule,
        ToolbarDividerComponent,
        ToolbarComponent,
        A11yModule
    ],
    providers: [FormCloudSpinnerService],
    templateUrl: './form-cloud.component.html',
    styleUrls: ['./form-cloud.component.scss']
})
export class FormCloudComponent extends FormBaseComponent implements OnChanges, OnInit {
    /** App name to fetch corresponding form and values. */
    @Input()
    appName: string = '';

    /** The application version to use when fetching data */
    @Input()
    appVersion?: number;

    /** Task id to fetch corresponding form and values. */
    @Input()
    formId: string;

    /** ProcessInstanceId id to fetch corresponding form and values. */
    @Input()
    processInstanceId: string;

    /** Task id to fetch corresponding form and values. */
    @Input()
    taskId: string;

    /** Custom form values map to be used with the rendered form. */
    @Input()
    data: TaskVariableCloud[];

    /** The available display configurations for the form */
    @Input()
    displayModeConfigurations: FormCloudDisplayModeConfiguration[];

    /** Toggle rendering of the `Complete` button. */
    @Input()
    showCompleteButton = false;

    /**
     * Custom text for the `Save` button.
     * If not provided, the default text will be used.
     */
    @Input()
    customSaveButtonText: string = '';

    /**
     * Custom text for the `Complete` button.
     * If not provided, the default text will be used.
     */
    @Input()
    customCompleteButtonText: string = '';

    /**
     * Toggle to enable parent visibility check for validation.
     * When enabled, fields inside hidden groups/sections will skip validation.
     */
    @Input()
    enableParentVisibilityCheck: boolean = false;

    /** Emitted when the form is submitted with the `Save` or custom outcomes. */
    @Output()
    formSaved = new EventEmitter<FormModel>();

    /** Emitted when the form is submitted with the `Complete` outcome. */
    @Output()
    formCompleted = new EventEmitter<FormModel>();

    /** Emitted when the form is loaded or reloaded. */
    @Output()
    formLoaded = new EventEmitter<FormModel>();

    /** Emitted when form values are refreshed due to a data property change. */
    @Output()
    formDataRefreshed = new EventEmitter<FormModel>();

    /** Emitted when form content is clicked. */
    @Output()
    formContentClicked = new EventEmitter<ContentLinkModel>();

    /** Emitted when a display mode configuration is turned on. */
    @Output()
    displayModeOn = new EventEmitter<FormCloudDisplayModeConfiguration>();

    /** Emitted when a display mode configuration is turned off. */
    @Output()
    displayModeOff = new EventEmitter<FormCloudDisplayModeConfiguration>();

    protected subscriptions: Subscription[] = [];
    nodeId: string;
    formCloudRepresentationJSON: any;
    fieldValidators: FormFieldValidator[] = [];

    /** Pre-computed list of outcome buttons to render, filtered by visibility rules. */
    visibleOutcomes: FormOutcomeModel[] = [];

    override get form(): FormModel {
        return super.form;
    }

    @Input()
    override set form(form: FormModel) {
        super.form = form;
        this.recomputeVisibleOutcomes();
    }

    readonly id: string;
    displayMode: string;
    displayConfiguration: FormCloudDisplayModeConfiguration = DisplayModeService.DEFAULT_DISPLAY_MODE_CONFIGURATIONS[0];
    style: string = '';

    @ViewChild(FormRendererComponent)
    formRenderer!: FormRendererComponent<any>;

    private tabNavEnabledByHost = true;

    get shouldShowTabNavigation(): boolean {
        return this.tabNavEnabledByHost && this.currentForm?.json?.showBottomTabNavButtons === true && this.visibleTabCount > 1;
    }

    get canNavigatePreviousTab(): boolean {
        return this.formRenderer?.canNavigatePrevious ?? false;
    }

    get canNavigateNextTab(): boolean {
        return this.formRenderer?.canNavigateNext ?? this.visibleTabCount > 1;
    }

    protected formCloudService = inject(FormCloudService);
    protected formService = inject(FormService);
    protected visibilityService = inject(WidgetVisibilityService);
    protected dialog = inject(MatDialog);
    protected spinnerService = inject(FormCloudSpinnerService);
    protected displayModeService = inject(DisplayModeService);
    protected changeDetector = inject(ChangeDetectorRef);

    private readonly destroyRef = inject(DestroyRef);

    private get currentForm(): FormModel | undefined {
        return super.form;
    }

    private get visibleTabCount(): number {
        return this.currentForm?.tabs?.filter((tab) => tab.isVisible).length ?? 0;
    }

    navigateToPreviousTab(): void {
        if (this.formRenderer?.canNavigatePrevious) {
            this.formRenderer?.navigateToPreviousTab();
        }
    }

    navigateToNextTab(): void {
        if (this.formRenderer?.canNavigateNext) {
            this.formRenderer?.navigateToNextTab();
        }
    }

    constructor() {
        const injectedFieldValidators = inject(FORM_CLOUD_FIELD_VALIDATORS_TOKEN, { optional: true });
        const tabNavEnabledToken = inject(ADF_FORM_TAB_NAV_ENABLED, { optional: true });

        super();
        this.loadInjectedFieldValidators(injectedFieldValidators);
        this.spinnerService.initSpinnerHandling(this.destroyRef);

        this.id = uuidGeneration();

        if (tabNavEnabledToken != null) {
            if (isObservable(tabNavEnabledToken)) {
                tabNavEnabledToken.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((enabled) => {
                    this.tabNavEnabledByHost = enabled ?? false;
                    this.changeDetector.markForCheck();
                });
            } else {
                this.tabNavEnabledByHost = tabNavEnabledToken;
            }
        }

        this.formService.formContentClicked.pipe(takeUntilDestroyed()).subscribe((content) => {
            if (content instanceof UploadWidgetContentLinkModel) {
                this.form.setNodeIdValueForViewersLinkedToUploadWidget(content);
                this.onFormDataRefreshed(this.form);
                this.formService.formDataRefreshed.next(new FormEvent(this.form));
            } else {
                this.formContentClicked.emit(content);
            }
        });

        this.formService.updateFormValuesRequested.pipe(takeUntilDestroyed()).subscribe((valuesToSetIfNotPresent) => {
            this.form.addValuesNotPresent(valuesToSetIfNotPresent);
            this.onFormDataRefreshed(this.form);
        });

        this.formService.formFieldValueChanged.pipe(takeUntilDestroyed()).subscribe(() => {
            if (this.disableSaveButton) {
                this.disableSaveButton = false;
            }
        });

        this.formService.formRulesEvent
            .pipe(
                filter((event) => event?.type === 'fieldValueChanged' && event.form?.id === this.form?.id),
                takeUntilDestroyed()
            )
            .subscribe(() => this.recomputeVisibleOutcomes());
    }

    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent): void {
        event.stopPropagation();
    }

    ngOnChanges(changes: SimpleChanges) {
        const appName = changes['appName'];

        if (appName?.currentValue) {
            if (this.taskId) {
                this.getFormByTaskId(appName.currentValue, this.taskId, this.appVersion);
            } else if (this.formId) {
                this.getFormById(appName.currentValue, this.formId, this.appVersion);
            }
            return;
        }

        const formId = changes['formId'];
        if (formId?.currentValue && this.appName) {
            this.getFormById(this.appName, formId.currentValue, this.appVersion);
            return;
        }

        const taskId = changes['taskId'];
        if (taskId?.currentValue && this.appName) {
            this.getFormByTaskId(this.appName, taskId.currentValue, this.appVersion);
            return;
        }

        const dataChange = changes['data'];
        if (dataChange?.currentValue?.length > 0) {
            this.refreshFormData(dataChange.previousValue ?? []);
            return;
        }

        const formRepresentation = changes['form'];

        if (formRepresentation?.currentValue) {
            this.form = formRepresentation.currentValue;
            this.onFormLoaded(this.form);
            return;
        }

        const enableParentVisibilityCheckChange = changes['enableParentVisibilityCheck'];
        if (enableParentVisibilityCheckChange && this.form) {
            this.setCheckParentVisibilityForValidationOnFields();
            this.form.validateForm();
        }

        if (changes['readOnly'] || changes['showCompleteButton'] || changes['showSaveButton']) {
            this.recomputeVisibleOutcomes();
        }
    }

    ngOnInit(): void {
        DisplayModeService.displayMode$
            .pipe(
                filter((change) => change.id === this.id),
                takeUntilDestroyed(this.destroyRef)
            )
            .subscribe((displayModeChange) => {
                const oldDisplayMode = this.displayMode;
                this.displayMode = displayModeChange.displayMode;

                const oldDisplayModeConfiguration = this.displayModeService.findConfiguration(oldDisplayMode, this.displayModeConfigurations);
                const newDisplayModeConfiguration = this.displayModeService.findConfiguration(
                    displayModeChange.displayMode,
                    this.displayModeConfigurations
                );

                if (oldDisplayModeConfiguration?.displayMode !== newDisplayModeConfiguration?.displayMode) {
                    if (oldDisplayModeConfiguration) {
                        this.displayModeOff.emit(oldDisplayModeConfiguration);
                    }
                    if (newDisplayModeConfiguration) {
                        this.displayModeOn.emit(newDisplayModeConfiguration);
                    }
                }

                this.displayConfiguration = newDisplayModeConfiguration;
            });
    }

    /**
     * Invoked when user clicks form refresh button.
     */
    onRefreshClicked() {
        this.loadForm();
    }

    loadForm() {
        if (this.appName && this.taskId) {
            this.getFormByTaskId(this.appName, this.taskId, this.appVersion);
        } else if (this.appName && this.formId) {
            this.getFormById(this.appName, this.formId, this.appVersion);
        }
    }

    findProcessVariablesByTaskId(appName: string, taskId: string): Observable<TaskVariableCloud[]> {
        return this.formCloudService.getTask(appName, taskId).pipe(
            switchMap((task) => {
                if (this.isAProcessTask(task)) {
                    return this.formCloudService.getTaskVariables(appName, taskId);
                } else {
                    return of([]);
                }
            })
        );
    }

    getCustomOutcomeButtonText(outcome: FormOutcomeModel): string {
        if (outcome?.id === FormModel.SAVE_OUTCOME || outcome?.name === FormOutcomeModel.SAVE_ACTION) {
            return this.customSaveButtonText;
        } else if (outcome?.id === FormModel.COMPLETE_OUTCOME || outcome?.name === FormOutcomeModel.COMPLETE_ACTION) {
            return this.customCompleteButtonText;
        }
        return '';
    }

    isAProcessTask(taskRepresentation: TaskDetailsCloudModel): boolean {
        return taskRepresentation.processDefinitionId && taskRepresentation.processDefinitionDeploymentId !== 'null';
    }

    getFormByTaskId(appName: string, taskId: string, version?: number): Promise<FormModel> {
        return new Promise<FormModel>((resolve) => {
            forkJoin(this.formCloudService.getTaskForm(appName, taskId, version), this.formCloudService.getTaskVariables(appName, taskId))
                .pipe(takeUntilDestroyed(this.destroyRef))
                .subscribe(
                    (data) => {
                        this.formCloudRepresentationJSON = data[0];

                        this.formCloudRepresentationJSON.processVariables = data[1];
                        this.data = data[1];

                        const parsedForm = this.parseForm(this.formCloudRepresentationJSON);
                        this.visibilityService.refreshVisibility(parsedForm, this.data);
                        this.form = parsedForm;
                        this.setCheckParentVisibilityForValidationOnFields();
                        parsedForm.validateForm();
                        this.form.nodeId = '-my-';
                        this.onFormLoaded(this.form);
                        resolve(this.form);
                    },
                    (error) => {
                        this.handleError(error);
                        resolve(null);
                    }
                );
        });
    }

    getFormById(appName: string, formId: string, appVersion?: number) {
        this.formCloudService
            .getForm(appName, formId, appVersion)
            .pipe(
                map((form) => {
                    const flattenForm = { ...form.formRepresentation, ...form.formRepresentation.formDefinition };
                    delete flattenForm.formDefinition;
                    return flattenForm;
                }),
                takeUntilDestroyed(this.destroyRef)
            )
            .subscribe({
                next: (form) => {
                    this.formCloudRepresentationJSON = form;
                    this.formCloudRepresentationJSON.processVariables = this.data || [];
                    const parsedForm = this.parseForm(form);
                    this.visibilityService.refreshVisibility(parsedForm);
                    this.form = parsedForm;
                    this.setCheckParentVisibilityForValidationOnFields();
                    parsedForm?.validateForm();
                    this.form.nodeId = '-my-';
                    this.onFormLoaded(this.form);
                },
                error: (error) => {
                    this.handleError(error);
                }
            });
    }

    saveTaskForm() {
        if (this.form && this.appName && this.taskId) {
            this.formCloudService
                .saveTaskForm(this.appName, this.taskId, this.processInstanceId, `${this.form.id}`, this.form.values)
                .pipe(takeUntilDestroyed(this.destroyRef))
                .subscribe({
                    next: () => {
                        this.onTaskSaved(this.form);
                    },
                    error: (error) => this.onTaskSavedError(error)
                });
            this.displayModeService.onSaveTask(this.id, this.displayMode, this.displayModeConfigurations);
        }
    }

    completeTaskForm(outcome?: string, outcomeId?: string) {
        if (this.form?.confirmMessage?.show === true) {
            const dialogRef = this.dialog.open(ConfirmDialogComponent, {
                data: {
                    message: this.form.confirmMessage.message
                },
                minWidth: '450px'
            });

            dialogRef
                .afterClosed()
                .pipe(takeUntilDestroyed(this.destroyRef))
                .subscribe((result) => {
                    if (result === true) {
                        this.completeForm(outcome, outcomeId);
                    } else {
                        this.disableSaveButton = false;
                        this.disableCompleteButton = false;
                    }
                });
        } else {
            this.completeForm(outcome, outcomeId);
        }
        this.displayModeService.onCompleteTask(this.id, this.displayMode, this.displayModeConfigurations);
    }

    private completeForm(outcome?: string, outcomeId?: string) {
        if (this.form && this.appName && this.taskId) {
            this.formCloudService
                .completeTaskForm(this.appName, this.taskId, this.processInstanceId, `${this.form.id}`, this.form.values, outcome, this.appVersion)
                .pipe(takeUntilDestroyed(this.destroyRef))
                .subscribe({
                    next: () => {
                        this.form.selectedOutcome = outcome;
                        this.form.selectedOutcomeId = outcomeId;
                        this.onTaskCompleted(this.form);
                    },
                    error: (error) => this.onTaskCompletedError(error)
                });
        }
    }

    parseForm(formCloudRepresentationJSON?: any): FormModel | null {
        if (formCloudRepresentationJSON) {
            const formValues: FormValues = {};
            (this.data || []).forEach((variable) => {
                formValues[variable.name] = variable.value;
            });

            const form = new FormModel(formCloudRepresentationJSON, formValues, this.readOnly, this.formService, undefined, this.fieldValidators);

            if (this.taskId) {
                form.outcomes = (form.outcomes ?? []).filter((outcome) => outcome.id !== FormModel.START_PROCESS_OUTCOME);
            }

            return form;
        }

        return null;
    }

    /**
     * Get custom set of outcomes for a Form Definition.
     *
     * @param form Form definition model.
     * @returns list of form outcomes
     */
    getFormDefinitionOutcomes(form: FormModel): FormOutcomeModel[] {
        return [new FormOutcomeModel(form, { id: FormModel.SAVE_OUTCOME, name: FormOutcomeModel.SAVE_ACTION, isSystem: true })];
    }

    checkVisibility(field: FormFieldModel) {
        if (field?.form) {
            this.visibilityService.refreshVisibility(field.form);
            this.recomputeVisibleOutcomes();
        }
    }

    private refreshFormData(previousData: TaskVariableCloud[] = []) {
        const snapshot = this.snapshotRuntimeState();

        this.form = this.parseForm(this.formCloudRepresentationJSON);
        if (!this.form) {
            return;
        }

        const changedFieldIds = this.getChangedFieldIds(previousData, this.data ?? []);
        this.restoreRuntimeState(this.form, snapshot, changedFieldIds);

        this.setCheckParentVisibilityForValidationOnFields();
        this.visibilityService.refreshVisibility(this.form);
        this.form.validateForm();
        this.recomputeVisibleOutcomes();
        this.onFormLoaded(this.form);
        this.formService.formRulesEvent.next(new FormRulesEvent('dataRefreshed', new FormEvent(this.form)));
        this.onFormDataRefreshed(this.form);
    }

    private snapshotRuntimeState(): Map<string, FormFieldRuntimeState> {
        const snapshot = new Map<string, FormFieldRuntimeState>();
        if (!this.form) {
            return snapshot;
        }

        for (const field of this.form.getFormFields()) {
            snapshot.set(field.id, {
                value: field.value,
                required: field.required,
                readOnly: field.readOnly,
                isVisible: field.isVisible,
                visibilityCondition: field.visibilityCondition
            });
        }

        return snapshot;
    }

    private getChangedFieldIds(previousData: TaskVariableCloud[], nextData: TaskVariableCloud[]): Set<string> {
        const prevMap = new Map(previousData.map((v) => [v.name, v.value]));
        const changed = new Set<string>();

        for (const variable of nextData) {
            const prev = prevMap.get(variable.name);
            const next = variable.value;
            const isPrimitive = (v: unknown) => v === null || (typeof v !== 'object' && typeof v !== 'function');
            const equal = isPrimitive(prev) && isPrimitive(next) ? Object.is(prev, next) : JSON.stringify(prev) === JSON.stringify(next);
            if (!equal) {
                changed.add(variable.name);
            }
        }

        return changed;
    }

    private restoreRuntimeState(form: FormModel, snapshot: Map<string, FormFieldRuntimeState>, changedFieldIds: Set<string>): void {
        for (const field of form.getFormFields()) {
            if (changedFieldIds.has(field.id)) {
                continue;
            }

            const prior = snapshot.get(field.id);
            if (!prior) {
                continue;
            }

            field.restoreRuntimeValue(prior.value);
            field.restoreRuntimeFlags(prior.required, prior.readOnly);
            field.isVisible = prior.isVisible;
            field.visibilityCondition = prior.visibilityCondition;
        }
    }

    private recomputeVisibleOutcomes(): void {
        const outcomes = this.form?.outcomes;
        if (!outcomes) {
            this.visibleOutcomes = [];
            return;
        }

        this.visibleOutcomes = outcomes.filter((outcome) => outcome.isVisible && this.isOutcomeButtonVisible(outcome, this.form.readOnly));
    }

    /**
     * Sets the parent visibility check flag on all form fields.
     * When enabled, fields inside hidden groups/sections will skip validation.
     * When disabled, resets flags to false to revert to default behavior.
     */
    private setCheckParentVisibilityForValidationOnFields(): void {
        if (!this.form) {
            return;
        }

        this.form.enableParentVisibilityCheck = this.enableParentVisibilityCheck;
        const allFields = this.form.getFormFields();
        allFields.forEach((field) => {
            field.checkParentVisibilityForValidation = this.enableParentVisibilityCheck;
        });
    }

    protected onFormLoaded(form: FormModel) {
        if (form) {
            this.displayModeConfigurations = this.displayModeService.getDisplayModeConfigurations(this.displayModeConfigurations);
            this.displayMode = this.displayModeService.switchToDisplayMode(
                this.id,
                this.form.json.displayMode,
                this.displayMode,
                this.displayModeConfigurations
            );

            this.displayConfiguration = this.displayModeService.findConfiguration(this.displayMode, this.displayModeConfigurations);

            this.displayModeOn.emit(this.displayConfiguration);
        }

        this.changeDetector.detectChanges();
        this.formLoaded.emit(form);
    }

    protected onFormDataRefreshed(form: FormModel) {
        this.formDataRefreshed.emit(form);
    }

    protected onTaskSaved(form: FormModel) {
        this.formSaved.emit(form);
    }

    protected onTaskSavedError(error: any) {
        this.handleError(error);
    }

    protected onTaskCompleted(form: FormModel) {
        this.formCompleted.emit(form);
    }

    protected onTaskCompletedError(error: any) {
        this.handleError(error);
    }

    protected onExecuteOutcome(outcome: FormOutcomeModel): boolean {
        const args = new FormOutcomeEvent(outcome);

        if (args.defaultPrevented) {
            return false;
        }

        this.executeOutcome.emit(args);
        return !args.defaultPrevented;
    }

    protected storeFormAsMetadata() {}

    switchToDisplayMode(newDisplayMode?: string) {
        this.displayModeService.switchToDisplayMode(this.id, FormCloudDisplayMode[newDisplayMode], this.displayMode, this.displayModeConfigurations);
    }

    findDisplayConfiguration(displayMode?: string): FormCloudDisplayModeConfiguration {
        return this.displayModeService.findConfiguration(FormCloudDisplayMode[displayMode], this.displayModeConfigurations);
    }

    loadInjectedFieldValidators(injectedFieldValidators: FormFieldValidator[]): void {
        if (Array.isArray(injectedFieldValidators) && injectedFieldValidators.length) {
            this.fieldValidators = [...this.fieldValidators, ...injectedFieldValidators];
        }
    }
}