feat: add row selection

Author: valburyakov

src/app/app.component.html

@@ -6,10 +6,11 @@
   <mat-progress-bar *ngIf="loading$ | async" mode="query"></mat-progress-bar>
 
   <div class="container">
-    <app-currency-table class="table" [coins]="items$ | async"></app-currency-table>
+    <app-currency-table class="table" [coins]="items$ | async" (selected)="onRowSelect($event)"></app-currency-table>
     <app-converter [currencies]="coinsList$ | async"
+                   [activeCurrency]="activeCoinId$ | async"
                    [rate]="currentRate$ | async"
-                   (currencyChanged)="loadRate($event)" >
+                   (currencyChanged)="loadRate($event)">
     </app-converter>
   </div>
 </app-navigation>

src/app/app.component.ts

@@ -6,6 +6,7 @@ import { Observable } from 'rxjs';
 import { filter, switchMapTo } from 'rxjs/operators';
 import { CoinItem } from './models';
 import { CoinFlags, WsMessageTypes } from './models/web-scoket.types';
+import { ID } from '@datorama/akita';
 
 @Component({
   selector: 'app-root',
@@ -19,6 +20,7 @@ export class AppComponent implements OnInit {
   coinsList$: Observable<string[]>;
   loading$: Observable<boolean>;
   currentRate$: Observable<number>;
+  activeCoinId$: Observable<ID>;
 
   subscribed = false;
 
@@ -39,6 +41,7 @@ export class AppComponent implements OnInit {
     this.loading$ = this.coinsQuery.selectLoading();
     this.coinsList$ = this.coinsQuery.coinNames$;
     this.currentRate$ = this.coinsQuery.currentRate$;
+    this.activeCoinId$ = this.coinsQuery.selectActiveId();
 
 
     const eventMapper = (message: string): Partial<CoinItem> => {
@@ -78,4 +81,8 @@ export class AppComponent implements OnInit {
   loadRate(event: { from: string; to: string }) {
     this.coinsService.getRate(event.from, event.to).subscribe();
   }
+
+  onRowSelect(coinName: string) {
+    this.coinsService.setSelected(coinName);
+  }
 }

src/app/converter/converter.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { distinctUntilChanged, filter, takeUntil } from 'rxjs/operators';
 import { combineLatest, merge, Subject } from 'rxjs';
@@ -8,12 +8,14 @@ import { combineLatest, merge, Subject } from 'rxjs';
   templateUrl: './converter.component.html',
   styleUrls: ['./converter.component.scss']
 })
-export class ConverterComponent implements OnInit, OnDestroy {
+export class ConverterComponent implements OnInit, OnDestroy, OnChanges {
 
   @Input() currencies: string[];
 
   @Input() rate: number;
 
+  @Input() activeCurrency: string;
+
   @Output() currencyChanged = new EventEmitter<{from: string, to: string}>();
 
   form: FormGroup;
@@ -57,4 +59,10 @@ export class ConverterComponent implements OnInit, OnDestroy {
     this.destroy$.complete();
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes && changes.activeCurrency && changes.activeCurrency.currentValue) {
+      this.form.get('fromCurrency').setValue(this.activeCurrency);
+    }
+  }
+
 }

src/app/currency-table/currency-table.component.html

@@ -26,6 +26,6 @@
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
   </table>
 </div>

src/app/currency-table/currency-table.component.scss

@@ -15,3 +15,8 @@
   display: flex;
   align-items: center;
 }
+
+tr.mat-row:hover {
+  background: #777;
+  cursor: pointer
+}

src/app/currency-table/currency-table.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { CoinItem } from '../models';
 import { CoinFlags } from '../models/web-scoket.types';
 
@@ -13,6 +13,12 @@ export class CurrencyTableComponent {
 
   @Input() coins: CoinItem[];
 
+  @Output() selected = new EventEmitter<string>();
+
   displayedColumns = ['image', 'name', 'price'];
   coinFlags = CoinFlags;
+
+  selectRow(row: CoinItem) {
+    this.selected.emit(row.name);
+  }
 }

src/app/state/coins.service.ts

@@ -30,4 +30,8 @@ export class CoinsService {
       this.coinsStore.update({currentRate: price});
     }));
   }
+
+  setSelected(id: string) {
+    this.coinsStore.setActive(id);
+  }
 }