Merge pull request #24 from FelipeDuarteLuna/19-02-2024 - Directives

Add log Directive

modules/data-access/auth/src/lib/guards/auth/auth.guard.spec.ts

@@ -1,7 +1,8 @@
 import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { AuthService, authGuard } from 'auth-data-access';
 import { of } from 'rxjs';
+import { AuthService } from '../../auth/auth.service';
+import { authGuard } from './auth.guard';
 
 describe('authGuard', () => {
   it('should return true when user is not truthy', () => {

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

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

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

@@ -0,0 +1,46 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+  Renderer2,
+  inject,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { ProductCardComponent } from 'modules/ui/product/src/components/product-card.component';
+
+@Directive({
+  selector: '[libLog]',
+  standalone: true,
+})
+export class LogDirective implements OnInit {
+  @Input() id = '';
+  @Output() doubleClick = new EventEmitter<void>();
+
+  router = inject(Router);
+  productCardComponent = inject(ProductCardComponent);
+  elementRef = inject(ElementRef);
+  renderer = inject(Renderer2);
+
+  ngOnInit(): void {
+    this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'pointer');
+  }
+
+  @HostListener('click', ['$event'])
+  onClick(): void {
+    // eslint-disable-next-line no-console
+    console.log('Cliclou no CARD: ', this.id);
+    //this.router.navigate(['product',this.id]);
+    // eslint-disable-next-line no-console
+    console.log(this.elementRef.nativeElement);
+    this.router.navigate(['product', this.productCardComponent.product.id]);
+  }
+
+  @HostListener('dblclick', ['$event'])
+  onDoubleClick(): void {
+    this.doubleClick.emit();
+  }
+}

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

@@ -4,12 +4,14 @@ import { RouterModule } from '@angular/router';
 import { homeRoutes } from './lib.routes';
 import { HomeComponent } from './home/home.component';
 import { ProductCardComponent } from 'product-ui';
+import { LogDirective } from './directives/log/log.directive';
 
 @NgModule({
   imports: [
     CommonModule,
     RouterModule.forChild(homeRoutes),
     ProductCardComponent,
+    LogDirective,
   ],
   declarations: [HomeComponent],
 })

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

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

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

@@ -10,4 +10,9 @@ export class HomeComponent {
   constructor(private recommendedProductsService: RecommendedProductsService) {}
 
   products$ = this.recommendedProductsService.getProducts();
+
+  log() {
+    // eslint-disable-next-line no-console
+    console.log('Nosso DoubleClick funcionou');
+  }
 }