Skip to content

Commit 63edab0

Browse files
committed
[NAE-1740] Disable "create case" button, while case is creating
- fix
1 parent 740d1ab commit 63edab0

File tree

3 files changed

+45
-11
lines changed

3 files changed

+45
-11
lines changed

projects/netgrif-components-core/src/lib/side-menu/content-components/new-case/abstract-new-case.component.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import semver from 'semver';
1515
import {CreateCaseEventOutcome} from '../../../event/model/event-outcomes/case-outcomes/create-case-event-outcome';
1616
import {EventOutcomeMessageResource} from '../../../resources/interface/message-resource';
1717
import {MatOption} from '@angular/material/core';
18+
import { LoadingEmitter } from '../../../utility/loading-emitter';
1819

1920
interface Form {
2021
value: string;
@@ -43,6 +44,7 @@ export abstract class AbstractNewCaseComponent implements OnDestroy {
4344
@ViewChild('stepper1') stepper1;
4445
@ViewChild('stepper2') stepper2;
4546

47+
public loadingSubmit: LoadingEmitter;
4648
protected _options$: ReplaySubject<Array<Form>>;
4749
protected _injectedData: NewCaseInjectionData;
4850
protected _hasMultipleNets$: ReplaySubject<boolean>;
@@ -69,6 +71,7 @@ export abstract class AbstractNewCaseComponent implements OnDestroy {
6971
this._hasMultipleNets$ = new ReplaySubject(1);
7072
this._notInitialized$ = new BehaviorSubject<boolean>(true);
7173
this._options$ = new ReplaySubject(1);
74+
this.loadingSubmit = new LoadingEmitter(false);
7275

7376
this._allowedNetsSubscription = this._injectedData.allowedNets$.pipe(
7477
map(nets => nets.map(petriNet => ({
@@ -114,6 +117,7 @@ export abstract class AbstractNewCaseComponent implements OnDestroy {
114117

115118
ngOnDestroy(): void {
116119
this._hasMultipleNets$.complete();
120+
this.loadingSubmit.complete();
117121
this._allowedNetsSubscription.unsubscribe();
118122
}
119123

@@ -138,17 +142,21 @@ export abstract class AbstractNewCaseComponent implements OnDestroy {
138142
}
139143

140144
public createNewCase(): void {
145+
if(this.loadingSubmit.value){
146+
return
147+
}
141148
if (this.titleFormControl.valid || !this.isCaseTitleRequired()) {
142149
const newCase = {
143150
title: this.titleFormControl.value === '' ? null : this.titleFormControl.value,
144151
color: 'panel-primary-icon',
145152
netId: this.options.length === 1 ? this.options[0].value : this.processFormControl.value.value
146153
};
147-
154+
this.loadingSubmit.on();
148155
this._caseResourceService.createCase(newCase)
149156
.subscribe(
150157
(response: EventOutcomeMessageResource) => {
151158
if (!!response.outcome) {
159+
this.loadingSubmit.off();
152160
this._snackBarService.openSuccessSnackBar(response.outcome.message === undefined
153161
? this._translate.instant('side-menu.new-case.createCase') + ' ' + newCase.title
154162
: response.outcome.message);
@@ -161,6 +169,7 @@ export abstract class AbstractNewCaseComponent implements OnDestroy {
161169
data: (response.outcome as CreateCaseEventOutcome).aCase
162170
});
163171
} else if (!!response.error) {
172+
this.loadingSubmit.off();
164173
this._snackBarService.openWarningSnackBar(this._translate.instant('side-menu.new-case.createCaseError') + ' ' + newCase.title);
165174
this._sideMenuControl.close({
166175
opened: false,

projects/netgrif-components/src/lib/data-fields/text-field/rich-textarea-field/easymde-wrapper/easymde-wrapper.component.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export class EasymdeWrapperComponent implements OnDestroy, AfterViewInit, Contro
4747

4848
writeValue(value: any): void {
4949
this.textAreaField.value = !value ? '' : value;
50+
this._fromEditor = false;
5051
}
5152
registerOnChange(fn: any): void {
5253
this.propagateChange = fn;
@@ -61,6 +62,15 @@ export class EasymdeWrapperComponent implements OnDestroy, AfterViewInit, Contro
6162
this._easyMDE = new EasyMDE(this.options);
6263
this._easyMDE.value(this.textAreaField.value);
6364
this._easyMDE.codemirror.on('change', this._onChange);
65+
this.formControlRef.valueChanges.subscribe(value => {
66+
if (this._easyMDE) {
67+
if (!this._fromEditor) {
68+
this._fromEditor = true;
69+
this._easyMDE.value(value);
70+
this._fromEditor = false;
71+
}
72+
}
73+
});
6474
}
6575

6676
private _onChange = (): void => {

projects/netgrif-components/src/lib/side-menu/content-components/new-case/new-case.component.html

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{{titleShortening()}}
33
</div>
44
<mat-vertical-stepper *ngIf="hasMultipleNets$ | async" linear #stepper1 class="netgrif-input">
5-
<mat-step [stepControl]="processFormControl" errorMessage="{{'side-menu.new-case.errFirst' | translate}}" >
5+
<mat-step [stepControl]="processFormControl" errorMessage="{{'side-menu.new-case.errFirst' | translate}}">
66
<ng-template matStepLabel>{{'side-menu.new-case.choose' | translate}}</ng-template>
77
<mat-form-field appearance="outline">
88
<input type="text" matInput [formControl]="processFormControl" [matAutocomplete]="auto" required
@@ -17,30 +17,45 @@
1717
</mat-autocomplete>
1818
</mat-form-field>
1919
<div>
20-
<button *ngIf="isCaseTitleEnabled()" mat-button (click)="toNextStep(processFormControl.value)">{{'side-menu.new-case.next' | translate}}</button>
21-
<button *ngIf="!isCaseTitleEnabled()" mat-raised-button color="primary" (click)="createNewCase()">{{'side-menu.new-case.create' | translate}}</button>
20+
<button *ngIf="isCaseTitleEnabled()" mat-button
21+
(click)="toNextStep(processFormControl.value)">{{'side-menu.new-case.next' | translate}}</button>
22+
<button *ngIf="!isCaseTitleEnabled()" mat-raised-button color="primary"
23+
(click)="createNewCase()">{{'side-menu.new-case.create' | translate}}</button>
2224
</div>
2325
</mat-step>
24-
<mat-step *ngIf="isCaseTitleEnabled()" [stepControl]="titleFormControl" errorMessage="{{'side-menu.new-case.errSecond' | translate}}" >
26+
<mat-step *ngIf="isCaseTitleEnabled()" [stepControl]="titleFormControl"
27+
errorMessage="{{'side-menu.new-case.errSecond' | translate}}">
2528
<ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>
2629
<mat-form-field appearance="outline">
27-
<input matInput placeholder="Title" autocomplete="off" [formControl]="titleFormControl" [required]="isCaseTitleRequired()" (keyup.enter)="nextStep()">
30+
<input matInput placeholder="Title" autocomplete="off" [formControl]="titleFormControl"
31+
[required]="isCaseTitleRequired()" (keyup.enter)="nextStep()">
2832
</mat-form-field>
2933
<div>
30-
<button mat-button (click)="stepper1.reset(); checkVersion(processFormControl.value)">{{'side-menu.new-case.reset' | translate}}</button>
31-
<button mat-button (click)="createNewCase()">{{'side-menu.new-case.create' | translate}}</button>
34+
<button mat-button
35+
(click)="stepper1.reset(); checkVersion(processFormControl.value)">{{'side-menu.new-case.reset' | translate}}</button>
36+
<button mat-button (click)="createNewCase()">
37+
<mat-spinner *ngIf="loadingSubmit | async"
38+
mode="indeterminate"
39+
diameter="36"
40+
color="accent"
41+
fxFlex></mat-spinner>
42+
<span *ngIf="(loadingSubmit | async) === false"
43+
fxFlex>{{'side-menu.new-case.create' | translate}}</span>
44+
</button>
3245
</div>
3346
</mat-step>
3447
</mat-vertical-stepper>
3548
<mat-vertical-stepper *ngIf="(hasMultipleNets$ | async) === false" linear #stepper2 class="netgrif-input">
36-
<mat-step [stepControl]="titleFormControl" errorMessage="{{'side-menu.new-case.errSecond' | translate}}" >
49+
<mat-step [stepControl]="titleFormControl" errorMessage="{{'side-menu.new-case.errSecond' | translate}}">
3750
<ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>
3851
<mat-form-field appearance="outline">
39-
<input matInput placeholder="Title" autocomplete="off" [formControl]="titleFormControl" [required]="isCaseTitleRequired()" (keyup.enter)="nextStep()">
52+
<input matInput placeholder="Title" autocomplete="off" [formControl]="titleFormControl"
53+
[required]="isCaseTitleRequired()" (keyup.enter)="nextStep()">
4054
</mat-form-field>
4155
<div>
4256
<button mat-button (click)="stepper2.reset()">{{'side-menu.new-case.reset' | translate}}</button>
43-
<button mat-raised-button color="primary" (click)="createNewCase()">{{'side-menu.new-case.create' | translate}}</button>
57+
<button mat-raised-button color="primary"
58+
(click)="createNewCase()">{{'side-menu.new-case.create' | translate}}</button>
4459
</div>
4560
</mat-step>
4661
</mat-vertical-stepper>

0 commit comments

Comments
 (0)