refactor: change projection and anchor navigation

apps/angular/1-projection/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {}
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

apps/angular/1-projection/README.md

@@ -0,0 +1,13 @@
+# Projection
+
+> author: thomas-laforge
+
+### Run Application
+
+```bash
+npx nx serve angular-projection
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/1-projection/).

apps/angular/1-projection/jest.config.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+export default {
+  displayName: 'angular-projection',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {},
+  coverageDirectory: '../../../coverage/apps/angular/1-projection',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

apps/angular/1-projection/project.json

@@ -0,0 +1,81 @@
+{
+  "name": "angular-projection",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/angular/1-projection/src",
+  "prefix": "app",
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/angular/1-projection",
+        "index": "apps/angular/1-projection/src/index.html",
+        "browser": "apps/angular/1-projection/src/main.ts",
+        "polyfills": ["apps/angular/1-projection/src/polyfills.ts"],
+        "tsConfig": "apps/angular/1-projection/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          "apps/angular/1-projection/src/favicon.ico",
+          "apps/angular/1-projection/src/assets"
+        ],
+        "styles": ["apps/angular/1-projection/src/styles.scss"],
+        "scripts": [],
+        "allowedCommonJsDependencies": ["seedrandom"]
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "angular-projection:build:production"
+        },
+        "development": {
+          "buildTarget": "angular-projection:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "angular-projection:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/angular/1-projection/jest.config.ts"
+      }
+    }
+  },
+  "tags": []
+}

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';

apps/angular/1-projection/tailwind.config.js

@@ -0,0 +1,14 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

apps/angular/1-projection/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [],
+    "target": "ES2022",
+    "useDefineForClassFields": false
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts"]
+}

apps/angular/1-projection/tsconfig.editor.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*.ts"],
+  "compilerOptions": {
+    "types": ["jest", "node"]
+  }
+}

apps/angular/1-projection/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.editor.json"
+    }
+  ],
+  "compilerOptions": {
+    "target": "es2020",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

apps/angular/1-projection/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+}