Merge pull request #34 from Star-Academy/new-features

New features

project/angular.json

@@ -32,7 +32,8 @@
               }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/ngx-toastr/toastr.css"
             ],
             "scripts": [],
             "server": "src/main.server.ts",

project/package.json

@@ -27,6 +27,7 @@
     "d3": "^7.9.0",
     "express": "^4.18.2",
     "jalaali-js": "^1.2.7",
+    "ngx-toastr": "^19.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -37,6 +38,8 @@
     "@angular/compiler-cli": "^18.1.0",
     "@ng-icons/core": "^29.3.0",
     "@ng-icons/heroicons": "^29.3.0",
+    "@testing-library/angular": "^17.3.1",
+    "@testing-library/dom": "^10.4.0",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",

project/src/app/app.component.spec.ts

@@ -1,5 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
+import { render, screen } from '@testing-library/angular';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
@@ -14,16 +15,15 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have the 'project' title`, () => {
+  it(`should have the 'کد استار' title`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('project');
+    expect(app.title).toEqual('کد استار');
   });
 
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, project');
-  });
+  it('Should render a main tag when ever', async () => {
+    await render(AppComponent);
+    const mainTag = screen.getByRole('main');
+    expect(mainTag).toBeTruthy();
+  })
 });

project/src/app/app.component.ts

@@ -9,5 +9,5 @@ import { RouterOutlet } from '@angular/router';
   styleUrl: './app.component.scss',
 })
 export class AppComponent {
-  title = 'project';
+  title = 'کد استار';
 }

project/src/app/app.config.ts

@@ -4,13 +4,19 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 import { provideClientHydration } from '@angular/platform-browser';
 import {provideHttpClient, withFetch} from "@angular/common/http";
+import {provideAnimations} from "@angular/platform-browser/animations";
+import {provideToastr} from "ngx-toastr";
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideClientHydration(),
-    provideHttpClient(withFetch())],
+    provideHttpClient(withFetch()),
+    provideAnimations(),
+    provideToastr()
+  ],
 };
 
-export const API_BASE_URL: string = 'https://mybackend.abriment.com/';
+export const API_BASE_URL = 'http://external.abriment.com:30080/';
+

project/src/app/app.routes.ts

@@ -1,25 +1,18 @@
 import { Routes } from '@angular/router';
-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/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";
-import { DashboardhomeComponent } from './components/dashboard/dashboardhome/dashboardhome.component';
 
 export const routes: Routes = [
-  {path: 'dashboard', component: DashboardComponent, children: [
-      {path: 'home', component: DashboardhomeComponent},
-      {path: 'profile', component: ProfileComponent , children: [
-        {path: 'edit-profile', component: EditProfileComponent},
-        {path: 'change-password', component: ChangePasswordComponent},
+  {path: 'dashboard', loadComponent: () => import('./components/dashboard/dashboard.component').then(m => m.DashboardComponent), children: [
+      {path: 'home', loadComponent: () => import('./components/dashboard/dashboardhome/dashboardhome.component').then(m => m.DashboardhomeComponent)},
+      {path: 'profile', loadComponent: () => import('./components/dashboard/profile/profile.component').then(m => m.ProfileComponent) , children: [
+        {path: 'main', loadComponent: () => import('./components/dashboard/profile-show/profile-show.component').then(m => m.ProfileShowComponent)},
+        {path: 'edit-profile', loadComponent: () => import('./components/dashboard/profile/edit-profile/edit-profile.component').then(m => m.EditProfileComponent)},
+        {path: 'change-password', loadComponent: () => import('./components/dashboard/profile/change-password/change-password.component').then(m => m.ChangePasswordComponent)},
       ]},
-      {path: 'manage-users', component: ManageUsersComponent, canActivate: [isAdminGuard]},
-      {path: 'show-data', component: ShowDataComponent},
+      {path: 'manage-users', loadComponent: () => import('./components/dashboard/manage-users/manage-users.component').then(m => m.ManageUsersComponent), canActivate: [isAdminGuard]},
+      {path: 'show-data', loadComponent: () => import('./components/dashboard/show-data/show-data.component').then(m => m.ShowDataComponent)},
     ], canActivate: [loggedInGuard], data: { requiresAuth: true } },
-  {path: 'login', component: LoginComponent, canActivate: [loggedInGuard], data: { requiresAuth: false }},
+  {path: 'login', loadComponent: () => import('./components/login/login.component').then(m => m.LoginComponent), canActivate: [loggedInGuard], data: { requiresAuth: false }},
   {path: '**', redirectTo: 'dashboard'}
 ];

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

@@ -0,0 +1,28 @@
+@import "../../../../variables";
+@layer components {
+    .edit-label{
+        @apply text-[1.6rem] font-medium ;
+        color: $bg-color;
+
+    }
+   .edit-input {
+        @apply mb-5 mt-2 block w-full px-3 py-[0.7rem] rounded-2xl text-[2rem];
+        color: $text-color;
+    }
+    .edit-error{
+        @apply text-[1.6rem] ;
+        color: $error-color;
+    }
+
+    .edit-btn{
+        @apply w-full text-white py-3 px-4 rounded-2xl text-[2rem] ;
+        margin-top : 15px !important;
+        color: $secondary-color;
+        border: 3px solid $secondary-color;
+        transition-duration: 0.3s;
+    &:hover {
+        color: $bg-color;
+        background: $secondary-color;
+      }
+    }
+}

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

@@ -1,16 +1,8 @@
 <div class="fullscreen flex w-screen h-screen ">
-  <!-- <div #navbarIcon>
-    <ng-icon (click)="handleShowNavbar()" name="heroBars3" class="dashboard-navbar-icon"></ng-icon>
-  </div>
-  <nav #navbar class="dashboard-navbar hidden">
-    <ng-icon (click)="handleCloseNavbar()" name="heroArrowUturnRight" class="dashboard-navbar-back-icon"></ng-icon>
-    <app-navbar></app-navbar>
-  </nav>
--->
   <app-navbar class="w-[17vw] flex h-full"></app-navbar>
-  
-  <section #content class="dashboard-content w-[83vw]">
+
+  <section class="dashboard-content w-[83vw]">
     <router-outlet></router-outlet>
   </section>
-</div> 
+</div>