test-angular-agenda: An HTML repository from weskleymb

Aqui está o passo a passo para criar um projeto Angular com um CRUD de contatos, onde os contatos possuem nome, e-mail, telefones com tipo (móvel ou fixo), e o formulário e a lista de contatos são exibidos lado a lado. Além disso, o botão de remover telefone é circular e a lista de contatos é exibida em ordem crescente de nome.

Passo 1: Criar um Novo Projeto Angular

No terminal, crie um novo projeto Angular sem testes e sem a pasta do projeto:
```
ng new angular-contact-crud --routing=false --style=scss --skip-tests
```
Acesse o diretório do projeto:
```
cd angular-contact-crud
```

Passo 2: Instalar Dependências Necessárias

Instale o Tailwind CSS para estilos personalizados:
```
npm install tailwindcss
```
Instale a biblioteca ngx-mask para aplicar máscaras nos campos de telefone:
```
npm install ngx-mask --save
```

Instale o Font Awesome para adicionar ícones:

npm install @fortawesome/angular-fontawesome --save

Passo 3: Configurar o Tailwind CSS

Crie o arquivo de configuração do Tailwind CSS:
```
npx tailwindcss init
```

Configure o arquivo tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Atualize o arquivo src/styles.scss para incluir o Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Passo 4: Criar o Modelo de Contato

Crie o arquivo contact.model.ts dentro da pasta src/app:

export interface Contact {
  id: number;
  name: string;
  email: string;
  phones: { type: string; number: string }[];
}

Passo 5: Criar o Banco de Dados Fictício

Crie o arquivo database.ts dentro da pasta src/assets:

import { Contact } from '../app/contact.model';

export const CONTACTS: Contact[] = [
  {
    id: 1,
    name: 'João Silva',
    email: 'joao.silva@example.com',
    phones: [
      { type: 'móvel', number: '(11) 91234-5678' },
      { type: 'fixo', number: '(11) 1234-5678' }
    ]
  },
  {
    id: 2,
    name: 'Maria Souza',
    email: 'maria.souza@example.com',
    phones: [
      { type: 'móvel', number: '(21) 98765-4321' }
    ]
  }
];

Passo 6: Criar o Serviço de Contatos

Crie o arquivo contact-service.service.ts dentro da pasta src/app:

import { Injectable } from '@angular/core';
import { Contact } from './contact.model';
import { CONTACTS } from '../assets/database';

@Injectable({
  providedIn: 'root'
})
export class ContactService {
  private contacts = CONTACTS;

  getContacts(): Contact[] {
    return this.contacts.sort((a, b) => a.name.localeCompare(b.name));
  }

  addContact(contact: Contact): void {
    contact.id = this.contacts.length + 1;
    this.contacts.push(contact);
    this.contacts.sort((a, b) => a.name.localeCompare(b.name));
  }

  updateContact(contact: Contact): void {
    const index = this.contacts.findIndex(c => c.id === contact.id);
    if (index !== -1) {
      this.contacts[index] = contact;
    }
    this.contacts.sort((a, b) => a.name.localeCompare(b.name));
  }

  deleteContact(id: number): void {
    this.contacts = this.contacts.filter(contact => contact.id !== id);
    this.contacts.sort((a, b) => a.name.localeCompare(b.name));
  }
}

Passo 7: Criar o Componente de Formulário de Contato

Crie o arquivo contact-form.component.ts dentro da pasta src/app:

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { NgFor, NgIf, FormsModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
import { Contact } from '../contact.model';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  templateUrl: './contact-form.component.html',
  imports: [FormsModule, NgFor, NgIf, FontAwesomeModule, NgxMaskDirective],
  providers: [provideNgxMask()],
})
export class ContactFormComponent {
  @Input() contact: Contact = { id: 0, name: '', email: '', phones: [{ type: 'móvel', number: '' }] };
  @Output() saveContact = new EventEmitter<Contact>();
  @Output() addPhone = new EventEmitter<void>();
  @Output() removePhone = new EventEmitter<number>();

  onSubmit() {
    this.saveContact.emit(this.contact);
  }

  onAddPhone() {
    this.addPhone.emit();
  }

  onRemovePhone(index: number) {
    this.removePhone.emit(index);
  }
}

Crie o arquivo contact-form.component.html: (Esse arquivo já foi explicado antes, mantendo o layout do formulário com o botão circular para remover telefone.)

Passo 8: Criar o Componente de Lista de Contatos

Crie o arquivo contact-list.component.ts dentro da pasta src/app: (Esse arquivo já foi explicado anteriormente, mantendo a lista de contatos e a função para formatar o telefone.)
Crie o arquivo contact-list.component.html: (Esse arquivo já foi explicado anteriormente.)

Passo 9: Criar o Componente Principal `ContactCrudComponent`

Crie o arquivo contact-crud.component.ts: (O código do componente principal já foi explicado, coordenando os dois subcomponentes para criar e listar contatos.)
Crie o arquivo contact-crud.component.html: (Esse arquivo contém o layout de formulário e lista lado a lado.)

Passo 10: Configurar o Componente Principal no AppModule

Atualize o app.component.html para exibir o componente ContactCrudComponent:
```
<app-contact-crud></app-contact-crud>
```

Adicione os estilos no styles.scss:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Passo 11: Executar o Projeto

Execute o projeto no terminal:
```
ng serve
```

Resultado:

Você terá uma aplicação Angular com:

Um formulário de contatos que permite adicionar ou editar contatos.
Uma lista de contatos exibida ao lado do formulário, ordenada alfabeticamente.
Um botão circular para remover telefones no formulário.

Se precisar de mais ajustes ou quiser personalizar algo, estarei à disposição!

weskleymb/test-angular-agenda