Einstellungen auf Dialog umgebaut

2026-03-05 10:13:41 +01:00
parent 026e47cd1b
commit 020216026e
6 changed files with 167 additions and 29 deletions
--- a/client/package-lock.json
+++ b/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",
--- a/client/src/app/core/layout/layout.component.html
+++ b/client/src/app/core/layout/layout.component.html
@@ -32,6 +32,4 @@
    </button>
  </div> -->

-</mat-drawer-container>
-
-<app-settings #settings/>
+</mat-drawer-container>
--- a/client/src/app/core/layout/layout.component.ts
+++ b/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.settings.open();
+    this.dialog.open(SettingsComponent, {
+      maxWidth: "calc(100vw - 48px)",
+      width: "600px",
+      minWidth: "200px",
+      disableClose: true,
+    })
  }

  logout(){
--- a/client/src/app/modules/cylinder/cylinder.component.ts
+++ b/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',
--- a/client/src/app/modules/settings/settings.component.html
+++ b/client/src/app/modules/settings/settings.component.html
@@ -1,15 +1,11 @@
-@if(isOpen) {
-  <div class="overlay" (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" >
+<div mat-dialog-title class="sidebar-header">
+  <div >Einstellungen</div>
+  <div class="close-btn" (click)="closeSidebar()">✕</div>
+</div>

-    <div class="px-4">
+<mat-dialog-content>
+
+   <div class="px-4">
      <div class="text-2xl">Allgemeine Einstellungen</div>
      <div>Name, Email</div>
    </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>

-    
-  </div>
-
-  @if (isLoading) {
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-  }
-</div>
+<mat-dialog-actions align="end">
+  <button matButton  (click)="closeSidebar()">Schließen</button>
+</mat-dialog-actions>
--- a/client/src/app/modules/settings/settings.component.ts
+++ b/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() {