Einstellungen auf Dialog umgebaut

client/package-lock.json

@@ -384,6 +384,40 @@
         }
       }
     },
+    "node_modules/@angular-devkit/architect/node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@angular-devkit/architect/node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@angular-devkit/architect/node_modules/source-map": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
@@ -441,6 +475,40 @@
         }
       }
     },
+    "node_modules/@angular-devkit/schematics/node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@angular-devkit/schematics/node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@angular-devkit/schematics/node_modules/source-map": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
@@ -1261,6 +1329,24 @@
         "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
+    "node_modules/@angular/cli/node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@angular/cli/node_modules/cliui": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz",
@@ -1276,6 +1362,22 @@
         "node": ">=20"
       }
     },
+    "node_modules/@angular/cli/node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@angular/cli/node_modules/source-map": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
@@ -5308,6 +5410,40 @@
         }
       }
     },
+    "node_modules/@schematics/angular/node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@schematics/angular/node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@schematics/angular/node_modules/source-map": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",

client/src/app/core/layout/layout.component.html

@@ -33,5 +33,3 @@
   </div> -->
 
 </mat-drawer-container>
-
-<app-settings #settings/>

client/src/app/core/layout/layout.component.ts

@@ -5,21 +5,27 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
 import { AuthService } from '../auth/auth.service';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { SettingsComponent } from '../../modules/settings/settings.component';
 
 @Component({
     selector: 'app-layout',
-    imports: [MatButtonModule, MatIconModule, MatSidenavModule, RouterModule, MatToolbarModule, SettingsComponent],
+    imports: [MatButtonModule, MatIconModule, MatSidenavModule, RouterModule, MatToolbarModule, MatDialogModule],
     templateUrl: './layout.component.html',
     styleUrl: './layout.component.scss'
 })
 export class LayoutComponent {
   private authService: AuthService = inject(AuthService);
-  @ViewChild('settings') settings!: SettingsComponent;
+
+  private dialog: MatDialog = inject(MatDialog);
 
   openSidebar() {
-    console.log(this.settings)
+    this.dialog.open(SettingsComponent, {
-    this.settings.open();
+      maxWidth: "calc(100vw - 48px)",
+      width: "600px",
+      minWidth: "200px",
+      disableClose: true,
+    })
   }
 
   logout(){

client/src/app/modules/cylinder/cylinder.component.ts

@@ -12,7 +12,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { AgGridContainerComponent } from '../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
 import { CylinderArchiveComponent } from './components/cylinder-archive/cylinder-archive.component';
 import { ICylinder } from '../../model/interface/cylinder.interface';
-import { DialogPosition } from '@angular/material/dialog'
 
 @Component({
     selector: 'app-cylinder',

client/src/app/modules/settings/settings.component.html

@@ -1,13 +1,9 @@
-@if(isOpen) {
+<div mat-dialog-title class="sidebar-header">
-  <div class="overlay" (click)="closeSidebar()"></div>
+  <div >Einstellungen</div>
-}
+  <div class="close-btn" (click)="closeSidebar()">✕</div>
-<div class="sidebar" [class.open]="isOpen">
-  <div class="sidebar-header">
-    <div class="title_text">Einstellungen</div>
-    <button class="close-btn" (click)="closeSidebar()">✕</button>
 </div>
 
-  <div class="content" style="flex: 1 1 auto" >
+<mat-dialog-content>
 
    <div class="px-4">
       <div class="text-2xl">Allgemeine Einstellungen</div>
@@ -30,7 +26,10 @@
         <mat-hint>Wird für den Emailversand benötigt</mat-hint>
       </mat-form-field>
       <div class="spacer-y16"></div>
-      <button matButton="elevated" [disabled]="userData.invalid" (click)="saveUser()">Speichern</button>
+      <button matButton="elevated" class="btn-primary" [disabled]="userData.invalid || !isDirty()" (click)="saveUser()">
+        <mat-icon>save</mat-icon>
+        Speichern
+      </button>
     </form>
 
     <div class="spacer-y32"></div>
@@ -60,11 +59,8 @@
         <mat-hint>Ändert die Schriftgröße in der Liste</mat-hint>
       </mat-form-field>
     </form>
+</mat-dialog-content>
 
-    
+<mat-dialog-actions align="end">
-  </div>
+  <button matButton  (click)="closeSidebar()">Schließen</button>
-
+</mat-dialog-actions>
-  @if (isLoading) {
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-  }
-</div>

client/src/app/modules/settings/settings.component.ts

@@ -9,10 +9,12 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import { HotToastService } from '@ngxpert/hot-toast';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import { MatSelectModule } from '@angular/material/select';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
     selector: 'app-settings',
-    imports: [MatProgressBarModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatSlideToggleModule, MatSelectModule],
+    imports: [MatProgressBarModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatSlideToggleModule, MatSelectModule, MatDialogModule, MatIconModule],
     templateUrl: './settings.component.html',
     styleUrl: './settings.component.scss'
 })
@@ -23,6 +25,7 @@ export class SettingsComponent {
   private authService: AuthService = inject(AuthService);
   private api: ApiService = inject(ApiService);
   private toast: HotToastService = inject(HotToastService);
+  private dialogRef = inject(MatDialogRef<SettingsComponent>);
 
   public isLoading = false;
 
@@ -49,7 +52,7 @@ export class SettingsComponent {
     if (this.isDirty()) {
       this.toast.warning('Ungespeicherte Änderungen wurden verworfen.');
     }
-    this.isOpen = false;
+    this.dialogRef.close()
   }
 
   get $userData() {