Signals migration

frontend/src/app/components/dashboard/dashboard.component.ts

@@ -160,9 +160,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
 		console.log('getData');
 
 		this._tables.fetchTablesFolders(this.connectionID).subscribe((res) => {
-			console.log('getTables folders');
-			console.log(res);
-
 			const tables = res.find((item) => item.category_id === 'all-tables-kitten')?.tables || [];
 
 			this.tableFolders = res;
@@ -215,6 +212,12 @@ export class DashboardComponent implements OnInit, OnDestroy {
 					}
 				});
 			}
+		},
+		(err) => {	
+			this.isServerError = true;
+			this.serverError = { abstract: err.error?.message || err.message, details: err.error?.originalMessage };
+			this.loading = false;
+			this.title.setTitle(`Error | ${this._company.companyTabTitle || 'Rocketadmin'}`);
 		});
 	}
 

frontend/src/app/components/ui-components/banner/banner.component.html

@@ -1,5 +1,5 @@
 <div class="banner-wrapper">
-    <div class="banner-box banner_{{type}}">
+    <div class="banner-box banner_{{type()}}">
         <ng-content></ng-content>
     </div>
 </div>

frontend/src/app/components/ui-components/banner/banner.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 import { AlertType } from 'src/app/models/alert';
 
@@ -7,8 +7,6 @@ import { AlertType } from 'src/app/models/alert';
 	templateUrl: './banner.component.html',
 	styleUrls: ['./banner.component.css'],
 })
-export class BannerComponent implements OnInit {
-	@Input() type: AlertType;
-
-	ngOnInit(): void {}
+export class BannerComponent {
+	type = input<AlertType>();
 }

frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.html

@@ -1,14 +1,17 @@
 <div class="breadcrumbs">
-    <ng-container *ngFor="let crumb of crumbs; let i = index">
-        <a mat-button *ngIf="crumb.link; else staticCrumb"
-            [routerLink]="crumb.link"
-            [queryParams]="crumb.queryParams"
-            class="breadcrumb">
-            {{crumb.label}}
-        </a>
-        <ng-template #staticCrumb>
-            <strong class="mat-body-1 static-crumb">{{crumb.label}}</strong>
-        </ng-template>
-        <mat-icon *ngIf="crumbs.length !== i + 1" class="breadcrumbDivider">chevron_right</mat-icon>
-    </ng-container>
+    @for (crumb of crumbs(); track crumb.label; let i = $index) {
+        @if (crumb.link) {
+            <a mat-button
+                [routerLink]="crumb.link"
+                [queryParams]="crumb.queryParams"
+                class="breadcrumb">
+                {{crumb.label}}
+            </a>
+        } @else {
+            <strong class="static-crumb">{{crumb.label}}</strong>
+        }
+        @if (crumbs().length !== i + 1) {
+            <mat-icon class="breadcrumbDivider">chevron_right</mat-icon>
+        }
+    }
 </div>

frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.ts

@@ -1,18 +1,21 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 
+interface Breadcrumb {
+	label: string;
+	link?: string | null;
+	queryParams?: Record<string, string>;
+}
+
 @Component({
 	selector: 'app-breadcrumbs',
 	templateUrl: './breadcrumbs.component.html',
 	styleUrls: ['./breadcrumbs.component.css'],
 	standalone: true,
-	imports: [CommonModule, RouterModule, MatIconModule, MatButtonModule],
+	imports: [RouterModule, MatIconModule, MatButtonModule],
 })
-export class BreadcrumbsComponent implements OnInit {
-	@Input() crumbs;
-
-	ngOnInit(): void {}
+export class BreadcrumbsComponent {
+	crumbs = input<Breadcrumb[]>([]);
 }

frontend/src/app/components/ui-components/ip-address-button/ip-address-button.component.html

@@ -2,6 +2,6 @@
     class="ip-copy-button"
     matTooltip="Copy IP address"
     cdkCopyToClipboard="18.221.81.73/32"
-    (cdkCopyToClipboardCopied)="showCopyNotification(ip + ' IP address was copied to clipboard.')">
-    <strong>{{ ip }}</strong>
+    (cdkCopyToClipboardCopied)="showCopyNotification(ip() + ' IP address was copied to clipboard.')">
+    <strong>{{ ip() }}</strong>
 </button>

frontend/src/app/components/ui-components/ip-address-button/ip-address-button.component.ts

@@ -1,5 +1,5 @@
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
 import { NotificationsService } from 'src/app/services/notifications.service';
 
 @Component({
@@ -8,12 +8,10 @@ import { NotificationsService } from 'src/app/services/notifications.service';
 	styleUrls: ['./ip-address-button.component.css'],
 	imports: [CdkCopyToClipboard],
 })
-export class IpAddressButtonComponent implements OnInit {
-	@Input() ip: string;
+export class IpAddressButtonComponent {
+	private _notifications = inject(NotificationsService);
 
-	constructor(private _notifications: NotificationsService) {}
-
-	ngOnInit(): void {}
+	ip = input<string>('');
 
 	showCopyNotification(message: string) {
 		this._notifications.showSuccessSnackbar(message);