feat: implementada diretiva log

README.md

@@ -513,3 +513,7 @@ npx nx g @schematics/angular:service --name=auth --project=auth-data-access --fl
 ```
 
 Criamos a função `authGuard` para ser utilizada como guarda da rota de login que redireciona para a home caso o usuário já esteja autenticado ou retorna `true` no `canActivate` caso contrário, permitindo o acesso à tela de autenticação.
+
+## ✨ Aula 24
+
+Criamos, implementamos alguns casos de uso e escrevemos testes para a diretiva `Log`. Mais sobre diretivas pode ser visto [neste link](https://andrewrosario.medium.com/desmistificando-as-poderosas-diretivas-no-angular-ad2c3840a712) e [neste link](https://andrewrosario.medium.com/injetando-componentes-no-angular-através-de-diretivas-cae90992e83).

modules/feature/home/src/lib/directives/log/log.directive.spec.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { mockProducts } from '@ecommerce/product-data-access';
+import { ProductCardComponent } from '@ecommerce/product-ui';
+import { LogDirective } from './log.directive';
+
+@Component({
+    template: `
+        <ecommerce-product-card
+            ecommerceLog
+            [product]="product"
+        ></ecommerce-product-card>
+    `,
+})
+class HostComponent {
+    product = mockProducts[0];
+}
+
+describe('LogDirective', () => {
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [HostComponent],
+            imports: [LogDirective, ProductCardComponent],
+            providers: [provideRouter([])],
+        }).compileComponents();
+    });
+
+    it('should have cursor pointer', () => {
+        const fixture = TestBed.createComponent(HostComponent);
+        fixture.detectChanges();
+        const card: HTMLElement = fixture.nativeElement.querySelector(
+            'ecommerce-product-card'
+        );
+        expect(card.style.cursor).toBe('pointer');
+    });
+});

modules/feature/home/src/lib/directives/log/log.directive.ts

@@ -0,0 +1,43 @@
+import {
+    Directive,
+    ElementRef,
+    EventEmitter,
+    HostListener,
+    inject,
+    OnInit,
+    Output,
+    Renderer2,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { ProductCardComponent } from '@ecommerce/product-ui';
+
+@Directive({
+    selector: '[ecommerceLog]',
+    standalone: true,
+})
+export class LogDirective implements OnInit {
+    @Output() doubleClick = new EventEmitter<void>();
+
+    router = inject(Router);
+    productCardComponent = inject(ProductCardComponent);
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+
+    @HostListener('click', ['$event'])
+    onClick(): void {
+        this.router.navigate(['product', this.productCardComponent.product.id]);
+    }
+
+    @HostListener('dblclick', ['$event'])
+    onDoubleClick(): void {
+        this.doubleClick.emit();
+    }
+
+    ngOnInit(): void {
+        this.renderer.setStyle(
+            this.elementRef.nativeElement,
+            'cursor',
+            'pointer'
+        );
+    }
+}

modules/feature/home/src/lib/home/home.component.html

@@ -4,7 +4,7 @@ <h2>Produtos recomendados para você</h2>
 
         <div class="product-card-container">
             @for (product of products$ | async; track product.id) {
-            <ecommerce-product-card [product]="product" />
+            <ecommerce-product-card [product]="product" ecommerceLog />
             } @empty {
             <strong
                 >Não temos produtos recomendados para você por enquanto.</strong

modules/feature/home/src/lib/home/home.component.ts

@@ -2,11 +2,12 @@ import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RecommendedProductsService } from '@ecommerce/product-data-access';
 import { ProductCardComponent } from '@ecommerce/product-ui';
+import { LogDirective } from '../directives/log/log.directive';
 
 @Component({
     selector: 'ecommerce-home',
     standalone: true,
-    imports: [CommonModule, ProductCardComponent],
+    imports: [CommonModule, ProductCardComponent, LogDirective],
     templateUrl: './home.component.html',
     styleUrl: './home.component.css',
 })