tp-javascript-crm/app.js

import {User} from './models/User.js';
import {Address} from "./models/Address.js";
import {Geo} from "./models/Geo.js";
import {Company} from "./models/Company.js";

const usersTab = [];

const contactList = document.getElementById('contact-list');
const loadBtn = document.getElementById('load-contacts');
const contactForm = document.getElementById('contact-form');

function fetchUsers(limit) {
    return fetch(`https://jsonplaceholder.typicode.com/users?_limit=${limit}`)
        .then(response => response.json())
        .then(data => data.forEach(user => {
                addUserToTab(user);
            })
        );

}

function addUserToTab(user) {
    const newUser = new User(
        user.id,
        user.name,
        user.username,
        user.email,
        user.address,
        user.phone,
        user.website,
        user.company
    );

    if (!usersTab.some(existingUser => existingUser.email === user.email)) {
        usersTab.push(newUser);
        createContactItem(user);
    }
}

function createEditButton() {
    const btn = document.createElement('button');
    btn.classList.add('btn');
    btn.classList.add('btn-secondary');
    btn.innerHTML = `<i class="bi bi-pencil-square"></i>`;
    btn.style.margin = '0 3px';
    return btn;
}

function createDeleteButton() {
    const btn = document.createElement('button');
    btn.classList.add('btn');
    btn.classList.add('btn-danger');
    btn.innerHTML = `<i class="bi bi-trash"></i>`;
    btn.style.margin = '0 3px';
    return btn;
}

function createContactItem(user) {

    const editBtn = createEditButton();
    const deleteBtn = createDeleteButton();

    const card = document.createElement('div');

    const li = document.createElement('li');
    li.classList.add('list-group-item');
    li.classList.add("card");
    li.classList.add("shadow-sm");
    li.classList.add("p-4");
    li.innerHTML = `
        <div>
        <h5>${user.name}</h5>
        <p><strong>Email:</strong> ${user.email}</p>
        </div>
    `;
    li.style.margin = '5px 0';
    li.appendChild(deleteBtn);
    li.appendChild(editBtn);

    editBtn.addEventListener('click', () => {
        li.innerHTML = `
        <h5 id="form-title">Modifier le contact</h5>
        <div class="mb-3">
            <label for="name" class="form-label">Nom</label>
            <input type="text" id="newName" class="form-control" name="name" required>
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" id="newEmail" class="form-control" name="email" required>
        </div>
        <button type="submit" class="btn btn-secondary btn-success update-btn">Mettre à jour</button>
        <button type="button" class="btn btn-secondary btn-danger cancel-btn">Annuler</button>
    `;

        const updateBtn = li.querySelector('.update-btn');
        updateBtn.addEventListener('click', (e) => {
            e.preventDefault();
            const newName = li.querySelector('#newName').value;
            const newEmail = li.querySelector('#newEmail').value;

            usersTab[usersTab.findIndex(u => u.email === user.email)].name = newName;
            usersTab[usersTab.findIndex(u => u.email === user.email)].email = newEmail;

            user.name = newName;
            user.email = newEmail;

            createContactItem(user);
            contactList.removeChild(li);
        });

        const cancelBtn = li.querySelector('.cancel-btn');
        cancelBtn.addEventListener('click', (e) => {
            e.preventDefault();
            createContactItem(user);
            contactList.removeChild(li);
        })
    });

    deleteBtn.addEventListener('click', () => {
        const index = usersTab.findIndex(u => u.email === user.email);
        if (index !== -1) {
            usersTab.splice(index, 1);
            contactList.removeChild(li);
        }
    })

    contactList.appendChild(li);
}

function createUserFromForm() {
    const formData = new FormData(contactForm);
    return new User(
        usersTab.length + 1,
        formData.get('name'),
        formData.get('username'),
        formData.get('email'),
        new Address(
            formData.get('street'),
            formData.get('suite'),
            formData.get('city'),
            formData.get('zipcode'),
            new Geo(formData.get('lat'), formData.get('lng'))
        ),
        formData.get('phone'),
        formData.get('website'),
        new Company(formData.get('companyName'), formData.get('catchPhrase'), formData.get('bs'))
    );
}

function postNewUser(newUser) {
    fetch(`https://jsonplaceholder.typicode.com/users`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(newUser)

    })
        .then(response => {
                console.log(response);
                if (response.ok) {
                    addUserToTab(newUser);
                }
            }
        );
}

loadBtn.addEventListener('click', async (e) => {
    e.preventDefault();
    await fetchUsers(2);
});

contactForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const newUser = createUserFromForm();
    postNewUser(newUser);
    contactForm.reset();
});