first form

src/app/modules/contracts/components/fixed-rate-forms/contract-compiliance/contract-compiliance.component.html

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

src/app/modules/contracts/components/fixed-rate-forms/contract-compiliance/contract-compiliance.component.spec.ts

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

src/app/modules/contracts/components/fixed-rate-forms/contract-compiliance/contract-compiliance.component.ts

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

src/app/modules/contracts/components/fixed-rate-forms/other-information/other-information.component.html

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

src/app/modules/contracts/components/fixed-rate-forms/other-information/other-information.component.spec.ts

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

src/app/modules/contracts/components/fixed-rate-forms/other-information/other-information.component.ts

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

src/app/modules/contracts/components/fixed-rate-forms/payment-date/payment-date.component.html

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

src/app/modules/contracts/components/fixed-rate-forms/payment-date/payment-date.component.spec.ts

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

src/app/modules/contracts/components/fixed-rate-forms/payment-date/payment-date.component.ts

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

src/app/modules/contracts/components/fixed-rate-forms/payment-rate/payment-rate.component.html

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

src/app/modules/contracts/components/fixed-rate-forms/payment-rate/payment-rate.component.spec.ts

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

src/app/modules/contracts/components/fixed-rate-forms/payment-rate/payment-rate.component.ts

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

src/app/modules/contracts/components/fixed-rate-forms/personal-information/personal-information.component.html

@@ -0,0 +1,142 @@
+<h2
+  mat-dialog-title
+  fxLayout="row"
+  fxLayoutAlign="center center"
+  class="personal-info-title"
+>
+  <!-- <img src="../../../../../../assets/images/arrow.svg" alt="" title="" /> -->
+  <div class="text-center">
+    <span>Create contractor contract</span>
+    <p class="bold">"Personal Information"</p>
+  </div>
+</h2>
+<mat-dialog-content class="mat-typography">
+  <form>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="entity">
+          <span>Entity <span class="red">*</span></span>
+        </label>
+        <input type="text" id="entity" placeholder="Enter entity name" />
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="contractor_name">
+          <span>Contractor name <span class="red">*</span></span>
+        </label>
+        <input
+          type="text"
+          id="contractor_name"
+          placeholder="Enter contractor name"
+        />
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10 mt-2">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="email">
+          <span
+            >Contractor personal email address <span class="red">*</span></span
+          >
+        </label>
+        <input type="email" id="email" placeholder="Enter email address" />
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="tax">
+          <span>Contractor's tax residence <span class="red">*</span></span>
+        </label>
+        <input
+          type="text"
+          id="tax"
+          placeholder="Enter Contractor's tax residence"
+        />
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10 mt-2">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="role">
+          <span>Role<span class="red">*</span></span>
+        </label>
+        <input type="text" id="role" placeholder="Enter role" />
+      </div>
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="security_level">
+          <span>Security level <span class="red">*</span></span>
+        </label>
+        <input
+          type="text"
+          id="security_level"
+          placeholder="Enter security level"
+        />
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="center center" class="gap-10 mt-2">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="98"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="role">
+          <span>Scope of work<span class="red">*</span></span>
+        </label>
+        <textarea cols="6" rows="6"></textarea>
+      </div>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="start center" class="gap-10 mt-2">
+      <div
+        fxFlex.lt-md="100"
+        fxFlex.gt-sm="48"
+        class="form-input"
+        fxLayout="column"
+        fxLayoutAlign="start stretch"
+      >
+        <label for="date">
+          <span>Contractor’s start date<span class="red">*</span></span>
+        </label>
+        <input type="date" id="date" placeholder="select date" />
+      </div>
+    </div>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Back</button>
+  <button mat-button [mat-dialog-close]="true" cdkFocusInitial class="next">
+    Next
+  </button>
+</mat-dialog-actions>

src/app/modules/contracts/components/fixed-rate-forms/personal-information/personal-information.component.scss

@@ -0,0 +1,30 @@
+.personal-info-title {
+  div {
+    padding: 10px 0;
+    span {
+      font-size: 18px;
+      color: #2f2c83;
+    }
+    p {
+      font-size: 15px;
+      color: #009fe3;
+    }
+  }
+}
+
+.mdc-dialog__title::before {
+  display: none;
+}
+
+.next {
+  background-color: #009fe3;
+  color: #fff !important;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.5s;
+  font-size: 15px;
+  &:hover {
+    background-color: #2f2c83;
+  }
+}

src/app/modules/contracts/components/fixed-rate-forms/personal-information/personal-information.component.spec.ts

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

src/app/modules/contracts/components/fixed-rate-forms/personal-information/personal-information.component.ts

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

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

@@ -15,6 +15,8 @@
       fxFlex.gt-sm="30"
       fxLayout="column"
       fxLayoutAlign="space-around center"
+      (click)="onActiveType(0)"
+      [ngClass]="{ active: activeType === 0 }"
     >
       <div class="text-center">
         <img src="../../../../assets/images/fixedRate.svg" alt="" title="" />
@@ -34,6 +36,8 @@
       fxFlex.gt-sm="30"
       fxLayout="column"
       fxLayoutAlign="space-around center"
+      (click)="onActiveType(1)"
+      [ngClass]="{ active: activeType === 1 }"
     >
       <div class="text-center">
         <img src="../../../../assets/images/payAsYouGo.svg" alt="" title="" />
@@ -53,6 +57,8 @@
       fxFlex.gt-sm="30"
       fxLayout="column"
       fxLayoutAlign="space-around center"
+      (click)="onActiveType(2)"
+      [ngClass]="{ active: activeType === 2 }"
     >
       <div class="text-center">
         <img src="../../../../assets/images/millestone.svg" alt="" title="" />
@@ -68,5 +74,5 @@
     </div>
   </div>
 
-  <button class="next">Next</button>
+  <button class="next" (click)="onClickNext()">Next</button>
 </section>

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

@@ -1,10 +1,31 @@
 import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { PersonalInformationComponent } from '../components/fixed-rate-forms/personal-information/personal-information.component';
 
 @Component({
   selector: 'app-contractor-contract-type',
   templateUrl: './contractor-contract-type.component.html',
-  styleUrls: ['./contractor-contract-type.component.scss']
+  styleUrls: ['./contractor-contract-type.component.scss'],
 })
 export class ContractorContractTypeComponent {
+  activeType!: number;
 
+  constructor(public readonly dialog: MatDialog) {}
+
+  onActiveType(type: number): void {
+    this.activeType = type;
+  }
+
+  onClickNext(): void {
+    let dialogRef;
+    if (this.activeType === 0) {
+      dialogRef = this.dialog.open(PersonalInformationComponent, {
+        width: '70%',
+      });
+
+      dialogRef.afterClosed().subscribe((result) => {
+        console.log(`Dialog result: ${result}`);
+      });
+    }
+  }
 }

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

@@ -123,6 +123,9 @@
           }
         }
       }
+      .active {
+        border: 4px solid $light-blue;
+      }
     }
 
     .next {

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

@@ -6,9 +6,14 @@ 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';
+import { PersonalInformationComponent } from './components/fixed-rate-forms/personal-information/personal-information.component';
+import { PaymentRateComponent } from './components/fixed-rate-forms/payment-rate/payment-rate.component';
+import { PaymentDateComponent } from './components/fixed-rate-forms/payment-date/payment-date.component';
+import { OtherInformationComponent } from './components/fixed-rate-forms/other-information/other-information.component';
+import { ContractCompilianceComponent } from './components/fixed-rate-forms/contract-compiliance/contract-compiliance.component';
 
 @NgModule({
-  declarations: [ContractsComponent, ContractTypeComponent, ContractorContractTypeComponent],
+  declarations: [ContractsComponent, ContractTypeComponent, ContractorContractTypeComponent, PersonalInformationComponent, PaymentRateComponent, PaymentDateComponent, OtherInformationComponent, ContractCompilianceComponent],
   imports: [CommonModule, ContractsRoutingModule, SharedModule],
 })
 export class ContractsModule {}

src/styles.scss

@@ -264,6 +264,10 @@ input.mat-input-element {
   padding: 10px 0;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 // .owl-prev {
 //   position: absolute;
 //   left: 2px;