mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-09-10 14:11:42 +00:00
review changes
This commit is contained in:
APuschkin
@@ -1,131 +1,150 @@
|
||||
<mat-card appearance="outlined" class="adf-start-process" *ngIf="processDefinitionLoaded; else spinner">
|
||||
<mat-card-content>
|
||||
<mat-card-title *ngIf="showTitle" class="adf-title">
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate }}
|
||||
</mat-card-title>
|
||||
@if (processDefinitionLoaded) {
|
||||
<mat-card appearance="outlined" class="adf-start-process">
|
||||
<mat-card-content>
|
||||
@if (showTitle) {
|
||||
<mat-card-title class="adf-title">
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate }}
|
||||
</mat-card-title>
|
||||
}
|
||||
|
||||
<mat-card-subtitle class="adf-error-message" id="error-message" *ngIf="errorMessageId">
|
||||
{{ errorMessageId | translate }}
|
||||
</mat-card-subtitle>
|
||||
@if (errorMessageId) {
|
||||
<mat-card-subtitle class="adf-error-message" id="error-message">
|
||||
{{ errorMessageId | translate }}
|
||||
</mat-card-subtitle>
|
||||
}
|
||||
|
||||
<div *ngIf="!isProcessDefinitionsEmpty; else emptyProcessDefinitionsList">
|
||||
<form [formGroup]="processForm" class="adf-select-process-form">
|
||||
<mat-form-field
|
||||
class="adf-process-input-container"
|
||||
floatLabel="always"
|
||||
*ngIf="showSelectProcessDropdown"
|
||||
data-automation-id="adf-select-cloud-process-dropdown"
|
||||
>
|
||||
<mat-label class="adf-start-process-input-label">{{
|
||||
'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate
|
||||
}}</mat-label>
|
||||
<input matInput formControlName="processDefinition" [matAutocomplete]="auto" id="processDefinitionName" />
|
||||
|
||||
<div class="adf-process-input-autocomplete">
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
id="processDefinitionOptions"
|
||||
[displayWith]="displayProcessNameOnDropdown"
|
||||
(optionSelected)="setProcessDefinitionOnForm($event.option.value)"
|
||||
>
|
||||
<mat-option
|
||||
*ngFor="let processDef of filteredProcesses"
|
||||
[value]="getProcessDefinitionValue(processDef)"
|
||||
(click)="processDefinitionSelectionChanged(processDef)"
|
||||
@if (!isProcessDefinitionsEmpty) {
|
||||
<div>
|
||||
<form [formGroup]="processForm" class="adf-select-process-form">
|
||||
@if (showSelectProcessDropdown) {
|
||||
<mat-form-field
|
||||
class="adf-process-input-container"
|
||||
floatLabel="always"
|
||||
data-automation-id="adf-select-cloud-process-dropdown"
|
||||
>
|
||||
{{ getProcessDefinitionValue(processDef) }}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
<mat-label class="adf-start-process-input-label">{{
|
||||
'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate
|
||||
}}</mat-label>
|
||||
<input matInput formControlName="processDefinition" [matAutocomplete]="auto" id="processDefinitionName" />
|
||||
|
||||
<button
|
||||
id="adf-select-process-dropdown"
|
||||
title="{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.SELECT_PROCESS_DROPDOWN' | translate }}"
|
||||
mat-icon-button
|
||||
(click)="displayDropdown($event)"
|
||||
<div class="adf-process-input-autocomplete">
|
||||
<mat-autocomplete
|
||||
#auto="matAutocomplete"
|
||||
id="processDefinitionOptions"
|
||||
[displayWith]="displayProcessNameOnDropdown"
|
||||
(optionSelected)="setProcessDefinitionOnForm($event.option.value)"
|
||||
>
|
||||
@for (processDef of filteredProcesses; track processDef) {
|
||||
<mat-option
|
||||
[value]="getProcessDefinitionValue(processDef)"
|
||||
(click)="processDefinitionSelectionChanged(processDef)"
|
||||
>
|
||||
{{ getProcessDefinitionValue(processDef) }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
|
||||
<button
|
||||
id="adf-select-process-dropdown"
|
||||
title="{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.SELECT_PROCESS_DROPDOWN' | translate }}"
|
||||
mat-icon-button
|
||||
(click)="displayDropdown($event)"
|
||||
>
|
||||
<mat-icon>arrow_drop_down</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
@if (processDefinition.hasError('required')) {
|
||||
<mat-error class="adf-error-pb">
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }}
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
<adf-inplace-form-input [control]="processInstanceName">
|
||||
<ng-container label>
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}
|
||||
</ng-container>
|
||||
|
||||
<ng-container error>
|
||||
@if (processInstanceName.hasError('required')) {
|
||||
<span>
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
|
||||
</span>
|
||||
}
|
||||
@if (processInstanceName.hasError('maxlength')) {
|
||||
<span id="adf-start-process-maxlength-error">
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters: maxNameLength } }}
|
||||
</span>
|
||||
}
|
||||
@if (processInstanceName.hasError('pattern')) {
|
||||
<span>
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}
|
||||
</span>
|
||||
}
|
||||
</ng-container>
|
||||
</adf-inplace-form-input>
|
||||
</form>
|
||||
|
||||
@if (hasForm) {
|
||||
<adf-cloud-form
|
||||
#startForm
|
||||
[appName]="appName"
|
||||
[appVersion]="processDefinitionCurrent.appVersion"
|
||||
[data]="resolvedValues"
|
||||
[formId]="processDefinitionCurrent.formKey"
|
||||
[displayModeConfigurations]="displayModeConfigurations"
|
||||
[showSaveButton]="showSaveButton"
|
||||
[showCompleteButton]="showCompleteButton"
|
||||
[showRefreshButton]="false"
|
||||
[showValidationIcon]="false"
|
||||
[showTitle]="false"
|
||||
(formContentClicked)="onFormContentClicked($event)"
|
||||
(formLoaded)="onFormLoaded($event)"
|
||||
(executeOutcome)="onCustomOutcomeClicked($event.outcome.name)"
|
||||
>
|
||||
<mat-icon>arrow_drop_down</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-error *ngIf="processDefinition.hasError('required')" class="adf-error-pb">
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<adf-inplace-form-input [control]="processInstanceName">
|
||||
<ng-container label>
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}
|
||||
</ng-container>
|
||||
|
||||
<ng-container error>
|
||||
<span *ngIf="processInstanceName.hasError('required')">
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
|
||||
</span>
|
||||
<span *ngIf="processInstanceName.hasError('maxlength')" id="adf-start-process-maxlength-error">
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters: maxNameLength } }}
|
||||
</span>
|
||||
<span *ngIf="processInstanceName.hasError('pattern')">
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}
|
||||
</span>
|
||||
</ng-container>
|
||||
</adf-inplace-form-input>
|
||||
</form>
|
||||
|
||||
<ng-container *ngIf="hasForm; else taskFormCloudButtons">
|
||||
<adf-cloud-form
|
||||
#startForm
|
||||
[appName]="appName"
|
||||
[appVersion]="processDefinitionCurrent.appVersion"
|
||||
[data]="resolvedValues"
|
||||
[formId]="processDefinitionCurrent.formKey"
|
||||
[displayModeConfigurations]="displayModeConfigurations"
|
||||
[showSaveButton]="showSaveButton"
|
||||
[showCompleteButton]="showCompleteButton"
|
||||
[showRefreshButton]="false"
|
||||
[showValidationIcon]="false"
|
||||
[showTitle]="false"
|
||||
(formContentClicked)="onFormContentClicked($event)"
|
||||
(formLoaded)="onFormLoaded($event)"
|
||||
(executeOutcome)="onCustomOutcomeClicked($event.outcome.name)"
|
||||
>
|
||||
<adf-cloud-form-custom-outcomes>
|
||||
<adf-cloud-form-custom-outcomes>
|
||||
<ng-template [ngTemplateOutlet]="taskFormCloudButtons" />
|
||||
</adf-cloud-form-custom-outcomes>
|
||||
</adf-cloud-form>
|
||||
} @else {
|
||||
<ng-template [ngTemplateOutlet]="taskFormCloudButtons" />
|
||||
</adf-cloud-form-custom-outcomes>
|
||||
</adf-cloud-form>
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<ng-template #taskFormCloudButtons>
|
||||
<div class="adf-start-process-cloud-actions">
|
||||
<button *ngIf="showCancelButton" mat-button (click)="cancelStartProcess()" id="cancel_process">
|
||||
{{ cancelButtonLabel }}
|
||||
</button>
|
||||
<button
|
||||
*ngIf="showStartProcessButton$ | async"
|
||||
color="primary"
|
||||
mat-raised-button
|
||||
[disabled]="disableStartButton || !isProcessFormValid"
|
||||
(click)="startProcess()"
|
||||
data-automation-id="btn-start"
|
||||
id="button-start"
|
||||
class="adf-btn-start"
|
||||
>
|
||||
{{ startProcessButtonLabel }}
|
||||
</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #emptyProcessDefinitionsList>
|
||||
<mat-card-content *ngIf="processDefinitionLoaded">
|
||||
<mat-card-subtitle class="error-message" id="no-process-message">
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase }}
|
||||
</mat-card-subtitle>
|
||||
</mat-card-content>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #spinner>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<mat-card-content>
|
||||
<mat-card-subtitle class="error-message" id="no-process-message">
|
||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase }}
|
||||
</mat-card-subtitle>
|
||||
</mat-card-content>
|
||||
}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
} @else {
|
||||
<div class="adf-loading-container">
|
||||
<mat-progress-spinner class="adf-loading" color="primary" mode="indeterminate" />
|
||||
</div>
|
||||
}
|
||||
|
||||
<ng-template #taskFormCloudButtons>
|
||||
<div class="adf-start-process-cloud-actions">
|
||||
@if (showCancelButton) {
|
||||
<button mat-button (click)="cancelStartProcess()" id="cancel_process">
|
||||
{{ cancelButtonLabel }}
|
||||
</button>
|
||||
}
|
||||
@if (showStartProcessButton$ | async) {
|
||||
<button
|
||||
color="primary"
|
||||
mat-raised-button
|
||||
[disabled]="disableStartButton || !isProcessFormValid"
|
||||
(click)="startProcess()"
|
||||
data-automation-id="btn-start"
|
||||
id="button-start"
|
||||
class="adf-btn-start"
|
||||
>
|
||||
{{ startProcessButtonLabel }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@@ -458,7 +458,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
|
||||
},
|
||||
error: (err) => {
|
||||
this.errorMessageId = err?.response?.body?.message || 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.START_PROCESS';
|
||||
this.unifyErrorResponse(err?.response?.body);
|
||||
this.unifyErrorResponse(err);
|
||||
this.error.emit(err);
|
||||
this.isProcessStarting = false;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user