[javascript] API로 받아온 정보 내 각각의 버튼에 함수 적용

 

* 상황 : 삭제한 단어들 안에 각각 "단어 복구하기" 버튼 존재

-> 버튼을 누르면 삭제되었던 것이 다시 원래 항목으로 돌아감

* 실제로 delete로 데이터가 완전히 삭제된 것이 아닌 status가 D -> A로 이동하는 과정

 

* 만들어야 하는 것들

- 단어 확인하기 버튼 누르면 staus가 "D"인 항목들 보여주기

- 닫기 버튼 누르면 staus가 "D"인 항목들 삭제하기

- 단어 복구하기 버튼을 누르면 status가 "D"에서 "A"로 이동

 

* 말보다는 동영상 첨부가 효율적일 것 같아 첨부

 

 

* API는 첨부하지 않음

* HTML, JS만 첨부

 

HTML

<div class="deleted-items">
                    <div class="deleted-item-list">
                        <p>삭제한 단어들</p>
                        <button class="deletedWord-btn" id="D">단어 확인하기</button>
                        <button class="deletedWord-btn-close">닫기</button>
                        <div class="deletedWord-result" name="deletedItems">
							//JS를 통해 넣을 정보들
                        </div>
                    </div>
                </div>

 

JS

function changeStatusWord(event, token) {
  if (confirm("삭제한 단어를 복구 시키겠습니까? 아니라면 아니오 누르기")) {
    alert("예를 눌렀습니다.");
    changeStatus(event, token);
    return;
  } else {
    alert("아니오를 눌렀습니다.");
    return false;
  }
}

//삭제된 정보(status="D")들 보기
const $deletedWord = document.querySelector(".deleted-item-list");
$deletedWord.addEventListener("click", deleteWordController);

function deleteWordController(event) {
  const token = localStorage.getItem("w-access-token");
  if (!token) {
    return;
  }
  const target = event.target;
  const className = target.className;
  const eventType = event.type;
  const key = event.key;

  // console.log("target", target);
  // console.log("className", className);
  // console.log("eventType", eventType);
  // console.log("key", key);

  if (className === "deletedWord-btn" && eventType === "click") {
    deletedWordShow(event, token);
    return;
  }
  if (className === "deletedWord-btn-close" && eventType === "click") {
    const $deletedSectionUl = document.querySelector(
      `div[name="deletedItems"]`
    );
    $deletedSectionUl.innerHTML = "";
    return;
  }
}

//sql에서 status가 "D"인 정보들 보여주게 하기
async function deletedWordShow(event, token) {
  const status = event.target.closest(".deletedWord-btn").id; //D로 고정
  // console.log(status);

  const config = {
    method: "get",
    url: url + `/deletedWords/${status}`,
    headers: { "w-access-token": token },
  };

  try {
    const res = await axios(config);
    // console.log(res);

    const wordDataSet = res.data.result;

    for (let deletedSection in wordDataSet) {
      console.log("wordDataSet", wordDataSet);
      console.log(typeof deletedSection);
      const $deletedSectionUl = document.querySelector(
        `div[name="deletedItems"]`
      );
      const arrayForEachSection = wordDataSet[deletedSection];

      let deletedResult = "";
      for (let deletedWords of arrayForEachSection) {
        //작성할 단어들
        let element = `<p class="deletedWords-result" id="A">[결과값]
        영단어 : <span class="deletedWords-result-eng">${deletedWords.english}</span>
        한글 : <span class="deletedWords-result-kor">${deletedWords.korean}</span> 종류 : <span
            class="deletedWords-result-type">${deletedWords.type}</span>
        <button class="changeStatusdWord-btn" id=${deletedWords.wordIdx} name="A" onClick="changeStatusWord(event)">단어 복구하기</button>
    </p>`; //onClick 사용 시 각각의 버튼에 각각 함수가 적용됨
        deletedResult += element;
      }
      $deletedSectionUl.innerHTML = deletedResult;
    }

    if (res.data.code !== 200) {
      alert(res.data.message);
      return false;
    }
    readWords();
    return true;
  } catch (err) {
    console.error(err);
  }
}

async function changeStatus(event) {
  const token = localStorage.getItem("w-access-token");
  if (!token) {
    return;
  }
  const wordIdx = event.target.closest(".changeStatusdWord-btn").id;
  // console.log(wordIdx);
  const config = {
    method: "patch",
    url: url + `/changeStatus/${wordIdx}`,
    headers: { "w-access-token": token },
    data: {
      wordIdx: wordIdx, //복구하고자 하는 단어의 Idx값 전달하기
    },
  };
  try {
    const res = await axios(config);
    if (res.data.code !== 200) {
      alert(res.data.message);
      return false;
    }
    readWords();
    window.location.reload();
    return true;
  } catch (err) {
    console.error(err);
  }
}