From ef61ee337d47521c750a415b9c63ed562621363b Mon Sep 17 00:00:00 2001
From: develite98 <phongcao3091998@gmail.com>
Date: Thu, 7 Dec 2023 01:22:33 +0700
Subject: [PATCH] feat(): add user profile

---
 .../main-side-menu.component.ts               |  2 +-
 .../user-navigation.component.html            |  2 +-
 .../user-navigation.component.ts              | 11 +++
 .../user-profile-dialof.component.html        | 77 +++++++++++++++++++
 .../user-profile-dialof.component.scss        |  8 ++
 .../user-profile-dialof.component.ts          | 18 +++++
 6 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.html
 create mode 100644 libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.scss
 create mode 100644 libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.ts

diff --git a/libs/mix-share/src/components/main-side-menu/main-side-menu.component.ts b/libs/mix-share/src/components/main-side-menu/main-side-menu.component.ts
index 2ddcdbce..a196344b 100644
--- a/libs/mix-share/src/components/main-side-menu/main-side-menu.component.ts
+++ b/libs/mix-share/src/components/main-side-menu/main-side-menu.component.ts
@@ -97,7 +97,7 @@ export class MainSideMenuComponent {
   public showSetting() {
     this.dialogService.open(SettingDialogComponent, {
       width: 'fit-content',
-      id: 'setting-pannel',
+      id: 'top-align-modal',
     });
   }
 }
diff --git a/libs/mix-share/src/components/main-toolbar/user-navigation/user-navigation.component.html b/libs/mix-share/src/components/main-toolbar/user-navigation/user-navigation.component.html
index 07272330..f40352c1 100644
--- a/libs/mix-share/src/components/main-toolbar/user-navigation/user-navigation.component.html
+++ b/libs/mix-share/src/components/main-toolbar/user-navigation/user-navigation.component.html
@@ -37,7 +37,7 @@
 
   <div class="main-menu">
     <div class="mix-menu-item"
-         (click)="hide()">
+         (click)="hide(); userProfile()">
       <span class="mix-icon me-3">manage_accounts</span> {{ 'Managed Account' }}
     </div>
 
diff --git a/libs/mix-share/src/components/main-toolbar/user-navigation/user-navigation.component.ts b/libs/mix-share/src/components/main-toolbar/user-navigation/user-navigation.component.ts
index d0bc3a0d..a2bafed4 100644
--- a/libs/mix-share/src/components/main-toolbar/user-navigation/user-navigation.component.ts
+++ b/libs/mix-share/src/components/main-toolbar/user-navigation/user-navigation.component.ts
@@ -10,9 +10,11 @@ import { Router } from '@angular/router';
 import { UserListVm } from '@mixcore/lib/model';
 import { AuthService } from '@mixcore/share/auth';
 import { ModalService } from '@mixcore/ui/modal';
+import { DialogService } from '@ngneat/dialog';
 import { TippyDirective } from '@ngneat/helipopper';
 import { TuiBadgeModule } from '@taiga-ui/kit';
 import { UserAvatarComponent } from '../../user-avatar/user-avatar.component';
+import { UserProfileDialofComponent } from '../../user-profile-dialof/user-profile-dialof.component';
 import { ApplicationListComponent } from '../application-list/application-list.component';
 
 @Component({
@@ -35,6 +37,7 @@ export class UserNavigationComponent {
   public modal = inject(ModalService);
   public router = inject(Router);
   public userInfo?: UserListVm;
+  public dialog = inject(DialogService);
 
   constructor() {
     this.authService.user$.pipe(takeUntilDestroyed()).subscribe((v) => {
@@ -55,4 +58,12 @@ export class UserNavigationComponent {
       });
     });
   }
+
+  public userProfile(): void {
+    this.dialog.open(UserProfileDialofComponent, {
+      windowClass: UserProfileDialofComponent.windowClass,
+      width: '80vw',
+      height: '80vh',
+    });
+  }
 }
diff --git a/libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.html b/libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.html
new file mode 100644
index 00000000..ee5c4ea1
--- /dev/null
+++ b/libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.html
@@ -0,0 +1,77 @@
+<div class="mix-dialog h-100">
+  <div class="container-fluid h-100">
+    <div class="row h-100">
+      <div class="col-md-3 border-right"
+           style="background-color: #071a2b; color: #fff">
+        <div class="d-flex flex-column align-items-center text-center p-3 py-5">
+          <img class="rounded-circle mt-5"
+               src="https://st3.depositphotos.com/15648834/17930/v/600/depositphotos_179308454-stock-illustration-unknown-person-silhouette-glasses-profile.jpg"
+               width="150px"
+               height="150px">
+          <span class="font-weight-bold text-l mt-2">Mr. User Name</span>
+        </div>
+      </div>
+
+      <div class="col-md-5 p-4 pb-2 border-right">
+        <div class="p-3 d-flex flex-column h-100">
+          <div class="d-flex justify-content-between align-items-center mb-3">
+            <h4 class="text-right">Profile Settings</h4>
+          </div>
+          <div class="row mt-2">
+            <div class="col-md-6">
+              <label class="text-sub text-500 mb-1">Name</label>
+              <mix-input placeHolder="first name"></mix-input>
+            </div>
+            <div class="col-md-6">
+              <label class="text-sub text-500 mb-1">Surname</label>
+              <mix-input placeHolder="sur name"></mix-input>
+            </div>
+            <div class="col-md-12 mt-3">
+              <label class="text-sub text-500 mb-1">Mobile Number</label>
+              <mix-input placeHolder="enter phone number"></mix-input>
+            </div>
+            <div class="col-md-12 mt-3">
+              <label class="text-sub text-500 mb-1">Email ID</label>
+              <mix-input placeHolder="enter email id"></mix-input>
+            </div>
+            <div class="col-md-12 mt-3">
+              <label class="text-sub text-500 mb-1">Education</label>
+              <mix-input placeHolder="education"></mix-input>
+            </div>
+            <div class="col-md-6 mt-3">
+              <label class="text-sub text-500 mb-1">Country</label>
+              <mix-input placeHolder="country"
+                         value> </mix-input>
+            </div>
+            <div class="col-md-6 mt-3">
+              <label class="text-sub text-500 mb-1">State/Region</label>
+              <mix-input placeHolder="state"
+                         value> </mix-input>
+            </div>
+          </div>
+          <div class="mt-auto d-flex gap-2 justify-content-end">
+            <mix-button type="outline"
+                        (click)="dialogRef.close()">
+              Cancel
+            </mix-button>
+
+            <mix-button (click)="dialogRef.close()"> Save Profile </mix-button>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-4 p-4">
+        <div class="p-3 pt-5">
+          <div class="col-md-12">
+            <label class="text-sub text-500 mb-1">Experience in Designing</label>
+            <mix-input placeHolder="experience"> </mix-input>
+          </div>
+          <br>
+          <div class="col-md-12">
+            <label class="text-sub text-500 mb-1">Additional Details</label>
+            <mix-input placeHolder="additional details"> </mix-input>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.scss b/libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.scss
new file mode 100644
index 00000000..5e80dd6f
--- /dev/null
+++ b/libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.scss
@@ -0,0 +1,8 @@
+.border-right {
+  border-right: 1px solid var(--border-color-default);
+}
+
+:host {
+  display: block;
+  height: 100%;
+}
diff --git a/libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.ts b/libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.ts
new file mode 100644
index 00000000..596cef0d
--- /dev/null
+++ b/libs/mix-share/src/components/user-profile-dialof/user-profile-dialof.component.ts
@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MixButtonComponent } from '@mixcore/ui/button';
+import { MixInputComponent } from '@mixcore/ui/input';
+import { DialogRef } from '@ngneat/dialog';
+
+@Component({
+  selector: 'user-profile-dialof',
+  standalone: true,
+  imports: [CommonModule, MixInputComponent, MixButtonComponent],
+  templateUrl: './user-profile-dialof.component.html',
+  styleUrl: './user-profile-dialof.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserProfileDialofComponent {
+  public static windowClass = 'top-align-modal';
+  public dialogRef = inject(DialogRef);
+}