refactor: handle save contact, add contact list, update template

src/app/pages/main/main.html

@@ -1,4 +1,14 @@
-<app-card
-    bgColor="var(--secondary)"
-><app-contact-form class="form"></app-contact-form>
+<app-main-header [title]="strings.contactList"/>
+<app-card bgColor="var(--secondary)">
+    <app-contact-form class="form" (contact)="save($event)">
+        <app-form-header 
+            [subtitle]="strings.allFieldRequired|upperfirst"
+            [title]="strings.addContact|upperfirst" 
+            slot="header"
+        />
+    </app-contact-form>
 </app-card>
+<app-card bgColor="#fff">
+    <app-contact-list/>
+</app-card>
+<footer></footer>

src/app/pages/main/main.scss

@@ -1,5 +1,8 @@
 app-card {
-  margin-top: 2rem;
+  &:first-of-type {
+    margin-top: 2rem;  
+  }
+  margin-top: 3rem;
   width: 100%;
 }
 
@@ -11,3 +14,7 @@ app-contact-form {
   display: inline-block;
   padding: 3rem;
 }
+
+footer {
+  margin-top: 60px;
+}

src/app/pages/main/main.spec.ts

@@ -3,15 +3,27 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Main } from './main';
 import { STRINGS_INJECTOR } from '../../app.config';
 import { strings } from '../../strings';
+import { ContactService } from './contact.service';
+import { ContactList } from '../../components/contact-list/contact-list';
+import { of } from 'rxjs';
+import { ContactDTO } from '../../models/ContactDTO';
+import { By } from '@angular/platform-browser';
+import { ContactForm } from '../../components/contact-form/contact-form';
 
 describe('Main', () => {
   let component: Main;
   let fixture: ComponentFixture<Main>;
+  let contactService: jasmine.SpyObj<ContactService>;
   
   beforeEach(async () => {
+    contactService = jasmine.createSpyObj(ContactList.name, ['getAll', 'save']);
+    contactService.getAll.and.returnValue(of([]));
     await TestBed.configureTestingModule({
       imports: [Main],
-      providers: [{ provide: STRINGS_INJECTOR, useValue: strings }],
+      providers: [
+        { provide: STRINGS_INJECTOR, useValue: strings },
+        { provide: ContactService, useValue: contactService }
+      ],
     }).compileComponents();
     fixture = TestBed.createComponent(Main);
     component = fixture.componentInstance;
@@ -21,4 +33,13 @@ describe('Main', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should call save on contact event', () => {
+    contactService.save.and.returnValue(of([]));
+    const saveSpy = spyOn(component, 'save').and.callThrough();
+    const CONTACT_MOCK = new ContactDTO()
+    const contactForm: ContactForm = fixture.debugElement.query(By.css('app-contact-form')).componentInstance;
+    contactForm.contact.emit(CONTACT_MOCK);
+    expect(saveSpy).toHaveBeenCalledOnceWith(CONTACT_MOCK);
+  });
 });

src/app/pages/main/main.ts

@@ -1,11 +1,25 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Card } from '../../components/card/card';
 import { ContactForm } from '../../components/contact-form/contact-form';
+import { ContactList } from '../../components/contact-list/contact-list';
+import { ContactService } from './contact.service';
+import { ContactDTO } from '../../models/ContactDTO';
+import { FormHeader } from '../../components/form-header/form-header';
+import { STRINGS_INJECTOR } from '../../app.config';
+import { UpperfirstPipe } from '../../pipes/upperfirst-pipe';
+import { MainHeader } from '../../components/main-header/main-header';
 
 @Component({
   selector: 'app-main',
-  imports: [Card, ContactForm],
+  imports: [Card, ContactForm, ContactList, FormHeader, MainHeader, UpperfirstPipe],
   templateUrl: './main.html',
   styleUrl: './main.scss',
 })
-export class Main {}
+export class Main {
+  private readonly contactService = inject(ContactService);
+  protected readonly strings = inject(STRINGS_INJECTOR);
+
+  save(contactDTO: ContactDTO) {
+    this.contactService.save(contactDTO).subscribe();
+  }
+}