2차 프로젝트 어드민 페이지 구현!

 

 

 

 

이제 어드민 페이지에서 회원들의 정보를 보는 페이지를 만들어보자.

 

 

일반 회원으로 로그인하면 어드민 페이지 버튼이 뜨지 않는다

 

 

 

 

어드민으로 로그인 하면 어드민 페이지 버튼이 뜨고 회원 관리 창으로 갈 수 있다.

 

 

 

 

총 회원 수와 관리자 수가 뜨고

 

 

 

페이징 기능으로 회원이 10명씩 나오게 해 놨다.

 

async function insertUsers(page = 0, size = 10) {
  const usersResponse = await Api.get(`http://localhost:8080/users?page=${page}&size=${size}`);
  const users = usersResponse.content;


    const usersCount = await Api.get(`http://localhost:8080/users/count-user`);
    const adminCount = await Api.get(`http://localhost:8080/users/count-admin`);

    // 총 요약에 값 삽입
    document.getElementById('usersCount').innerText = addCommas(usersCount);
    document.getElementById('adminCount').innerText = addCommas(adminCount);


  // 사용자 목록 초기화 (새 페이지 로드 시 이전 목록 삭제)
  usersContainer.innerHTML = '';

  for (const user of users) {
    const { id, email, nickname, admin, createdAt } = user;
    const date = createdAt;

    usersContainer.insertAdjacentHTML(
        "beforeend",
        `
      <div class="columns orders-item" id="user-${id}">
        <div class="column is-2">${date}</div>
        <div class="column is-2">${email}</div>
        <div class="column is-2">${nickname}</div>
        <div class="column is-2">
          <div class="select" >
            <select id="roleSelectBox-${id}">
              <option
                class="has-background-link-light has-text-link"
                ${admin ? "selected" : ""}
                value="USER">
                일반사용자
              </option>
              <option
                class="has-background-danger-light has-text-danger"
                ${admin ? "selected" : ""}
                value="ADMIN">
                관리자
              </option>
            </select>
          </div>
        </div>
        <div class="column is-2">
          <button class="button" id="deleteButton-${id}" >회원정보 삭제</button>
        </div>
      </div>
      `
    );

    const roleSelectBox = document.querySelector(`#roleSelectBox-${id}`);
    const deleteButton = document.querySelector(`#deleteButton-${id}`);

    roleSelectBox.addEventListener("change", async () => {
      if(roleSelectBox.value === "USER"){
        alert("관리자는 일반 회원으로 바꿀 수 없습니다.");
        roleSelectBox.value = "ADMIN";

        return;
      }

      const isAdmin = true;

      // api 요청
      await Api.patch(`http://localhost:8080/users/${id}/role`,"", isAdmin);
      const usersCount = await Api.get(`http://localhost:8080/users/count-user`);
      const adminCount = await Api.get(`http://localhost:8080/users/count-admin`);

      document.getElementById('usersCount').innerText = addCommas(usersCount);
      document.getElementById('adminCount').innerText = addCommas(adminCount);
    });

    deleteButton.addEventListener("click", () => {
      if(roleSelectBox.value === "ADMIN"){
        alert("관리자 계정은 삭제할 수 없습니다.");

        return;
      }
      userIdToDelete = id;
      openModal();
    });
  }
}

// 페이지 변경 함수
function changePage(newPage) {
  insertUsers(newPage, 10); // 새 페이지 번호와 함께 사용자 목록을 다시 불러옴
}
const prevPageButton = document.getElementById('page1');
const nextPageButton = document.getElementById('page2');
let currentPage = 0;

prevPageButton.addEventListener('click', function() {
  if (currentPage > 0) { // 첫 페이지보다 클 때만 이전 페이지로 이동
    currentPage -= 1;
    changePage(currentPage);
  }
});

nextPageButton.addEventListener('click', function() {
  currentPage += 1;
  changePage(currentPage);
});


// db에서 회원정보 삭제
async function deleteUserData(e) {
  e.preventDefault();

  try {
    await Api.delete("http://localhost:8080/users", userIdToDelete);

    // 삭제 성공
    alert("회원 정보가 삭제되었습니다.");

    // 삭제한 아이템 화면에서 지우기
    const deletedItem = document.querySelector(`#user-${userIdToDelete}`);
    deletedItem.remove();

    // 전역변수 초기화
    userIdToDelete = "";

    changePage(currentPage);


    closeModal();
  } catch (err) {
    alert(`회원정보 삭제 과정에서 오류가 발생하였습니다: ${err}`);
  }
}