feat: add setup page

src/pages/setup/setup.component.ts

@@ -0,0 +1,101 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {MatSidenavModule} from "@angular/material/sidenav";
+import {Router, RouterLink, RouterOutlet} from "@angular/router";
+import {MatCard} from "@angular/material/card";
+import {MatButton} from "@angular/material/button";
+import {NavigationService} from "@service/navigation.service";
+import {catchError, Observable} from "rxjs";
+import {DataSpinnerComponent} from "@component/common/data-spinner/data-spinner.component";
+import SetupService from "@api/v1/setup.service";
+
+@Component({
+  selector: 'app-setup',
+  standalone: true,
+  imports: [
+    MatSidenavModule,
+    RouterOutlet,
+    MatCard,
+    MatButton,
+    RouterLink,
+    DataSpinnerComponent
+  ],
+  templateUrl: './setup.component.html',
+  styleUrl: './setup.component.css',
+  encapsulation: ViewEncapsulation.None,
+  providers: [SetupService]
+})
+
+export class SetupComponent {
+  protected previousButtonDisabled: boolean = false;
+  protected previousButtonRoute: string = '';
+
+  protected nextButtonDisabled: boolean = false;
+  protected nextButtonRoute!: string;
+
+  protected loaderActive: boolean = false;
+
+  protected routes: Array<string> = ['', 'welcome', 'database', 'cache', 'create-admin', 'schedule', 'logging', 'summary'];
+  private index: number = 1;
+
+  protected get getIndex() {
+    return this.index;
+  }
+
+  constructor(private router: Router, private navigationService: NavigationService, api: SetupService) {
+    api.isConfigured().subscribe(x => {
+      if (x)
+        this.router.navigate(['/']).then();
+    });
+
+    if (!this.router.url.includes(this.routes[this.index]))
+      this.router.navigate(['setup/', this.routes[this.index]]).then();
+
+    this.setRoutes();
+    this.navigationService.nextButtonState$.subscribe(state => {
+      this.nextButtonDisabled = !state;
+    });
+
+    this.navigationService.skipNavigation.subscribe(action => {
+      this.executeAction(action);
+    });
+  }
+
+  private setRoutes() {
+    this.previousButtonRoute = this.routes[this.index - 1];
+    this.nextButtonRoute = this.routes[this.index + 1];
+  }
+
+  private executeAction(action: () => Observable<boolean>) {
+    this.loaderActive = true;
+    action().pipe(
+      catchError(error => {
+        this.nextButtonDisabled = true;
+        this.loaderActive = false;
+        throw error;
+      })
+    )
+      .subscribe(x => {
+        this.nextButtonDisabled = x;
+        this.loaderActive = !x;
+        if (x) {
+          if (this.index < this.routes.length - 1) {
+            this.router.navigate(['setup/', this.nextButtonRoute]).then();
+            this.index++;
+            this.setRoutes();
+          } else
+            this.router.navigate(['/']).then();
+        }
+      });
+  }
+
+  protected onNextClick() {
+    this.executeAction(this.navigationService.nextButtonAction);
+  }
+
+  protected onPreviousClick() {
+    if (this.index - 1 > 0) {
+      this.index--;
+      this.setRoutes();
+    }
+  }
+}