텍스트와 input 값을 좀 더 확장성?있게 교체하는방법이 있을까요??

[89yunik]

In GitLab by @jinwoo on May 30, 2022, 20:21

const tableInfo = document.querySelector('.table-info');

function template(data) {
  return `
    <div class="columns orders-item">
      <div class="column is-2">
        <div data-show>${data.name}</div>
        <input name="name" data-modify class="input display-none" type="text" value="${data.name}">
      </div>
      <div class="column is-6 order-summary">
        <div data-show>${data.description}</div>
        <input name="description" data-modify class="input display-none" type="text" value="${data.description}">
      </div>
      <div class="column is-2">
        <button class="button btn-modify" data-show data-id="${data._id}">수정</button>
        <button class="button btn-confirm display-none" data-modify data-id="${data._id}">완료</button>
        <button class="button btn-cancel display-none" data-modify data-id="${data._id}">취소</button>
      </div>
      <div class="column is-2">
        <button class="button btn-delete" data-id="${data._id}">삭제</button>
      </div>
    </div>
  `;
}

function render() {
  getOrderData();
}
async function getOrderData() {
  const res = await Api.get('/api/categorylist');
  const html = res.map((item) => template(item)).join('');
  tableInfo.innerHTML = html;

  tableInfo.addEventListener('click', btnClickEvent);
}

async function btnClickEvent(e) {
  const btnModify = e.target.closest('.btn-modify');
  const btnCancel = e.target.closest('.btn-cancel');
  const btnConfirm = e.target.closest('.btn-confirm');
  const btnDelete = e.target.closest('.btn-delete');

  if (btnModify) {
    const targetColumn = btnModify.closest('.columns');
    toggleEvent(targetColumn);
  }
  if (btnCancel) {
    const targetColumn = btnCancel.closest('.columns');
    toggleEvent(targetColumn);
  }
  if (btnConfirm) {
    const targetId = btnConfirm.dataset.id;
    const data = {
      name: btnConfirm.closest('.columns').querySelector('input[name=name]').value,
      description: btnConfirm.closest('.columns').querySelector('input[name=description]').value,
    };
    const res = await Api.patch('/api/category', targetId, data);
    render();
  }
  if (btnDelete) {
    const targetId = btnDelete.dataset.id;
    const res = await Api.delete('/api/category', targetId);
    render();
  }
}

function toggleEvent(node) {
  node.querySelectorAll('[data-show]').forEach((item) => {
    item.classList.toggle('display-none');
  });
  node.querySelectorAll('[data-modify]').forEach((item) => {
    item.classList.toggle('display-none');
  });
}

dataset을 이용해 보여줘야 할 값과 교체되어서 보여줘야할값을 지정해서 바꿔주었는데 다른 좋은방법이 있을까 궁금합니다!

[89yunik]

In GitLab by @minukang on May 30, 2022, 20:28

.orders-item [data-modify] {
  display: none;
}

.orders-item.modify [data-modify] {
  display: unset;
}

.orders-item.modify [data-show] {
  display: none;
}