refactor: change projection and anchor navigation

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

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { CityCardComponent } from './component/city-card/city-card.component';
+import { StudentCardComponent } from './component/student-card/student-card.component';
+import { TeacherCardComponent } from './component/teacher-card/teacher-card.component';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div class="grid grid-cols-3 gap-3">
+      <app-teacher-card></app-teacher-card>
+      <app-student-card></app-student-card>
+      <app-city-card></app-city-card>
+    </div>
+  `,
+  standalone: true,
+  imports: [TeacherCardComponent, StudentCardComponent, CityCardComponent],
+})
+export class AppComponent {}

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

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-city-card',
+  template: 'TODO City',
+  standalone: true,
+  imports: [],
+})
+export class CityCardComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { FakeHttpService } 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';
+
+@Component({
+  selector: 'app-student-card',
+  template: `
+    <app-card
+      [list]="students"
+      [type]="cardType"
+      customClass="bg-light-green"></app-card>
+  `,
+  standalone: true,
+  styles: [
+    `
+      ::ng-deep .bg-light-green {
+        background-color: rgba(0, 250, 0, 0.1);
+      }
+    `,
+  ],
+  imports: [CardComponent],
+})
+export class StudentCardComponent implements OnInit {
+  students: Student[] = [];
+  cardType = CardType.STUDENT;
+
+  constructor(
+    private http: FakeHttpService,
+    private store: StudentStore,
+  ) {}
+
+  ngOnInit(): void {
+    this.http.fetchStudents$.subscribe((s) => this.store.addAll(s));
+
+    this.store.students$.subscribe((s) => (this.students = s));
+  }
+}

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

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { FakeHttpService } 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';
+
+@Component({
+  selector: 'app-teacher-card',
+  template: `
+    <app-card
+      [list]="teachers"
+      [type]="cardType"
+      customClass="bg-light-red"></app-card>
+  `,
+  styles: [
+    `
+      ::ng-deep .bg-light-red {
+        background-color: rgba(250, 0, 0, 0.1);
+      }
+    `,
+  ],
+  standalone: true,
+  imports: [CardComponent],
+})
+export class TeacherCardComponent implements OnInit {
+  teachers: Teacher[] = [];
+  cardType = CardType.TEACHER;
+
+  constructor(
+    private http: FakeHttpService,
+    private store: TeacherStore,
+  ) {}
+
+  ngOnInit(): void {
+    this.http.fetchTeachers$.subscribe((t) => this.store.addAll(t));
+
+    this.store.teachers$.subscribe((t) => (this.teachers = t));
+  }
+}

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

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { City } from '../model/city.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CityStore {
+  private cities = new BehaviorSubject<City[]>([]);
+  cities$ = this.cities.asObservable();
+
+  addAll(cities: City[]) {
+    this.cities.next(cities);
+  }
+
+  addOne(student: City) {
+    this.cities.next([...this.cities.value, student]);
+  }
+
+  deleteOne(id: number) {
+    this.cities.next(this.cities.value.filter((s) => s.id !== id));
+  }
+}

apps/angular/1-projection/src/app/data-access/fake-http.service.ts

@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+import {
+  incrementalNumber,
+  rand,
+  randCity,
+  randCountry,
+  randFirstName,
+  randLastName,
+  randNumber,
+  randWord,
+} from '@ngneat/falso';
+import { map, timer } from 'rxjs';
+import { City } from '../model/city.model';
+import { Student } from '../model/student.model';
+import { Teacher, subject } from '../model/teacher.model';
+
+const factoryTeacher = incrementalNumber();
+
+export const randTeacher = () => ({
+  id: factoryTeacher(),
+  firstName: randFirstName(),
+  lastName: randLastName(),
+  subject: rand(subject),
+});
+
+const teachers: Teacher[] = [
+  randTeacher(),
+  randTeacher(),
+  randTeacher(),
+  randTeacher(),
+];
+
+const factoryStudent = incrementalNumber();
+
+export const randStudent = (): Student => ({
+  id: factoryStudent(),
+  firstName: randFirstName(),
+  lastName: randLastName(),
+  mainTeacher: teachers[randNumber({ max: teachers.length - 1 })],
+  school: randWord(),
+});
+
+const students: Student[] = [
+  randStudent(),
+  randStudent(),
+  randStudent(),
+  randStudent(),
+  randStudent(),
+];
+
+const factoryCity = incrementalNumber();
+
+export const randomCity = (): City => ({
+  id: factoryCity(),
+  name: randCity(),
+  country: randCountry(),
+});
+
+const cities = [randomCity(), randomCity(), randomCity()];
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FakeHttpService {
+  fetchTeachers$ = timer(500).pipe(map(() => teachers));
+  fetchStudents$ = timer(500).pipe(map(() => students));
+  fetchCities$ = timer(500).pipe(map(() => cities));
+}

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

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Student } from '../model/student.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StudentStore {
+  private students = new BehaviorSubject<Student[]>([]);
+  students$ = this.students.asObservable();
+
+  addAll(students: Student[]) {
+    this.students.next(students);
+  }
+
+  addOne(student: Student) {
+    this.students.next([...this.students.value, student]);
+  }
+
+  deleteOne(id: number) {
+    this.students.next(this.students.value.filter((s) => s.id !== id));
+  }
+}

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

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Teacher } from '../model/teacher.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TeacherStore {
+  private teachers = new BehaviorSubject<Teacher[]>([]);
+  teachers$ = this.teachers.asObservable();
+
+  addAll(teachers: Teacher[]) {
+    this.teachers.next(teachers);
+  }
+
+  addOne(teacher: Teacher) {
+    this.teachers.next([...this.teachers.value, teacher]);
+  }
+
+  deleteOne(id: number) {
+    this.teachers.next(this.teachers.value.filter((t) => t.id !== id));
+  }
+}

apps/angular/1-projection/src/app/model/card.model.ts

@@ -0,0 +1,5 @@
+export enum CardType {
+  TEACHER,
+  STUDENT,
+  CITY,
+}

apps/angular/1-projection/src/app/model/city.model.ts

@@ -0,0 +1,5 @@
+export interface City {
+  id: number;
+  name: string;
+  country: string;
+}

apps/angular/1-projection/src/app/model/student.model.ts

@@ -0,0 +1,9 @@
+import { Teacher } from './teacher.model';
+
+export interface Student {
+  id: number;
+  firstName: string;
+  lastName: string;
+  mainTeacher: Teacher;
+  school: string;
+}

apps/angular/1-projection/src/app/model/teacher.model.ts

@@ -0,0 +1,15 @@
+export const subject = [
+  'Sciences',
+  'History',
+  'English',
+  'Maths',
+  'Sport',
+] as const;
+export type Subject = (typeof subject)[number];
+
+export interface Teacher {
+  id: number;
+  firstName: string;
+  lastName: string;
+  subject: Subject;
+}

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

@@ -0,0 +1,61 @@
+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 { ListItemComponent } from '../list-item/list-item.component';
+
+@Component({
+  selector: 'app-card',
+  template: `
+    <div
+      class="flex w-fit flex-col gap-3 rounded-md border-2 border-black p-4"
+      [class]="customClass">
+      <img
+        *ngIf="type === CardType.TEACHER"
+        src="assets/img/teacher.png"
+        width="200px" />
+      <img
+        *ngIf="type === CardType.STUDENT"
+        src="assets/img/student.webp"
+        width="200px" />
+
+      <section>
+        <app-list-item
+          *ngFor="let item of list"
+          [name]="item.firstName"
+          [id]="item.id"
+          [type]="type"></app-list-item>
+      </section>
+
+      <button
+        class="rounded-sm border border-blue-500 bg-blue-300 p-2"
+        (click)="addNewItem()">
+        Add
+      </button>
+    </div>
+  `,
+  standalone: true,
+  imports: [NgIf, NgFor, ListItemComponent],
+})
+export class CardComponent {
+  @Input() list: any[] | null = null;
+  @Input() type!: CardType;
+  @Input() customClass = '';
+
+  CardType = CardType;
+
+  constructor(
+    private teacherStore: TeacherStore,
+    private studentStore: StudentStore,
+  ) {}
+
+  addNewItem() {
+    if (this.type === CardType.TEACHER) {
+      this.teacherStore.addOne(randTeacher());
+    } else if (this.type === CardType.STUDENT) {
+      this.studentStore.addOne(randStudent());
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+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';
+
+@Component({
+  selector: 'app-list-item',
+  template: `
+    <div class="border-grey-300 flex justify-between border px-2 py-1">
+      {{ name }}
+      <button (click)="delete(id)">
+        <img class="h-5" src="assets/svg/trash.svg" />
+      </button>
+    </div>
+  `,
+  standalone: true,
+})
+export class ListItemComponent {
+  @Input() id!: number;
+  @Input() name!: string;
+  @Input() type!: CardType;
+
+  constructor(
+    private teacherStore: TeacherStore,
+    private studentStore: StudentStore,
+  ) {}
+
+  delete(id: number) {
+    if (this.type === CardType.TEACHER) {
+      this.teacherStore.deleteOne(id);
+    } else if (this.type === CardType.STUDENT) {
+      this.studentStore.deleteOne(id);
+    }
+  }
+}