Initial Implementation of Help and My Profile Popup

2023-08-26 05:48:08 -03:00
parent 1328ca7c4c
commit bd8719654c
18 changed files with 550 additions and 51 deletions
--- a/src/app/header/header-popup/my-profile/my-profile.component.ts
+++ b/src/app/header/header-popup/my-profile/my-profile.component.ts
@@ -0,0 +1,162 @@
+import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {AuthService} from "../../../shared/auth/auth.service";
+import {User} from "../../../shared/model/user/user.model";
+import {animate, animateChild, group, query, state, style, transition, trigger} from "@angular/animations";
+import {MatIconRegistry} from "@angular/material/icon";
+import {DomSanitizer} from "@angular/platform-browser";
+import {FormControl, FormGroup, Validators} from "@angular/forms";
+import {ValidateNotEmptyValidator} from "../../../shared/validators/validate-not-empty.validator";
+import {ValidatePasswordValidator} from "../../../shared/validators/validate-password.validator";
+import {first, take} from "rxjs";
+import UserChecker from "../../../shared/model/user/user.checker";
+import HttpErrorChecker from "../../../shared/model/httpError/httpErrorChecker";
+import {HttpError} from "../../../shared/model/httpError/httpError.model";
+
+
+@Component({
+    selector: 'app-my-profile',
+    templateUrl: './my-profile.component.html',
+    styleUrls: ['./my-profile.component.css'],
+    animations: [
+        trigger('resizeContainerForErrorMessage', [
+            state('hide',
+                style({
+                    height: '100px',
+                    width: '320px',
+                })
+            ),
+            transition(
+                'show => hide',
+                group([
+                    query(
+                        "@*",
+                        animateChild(),
+                        { optional: true }
+                    ),
+                    animate('1s ease')
+                ])
+            )
+        ]),
+        trigger('showErrorMessage', [
+            state('show',
+                style({
+                    opacity: 1,
+                    height: '100px',
+                    width: '320px',
+                })
+            ),
+            state('hide',
+                style({
+                    opacity: 0,
+                    height: '0px',
+                    width: '0px',
+                })
+            ),
+            transition(
+                '* => show',
+                animate(
+                    '500ms ease-in'
+                )
+            ),
+        ]),
+        trigger('hideAuthContainer', [
+            state('hide',
+                style({
+                    opacity: 0,
+                })
+            ),
+            transition(
+                'show => hide',
+                group([
+                    query(
+                        "@*",
+                        animateChild(),
+                        { optional: true }
+                    ),
+                    animate(
+                        '250ms ease-out'
+                    )
+                ])
+            )
+        ]),
+    ]
+})
+export class MyProfileComponent implements OnInit {
+
+    @Input()
+        state: boolean = false;
+
+    @Input()
+        user!: User | null;
+
+    @Input()
+        ignoreClickOutside!: HTMLDivElement[];
+
+    @Output()
+        stateChange = new EventEmitter<boolean>();
+
+    alterForm!: FormGroup;
+
+    errorMessage!: string | null;
+
+    isShowErrorMessage = false;
+
+    constructor(private authService: AuthService) {
+    }
+
+    ngOnInit(): void {
+        this.alterForm = new FormGroup({
+            'username': new FormControl(null, [Validators.required, ValidateNotEmptyValidator]),
+            'password': new FormControl(null, [Validators.required, ValidatePasswordValidator])
+        });
+        this.errorMessage = null;
+    }
+
+    onStateChange(state: boolean) {
+        this.stateChange.emit(state);
+    }
+
+    public showErrorMessage(): string {
+        if (this.isShowErrorMessage) {
+            return "show";
+        }
+        return "hide";
+    }
+
+    public hideErrorMessage(): string {
+        if (!!this.errorMessage) {
+            return "hide";
+        }
+        return "show";
+    }
+
+    public onDeleteAccount() {
+        this.authService.deleteAccount().subscribe({
+            next: (res) => {
+                if (res && UserChecker.test(res)) {
+                    this.closePopup()
+                } if (HttpErrorChecker.test(res)) {
+                    this.errorMessage = (<HttpError>res).details;
+                }
+            }
+        })
+        // this.authService.logout()
+        // this.onStateChange(false);
+    }
+
+    public onAddProfilePicture() {
+        this.authService.addProfilePicture()
+    }
+
+    hideAuthContainer(event: any) {
+        if (event.toState === "hide") {
+            event.element.style.display = "none";
+            this.isShowErrorMessage = true;
+        }
+    }
+
+    private closePopup() {
+        this.onStateChange(false);
+    }
+
+}