diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 8438fc3..ab50009 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,5 +1,8 @@ import {Component} from '@angular/core'; -import {Router} from '@angular/router'; +import {Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router'; +import {CommonModule} from '@angular/common'; +import {MatTabNav, MatTabNavPanel, MatTabsModule} from '@angular/material/tabs'; +import {MatToolbar, MatToolbarModule} from '@angular/material/toolbar'; interface Link { path: string; @@ -8,8 +11,20 @@ interface Link { @Component({ selector: 'app-root', + standalone: true, templateUrl: './app.component.html', - styleUrl: './app.component.scss' + styleUrl: './app.component.scss', + imports: [ + CommonModule, + + + RouterLink, + RouterLinkActive, + RouterOutlet, + + MatTabsModule, + MatToolbar + ], }) export class AppComponent { navLinks: Link[] = [ diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts index 2c98b9d..208420b 100644 --- a/frontend/src/app/app.config.ts +++ b/frontend/src/app/app.config.ts @@ -3,7 +3,14 @@ import {provideRouter} from '@angular/router'; import {routes} from './app.routes'; import {provideAnimations} from '@angular/platform-browser/animations'; +import {provideHttpClient} from '@angular/common/http'; +import {provideGraphql} from './graphql-provider'; export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes), provideAnimations()] + providers: [ + provideRouter(routes), + provideAnimations(), + provideHttpClient(), + provideGraphql() + ], }; diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts deleted file mode 100644 index 69d600e..0000000 --- a/frontend/src/app/app.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -import {NgModule} from '@angular/core'; -import {GraphQLModule} from './graphql.module'; -import {HttpClientModule} from '@angular/common/http'; -import {AppComponent} from './app.component'; -import {BrowserModule} from '@angular/platform-browser'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {MatTabsModule} from '@angular/material/tabs'; -import {MatToolbarModule} from '@angular/material/toolbar'; -import {routes} from './app.routes'; -import {RouterModule} from '@angular/router'; -import {MAT_DATE_LOCALE} from "@angular/material/core"; - - -@NgModule({ - imports: [ - BrowserModule, - BrowserAnimationsModule, - HttpClientModule, - RouterModule.forRoot(routes), - - MatTabsModule, - MatToolbarModule, - GraphQLModule, - ], - declarations: [ - AppComponent, - ], - providers: [ - {provide: MAT_DATE_LOCALE, useValue: 'fr-CH'} - ], - bootstrap: [AppComponent] -}) -export class AppModule { -} diff --git a/frontend/src/app/common/material.module.ts b/frontend/src/app/common/material.module.ts deleted file mode 100644 index e05a2d2..0000000 --- a/frontend/src/app/common/material.module.ts +++ /dev/null @@ -1,38 +0,0 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {MatTableModule} from '@angular/material/table'; -import {MatSortModule} from '@angular/material/sort'; -import {MapDisplayComponent} from './map-display/map-display.component'; -import {MatFormFieldModule} from "@angular/material/form-field"; -import {MatDatepickerModule} from "@angular/material/datepicker"; -import {MatInputModule} from "@angular/material/input"; -import {provideNativeDateAdapter} from "@angular/material/core"; -import {MatButtonModule} from "@angular/material/button"; -import {MatSnackBarModule} from "@angular/material/snack-bar"; - -@NgModule({ - declarations: [], - imports: [ - CommonModule, - - MatTableModule, - MatSortModule, - - MapDisplayComponent, - ], - exports: [ - MatTableModule, - MatSortModule, - - MatFormFieldModule, - MatDatepickerModule, - MatInputModule, - MatButtonModule, - MatSnackBarModule, - - MapDisplayComponent, - ], - providers: [provideNativeDateAdapter()], -}) -export class MaterialModule { -} diff --git a/frontend/src/app/graphql.module.ts b/frontend/src/app/graphql-provider.ts similarity index 82% rename from frontend/src/app/graphql.module.ts rename to frontend/src/app/graphql-provider.ts index 4570708..e6400fb 100644 --- a/frontend/src/app/graphql.module.ts +++ b/frontend/src/app/graphql-provider.ts @@ -1,8 +1,9 @@ -import generatedFragments from '../generated/graphql/fragments'; -import {NgModule} from '@angular/core'; +import {Provider} from '@angular/core'; +import {Apollo, APOLLO_OPTIONS} from 'apollo-angular'; import {ApolloClientOptions, createHttpLink, InMemoryCache} from '@apollo/client/core'; -import {APOLLO_OPTIONS, ApolloModule} from 'apollo-angular'; import {setContext} from '@apollo/client/link/context'; +import generatedFragments from '../generated/graphql/fragments'; + const httpLink = createHttpLink({ uri: '/graphql', @@ -35,20 +36,17 @@ export function createApollo(): ApolloClientOptions { }; } -@NgModule({ - imports: [ - ApolloModule - ], - providers: [ +export function provideGraphql(): Provider[] { + return [ + { provide: APOLLO_OPTIONS, useFactory: createApollo, deps: [], }, - ], -}) -export class GraphQLModule { - constructor() { - - } + { + provide: Apollo, + useClass: Apollo + } + ]; } diff --git a/frontend/src/app/tab-context-data/context-data-list/context-data-list.component.ts b/frontend/src/app/tab-context-data/context-data-list/context-data-list.component.ts index 38b9fe3..15364a0 100644 --- a/frontend/src/app/tab-context-data/context-data-list/context-data-list.component.ts +++ b/frontend/src/app/tab-context-data/context-data-list/context-data-list.component.ts @@ -2,14 +2,21 @@ import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; import {GetContextDatasGQL} from '../../../generated/graphql/sdk'; import {ContextDataEntity} from '../../../generated/graphql/types'; import {LiveAnnouncer} from '@angular/cdk/a11y'; -import {MatSort, Sort} from '@angular/material/sort'; -import {MatTableDataSource} from '@angular/material/table'; +import {MatSort, MatSortModule, Sort} from '@angular/material/sort'; +import {MatTable, MatTableDataSource, MatTableModule} from '@angular/material/table'; import {MatSnackBar} from '@angular/material/snack-bar'; +import {MapDisplayComponent} from '../../common/map-display/map-display.component'; @Component({ + standalone: true, selector: 'app-context-data-list', templateUrl: './context-data-list.component.html', - styleUrl: './context-data-list.component.scss' + styleUrl: './context-data-list.component.scss', + imports: [ + MapDisplayComponent, + MatTableModule, + MatSortModule + ] }) export class ContextDataListComponent implements OnInit, AfterViewInit { diff --git a/frontend/src/app/tab-context-data/tab-context-data.module.ts b/frontend/src/app/tab-context-data/tab-context-data.module.ts index 8f70f77..532326f 100644 --- a/frontend/src/app/tab-context-data/tab-context-data.module.ts +++ b/frontend/src/app/tab-context-data/tab-context-data.module.ts @@ -1,20 +1,18 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; -import {ContextDataListComponent} from './context-data-list/context-data-list.component'; -import {MaterialModule} from '../common/material.module'; import {RouterModule} from '@angular/router'; -import {routes} from './tab-context-data.route'; +import {ContextDataListComponent} from './context-data-list/context-data-list.component'; @NgModule({ - declarations: [ - ContextDataListComponent - ], imports: [ CommonModule, - RouterModule.forChild(routes), + RouterModule.forChild([ + { + path: '', + component: ContextDataListComponent, + }]), - MaterialModule, ] }) export class TabContextDataModule { diff --git a/frontend/src/app/tab-context-data/tab-context-data.route.ts b/frontend/src/app/tab-context-data/tab-context-data.route.ts deleted file mode 100644 index 4c6e025..0000000 --- a/frontend/src/app/tab-context-data/tab-context-data.route.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {ContextDataListComponent} from './context-data-list/context-data-list.component'; -import {Routes} from '@angular/router'; - - -export const routes: Routes = [ - { - path: '', - component: ContextDataListComponent, - }, -]; diff --git a/frontend/src/app/tab-others/others/others.component.ts b/frontend/src/app/tab-others/others/others.component.ts index c235eb2..24cf534 100644 --- a/frontend/src/app/tab-others/others/others.component.ts +++ b/frontend/src/app/tab-others/others/others.component.ts @@ -5,11 +5,29 @@ import {ReprocessGQL} from "../../../generated/graphql/sdk"; import {MatSnackBar} from "@angular/material/snack-bar"; import {ApolloError} from '@apollo/client'; import {filter, mergeMap} from 'rxjs'; +import {FormsModule} from '@angular/forms'; +import {MatButton} from '@angular/material/button'; +import {MatDatepickerModule} from '@angular/material/datepicker'; +import {MatInputModule} from '@angular/material/input'; +import {provideNativeDateAdapter} from '@angular/material/core'; @Component({ + standalone: true, selector: 'app-others', templateUrl: './others.component.html', - styleUrl: './others.component.scss' + styleUrl: './others.component.scss', + imports: [ + ReprocessDialogComponent, + + FormsModule, + + MatButton, + MatDatepickerModule, + MatInputModule, + ], + providers: [ + provideNativeDateAdapter() + ], }) export class OthersComponent { diff --git a/frontend/src/app/tab-others/reprocess-dialog/reprocess-dialog.component.ts b/frontend/src/app/tab-others/reprocess-dialog/reprocess-dialog.component.ts index ea8c132..a336828 100644 --- a/frontend/src/app/tab-others/reprocess-dialog/reprocess-dialog.component.ts +++ b/frontend/src/app/tab-others/reprocess-dialog/reprocess-dialog.component.ts @@ -6,19 +6,13 @@ import { MatDialogRef, MatDialogTitle } from "@angular/material/dialog"; -import {MatButtonModule} from "@angular/material/button"; -import {FormsModule} from "@angular/forms"; -import {MatInputModule} from "@angular/material/input"; -import {MatFormFieldModule} from "@angular/material/form-field"; +import {MatButton} from "@angular/material/button"; @Component({ selector: 'app-reprocess-dialog', standalone: true, imports: [ - MatFormFieldModule, - MatInputModule, - FormsModule, - MatButtonModule, + MatButton, MatDialogTitle, MatDialogContent, MatDialogActions, diff --git a/frontend/src/app/tab-others/tab-others.module.ts b/frontend/src/app/tab-others/tab-others.module.ts index 396e173..bc4fd2d 100644 --- a/frontend/src/app/tab-others/tab-others.module.ts +++ b/frontend/src/app/tab-others/tab-others.module.ts @@ -2,21 +2,16 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {OthersComponent} from './others/others.component'; import {RouterModule} from '@angular/router'; -import {routes} from './tab-others.route'; -import {MaterialModule} from "../common/material.module"; -import {FormsModule} from "@angular/forms"; - @NgModule({ - declarations: [ - OthersComponent - ], imports: [ CommonModule, - RouterModule.forChild(routes), - - MaterialModule, - FormsModule + RouterModule.forChild([ + { + path: '', + component: OthersComponent, + }, + ]), ] }) export class TabOthersModule { diff --git a/frontend/src/app/tab-others/tab-others.route.ts b/frontend/src/app/tab-others/tab-others.route.ts deleted file mode 100644 index 3da915c..0000000 --- a/frontend/src/app/tab-others/tab-others.route.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {Routes} from '@angular/router'; -import {OthersComponent} from './others/others.component'; - - -export const routes: Routes = [ - { - path: '', - component: OthersComponent, - }, -]; diff --git a/frontend/src/app/tab-pricing-rules/pricing-rules-list/pricing-rules-list.component.ts b/frontend/src/app/tab-pricing-rules/pricing-rules-list/pricing-rules-list.component.ts index a317349..c744c9f 100644 --- a/frontend/src/app/tab-pricing-rules/pricing-rules-list/pricing-rules-list.component.ts +++ b/frontend/src/app/tab-pricing-rules/pricing-rules-list/pricing-rules-list.component.ts @@ -1,15 +1,20 @@ import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; import {GetPricingRulesGQL} from '../../../generated/graphql/sdk'; import {PricingRuleEntity} from '../../../generated/graphql/types'; -import {MatSort, Sort} from '@angular/material/sort'; -import {MatTableDataSource} from '@angular/material/table'; +import {MatSort, MatSortModule, Sort} from '@angular/material/sort'; +import {MatTable, MatTableDataSource, MatTableModule} from '@angular/material/table'; import {LiveAnnouncer} from '@angular/cdk/a11y'; import {MatSnackBar} from '@angular/material/snack-bar'; @Component({ + standalone: true, selector: 'app-pricing-rules-list', templateUrl: './pricing-rules-list.component.html', - styleUrl: './pricing-rules-list.component.scss' + styleUrl: './pricing-rules-list.component.scss', + imports: [ + MatTableModule, + MatSortModule + ] }) export class PricingRulesListComponent implements OnInit, AfterViewInit { diff --git a/frontend/src/app/tab-pricing-rules/tab-pricing-rules.module.ts b/frontend/src/app/tab-pricing-rules/tab-pricing-rules.module.ts index fb3e26f..11d5a83 100644 --- a/frontend/src/app/tab-pricing-rules/tab-pricing-rules.module.ts +++ b/frontend/src/app/tab-pricing-rules/tab-pricing-rules.module.ts @@ -1,20 +1,18 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {PricingRulesListComponent} from './pricing-rules-list/pricing-rules-list.component'; -import {MaterialModule} from '../common/material.module'; import {RouterModule} from '@angular/router'; -import {routes} from './tab-pricing-rules.route'; @NgModule({ - declarations: [ - PricingRulesListComponent - ], imports: [ CommonModule, - RouterModule.forChild(routes), - - MaterialModule, + RouterModule.forChild([ + { + path: '', + component: PricingRulesListComponent, + }, + ]), ] }) export class TabPricingRulesModule { diff --git a/frontend/src/app/tab-pricing-rules/tab-pricing-rules.route.ts b/frontend/src/app/tab-pricing-rules/tab-pricing-rules.route.ts deleted file mode 100644 index c78f017..0000000 --- a/frontend/src/app/tab-pricing-rules/tab-pricing-rules.route.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {Routes} from '@angular/router'; -import {PricingRulesListComponent} from './pricing-rules-list/pricing-rules-list.component'; - - -export const routes: Routes = [ - { - path: '', - component: PricingRulesListComponent, - }, -]; diff --git a/frontend/src/index.html b/frontend/src/index.html index 3378f76..cf44fe7 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -2,7 +2,7 @@ - KafkaCostControlFrontend + Kafka Cost Control diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 7447eb9..b29047b 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -1,6 +1,7 @@ -import {AppModule} from './app/app.module'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {bootstrapApplication} from '@angular/platform-browser'; +import {AppComponent} from './app/app.component'; +import {appConfig} from './app/app.config'; -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +bootstrapApplication(AppComponent, appConfig) + .catch((err) => console.error(err));