enhance admin page

cisco-open · Aug 15, 2024 · 7b0a574 · 7b0a574
1 parent 6c1d95c
commit 7b0a574
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/frontend/src/app/modules/admin/components/admin/admin.component.html b/frontend/src/app/modules/admin/components/admin/admin.component.html
@@ -32,7 +32,7 @@
 				<mat-icon
 					fontSet="ms"
 					fontIcon="icon-Info"
-					matTooltip="Allows users to choose the default startup mode for the app, determining how it will open each time. Users can select their preferred interface or workflow, ensuring the app starts in the most convenient way for their needs.">
+					matTooltip="Allows users to choose the default startup mode for the app.">
 				</mat-icon>
 			</div>
 
@@ -43,9 +43,9 @@
 			<mat-divider></mat-divider>
 		</div>
 
-		<mat-button-toggle-group class="mode-toggle-group">
-			<mat-button-toggle value="guided">Guided</mat-button-toggle>
-			<mat-button-toggle value="expert">Expert</mat-button-toggle>
+		<mat-button-toggle-group [formControl]="selectedModeControl" class="mode-toggle-group">
+			<mat-button-toggle [value]="AppModes.GUIDED">Guided</mat-button-toggle>
+			<mat-button-toggle [value]="AppModes.EXPERT">Expert</mat-button-toggle>
 		</mat-button-toggle-group>
 	</mat-card>
 </div>
diff --git a/frontend/src/app/modules/admin/components/admin/admin.component.ts b/frontend/src/app/modules/admin/components/admin/admin.component.ts
@@ -14,13 +14,48 @@
 
 //   SPDX-License-Identifier: Apache-2.0
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { take } from 'rxjs';
+import { ConfigActions } from '../../../../state/core/configs';
+import { AppModes } from '../../../core/models/enums/app-modes.enum';
+import { ConfigsFacadeService } from '../../../core/services';
+import { isNilOrEmptyString } from '../../../shared/shared.utils';
 
+@UntilDestroy()
 @Component({
 	selector: 'ms-admin',
 	templateUrl: './admin.component.html',
 	styleUrl: './admin.component.scss'
 })
-export class AdminComponent {
-	defaultSelectedMode?: string;
+export class AdminComponent implements OnInit {
+	selectedModeControl = new FormControl('');
+	readonly AppModes: typeof AppModes = AppModes;
+
+	constructor(private configsFacadeService: ConfigsFacadeService) {}
+
+	ngOnInit() {
+		this.loadDefaultValue();
+		this.listenToModeChanges();
+	}
+
+	private listenToModeChanges(): void {
+		this.selectedModeControl.valueChanges.pipe(untilDestroyed(this)).subscribe((mode) => {
+			if (isNilOrEmptyString(mode)) {
+				return;
+			}
+
+			this.configsFacadeService.dispatch(ConfigActions.setDefaultMode({ mode: mode as AppModes }));
+		});
+	}
+
+	private loadDefaultValue(): void {
+		this.configsFacadeService.defaultMode$.pipe(take(1)).subscribe((defaultMode) => {
+			if (isNilOrEmptyString(defaultMode)) {
+				return;
+			}
+			this.selectedModeControl.setValue(defaultMode!);
+		});
+	}
 }
diff --git a/frontend/src/app/modules/mode-select/components/mode-select/mode-select.component.ts b/frontend/src/app/modules/mode-select/components/mode-select/mode-select.component.ts
@@ -33,14 +33,14 @@ export class ModeSelectComponent {
 
 	constructor(
 		public authFacadeService: AuthFacadeService,
-		private configFacadeService: ConfigsFacadeService,
+		private configsFacadeService: ConfigsFacadeService,
 		private router: Router
 	) {}
 
 	setModeAndNavigate(mode?: AppModes) {
 		const selectedMode = this.defaultModeCheckbox.checked ? mode : undefined;
-		this.configFacadeService.dispatch(ConfigActions.setDefaultMode({ mode: selectedMode }));
-		this.configFacadeService.dispatch(ConfigActions.setCurrentMode({ mode: selectedMode }));
+		this.configsFacadeService.dispatch(ConfigActions.setDefaultMode({ mode: selectedMode }));
+		this.configsFacadeService.dispatch(ConfigActions.setCurrentMode({ mode: selectedMode }));
 	}
 
 	goToExpertMode() {