Select and unselect functionality

src/app/list/list.component.css

@@ -8,3 +8,31 @@
 h2 {
   border-bottom: 1px solid lightgray;
 }
+
+.data-list-container {
+  display: flex;
+}
+
+.data-list {
+  width: 50%;
+  padding: 20px;
+}
+
+.card-list {
+  display: flex;
+}
+
+.card {
+  width: 200px;
+  border: 1px solid;
+  margin: 10px;
+  padding: 10px;
+  height: 100px;
+  position: relative;
+}
+
+.remove {
+  position: absolute;
+  top: -9px;
+  right: -10px;
+}

src/app/list/list.component.html

@@ -1,4 +1,40 @@
 <div class="list-container">
   <h2>Providers</h2>
 
+  <div class="data-list-container">
+
+    <div class="data-list">
+      <h3>Provided List</h3>
+      <div class="card-list">
+        <ng-container *ngIf="unselectedProviders?.length; else noUnselectedProviders" >
+          <div *ngFor="let item of unselectedProviders; let i = index;" class="card">
+            {{item.name}}
+            <p>{{item.address}}</p>
+            <button (click)="select(item, i)">select</button>
+          </div>
+        </ng-container>
+        <ng-template #noUnselectedProviders>
+          <div class="card">no record
+          </div>
+        </ng-template>
+      </div>
+    </div>
+
+    <div class="data-list">
+      <h3>Selected Provided List</h3>
+      <div class="card-list">
+        <ng-container *ngIf="selectedProviders?.length; else noSelectedProviders" >
+          <div *ngFor="let item of selectedProviders; let i = index;" class="card">
+            {{item.name}}
+            <p>{{item.address}}</p>
+            <button (click)="deselect(item, i)" class="remove" title="click to remove item">X</button>
+          </div>
+        </ng-container>
+        <ng-template #noSelectedProviders>
+          <div class="card">no record
+          </div>
+        </ng-template>
+      </div>
+    </div>
+  </div>
 </div>

src/app/list/list.component.spec.ts

@@ -38,4 +38,17 @@ describe('ListComponent', () => {
       expect(component.selectedProviders.length).toEqual(0);
     });
   });
+
+  describe('provider selection and deselection', () => {
+    it('should select provider', () => {
+      component.select(component.unselectedProviders[0], 0);
+      expect(component.selectedProviders.length).toEqual(1);
+    });
+
+    it('should deselect provider', () => {
+      component.select(component.unselectedProviders[0], 0);
+      component.deselect(component.selectedProviders[0], 0);
+      expect(component.unselectedProviders.length).toEqual(3);
+    });
+  });
 });

src/app/list/list.component.ts

@@ -31,6 +31,28 @@ export class ListComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    try {
+      let data = sessionStorage.getItem('selectedItems');;
+      data = data ? JSON.parse(data) : [];
+      this.selectedProviders = this.selectedProviders.concat(data);
 
+      this.unselectedProviders = this.unselectedProviders.filter(item => this.selectedProviders.findIndex(subitem => subitem.id === item.id) === -1);
+    } catch (e) {}
+  }
+
+  select(item, index) {
+    console.log('hi', index)
+    this.unselectedProviders.splice(index, 1);
+    this.selectedProviders.push(item);
+    sessionStorage.setItem('selectedItems', JSON.stringify(this.selectedProviders));
+  }
+
+  deselect(item, index) {
+    console.log('bye', index)
+
+    this.selectedProviders.splice(index, 1);
+    this.unselectedProviders.push(item);
+    sessionStorage.setItem('selectedItems', JSON.stringify(this.selectedProviders));
+  }
 }