Merge pull request #33 from Star-Academy/fix-routes

feat: Fixed routes navigation

project/src/app/app.routes.ts

@@ -3,8 +3,8 @@ import {DashboardComponent} from "./components/dashboard/dashboard.component";
 import {LoginComponent} from "./components/login/login.component";
 import {loggedInGuard} from "./guards/loggedIn/logged-in.guard";
 import {ProfileComponent} from "./components/dashboard/profile/profile.component";
-import {EditProfileComponent} from "./components/dashboard/edit-profile/edit-profile.component";
-import {ChangePasswordComponent} from "./components/dashboard/change-password/change-password.component";
+import {EditProfileComponent} from "./components/dashboard/profile/edit-profile/edit-profile.component";
+import {ChangePasswordComponent} from "./components/dashboard/profile/change-password/change-password.component";
 import {ManageUsersComponent} from "./components/dashboard/manage-users/manage-users.component";
 import {ShowDataComponent} from "./components/dashboard/show-data/show-data.component";
 import {isAdminGuard} from "./guards/admin/is-admin.guard";

project/src/app/components/dashboard/change-password/change-password.component.html → project/src/app/components/dashboard/profile/change-password/change-password.component.html

@@ -1,4 +1,5 @@
-<form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="form">
+<form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="form float-center">
+  <ng-icon name="heroXMark" class="xicon" (click)="handleClose()"></ng-icon>
   <label for="currentPassword" class="form-label">گذرواژه فعلی:</label>
   <input
     id="currentPassword"

project/src/app/components/dashboard/profile/change-password/change-password.component.scss

@@ -0,0 +1,14 @@
+@import '../../../../../variables';
+
+
+@layer components {
+  .float-center {
+    @apply absolute rounded-2xl;
+
+    inline-size: 40rem;
+    block-size: 70rem;
+
+    inset-inline-start: calc(50vw - 20rem);
+    inset-block-start: calc(50vh - 35rem);
+  }
+}

project/src/app/components/dashboard/change-password/change-password.component.ts → project/src/app/components/dashboard/profile/change-password/change-password.component.ts

@@ -1,15 +1,18 @@
 import { Component } from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {ModifyUserService} from "../../../services/modify-user/modify-user.service";
+import {ModifyUserService} from "../../../../services/modify-user/modify-user.service";
 import {Router} from "@angular/router";
 import {NgIf} from "@angular/common";
+import {NgIconComponent, provideIcons} from "@ng-icons/core";
+import { heroXMark } from '@ng-icons/heroicons/outline';
 
 @Component({
   selector: 'app-change-password',
   standalone: true,
-  imports: [ReactiveFormsModule, NgIf],
+  imports: [ReactiveFormsModule, NgIf, NgIconComponent],
   templateUrl: './change-password.component.html',
-  styleUrl: './change-password.component.scss'
+  styleUrl: './change-password.component.scss',
+  providers: [provideIcons(({heroXMark}))]
 })
 export class ChangePasswordComponent {
   formGroup = new FormGroup({
@@ -32,9 +35,13 @@ export class ChangePasswordComponent {
         newPassword: this.formGroup.value.newPassword
       }
       this.modifyService.changePassword(data);
-      this.router.navigate(['dashboard/home'])
+      this.router.navigate(['dashboard/profile'])
     } else {
       alert("مشکلی در ورودی های شما وجود دارد.")
     }
   }
+
+  handleClose(): void {
+    this.router.navigateByUrl('dashboard/profile')
+  }
 }

project/src/app/components/dashboard/edit-profile/edit-profile.component.html → project/src/app/components/dashboard/profile/edit-profile/edit-profile.component.html

@@ -1,4 +1,5 @@
-<form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="form">
+<form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="form float-center">
+  <ng-icon name="heroXMark" class="xicon" (click)="handleClose()"></ng-icon>
   <label for="firstName" class="form-label">نام:</label>
   <input
     id="firstName"

project/src/app/components/dashboard/profile/edit-profile/edit-profile.component.scss

@@ -0,0 +1,13 @@
+@import "../../../../../variables";
+
+@layer components {
+  .float-center {
+    @apply absolute rounded-2xl;
+
+    inline-size: 40rem;
+    block-size: 70rem;
+
+    inset-inline-start: calc(50vw - 20rem);
+    inset-block-start: calc(50vh - 35rem);
+  }
+}

project/src/app/components/dashboard/edit-profile/edit-profile.component.ts → project/src/app/components/dashboard/profile/edit-profile/edit-profile.component.ts

@@ -1,19 +1,23 @@
 import { Component } from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {UserService} from "../../../services/user/user.service";
-import {ModifyUserService} from "../../../services/modify-user/modify-user.service";
+import {UserService} from "../../../../services/user/user.service";
+import {ModifyUserService} from "../../../../services/modify-user/modify-user.service";
 import {Router} from "@angular/router";
 import {NgIf} from "@angular/common";
+import {NgIconComponent, provideIcons} from "@ng-icons/core";
+import { heroXMark } from '@ng-icons/heroicons/outline';
 
 @Component({
   selector: 'app-edit-profile',
   standalone: true,
   imports: [
     ReactiveFormsModule,
-    NgIf
+    NgIf,
+    NgIconComponent,
   ],
   templateUrl: './edit-profile.component.html',
-  styleUrl: './edit-profile.component.scss'
+  styleUrl: './edit-profile.component.scss',
+  providers: [provideIcons(({heroXMark}))]
 })
 export class EditProfileComponent {
   formGroup!: FormGroup;
@@ -36,9 +40,13 @@ export class EditProfileComponent {
         userName: this.formGroup.value.userName || this.userService.getUser()?.userName
       }
       this.modifyService.modifyUser(data);
-      this.router.navigate(['dashboard/home']);
+      this.router.navigate(['dashboard/profile']);
     } else {
       alert("اشکالی در ورودی های شما وجود دارد.")
     }
   }
+
+  handleClose(): void {
+    this.router.navigateByUrl('dashboard/profile')
+  }
 }

project/src/app/components/dashboard/profile/profile.component.html

@@ -2,7 +2,7 @@
   <h2 class="profile-name">
     <span>نام و نام خانوادگی:</span>
     <span>{{ user?.firstName }}</span>
-    <span>{{ user?.lastName }}</span>  
+    <span>{{ user?.lastName }}</span>
   </h2>
   <h3 class="profile-username">
     <span>
@@ -32,14 +32,15 @@ <h3 class="profile-username">
     }
   </div>
   <ul>
-    <li routerLink="change-password" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" class="navbar-item">  
+    <li routerLink="change-password" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" class="navbar-item">
       <span>عوض کردن گذرواژه</span>
     </li>
     <li routerLink="edit-profile" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" class="navbar-item">
       <span>ادیت کردن پروفایل</span>
     </li>
-    <li (click)="handleLogout()" class="navbar-item">  
+    <li (click)="handleLogout()" class="navbar-item">
       <span>خروج از حساب</span>
     </li>
   </ul>
 </div>
+<router-outlet></router-outlet>

project/src/app/components/dashboard/profile/profile.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import User from "../../../interfaces/user";
-import {RouterLink, RouterLinkActive} from "@angular/router";
+import {RouterLink, RouterLinkActive, RouterOutlet} from "@angular/router";
 import {UserService} from "../../../services/user/user.service";
 import {NgIconComponent, provideIcons} from "@ng-icons/core";
 import { heroMagnifyingGlassSolid, heroUserCircleSolid, heroCircleStackSolid } from '@ng-icons/heroicons/solid';
@@ -10,7 +10,7 @@ import { heroMagnifyingGlassSolid, heroUserCircleSolid, heroCircleStackSolid } f
   standalone: true,
   imports: [RouterLink,
     RouterLinkActive,
-    NgIconComponent ],
+    NgIconComponent, RouterOutlet],
   templateUrl: './profile.component.html',
   styleUrl: './profile.component.scss',
   providers: [provideIcons({heroUserCircleSolid, heroMagnifyingGlassSolid, heroCircleStackSolid})]

project/src/app/components/dashboard/show-data/show-data.component.scss

@@ -54,7 +54,7 @@
     }
   }
   .table-container {
-    @apply absolute p-6 justify-center items-center rounded-2xl hidden text-[1.5rem] overflow-auto;
+    @apply absolute p-6 justify-center items-center rounded-2xl hidden text-[1.5rem] overflow-auto z-20;
     background-color: $primary-color;
     color: $bg-color;
 
@@ -83,10 +83,6 @@
       border-color: $bg-color;
     }
   }
-  .xicon {
-    @apply absolute w-[4rem] h-[4rem] top-0 right-0;
-    color: $bg-color;
-  }
   .form-search-user {
     @apply text-[2rem] self-center border rounded-2xl transition-all duration-300 ease-in-out p-4 flex flex-row
       gap-4 items-center;
@@ -101,7 +97,7 @@
     background-color: $secondary-color;
   }
   .showUserContainer {
-    @apply hidden flex-row justify-center items-center absolute text-[2rem] rounded-2xl;
+    @apply hidden flex-row justify-center items-center absolute text-[2rem] rounded-2xl z-30;
     background-color: $primary-color;
     color: $bg-color;
 

project/src/variables.scss

@@ -9,12 +9,16 @@ $bg-color: #FDFDFD;
 $primary-color: #002B5B;
 $text-color : #172535;
 $secondary-color: #4F86C9;
-$success-color: #4FBD70; 
+$success-color: #4FBD70;
 $accent-color: #E9B91B;
 $error-color: #F05A7E;
 
 // Base classes
 @layer components {
+  .xicon {
+    @apply absolute w-[4rem] h-[4rem] top-0 right-0;
+    color: $bg-color;
+  }
   .fullscreen {
     @apply flex flex-row justify-center items-center min-h-screen relative;