remove module, embrace components

spoud · Feb 8, 2024 · 62b257a · 62b257a
1 parent 232d520
commit 62b257a
Show file tree

Hide file tree

Showing 17 changed files with 100 additions and 166 deletions.
diff --git 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
@@ -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
diff --git a/frontend/src/app/common/material.module.ts b/frontend/src/app/common/material.module.ts
diff --git a/frontend/src/app/graphql.module.ts → frontend/src/app/graphql-provider.ts b/frontend/src/app/graphql.module.ts → 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<any> {
     };
 }
 
-@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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
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
@@ -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
@@ -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
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>KafkaCostControlFrontend</title>
+    <title>Kafka Cost Control</title>
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">