mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-09-17 14:21:29 +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">
|
@if (processDefinitionLoaded) {
|
||||||
<mat-card-content>
|
<mat-card appearance="outlined" class="adf-start-process">
|
||||||
<mat-card-title *ngIf="showTitle" class="adf-title">
|
<mat-card-content>
|
||||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate }}
|
@if (showTitle) {
|
||||||
</mat-card-title>
|
<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">
|
@if (errorMessageId) {
|
||||||
{{ errorMessageId | translate }}
|
<mat-card-subtitle class="adf-error-message" id="error-message">
|
||||||
</mat-card-subtitle>
|
{{ errorMessageId | translate }}
|
||||||
|
</mat-card-subtitle>
|
||||||
|
}
|
||||||
|
|
||||||
<div *ngIf="!isProcessDefinitionsEmpty; else emptyProcessDefinitionsList">
|
@if (!isProcessDefinitionsEmpty) {
|
||||||
<form [formGroup]="processForm" class="adf-select-process-form">
|
<div>
|
||||||
<mat-form-field
|
<form [formGroup]="processForm" class="adf-select-process-form">
|
||||||
class="adf-process-input-container"
|
@if (showSelectProcessDropdown) {
|
||||||
floatLabel="always"
|
<mat-form-field
|
||||||
*ngIf="showSelectProcessDropdown"
|
class="adf-process-input-container"
|
||||||
data-automation-id="adf-select-cloud-process-dropdown"
|
floatLabel="always"
|
||||||
>
|
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)"
|
|
||||||
>
|
>
|
||||||
{{ getProcessDefinitionValue(processDef) }}
|
<mat-label class="adf-start-process-input-label">{{
|
||||||
</mat-option>
|
'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate
|
||||||
</mat-autocomplete>
|
}}</mat-label>
|
||||||
|
<input matInput formControlName="processDefinition" [matAutocomplete]="auto" id="processDefinitionName" />
|
||||||
|
|
||||||
<button
|
<div class="adf-process-input-autocomplete">
|
||||||
id="adf-select-process-dropdown"
|
<mat-autocomplete
|
||||||
title="{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.SELECT_PROCESS_DROPDOWN' | translate }}"
|
#auto="matAutocomplete"
|
||||||
mat-icon-button
|
id="processDefinitionOptions"
|
||||||
(click)="displayDropdown($event)"
|
[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>
|
<adf-cloud-form-custom-outcomes>
|
||||||
</button>
|
<ng-template [ngTemplateOutlet]="taskFormCloudButtons" />
|
||||||
</div>
|
</adf-cloud-form-custom-outcomes>
|
||||||
<mat-error *ngIf="processDefinition.hasError('required')" class="adf-error-pb">
|
</adf-cloud-form>
|
||||||
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }}
|
} @else {
|
||||||
</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>
|
|
||||||
<ng-template [ngTemplateOutlet]="taskFormCloudButtons" />
|
<ng-template [ngTemplateOutlet]="taskFormCloudButtons" />
|
||||||
</adf-cloud-form-custom-outcomes>
|
}
|
||||||
</adf-cloud-form>
|
</div>
|
||||||
</ng-container>
|
} @else {
|
||||||
</div>
|
<mat-card-content>
|
||||||
</mat-card-content>
|
<mat-card-subtitle class="error-message" id="no-process-message">
|
||||||
</mat-card>
|
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase }}
|
||||||
|
</mat-card-subtitle>
|
||||||
<ng-template #taskFormCloudButtons>
|
</mat-card-content>
|
||||||
<div class="adf-start-process-cloud-actions">
|
}
|
||||||
<button *ngIf="showCancelButton" mat-button (click)="cancelStartProcess()" id="cancel_process">
|
</mat-card-content>
|
||||||
{{ cancelButtonLabel }}
|
</mat-card>
|
||||||
</button>
|
} @else {
|
||||||
<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 class="adf-loading-container">
|
<div class="adf-loading-container">
|
||||||
<mat-progress-spinner class="adf-loading" color="primary" mode="indeterminate" />
|
<mat-progress-spinner class="adf-loading" color="primary" mode="indeterminate" />
|
||||||
</div>
|
</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>
|
</ng-template>
|
||||||
|
|||||||
@@ -458,7 +458,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
|
|||||||
},
|
},
|
||||||
error: (err) => {
|
error: (err) => {
|
||||||
this.errorMessageId = err?.response?.body?.message || 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.START_PROCESS';
|
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.error.emit(err);
|
||||||
this.isProcessStarting = false;
|
this.isProcessStarting = false;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user