From 721999a111add26cd137ad2540bd90ff446a10f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=91=D1=83=D1=82=D0=B5=D0=BD=D0=BA=D0=BE=20=D0=92=D0=BB?=
 =?UTF-8?q?=D0=B0=D0=B4=D0=B8=D1=81=D0=BB=D0=B0=D0=B2=20=D0=90=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=D0=BE=D0=B2=D0=B8=D1=87?=
 <vladislav.butenko@open.ru>
Date: Tue, 29 Nov 2022 12:19:31 +0300
Subject: [PATCH] honestly with no google

---
 src/app/app.component.html | 16 +++++++++++--
 src/app/app.component.ts   | 49 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0e333be..b168dd4 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,19 @@
-<select [formControl]="control">
-  <option *ngFor="let option of options" [value]="">{{ option }}</option>
+<select
+  [formControl]="control"
+  (click)="onOptionChange($event)"
+>
+  <option
+    *ngFor="let option of options"
+    [value]=""
+  >
+    {{ option }}
+  </option>
 </select>
 
 <div>card</div>
+<div class="cards" *ngFor="let card of sortedCards">
+  {{ card.id }}
+  {{ card.name }}
+</div>
 
 <router-outlet></router-outlet>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 61d8ec4..d5ba696 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { CardType, DataService } from './data.service';
+import { Card, CardType, DataService } from './data.service';
 
 
 @Component({
@@ -11,6 +11,10 @@ import { CardType, DataService } from './data.service';
 export class AppComponent {
   readonly options: CardType[] = ['KEK', 'OMEGA', 'PEPEGA', 'OMEGA'];
   readonly control = new FormControl(this.options[0]);
+  private cards: Card[] = [];
+  sortedCards: Card[] = [];
+
+
 
   constructor(
     private dataService: DataService,
@@ -18,11 +22,54 @@ export class AppComponent {
 
   }
 
+  // approach 1: honest without google
+
+  ngOnInit() {
+    this.dataService
+      .getData()
+      .subscribe((cards) => this.cards = cards);
+  }
+
+/*  ngAfterViewChecked() {
+    const userInput = document.getElementsByTagName("select");
+    const selectedTypeOption = userInput[0].value;
+    this.sortedCards = this.cards.filter((card) => card.type === selectedTypeOption);
+  }*/
+
+  onOptionChange(event: Event) {
+    this.sortedCards = this.sortedCards = this.cards.filter((card) => card.type === (<HTMLSelectElement>event.target).value);
+  }
+
+  /* void
+    ngAfterViewInit() {
+    const userInput = document.getElementsByTagName("select");
+    console.log(userInput[0].value);
+  }
+  *
+  *
+  * */
+
 
   /*
   *
   * Get data on user select input, filter data by "CardType"
   * Show name, and ID on card template of filtered items
   *
+  * steps to do:
+  *  1) observe changes in select input // * not to show: subscribe on init or viewInit*
+  *  2) on input change - get data from app.component.service.getData
+  *  3) filterData
+  *
+  *  optional:
+  *  - there is a method to check if CardType is REALLY changed (not remember which one)
+  *  - where to subscribe on data change: in template | async pipe or using subscribe in my component
+  *
+  *
+  *
+  *  Honest fails while approaching:
+  *  - long time to recall the name of component lifecycle
+  *  - how to get select change observable
+  *  - best approach to get cardData properly
+  *  - proper event on select. No triggering events on option click, but on select. MUDAK!
   * */
 }