feat: add ciontact table

src/app/components/contact-list-table/contact-list-table.html

@@ -0,0 +1,22 @@
+<div>
+<table class="contact-list">
+    <thead>
+        <tr>
+            <th>{{strings.name}}</th>
+            <th>{{strings.company}}</th> 
+            <th>{{strings.phone}}</th> 
+            <th>{{strings.actions}}</th>   
+        </tr>
+    </thead>
+    <tbody>
+        @for(contact of contactList(); track contact.id ) {
+        <tr [style.display]="'table-row'">
+            <td>{{contact.name}}</td>
+            <td>{{contact.company}}</td>
+            <td>{{contact.phone}}</td>
+            <td><app-contact-actions-bar (editContact)="edit(contact.id)" (deleteContact)="delete(contact.id)"/></td>
+        </tr>
+    }
+    </tbody> 
+</table>
+</div>

src/app/components/contact-list-table/contact-list-table.scss

@@ -0,0 +1,29 @@
+:host {
+    overflow: auto;
+}
+div:first-of-type {
+
+    margin-top: 1rem;
+}
+.contact-list {
+    width: 100%;
+    border-collapse: collapse;
+    
+    & thead {
+        background-color: var(--primary);
+        color: white;
+        text-transform: uppercase;
+        & th {
+            padding: 1rem 0;
+        }
+        
+    }
+
+    & tbody td {
+        padding: .5rem;
+        &:nth-child(4) {
+            text-align: center;
+        }
+    }
+    
+}

src/app/components/contact-list-table/contact-list-table.spec.ts

@@ -0,0 +1,58 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactListTable } from './contact-list-table';
+import { STRINGS_INJECTOR } from '../../app.config';
+import { strings } from '../../strings';
+import { ContactService } from '../../pages/main/contact.service';
+import { ContactDTO } from '../../models/ContactDTO';
+import { By } from '@angular/platform-browser';
+import { of } from 'rxjs';
+
+describe('ContactListTable', () => {
+  let component: ContactListTable;
+  let fixture: ComponentFixture<ContactListTable>;
+  let contactService: jasmine.SpyObj<ContactService>;
+  let CONTACT_LIST_MOCK: ContactDTO[];
+
+  beforeEach(async () => {
+    contactService = jasmine.createSpyObj(ContactService.name, ['delete']);
+    CONTACT_LIST_MOCK = [new ContactDTO(1, 'MOCK', 'MOCK', '5491122222222')];
+    await TestBed.configureTestingModule({
+      imports: [ContactListTable],
+      providers: [
+        { provide: STRINGS_INJECTOR, useValue: strings },
+        { provide: ContactService, useValue: contactService },
+      ],
+    }).compileComponents();
+    contactService.delete.and.returnValue(of([]));
+    fixture = TestBed.createComponent(ContactListTable);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('contactList', CONTACT_LIST_MOCK);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('delete', () => {
+    it('should call for valid ID', () => {
+      const deleteSpy = spyOn(component, 'delete').and.callThrough();
+      const deleteButton = fixture.debugElement
+        .query(By.css('app-contact-actions-bar'))
+        .query(By.css('.btn--delete'));
+      deleteButton.triggerEventHandler('click');
+      expect(deleteSpy).toHaveBeenCalledWith(CONTACT_LIST_MOCK[0].id);
+    });
+
+    it("shouldn't call delete method if ID is falsy", () => {
+      CONTACT_LIST_MOCK[0].id = undefined;
+      const deleteButton = fixture.debugElement
+        .query(By.css('app-contact-actions-bar'))
+        .query(By.css('.btn--delete'));
+      deleteButton.triggerEventHandler('click');
+      expect(contactService.delete).not.toHaveBeenCalled();
+    });
+  });
+
+});

src/app/components/contact-list-table/contact-list-table.ts

@@ -0,0 +1,27 @@
+import { Component, inject, input } from '@angular/core';
+import { STRINGS_INJECTOR } from '../../app.config';
+import { ContactDTO } from '../../models/ContactDTO';
+import { ContactActionsBar } from "../contact-actions-bar/contact-actions-bar";
+import { ContactService } from '../../pages/main/contact.service';
+
+@Component({
+  selector: 'app-contact-list-table',
+  imports: [ContactActionsBar],
+  templateUrl: './contact-list-table.html',
+  styleUrl: './contact-list-table.scss',
+})
+export class ContactListTable {
+  contactList = input<ContactDTO[]>([]);
+  protected readonly strings = inject(STRINGS_INJECTOR);
+  private readonly contactService = inject(ContactService);
+
+  edit(id?: number) {
+    if(!id) return;
+  }
+
+  delete(id?: number) {
+    if(!id) return;
+    this.contactService.delete(id).subscribe();
+  }
+  
+}