chore: projection task done

Author: ronalisenapati70

apps/angular/1-projection/src/app/component/city-card/city-card.component.ts

@@ -1,9 +1,33 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
+import { CityStore } from '../../data-access/city.store';
+import { FakeHttpService } from '../../data-access/fake-http.service';
+import { CardType } from '../../model/card.model';
+import { CardComponent } from '../../ui/card/card.component';
 
 @Component({
   selector: 'app-city-card',
-  template: 'TODO City',
-  imports: [],
+  template: `
+    <app-card
+      [list]="cities()"
+      [type]="cardType"
+      backgroundColor="rgba(39, 85, 129, 0.1)" />
+  `,
+  imports: [CardComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CityCardComponent {}
+export class CityCardComponent implements OnInit {
+  private http = inject(FakeHttpService);
+  private store = inject(CityStore);
+
+  cities = this.store.cities;
+  cardType = CardType.CITY;
+
+  ngOnInit(): void {
+    this.http.fetchCities$.subscribe((c) => this.store.addAll(c));
+  }
+}

apps/angular/1-projection/src/app/component/student-card/student-card.component.ts

@@ -15,15 +15,8 @@ import { CardComponent } from '../../ui/card/card.component';
     <app-card
       [list]="students()"
       [type]="cardType"
-      customClass="bg-light-green" />
+      backgroundColor="rgba(0, 250, 0, 0.1)" />
   `,
-  styles: [
-    `
-      ::ng-deep .bg-light-green {
-        background-color: rgba(0, 250, 0, 0.1);
-      }
-    `,
-  ],
   imports: [CardComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts

@@ -10,15 +10,8 @@ import { CardComponent } from '../../ui/card/card.component';
     <app-card
       [list]="teachers()"
       [type]="cardType"
-      customClass="bg-light-red"></app-card>
+      backgroundColor="rgba(250, 0, 0, 0.1)"></app-card>
   `,
-  styles: [
-    `
-      ::ng-deep .bg-light-red {
-        background-color: rgba(250, 0, 0, 0.1);
-      }
-    `,
-  ],
   imports: [CardComponent],
 })
 export class TeacherCardComponent implements OnInit {

apps/angular/1-projection/src/app/data-access/city.store.ts

@@ -5,7 +5,7 @@ import { City } from '../model/city.model';
   providedIn: 'root',
 })
 export class CityStore {
-  private cities = signal<City[]>([]);
+  public cities = signal<City[]>([]);
 
   addAll(cities: City[]) {
     this.cities.set(cities);

apps/angular/1-projection/src/app/ui/card/card.component.ts

@@ -1,6 +1,11 @@
 import { NgOptimizedImage } from '@angular/common';
-import { Component, inject, input } from '@angular/core';
-import { randStudent, randTeacher } from '../../data-access/fake-http.service';
+import { Component, computed, inject, input } from '@angular/core';
+import { CityStore } from '../../data-access/city.store';
+import {
+  randomCity,
+  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';
@@ -11,18 +16,13 @@ import { ListItemComponent } from '../list-item/list-item.component';
   template: `
     <div
       class="flex w-fit flex-col gap-3 rounded-md border-2 border-black p-4"
-      [class]="customClass()">
-      @if (type() === CardType.TEACHER) {
-        <img ngSrc="assets/img/teacher.png" width="200" height="200" />
-      }
-      @if (type() === CardType.STUDENT) {
-        <img ngSrc="assets/img/student.webp" width="200" height="200" />
-      }
+      [style.backgroundColor]="backgroundColor()">
+      <img [ngSrc]="imageSrc()" width="200" height="200" />
 
       <section>
         @for (item of list(); track item) {
           <app-list-item
-            [name]="item.firstName"
+            [name]="itemName(item)"
             [id]="item.id"
             [type]="type()"></app-list-item>
         }
@@ -40,19 +40,39 @@ import { ListItemComponent } from '../list-item/list-item.component';
 export class CardComponent {
   private teacherStore = inject(TeacherStore);
   private studentStore = inject(StudentStore);
+  private cityStore = inject(CityStore);
 
   readonly list = input<any[] | null>(null);
   readonly type = input.required<CardType>();
-  readonly customClass = input('');
+  readonly backgroundColor = input('');
 
   CardType = CardType;
 
+  addHandler: Record<CardType, () => void> = {
+    [CardType.TEACHER]: () => this.teacherStore.addOne(randTeacher()),
+    [CardType.STUDENT]: () => this.studentStore.addOne(randStudent()),
+    [CardType.CITY]: () => this.cityStore.addOne(randomCity()),
+  };
+
+  nameLookup: Record<CardType, (item: any) => string> = {
+    [CardType.TEACHER]: (item: any) => item.firstName,
+    [CardType.STUDENT]: (item: any) => item.firstName,
+    [CardType.CITY]: (item: any) => item.name,
+  };
+
   addNewItem() {
-    const type = this.type();
-    if (type === CardType.TEACHER) {
-      this.teacherStore.addOne(randTeacher());
-    } else if (type === CardType.STUDENT) {
-      this.studentStore.addOne(randStudent());
-    }
+    this.addHandler[this.type()]();
+  }
+
+  itemName(item: any) {
+    return this.nameLookup[this.type()](item);
   }
+
+  imageLookup: Record<CardType, string> = {
+    [CardType.TEACHER]: 'assets/img/teacher.png',
+    [CardType.STUDENT]: 'assets/img/student.webp',
+    [CardType.CITY]: 'assets/img/city.png',
+  };
+
+  imageSrc = computed(() => this.imageLookup[this.type()]);
 }

apps/angular/1-projection/src/app/ui/list-item/list-item.component.ts

@@ -4,6 +4,7 @@ import {
   inject,
   input,
 } from '@angular/core';
+import { CityStore } from '../../data-access/city.store';
 import { StudentStore } from '../../data-access/student.store';
 import { TeacherStore } from '../../data-access/teacher.store';
 import { CardType } from '../../model/card.model';
@@ -23,17 +24,19 @@ import { CardType } from '../../model/card.model';
 export class ListItemComponent {
   private teacherStore = inject(TeacherStore);
   private studentStore = inject(StudentStore);
+  private cityStore = inject(CityStore);
 
   readonly id = input.required<number>();
   readonly name = input.required<string>();
   readonly type = input.required<CardType>();
 
+  deleteItem: Record<CardType, (id: number) => void> = {
+    [CardType.TEACHER]: (id: number) => this.teacherStore.deleteOne(id),
+    [CardType.STUDENT]: (id: number) => this.studentStore.deleteOne(id),
+    [CardType.CITY]: (id: number) => this.cityStore.deleteOne(id),
+  };
+
   delete(id: number) {
-    const type = this.type();
-    if (type === CardType.TEACHER) {
-      this.teacherStore.deleteOne(id);
-    } else if (type === CardType.STUDENT) {
-      this.studentStore.deleteOne(id);
-    }
+    this.deleteItem[this.type()](id);
   }
 }