async function getData() {
let res = await fetch('http://localhost:3000/api/clients', {
method: 'GET'
})
return await res.json()
}
async function addNewClient(clientName, clientSurname, clientLastName) {
let res = await fetch('http://localhost:3000/api/clients', {
method: 'POST',
body: JSON.stringify({ name: clientName.value, surname: clientSurname.value, lastName: clientLastName.value }),
headers: {
'Content-Type': 'application/json'
}
})
return await res.json()
}
async function changeClient(item, clientName, clientSurname, clientLastName) {
let res = await fetch(`http://localhost:3000/api/clients/${item.id}`, {
method: 'PATCH',
body: JSON.stringify({ name: clientName.value, surname: clientSurname.value, lastName: clientLastName.value }),
headers: {
'Content-Type': 'application/json'
}
})
return await res.json()
}
async function deleteClients(item) {
let res = await fetch(`http://localhost:3000/api/clients/${item.id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
});
return await res.json()
}
let $tableBody = document.querySelector('.clients__table-body')
// Очистка таблицы значений
function clearTable() {
$tableBody.innerHTML = ''
}
// Переменные формы нового клиента
function modalNewClient() {
let $addClient = document.querySelector('.clients__add-client')
let $clientAddForm = document.querySelector('.form__wrapper')
let $clientAddFromClose = document.querySelector('.form__button-close')
let $clientAddLastName = document.querySelector('.form-client__lastname')
let $clientAddName = document.querySelector('.form-client__name')
let $clientAddSecondName = document.querySelector('.form-client__secondname')
let $saveClient = document.querySelector('.form__save')
return {
$addClient,
$clientAddForm,
$clientAddFromClose,
$clientAddLastName,
$clientAddName,
$clientAddName,
$clientAddSecondName,
$saveClient,
}
}
// СОЗДАНИЕ ДЕРЕВА ДЛЯ СТРОКИ КЛИЕНТА
function createClientDom(item) {
let $tableBodyTr = document.createElement('tr')
$tableBodyTr.classList.add('clients__table-body-tr')
$tableBody.append($tableBodyTr)
let $tableTdId = document.createElement('td')
let $tableTdName = document.createElement('td')
let $tableTdDate = document.createElement('td')
let $tableTdDateChange = document.createElement('td')
let $tableTdContacts = document.createElement('td')
let $tableTdActions = document.createElement('td')
let $clientsBtnChange = document.createElement('button')
let $clientsBtnDelete = document.createElement('button')
$clientsBtnChange.classList.add('clients__btn-change', 'btn-reset')
$tableTdId.classList.add('clients__id')
$tableTdName.classList.add('clients__name')
$tableTdDate.classList.add('clients__date')
$tableTdDateChange.classList.add('clients__change-date')
$tableTdContacts.classList.add('clients__contacts')
$clientsBtnDelete.classList.add('clients__btn-delete', 'btn-reset')
$tableTdId.textContent = item.id
$tableTdName.textContent = `${item.surname} ${item.name} ${item.lastName}`
$tableTdDate.textContent = item.createdAt
$tableTdDateChange.textContent = item.updatedAt
$tableTdContacts.textContent = item.contacts
$clientsBtnChange.textContent = 'Изменить'
$clientsBtnDelete.textContent = 'Удалить'
$clientsBtnDelete.dataset.id = `${item.id}`
$tableTdId.dataset.id = `${item.id}`
$tableBodyTr.append($tableTdId)
$tableBodyTr.append($tableTdName)
$tableBodyTr.append($tableTdDate)
$tableBodyTr.append($tableTdDateChange)
$tableBodyTr.append($tableTdContacts)
$tableBodyTr.append($tableTdActions)
$tableTdActions.append($clientsBtnChange)
$tableTdActions.append($clientsBtnDelete)
return {
$tableBody,
$tableBodyTr,
$tableTdId,
$tableTdName,
$tableTdDate,
$tableTdDateChange,
$tableTdContacts,
$tableTdActions,
$clientsBtnChange,
$clientsBtnDelete,
}
}
// Функция удаления и открытия модального окна
function confirmDelete(clientCreate, item) {
clientCreate.$clientsBtnDelete.addEventListener('click', function () {
let deleteFormConfirm = document.querySelector('.form-delete__wrapper')
deleteFormConfirm.classList.toggle('form-delete__wrapper--active')
let deleteClient = document.querySelector('.form-delete__delete-btn')
let deleteCancel = document.querySelector('.form-delete__delete-cancel')
let deleteClose = document.querySelector('.form-delete__button-close')
deleteClient.addEventListener('click', async function () {
await deleteClients(item) // функция удаления из БД
deleteFormConfirm.classList.remove('form-delete__wrapper--active')
clientCreate.$tableBodyTr.remove()
})
deleteCancel.addEventListener('click', function () {
deleteFormConfirm.classList.remove('form-delete__wrapper--active')
})
deleteClose.addEventListener('click', function () {
deleteFormConfirm.classList.remove('form-delete__wrapper--active')
})
})
}
// Функция изменения клиента и открытия модального окна
function confirmChange(clientCreate, item) {
clientCreate.$clientsBtnChange.addEventListener('click', function () {
let changeFromConfirm = document.querySelector('.form-change__wrapper')
changeFromConfirm.classList.toggle('form-change__wrapper--active')
let changeDeleteClient = document.querySelector('.form-change__delete')
let changeFormClose = document.querySelector('.form-change__button-close')
let changeFormSave = document.querySelector('.form-change__save')
changeDeleteClient.addEventListener('click', async function () {
await deleteClients(item)
changeFromConfirm.classList.remove('form-change__wrapper--active')
clientCreate.$tableBodyTr.remove()
})
changeFormClose.addEventListener('click', function () {
changeFromConfirm.classList.remove('form-change__wrapper--active')
})
let changeLastname = document.querySelector('.form-change__client-lastname')
let changeName = document.querySelector('.form-change__client-name')
let changeSecondname = document.querySelector('.form-change__client-secondname')
changeLastname.value = item.surname
changeName.value = item.name
changeSecondname.value = item.lastName
changeFormSave.addEventListener('click', async function () {
await changeClient(item, changeName, changeLastname, changeSecondname)
changeFromConfirm.classList.remove('form-change__wrapper--active')
// нужно сделать отрисовку по id
clearTable()
let secondList = await getData()
createList(secondList)
})
})
}
// Добавление значений в дерево и удаление через функцию confirmDelete + изменение
let list = await getData()
function createList(data) {
for (let item of data) {
let clientCreate = createClientDom(item)
// Удаление клиента
confirmDelete(clientCreate, item)
confirmChange(clientCreate, item)
// Нужно сделать отрисовку
}
//ругается на прошлый id
}
createList(list)
//Добавление Клиента в базу из формы создания клиента
async function putData() {
let modalDom = modalNewClient()
//Открытие формы добавления нового клиента
modalDom.$addClient.addEventListener('click', function () {
modalDom.$clientAddForm.classList.toggle('form__wrapper--active');
modalDom.$clientAddName.value = ''
modalDom.$clientAddLastName.value = ''
modalDom.$clientAddSecondName.value = ''
})
//Закрытие формы нового клиента
modalDom.$clientAddFromClose.addEventListener('click', function () {
modalDom.$clientAddForm.classList.remove('form__wrapper--active')
})
modalDom.$saveClient.addEventListener('click', async function (e) {
e.preventDefault()
await addNewClient(modalDom.$clientAddName, modalDom.$clientAddLastName, modalDom.$clientAddSecondName)
clearTable()
let secondList = await getData()
createList(secondList)
modalDom.$clientAddForm.classList.remove('form__wrapper--active')
})
}
putData()