From 1d1642d61a54c48b25aee82c11444eb86008b8a7 Mon Sep 17 00:00:00 2001
From: NorthFailer <northfailer@gmail.com>
Date: Tue, 29 Nov 2022 22:18:39 +0700
Subject: [PATCH 1/2] test #2

---
 src/app/app.component.html |  5 +----
 src/app/app.component.ts   | 13 +++++------
 src/app/data.service.ts    | 45 ++++++++++++++++++--------------------
 3 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0e333be..48759ce 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,4 @@
-<select [formControl]="control">
-  <option *ngFor="let option of options" [value]="">{{ option }}</option>
-</select>
-
+<input type="number" [formControl]="control"/>
 <div>card</div>
 
 <router-outlet></router-outlet>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 61d8ec4..fbee400 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 { DataService } from './data.service';
 
 
 @Component({
@@ -9,8 +9,7 @@ import { CardType, DataService } from './data.service';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  readonly options: CardType[] = ['KEK', 'OMEGA', 'PEPEGA', 'OMEGA'];
-  readonly control = new FormControl(this.options[0]);
+  readonly control = new FormControl();
 
   constructor(
     private dataService: DataService,
@@ -20,9 +19,9 @@ export class AppComponent {
 
 
   /*
-  *
-  * Get data on user select input, filter data by "CardType"
-  * Show name, and ID on card template of filtered items
-  *
+  * On user input number(N) request Cards from id starts from 1 to N
+  * Show all responded Cards in template in the same time
+  * Keep the cards in order 1 to N
+  * Skip cards with error response
   * */
 }
diff --git a/src/app/data.service.ts b/src/app/data.service.ts
index 9cdf5ea..bc3ed10 100644
--- a/src/app/data.service.ts
+++ b/src/app/data.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import { delay, Observable, of, throwError } from 'rxjs';
 
 export type CardType = 'KEK' | 'ЧЕБУРРЕК' | 'PEPEGA' | 'OMEGA';
 
@@ -8,31 +8,28 @@ export interface Card {
   id: number;
   type: CardType;
 }
+const cardsById = new Map<number, Card>([
+  [1, {name: 'One', id: 1, type: 'ЧЕБУРРЕК'}],
+  [2, {name: 'Two', id: 2, type: 'KEK'}],
+  [3, {name: 'Three', id: 3, type: 'OMEGA'}],
+  [6, {name: 'Six', id: 6, type: 'PEPEGA'}],
+  [9, {name: 'Nine', id: 9, type: 'KEK'}],
+  [12, {name: 'Twelve', id: 12, type: 'OMEGA'}],
+])
+
 
 @Injectable({ providedIn: 'root' })
 export class DataService {
-  getData(): Observable<Card[]> {
-    return of([
-      {
-        name: 'One',
-        id: 1,
-        type: 'PEPEGA',
-      },
-      {
-        name: 'Three',
-        id: 3,
-        type: 'KEK',
-      },
-      {
-        name: 'Two',
-        id: 2,
-        type: 'ЧЕБУРРЕК',
-      },
-      {
-        name: 'Five',
-        id: 5,
-        type: 'ЧЕБУРРЕК',
-      },
-    ]);
+
+  getCard(id: number): Observable<Card> {
+    const card = cardsById.get(id);
+
+    if (card) {
+      return of(card).pipe(
+        delay(Math.random() * 2000),
+      );
+    } else {
+      return throwError(() => `[404] Card with ID: ${id} not found`);
+    }
   }
 }

From ab407ef9ae31bc658997e90483ab67ed6777c260 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 19:03:33 +0300
Subject: [PATCH 2/2] honestly with no google (1st fix)

---
 src/app/app.component.html |  5 +++++
 src/app/app.component.ts   | 17 ++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 48759ce..1f1612c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,9 @@
 <input type="number" [formControl]="control"/>
 <div>card</div>
+<div *ngFor="let card of cards">
+  {{ card.type }}
+  {{ card.name }}
+  {{ card.id }}
+</div>
 
 <router-outlet></router-outlet>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index fbee400..e7fa146 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { DataService } from './data.service';
+import { Card, DataService } from './data.service';
+import { catchError, concatMap, EMPTY, map } from "rxjs";
 
 
 @Component({
@@ -10,6 +11,20 @@ import { DataService } from './data.service';
 })
 export class AppComponent {
   readonly control = new FormControl();
+  cards: Card[] = [];
+
+  cards$ = this.control.valueChanges
+    .pipe(concatMap((controlValue) => this.dataService.getCard(controlValue)
+        .pipe(
+          map((card) => {
+            this.cards.push(card);
+            }
+          )
+        ).pipe(
+          // catchError([])
+        )
+      )
+    ).subscribe();
 
   constructor(
     private dataService: DataService,