From 7e7b8b6c8ffb3d8ae17b305b1e0b47d5450f984c Mon Sep 17 00:00:00 2001
From: Polianin Nikita <nikitkapolyanin@yandex.ru>
Date: Tue, 11 Jun 2024 00:24:04 +0300
Subject: [PATCH] feat: add setup page

---
 src/pages/setup/setup.component.css  |  32 +++++++++
 src/pages/setup/setup.component.html |  32 +++++++++
 src/pages/setup/setup.component.ts   | 101 +++++++++++++++++++++++++++
 3 files changed, 165 insertions(+)
 create mode 100644 src/pages/setup/setup.component.css
 create mode 100644 src/pages/setup/setup.component.html
 create mode 100644 src/pages/setup/setup.component.ts

diff --git a/src/pages/setup/setup.component.css b/src/pages/setup/setup.component.css
new file mode 100644
index 0000000..5bad19a
--- /dev/null
+++ b/src/pages/setup/setup.component.css
@@ -0,0 +1,32 @@
+.setup p {
+  letter-spacing: 0.55px;
+  font-size: 16px;
+  line-height: 26px;
+  margin: 15px 0;
+}
+
+.setup .secondary {
+  filter: brightness(0.8);
+}
+
+.setup hr {
+  margin: 10px 0;
+}
+
+.setup {
+  display: flex;
+  padding: 20px;
+  justify-content: center;
+}
+
+.setup-card {
+  padding: 15px 20px;
+  max-width: 750px;
+  width: 100%;
+}
+
+.setup-navigation {
+  display: flex;
+  justify-content: space-between;
+  margin: 15px 0;
+}
diff --git a/src/pages/setup/setup.component.html b/src/pages/setup/setup.component.html
new file mode 100644
index 0000000..a8a2a77
--- /dev/null
+++ b/src/pages/setup/setup.component.html
@@ -0,0 +1,32 @@
+<mat-sidenav-container>
+  <div class="setup">
+    <mat-card class="setup-card">
+      <router-outlet/>
+      <div class="setup-navigation">
+        <div>
+          <button mat-flat-button color="accent"
+                  [disabled]="previousButtonDisabled"
+                  [hidden]="previousButtonRoute === ''"
+                  (click)="onPreviousClick()"
+                  [routerLink]="previousButtonRoute">
+            Назад
+          </button>
+        </div>
+
+        @if (loaderActive) {
+          <app-data-spinner [scale]="40"/>
+        } @else {
+          <button mat-flat-button color="accent"
+                  [disabled]="nextButtonDisabled"
+                  (click)="onNextClick()">
+            @if (getIndex === routes.length - 1) {
+              Завершить
+            } @else {
+              Далее
+            }
+          </button>
+        }
+      </div>
+    </mat-card>
+  </div>
+</mat-sidenav-container>
diff --git a/src/pages/setup/setup.component.ts b/src/pages/setup/setup.component.ts
new file mode 100644
index 0000000..7ed644d
--- /dev/null
+++ b/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();
+    }
+  }
+}