Add project's actions

Add actions to project card

Author: mrOranger

task-manager/src/app/projects/components/project-list-item/project-list-item.component.css

@@ -15,6 +15,10 @@
       transition: 0.4s ease-in-out;
 }
 
+.project-title {
+      border-bottom: 1px solid black;
+}
+
 .project-title,
 .project-description,
 .project-dates {
@@ -61,12 +65,7 @@
       gap: 1em;
 }
 
-:host:hover {
-      transform: scale(1.02);
-      background-color: var(--accent);
-}
-
-:host:active {
+:host:active:not(:has(.button:active)) {
       transform: scale(0.98);
       background-color: var(--accent);
 }
@@ -75,3 +74,34 @@
       transform: scale(0.98);
       background-color: var(--accent);
 }
+
+.project-actions {
+      width: 100%;
+      height: 100%;
+      display: inline-flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      gap: 0.5em;
+      border-top: 1px solid black;
+      padding: 1em 0em;
+      box-sizing: border-box;
+}
+
+.project-actions .button {
+      width: 100%;
+}
+
+.project-actions .update-button {
+      background-color: rgba(from var(--info) r g b / 0.5);
+}
+
+.project-actions .delete-button {
+      background-color: rgba(from var(--error) r g b / 0.5);
+}
+
+.button {
+      display: inline-flex;
+      justify-content: space-around;
+      align-items: center;
+}

task-manager/src/app/projects/components/project-list-item/project-list-item.component.html

@@ -4,3 +4,11 @@ <h2 class="project-title">{{ title }}</h2>
       <tm-tag [label]="startingAt" type="info" [icon]="clock"></tm-tag>
       <tm-tag [label]="endingAt" type="info" [icon]="clock"></tm-tag>
 </div>
+<div class="project-actions">
+      <button tmButton class="button update-button" (click)="onUpdate($event)">
+            Update <fa-icon class="icon" [icon]="pencil"></fa-icon>
+      </button>
+      <button tmButton class="button delete-button" (click)="onDelete($event)">
+            Delete <fa-icon class="icon" [icon]="trash"></fa-icon>
+      </button>
+</div>

task-manager/src/app/projects/components/project-list-item/project-list-item.component.ts

@@ -1,17 +1,24 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, HostBinding, inject, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Project, TagComponent } from 'src/app/shared';
+import { ButtonComponent, Project, StoreProjectService, TagComponent } from 'src/app/shared';
 import * as moment from 'moment';
-import { faClock } from '@fortawesome/free-solid-svg-icons';
+import { faClock, faPencilAlt, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @Component({
       standalone: true,
       selector: 'tm-project-list-item',
-      imports: [CommonModule, TagComponent],
       templateUrl: './project-list-item.component.html',
       styleUrls: ['./project-list-item.component.css'],
+      imports: [CommonModule, TagComponent, ButtonComponent, FontAwesomeModule],
 })
 export class ProjectListItemComponent {
+      private readonly storeProjectService: StoreProjectService;
+
+      public constructor() {
+            this.storeProjectService = inject(StoreProjectService);
+      }
+
       @Input() public project!: Project;
 
       @HostBinding('attr.draggable')
@@ -31,11 +38,28 @@ export class ProjectListItemComponent {
             return faClock;
       }
 
+      public get pencil() {
+            return faPencilAlt;
+      }
+
+      public get trash() {
+            return faTrash;
+      }
+
       public get startingAt() {
             return `Starting at: ${moment(this.project.startingAt).format('DD/MM/YYYY')}`;
       }
 
       public get endingAt() {
             return `Ending at: ${moment(this.project.endingAt).format('DD/MM/YYYY')}`;
       }
+
+      public onUpdate(event: MouseEvent) {
+            event.stopImmediatePropagation();
+      }
+
+      public onDelete(event: MouseEvent) {
+            event.stopImmediatePropagation();
+            this.storeProjectService.delete(this.project, 'id');
+      }
 }

task-manager/src/app/projects/components/project-list/project-list.component.css

@@ -8,4 +8,5 @@
       grid-template-columns: repeat(4, 1fr);
       gap: 1em;
       padding: 1em 2em;
+      box-sizing: border-box;
 }

task-manager/src/app/shared/services/store-collection.service.ts

@@ -23,6 +23,6 @@ export abstract class StoreCollectionService<T> extends StoreService<T[]> {
       }
 
       public delete(item: T, keyName: keyof T): void {
-            this.value = this.value.filter((anItem) => anItem[keyName] === item[keyName]);
+            this.value = this.value.filter((anItem) => anItem[keyName] !== item[keyName]);
       }
 }