profile

src/app/modules/components/header/header.component.html

@@ -34,7 +34,7 @@
     <mat-menu #menu="matMenu">
       <button mat-menu-item>
         <mat-icon>dialpad</mat-icon>
-        <span>Redial</span>
+        <span [routerLink]="['./profile']">Profile</span>
       </button>
       <button mat-menu-item>
         <mat-icon>notifications_off</mat-icon>

src/app/modules/modules-routing.module.ts

@@ -13,6 +13,11 @@ const routes: Routes = [
           import('./dashboard/dashboard.module').then((m) => m.DashboardModule),
       },
       {
+        path: 'profile',
+        loadChildren: () =>
+          import('./profile/profile.module').then((m) => m.ProfileModule),
+      },
+      {
         path: '',
         redirectTo: 'dashboard',
         pathMatch: 'full',

src/app/modules/profile/address/address.component.html

@@ -0,0 +1 @@
+<p>address works!</p>

src/app/modules/profile/address/address.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddressComponent } from './address.component';
+
+describe('AddressComponent', () => {
+  let component: AddressComponent;
+  let fixture: ComponentFixture<AddressComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AddressComponent]
+    });
+    fixture = TestBed.createComponent(AddressComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/profile/address/address.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-address',
+  templateUrl: './address.component.html',
+  styleUrls: ['./address.component.scss']
+})
+export class AddressComponent {
+
+}

src/app/modules/profile/attachements/attachements.component.html

@@ -0,0 +1 @@
+<p>attachements works!</p>

src/app/modules/profile/attachements/attachements.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AttachementsComponent } from './attachements.component';
+
+describe('AttachementsComponent', () => {
+  let component: AttachementsComponent;
+  let fixture: ComponentFixture<AttachementsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AttachementsComponent]
+    });
+    fixture = TestBed.createComponent(AttachementsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/profile/attachements/attachements.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-attachements',
+  templateUrl: './attachements.component.html',
+  styleUrls: ['./attachements.component.scss']
+})
+export class AttachementsComponent {
+
+}

src/app/modules/profile/basic-information/basic-information.component.html

@@ -0,0 +1 @@
+<p>basic-information works!</p>

src/app/modules/profile/basic-information/basic-information.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BasicInformationComponent } from './basic-information.component';
+
+describe('BasicInformationComponent', () => {
+  let component: BasicInformationComponent;
+  let fixture: ComponentFixture<BasicInformationComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BasicInformationComponent]
+    });
+    fixture = TestBed.createComponent(BasicInformationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/profile/basic-information/basic-information.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-basic-information',
+  templateUrl: './basic-information.component.html',
+  styleUrls: ['./basic-information.component.scss']
+})
+export class BasicInformationComponent {
+
+}

src/app/modules/profile/components/profile-menu/profile-menu.component.html

@@ -0,0 +1,32 @@
+<section class="profile-menu">
+  <ul fxLayout="column" fxLayoutAlign="start start">
+    <li
+      [routerLink]="['/modules/profile']"
+      routerLinkActive="active"
+      [routerLinkActiveOptions]="{ exact: true }"
+    >
+      Basic Information
+    </li>
+    <li [routerLink]="['/modules/profile/education']" routerLinkActive="active">
+      Education & Qualifications
+    </li>
+    <li [routerLink]="['/modules/profile/address']" routerLinkActive="active">
+      Address
+    </li>
+    <li
+      [routerLink]="['/modules/profile/attachements']"
+      routerLinkActive="active"
+    >
+      Attachments
+    </li>
+    <li
+      [routerLink]="['/modules/profile/terms-conditions']"
+      routerLinkActive="active"
+    >
+      Terms & Conditions
+    </li>
+    <li [routerLink]="['/modules/profile/security']" routerLinkActive="active">
+      Security
+    </li>
+  </ul>
+</section>

src/app/modules/profile/components/profile-menu/profile-menu.component.scss

@@ -0,0 +1,3 @@
+.active {
+  background-color: #2f2c8326;
+}

src/app/modules/profile/components/profile-menu/profile-menu.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileMenuComponent } from './profile-menu.component';
+
+describe('ProfileMenuComponent', () => {
+  let component: ProfileMenuComponent;
+  let fixture: ComponentFixture<ProfileMenuComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProfileMenuComponent]
+    });
+    fixture = TestBed.createComponent(ProfileMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/profile/components/profile-menu/profile-menu.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-profile-menu',
+  templateUrl: './profile-menu.component.html',
+  styleUrls: ['./profile-menu.component.scss'],
+})
+export class ProfileMenuComponent {}

src/app/modules/profile/components/profile-user/profile-user.component.html

@@ -0,0 +1,45 @@
+<section
+  class="profile-user"
+  fxLayout="row"
+  fxLayoutAlign="space-between center"
+>
+  <div fxLayout="row" fxLayoutAlign="start center" class="gap-20">
+    <img src="../../../../../assets/images/tool_1.png" alt="" title="" />
+
+    <div
+      *ngIf="!showEdit; else form"
+      fxLayout="row"
+      fxLayoutAlign="start center"
+      class="gap-10"
+    >
+      <div>
+        <p>George Tarielashvili</p>
+        <span>Senior UI/UX Designer</span>
+      </div>
+    </div>
+  </div>
+  <div class="profile-user__actions">
+    <button (click)="onEdit()" *ngIf="!showEdit">Edit</button>
+    <div
+      *ngIf="showEdit"
+      fxLayout="column"
+      fxLayoutAlign="start end"
+      class="gap-10"
+    >
+      <button class="save-changes" (click)="onSubmit()">Save Changes</button>
+      <button class="cancel" (click)="showEdit = false">Cancel</button>
+    </div>
+  </div>
+</section>
+
+<ng-template #form>
+  <div
+    class="gap-20"
+    fxLayout="column"
+    fxLayoutAlign="center start"
+    *ngIf="showEdit"
+  >
+    <input class="input" type="text" value="George Tarielashvili" />
+    <input class="input" type="text" value="Senior UI/UX Designer" />
+  </div>
+</ng-template>

src/app/modules/profile/components/profile-user/profile-user.component.scss

@@ -0,0 +1,14 @@
+.save-changes {
+  background-color: #28abe3 !important;
+  color: #fff !important;
+  box-shadow: -2px 6px 9px #2f2c8333 !important;
+  width: 170px;
+}
+
+.cancel {
+  box-shadow: -2px 6px 9px #2f2c8333 !important;
+  background-color: #fff !important;
+  color: #28abe3 !important;
+  border: 1px solid #28abe3 !important;
+  width: 170px;
+}

src/app/modules/profile/components/profile-user/profile-user.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileUserComponent } from './profile-user.component';
+
+describe('ProfileUserComponent', () => {
+  let component: ProfileUserComponent;
+  let fixture: ComponentFixture<ProfileUserComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProfileUserComponent]
+    });
+    fixture = TestBed.createComponent(ProfileUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/profile/components/profile-user/profile-user.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-profile-user',
+  templateUrl: './profile-user.component.html',
+  styleUrls: ['./profile-user.component.scss'],
+})
+export class ProfileUserComponent {
+  showEdit: boolean = false;
+
+  onEdit(): void {
+    this.showEdit = true;
+  }
+
+  onSubmit(): void {
+    this.showEdit = false;
+  }
+}

src/app/modules/profile/education-qualification/education-qualification.component.html

@@ -0,0 +1 @@
+<p>education-qualification works!</p>

src/app/modules/profile/education-qualification/education-qualification.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EducationQualificationComponent } from './education-qualification.component';
+
+describe('EducationQualificationComponent', () => {
+  let component: EducationQualificationComponent;
+  let fixture: ComponentFixture<EducationQualificationComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [EducationQualificationComponent]
+    });
+    fixture = TestBed.createComponent(EducationQualificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/profile/education-qualification/education-qualification.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-education-qualification',
+  templateUrl: './education-qualification.component.html',
+  styleUrls: ['./education-qualification.component.scss']
+})
+export class EducationQualificationComponent {
+
+}

src/app/modules/profile/profile-routing.module.ts

@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ProfileComponent } from './profile.component';
+import { BasicInformationComponent } from './basic-information/basic-information.component';
+import { EducationQualificationComponent } from './education-qualification/education-qualification.component';
+import { AddressComponent } from './address/address.component';
+import { AttachementsComponent } from './attachements/attachements.component';
+import { TermsConditionsComponent } from './terms-conditions/terms-conditions.component';
+import { SecurityComponent } from './security/security.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProfileComponent,
+    children: [
+      { path: '', component: BasicInformationComponent },
+      {
+        path: 'education',
+        component: EducationQualificationComponent,
+      },
+      {
+        path: 'address',
+        component: AddressComponent,
+      },
+      {
+        path: 'attachements',
+        component: AttachementsComponent,
+      },
+      {
+        path: 'terms-conditions',
+        component: TermsConditionsComponent,
+      },
+      {
+        path: 'security',
+        component: SecurityComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ProfileRoutingModule {}

src/app/modules/profile/profile-theme.scss

@@ -0,0 +1,72 @@
+@mixin profile-theme() {
+  app-profile {
+    .profile {
+      height: 100%;
+      gap: 20px;
+      .profile-menu {
+        height: 80%;
+        background-color: $off-white;
+        margin: 2rem 0;
+        box-shadow: -2px 6px 9px #2f2c8333;
+        border-radius: 18px;
+      }
+
+      &__content {
+        height: 80%;
+        margin: 2rem 0;
+        border-radius: 18px;
+      }
+      .profile-menu {
+        ul {
+          padding: 20px;
+          list-style: none;
+          gap: 20px;
+          li {
+            padding: 10px;
+            border-radius: 20px;
+            color: $main-color;
+            cursor: pointer;
+          }
+        }
+      }
+
+      .profile-user {
+        background-color: $off-white;
+        margin-bottom: 20px;
+        padding: 20px;
+        border-radius: 18px;
+        img {
+          width: 100px;
+          height: 100px;
+          border-radius: 50%;
+        }
+        div {
+          p {
+            font-size: 18px;
+            color: $black-color;
+            margin-bottom: 5px;
+          }
+
+          span {
+            font-size: 14px;
+            color: $black-color;
+          }
+        }
+
+        &__actions {
+          button {
+            color: $main-color;
+            background-color: #2f2c8326;
+            box-shadow: -2px 6px 9px #2f2c8333;
+            border-radius: 18px;
+            padding: 10px 30px;
+            border: none;
+            font-size: 16px;
+            font-weight: 700;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

src/app/modules/profile/profile.component.html

@@ -0,0 +1,17 @@
+<section class="profile" fxLayout="row" fxLayoutAlign="start stretch">
+  <app-profile-menu
+    fxFlex.sm="100"
+    fxFlex.xs="100"
+    fxFlex.gt-sm="30"
+  ></app-profile-menu>
+
+  <div
+    class="profile__content"
+    fxFlex.sm="100"
+    fxFlex.xs="100"
+    fxFlex.gt-sm="70"
+  >
+    <app-profile-user></app-profile-user>
+    <router-outlet></router-outlet>
+  </div>
+</section>

src/app/modules/profile/profile.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProfileComponent]
+    });
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/profile/profile.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.scss']
+})
+export class ProfileComponent {
+
+}

src/app/modules/profile/profile.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ProfileRoutingModule } from './profile-routing.module';
+import { ProfileComponent } from './profile.component';
+import { ProfileMenuComponent } from './components/profile-menu/profile-menu.component';
+import { ProfileUserComponent } from './components/profile-user/profile-user.component';
+import { SharedModule } from '@shared/shared.module';
+import { BasicInformationComponent } from './basic-information/basic-information.component';
+import { EducationQualificationComponent } from './education-qualification/education-qualification.component';
+import { AddressComponent } from './address/address.component';
+import { AttachementsComponent } from './attachements/attachements.component';
+import { TermsConditionsComponent } from './terms-conditions/terms-conditions.component';
+import { SecurityComponent } from './security/security.component';
+
+@NgModule({
+  declarations: [
+    ProfileComponent,
+    ProfileMenuComponent,
+    ProfileUserComponent,
+    BasicInformationComponent,
+    EducationQualificationComponent,
+    AddressComponent,
+    AttachementsComponent,
+    TermsConditionsComponent,
+    SecurityComponent,
+  ],
+  imports: [CommonModule, ProfileRoutingModule, SharedModule],
+})
+export class ProfileModule {}

src/app/modules/profile/security/security.component.html

@@ -0,0 +1 @@
+<p>security works!</p>

src/app/modules/profile/security/security.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SecurityComponent } from './security.component';
+
+describe('SecurityComponent', () => {
+  let component: SecurityComponent;
+  let fixture: ComponentFixture<SecurityComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SecurityComponent]
+    });
+    fixture = TestBed.createComponent(SecurityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/profile/security/security.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-security',
+  templateUrl: './security.component.html',
+  styleUrls: ['./security.component.scss']
+})
+export class SecurityComponent {
+
+}

src/app/modules/profile/terms-conditions/terms-conditions.component.html

@@ -0,0 +1 @@
+<p>terms-conditions works!</p>

src/app/modules/profile/terms-conditions/terms-conditions.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TermsConditionsComponent } from './terms-conditions.component';
+
+describe('TermsConditionsComponent', () => {
+  let component: TermsConditionsComponent;
+  let fixture: ComponentFixture<TermsConditionsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TermsConditionsComponent]
+    });
+    fixture = TestBed.createComponent(TermsConditionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/profile/terms-conditions/terms-conditions.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-terms-conditions',
+  templateUrl: './terms-conditions.component.html',
+  styleUrls: ['./terms-conditions.component.scss']
+})
+export class TermsConditionsComponent {
+
+}

src/assets/scss/spineer.scss

@@ -23,3 +23,14 @@
 .center {
   text-align: center;
 }
+
+.input {
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid $main-color;
+  background-color: $white-color;
+  box-shadow: 0px 5px 6px #2f2c8324;
+  background-color: $white-color;
+  outline: none;
+  font-size: 15px;
+}

src/assets/scss/variables.scss

@@ -79,6 +79,7 @@ $span-color: #707070;
 @import "../../app/modules/components/side-nav/side-nav.component.scss";
 @import "../../app//modules/components/header/header.component.scss";
 @import "../../app/modules/dashboard//dashboard-theme.scss";
+@import "../../app/modules/profile/profile-theme.scss";
 @import "./spineer.scss";
 
 @mixin component-theme() {
@@ -90,6 +91,7 @@ $span-color: #707070;
   @include sid-nav-theme();
   @include main-header();
   @include dashboard-theme();
+  @include profile-theme();
 }
 
 @include component-theme();

src/styles.scss

@@ -163,6 +163,10 @@ input.mat-input-element {
   gap: 30px;
 }
 
+.gap-10 {
+  gap: 10px;
+}
+
 .pt-2 {
   padding-top: 2px;
 }