Skip to content

Commit bec1a65

Browse files
alanorthalanorth
authored
Merge pull request #184 from ilri/angular-upgrade
Angular v14 upgrade
2 parents 11df9d7 + 837e0c5 commit bec1a65

File tree

14 files changed

+3888
-3122
lines changed

14 files changed

+3888
-3122
lines changed

‎frontend/Dockerfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
FROM docker.io/node:16-bookworm
22
RUN npm --version \
33
&& npm install -g npm@8 \
4-
&& npm install -g @angular/cli@13 \
4+
&& npm install -g @angular/cli@14 \
55
&& rm -rf ~/.npm
66
RUN mkdir /frontend
77
COPY src /frontend/src

‎frontend/angular.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,5 @@
115115
}
116116
}
117117
}
118-
},
119-
"defaultProject": "RES"
118+
}
120119
}

‎frontend/package-lock.json

+3,730-2,979
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

+28-28
Original file line numberDiff line numberDiff line change
@@ -17,42 +17,42 @@
1717
"dependencies": {
1818
"@agm/core": "3.0.0-beta.0",
1919
"@agm/snazzy-info-window": "3.0.0-beta.0",
20-
"@angular/animations": "^13.4.0",
21-
"@angular/cdk": "^13.3.9",
22-
"@angular/common": "~13.4.0",
23-
"@angular/compiler": "~13.4.0",
24-
"@angular/core": "~13.4.0",
25-
"@angular/forms": "~13.4.0",
26-
"@angular/material": "^13.3.9",
27-
"@angular/material-moment-adapter": "^13.3.9",
28-
"@angular/platform-browser": "~13.4.0",
29-
"@angular/platform-browser-dynamic": "~13.4.0",
30-
"@angular/router": "~13.4.0",
20+
"@angular/animations": "^14.3.0",
21+
"@angular/cdk": "^14.2.7",
22+
"@angular/common": "^14.3.0",
23+
"@angular/compiler": "^14.3.0",
24+
"@angular/core": "^14.3.0",
25+
"@angular/forms": "^14.3.0",
26+
"@angular/material": "^14.2.7",
27+
"@angular/material-moment-adapter": "^14.2.7",
28+
"@angular/platform-browser": "^14.3.0",
29+
"@angular/platform-browser-dynamic": "^14.3.0",
30+
"@angular/router": "^14.3.0",
3131
"@auth0/angular-jwt": "^5.1.2",
3232
"@highcharts/map-collection": "^2.1.0",
3333
"@material-extended/mde": "^3.0.0",
34-
"@ng-select/ng-select": "^8.0.0",
35-
"@ngrx/effects": "^13.2.0",
36-
"@ngrx/store": "^13.2.0",
37-
"@ngrx/store-devtools": "^13.2.0",
34+
"@ng-select/ng-select": "^9.1.0",
35+
"@ngrx/effects": "^14.3.3",
36+
"@ngrx/store": "^14.3.3",
37+
"@ngrx/store-devtools": "^14.3.3",
3838
"@ngx-loading-bar/core": "^6.0.2",
3939
"@ngx-loading-bar/http-client": "^6.0.2",
4040
"@ngx-loading-bar/router": "^6.0.2",
41-
"@nicky-lenaers/ngx-scroll-to": "^13.0.0",
41+
"@nicky-lenaers/ngx-scroll-to": "^14.0.0",
4242
"@thisissoon/angular-inviewport": "^4.2.2",
43-
"@tinymce/tinymce-angular": "^6.0.0",
43+
"@tinymce/tinymce-angular": "^7.0.0",
4444
"@types/scriptjs": "0.0.2",
4545
"bodybuilder": "^2.5.0",
4646
"bootstrap": "^4.2.1",
4747
"highcharts": "^9.3.3",
48-
"highcharts-angular": "^2.10.0",
48+
"highcharts-angular": "~3.0.0",
4949
"jwt-decode": "^3.1.2",
50-
"material-design-icons-iconfont": "^5.0.1",
50+
"material-design-icons-iconfont": "^6.7.0",
5151
"moment": "^2.26.0",
5252
"ng2-nouislider": "^1.7.13",
53-
"ngx-color-picker": "^12.0.1",
54-
"ngx-loading": "^13.0.1",
55-
"ngx-toastr": "^14.3.0",
53+
"ngx-color-picker": "^13.0.0",
54+
"ngx-loading": "^14.0.0",
55+
"ngx-toastr": "^15.2.2",
5656
"ngx-tour-core": "~4.1.0",
5757
"ngx-tour-md-menu": "~4.1.0",
5858
"nouislider": "^15.7.1",
@@ -66,11 +66,11 @@
6666
"zone.js": "~0.11.4"
6767
},
6868
"devDependencies": {
69-
"@angular-devkit/build-angular": "^13.3.11",
69+
"@angular-devkit/build-angular": "^14.2.12",
7070
"@angular-eslint/eslint-plugin": "^16.0.3",
71-
"@angular/cli": "~13.3.11",
72-
"@angular/compiler-cli": "~13.4.0",
73-
"@angular/language-service": "~13.4.0",
71+
"@angular/cli": "^14.2.12",
72+
"@angular/compiler-cli": "^14.3.0",
73+
"@angular/language-service": "^14.3.0",
7474
"@types/country-list": "^2.1.0",
7575
"@types/googlemaps": "3.39.12",
7676
"@types/jasmine": "~3.5.10",
@@ -95,6 +95,6 @@
9595
"prettier": "^2.3.2",
9696
"protractor": "~7.0.0",
9797
"ts-node": "~8.8.1",
98-
"typescript": ">=4.4.3 <4.7.0"
98+
"typescript": ">=4.6.2 <4.9.0"
9999
}
100-
}
100+
}

‎frontend/src/app/admin/appearance/appearance.component.ts

+19-15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { FormGroup, FormControl, FormArray } from '@angular/forms';
2+
import {
3+
UntypedFormGroup,
4+
UntypedFormControl,
5+
UntypedFormArray,
6+
} from '@angular/forms';
37
import { SettingsService } from '../services/settings.service';
48
import { environment } from 'src/environments/environment';
59

@@ -14,16 +18,16 @@ export class AppearanceComponent implements OnInit {
1418
appearance;
1519
logo;
1620
favIcon;
17-
form: FormGroup = new FormGroup({
18-
primary_color: new FormControl(this.primary_color),
19-
secondary_color: new FormControl(this.secondary_color),
20-
website_name: new FormControl(''),
21-
logo: new FormControl(''),
22-
favIcon: new FormControl(''),
23-
tracking_code: new FormControl(''),
24-
google_maps_api_key: new FormControl(''),
25-
description: new FormControl(''),
26-
chartColors: new FormArray([]),
21+
form: UntypedFormGroup = new UntypedFormGroup({
22+
primary_color: new UntypedFormControl(this.primary_color),
23+
secondary_color: new UntypedFormControl(this.secondary_color),
24+
website_name: new UntypedFormControl(''),
25+
logo: new UntypedFormControl(''),
26+
favIcon: new UntypedFormControl(''),
27+
tracking_code: new UntypedFormControl(''),
28+
google_maps_api_key: new UntypedFormControl(''),
29+
description: new UntypedFormControl(''),
30+
chartColors: new UntypedFormArray([]),
2731
});
2832
constructor(private settingsService: SettingsService) {}
2933
src(value) {
@@ -38,17 +42,17 @@ export class AppearanceComponent implements OnInit {
3842
this.logo = appearance.logo;
3943
this.favIcon = appearance.favIcon;
4044
await appearance.chartColors.map((a) => {
41-
this.colors.push(new FormControl(a));
45+
this.colors.push(new UntypedFormControl(a));
4246
});
4347
}
4448
colorPickerClose(event, element) {
4549
this.form.get(element).setValue(event);
4650
}
4751
addColor() {
48-
this.colors.push(new FormControl(''));
52+
this.colors.push(new UntypedFormControl(''));
4953
}
50-
get colors(): FormArray {
51-
return this.form.get('chartColors') as FormArray;
54+
get colors(): UntypedFormArray {
55+
return this.form.get('chartColors') as UntypedFormArray;
5256
}
5357

5458
async save() {

‎frontend/src/app/admin/components/mapping-values/form/values-form.component.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, OnInit, Inject } from '@angular/core';
22
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
3-
import { FormGroup, FormControl } from '@angular/forms';
3+
import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
44
import { ValuesService } from 'src/app/admin/services/values.service';
55

66
@Component({
@@ -9,9 +9,9 @@ import { ValuesService } from 'src/app/admin/services/values.service';
99
styleUrls: ['./values-form.component.scss'],
1010
})
1111
export class ValuesForm implements OnInit {
12-
form: FormGroup = new FormGroup({
13-
find: new FormControl(''),
14-
replace: new FormControl(''),
12+
form: UntypedFormGroup = new UntypedFormGroup({
13+
find: new UntypedFormControl(''),
14+
replace: new UntypedFormControl(''),
1515
});
1616

1717
async submit() {

‎frontend/src/app/admin/components/setup/setup.component.ts

+28-24
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { FormGroup, FormControl, FormArray } from '@angular/forms';
2+
import {
3+
UntypedFormGroup,
4+
UntypedFormControl,
5+
UntypedFormArray,
6+
} from '@angular/forms';
37
import { SettingsService } from '../../services/settings.service';
48
import { ToastrService } from 'ngx-toastr';
59
import { environment } from 'src/environments/environment';
@@ -15,9 +19,9 @@ export class SetupComponent implements OnInit {
1519

1620
baseSchema(metadada = null, disply_name = null, addOn = null) {
1721
return {
18-
metadata: new FormControl(metadada),
19-
disply_name: new FormControl(disply_name),
20-
addOn: new FormControl(addOn),
22+
metadata: new UntypedFormControl(metadada),
23+
disply_name: new UntypedFormControl(disply_name),
24+
addOn: new UntypedFormControl(addOn),
2125
};
2226
}
2327

@@ -29,21 +33,21 @@ export class SetupComponent implements OnInit {
2933
this.repositories.at(index).get('years').reset();
3034
}
3135

32-
repositories: FormArray = new FormArray([this.getNewForm()]);
36+
repositories: UntypedFormArray = new UntypedFormArray([this.getNewForm()]);
3337

3438
getNewForm() {
35-
return new FormGroup({
36-
years: new FormControl(),
37-
name: new FormControl(),
38-
icon: new FormControl(),
39-
startPage: new FormControl(),
40-
type: new FormControl(),
41-
itemsEndPoint: new FormControl(),
42-
apiKey: new FormControl(),
43-
siteMap: new FormControl(),
44-
allCores: new FormControl(),
45-
schema: new FormArray([new FormGroup(this.baseSchema())]),
46-
metadata: new FormArray([new FormGroup(this.baseSchema())]),
39+
return new UntypedFormGroup({
40+
years: new UntypedFormControl(),
41+
name: new UntypedFormControl(),
42+
icon: new UntypedFormControl(),
43+
startPage: new UntypedFormControl(),
44+
type: new UntypedFormControl(),
45+
itemsEndPoint: new UntypedFormControl(),
46+
apiKey: new UntypedFormControl(),
47+
siteMap: new UntypedFormControl(),
48+
allCores: new UntypedFormControl(),
49+
schema: new UntypedFormArray([new UntypedFormGroup(this.baseSchema())]),
50+
metadata: new UntypedFormArray([new UntypedFormGroup(this.baseSchema())]),
4751
});
4852
}
4953
constructor(
@@ -97,8 +101,8 @@ export class SetupComponent implements OnInit {
97101
this.toastr.error('REST API endpoint is not defined');
98102
return;
99103
}
100-
const schema = <FormArray>repo.get('schema');
101-
const metadata = <FormArray>repo.get('metadata');
104+
const schema = <UntypedFormArray>repo.get('schema');
105+
const metadata = <UntypedFormArray>repo.get('metadata');
102106
const data = await this.settingService.retreiveMetadata(
103107
repo.get('itemsEndPoint').value,
104108
repo.get('type').value,
@@ -108,7 +112,7 @@ export class SetupComponent implements OnInit {
108112
data.base.forEach((element) => {
109113
const splited = element.split('.');
110114
schema.push(
111-
new FormGroup(
115+
new UntypedFormGroup(
112116
this.baseSchema(element, (splited.join('_') as string).toLowerCase()),
113117
),
114118
);
@@ -120,7 +124,7 @@ export class SetupComponent implements OnInit {
120124
data.metadata.forEach((element) => {
121125
const splited = element.split('.');
122126
metadata.push(
123-
new FormGroup(
127+
new UntypedFormGroup(
124128
this.baseSchema(
125129
element,
126130
(splited.join('_') as string).toLowerCase(),
@@ -131,7 +135,7 @@ export class SetupComponent implements OnInit {
131135
else
132136
data.metadata.forEach((element) => {
133137
metadata.push(
134-
new FormGroup(this.baseSchema(element, element as string)),
138+
new UntypedFormGroup(this.baseSchema(element, element as string)),
135139
);
136140
});
137141
}
@@ -143,14 +147,14 @@ export class SetupComponent implements OnInit {
143147
AddNewRepo() {
144148
this.repositories.push(this.getNewForm());
145149
}
146-
delete(schema: FormArray, index: number) {
150+
delete(schema: UntypedFormArray, index: number) {
147151
schema.removeAt(index);
148152
}
149153
deleteRepo(index) {
150154
this.repositories.removeAt(index);
151155
}
152156

153157
AddNewMetadata(schema: any) {
154-
schema.push(new FormGroup(this.baseSchema()));
158+
schema.push(new UntypedFormGroup(this.baseSchema()));
155159
}
156160
}

‎frontend/src/app/admin/components/users/form/form.component.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Component, OnInit, Inject } from '@angular/core';
22
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
33
import {
4-
FormGroup,
5-
FormControl,
4+
UntypedFormGroup,
5+
UntypedFormControl,
66
Validators,
77
AsyncValidatorFn,
88
AbstractControl,
@@ -28,15 +28,15 @@ export function existValidator(usersService: UsersService): AsyncValidatorFn {
2828
styleUrls: ['./form.component.scss'],
2929
})
3030
export class FormComponent implements OnInit {
31-
form: FormGroup = new FormGroup({
32-
name: new FormControl(''),
33-
email: new FormControl(
31+
form: UntypedFormGroup = new UntypedFormGroup({
32+
name: new UntypedFormControl(''),
33+
email: new UntypedFormControl(
3434
null,
3535
[Validators.email],
3636
[existValidator(this.userService)],
3737
),
38-
role: new FormControl(''),
39-
password: new FormControl(''),
38+
role: new UntypedFormControl(''),
39+
password: new UntypedFormControl(''),
4040
});
4141
get email() {
4242
return this.form.get('email');
@@ -61,7 +61,7 @@ export class FormComponent implements OnInit {
6161
this.form.removeControl('email');
6262
this.form.registerControl(
6363
'email',
64-
new FormControl(null, [Validators.email]),
64+
new UntypedFormControl(null, [Validators.email]),
6565
); // [existValidator(!this.data ? this.userService : null)]
6666
const temp = this.data;
6767
temp['password'] = '';

‎frontend/src/app/admin/design/components/form-dialog/form-dialog.component.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, OnInit, Inject } from '@angular/core';
22
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
3-
import { FormGroup, FormControl } from '@angular/forms';
3+
import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
44
import { MetadataService } from 'src/app/admin/services/metadata.service';
55

66
@Component({
@@ -10,8 +10,8 @@ import { MetadataService } from 'src/app/admin/services/metadata.service';
1010
})
1111
export class FormDialogComponent implements OnInit {
1212
controls = [];
13-
form: FormGroup = new FormGroup({
14-
icon: new FormControl(''),
13+
form: UntypedFormGroup = new UntypedFormGroup({
14+
icon: new UntypedFormControl(''),
1515
});
1616
pre: any;
1717
formControls = [];
@@ -37,7 +37,7 @@ export class FormDialogComponent implements OnInit {
3737
const FormGroupControls: any = {};
3838
this.data.form_data.forEach((element) => {
3939
if (this.data.configs.componentConfigs[element.name] != null)
40-
FormGroupControls[element.name] = new FormControl(
40+
FormGroupControls[element.name] = new UntypedFormControl(
4141
element.name == 'source'
4242
? this.data.configs.componentConfigs[element.name].replace(
4343
'.keyword',
@@ -46,16 +46,16 @@ export class FormDialogComponent implements OnInit {
4646
: this.data.configs.componentConfigs[element.name],
4747
);
4848
else if (this.data.configs[element.name])
49-
FormGroupControls[element.name] = new FormControl(
49+
FormGroupControls[element.name] = new UntypedFormControl(
5050
this.data.configs[element.name],
5151
);
5252
else if (this.data.configs[element.name])
53-
FormGroupControls[element.name] = new FormControl(
53+
FormGroupControls[element.name] = new UntypedFormControl(
5454
this.data.configs[element.name],
5555
);
56-
else FormGroupControls[element.name] = new FormControl(null);
56+
else FormGroupControls[element.name] = new UntypedFormControl(null);
5757
});
58-
this.form = new FormGroup(FormGroupControls);
58+
this.form = new UntypedFormGroup(FormGroupControls);
5959
this.metadata = await this.metadataService.get();
6060
this.formControls = this.data.form_data;
6161
this.pre = this.form.value;

0 commit comments

Comments
 (0)