Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9b8fbce

Browse files
committed
Added required style, new call form validation fix
1 parentbfcf84f commit9b8fbce

File tree

6 files changed

+78
-15
lines changed

6 files changed

+78
-15
lines changed

‎src/app/features/calls/effects/calls.effect.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import*ascallsActionfrom"../actions/calls.actions";
22
import{Action,Store}from"@ngrx/store";
3-
import{Actions,Effect,ofType}from"@ngrx/effects";
3+
import{Actions,createEffect,Effect,ofType}from"@ngrx/effects";
44
import{catchError,exhaustMap,map,mergeMap,tap}from"rxjs/operators";
55
import{Injectable}from"@angular/core";
66
import{forkJoin,from,Observable,of}from"rxjs";

‎src/app/features/home/actions/home.actions.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ export enum HomeActionTypes {
8888
UPDATE_PERSONSTAFFING='[HOME] UPDATE_PERSONSTAFFING',
8989
SHOW_VIEW_CALL_FORM='[HOME] SHOW_VIEW_CALL_FORM',
9090
OPEN_VIEW_CALL_FORM='[HOME] OPEN_VIEW_CALL_FORM',
91+
SAVE_CALL_FORM_INVALID='[HOME] SAVE_CALL_FORM_INVALID',
9192
}
9293

9394
// Home
@@ -469,6 +470,11 @@ export class OpenViewCallForm implements Action {
469470
constructor(publicpayload:CallExtraDataResultData){}
470471
}
471472

473+
exportclassSaveCallFormInvalidimplementsAction{
474+
readonlytype=HomeActionTypes.SAVE_CALL_FORM_INVALID;
475+
constructor(){}
476+
}
477+
472478
exportclassDoneimplementsAction{
473479
readonlytype=HomeActionTypes.DONE;
474480
constructor(){}
@@ -488,5 +494,5 @@ export type HomeActionsUnion = Loading | LoadingSuccess | LoadingFail | LoadingM
488494
OpenCallFormModal|SetNewCallFormData|IsSavingCall|Done|UpdateSelectPerson|OpenSetPersonStatusModal|
489495
OpenSetPersonStaffingModal|SavingPersonStatuses|UpdatePersonStatuses|SavingPersonStaffing|SavingPersonStaffing|
490496
SavingPersonStaffingSuccess|SavingPersonStaffingFail|UpdatePersonStaffings|GetAddressForCoordinates|
491-
GetAddressForCoordinatesSuccess|GetAddressForCoordinatesFail|ShowViewCallForm|OpenViewCallForm
497+
GetAddressForCoordinatesSuccess|GetAddressForCoordinatesFail|ShowViewCallForm|OpenViewCallForm|SaveCallFormInvalid
492498
;

‎src/app/features/home/effects/home.effect.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import*ashomeActionfrom"../actions/home.actions";
22
import{Action,Store}from"@ngrx/store";
33
import{Actions,createEffect,Effect,ofType}from"@ngrx/effects";
4-
import{catchError,exhaustMap,map,mergeMap,tap}from"rxjs/operators";
4+
import{catchError,exhaustMap,map,mergeMap,tap,switchMap}from"rxjs/operators";
55
import{Injectable}from"@angular/core";
66
import{from,Observable,of}from"rxjs";
77
import{HomeProvider}from"../providers/home";
@@ -779,6 +779,20 @@ export class HomeEffects {
779779
)
780780
);
781781

782+
saveCallFormInvalid$=createEffect(
783+
()=>
784+
this.actions$.pipe(
785+
ofType(homeAction.HomeActionTypes.SAVE_CALL_FORM_INVALID),
786+
switchMap((action)=>this.loadingProvider.hide()),
787+
tap((action)=>this.alertProvider.showErrorAlert(
788+
'Missing Fields',
789+
'',
790+
'There are fields missing to submit this call.'
791+
))
792+
),
793+
{dispatch:false}
794+
);
795+
782796
done$=createEffect(
783797
()=>
784798
this.actions$.pipe(

‎src/app/features/home/pages/dashboard/dashboard.page.html‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,16 @@
2020
<h4class="card-title mb-4">Call</h4>
2121
<divclass="row">
2222
<divclass="col-sm-12">
23-
<perfect-scrollbarstyle="position: relative; height: 500px">
23+
<perfect-scrollbar#perfectScrollstyle="position: relative; height: 500px">
2424
<form[formGroup]="newCallForm"(ngSubmit)="saveCall()">
2525
<divid="newCall">
2626
<divclass="form-group row">
27-
<labelfor="example-text-input"class="col-md-2 col-form-label">Name</label>
27+
<labelfor="example-text-input"class="col-md-2 col-form-label required">Name</label>
2828
<divclass="col-md-8">
29-
<inputformControlName="name"class="form-control"type="text"placeholder="Name of the call"/>
29+
<inputformControlName="name"id="name"class="form-control"type="text"placeholder="Name of the call"[ngClass]="{ 'is-invalid': submitted && form['name'].errors }"/>
30+
<div*ngIf="submitted && form['name'].errors"class="invalid-feedback">
31+
<div*ngIf="form['name'].errors['required']">Call Name is required</div>
32+
</div>
3033
</div>
3134
</div>
3235
<divclass="form-group row">
@@ -40,20 +43,26 @@ <h4 class="card-title mb-4">Call</h4>
4043
</div>
4144
</div>
4245
<divclass="form-group row">
43-
<labelclass="col-md-2 col-form-label">Priority</label>
46+
<labelclass="col-md-2 col-form-label required">Priority</label>
4447
<divclass="col-md-6">
45-
<selectformControlName="priority"class="form-control">
48+
<selectformControlName="priority"class="form-control"[ngClass]="{ 'is-invalid': submitted && form['priority'].errors }">
4649
<option*ngFor="let priority of (homeState$ | async).callPriorties;"value="{{priority.Id}}">{{priority.Name}}</option>
4750
</select>
51+
<div*ngIf="submitted && form['priority'].errors"class="invalid-feedback">
52+
<div*ngIf="form['priority'].errors['required']">Priority is required</div>
53+
</div>
4854
</div>
4955
</div>
5056
<divclass="form-group row">
51-
<labelclass="col-md-2 col-form-label">Type</label>
57+
<labelclass="col-md-2 col-form-label required">Type</label>
5258
<divclass="col-md-6">
53-
<selectformControlName="type"class="form-control">
59+
<selectformControlName="type"class="form-control"[ngClass]="{ 'is-invalid': submitted && form['type'].errors }">
5460
<option*ngFor="let type of (homeState$ | async).callTypes;"value="{{type.Id}}">
5561
{{type.Name}}</option>
5662
</select>
63+
<div*ngIf="submitted && form['type'].errors"class="invalid-feedback">
64+
<div*ngIf="form['type'].errors['type']">Type is required</div>
65+
</div>
5766
</div>
5867
</div>
5968
<divclass="form-group row">
@@ -91,9 +100,12 @@ <h4 class="card-title mb-4">Call</h4>
91100
</div>
92101
</div>
93102
<divclass="form-group row">
94-
<labelfor="example-search-input"class="col-md-2 col-form-label">Nature</label>
103+
<labelfor="example-search-input"class="col-md-2 col-form-label required">Nature</label>
95104
<divclass="col-md-9">
96-
<textareaformControlName="nature"cols="30"rows="10"class="form-control"placeholder="A description of the nature of the call"></textarea>
105+
<textareaformControlName="nature"cols="30"rows="10"class="form-control"placeholder="A description of the nature of the call"[ngClass]="{ 'is-invalid': submitted && form['nature'].errors }"></textarea>
106+
<div*ngIf="submitted && form['nature'].errors"class="invalid-feedback">
107+
<div*ngIf="form['nature'].errors['nature']">Nature of the Call is required</div>
108+
</div>
97109
</div>
98110
</div>
99111
<divclass="form-group row">

‎src/app/features/home/pages/dashboard/dashboard.page.ts‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
selectNewCallState,
1212
}from"src/app/store";
1313
import*asHomeActionsfrom"../../actions/home.actions";
14-
import{FormBuilder,FormGroup,Validators}from"@angular/forms";
14+
import{AbstractControl,FormBuilder,FormControl,FormGroup,Validators}from"@angular/forms";
1515
import{filter,take}from"rxjs/operators";
1616
import*asLfrom"leaflet";
1717
import{environment}from"../../../../../environments/environment";
@@ -34,6 +34,7 @@ import { NgbNavChangeEvent } from "@ng-bootstrap/ng-bootstrap";
3434
import{debounceTime,distinctUntilChanged,tap}from"rxjs/operators";
3535
import{UnitStatusResult}from"src/app/core/models/unitStatusResult";
3636
import{PersonnelForCallResult}from"src/app/core/models/personnelForCallResult";
37+
import{PerfectScrollbarComponent}from"ngx-perfect-scrollbar";
3738

3839
consticonRetinaUrl="./assets/marker-icon-2x.png";
3940
consticonUrl="./assets/marker-icon.png";
@@ -63,6 +64,9 @@ export class DashboardPage implements AfterViewInit {
6364
publicnewCallLocation$:Observable<string|null>;
6465
publicnewCall$:Observable<CallResultData|null>;
6566
publicbreadCrumbItems:Array<{}>;
67+
publicsubmitted=false;
68+
69+
@ViewChild('perfectScroll')perfectScroll:PerfectScrollbarComponent;
6670

6771
@ViewChild("map")mapContainer;
6872
publicmap:any;
@@ -257,6 +261,8 @@ export class DashboardPage implements AfterViewInit {
257261

258262
this.form["dispatchOn"].setValue("");
259263
this.form["dispatchOn"].patchValue("");
264+
265+
this.submitted=false;
260266
});
261267

262268
this.store.select(selectHomeState).subscribe((state)=>{
@@ -301,7 +307,7 @@ export class DashboardPage implements AfterViewInit {
301307
this.store.dispatch(newVoiceActions.GetVoipInfo());
302308
}
303309

304-
getform(){
310+
publicgetform():{[key:string]:AbstractControl}{
305311
returnthis.newCallForm.controls;
306312
}
307313

@@ -521,7 +527,27 @@ export class DashboardPage implements AfterViewInit {
521527
});
522528
}
523529

530+
publiconReset():void{
531+
this.submitted=false;
532+
this.newCallForm.reset();
533+
}
534+
524535
publicsaveCall(){
536+
this.submitted=true;
537+
if(this.newCallForm.invalid){
538+
this.store.dispatch(newHomeActions.SaveCallFormInvalid());
539+
540+
letnameField:any=document.querySelector('#name')
541+
if(nameField){
542+
nameField.focus();
543+
}
544+
545+
if(this.perfectScroll&&this.perfectScroll.directiveRef){
546+
this.perfectScroll.directiveRef.scrollToTop();
547+
}
548+
return;
549+
}
550+
525551
this.store.dispatch(newHomeActions.IsSavingCall());
526552

527553
constcall=this.form;

‎src/assets/scss/app.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,4 +68,9 @@
6868
// @import "custom/rtl/structure-rtl";
6969
// @import "custom/rtl/plugins-rtl";
7070
// @import "custom/rtl/components-rtl";
71-
// @import "custom/rtl/pages-rtl";
71+
// @import "custom/rtl/pages-rtl";
72+
73+
.required {
74+
font-style:italic;
75+
color:cornflowerblue;
76+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp