Change components to standalone

rossa-tech-cli/src/app/app.component.ts

@@ -1,10 +1,10 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core';
 
 @Component({
-  selector: "app-root",
+  selector: 'app-root',
-  templateUrl: "./app.component.html",
+  templateUrl: './app.component.html',
-  styleUrls: ["./app.component.css"],
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-  title = "rossa-tech";
+  title = 'rossa-tech';
 }

rossa-tech-cli/src/app/app.module.ts

@@ -8,11 +8,11 @@ import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
 import { LoginComponent } from './components/loginPage/login.component';
-import { DashboardComponent } from './components/dashboard/dashboard.component';
+// import { DashboardComponent } from './components/dashboard/dashboard.component';
-import { MeterDataListComponent } from './components/subcomponents/meter-data-list/meter-data-list.component';
+// import { MeterDataListComponent } from './components/subcomponents/meter-data-list/meter-data-list.component';
-import { HeaderComponent } from './components/header/header.component';
+// import { HeaderComponent } from './components/header/header.component';
 import { LoaderComponent } from './components/loader/loader.component';
-import { MeterDataAddDialogComponent } from './dialogs/meter-data-add-dialog/meter-data-add-dialog.component';
+// import { MeterDataAddDialogComponent } from './dialogs/meter-data-add-dialog/meter-data-add-dialog.component';
 import { SnackbarComponent } from './components/snackbar/snackbar.component';
 
 import { AuthInterceptor } from './auth/authInterceptor';
@@ -33,20 +33,21 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { ChartComponent } from './components/subcomponents/chart/chart.component';
+import { HeaderComponent } from './components/header/header.component';
-import { NgChartsModule } from 'ng2-charts';
+// import { ChartComponent } from './components/subcomponents/chart/chart.component';
+// import { NgChartsModule } from 'ng2-charts';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
-    DashboardComponent,
+    // DashboardComponent,
     LoaderComponent,
-    HeaderComponent,
+    // HeaderComponent,
-    MeterDataListComponent,
+    // MeterDataListComponent,
-    MeterDataAddDialogComponent,
+    // MeterDataAddDialogComponent,
     SnackbarComponent,
-    ChartComponent,
+    // ChartComponent,
   ],
   imports: [
     BrowserModule,
@@ -71,7 +72,8 @@ import { NgChartsModule } from 'ng2-charts';
     MatDatepickerModule,
     MatNativeDateModule,
     MatSnackBarModule,
-    NgChartsModule,
+    HeaderComponent,
+    // NgChartsModule,
   ],
   providers: [
     MatDatepickerModule,

rossa-tech-cli/src/app/components/dashboard/dashboard.component.ts

@@ -1,6 +1,8 @@
+import { CommonModule } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { MatGridListModule } from '@angular/material/grid-list';
 import { LoaderService } from 'src/app/components/loader/loader.service';
 import {
   MeterData,
@@ -12,11 +14,20 @@ import { ErrorService } from 'src/app/core/services/error.service';
 import { GlobalService } from 'src/app/core/services/global.service';
 import { MeterDataService } from 'src/app/core/services/meterData.service';
 import { MeterDataAddDialogComponent } from 'src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component';
+import { MeterDataListComponent } from '../subcomponents/meter-data-list/meter-data-list.component';
+import { ChartComponent } from '../subcomponents/chart/chart.component';
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatGridListModule,
+    MeterDataListComponent,
+    ChartComponent,
+  ],
 })
 export class DashboardComponent {
   usageTypes = UsageType;

rossa-tech-cli/src/app/components/header/header.component.ts

@@ -6,11 +6,15 @@ import { PageSecurityService } from 'src/app/auth/pageSecurity.service';
 import { LoaderService } from '../loader/loader.service';
 import { ErrorService } from 'src/app/core/services/error.service';
 import { NotificationService } from 'src/app/core/services/notification.service';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule],
 })
 export class HeaderComponent implements OnInit {
   userLoggedIn: Boolean = false;

rossa-tech-cli/src/app/components/subcomponents/chart/chart.component.ts

@@ -1,11 +1,15 @@
 import { Component, Input } from '@angular/core';
 import { MeterDataForYear } from 'src/app/core/dataModels/Meterdata';
 import { ChartType, ChartOptions, ChartDataset } from 'chart.js';
+import { CommonModule } from '@angular/common';
+import { NgChartsModule } from 'ng2-charts';
 
 @Component({
   selector: 'app-chart',
   templateUrl: './chart.component.html',
   styleUrls: ['./chart.component.scss'],
+  standalone: true,
+  imports: [CommonModule, NgChartsModule],
 })
 export class ChartComponent {
   @Input() meterData: any[] = [];

rossa-tech-cli/src/app/components/subcomponents/meter-data-list/meter-data-list.component.ts

@@ -1,12 +1,15 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { UsageType } from 'src/app/core/dataModels/UsageType';
 import { MeterData } from 'src/app/core/dataModels/Meterdata';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-meter-data-list',
   templateUrl: './meter-data-list.component.html',
   styleUrls: ['./meter-data-list.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatTableModule],
 })
 export class MeterDataListComponent implements OnInit, OnChanges {
   @Input()

rossa-tech-cli/src/app/dialogs/meter-data-add-dialog/meter-data-add-dialog.component.ts

@@ -1,6 +1,16 @@
+import { CommonModule } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {
-import { MatDialogRef } from '@angular/material/dialog';
+  FormBuilder,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 import { Meter, Meters } from 'src/app/core/dataModels/Meter';
 import { MeterData } from 'src/app/core/dataModels/Meterdata';
 import { UsageType } from 'src/app/core/dataModels/UsageType';
@@ -10,6 +20,16 @@ import { DatabaseService } from 'src/app/core/services/database.service';
   selector: 'app-meter-data-add-dialog',
   templateUrl: './meter-data-add-dialog.component.html',
   styleUrls: ['./meter-data-add-dialog.component.scss'],
+  standalone: true,
+  imports: [
+    MatDialogModule,
+    MatInputModule,
+    MatSelectModule,
+    MatDatepickerModule,
+    FormsModule,
+    ReactiveFormsModule,
+    CommonModule,
+  ],
 })
 export class MeterDataAddDialogComponent implements OnInit {
   meters: Meter[] = [];