TK-FB-Project/web-ui/js/vacation-common.js

/**
 * 휴가 관리 공통 함수
 * 모든 휴가 관련 페이지에서 사용하는 공통 함수 모음
 */

// 전역 변수
window.VacationCommon = {
  workers: [],
  vacationTypes: [],
  currentUser: null
};

/**
 * 작업자 목록 로드
 */
async function loadWorkers() {
  try {
    const response = await axios.get('/workers?limit=100');
    if (response.data.success) {
      window.VacationCommon.workers = response.data.data.filter(w => w.employment_status === 'employed');
      return window.VacationCommon.workers;
    }
  } catch (error) {
    console.error('작업자 목록 로드 오류:', error);
    throw error;
  }
}

/**
 * 휴가 유형 목록 로드
 */
async function loadVacationTypes() {
  try {
    const response = await axios.get('/attendance/vacation-types');
    if (response.data.success) {
      window.VacationCommon.vacationTypes = response.data.data;
      return window.VacationCommon.vacationTypes;
    }
  } catch (error) {
    console.error('휴가 유형 로드 오류:', error);
    throw error;
  }
}

/**
 * 현재 사용자 정보 가져오기
 */
function getCurrentUser() {
  if (!window.VacationCommon.currentUser) {
    window.VacationCommon.currentUser = JSON.parse(localStorage.getItem('user'));
  }
  return window.VacationCommon.currentUser;
}

/**
 * 휴가 신청 목록 렌더링
 */
function renderVacationRequests(requests, containerId, showActions = false, actionType = 'approval') {
  const container = document.getElementById(containerId);

  if (!requests || requests.length === 0) {
    container.innerHTML = `
      <div class="empty-state">
        <p>휴가 신청 내역이 없습니다.</p>
      </div>
    `;
    return;
  }

  const tableHTML = `
    <table class="data-table">
      <thead>
        <tr>
          <th>작업자</th>
          <th>휴가 유형</th>
          <th>시작일</th>
          <th>종료일</th>
          <th>일수</th>
          <th>상태</th>
          <th>사유</th>
          ${showActions ? '<th>관리</th>' : ''}
        </tr>
      </thead>
      <tbody>
        ${requests.map(request => {
          const validStatuses = ['pending', 'approved', 'rejected'];
          const safeStatus = validStatuses.includes(request.status) ? request.status : 'pending';
          const statusClass = safeStatus === 'pending' ? 'status-pending' :
                            safeStatus === 'approved' ? 'status-approved' : 'status-rejected';
          const statusText = safeStatus === 'pending' ? '대기' :
                            safeStatus === 'approved' ? '승인' : '거부';
          const workerName = escapeHtml(request.worker_name || '알 수 없음');
          const typeName = escapeHtml(request.vacation_type_name || request.type_name || '알 수 없음');
          const reasonText = escapeHtml(request.reason || '-');
          const daysUsed = parseFloat(request.days_used) || 0;

          return `
            <tr>
              <td><strong>${workerName}</strong></td>
              <td>${typeName}</td>
              <td>${escapeHtml(request.start_date || '-')}</td>
              <td>${escapeHtml(request.end_date || '-')}</td>
              <td>${daysUsed}일</td>
              <td>
                <span class="status-badge ${statusClass}">
                  ${statusText}
                </span>
              </td>
              <td style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${reasonText}">
                ${reasonText}
              </td>
              ${showActions ? renderActionButtons(request, actionType) : ''}
            </tr>
          `;
        }).join('')}
      </tbody>
    </table>
  `;

  container.innerHTML = tableHTML;
}

/**
 * 액션 버튼 렌더링
 */
function renderActionButtons(request, actionType) {
  const safeRequestId = parseInt(request.request_id) || 0;
  if (actionType === 'approval' && request.status === 'pending') {
    return `
      <td>
        <div style="display: flex; gap: 0.5rem;">
          <button class="btn-small btn-success" onclick="approveVacationRequest(${safeRequestId})" title="승인">
            ✓
          </button>
          <button class="btn-small btn-danger" onclick="rejectVacationRequest(${safeRequestId})" title="거부">
            ✗
          </button>
        </div>
      </td>
    `;
  } else if (actionType === 'delete' && request.status === 'pending') {
    return `
      <td>
        <button class="btn-small btn-danger" onclick="deleteVacationRequest(${safeRequestId})" title="삭제">
          삭제
        </button>
      </td>
    `;
  }
  return '<td>-</td>';
}

/**
 * 휴가 신청 승인
 */
async function approveVacationRequest(requestId) {
  if (!confirm('이 휴가 신청을 승인하시겠습니까?')) {
    return;
  }

  try {
    const response = await axios.patch(`/vacation-requests/${requestId}/approve`);
    if (response.data.success) {
      alert('휴가 신청이 승인되었습니다.');
      // 페이지 새로고침 이벤트 발생
      window.dispatchEvent(new Event('vacation-updated'));
      return true;
    }
  } catch (error) {
    console.error('승인 오류:', error);
    alert(error.response?.data?.message || '승인 중 오류가 발생했습니다.');
    return false;
  }
}

/**
 * 휴가 신청 거부
 */
async function rejectVacationRequest(requestId) {
  const reason = prompt('거부 사유를 입력하세요:');
  if (!reason) {
    return;
  }

  try {
    const response = await axios.patch(`/vacation-requests/${requestId}/reject`, {
      review_note: reason
    });
    if (response.data.success) {
      alert('휴가 신청이 거부되었습니다.');
      // 페이지 새로고침 이벤트 발생
      window.dispatchEvent(new Event('vacation-updated'));
      return true;
    }
  } catch (error) {
    console.error('거부 오류:', error);
    alert(error.response?.data?.message || '거부 중 오류가 발생했습니다.');
    return false;
  }
}

/**
 * 휴가 신청 삭제
 */
async function deleteVacationRequest(requestId) {
  if (!confirm('이 휴가 신청을 삭제하시겠습니까?')) {
    return;
  }

  try {
    const response = await axios.delete(`/vacation-requests/${requestId}`);
    if (response.data.success) {
      alert('휴가 신청이 삭제되었습니다.');
      // 페이지 새로고침 이벤트 발생
      window.dispatchEvent(new Event('vacation-updated'));
      return true;
    }
  } catch (error) {
    console.error('삭제 오류:', error);
    alert(error.response?.data?.message || '삭제 중 오류가 발생했습니다.');
    return false;
  }
}

/**
 * axios 설정 대기
 */
function waitForAxiosConfig() {
  return new Promise((resolve) => {
    const check = setInterval(() => {
      if (axios.defaults.baseURL) {
        clearInterval(check);
        resolve();
      }
    }, 50);
    setTimeout(() => {
      clearInterval(check);
      resolve();
    }, 5000);
  });
}