create settings page #248

ls1intum · Mar 7, 2025 · a77adf5 · a77adf5
1 parent 116445c
commit a77adf5
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 21 deletions.
diff --git a/webapp/src/app/settings/settings.component.html b/webapp/src/app/settings/settings.component.html
@@ -0,0 +1,27 @@
+<div class="flex flex-col gap-4">
+  <h1 class="text-3xl font-bold">Settings</h1>
+  <div class="sm:w-2/3 w-full flex flex-col gap-3">
+    <h2 class="text-lg font-semibold">Notifications</h2>
+    <div class="flex flex-row items-center justify-between">
+      <span class="flex-col items-center">
+        <h3>Email notifications</h3>
+        <label hlmLabel class="font-light"> Receive email notifications for newly detected bad practices and reminders. </label>
+      </span>
+      <hlm-switch class="mr-2" [formControl]="_newNotificationEnabled" />
+    </div>
+    <button hlmBtn variant="outline" class="w-full" (click)="saveSettings()">Save settings</button>
+  </div>
+  <hlm-alert-dialog>
+    <button id="edit-profile" variant="outline" brnAlertDialogTrigger hlmBtn>Delete Account</button>
+    <hlm-alert-dialog-content *brnAlertDialogContent="let ctx">
+      <hlm-alert-dialog-header>
+        <h3 hlmAlertDialogTitle>Are you absolutely sure?</h3>
+        <p hlmAlertDialogDescription>This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
+      </hlm-alert-dialog-header>
+      <hlm-alert-dialog-footer>
+        <button hlmAlertDialogCancel (click)="ctx.close()">Cancel</button>
+        <button hlmAlertDialogAction (click)="deleteAccount()">Delete account</button>
+      </hlm-alert-dialog-footer>
+    </hlm-alert-dialog-content>
+  </hlm-alert-dialog>
+</div>
diff --git a/webapp/src/app/settings/settings.component.ts b/webapp/src/app/settings/settings.component.ts
@@ -1,9 +1,9 @@
 import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { lastValueFrom } from 'rxjs';
-import { UserService } from '@app/core/modules/openapi';
+import { UserService, UserSettings } from '@app/core/modules/openapi';
 import { SecurityStore } from '@app/core/security/security-store.service';
-import { injectMutation } from '@tanstack/angular-query-experimental';
+import { injectMutation, injectQuery } from '@tanstack/angular-query-experimental';
 import { BrnAlertDialogContentDirective, BrnAlertDialogTriggerDirective } from '@spartan-ng/brain/alert-dialog';
 import {
   HlmAlertDialogActionButtonDirective,
@@ -16,6 +16,9 @@ import {
   HlmAlertDialogTitleDirective
 } from '@spartan-ng/ui-alertdialog-helm';
 import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { HlmSwitchComponent } from '@spartan-ng/ui-switch-helm';
 
 @Component({
   selector: 'app-settings',
@@ -30,31 +33,18 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
     HlmAlertDialogCancelButtonDirective,
     HlmAlertDialogActionButtonDirective,
     HlmAlertDialogContentComponent,
-    HlmButtonDirective
+    HlmButtonDirective,
+    HlmLabelDirective,
+    HlmSwitchComponent,
+    ReactiveFormsModule
   ],
-  template: `
-    <div class="flex flex-col gap-4">
-      <h1 class="text-3xl font-bold">Settings</h1>
-      <hlm-alert-dialog>
-        <button id="edit-profile" variant="outline" brnAlertDialogTrigger hlmBtn>Delete Account</button>
-        <hlm-alert-dialog-content *brnAlertDialogContent="let ctx">
-          <hlm-alert-dialog-header>
-            <h3 hlmAlertDialogTitle>Are you absolutely sure?</h3>
-            <p hlmAlertDialogDescription>This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
-          </hlm-alert-dialog-header>
-          <hlm-alert-dialog-footer>
-            <button hlmAlertDialogCancel (click)="ctx.close()">Cancel</button>
-            <button hlmAlertDialogAction (click)="deleteAccount()">Delete account</button>
-          </hlm-alert-dialog-footer>
-        </hlm-alert-dialog-content>
-      </hlm-alert-dialog>
-    </div>
-  `
+  templateUrl: './settings.component.html'
 })
 export class SettingsComponent {
   router = inject(Router);
   securityStore = inject(SecurityStore);
   userService = inject(UserService);
+  _newNotificationEnabled = new FormControl(false);
 
   mutation = injectMutation(() => ({
     mutationFn: () => lastValueFrom(this.userService.deleteUser()),
@@ -67,4 +57,17 @@ export class SettingsComponent {
   deleteAccount() {
     this.mutation.mutate();
   }
+
+  settingsQuery = injectQuery(() => ({
+    queryKey: ['settings'],
+    queryFn: async () => lastValueFrom(this.userService.getUserSettings()).then((settings) => this._newNotificationEnabled.setValue(settings.receiveNotifications ?? false))
+  }));
+
+  settingsMutation = injectMutation(() => ({
+    mutationFn: (settings: UserSettings) => lastValueFrom(this.userService.updateUserSettings(settings))
+  }));
+
+  saveSettings() {
+    this.settingsMutation.mutate({ receiveNotifications: this._newNotificationEnabled.value ?? false });
+  }
 }