contractor type

src/app/modules/contracts/contract-type/contract-type.component.html

@@ -6,7 +6,13 @@
     </p>
   </main>
   <div class="gap-10 mt-3" fxLayout="row wrap" fxLayoutAlign="center center">
-    <div class="contractor" fxFlex.lt-md="100" fxFlex.gt-sm="30">
+    <div
+      class="contractor"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="30"
+      (click)="onChooseType(0)"
+      [ngClass]="{ active: contractType === 0 }"
+    >
       <img
         class="logo"
         src="../../../../assets/images/contractor.svg"
@@ -21,7 +27,13 @@
         >
       </div>
     </div>
-    <div class="employee" fxFlex.lt-md="100" fxFlex.gt-sm="30">
+    <div
+      class="employee"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="30"
+      (click)="onChooseType(1)"
+      [ngClass]="{ active: contractType === 1 }"
+    >
       <img
         class="logo"
         src="../../../../assets/images/employee_cont.svg"
@@ -38,5 +50,5 @@
     </div>
   </div>
 
-  <button class="next">Next</button>
+  <button class="next" (click)="onClickNext()">Next</button>
 </section>

src/app/modules/contracts/contract-type/contract-type.component.scss

@@ -0,0 +1 @@
+

src/app/modules/contracts/contract-type/contract-type.component.ts

@@ -1,10 +1,24 @@
 import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-contract-type',
   templateUrl: './contract-type.component.html',
-  styleUrls: ['./contract-type.component.scss']
+  styleUrls: ['./contract-type.component.scss'],
 })
 export class ContractTypeComponent {
+  contractType!: number;
+  constructor(
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {}
+  onChooseType(type: number): void {
+    this.contractType = type;
+  }
 
+  onClickNext(): void {
+    if (this.contractType === 0) {
+      this.router.navigate(['contractor-type'], { relativeTo: this.route });
+    }
+  }
 }

src/app/modules/contracts/contractor-contract-type/contractor-contract-type.component.html

@@ -0,0 +1,72 @@
+<section
+  class="contractor-type"
+  fxLayout="column"
+  fxLayoutAlign="center center"
+>
+  <main>
+    <h1 class="bold">Create Contract</h1>
+    <p>What type of contractor's contract are you adding?</p>
+  </main>
+
+  <div fxLayout="row" fxLayoutAlign="center center" class="gap-20 mt-3">
+    <div
+      class="card-type"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="30"
+      fxLayout="column"
+      fxLayoutAlign="space-around center"
+    >
+      <div class="text-center">
+        <img src="../../../../assets/images/fixedRate.svg" alt="" title="" />
+        <p class="bold">Fixed Rate</p>
+      </div>
+      <div fxLayout="row" fxLayoutAlign="center center" class="info gap-10">
+        <img src="../../../../assets/images/info.svg" alt="" title="" />
+        <span
+          >A person who is employed by an organization for a wage or
+          salary</span
+        >
+      </div>
+    </div>
+    <div
+      class="card-type"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="30"
+      fxLayout="column"
+      fxLayoutAlign="space-around center"
+    >
+      <div class="text-center">
+        <img src="../../../../assets/images/payAsYouGo.svg" alt="" title="" />
+        <p class="bold">Pay as you go</p>
+      </div>
+      <div fxLayout="row" fxLayoutAlign="center center" class="info gap-10">
+        <img src="../../../../assets/images/info.svg" alt="" title="" />
+        <span
+          >A person who is employed by an organization for a wage or
+          salary</span
+        >
+      </div>
+    </div>
+    <div
+      class="card-type"
+      fxFlex.lt-md="100"
+      fxFlex.gt-sm="30"
+      fxLayout="column"
+      fxLayoutAlign="space-around center"
+    >
+      <div class="text-center">
+        <img src="../../../../assets/images/millestone.svg" alt="" title="" />
+        <p class="bold">Milestone</p>
+      </div>
+      <div fxLayout="row" fxLayoutAlign="center center" class="info gap-10">
+        <img src="../../../../assets/images/info.svg" alt="" title="" />
+        <span
+          >A person who is employed by an organization for a wage or
+          salary</span
+        >
+      </div>
+    </div>
+  </div>
+
+  <button class="next">Next</button>
+</section>

src/app/modules/contracts/contractor-contract-type/contractor-contract-type.component.spec.ts

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

src/app/modules/contracts/contractor-contract-type/contractor-contract-type.component.ts

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

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

@@ -2,12 +2,16 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { ContractsComponent } from './contracts.component';
 import { ContractTypeComponent } from './contract-type/contract-type.component';
+import { ContractorContractTypeComponent } from './contractor-contract-type/contractor-contract-type.component';
 
 const routes: Routes = [
   {
     path: '',
     component: ContractsComponent,
-    children: [{ path: '', component: ContractTypeComponent }],
+    children: [
+      { path: '', component: ContractTypeComponent },
+      { path: 'contractor-type', component: ContractorContractTypeComponent },
+    ],
   },
 ];
 

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

@@ -14,7 +14,6 @@
           }
         }
       }
-
       .contract-type {
         main {
           text-align: center;
@@ -80,7 +79,68 @@
             background-color: $main-color;
           }
         }
+        .active {
+          border: 4px solid $light-blue;
+        }
+      }
+    }
+    .contractor-type {
+      main {
+        text-align: center;
+        h1 {
+          font-size: 25px;
+          color: $main-color;
+        }
+        p {
+          color: $main-color;
+          margin-top: 10px;
+        }
+      }
+      .card-type {
+        background-color: $white-color;
+        border-radius: 10px;
+        padding: 10px;
+        height: 220px;
+        cursor: pointer;
+        transition: all 0.5s;
+        border: 4px solid $white-color;
+        &:hover {
+          border: 4px solid $light-blue;
+        }
+        div {
+          p {
+            color: $main-color;
+            margin-top: 5px;
+          }
+        }
+        @media (max-width: 767px) {
+          height: initial;
+        }
+        .info {
+          span {
+            font-size: 15px;
+            color: $main-color;
+          }
+        }
+      }
+    }
+
+    .next {
+      margin-top: 1.5rem;
+      background-color: $light-blue;
+      color: $white-color;
+      padding: 12px 40px;
+      border: none;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 0.5s;
+      font-size: 15px;
+      &:hover {
+        background-color: $main-color;
       }
     }
+    .active {
+      border: 4px solid $light-blue;
+    }
   }
 }

src/app/modules/contracts/contracts.module.ts

@@ -5,9 +5,10 @@ import { ContractsRoutingModule } from './contracts-routing.module';
 import { ContractsComponent } from './contracts.component';
 import { ContractTypeComponent } from './contract-type/contract-type.component';
 import { SharedModule } from '@shared/shared.module';
+import { ContractorContractTypeComponent } from './contractor-contract-type/contractor-contract-type.component';
 
 @NgModule({
-  declarations: [ContractsComponent, ContractTypeComponent],
+  declarations: [ContractsComponent, ContractTypeComponent, ContractorContractTypeComponent],
   imports: [CommonModule, ContractsRoutingModule, SharedModule],
 })
 export class ContractsModule {}