setup project

apps/projection/src/app/ui/card/card.component.html

@@ -0,0 +1,29 @@
+<div class="border-2 border-black rounded-md p-4 w-fit flex flex-col gap-3" [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="border border-blue-500 bg-blue-300 p-2 rounded-sm"
+    (click)="addNewItem()"
+  >
+    Add
+  </button>
+</div>

apps/projection/src/app/ui/card/card.component.ts

@@ -0,0 +1,34 @@
+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',
+  templateUrl: './card.component.html',
+  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/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 border-grey-300 py-1 px-2 flex justify-between">
+      {{ 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);
+    }
+  }
+}