From 459e8312e6b8f806c25b3521567d7a2c14c43709 Mon Sep 17 00:00:00 2001 From: Fakhriddin Abdurakhimov Date: Sat, 18 Jan 2025 18:16:09 +0100 Subject: [PATCH 1/2] feat(Answer:1): projection --- .../city-card/city-card.component.ts | 50 ++++++++++++- .../student-card/student-card.component.ts | 28 +++++-- .../teacher-card/teacher-card.component.ts | 28 +++++-- .../src/app/ui/card/card.component.ts | 73 +++++++------------ .../app/ui/list-item/list-item.component.ts | 18 +---- 5 files changed, 119 insertions(+), 78 deletions(-) diff --git a/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts b/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts index 47b089650..3542b7450 100644 --- a/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts +++ b/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts @@ -1,12 +1,54 @@ import { Component, OnInit } from '@angular/core'; +import { CityStore } from '../../data-access/city.store'; +import { + FakeHttpService, + randomCity, +} from '../../data-access/fake-http.service'; +import { City } from '../../model/city.model'; +import { CardComponent } from '../../ui/card/card.component'; @Component({ selector: 'app-city-card', - template: 'TODO City', - imports: [], + template: ` + +
+ +
+ + `, + styles: [ + ` + .bg-light-green { + background-color: rgba(0, 250, 0, 0.1); + } + `, + ], + imports: [CardComponent], }) export class CityCardComponent implements OnInit { - constructor() {} + cities: City[] = []; + getListItemName = (city: City) => city.name; - ngOnInit(): void {} + constructor( + private http: FakeHttpService, + private store: CityStore, + ) {} + + ngOnInit(): void { + this.http.fetchCities$.subscribe((e) => this.store.addAll(e)); + this.store.cities$.subscribe((e) => (this.cities = e)); + } + + handleAddNewItemEvent() { + this.store.addOne(randomCity()); + } + + handleDeleteItemEvent(id: number) { + this.store.deleteOne(id); + } } diff --git a/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts b/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts index dae48a2d5..d09181114 100644 --- a/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts +++ b/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts @@ -1,7 +1,9 @@ import { Component, OnInit } from '@angular/core'; -import { FakeHttpService } from '../../data-access/fake-http.service'; +import { + FakeHttpService, + randStudent, +} from '../../data-access/fake-http.service'; import { StudentStore } from '../../data-access/student.store'; -import { CardType } from '../../model/card.model'; import { Student } from '../../model/student.model'; import { CardComponent } from '../../ui/card/card.component'; @@ -10,12 +12,18 @@ import { CardComponent } from '../../ui/card/card.component'; template: ` + [getListItemName]="getListItemName" + class="bg-light-green" + (addNewItemEvent)="handleAddNewItemEvent()" + (deleteItemEvent)="handleDeleteItemEvent($event)"> +
+ +
+ `, styles: [ ` - ::ng-deep .bg-light-green { + .bg-light-green { background-color: rgba(0, 250, 0, 0.1); } `, @@ -24,7 +32,7 @@ import { CardComponent } from '../../ui/card/card.component'; }) export class StudentCardComponent implements OnInit { students: Student[] = []; - cardType = CardType.STUDENT; + getListItemName = (student: Student) => student.firstName; constructor( private http: FakeHttpService, @@ -36,4 +44,12 @@ export class StudentCardComponent implements OnInit { this.store.students$.subscribe((s) => (this.students = s)); } + + handleAddNewItemEvent() { + this.store.addOne(randStudent()); + } + + handleDeleteItemEvent(id: number) { + this.store.deleteOne(id); + } } diff --git a/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts b/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts index 815cde9d5..e6bfcfc5c 100644 --- a/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts +++ b/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts @@ -1,7 +1,9 @@ import { Component, OnInit } from '@angular/core'; -import { FakeHttpService } from '../../data-access/fake-http.service'; +import { + FakeHttpService, + randTeacher, +} from '../../data-access/fake-http.service'; import { TeacherStore } from '../../data-access/teacher.store'; -import { CardType } from '../../model/card.model'; import { Teacher } from '../../model/teacher.model'; import { CardComponent } from '../../ui/card/card.component'; @@ -10,12 +12,18 @@ import { CardComponent } from '../../ui/card/card.component'; template: ` + [getListItemName]="getListItemName" + class="bg-light-red" + (addNewItemEvent)="handleAddNewItemEvent()" + (deleteItemEvent)="handleDeleteItemEvent($event)"> +
+ +
+ `, styles: [ ` - ::ng-deep .bg-light-red { + .bg-light-red { background-color: rgba(250, 0, 0, 0.1); } `, @@ -24,7 +32,7 @@ import { CardComponent } from '../../ui/card/card.component'; }) export class TeacherCardComponent implements OnInit { teachers: Teacher[] = []; - cardType = CardType.TEACHER; + getListItemName = (teacher: Teacher) => teacher.firstName; constructor( private http: FakeHttpService, @@ -36,4 +44,12 @@ export class TeacherCardComponent implements OnInit { this.store.teachers$.subscribe((t) => (this.teachers = t)); } + + handleAddNewItemEvent() { + this.store.addOne(randTeacher()); + } + + handleDeleteItemEvent(id: number) { + this.store.deleteOne(id); + } } diff --git a/apps/angular/1-projection/src/app/ui/card/card.component.ts b/apps/angular/1-projection/src/app/ui/card/card.component.ts index ca3c661de..3475a6ce6 100644 --- a/apps/angular/1-projection/src/app/ui/card/card.component.ts +++ b/apps/angular/1-projection/src/app/ui/card/card.component.ts @@ -1,60 +1,39 @@ -import { NgFor, NgIf } from '@angular/common'; -import { Component, Input } from '@angular/core'; -import { randStudent, randTeacher } from '../../data-access/fake-http.service'; -import { StudentStore } from '../../data-access/student.store'; -import { TeacherStore } from '../../data-access/teacher.store'; -import { CardType } from '../../model/card.model'; +import { NgFor } from '@angular/common'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; import { ListItemComponent } from '../list-item/list-item.component'; @Component({ selector: 'app-card', template: ` -
- - - -
- -
- - -
+ +
+ +
+ `, - imports: [NgIf, NgFor, ListItemComponent], + imports: [NgFor, ListItemComponent], + host: { + class: 'border-2 border-black rounded-md p-4 w-fit flex flex-col gap-3', + }, }) export class CardComponent { @Input() list: any[] | null = null; - @Input() type!: CardType; - @Input() customClass = ''; - - CardType = CardType; - - constructor( - private teacherStore: TeacherStore, - private studentStore: StudentStore, - ) {} + @Input({ required: true }) getListItemName!: (listItem: any) => string; + @Output() deleteItemEvent = new EventEmitter(); + @Output() addNewItemEvent = new EventEmitter(); addNewItem() { - if (this.type === CardType.TEACHER) { - this.teacherStore.addOne(randTeacher()); - } else if (this.type === CardType.STUDENT) { - this.studentStore.addOne(randStudent()); - } + this.addNewItemEvent.emit(); + } + handleDeleteItemEvent(id: number) { + this.deleteItemEvent.emit(id); } } diff --git a/apps/angular/1-projection/src/app/ui/list-item/list-item.component.ts b/apps/angular/1-projection/src/app/ui/list-item/list-item.component.ts index c0f9cff7f..2dbdf556a 100644 --- a/apps/angular/1-projection/src/app/ui/list-item/list-item.component.ts +++ b/apps/angular/1-projection/src/app/ui/list-item/list-item.component.ts @@ -1,7 +1,4 @@ -import { Component, Input } from '@angular/core'; -import { StudentStore } from '../../data-access/student.store'; -import { TeacherStore } from '../../data-access/teacher.store'; -import { CardType } from '../../model/card.model'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'app-list-item', @@ -18,18 +15,9 @@ import { CardType } from '../../model/card.model'; export class ListItemComponent { @Input() id!: number; @Input() name!: string; - @Input() type!: CardType; - - constructor( - private teacherStore: TeacherStore, - private studentStore: StudentStore, - ) {} + @Output() deleteItemEvent = new EventEmitter(); delete(id: number) { - if (this.type === CardType.TEACHER) { - this.teacherStore.deleteOne(id); - } else if (this.type === CardType.STUDENT) { - this.studentStore.deleteOne(id); - } + this.deleteItemEvent.emit(id); } } From c750d13af617b21348337b5f14e28cb7b277f198 Mon Sep 17 00:00:00 2001 From: Fakhriddin Abdurakhimov Date: Sat, 18 Jan 2025 19:04:10 +0100 Subject: [PATCH 2/2] feat(Answer:1): cardListItem model --- .../component/city-card/city-card.component.ts | 17 +++++++++++------ .../student-card/student-card.component.ts | 17 +++++++++++------ .../teacher-card/teacher-card.component.ts | 17 +++++++++++------ .../1-projection/src/app/model/card.model.ts | 5 +++++ .../src/app/ui/card/card.component.ts | 6 +++--- 5 files changed, 41 insertions(+), 21 deletions(-) diff --git a/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts b/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts index 3542b7450..a63a91994 100644 --- a/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts +++ b/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts @@ -4,15 +4,14 @@ import { FakeHttpService, randomCity, } from '../../data-access/fake-http.service'; -import { City } from '../../model/city.model'; +import { CardListItem } from '../../model/card.model'; import { CardComponent } from '../../ui/card/card.component'; @Component({ selector: 'app-city-card', template: ` @@ -31,8 +30,7 @@ import { CardComponent } from '../../ui/card/card.component'; imports: [CardComponent], }) export class CityCardComponent implements OnInit { - cities: City[] = []; - getListItemName = (city: City) => city.name; + cityListItems: CardListItem[] = []; constructor( private http: FakeHttpService, @@ -41,7 +39,14 @@ export class CityCardComponent implements OnInit { ngOnInit(): void { this.http.fetchCities$.subscribe((e) => this.store.addAll(e)); - this.store.cities$.subscribe((e) => (this.cities = e)); + this.store.cities$.subscribe((cities) => { + this.cityListItems = cities.map((city) => { + return { + name: city.name, + id: city.id, + }; + }); + }); } handleAddNewItemEvent() { diff --git a/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts b/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts index d09181114..163517eb0 100644 --- a/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts +++ b/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts @@ -4,15 +4,14 @@ import { randStudent, } from '../../data-access/fake-http.service'; import { StudentStore } from '../../data-access/student.store'; -import { Student } from '../../model/student.model'; +import { CardListItem } from '../../model/card.model'; import { CardComponent } from '../../ui/card/card.component'; @Component({ selector: 'app-student-card', template: ` @@ -31,8 +30,7 @@ import { CardComponent } from '../../ui/card/card.component'; imports: [CardComponent], }) export class StudentCardComponent implements OnInit { - students: Student[] = []; - getListItemName = (student: Student) => student.firstName; + studentListItems: CardListItem[] = []; constructor( private http: FakeHttpService, @@ -42,7 +40,14 @@ export class StudentCardComponent implements OnInit { ngOnInit(): void { this.http.fetchStudents$.subscribe((s) => this.store.addAll(s)); - this.store.students$.subscribe((s) => (this.students = s)); + this.store.students$.subscribe((students) => { + this.studentListItems = students.map((student) => { + return { + name: student.firstName, + id: student.id, + }; + }); + }); } handleAddNewItemEvent() { diff --git a/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts b/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts index e6bfcfc5c..2d653ae22 100644 --- a/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts +++ b/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts @@ -4,15 +4,14 @@ import { randTeacher, } from '../../data-access/fake-http.service'; import { TeacherStore } from '../../data-access/teacher.store'; -import { Teacher } from '../../model/teacher.model'; +import { CardListItem } from '../../model/card.model'; import { CardComponent } from '../../ui/card/card.component'; @Component({ selector: 'app-teacher-card', template: ` @@ -31,8 +30,7 @@ import { CardComponent } from '../../ui/card/card.component'; imports: [CardComponent], }) export class TeacherCardComponent implements OnInit { - teachers: Teacher[] = []; - getListItemName = (teacher: Teacher) => teacher.firstName; + teacherListItems: CardListItem[] = []; constructor( private http: FakeHttpService, @@ -42,7 +40,14 @@ export class TeacherCardComponent implements OnInit { ngOnInit(): void { this.http.fetchTeachers$.subscribe((t) => this.store.addAll(t)); - this.store.teachers$.subscribe((t) => (this.teachers = t)); + this.store.teachers$.subscribe((teachers) => { + this.teacherListItems = teachers.map((teacher) => { + return { + name: teacher.firstName, + id: teacher.id, + }; + }); + }); } handleAddNewItemEvent() { diff --git a/apps/angular/1-projection/src/app/model/card.model.ts b/apps/angular/1-projection/src/app/model/card.model.ts index 740cd2ae4..69c0e7d17 100644 --- a/apps/angular/1-projection/src/app/model/card.model.ts +++ b/apps/angular/1-projection/src/app/model/card.model.ts @@ -3,3 +3,8 @@ export enum CardType { STUDENT, CITY, } + +export interface CardListItem { + name: string; + id: number; +} diff --git a/apps/angular/1-projection/src/app/ui/card/card.component.ts b/apps/angular/1-projection/src/app/ui/card/card.component.ts index 3475a6ce6..1dca1c178 100644 --- a/apps/angular/1-projection/src/app/ui/card/card.component.ts +++ b/apps/angular/1-projection/src/app/ui/card/card.component.ts @@ -1,5 +1,6 @@ import { NgFor } from '@angular/common'; import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { CardListItem } from '../../model/card.model'; import { ListItemComponent } from '../list-item/list-item.component'; @Component({ @@ -9,7 +10,7 @@ import { ListItemComponent } from '../list-item/list-item.component';
@@ -25,8 +26,7 @@ import { ListItemComponent } from '../list-item/list-item.component'; }, }) export class CardComponent { - @Input() list: any[] | null = null; - @Input({ required: true }) getListItemName!: (listItem: any) => string; + @Input() list: CardListItem[] | null = null; @Output() deleteItemEvent = new EventEmitter(); @Output() addNewItemEvent = new EventEmitter();