inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-17 14:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updates start process cloud component

Browse Source 
Improves the start process cloud component by adding error handling for the start process action and enhancing the UI.

Specifically, it displays error messages from the backend response and provides a more user-friendly experience. Also includes minor UI improvements for error messages and general layout.
This commit is contained in:
APuschkin
2025-07-29 15:22:44 +02:00
parent b4cda524e0
commit a41bf1c8c8
3 changed files with 49 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html
View File

@@ -1,13 +1,10 @@
<mat-card appearance="outlined" class="adf-start-process" *ngIf="processDefinitionLoaded; else spinner"> <mat-card appearance="outlined" class="adf-start-process" *ngIf="processDefinitionLoaded; else spinner">
<mat-card-content> <mat-card-content>
<mat-card-title <mat-card-title *ngIf="showTitle" class="adf-title">
*ngIf="showTitle" {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate }}
class="adf-title">
{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate}}
</mat-card-title> </mat-card-title>
<mat-card-subtitle id="error-message" *ngIf="errorMessageId"> <mat-card-subtitle class="adf-error-message" id="error-message" *ngIf="errorMessageId">
{{ errorMessageId | translate }} {{ errorMessageId | translate }}
</mat-card-subtitle> </mat-card-subtitle>
@@ -19,47 +16,44 @@
*ngIf="showSelectProcessDropdown" *ngIf="showSelectProcessDropdown"
data-automation-id="adf-select-cloud-process-dropdown" 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> <mat-label class="adf-start-process-input-label">{{
<input 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate
matInput }}</mat-label>
formControlName="processDefinition" <input matInput formControlName="processDefinition" [matAutocomplete]="auto" id="processDefinitionName" />
[matAutocomplete]="auto"
id="processDefinitionName"
>
<div class="adf-process-input-autocomplete"> <div class="adf-process-input-autocomplete">
<mat-autocomplete <mat-autocomplete
#auto="matAutocomplete" #auto="matAutocomplete"
id="processDefinitionOptions" id="processDefinitionOptions"
[displayWith]="displayProcessNameOnDropdown" [displayWith]="displayProcessNameOnDropdown"
(optionSelected)="setProcessDefinitionOnForm($event.option.value)" > (optionSelected)="setProcessDefinitionOnForm($event.option.value)"
>
<mat-option <mat-option
*ngFor="let processDef of filteredProcesses" *ngFor="let processDef of filteredProcesses"
[value]="getProcessDefinitionValue(processDef)" [value]="getProcessDefinitionValue(processDef)"
(click)="processDefinitionSelectionChanged(processDef)"> (click)="processDefinitionSelectionChanged(processDef)"
>
{{ getProcessDefinitionValue(processDef) }} {{ getProcessDefinitionValue(processDef) }}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
<button <button
id="adf-select-process-dropdown" id="adf-select-process-dropdown"
title="{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.SELECT_PROCESS_DROPDOWN' | translate}}" title="{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.SELECT_PROCESS_DROPDOWN' | translate }}"
mat-icon-button mat-icon-button
(click)="displayDropdown($event)"> (click)="displayDropdown($event)"
>
<mat-icon>arrow_drop_down</mat-icon> <mat-icon>arrow_drop_down</mat-icon>
</button> </button>
</div> </div>
<mat-error <mat-error *ngIf="processDefinition.hasError('required')" class="adf-error-pb">
*ngIf="processDefinition.hasError('required')"
class="adf-error-pb">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }} {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<adf-inplace-form-input [control]="processInstanceName"> <adf-inplace-form-input [control]="processInstanceName">
<ng-container label> <ng-container label>
{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate}} {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}
</ng-container> </ng-container>
<ng-container error> <ng-container error>
@@ -67,7 +61,7 @@
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }} {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
</span> </span>
<span *ngIf="processInstanceName.hasError('maxlength')" id="adf-start-process-maxlength-error"> <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 } }} {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters: maxNameLength } }}
</span> </span>
<span *ngIf="processInstanceName.hasError('pattern')"> <span *ngIf="processInstanceName.hasError('pattern')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }} {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}
@@ -76,7 +70,7 @@
</adf-inplace-form-input> </adf-inplace-form-input>
</form> </form>
<ng-container *ngIf="hasForm else taskFormCloudButtons"> <ng-container *ngIf="hasForm; else taskFormCloudButtons">
<adf-cloud-form <adf-cloud-form
#startForm #startForm
[appName]="appName" [appName]="appName"
@@ -99,19 +93,12 @@
</adf-cloud-form> </adf-cloud-form>
</ng-container> </ng-container>
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<ng-template #taskFormCloudButtons> <ng-template #taskFormCloudButtons>
<div class="adf-start-process-cloud-actions"> <div class="adf-start-process-cloud-actions">
<button <button *ngIf="showCancelButton" mat-button (click)="cancelStartProcess()" id="cancel_process">
*ngIf="showCancelButton"
mat-button
(click)="cancelStartProcess()"
id="cancel_process"
>
{{ cancelButtonLabel }} {{ cancelButtonLabel }}
</button> </button>
<button <button
@@ -132,16 +119,13 @@
<ng-template #emptyProcessDefinitionsList> <ng-template #emptyProcessDefinitionsList>
<mat-card-content *ngIf="processDefinitionLoaded"> <mat-card-content *ngIf="processDefinitionLoaded">
<mat-card-subtitle class="error-message" id="no-process-message"> <mat-card-subtitle class="error-message" id="no-process-message">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase}} {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase }}
</mat-card-subtitle> </mat-card-subtitle>
</mat-card-content> </mat-card-content>
</ng-template> </ng-template>
<ng-template #spinner> <ng-template #spinner>
<div class="adf-loading-container"> <div class="adf-loading-container">
<mat-progress-spinner <mat-progress-spinner class="adf-loading" color="primary" mode="indeterminate" />
class="adf-loading"
color="primary"
mode="indeterminate" />
</div> </div>
</ng-template> </ng-template>

4
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss
View File

@@ -19,6 +19,10 @@
padding-bottom: 1.25em; padding-bottom: 1.25em;
} }
&-error-message {
padding-left: 0.5em;
}
&-process-input-container { &-process-input-container {
margin: 0 7px; margin: 0 7px;
} }

2
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts
View File

@@ -457,7 +457,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit {
this.isProcessStarting = false; this.isProcessStarting = false;
}, },
error: (err) => { error: (err) => {
this.errorMessageId = 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.START'; 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?.response?.body);
this.error.emit(err); this.error.emit(err);
this.isProcessStarting = false; this.isProcessStarting = false;