Merge pull request #184 from ilri/angular-upgrade

Angular v14 upgrade
ilri · Jul 28, 2023 · bec1a65 · bec1a65
2 parents 11df9d7 + 837e0c5
commit bec1a65
Show file tree

Hide file tree

Showing 14 changed files with 3,888 additions and 3,122 deletions.
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -1,7 +1,7 @@
 FROM docker.io/node:16-bookworm
 RUN npm --version \
     && npm install -g npm@8 \
-    && npm install -g @angular/cli@13 \
+    && npm install -g @angular/cli@14 \
     && rm -rf ~/.npm
 RUN mkdir /frontend
 COPY src /frontend/src

diff --git a/frontend/angular.json b/frontend/angular.json
@@ -115,6 +115,5 @@
         }
       }
     }
-  },
-  "defaultProject": "RES"
+  }
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,42 +17,42 @@
   "dependencies": {
     "@agm/core": "3.0.0-beta.0",
     "@agm/snazzy-info-window": "3.0.0-beta.0",
-    "@angular/animations": "^13.4.0",
-    "@angular/cdk": "^13.3.9",
-    "@angular/common": "~13.4.0",
-    "@angular/compiler": "~13.4.0",
-    "@angular/core": "~13.4.0",
-    "@angular/forms": "~13.4.0",
-    "@angular/material": "^13.3.9",
-    "@angular/material-moment-adapter": "^13.3.9",
-    "@angular/platform-browser": "~13.4.0",
-    "@angular/platform-browser-dynamic": "~13.4.0",
-    "@angular/router": "~13.4.0",
+    "@angular/animations": "^14.3.0",
+    "@angular/cdk": "^14.2.7",
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/core": "^14.3.0",
+    "@angular/forms": "^14.3.0",
+    "@angular/material": "^14.2.7",
+    "@angular/material-moment-adapter": "^14.2.7",
+    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/router": "^14.3.0",
     "@auth0/angular-jwt": "^5.1.2",
     "@highcharts/map-collection": "^2.1.0",
     "@material-extended/mde": "^3.0.0",
-    "@ng-select/ng-select": "^8.0.0",
-    "@ngrx/effects": "^13.2.0",
-    "@ngrx/store": "^13.2.0",
-    "@ngrx/store-devtools": "^13.2.0",
+    "@ng-select/ng-select": "^9.1.0",
+    "@ngrx/effects": "^14.3.3",
+    "@ngrx/store": "^14.3.3",
+    "@ngrx/store-devtools": "^14.3.3",
     "@ngx-loading-bar/core": "^6.0.2",
     "@ngx-loading-bar/http-client": "^6.0.2",
     "@ngx-loading-bar/router": "^6.0.2",
-    "@nicky-lenaers/ngx-scroll-to": "^13.0.0",
+    "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
     "@thisissoon/angular-inviewport": "^4.2.2",
-    "@tinymce/tinymce-angular": "^6.0.0",
+    "@tinymce/tinymce-angular": "^7.0.0",
     "@types/scriptjs": "0.0.2",
     "bodybuilder": "^2.5.0",
     "bootstrap": "^4.2.1",
     "highcharts": "^9.3.3",
-    "highcharts-angular": "^2.10.0",
+    "highcharts-angular": "~3.0.0",
     "jwt-decode": "^3.1.2",
-    "material-design-icons-iconfont": "^5.0.1",
+    "material-design-icons-iconfont": "^6.7.0",
     "moment": "^2.26.0",
     "ng2-nouislider": "^1.7.13",
-    "ngx-color-picker": "^12.0.1",
-    "ngx-loading": "^13.0.1",
-    "ngx-toastr": "^14.3.0",
+    "ngx-color-picker": "^13.0.0",
+    "ngx-loading": "^14.0.0",
+    "ngx-toastr": "^15.2.2",
     "ngx-tour-core": "~4.1.0",
     "ngx-tour-md-menu": "~4.1.0",
     "nouislider": "^15.7.1",
@@ -66,11 +66,11 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.3.11",
+    "@angular-devkit/build-angular": "^14.2.12",
     "@angular-eslint/eslint-plugin": "^16.0.3",
-    "@angular/cli": "~13.3.11",
-    "@angular/compiler-cli": "~13.4.0",
-    "@angular/language-service": "~13.4.0",
+    "@angular/cli": "^14.2.12",
+    "@angular/compiler-cli": "^14.3.0",
+    "@angular/language-service": "^14.3.0",
     "@types/country-list": "^2.1.0",
     "@types/googlemaps": "3.39.12",
     "@types/jasmine": "~3.5.10",
@@ -95,6 +95,6 @@
     "prettier": "^2.3.2",
     "protractor": "~7.0.0",
     "ts-node": "~8.8.1",
-    "typescript": ">=4.4.3 <4.7.0"
+    "typescript": ">=4.6.2 <4.9.0"
   }
-}
+}
diff --git a/frontend/src/app/admin/appearance/appearance.component.ts b/frontend/src/app/admin/appearance/appearance.component.ts
@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, FormArray } from '@angular/forms';
+import {
+  UntypedFormGroup,
+  UntypedFormControl,
+  UntypedFormArray,
+} from '@angular/forms';
 import { SettingsService } from '../services/settings.service';
 import { environment } from 'src/environments/environment';
 
@@ -14,16 +18,16 @@ export class AppearanceComponent implements OnInit {
   appearance;
   logo;
   favIcon;
-  form: FormGroup = new FormGroup({
-    primary_color: new FormControl(this.primary_color),
-    secondary_color: new FormControl(this.secondary_color),
-    website_name: new FormControl(''),
-    logo: new FormControl(''),
-    favIcon: new FormControl(''),
-    tracking_code: new FormControl(''),
-    google_maps_api_key: new FormControl(''),
-    description: new FormControl(''),
-    chartColors: new FormArray([]),
+  form: UntypedFormGroup = new UntypedFormGroup({
+    primary_color: new UntypedFormControl(this.primary_color),
+    secondary_color: new UntypedFormControl(this.secondary_color),
+    website_name: new UntypedFormControl(''),
+    logo: new UntypedFormControl(''),
+    favIcon: new UntypedFormControl(''),
+    tracking_code: new UntypedFormControl(''),
+    google_maps_api_key: new UntypedFormControl(''),
+    description: new UntypedFormControl(''),
+    chartColors: new UntypedFormArray([]),
   });
   constructor(private settingsService: SettingsService) {}
   src(value) {
@@ -38,17 +42,17 @@ export class AppearanceComponent implements OnInit {
     this.logo = appearance.logo;
     this.favIcon = appearance.favIcon;
     await appearance.chartColors.map((a) => {
-      this.colors.push(new FormControl(a));
+      this.colors.push(new UntypedFormControl(a));
     });
   }
   colorPickerClose(event, element) {
     this.form.get(element).setValue(event);
   }
   addColor() {
-    this.colors.push(new FormControl(''));
+    this.colors.push(new UntypedFormControl(''));
   }
-  get colors(): FormArray {
-    return this.form.get('chartColors') as FormArray;
+  get colors(): UntypedFormArray {
+    return this.form.get('chartColors') as UntypedFormArray;
   }
 
   async save() {

diff --git a/frontend/src/app/admin/components/mapping-values/form/values-form.component.ts b/frontend/src/app/admin/components/mapping-values/form/values-form.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { FormGroup, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { ValuesService } from 'src/app/admin/services/values.service';
 
 @Component({
@@ -9,9 +9,9 @@ import { ValuesService } from 'src/app/admin/services/values.service';
   styleUrls: ['./values-form.component.scss'],
 })
 export class ValuesForm implements OnInit {
-  form: FormGroup = new FormGroup({
-    find: new FormControl(''),
-    replace: new FormControl(''),
+  form: UntypedFormGroup = new UntypedFormGroup({
+    find: new UntypedFormControl(''),
+    replace: new UntypedFormControl(''),
   });
 
   async submit() {

diff --git a/frontend/src/app/admin/components/setup/setup.component.ts b/frontend/src/app/admin/components/setup/setup.component.ts
@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, FormArray } from '@angular/forms';
+import {
+  UntypedFormGroup,
+  UntypedFormControl,
+  UntypedFormArray,
+} from '@angular/forms';
 import { SettingsService } from '../../services/settings.service';
 import { ToastrService } from 'ngx-toastr';
 import { environment } from 'src/environments/environment';
@@ -15,9 +19,9 @@ export class SetupComponent implements OnInit {
 
   baseSchema(metadada = null, disply_name = null, addOn = null) {
     return {
-      metadata: new FormControl(metadada),
-      disply_name: new FormControl(disply_name),
-      addOn: new FormControl(addOn),
+      metadata: new UntypedFormControl(metadada),
+      disply_name: new UntypedFormControl(disply_name),
+      addOn: new UntypedFormControl(addOn),
     };
   }
 
@@ -29,21 +33,21 @@ export class SetupComponent implements OnInit {
       this.repositories.at(index).get('years').reset();
   }
 
-  repositories: FormArray = new FormArray([this.getNewForm()]);
+  repositories: UntypedFormArray = new UntypedFormArray([this.getNewForm()]);
 
   getNewForm() {
-    return new FormGroup({
-      years: new FormControl(),
-      name: new FormControl(),
-      icon: new FormControl(),
-      startPage: new FormControl(),
-      type: new FormControl(),
-      itemsEndPoint: new FormControl(),
-      apiKey: new FormControl(),
-      siteMap: new FormControl(),
-      allCores: new FormControl(),
-      schema: new FormArray([new FormGroup(this.baseSchema())]),
-      metadata: new FormArray([new FormGroup(this.baseSchema())]),
+    return new UntypedFormGroup({
+      years: new UntypedFormControl(),
+      name: new UntypedFormControl(),
+      icon: new UntypedFormControl(),
+      startPage: new UntypedFormControl(),
+      type: new UntypedFormControl(),
+      itemsEndPoint: new UntypedFormControl(),
+      apiKey: new UntypedFormControl(),
+      siteMap: new UntypedFormControl(),
+      allCores: new UntypedFormControl(),
+      schema: new UntypedFormArray([new UntypedFormGroup(this.baseSchema())]),
+      metadata: new UntypedFormArray([new UntypedFormGroup(this.baseSchema())]),
     });
   }
   constructor(
@@ -97,8 +101,8 @@ export class SetupComponent implements OnInit {
       this.toastr.error('REST API endpoint is not defined');
       return;
     }
-    const schema = <FormArray>repo.get('schema');
-    const metadata = <FormArray>repo.get('metadata');
+    const schema = <UntypedFormArray>repo.get('schema');
+    const metadata = <UntypedFormArray>repo.get('metadata');
     const data = await this.settingService.retreiveMetadata(
       repo.get('itemsEndPoint').value,
       repo.get('type').value,
@@ -108,7 +112,7 @@ export class SetupComponent implements OnInit {
     data.base.forEach((element) => {
       const splited = element.split('.');
       schema.push(
-        new FormGroup(
+        new UntypedFormGroup(
           this.baseSchema(element, (splited.join('_') as string).toLowerCase()),
         ),
       );
@@ -120,7 +124,7 @@ export class SetupComponent implements OnInit {
       data.metadata.forEach((element) => {
         const splited = element.split('.');
         metadata.push(
-          new FormGroup(
+          new UntypedFormGroup(
             this.baseSchema(
               element,
               (splited.join('_') as string).toLowerCase(),
@@ -131,7 +135,7 @@ export class SetupComponent implements OnInit {
     else
       data.metadata.forEach((element) => {
         metadata.push(
-          new FormGroup(this.baseSchema(element, element as string)),
+          new UntypedFormGroup(this.baseSchema(element, element as string)),
         );
       });
   }
@@ -143,14 +147,14 @@ export class SetupComponent implements OnInit {
   AddNewRepo() {
     this.repositories.push(this.getNewForm());
   }
-  delete(schema: FormArray, index: number) {
+  delete(schema: UntypedFormArray, index: number) {
     schema.removeAt(index);
   }
   deleteRepo(index) {
     this.repositories.removeAt(index);
   }
 
   AddNewMetadata(schema: any) {
-    schema.push(new FormGroup(this.baseSchema()));
+    schema.push(new UntypedFormGroup(this.baseSchema()));
   }
 }
diff --git a/frontend/src/app/admin/components/users/form/form.component.ts b/frontend/src/app/admin/components/users/form/form.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import {
-  FormGroup,
-  FormControl,
+  UntypedFormGroup,
+  UntypedFormControl,
   Validators,
   AsyncValidatorFn,
   AbstractControl,
@@ -28,15 +28,15 @@ export function existValidator(usersService: UsersService): AsyncValidatorFn {
   styleUrls: ['./form.component.scss'],
 })
 export class FormComponent implements OnInit {
-  form: FormGroup = new FormGroup({
-    name: new FormControl(''),
-    email: new FormControl(
+  form: UntypedFormGroup = new UntypedFormGroup({
+    name: new UntypedFormControl(''),
+    email: new UntypedFormControl(
       null,
       [Validators.email],
       [existValidator(this.userService)],
     ),
-    role: new FormControl(''),
-    password: new FormControl(''),
+    role: new UntypedFormControl(''),
+    password: new UntypedFormControl(''),
   });
   get email() {
     return this.form.get('email');
@@ -61,7 +61,7 @@ export class FormComponent implements OnInit {
       this.form.removeControl('email');
       this.form.registerControl(
         'email',
-        new FormControl(null, [Validators.email]),
+        new UntypedFormControl(null, [Validators.email]),
       ); // [existValidator(!this.data ? this.userService : null)]
       const temp = this.data;
       temp['password'] = '';

diff --git a/frontend/src/app/admin/design/components/form-dialog/form-dialog.component.ts b/frontend/src/app/admin/design/components/form-dialog/form-dialog.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { FormGroup, FormControl } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { MetadataService } from 'src/app/admin/services/metadata.service';
 
 @Component({
@@ -10,8 +10,8 @@ import { MetadataService } from 'src/app/admin/services/metadata.service';
 })
 export class FormDialogComponent implements OnInit {
   controls = [];
-  form: FormGroup = new FormGroup({
-    icon: new FormControl(''),
+  form: UntypedFormGroup = new UntypedFormGroup({
+    icon: new UntypedFormControl(''),
   });
   pre: any;
   formControls = [];
@@ -37,7 +37,7 @@ export class FormDialogComponent implements OnInit {
     const FormGroupControls: any = {};
     this.data.form_data.forEach((element) => {
       if (this.data.configs.componentConfigs[element.name] != null)
-        FormGroupControls[element.name] = new FormControl(
+        FormGroupControls[element.name] = new UntypedFormControl(
           element.name == 'source'
             ? this.data.configs.componentConfigs[element.name].replace(
                 '.keyword',
@@ -46,16 +46,16 @@ export class FormDialogComponent implements OnInit {
             : this.data.configs.componentConfigs[element.name],
         );
       else if (this.data.configs[element.name])
-        FormGroupControls[element.name] = new FormControl(
+        FormGroupControls[element.name] = new UntypedFormControl(
           this.data.configs[element.name],
         );
       else if (this.data.configs[element.name])
-        FormGroupControls[element.name] = new FormControl(
+        FormGroupControls[element.name] = new UntypedFormControl(
           this.data.configs[element.name],
         );
-      else FormGroupControls[element.name] = new FormControl(null);
+      else FormGroupControls[element.name] = new UntypedFormControl(null);
     });
-    this.form = new FormGroup(FormGroupControls);
+    this.form = new UntypedFormGroup(FormGroupControls);
     this.metadata = await this.metadataService.get();
     this.formControls = this.data.form_data;
     this.pre = this.form.value;
-Original file line number
+Diff line change
@@ Expand Up / @@ -115,6 +115,5 @@ @@
             }
           }
         }
-      },
-      "defaultProject": "RES"
+      }
     }