Skip to content

Commit d878a0f

Browse files
machacjozefmachacjozef
authored
Merge pull request #130 from netgrif/NAE-1740
[NAE-1740] Disable "create case" button, while case is creating
2 parents caff2d7 + 84611eb commit d878a0f

File tree

6 files changed

+87
-14
lines changed

6 files changed

+87
-14
lines changed

‎projects/netgrif-components-core/src/lib/data-fields/i18n-field/i18n-divider-field/abstract-i18n-divider-field.component.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,13 @@ export abstract class AbstractI18nDividerFieldComponent {
1919
}
2020
}
2121

22+
public isDividerLGBTQ(): boolean {
23+
if (this.dividerPropertyEnabled('dividerLGBTQ')) {
24+
return this.dividerI18nField.component.properties.dividerLGBTQ === 'true';
25+
}
26+
return false;
27+
}
28+
2229
public getDividerFontSize(): string {
2330
if (this.dividerPropertyEnabled('fontSize')) {
2431
return this.dividerI18nField.component.properties.fontSize + 'px';

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

Lines changed: 13 additions & 2 deletions
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,16 +142,20 @@ 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) => {
158+
this.loadingSubmit.off();
151159
if (!!response.outcome) {
152160
this._snackBarService.openSuccessSnackBar(response.outcome.message === undefined
153161
? this._translate.instant('side-menu.new-case.createCase') + ' ' + newCase.title
@@ -170,7 +178,10 @@ export abstract class AbstractNewCaseComponent implements OnDestroy {
170178
});
171179
}
172180
},
173-
error => this._snackBarService.openErrorSnackBar(error.message ? error.message : error)
181+
error => {
182+
this.loadingSubmit.off();
183+
this._snackBarService.openErrorSnackBar(error.message ? error.message : error);
184+
}
174185
);
175186
}
176187
}

‎projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-divider-field/i18n-divider-field.component.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<div fxFlex fxLayout="row" fxLayoutAlign="center center">
22
<div fxFlex="20" class="divider-line"
3-
[ngClass]="{'primary-background-color': !dividerPropertyEnabled('dividerColor')}"
3+
[ngClass]="{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !dividerPropertyEnabled('dividerColor')}"
44
[ngStyle]="dividerPropertyEnabled('dividerColor') && {'background': getDividerColor()}"></div>
55
<span [ngClass]="{'margin-default': dividerI18nField.value.defaultValue !== ''}"
66
[ngStyle]="dividerPropertyEnabled('fontSize') && {'font-size': getDividerFontSize()}">
77
{{dividerI18nField.value.defaultValue}}
88
</span>
99
<div fxFlex class="divider-line"
10-
[ngClass]="{'primary-background-color': !dividerPropertyEnabled('dividerColor')}"
10+
[ngClass]="{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !dividerPropertyEnabled('dividerColor')}"
1111
[ngStyle]="dividerPropertyEnabled('dividerColor') && {'background': getDividerColor()}"></div>
1212
</div>
13+

‎projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-divider-field/i18n-divider-field.component.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,32 @@
66
margin-right: 8px;
77
margin-left: 8px;
88
}
9+
10+
.divider-line-lgbt {
11+
height: 2px;
12+
background: linear-gradient(to right,
13+
#B827FC 0%,
14+
#2C90FC 20%,
15+
#B8FD33 40%,
16+
#FEC837 60%,
17+
#FD1892 80%,
18+
#B827FC 100%)
19+
-0% 0/150% 100%;
20+
animation: move-divider-line-lgbt 10s linear infinite;
21+
-webkit-animation: move-divider-line-lgbt 10s linear infinite;
22+
}
23+
24+
@keyframes move-divider-line-lgbt {
25+
to {
26+
background-position: -1500% 0%
27+
}
28+
}
29+
30+
@-webkit-keyframes move-divider-line-lgbt {
31+
to {
32+
background-position: -1500% 0%
33+
}
34+
}
35+
36+
37+

‎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)