Updated Angular 18 and Ag-grid 32. (#214)

* ng update results * remoevd yarn reference from docs website and updated ngx-bootstrap and ag-grid incompat issues. * Update to latest angular 18 * Upgrading ag-grid to versions compatible with Angular 18 * chore(deps): update dependency system.text.json to 8.0.4 (#209) Verified that this change works in isolation Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency serilog.aspnetcore to 8.0.2 (#208) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency fluentvalidation to 11.9.2 (#181) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency swashbuckle.aspnetcore to 6.7.3 (#169) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Banner fix (#139) * update traderx logo * Add files via upload * Update header.component.html * Fixing banner and color icon * Resetting this file name * fixing bad icon merge/ conflicts --------- Co-authored-by: Mimi Flynn <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Juan Estrella <[email protected]> Co-authored-by: DovOps <[email protected]>
finos · Sep 3, 2024 · 4635519 · 4635519
1 parent 4aa4151
commit 4635519
Show file tree

Hide file tree

Showing 16 changed files with 60 additions and 9,515 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@ build/
 
 # Exclude package-lock to avoid company builds overriding standard locations
 package-lock.json
+yarn.lock
 
 #NodeJS
 node_modules

diff --git a/web-front-end/angular/angular.json b/web-front-end/angular/angular.json
@@ -21,17 +21,21 @@
             "prefix": "app",
             "architect": {
                 "build": {
-                    "builder": "@angular-devkit/build-angular:browser",
+                    "builder": "@angular-devkit/build-angular:application",
                     "options": {
-                        "outputPath": "dist/main-application",
+                        "outputPath": {
+                          "base": "dist/main-application"
+                        },
                         "index": "main/index.html",
-                        "main": "main/main.ts",
-                        "polyfills": "main/polyfills.ts",
+                        "polyfills": [
+                          "main/polyfills.ts"
+                        ],
                         "tsConfig": "tsconfig.app.json",
                         "inlineStyleLanguage": "scss",
                         "assets": ["main/favicon.ico", "main/assets"],
                         "styles": ["main/styles.scss"],
-                        "scripts": []
+                        "scripts": [],
+                        "browser": "main/main.ts"
                     },
                     "configurations": {
                         "local": {
@@ -55,8 +59,6 @@
                             "namedChunks": false,
                             "aot": true,
                             "extractLicenses": true,
-                            "vendorChunk": false,
-                            "buildOptimizer": true,
                             "budgets": [
                                 {
                                     "type": "initial",

diff --git a/web-front-end/angular/main/app/accounts/account.component.html b/web-front-end/angular/main/app/accounts/account.component.html
@@ -4,7 +4,7 @@
         <div class="mt-4">
             <h6> Account List </h6>
             <ag-grid-angular #agGrid style="width: 800px; height: 300px;" id="accountgrid" class="ag-theme-alpine"
-                [columnDefs]="columnDefs" rowSelection='single' [frameworkComponents]="frameworkComponents"
+                [columnDefs]="columnDefs" rowSelection='single' [components]="frameworkComponents"
                 [rowData]="accounts$ | async" (selectionChanged)="onSelectionChanged()"
                 (gridReady)="onGridReady($event)"></ag-grid-angular>
         </div>
@@ -15,7 +15,7 @@ <h6> Account List </h6>
         <div class="mt-4">
             <h6>Users List {{selectedAccount ? '(' + selectedAccount.displayName + ')' : ''}}</h6>
             <ag-grid-angular #agGrid style="width: 800px; height: 300px;" id="usergrid" class="ag-theme-alpine"
-                [columnDefs]="columnDefsUser" [frameworkComponents]="frameworkComponents" [rowData]="users$ | async">
+                [columnDefs]="columnDefsUser" [components]="frameworkComponents" [rowData]="users$ | async">
             </ag-grid-angular>
         </div>
     </div>

diff --git a/web-front-end/angular/main/app/accounts/account.component.ts b/web-front-end/angular/main/app/accounts/account.component.ts
@@ -1,5 +1,6 @@
 import { ColDef, GridApi, GridReadyEvent, Module } from 'ag-grid-community';
 import { Component, OnInit } from '@angular/core';
+import { AgGridModule } from 'ag-grid-angular';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { AccountService } from '../service/account.service';
 import { Account } from '../model/account.model';

diff --git a/web-front-end/angular/main/app/app.module.ts b/web-front-end/angular/main/app/app.module.ts
@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { TradeModule } from './trade/trade.module';
-import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, withJsonpSupport } from '@angular/common/http';
 import { CommonModule } from '@angular/common';
 import { AgGridModule } from 'ag-grid-angular';
 import { HeaderComponent } from './header/header.component';
@@ -11,19 +11,11 @@ import { RouterModule } from '@angular/router';
 import { routes } from './routing';
 import { PageNotFoundComponent } from './page-not-found.component';
 
-@NgModule({
-  declarations: [AppComponent, HeaderComponent, PageNotFoundComponent],
-  imports: [
-    BrowserModule,
-    CommonModule,
-    TradeModule,
-    AccountsModule,
-    HttpClientModule,
-    HttpClientJsonpModule,
-    AgGridModule,
-    RouterModule.forRoot(routes)
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
+@NgModule({ declarations: [AppComponent, HeaderComponent, PageNotFoundComponent],
+    bootstrap: [AppComponent], imports: [BrowserModule,
+        CommonModule,
+        TradeModule,
+        AccountsModule,
+        AgGridModule,
+        RouterModule.forRoot(routes)], providers: [provideHttpClient(withInterceptorsFromDi(), withJsonpSupport())] })
 export class AppModule { }
diff --git a/web-front-end/angular/main/app/header/header.component.html b/web-front-end/angular/main/app/header/header.component.html
@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-lg bg-body-tertiary text-bg-primary" data-bs-theme="dark">
     <div class="container-fluid">
-        <img width="50px" src="assets/img/traderX-icon.png"/>
+        <img width="50px" src="assets/img/traderx-apple-touch-icon.png"/>
         <div style="font-size: 1.5em">FINOS | TraderX Sample Application</div>
         <img width="30px" src="assets/img/FINOS_Icon_White.png"/>
     </div>

diff --git a/web-front-end/angular/main/app/trade/position-blotter/position-blotter.component.html b/web-front-end/angular/main/app/trade/position-blotter/position-blotter.component.html
@@ -1,5 +1,5 @@
 <h5>Positions</h5>
 
 <ag-grid-angular #agGrid style="width: 100%; height: 350px;" id="myGrid" class="ag-theme-alpine"
-    [columnDefs]="columnDefs" [rowData]="positions" (gridReady)="onGridReady($event)" [getRowNodeId]="getRowNodeId">
+    [columnDefs]="columnDefs" [rowData]="positions" (gridReady)="onGridReady($event)" [getRowId]="getRowId">
 </ag-grid-angular>
diff --git a/web-front-end/angular/main/app/trade/position-blotter/position-blotter.component.ts b/web-front-end/angular/main/app/trade/position-blotter/position-blotter.component.ts
@@ -1,4 +1,4 @@
-import { ColDef, GridApi, GridReadyEvent, Module } from 'ag-grid-community';
+import { ColDef, GridApi, GridReadyEvent, GetRowIdParams } from 'ag-grid-community';
 import { Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { Account } from 'main/app/model/account.model';
 import { Position } from 'main/app/model/trade.model';
@@ -96,8 +96,8 @@ export class PositionBlotterComponent implements OnChanges, OnDestroy {
     this.gridApi = params.api;
   }
 
-  getRowNodeId(data: Position) {
-    return data.security;
+  getRowId(params: GetRowIdParams<any>):string {
+    return `Position-${params.data.security}`;
   }
 
   ngOnDestroy() {

diff --git a/web-front-end/angular/main/app/trade/trade-blotter/trade-blotter.component.html b/web-front-end/angular/main/app/trade/trade-blotter/trade-blotter.component.html
@@ -1,5 +1,5 @@
 <h5>Trades</h5>
 
 <ag-grid-angular style="width: 100%; height: 350px;" class="ag-theme-alpine" [columnDefs]="columnDefs"
-    [rowData]="trades" (gridReady)="onGridReady($event)" [getRowNodeId]="getRowNodeId">
+    [rowData]="trades" (gridReady)="onGridReady($event)" [getRowId]="getRowId">
 </ag-grid-angular>
diff --git a/web-front-end/angular/main/app/trade/trade-blotter/trade-blotter.component.ts b/web-front-end/angular/main/app/trade/trade-blotter/trade-blotter.component.ts
@@ -1,4 +1,4 @@
-import { ColDef, GridApi, GridReadyEvent } from 'ag-grid-community';
+import { ColDef, GridApi, GridReadyEvent, GetRowIdParams } from 'ag-grid-community';
 import { Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { Account } from 'main/app/model/account.model';
 import { PositionService } from 'main/app/service/position.service';
@@ -62,8 +62,8 @@ export class TradeBlotterComponent implements OnChanges, OnDestroy {
         this.gridApi.sizeColumnsToFit();
     }
 
-    getRowNodeId(data: Trade) {
-        return data.id;
+    getRowId(params: GetRowIdParams<any>):string {
+        return  `Trade-${params.data.id}`;
     }
 
     ngOnDestroy() {

diff --git a/web-front-end/angular/main/assets/img/traderX-icon.png b/web-front-end/angular/main/assets/img/traderX-icon.png
diff --git a/web-front-end/angular/main/styles.scss b/web-front-end/angular/main/styles.scss
@@ -1,33 +1,32 @@
-@import "~bootstrap/dist/css/bootstrap.css";
-@import '~ag-grid-community/styles/ag-grid.css';
-@import '~ag-grid-community/styles/ag-theme-alpine.css';
-
+@import 'bootstrap/dist/css/bootstrap.css';
+@import 'ag-grid-community/styles/ag-grid.css';
+@import 'ag-grid-community/styles/ag-theme-alpine.css';
 
 .btn-primary {
-    background-color: #044fbd;
-    border-color: #044fbd;
-}  
+  background-color: #044fbd;
+  border-color: #044fbd;
+}
 
 .btn-primary:hover {
-    background-color: #0d6efd;
+  background-color: #0d6efd;
 }
 
 #buyButton {
-    background-color: green;
+  background-color: green;
 }
 
 #sellButton {
-    background-color: red;
+  background-color: red;
 }
 
 .btn-info {
-    background-color: #0d6efd;
+  background-color: #0d6efd;
 }
 
 .btn-info:hover {
-    background-color: #3583f9;
+  background-color: #3583f9;
 }
 
 .drpbtn3 {
-    margin-left: 5px;
-}
+  margin-left: 5px;
+}
diff --git a/web-front-end/angular/package.json b/web-front-end/angular/package.json
@@ -14,28 +14,28 @@
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/animations": "^17.0.0",
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/router": "^17.0.0",
-    "ag-grid-angular": "^29.3.3",
-    "ag-grid-community": "^29.3.5",
+    "@angular/animations": "^18.2.2",
+    "@angular/common": "^18.2.2",
+    "@angular/compiler": "^18.2.2",
+    "@angular/core": "^18.2.2",
+    "@angular/forms": "^18.2.2",
+    "@angular/platform-browser": "^18.2.2",
+    "@angular/platform-browser-dynamic": "^18.2.2",
+    "@angular/router": "^18.2.2",
+    "ag-grid-angular": "^32.1.0",
+    "ag-grid-community": "^32.1.0",
     "bootstrap": "^5.3.3",
-    "ngx-bootstrap": "^12.0.0",
+    "ngx-bootstrap": "^18.0.2",
     "rxjs": "^7.8.1",
     "socket.io-client": "4.7.5",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular/cli": "^17.0.0",
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/language-service": "^17.0.0",
+    "@angular-devkit/build-angular": "^18.2.2",
+    "@angular/cli": "^18.2.2",
+    "@angular/compiler-cli": "^18.2.2",
+    "@angular/language-service": "^18.2.2",
     "@faker-js/faker": "^7.6.0",
     "@types/jasmine": "^5.1.4",
     "@types/node": "^20.12.13",

diff --git a/web-front-end/angular/tsconfig.json b/web-front-end/angular/tsconfig.json
@@ -5,13 +5,13 @@
         "baseUrl": "./",
         "outDir": "./dist/out-tsc",
         "forceConsistentCasingInFileNames": true,
+        "esModuleInterop": true,
         "strict": true,
         "strictPropertyInitialization": false,
         "noImplicitReturns": true,
         "noFallthroughCasesInSwitch": true,
         "sourceMap": true,
         "declaration": false,
-        "downlevelIteration": true,
         "experimentalDecorators": true,
         "moduleResolution": "node",
         "importHelpers": true,

diff --git a/website/README.md b/website/README.md
@@ -20,7 +20,7 @@ The command should open your browser and point to `http://localhost:3000`.
 
 You can configure Netlify using your own GitHub account, pointing to a personal repository (or fork); when adding a new site, please use the following configuration:
 - Woeking directory: `website`
-- Build command: `yarn build`
+- Build command: `npm run build`
 - Build directory: `website/build`
 
 If you want to serve your website through `https://<project_name>.finos.org`, please email [[email protected]](mailto:[email protected]). To check a preview, visit https://project-blueprint.finos.org .