Skip to content

Commit 475a1dd

Browse files
shawonshawon
shawon
authored and
shawon
committed
added formcontrol on property edit modal
1 parent 62266ee commit 475a1dd

File tree

2 files changed

+108
-146
lines changed

2 files changed

+108
-146
lines changed

‎eform-client/src/app/plugins/modules/backend-configuration-pn/components/properties/property-actions/property-edit-modal/property-edit-modal.component.html‎

Lines changed: 33 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,79 @@
11
<h3 mat-dialog-title>{{ 'Edit property' | translate }}</h3>
2+
23
<div mat-dialog-content>
3-
<div class="d-flex flex-column">
4+
<div class="d-flex flex-column" [formGroup]="editPropertyForm">
5+
46
<mat-form-field>
5-
<mat-label>{{'CVR Number' | translate}}</mat-label>
7+
<mat-label>{{ 'CVR Number' | translate }}</mat-label>
68
<input
79
matInput
810
type="text"
9-
[(ngModel)]="selectedProperty.cvr"
10-
(ngModelChange)="onNameFilterChanged($event)"
11-
name="editCVRNumber"
12-
id="editCVRNumber"
13-
>
11+
formControlName="cvr"
12+
(input)="onNameFilterChanged($event.target.value)"
13+
/>
1414
</mat-form-field>
15+
1516
<mat-form-field>
16-
<mat-label>{{'e-mail addresses' | translate}}</mat-label>
17+
<mat-label>{{ 'e-mail addresses' | translate }}</mat-label>
1718
<input
1819
matInput
1920
type="text"
20-
[(ngModel)]="selectedProperty.mainMailAddress"
21-
name="editMainMailAddress"
22-
id="editMainMailAddress"
23-
>
21+
formControlName="mainMailAddress"
22+
/>
2423
</mat-form-field>
24+
2525
<mat-form-field>
26-
<mat-label>{{'CHR name' | translate}}</mat-label>
26+
<mat-label>{{ 'CHR name' | translate }}</mat-label>
2727
<input
2828
matInput
2929
type="text"
30-
[(ngModel)]="selectedProperty.name"
31-
name="editPropertyName"
32-
id="editPropertyName"
33-
>
30+
formControlName="name"
31+
/>
3432
</mat-form-field>
35-
<mat-form-field *ngIf="selectedProperty.isFarm">
36-
<mat-label>{{'CHR Number' | translate}}</mat-label>
33+
34+
<mat-form-field *ngIf="propertyIsFarm">
35+
<mat-label>{{ 'CHR Number' | translate }}</mat-label>
3736
<input
3837
matInput
3938
type="text"
40-
[(ngModel)]="selectedProperty.chr"
41-
(ngModelChange)="onChrNumberChanged($event)"
42-
name="editCHRNumber"
43-
id="editCHRNumber"
44-
>
39+
formControlName="chr"
40+
(input)="onChrNumberChanged($event.target.value)"
41+
/>
4542
</mat-form-field>
43+
4644
<mat-form-field>
47-
<mat-label>{{'CHR address' | translate}}</mat-label>
45+
<mat-label>{{ 'CHR address' | translate }}</mat-label>
4846
<input
4947
matInput
5048
type="text"
51-
[(ngModel)]="selectedProperty.address"
52-
name="editPropertyAddress"
53-
id="editPropertyAddress"
54-
>
49+
formControlName="address"
50+
/>
5551
</mat-form-field>
52+
5653
<mat-slide-toggle
5754
*ngIf="selectAuthIsAdmin$ | async"
5855
color="primary"
59-
id="propertyEditWorkorderFlowEnableToggle"
60-
[checked]="selectedProperty.workorderEnable"
61-
[(ngModel)]="selectedProperty.workorderEnable">
62-
{{ "Task management" | translate }}
56+
formControlName="workorderEnable"
57+
>
58+
{{ 'Task management' | translate }}
6359
</mat-slide-toggle>
60+
6461
</div>
6562
</div>
63+
6664
<div mat-dialog-actions class="d-flex flex-row justify-content-end">
6765
<button
6866
mat-raised-button
6967
color="accent"
7068
(click)="onUpdateProperty()"
71-
id="propertyEditSaveBtn"
7269
[disabled]="isDisabledSaveButton"
7370
>
74-
{{'Save' | translate}}
71+
{{ 'Save' | translate }}
7572
</button>
7673
<button
7774
mat-raised-button
7875
(click)="hide()"
79-
id="propertyEditSaveCancelBtn"
8076
>
81-
{{'Cancel' | translate}}
77+
{{ 'Cancel' | translate }}
8278
</button>
8379
</div>

‎eform-client/src/app/plugins/modules/backend-configuration-pn/components/properties/property-actions/property-edit-modal/property-edit-modal.component.ts‎

Lines changed: 75 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -5,159 +5,125 @@ import {
55
OnDestroy,
66
OnInit,
77
} from '@angular/core';
8-
import {applicationLanguages} from 'src/app/common/const';
9-
import {PropertyModel, PropertyUpdateModel} from '../../../../models';
10-
import {AuthStateService} from 'src/app/common/store';
11-
import {BackendConfigurationPnPropertiesService} from '../../../../services';
12-
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
13-
import {Subscription} from 'rxjs';
14-
import {AutoUnsubscribe} from 'ngx-auto-unsubscribe';
15-
import {selectAuthIsAuth} from 'src/app/state/auth/auth.selector';
16-
import {Store} from '@ngrx/store';
8+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
9+
import { applicationLanguages } from 'src/app/common/const';
10+
import { PropertyModel, PropertyUpdateModel } from '../../../../models';
11+
import { AuthStateService } from 'src/app/common/store';
12+
import { BackendConfigurationPnPropertiesService } from '../../../../services';
13+
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
14+
import { Subscription } from 'rxjs';
15+
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
16+
import { Store } from '@ngrx/store';
17+
import { selectAuthIsAuth } from 'src/app/state/auth/auth.selector';
1718

1819
@AutoUnsubscribe()
1920
@Component({
20-
selector: 'app-property-edit-modal',
21-
templateUrl: './property-edit-modal.component.html',
22-
styleUrls: ['./property-edit-modal.component.scss'],
23-
standalone: false
21+
selector: 'app-property-edit-modal',
22+
templateUrl: './property-edit-modal.component.html',
23+
styleUrls: ['./property-edit-modal.component.scss'],
24+
standalone: false,
2425
})
2526
export class PropertyEditModalComponent implements OnInit, OnDestroy {
2627
propertyUpdate: EventEmitter<PropertyUpdateModel> = new EventEmitter<PropertyUpdateModel>();
27-
selectedProperty: PropertyUpdateModel = new PropertyUpdateModel();
28+
editPropertyForm: FormGroup;
29+
propertyIsFarm = false;
2830
selectedLanguages: { id: number; checked: boolean }[] = [];
29-
propertyIsFarm: boolean = false;
3031

3132
getChrInformationSub$: Subscription;
3233
getCompanyTypeSub$: Subscription;
33-
public isAuth$ = this.store.select(selectAuthIsAuth);
3434
public selectAuthIsAdmin$ = this.store.select(selectAuthIsAuth);
3535

36-
get applicationLanguages() {
37-
return applicationLanguages;
38-
}
39-
4036
constructor(
37+
private fb: FormBuilder,
4138
private store: Store,
4239
public authStateService: AuthStateService,
4340
private propertiesService: BackendConfigurationPnPropertiesService,
4441
public dialogRef: MatDialogRef<PropertyEditModalComponent>,
45-
@Inject(MAT_DIALOG_DATA) model: PropertyModel = new PropertyModel()
42+
@Inject(MAT_DIALOG_DATA) public model: PropertyModel
4643
) {
47-
this.selectedLanguages = model.languages.map((x) => {
48-
return {id: x.id, checked: true};
44+
this.selectedLanguages = model.languages.map((x) => ({ id: x.id, checked: true }));
45+
46+
this.editPropertyForm = this.fb.group({
47+
cvr: [model.cvr, Validators.required],
48+
mainMailAddress: [model.mainMailAddress, [Validators.required, Validators.email]],
49+
name: [model.name, Validators.required],
50+
chr: [model.chr],
51+
address: [model.address],
52+
workorderEnable: [model.workorderEnable || false],
53+
isFarm: [model.isFarm || false],
54+
industryCode: [model.industryCode || '']
4955
});
50-
this.selectedProperty = {
51-
...model,
52-
languagesIds: [],
53-
};
54-
}
5556

56-
ngOnInit() {
57+
this.propertyIsFarm = model.isFarm || false;
5758
}
5859

60+
ngOnInit() {}
61+
5962
hide() {
6063
this.dialogRef.close();
61-
this.selectedProperty = new PropertyUpdateModel();
64+
this.editPropertyForm.reset();
6265
this.selectedLanguages = [];
66+
this.propertyIsFarm = false;
6367
}
6468

6569
onUpdateProperty() {
66-
this.propertyUpdate.emit({
67-
...this.selectedProperty,
70+
const updatedProperty: PropertyUpdateModel = {
71+
...this.model,
72+
...this.editPropertyForm.value,
6873
languagesIds: this.selectedLanguages.map((x) => x.id),
69-
});
74+
};
75+
this.propertyUpdate.emit(updatedProperty);
7076
}
7177

72-
onNameFilterChanged(number: number) {
73-
if (number === 0) {
78+
onNameFilterChanged(number: string) {
79+
this.editPropertyForm.patchValue({ cvr: number });
80+
81+
if (+number === 0) {
7482
this.propertyIsFarm = false;
83+
this.editPropertyForm.patchValue({ isFarm: false });
7584
}
76-
if (number === 1111111) {
85+
86+
if (+number === 1111111) {
7787
this.propertyIsFarm = true;
78-
this.selectedProperty.isFarm = true;
88+
this.editPropertyForm.patchValue({ isFarm: true });
7989
}
80-
if (number > 1111111) {
81-
if (number.toString().length > 7) {
82-
this.getCompanyTypeSub$ = this.propertiesService.getCompanyType(number)
83-
.subscribe((data) => {
84-
if (data && data.success) {
85-
if (data.model.industrycode.toString().slice(0, 2) === '01') {
86-
this.propertyIsFarm = true;
87-
this.selectedProperty.isFarm = true;
88-
if (data.model.error !== 'NOT_FOUND') {
89-
this.selectedProperty.address = data.model.address + ', ' + data.model.city;
90-
this.selectedProperty.name = data.model.name;
91-
this.selectedProperty.industryCode = data.model.industrycode;
92-
}
93-
} else {
94-
if (data.model.error === 'REQUIRES_PAID_SUBSCRIPTION') {
95-
this.propertyIsFarm = true;
96-
this.selectedProperty.isFarm = true;
97-
} else {
98-
this.propertyIsFarm = false;
99-
this.selectedProperty.isFarm = false;
100-
if (data.model.error !== 'NOT_FOUND') {
101-
this.selectedProperty.address = data.model.address + ', ' + data.model.city;
102-
this.selectedProperty.name = data.model.name;
103-
this.selectedProperty.industryCode = data.model.industrycode;
104-
}
105-
}
106-
}
107-
}
108-
});
109-
}
110-
} else {
111-
// this.selectedProperty.name = '';
112-
// this.selectedProperty.address = '';
113-
}
114-
}
11590

116-
// addToArray(e: any, languageId: number) {
117-
// if (e.target.checked) {
118-
// this.selectedLanguages = [
119-
// ...this.selectedLanguages,
120-
// { id: languageId, checked: true },
121-
// ];
122-
// } else {
123-
// this.selectedLanguages = this.selectedLanguages.filter(
124-
// (x) => x.id !== languageId
125-
// );
126-
// }
127-
// }
128-
129-
getLanguageIsChecked(languageId: number): boolean {
130-
const language = this.selectedLanguages.find((x) => x.id === languageId);
131-
return language ? language.checked : false;
132-
}
91+
if (+number > 1111111 && number.toString().length > 7) {
92+
this.getCompanyTypeSub$ = this.propertiesService.getCompanyType(+number).subscribe((data) => {
93+
if (data?.success) {
94+
const industryPrefix = data.model.industrycode.toString().slice(0, 2);
95+
const isFarm = industryPrefix === '01' || data.model.error === 'REQUIRES_PAID_SUBSCRIPTION';
13396

134-
get isDisabledSaveButton(): boolean {
135-
if (this.selectedProperty/* && this.selectedProperty.languagesIds*/) {
136-
return (
137-
!this.selectedProperty.name/* ||
138-
!this.selectedLanguages.some((x) => x.checked)*/
139-
);
97+
this.propertyIsFarm = isFarm;
98+
this.editPropertyForm.patchValue({
99+
isFarm,
100+
name: data.model.name || '',
101+
address: data.model.address ? `${data.model.address}, ${data.model.city}` : '',
102+
industryCode: data.model.industrycode || '',
103+
});
104+
}
105+
});
106+
} else {
107+
this.editPropertyForm.patchValue({ name: '', address: '' });
140108
}
141-
return false;
142109
}
143110

144111
onChrNumberChanged(number: number) {
145-
if (number > 11111) {
146-
if (number.toString().length > 5) {
147-
this.getChrInformationSub$ = this.propertiesService.getChrInformation(number)
148-
.subscribe((data) => {
149-
if (data && data.success) {
150-
if (data.model.ejendom.byNavn === '' || data.model.ejendom.byNavn === null) {
151-
this.selectedProperty.address = data.model.ejendom.adresse + ', ' + data.model.ejendom.postDistrikt;
152-
} else {
153-
this.selectedProperty.address = data.model.ejendom.adresse + ', ' + data.model.ejendom.byNavn;
154-
}
155-
}
112+
if (number > 11111 && number.toString().length > 5) {
113+
this.getChrInformationSub$ = this.propertiesService.getChrInformation(number).subscribe((data) => {
114+
if (data?.success) {
115+
const address = data.model.ejendom.byNavn || data.model.ejendom.postDistrikt;
116+
this.editPropertyForm.patchValue({
117+
address: `${data.model.ejendom.adresse}, ${address}`,
156118
});
157-
}
119+
}
120+
});
158121
}
159122
}
160123

161-
ngOnDestroy(): void {
124+
get isDisabledSaveButton(): boolean {
125+
return this.editPropertyForm.invalid;
162126
}
127+
128+
ngOnDestroy(): void {}
163129
}

0 commit comments

Comments
 (0)