diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b58bcb0..c1492f3 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { CreateCommitteeComponent } from './create-committee/create-committee.component'; import { EServicesComponent } from './e-services/e-services.component'; import { LoginComponent } from './login/login.component'; import { MockComponent } from './mock/mock.component'; @@ -19,6 +20,9 @@ const routes: Routes = [ }, { path: 'register-business', component: RegisterBusinessComponent, + }, { + path:'create-committee', + component: CreateCommitteeComponent }] }, ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 440b8a6..3320060 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,6 +10,7 @@ import { FormsModule } from '@angular/forms'; import { MockComponent } from './mock/mock.component'; import { EServicesComponent } from './e-services/e-services.component'; import { NotificationsComponent } from './notifications/notifications.component'; +import { CreateCommitteeComponent } from './create-committee/create-committee.component'; @NgModule({ declarations: [ @@ -19,7 +20,8 @@ import { NotificationsComponent } from './notifications/notifications.component' RegisterBusinessComponent, MockComponent, EServicesComponent, - NotificationsComponent + NotificationsComponent, + CreateCommitteeComponent ], imports: [ BrowserModule, diff --git a/src/app/create-committee/create-committee.component.html b/src/app/create-committee/create-committee.component.html new file mode 100644 index 0000000..6d0f896 --- /dev/null +++ b/src/app/create-committee/create-committee.component.html @@ -0,0 +1,19 @@ +
+

Select committe members to investigate

+
+ +
+
  • + +
    +
    {{committee.name}}
    + {{committee.designation}} +
    +
    +
  • +
    + +
    + + +
    \ No newline at end of file diff --git a/src/app/create-committee/create-committee.component.scss b/src/app/create-committee/create-committee.component.scss new file mode 100644 index 0000000..8d237b6 --- /dev/null +++ b/src/app/create-committee/create-committee.component.scss @@ -0,0 +1,100 @@ +section { + margin: 2rem 0; + display: grid; + grid-template-columns: repeat(3, 1fr); + list-style: none; + + li { + display: flex; + position: relative; + align-items: center; + justify-content:center; + width: 35rem; + height: calc( 100% - 1.5rem) ; + border-radius: 5rem; + margin: 2rem ; + cursor: pointer; + background-color: var(--shadow-grey); + filter: brightness(115%); + + .upfold { + width: 20rem; + padding-left: 2rem; + + h6 { + font-size: 1.6rem; + color: var(--primary); + padding: 0.3rem 0; + } + span { + font-size: 1.4rem; + color: var(--primary); + } + } + + img { + width: 5rem; + height: 5rem; + border-radius: 50%; + margin-left: 1rem; + } + + .check-box { + width: 1.8rem; + background-color: white; + height: 1.8rem; + margin: 0 auto; + border-radius: 0.4rem; + box-shadow: inset 0px 1px 4px 0px var(--dark-grey); + + + &.isActive { + position: relative; + display: inline-block; + width: 1.8rem; + height: 1.8rem; + background-color: var(--success); + box-shadow: none; + + &::before { + content: ""; + position: absolute; + left: -3px; + top: 45%; + height: 30%; + width: 2px; + background-color: white; + transform: translateX(10px) rotate(-45deg); + transform-origin: left bottom; + } + + &::after { + content: ""; + position: absolute; + left: -2px; + bottom: 4px; + height: 2px; + width: 54%; + background-color: white; + transform: translateX(10px) rotate(-45deg); + transform-origin: left bottom; + + } + } + } + } +} + +.user-action { + display: flex; + justify-content: center; + align-items: center; + height: 10rem; + + button { + width: 15rem; + margin: 0 1rem; + font-weight: 500; + } +} + diff --git a/src/app/create-committee/create-committee.component.spec.ts b/src/app/create-committee/create-committee.component.spec.ts new file mode 100644 index 0000000..9f4452b --- /dev/null +++ b/src/app/create-committee/create-committee.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CreateCommitteeComponent } from './create-committee.component'; + +describe('CreateCommitteeComponent', () => { + let component: CreateCommitteeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CreateCommitteeComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CreateCommitteeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/create-committee/create-committee.component.ts b/src/app/create-committee/create-committee.component.ts new file mode 100644 index 0000000..80530fb --- /dev/null +++ b/src/app/create-committee/create-committee.component.ts @@ -0,0 +1,58 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-create-committee', + templateUrl: './create-committee.component.html', + styleUrls: ['./create-committee.component.scss'] +}) +export class CreateCommitteeComponent implements OnInit { + + + committees: Array<{ + name: string; + designation: string + isActive: boolean, + }> = [{ + name: "Robert Jr", + designation: 'Engineer', + isActive: false + }, { + name: "Tom Holland", + designation: 'Investigator', + isActive: false + }, { + name: "Criss Evans", + designation: 'Engineer', + isActive: false + }, { + name: "Natalie Portman", + designation: 'Engineer', + isActive: false + }, { + name: "Mark Ruffalo", + designation: 'Investigator', + isActive: false + }, { + name: "Paul Rudd", + designation: 'Engineer', + isActive: false + }, { + name: "Josh Brolin", + designation: 'Engineer', + isActive: false + }, { + name: "Criss Pratt", + designation: 'Investigator', + isActive: false + }, { + name: "Sacrlett Johansson", + designation: 'Engineer', + isActive: false + }] + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html index 8c5e43e..811305b 100644 --- a/src/app/tabs/tabs.component.html +++ b/src/app/tabs/tabs.component.html @@ -6,6 +6,9 @@ +
    diff --git a/src/assets/images/Investigator.jpg b/src/assets/images/Investigator.jpg new file mode 100644 index 0000000..9e03b8b Binary files /dev/null and b/src/assets/images/Investigator.jpg differ