From 086d89cc3ee39a3bcfbf3f48717f54657cf0edbd Mon Sep 17 00:00:00 2001 From: prahalad Date: Fri, 12 Nov 2021 13:52:49 +0530 Subject: [PATCH] Added CreateCommittee Component with Ui --- src/app/app-routing.module.ts | 4 + src/app/app.module.ts | 4 +- .../create-committee.component.html | 19 ++++ .../create-committee.component.scss | 100 ++++++++++++++++++ .../create-committee.component.spec.ts | 25 +++++ .../create-committee.component.ts | 58 ++++++++++ src/app/tabs/tabs.component.html | 3 + src/assets/images/Investigator.jpg | Bin 0 -> 5280 bytes 8 files changed, 212 insertions(+), 1 deletion(-) create mode 100644 src/app/create-committee/create-committee.component.html create mode 100644 src/app/create-committee/create-committee.component.scss create mode 100644 src/app/create-committee/create-committee.component.spec.ts create mode 100644 src/app/create-committee/create-committee.component.ts create mode 100644 src/assets/images/Investigator.jpg 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 0000000000000000000000000000000000000000..9e03b8b395855b8840141add92ee919f0d34f345 GIT binary patch literal 5280 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 literal 0 HcmV?d00001