add db switcher in header

TODO.md

@@ -0,0 +1 @@
+- add more details to main screen including record, tables, backups count and last backup time

client/package.json

@@ -18,7 +18,7 @@
     "@angular/platform-browser": "^18.1.0",
     "@angular/platform-browser-dynamic": "^18.1.0",
     "@angular/router": "^18.1.0",
-    "@mucsi96/ui-elements": "^56.0.0",
+    "@mucsi96/ui-elements": "^58.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

client/src/app/app.component.css

@@ -1,3 +1,9 @@
 main {
   margin-top: 32px;
 }
+
+.selected-database {
+  display: inline-flex;
+  align-items: center;
+  gap: 20px;
+}

client/src/app/app.component.html

@@ -2,12 +2,26 @@
 <header bt>
   <nav>
     <a href="/" bt-logo>Postgres Backup Tool</a>
-    <div>
+    <div class="selected-database">
+      @if (databaseName()) {
+      <button bt bt-dropdown popovertarget="dropdown-menu-popover">
+        {{ databaseName() }}
+        <svg></svg>
+      </button>
+      <div popover bt id="dropdown-menu-popover">
+        <ul bt-dropdown-menu>
+          @for(database of databases(); track database) {
+          <li>
+            <a routerLink="/database/{{ database }}">{{ database }}</a>
+          </li>
+          }
+        </ul>
+      </div>
       @if (time) {
       <h3 bt>
         Last backup <span bt-badge>{{ time | relativeTime }}</span>
       </h3>
-      }
+      } }
     </div>
   </nav>
 </header>

client/src/app/app.component.ts

@@ -1,19 +1,33 @@
-import { Component, Signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { Component, signal, Signal } from '@angular/core';
+import { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';
 import { BackupsService } from './backups/backups.service';
 import { RelativeTimePipe } from './utils/relativeTime.pipe';
+import { DatabasesService } from './databases/databases.service';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, RelativeTimePipe],
+  imports: [RouterOutlet, RelativeTimePipe, RouterLink],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
 export class AppComponent {
+  databaseName = signal<string | undefined>(undefined);
+  databases: Signal<string[] | undefined>;
   lastBackupTime: Signal<Date | undefined>;
 
-  constructor(private readonly backupsService: BackupsService) {
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly databasesService: DatabasesService,
+    private readonly backupsService: BackupsService
+  ) {
+    this.route.params.subscribe((params) => {
+      if (params['name']) {
+        this.databaseName.set(params['name']);
+      }
+    });
+    this.databases = this.databasesService.getDatabases();
+    this.databaseName = this.databasesService.getSelectedDatabase();
     this.lastBackupTime = this.backupsService.getLastBackupTime();
   }
 }

client/src/app/backups/backups.component.ts

@@ -1,11 +1,10 @@
 import { Component, signal, Signal, WritableSignal } from '@angular/core';
 import { Backup } from '../../types';
-import { BackupsService } from './backups.service';
-import { SizePipe } from '../utils/size.pipe';
-import { RetentionPipe } from '../utils/retention.pipe';
-import { RelativeTimePipe } from '../utils/relativeTime.pipe';
 import { TablesService } from '../tables/tables.service';
-import { ActivatedRoute } from '@angular/router';
+import { RelativeTimePipe } from '../utils/relativeTime.pipe';
+import { RetentionPipe } from '../utils/retention.pipe';
+import { SizePipe } from '../utils/size.pipe';
+import { BackupsService } from './backups.service';
 
 @Component({
   selector: 'app-backups',
@@ -21,15 +20,9 @@ export class BackupsComponent {
   selectedBackup: WritableSignal<string | undefined> = signal(undefined);
 
   constructor(
-    private readonly route: ActivatedRoute,
     private readonly backupsService: BackupsService,
     private readonly tableService: TablesService
   ) {
-    this.route.params.subscribe((params) => {
-      if (params['name']) {
-        this.backupsService.setDatabaseName(params['name']);
-      }
-    });
     this.backups = this.backupsService.getBackups();
     this.processing = this.backupsService.isProcessing();
     this.loading = this.backupsService.isLoading();

client/src/app/database/database.component.ts

@@ -1,14 +1,31 @@
 import { Component } from '@angular/core';
-import { TablesComponent } from "../tables/tables.component";
-import { BackupsComponent } from "../backups/backups.component";
+import { TablesComponent } from '../tables/tables.component';
+import { BackupsComponent } from '../backups/backups.component';
+import { ActivatedRoute } from '@angular/router';
+import { BackupsService } from '../backups/backups.service';
+import { TablesService } from '../tables/tables.service';
+import { DatabasesService } from '../databases/databases.service';
 
 @Component({
   selector: 'app-database',
   standalone: true,
   imports: [TablesComponent, BackupsComponent],
   templateUrl: './database.component.html',
-  styleUrl: './database.component.css'
+  styleUrl: './database.component.css',
 })
 export class DatabaseComponent {
-
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly databasesService: DatabasesService,
+    private readonly backupsService: BackupsService,
+    private readonly tablesService: TablesService
+  ) {
+    this.route.params.subscribe((params) => {
+      if (params['name']) {
+        this.databasesService.setDatabaseName(params['name']);
+        this.tablesService.setDatabaseName(params['name']);
+        this.backupsService.setDatabaseName(params['name']);
+      }
+    });
+  }
 }

client/src/app/databases/databases.service.ts

@@ -1,11 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import {
-  Observable,
-  shareReplay,
-  tap
-} from 'rxjs';
+import { Observable, shareReplay, tap } from 'rxjs';
 import { environment } from '../../environments/environment';
 import { handleError } from '../utils/handleError';
 
@@ -14,6 +10,7 @@ import { handleError } from '../utils/handleError';
 })
 export class DatabasesService {
   $databases: Observable<string[]>;
+  selectedDatabase = signal<string | undefined>(undefined);
   loading = signal(true);
 
   constructor(private readonly http: HttpClient) {
@@ -26,6 +23,14 @@ export class DatabasesService {
       );
   }
 
+  getSelectedDatabase() {
+    return this.selectedDatabase;
+  }
+
+  setDatabaseName(name: string) {
+    this.selectedDatabase.set(name);
+  }
+
   getDatabases() {
     return toSignal(this.$databases);
   }

client/src/app/tables/tables.component.ts

@@ -1,9 +1,8 @@
-import { Component, computed, input, signal, Signal } from '@angular/core';
+import { Component, computed, signal, Signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { Table } from '../../types';
 import { BackupsService } from '../backups/backups.service';
 import { TablesService } from './tables.service';
-import { FormsModule } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-tables',
@@ -20,15 +19,9 @@ export class TablesComponent {
   loading: Signal<boolean>;
 
   constructor(
-    private readonly route: ActivatedRoute,
     private readonly tableService: TablesService,
     private readonly backupsService: BackupsService
   ) {
-    this.route.params.subscribe((params) => {
-      if (params['name']) {
-        this.tableService.setDatabaseName(params['name']);
-      }
-    });
     this.tables = this.tableService.getTables();
     this.totalRowCount = this.tableService.getTotalRowCount();
     this.loading = this.tableService.isLoading();

server/src/main/resources/templates/fragments.html

@@ -5,6 +5,7 @@
       /*<![CDATA[*/
       const base = document.createElement("base");
       base.href = "[[@{/}]]";
+      document.getElementsByTagName("base")[0].remove();
       document.getElementsByTagName("head")[0].appendChild(base);
       /*]]>*/
     </script>