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);
+    }
+  }
+}

apps/angular/1-projection/src/assets/svg/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>

apps/angular/1-projection/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Projection</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

apps/angular/1-projection/src/main.ts

@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent);

apps/angular/1-projection/src/polyfills.ts

@@ -0,0 +1,52 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js'; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

apps/angular/1-projection/src/styles.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/angular/1-projection/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';