Rename user selection component

src/app/app-routing.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { CheckStatusComponent } from './widgets/check-status/check-status.component';
-import { CreateCommitteeComponent } from './widgets/create-committee/create-committee.component';
 import { EServicesComponent } from './pages/e-services/e-services.component';
 import { LoginComponent } from './pages/login/login.component';
 import { MockComponent } from './widgets/mock/mock.component';
@@ -24,9 +23,6 @@ const routes: Routes = [
         }, {
             path: 'register-business',
             component: RegisterBusinessComponent,
-        }, {
-            path:'create-committee',
-            component: CreateCommitteeComponent
         }]
     },
 ];

src/app/app.module.ts

@@ -10,7 +10,7 @@ import { FormsModule } from '@angular/forms';
 import { MockComponent } from './widgets/mock/mock.component';
 import { EServicesComponent } from './pages/e-services/e-services.component';
 import { NotificationsComponent } from './layout/notifications/notifications.component';
-import { CreateCommitteeComponent } from './widgets/create-committee/create-committee.component';
+import { SelectEntitiesComponent } from './widgets/select-entities/select-entities.component';
 import { CheckStatusComponent } from './widgets/check-status/check-status.component';
 import { TableComponent } from './widgets/table/table.component';
 import { KeyValueHolderComponent } from './widgets/key-value-holder/key-value-holder.component';
@@ -25,7 +25,7 @@ import { DownloadButtonComponent } from './widgets/download-button/download-butt
     MockComponent,
     EServicesComponent,
     NotificationsComponent,
-    CreateCommitteeComponent,
+    SelectEntitiesComponent,
     CheckStatusComponent,
     TableComponent,
     KeyValueHolderComponent,

src/app/layout/tabs/tabs.component.html

@@ -5,8 +5,7 @@
     
     <nav>
         <a [routerLink]="['/tabs/e-services']"> E-Services </a>
-        <!-- <a [routerLink]="['/tabs/create-committee']"> Create Committee </a>
-        <a [routerLink]="['/tabs/check-status']"> Application Status </a> -->
+        <!-- <a [routerLink]="['/tabs/check-status']"> Application Status </a> -->
     </nav>
 
     <div class="search-input">

src/app/widgets/create-committee/create-committee.component.html

@@ -1,20 +0,0 @@
-<header class="tab-header">
-    <h2>Select committe members for panel</h2>
-</header>
-
-<ul>
-    <li *ngFor="let committee of committees" (click)='committee.isActive = !committee.isActive'
-        [ngClass]="{'isActive':committee.isActive === true }">
-        <img [src]="committee.avatar" alt="">
-        <div class="user-data">
-            <h6>{{committee.name}}</h6>
-            <span>{{committee.designation}}</span>
-        </div>
-        <input type="checkbox" [checked]="committee.isActive">
-    </li>
-</ul>
-
-<section class="user-action">
-    <button class="common-button neutral">Back</button>
-    <button class="common-button">Proceed</button>
-</section>

src/app/widgets/create-committee/create-committee.component.ts

@@ -1,66 +0,0 @@
-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;
-        avatar: string;
-        designation: string
-        isActive: boolean,
-    }> = [{
-        name: "Alfred E. Kaplan",
-        avatar: '../../assets/avatars/1.jpg',
-        designation: 'Engineer',
-        isActive: false
-    }, {
-        name: "Ernest L. Hall",
-        avatar: '../../assets/avatars/2.jpg',
-        designation: 'Investigator',
-        isActive: false
-    }, {
-        name: "Leslie L. Barber",
-        avatar: '../../assets/avatars/3.jpg',
-        designation: 'Engineer',
-        isActive: false
-    }, {
-        name: "Todd K. Carrico",
-        avatar: '../../assets/avatars/4.jpg',
-        designation: 'Engineer',
-        isActive: false
-    }, {
-        name: "Louise K. Parker",
-        avatar: '../../assets/avatars/5.jpg',
-        designation: 'Investigator',
-        isActive: false
-    }, {
-        name: "Jessica R. Folger",
-        avatar: '../../assets/avatars/6.jpg',
-        designation: 'Engineer',
-        isActive: false
-    }, {
-        name: "Charles M. Pollard",
-        avatar: '../../assets/avatars/7.jpg',
-        designation: 'Engineer',
-        isActive: false
-    }, {
-        name: "David B. Boaz",
-        avatar: '../../assets/avatars/8.jpg',
-        designation: 'Investigator',
-        isActive: false
-    }, {
-        name: "Julia R. Bedwell",
-        avatar: '../../assets/avatars/9.jpg',
-        designation: 'Engineer',
-        isActive: false
-    }]
-
-    constructor() { }
-
-    ngOnInit(): void {
-    }
-
-}

src/app/widgets/key-value-holder/key-value-holder.component.ts

@@ -1,15 +1,17 @@
 import { Component, Input, OnInit } from '@angular/core';
 
+export interface KeyValue {
+    key: string,
+    value: string,
+};
+
 @Component({
     selector: 'app-key-value-holder',
     templateUrl: './key-value-holder.component.html',
     styleUrls: ['./key-value-holder.component.scss']
 })
 export class KeyValueHolderComponent implements OnInit {
-    @Input() keyValues: Array<{
-        key: string,
-        value: string,
-    }> = [];
+    @Input() keyValues: Array<KeyValue> = [];
 
     constructor() { }
 

src/app/widgets/select-entities/select-entities.component.html

@@ -0,0 +1,11 @@
+<ul>
+    <li *ngFor="const entity of entities" (click)="selectEntity(entity)"
+        [ngClass]="{'isActive': entity.isSelected}">
+        <img [src]="entity.avatar" alt="entity.name">
+        <div class="user-data">
+            <h6>{{ entity.name }}</h6>
+            <span>{{ entity.subTitle }}</span>
+        </div>
+        <input type="checkbox" [checked]="entity.isSelected">
+    </li>
+</ul>

src/app/widgets/create-committee/create-committee.component.spec.ts → src/app/widgets/select-entities/select-entities.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CreateCommitteeComponent } from './create-committee.component';
+import { SelectEntitiesComponent } from './select-entities.component';
 
-describe('CreateCommitteeComponent', () => {
-  let component: CreateCommitteeComponent;
-  let fixture: ComponentFixture<CreateCommitteeComponent>;
+describe('SelectEntitiesComponent', () => {
+  let component: SelectEntitiesComponent;
+  let fixture: ComponentFixture<SelectEntitiesComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ CreateCommitteeComponent ]
+      declarations: [ SelectEntitiesComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CreateCommitteeComponent);
+    fixture = TestBed.createComponent(SelectEntitiesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/widgets/select-entities/select-entities.component.ts

@@ -0,0 +1,84 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+export interface SelectableEntity {
+    id: string|number;
+    name: string;
+    avatar: string;
+    subTitle: string
+    isSelected: boolean,
+};
+
+const HARDCODED_USERS: Array<SelectableEntity> = [{
+    id: 0,
+    name: "Alfred E. Kaplan",
+    avatar: '../../assets/avatars/1.jpg',
+    subTitle: 'Engineer',
+    isSelected: false
+}, {
+    id: 0,
+    name: "Ernest L. Hall",
+    avatar: '../../assets/avatars/2.jpg',
+    subTitle: 'Investigator',
+    isSelected: false
+}, {
+    id: 0,
+    name: "Leslie L. Barber",
+    avatar: '../../assets/avatars/3.jpg',
+    subTitle: 'Engineer',
+    isSelected: false
+}, {
+    id: 0,
+    name: "Todd K. Carrico",
+    avatar: '../../assets/avatars/4.jpg',
+    subTitle: 'Engineer',
+    isSelected: false
+}, {
+    id: 0,
+    name: "Louise K. Parker",
+    avatar: '../../assets/avatars/5.jpg',
+    subTitle: 'Investigator',
+    isSelected: false
+}, {
+    id: 0,
+    name: "Jessica R. Folger",
+    avatar: '../../assets/avatars/6.jpg',
+    subTitle: 'Engineer',
+    isSelected: false
+}, {
+    id: 0,
+    name: "Charles M. Pollard",
+    avatar: '../../assets/avatars/7.jpg',
+    subTitle: 'Engineer',
+    isSelected: false
+}, {
+    id: 0,
+    name: "David B. Boaz",
+    avatar: '../../assets/avatars/8.jpg',
+    subTitle: 'Investigator',
+    isSelected: false
+}, {
+    id: 0,
+    name: "Julia R. Bedwell",
+    avatar: '../../assets/avatars/9.jpg',
+    subTitle: 'Engineer',
+    isSelected: false
+}];
+
+@Component({
+  selector: 'app-select-entities',
+  templateUrl: './select-entities.component.html',
+  styleUrls: ['./select-entities.component.scss']
+})
+export class SelectEntitiesComponent implements OnInit {
+    @Input() entities: Array<SelectableEntity> = HARDCODED_USERS;
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+    selectEntity(entity: SelectableEntity) {
+        entity.isSelected = !entity.isSelected;
+    }
+
+}

src/app/widgets/table/table.component.html

@@ -4,12 +4,12 @@
         <div class="cell" *ngFor="let heading of headings"> {{ heading }} </div>
     </header>
 
-    <ul>
+    <ol>
         <li *ngFor="let tableDetail of tableDetails; let i = index" [ngStyle]="{'grid-template-columns': '100px repeat(' + headings.length + ', 1fr)'}">
             <div class="cell"> {{ i + 1 }} </div>
             <div class="cell" *ngFor="let detail of tableDetail">                
                 <p> {{ detail }} </p>
             </div>
         </li>
-    </ul>
+    </ol>
 </section>

src/app/widgets/table/table.component.scss

@@ -26,7 +26,7 @@
         }
     }
 
-    ul {
+    ol {
         list-style: none;        
     }