From 1e0a493bf386a41f49914a6e0641ec8e3ea6ba30 Mon Sep 17 00:00:00 2001
From: Maxime Delporte <maxime@civiterra.fr>
Date: Tue, 22 Apr 2025 06:29:32 -0300
Subject: [PATCH] Use of ng-content: Use shared UI component. Here,
 card.component.

---
 src/app/shared/card/card.component.css  |  5 +++++
 src/app/shared/card/card.component.html |  3 +++
 src/app/shared/card/card.component.ts   | 11 +++++++++++
 src/app/task/task.component.css         |  1 -
 src/app/task/task.component.html        | 18 ++++++++++--------
 src/app/task/task.component.ts          |  5 ++++-
 src/app/tasks/tasks.component.ts        | 17 ++++++++---------
 src/app/user/user.component.css         |  6 ------
 src/app/user/user.component.html        |  4 ++--
 src/app/user/user.component.ts          |  4 ++++
 10 files changed, 47 insertions(+), 27 deletions(-)
 create mode 100644 src/app/shared/card/card.component.css
 create mode 100644 src/app/shared/card/card.component.html
 create mode 100644 src/app/shared/card/card.component.ts

diff --git a/src/app/shared/card/card.component.css b/src/app/shared/card/card.component.css
new file mode 100644
index 0000000..c34bfa6
--- /dev/null
+++ b/src/app/shared/card/card.component.css
@@ -0,0 +1,5 @@
+div {
+  border-radius: 6px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
diff --git a/src/app/shared/card/card.component.html b/src/app/shared/card/card.component.html
new file mode 100644
index 0000000..209779b
--- /dev/null
+++ b/src/app/shared/card/card.component.html
@@ -0,0 +1,3 @@
+<div>
+  <ng-content />
+</div>
diff --git a/src/app/shared/card/card.component.ts b/src/app/shared/card/card.component.ts
new file mode 100644
index 0000000..1e41d97
--- /dev/null
+++ b/src/app/shared/card/card.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-card',
+  imports: [],
+  templateUrl: './card.component.html',
+  styleUrl: './card.component.css'
+})
+export class CardComponent {
+
+}
diff --git a/src/app/task/task.component.css b/src/app/task/task.component.css
index 54ba924..cd0e48b 100644
--- a/src/app/task/task.component.css
+++ b/src/app/task/task.component.css
@@ -2,7 +2,6 @@ article {
   padding: 1rem;
   color: #25113d;
   background-color: #bf9ee5;
-  border-radius: 8px;
 }
 
 h2 {
diff --git a/src/app/task/task.component.html b/src/app/task/task.component.html
index 869184b..8d4309c 100644
--- a/src/app/task/task.component.html
+++ b/src/app/task/task.component.html
@@ -1,8 +1,10 @@
-<article>
-  <h2>{{ task.title }}</h2>
-  <time>Date: {{ task.dueDate }}</time>
-  <p>{{ task.summary }}</p>
-  <p class="actions">
-    <button (click)="onCompleteTask()">Complete</button>
-  </p>
-</article>
+<app-card>
+  <article>
+    <h2>{{ task.title }}</h2>
+    <time>Date: {{ task.dueDate }}</time>
+    <p>{{ task.summary }}</p>
+    <p class="actions">
+      <button (click)="onCompleteTask()">Complete</button>
+    </p>
+  </article>
+</app-card>
diff --git a/src/app/task/task.component.ts b/src/app/task/task.component.ts
index adfc690..2aca57c 100644
--- a/src/app/task/task.component.ts
+++ b/src/app/task/task.component.ts
@@ -1,9 +1,12 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import { Task } from './task.model';
+import {CardComponent} from '../shared/card/card.component';
 
 @Component({
   selector: 'app-task',
-  imports: [],
+  imports: [
+    CardComponent
+  ],
   templateUrl: './task.component.html',
   styleUrl: './task.component.css'
 })
diff --git a/src/app/tasks/tasks.component.ts b/src/app/tasks/tasks.component.ts
index 0f80381..4ed849f 100644
--- a/src/app/tasks/tasks.component.ts
+++ b/src/app/tasks/tasks.component.ts
@@ -1,6 +1,6 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {User} from '../user/user.model';
-import {NewTaskData, Task} from '../task/task.model';
+import { type User} from '../user/user.model';
+import { type NewTaskData, type Task } from '../task/task.model';
 import {TaskComponent} from '../task/task.component';
 import {NewTaskComponent} from './new-task/new-task.component';
 
@@ -55,18 +55,17 @@ export class TasksComponent {
     this.isAddingTask = false;
   }
 
-  onAddTask(taskContent: NewTaskData) {
+  onAddTask(taskData: NewTaskData) {
     let nextTaskId = this.tasks.length + 1;
     let taskId = 't' + (nextTaskId).toString();
 
-    let task: Task = {
+    this.tasks.push({
       id: taskId,
       userId: this.user.id,
-      title: taskContent.title,
-      summary: taskContent.summary,
-      dueDate: taskContent.date,
-    };
-    this.tasks.push(task);
+      title: taskData.title,
+      summary: taskData.summary,
+      dueDate: taskData.date,
+    });
 
     this.onCancelAddTask()
   }
diff --git a/src/app/user/user.component.css b/src/app/user/user.component.css
index 546a2f6..9e958be 100644
--- a/src/app/user/user.component.css
+++ b/src/app/user/user.component.css
@@ -1,9 +1,3 @@
-div {
-  border-radius: 6px;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-}
-
 button {
   display: flex;
   align-items: center;
diff --git a/src/app/user/user.component.html b/src/app/user/user.component.html
index 81496ba..f8b4927 100644
--- a/src/app/user/user.component.html
+++ b/src/app/user/user.component.html
@@ -1,4 +1,4 @@
-<div>
+<app-card>
   <button
     [class.active]="selected"
     (click)="onSelectUser()"
@@ -9,4 +9,4 @@
     />
     <span>{{ user.name }}</span>
   </button>
-</div>
+</app-card>
diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts
index 007c1e2..f040dd6 100644
--- a/src/app/user/user.component.ts
+++ b/src/app/user/user.component.ts
@@ -1,10 +1,14 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import { User } from './user.model';
+import {CardComponent} from '../shared/card/card.component';
 
 @Component({
   selector: 'app-user',
   standalone: true,
   templateUrl: './user.component.html',
+  imports: [
+    CardComponent
+  ],
   styleUrl: './user.component.css'
 })
 export class UserComponent {