휴가 css 수정
This commit is contained in:
parent
cd1c707b12
commit
6904902755
@ -113,18 +113,17 @@ opacity: 0.6; /* 흐려 보이게 */
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 모달 본문 스타일 */
|
||||
.vac-modal-content {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
<div class="content-backdrop fade"></div>
|
||||
</div>
|
||||
</div>
|
||||
<TheChat />
|
||||
</div>
|
||||
|
||||
<!-- Overlay -->
|
||||
@ -27,6 +28,7 @@
|
||||
import TheTop from './TheTop.vue';
|
||||
import TheFooter from './TheFooter.vue';
|
||||
import TheMenu from './TheMenu.vue';
|
||||
import TheChat from './TheChat.vue';
|
||||
import { nextTick } from 'vue';
|
||||
import { wait } from '@/common/utils';
|
||||
|
||||
@ -45,4 +47,13 @@
|
||||
loadScript('/js/main.js');
|
||||
});
|
||||
</script>
|
||||
<style></style>
|
||||
<style>
|
||||
|
||||
/* ✅ 중앙 콘텐츠 자동 조정 */
|
||||
.layout-page {
|
||||
flex-grow: 1;
|
||||
min-width: 0; /* flexbox 내에서 올바른 크기 계산 */
|
||||
margin-right: 350px; /* 채팅 사이드바의 너비만큼 밀리도록 설정 */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
43
src/layouts/TheChat.vue
Normal file
43
src/layouts/TheChat.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<!-- Chat Sidebar -->
|
||||
<aside id="chat-sidebar" class="chat-sidebar">
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
// 채팅 메시지 리스트
|
||||
const messages = ref([
|
||||
{ user: "사용자1", text: "안녕하세요!" },
|
||||
{ user: "사용자2", text: "안녕하세요. 반갑습니다." }
|
||||
]);
|
||||
|
||||
const newMessage = ref("");
|
||||
|
||||
// 메시지 전송
|
||||
const sendMessage = () => {
|
||||
if (newMessage.value.trim() !== "") {
|
||||
messages.value.push({ user: "나", text: newMessage.value });
|
||||
newMessage.value = "";
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ✅ 채팅 사이드바 고정 */
|
||||
.chat-sidebar {
|
||||
width: 350px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
border-left: 1px solid #ddd;
|
||||
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -265,4 +265,5 @@
|
||||
router.push('/login');
|
||||
};
|
||||
</script>
|
||||
<style></style>
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
@ -63,45 +63,46 @@
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted, nextTick, computed, watch, onBeforeUnmount } from "vue";
|
||||
import axios from "@api";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
// 달력
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
// Flatpickr 및 MonthSelect 플러그인 임포트
|
||||
import "@/assets/css/app-calendar.css";
|
||||
// Flatpickr, MonthSelect
|
||||
import flatpickr from "flatpickr";
|
||||
import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect/index";
|
||||
import "flatpickr/dist/flatpickr.min.css";
|
||||
import "flatpickr/dist/plugins/monthSelect/style.css";
|
||||
|
||||
import "@/assets/css/app-calendar.css";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
// 컴포넌트
|
||||
import HalfDayButtons from "@c/button/HalfDayButtons.vue";
|
||||
import ProfileList from "@c/vacation/ProfileList.vue";
|
||||
import VacationModal from "@c/modal/VacationModal.vue";
|
||||
import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
|
||||
import { fetchHolidays } from "@c/calendar/holiday.js";
|
||||
// 스토어
|
||||
import { useUserStore } from "@s/userList";
|
||||
import { useUserInfoStore } from "@s/useUserInfoStore";
|
||||
import { fetchHolidays } from "@c/calendar/holiday.js";
|
||||
import { useToastStore } from '@s/toastStore';
|
||||
// 라우터
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 스토어
|
||||
const toastStore = useToastStore();
|
||||
const userStore = useUserInfoStore();
|
||||
const userListStore = useUserStore();
|
||||
// 프로필
|
||||
const userList = ref([]);
|
||||
const userColors = ref({});
|
||||
const myVacations = ref([]); // 로그인한 사원의 휴가
|
||||
// 휴가정보
|
||||
const myVacations = ref([]);
|
||||
const receivedVacations = ref([]);
|
||||
const isModalOpen = ref(false);
|
||||
const remainingVacationData = ref({});
|
||||
const selectedDate = ref(null);
|
||||
const lastRemainingYear = ref(new Date().getFullYear());
|
||||
const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
|
||||
// 모달상태
|
||||
const isModalOpen = ref(false);
|
||||
const isGrantModalOpen = ref(false);
|
||||
const selectedUser = ref(null);
|
||||
|
||||
// FullCalendar 관련
|
||||
// FullCalendar 및 이벤트 관련
|
||||
const fullCalendarRef = ref(null);
|
||||
const calendarEvents = ref([]);
|
||||
const selectedDates = ref(new Map());
|
||||
@ -110,45 +111,15 @@ const router = useRouter();
|
||||
const holidayDates = ref(new Set());
|
||||
const fetchedEvents = ref([]);
|
||||
const halfDayButtonsRef = ref(null);
|
||||
|
||||
// 페이지 이동 시 변경 사항 확인
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (hasChanges.value) {
|
||||
const answer = window.confirm("저장하지 않은 변경 사항이 있습니다. 이동하시겠습니까?");
|
||||
if (!answer) {
|
||||
return next(false); // 이동 취소
|
||||
}
|
||||
}
|
||||
next();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("beforeunload", preventUnsavedChanges);
|
||||
});
|
||||
|
||||
function preventUnsavedChanges(event) {
|
||||
if (hasChanges.value) {
|
||||
event.preventDefault();
|
||||
event.returnValue = ""; // 대부분의 브라우저에서 경고 메시지 표시됨
|
||||
}
|
||||
}
|
||||
|
||||
// `selectedDates` 변경 시 반차 버튼 초기화
|
||||
watch(
|
||||
() => Array.from(selectedDates.value.keys()), // 선택된 날짜 리스트 감시
|
||||
(newKeys) => {
|
||||
if (halfDayButtonsRef.value) {
|
||||
halfDayButtonsRef.value.resetHalfDay();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const selectedDate = ref(null);
|
||||
const selectedUser = ref(null);
|
||||
const lastRemainingYear = ref(new Date().getFullYear());
|
||||
const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
|
||||
// 데이트피커 인풋 ref
|
||||
const calendarDatepicker = ref(null);
|
||||
let fpInstance = null;
|
||||
|
||||
/** 변경사항 여부 확인 */
|
||||
/* 변경사항 여부 확인 */
|
||||
const hasChanges = computed(() => {
|
||||
return (
|
||||
selectedDates.value.size > 0 ||
|
||||
@ -156,60 +127,8 @@ const hasChanges = computed(() => {
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
/** selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */
|
||||
watch(
|
||||
() => Array.from(selectedDates.value.keys()), // keys()를 Array로 변환해서 감시
|
||||
(newKeys) => {
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
function handleDateClick(info) {
|
||||
const clickedDateStr = info.dateStr;
|
||||
const clickedDate = info.date;
|
||||
const todayStr = new Date().toISOString().split("T")[0];
|
||||
|
||||
if (
|
||||
clickedDate.getDay() === 0 ||
|
||||
clickedDate.getDay() === 6 ||
|
||||
holidayDates.value.has(clickedDateStr) ||
|
||||
clickedDateStr < todayStr
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const isMyVacation = myVacations.value.some(vac => {
|
||||
const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
|
||||
return vacDate === clickedDateStr && !vac.receiverId;
|
||||
});
|
||||
|
||||
if (isMyVacation) {
|
||||
if (selectedDates.value.get(clickedDateStr) === "delete") {
|
||||
selectedDates.value.delete(clickedDateStr);
|
||||
} else {
|
||||
selectedDates.value.set(clickedDateStr, "delete");
|
||||
}
|
||||
updateCalendarEvents();
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedDates.value.has(clickedDateStr)) {
|
||||
selectedDates.value.delete(clickedDateStr);
|
||||
updateCalendarEvents();
|
||||
return;
|
||||
}
|
||||
const type = halfDayType.value
|
||||
? (halfDayType.value === "AM" ? "700101" : "700102")
|
||||
: "700103";
|
||||
selectedDates.value.set(clickedDateStr, type);
|
||||
halfDayType.value = null;
|
||||
updateCalendarEvents();
|
||||
// 날짜 선택 후 버튼 초기화
|
||||
if (halfDayButtonsRef.value) {
|
||||
halfDayButtonsRef.value.resetHalfDay();
|
||||
}
|
||||
}
|
||||
|
||||
/* 캘린더 설정 */
|
||||
// 풀 캘린더 옵션,이벤트
|
||||
const calendarOptions = reactive({
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
initialView: "dayGridMonth",
|
||||
@ -224,98 +143,112 @@ function handleDateClick(info) {
|
||||
datesSet: handleMonthChange,
|
||||
events: calendarEvents,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await userStore.userInfo();
|
||||
await fetchRemainingVacation();
|
||||
const currentYear = new Date().getFullYear();
|
||||
await fetchVacationHistory(currentYear);
|
||||
window.addEventListener("beforeunload", preventUnsavedChanges);
|
||||
|
||||
// Flatpickr 초기화 (달 선택 모드)
|
||||
fpInstance = flatpickr(calendarDatepicker.value, {
|
||||
dateFormat: "Y-m",
|
||||
plugins: [
|
||||
new monthSelectPlugin({
|
||||
shorthand: true,
|
||||
dateFormat: "Y-m",
|
||||
altFormat: "F Y"
|
||||
})
|
||||
],
|
||||
onChange: function(selectedDatesArr, dateStr) {
|
||||
// 선택한 달의 첫날로 달력을 이동
|
||||
fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");
|
||||
const [year, month] = dateStr.split("-");
|
||||
lastRemainingYear.value = parseInt(year, 10);
|
||||
lastRemainingMonth.value = month;
|
||||
loadCalendarData(lastRemainingYear.value, lastRemainingMonth.value);
|
||||
},
|
||||
onClose: function() {
|
||||
calendarDatepicker.value.style.display = "none";
|
||||
// 캘린더 월 변경경
|
||||
function handleMonthChange(viewInfo) {
|
||||
const currentDate = viewInfo.view.currentStart;
|
||||
const year = currentDate.getFullYear();
|
||||
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
|
||||
loadCalendarData(year, month);
|
||||
}
|
||||
});
|
||||
|
||||
// FullCalendar 헤더 제목(.fc-toolbar-title) 클릭 시 데이트피커 열기
|
||||
nextTick(() => {
|
||||
const titleEl = document.querySelector('.fc-toolbar-title');
|
||||
if (titleEl) {
|
||||
titleEl.style.cursor = 'pointer';
|
||||
titleEl.addEventListener('click', () => {
|
||||
// 화면 중앙 정렬을 위한 스타일 조정
|
||||
const dpEl = calendarDatepicker.value;
|
||||
dpEl.style.display = 'block';
|
||||
dpEl.style.position = 'fixed';
|
||||
dpEl.style.top = '22%';
|
||||
dpEl.style.left = '66%';
|
||||
dpEl.style.transform = 'translate(-50%, -50%)';
|
||||
dpEl.style.zIndex = '9999';
|
||||
dpEl.style.border = 'none';
|
||||
dpEl.style.outline = 'none';
|
||||
dpEl.style.backgroundColor = 'transparent';
|
||||
fpInstance.open();
|
||||
});
|
||||
// 캘린더 클릭
|
||||
function handleDateClick(info) {
|
||||
const clickedDateStr = info.dateStr;
|
||||
const clickedDate = info.date;
|
||||
const todayStr = new Date().toISOString().split("T")[0];
|
||||
if (
|
||||
clickedDate.getDay() === 0 ||
|
||||
clickedDate.getDay() === 6 ||
|
||||
holidayDates.value.has(clickedDateStr) ||
|
||||
clickedDateStr < todayStr
|
||||
){
|
||||
return;
|
||||
}
|
||||
const isMyVacation = myVacations.value.some(vac => {
|
||||
const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
|
||||
return vacDate === clickedDateStr && !vac.receiverId;
|
||||
});
|
||||
})
|
||||
|
||||
// 연차 내역 API (초기 호출용)
|
||||
async function fetchVacationHistory(year) {
|
||||
try {
|
||||
const response = await axios.get(`vacation/history?year=${year}`);
|
||||
if (response.status === 200 && response.data) {
|
||||
myVacations.value = response.data.data.usedVacations || [];
|
||||
receivedVacations.value = response.data.data.receivedVacations || [];
|
||||
if (isMyVacation) {
|
||||
if (selectedDates.value.get(clickedDateStr) === "delete") {
|
||||
selectedDates.value.delete(clickedDateStr);
|
||||
} else {
|
||||
console.warn("❌ 연차 내역을 불러오지 못했습니다.");
|
||||
myVacations.value = [];
|
||||
receivedVacations.value = [];
|
||||
selectedDates.value.set(clickedDateStr, "delete");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("🚨 연차 데이터 불러오기 실패:", error);
|
||||
updateCalendarEvents();
|
||||
return;
|
||||
}
|
||||
if (selectedDates.value.has(clickedDateStr)) {
|
||||
selectedDates.value.delete(clickedDateStr);
|
||||
updateCalendarEvents();
|
||||
return;
|
||||
}
|
||||
const type = halfDayType.value
|
||||
? (halfDayType.value === "AM" ? "700101" : "700102")
|
||||
: "700103";
|
||||
selectedDates.value.set(clickedDateStr, type);
|
||||
halfDayType.value = null;
|
||||
updateCalendarEvents();
|
||||
// 날짜 선택 후 반차버튼 초기화
|
||||
if (halfDayButtonsRef.value) {
|
||||
halfDayButtonsRef.value.resetHalfDay();
|
||||
}
|
||||
}
|
||||
// 오늘 이후의 날짜만 클릭 가능하도록 설정
|
||||
function markClickableDates() {
|
||||
nextTick(() => {
|
||||
const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD
|
||||
const todayObj = new Date(todayStr);
|
||||
|
||||
watch(lastRemainingYear, async (newYear, oldYear) => {
|
||||
await fetchVacationHistory(newYear);
|
||||
document.querySelectorAll(".fc-daygrid-day").forEach((cell) => {
|
||||
const dateStr = cell.getAttribute("data-date");
|
||||
if (!dateStr) return; // 날짜가 없으면 스킵
|
||||
const dateObj = new Date(dateStr);
|
||||
// 주말 (토요일, 일요일)
|
||||
if (dateObj.getDay() === 0 || dateObj.getDay() === 6 || holidayDates.value.has(dateStr)) {
|
||||
cell.classList.remove("clickable");
|
||||
cell.classList.add("fc-day-sat-sun");
|
||||
}
|
||||
// 과거 날짜 (오늘 이전)
|
||||
else if (dateObj < todayObj) {
|
||||
cell.classList.remove("clickable");
|
||||
cell.classList.add("past"); // 과거 날짜 비활성화
|
||||
}
|
||||
// 오늘 & 미래 날짜 (클릭 가능)
|
||||
else {
|
||||
cell.classList.add("clickable");
|
||||
cell.classList.remove("past", "fc-day-sat-sun");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const fetchRemainingVacation = async () => {
|
||||
try {
|
||||
const response = await axios.get("vacation/remaining");
|
||||
if (response.status === 200) {
|
||||
remainingVacationData.value = response.data.data.reduce((acc, vacation) => {
|
||||
acc[vacation.employeeId] = vacation.remainingQuota;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
|
||||
//캘린더에 데이터 로드
|
||||
async function loadCalendarData(year, month) {
|
||||
if (lastRemainingYear.value !== year || lastRemainingMonth.value !== month) {
|
||||
await fetchRemainingVacation();
|
||||
lastRemainingYear.value = year;
|
||||
lastRemainingMonth.value = month;
|
||||
}
|
||||
fetchedEvents.value = [];
|
||||
const [vacationEvents, holidayEvents] = await Promise.all([
|
||||
fetchVacationData(year, month),
|
||||
fetchHolidays(year, month),
|
||||
]);
|
||||
holidayDates.value = new Set(holidayEvents.map((event) => event.start));
|
||||
fetchedEvents.value = [...vacationEvents, ...holidayEvents];
|
||||
updateCalendarEvents();
|
||||
await nextTick();
|
||||
fullCalendarRef.value.getApi().refetchEvents();
|
||||
}
|
||||
};
|
||||
|
||||
/* 프로필 구역 */
|
||||
// 프로필 클릭 시 모달 열기
|
||||
const handleProfileClick = async (user) => {
|
||||
try {
|
||||
// 열린 모달이 있으면 모두 닫음 후 새 모달 열기
|
||||
if (isModalOpen.value && user.MEMBERSEQ === userStore.user.id) {
|
||||
return;
|
||||
}
|
||||
if (isGrantModalOpen.value && selectedUser.value?.MEMBERSEQ === user.MEMBERSEQ) {
|
||||
return;
|
||||
}
|
||||
isModalOpen.value = false;
|
||||
isGrantModalOpen.value = false;
|
||||
if (user.MEMBERSEQ === userStore.user.id) {
|
||||
@ -330,7 +263,7 @@ function handleDateClick(info) {
|
||||
console.error("🚨 연차 데이터 불러오기 실패:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 프로필 사원 리스트
|
||||
const fetchUserList = async () => {
|
||||
try {
|
||||
await userListStore.fetchUserList();
|
||||
@ -341,33 +274,27 @@ function handleDateClick(info) {
|
||||
}
|
||||
userColors.value = {};
|
||||
userList.value.forEach((user) => {
|
||||
userColors.value[user.MEMBERSEQ] = user.usercolor || "#FFFFFF";
|
||||
userColors.value[user.MEMBERSEQ] = user.usercolor;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("📌 사용자 목록 불러오기 오류:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchVacationCodes = async () => {
|
||||
// 사원별 남은 연차 개수
|
||||
const fetchRemainingVacation = async () => {
|
||||
try {
|
||||
const response = await axios.get("vacation/codes");
|
||||
if (response.status === 200 && response.data) {
|
||||
vacationCodeMap.value = response.data.data.reduce((acc, item) => {
|
||||
acc[item.code] = item.name;
|
||||
const response = await axios.get("vacation/remaining");
|
||||
if (response.status === 200) {
|
||||
remainingVacationData.value = response.data.data.reduce((acc, vacation) => {
|
||||
acc[vacation.employeeId] = vacation.remainingQuota;
|
||||
return acc;
|
||||
}, {});
|
||||
} else {
|
||||
console.warn("❌ 공통 코드 데이터를 불러오지 못했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("🚨 공통 코드 API 호출 실패:", error);
|
||||
console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const getVacationType = (typeCode) => {
|
||||
return vacationCodeMap.value[typeCode] || "기타";
|
||||
};
|
||||
|
||||
// 로그인한 사원이 사용한 휴가 필터링
|
||||
const filteredMyVacations = computed(() => {
|
||||
return myVacations.value.filter(vac => {
|
||||
const dateStr = vac.date;
|
||||
@ -375,7 +302,7 @@ function handleDateClick(info) {
|
||||
return year === String(lastRemainingYear.value);
|
||||
});
|
||||
});
|
||||
|
||||
// 로그인한 사원이 받은 휴가 필터링
|
||||
const filteredReceivedVacations = computed(() => {
|
||||
return receivedVacations.value.filter(vac => {
|
||||
const dateStr = vac.date;
|
||||
@ -384,76 +311,8 @@ function handleDateClick(info) {
|
||||
});
|
||||
});
|
||||
|
||||
function updateCalendarEvents() {
|
||||
const selectedEvents = Array.from(selectedDates.value)
|
||||
.filter(([date, type]) => type !== "delete")
|
||||
.map(([date, type]) => ({
|
||||
start: date,
|
||||
backgroundColor: "rgb(113 212 243 / 76%)",
|
||||
textColor: "#fff",
|
||||
display: "background",
|
||||
classNames: [getVacationTypeClass(type), "selected-event"]
|
||||
}));
|
||||
|
||||
const filteredFetchedEvents = fetchedEvents.value.filter(event => {
|
||||
if (event.saved && selectedDates.value.get(event.start) === "delete") {
|
||||
if (event.memberSeq === userStore.user.id) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
|
||||
}
|
||||
|
||||
const getVacationTypeClass = (type) => {
|
||||
if (type === "700101") return "half-day-am";
|
||||
if (type === "700102") return "half-day-pm";
|
||||
return "full-day";
|
||||
};
|
||||
|
||||
function toggleHalfDay(type) {
|
||||
halfDayType.value = halfDayType.value === type ? null : type;
|
||||
}
|
||||
|
||||
// 연차 리스트 조회회
|
||||
async function fetchVacationData(year, month) {
|
||||
try {
|
||||
const response = await axios.get(`vacation/list/${year}/${month}`);
|
||||
if (response.status === 200) {
|
||||
const vacationList = response.data;
|
||||
|
||||
// 회원 정보가 없거나 색상 정보가 없는 데이터는 제외
|
||||
const filteredVacations = vacationList.filter(vac =>
|
||||
userColors.value[vac.MEMBERSEQ] && userColors.value[vac.MEMBERSEQ] !== "#FFFFFF"
|
||||
);
|
||||
|
||||
const events = filteredVacations.map(vac => {
|
||||
let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
|
||||
let backgroundColor = userColors.value[vac.MEMBERSEQ];
|
||||
|
||||
return {
|
||||
title: getVacationType(vac.LOCVACTYP),
|
||||
start: dateStr,
|
||||
backgroundColor,
|
||||
classNames: [getVacationTypeClass(vac.LOCVACTYP)],
|
||||
saved: true,
|
||||
memberSeq: vac.MEMBERSEQ,
|
||||
};
|
||||
}).filter(event => event.start);
|
||||
|
||||
return events;
|
||||
} else {
|
||||
console.warn("📌 휴가 데이터를 불러오지 못함");
|
||||
return [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching vacation data:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/* 휴가 변경사항 저장 */
|
||||
async function saveVacationChanges() {
|
||||
if (!hasChanges.value) return;
|
||||
const selectedDatesArray = Array.from(selectedDates.value);
|
||||
@ -481,6 +340,7 @@ async function fetchVacationData(year, month) {
|
||||
});
|
||||
if (response.data && response.data.status === "OK") {
|
||||
toastStore.onToast('휴가 변경 사항이 저장되었습니다.', 's');
|
||||
await fetchVacationHistory(lastRemainingYear.value);
|
||||
await fetchRemainingVacation();
|
||||
if (isModalOpen.value) {
|
||||
await fetchVacationHistory(lastRemainingYear.value);
|
||||
@ -498,72 +358,161 @@ async function fetchVacationData(year, month) {
|
||||
}
|
||||
}
|
||||
|
||||
function handleMonthChange(viewInfo) {
|
||||
const currentDate = viewInfo.view.currentStart;
|
||||
const year = currentDate.getFullYear();
|
||||
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
|
||||
loadCalendarData(year, month);
|
||||
/* 휴가 조회 */
|
||||
// 로그인 사용자의 연차 사용 내역
|
||||
async function fetchVacationHistory(year) {
|
||||
try {
|
||||
const response = await axios.get(`vacation/history?year=${year}`);
|
||||
if (response.status === 200 && response.data) {
|
||||
myVacations.value = response.data.data.usedVacations || [];
|
||||
receivedVacations.value = response.data.data.receivedVacations || [];
|
||||
} else {
|
||||
console.warn("❌ 연차 내역을 불러오지 못했습니다.");
|
||||
myVacations.value = [];
|
||||
receivedVacations.value = [];
|
||||
}
|
||||
|
||||
async function loadCalendarData(year, month) {
|
||||
if (lastRemainingYear.value !== year || lastRemainingMonth.value !== month) {
|
||||
await fetchRemainingVacation();
|
||||
lastRemainingYear.value = year;
|
||||
lastRemainingMonth.value = month;
|
||||
} catch (error) {
|
||||
console.error("🚨 연차 데이터 불러오기 실패:", error);
|
||||
}
|
||||
fetchedEvents.value = [];
|
||||
const [vacationEvents, holidayEvents] = await Promise.all([
|
||||
fetchVacationData(year, month),
|
||||
fetchHolidays(year, month),
|
||||
]);
|
||||
holidayDates.value = new Set(holidayEvents.map((event) => event.start));
|
||||
fetchedEvents.value = [...vacationEvents, ...holidayEvents];
|
||||
updateCalendarEvents();
|
||||
await nextTick();
|
||||
fullCalendarRef.value.getApi().refetchEvents();
|
||||
}
|
||||
/** 오늘 이후의 날짜만 클릭 가능하도록 설정 */
|
||||
function markClickableDates() {
|
||||
nextTick(() => {
|
||||
const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD
|
||||
const todayObj = new Date(todayStr);
|
||||
|
||||
document.querySelectorAll(".fc-daygrid-day").forEach((cell) => {
|
||||
const dateStr = cell.getAttribute("data-date");
|
||||
if (!dateStr) return; // 날짜가 없으면 스킵
|
||||
|
||||
const dateObj = new Date(dateStr);
|
||||
|
||||
// 주말 (토요일, 일요일)
|
||||
if (dateObj.getDay() === 0 || dateObj.getDay() === 6 || holidayDates.value.has(dateStr)) {
|
||||
cell.classList.remove("clickable");
|
||||
cell.classList.add("fc-day-sat-sun");
|
||||
// 모든 사원 연차 내역 및 그래프화
|
||||
async function fetchVacationData(year, month) {
|
||||
try {
|
||||
const response = await axios.get(`vacation/list/${year}/${month}`);
|
||||
if (response.status === 200) {
|
||||
const vacationList = response.data;
|
||||
// 회원 정보가 없거나 색상 정보가 없는 데이터는 제외
|
||||
const filteredVacations = vacationList.filter(vac =>
|
||||
userColors.value[vac.MEMBERSEQ] && userColors.value[vac.MEMBERSEQ]
|
||||
);
|
||||
const events = filteredVacations.map(vac => {
|
||||
let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
|
||||
let backgroundColor = userColors.value[vac.MEMBERSEQ];
|
||||
return {
|
||||
title: getVacationType(vac.LOCVACTYP),
|
||||
start: dateStr,
|
||||
backgroundColor,
|
||||
classNames: [getVacationTypeClass(vac.LOCVACTYP)],
|
||||
saved: true,
|
||||
memberSeq: vac.MEMBERSEQ,
|
||||
};
|
||||
}).filter(event => event.start);
|
||||
return events;
|
||||
} else {
|
||||
console.warn("📌 휴가 데이터를 불러오지 못함");
|
||||
return [];
|
||||
}
|
||||
// 과거 날짜 (오늘 이전)
|
||||
else if (dateObj < todayObj) {
|
||||
cell.classList.remove("clickable");
|
||||
cell.classList.add("past"); // 과거 날짜 비활성화
|
||||
} catch (error) {
|
||||
console.error("Error fetching vacation data:", error);
|
||||
return [];
|
||||
}
|
||||
// 오늘 & 미래 날짜 (클릭 가능)
|
||||
else {
|
||||
cell.classList.add("clickable");
|
||||
cell.classList.remove("past", "fc-day-sat-sun");
|
||||
}
|
||||
// 캘린더 이벤트 업데이트
|
||||
function updateCalendarEvents() {
|
||||
const selectedEvents = Array.from(selectedDates.value)
|
||||
.filter(([date, type]) => type !== "delete")
|
||||
.map(([date, type]) => ({
|
||||
start: date,
|
||||
backgroundColor: "rgb(113 212 243 / 76%)",
|
||||
textColor: "#fff",
|
||||
display: "background",
|
||||
classNames: [getVacationTypeClass(type), "selected-event"]
|
||||
}));
|
||||
const filteredFetchedEvents = fetchedEvents.value.filter(event => {
|
||||
if (event.saved && selectedDates.value.get(event.start) === "delete") {
|
||||
if (event.memberSeq === userStore.user.id) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
});
|
||||
calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
|
||||
}
|
||||
// 휴가 종류에 따른 클래스명
|
||||
const getVacationTypeClass = (type) => {
|
||||
if (type === "700101") return "half-day-am";
|
||||
if (type === "700102") return "half-day-pm";
|
||||
return "full-day";
|
||||
};
|
||||
// 휴가종류
|
||||
const fetchVacationCodes = async () => {
|
||||
try {
|
||||
const response = await axios.get("vacation/codes");
|
||||
if (response.status === 200 && response.data) {
|
||||
vacationCodeMap.value = response.data.data.reduce((acc, item) => {
|
||||
acc[item.code] = item.name;
|
||||
return acc;
|
||||
}, {});
|
||||
} else {
|
||||
console.warn("❌ 공통 코드 데이터를 불러오지 못했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("🚨 공통 코드 API 호출 실패:", error);
|
||||
}
|
||||
};
|
||||
const getVacationType = (typeCode) => {
|
||||
return vacationCodeMap.value[typeCode] || "기타";
|
||||
};
|
||||
|
||||
/* 버튼 */
|
||||
// 반차버튼 토글
|
||||
function toggleHalfDay(type) {
|
||||
halfDayType.value = halfDayType.value === type ? null : type;
|
||||
}
|
||||
|
||||
/** ✅ onMounted 및 달력 변경 시 실행 */
|
||||
onMounted(() => {
|
||||
markClickableDates();
|
||||
/* 페이지 이동 시 변경 사항 확인 */
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (hasChanges.value) {
|
||||
const answer = window.confirm("저장하지 않은 변경 사항이 있습니다. 이동하시겠습니까?");
|
||||
if (!answer) {
|
||||
return next(false);
|
||||
}
|
||||
}
|
||||
next();
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("beforeunload", preventUnsavedChanges);
|
||||
});
|
||||
function preventUnsavedChanges(event) {
|
||||
if (hasChanges.value) {
|
||||
event.preventDefault();
|
||||
event.returnValue = "";
|
||||
}
|
||||
}
|
||||
|
||||
/* watch */
|
||||
watch(lastRemainingYear, async (newYear, oldYear) => {
|
||||
await fetchVacationHistory(newYear);
|
||||
});
|
||||
// `selectedDates` 변경 시 반차 버튼 초기화
|
||||
watch(
|
||||
() => Array.from(selectedDates.value.keys()), // 선택된 날짜 리스트 감시
|
||||
(newKeys) => {
|
||||
if (halfDayButtonsRef.value) {
|
||||
halfDayButtonsRef.value.resetHalfDay();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
// selectedDates가 변경될 때 버튼 상태 즉시 업데이트
|
||||
watch(
|
||||
() => Array.from(selectedDates.value.keys()),
|
||||
(newKeys) => {
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => {
|
||||
markClickableDates();
|
||||
});
|
||||
|
||||
|
||||
/* onMounted */
|
||||
// onMounted 및 달력 변경 시 실행
|
||||
onMounted(() => {
|
||||
markClickableDates();
|
||||
});
|
||||
// onMounted 시 데이터 로드
|
||||
onMounted(async () => {
|
||||
await userStore.userInfo();
|
||||
await fetchUserList();
|
||||
await fetchVacationCodes();
|
||||
const today = new Date();
|
||||
@ -571,13 +520,58 @@ watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => {
|
||||
const month = String(today.getMonth() + 1).padStart(2, "0");
|
||||
await fetchVacationData(year, month);
|
||||
await loadCalendarData(year, month);
|
||||
await fetchRemainingVacation();
|
||||
const currentYear = new Date().getFullYear();
|
||||
await fetchVacationHistory(currentYear);
|
||||
window.addEventListener("beforeunload", preventUnsavedChanges);
|
||||
// Flatpickr 초기화 (달 선택)
|
||||
fpInstance = flatpickr(calendarDatepicker.value, {
|
||||
dateFormat: "Y-m",
|
||||
plugins: [
|
||||
new monthSelectPlugin({
|
||||
shorthand: true,
|
||||
dateFormat: "Y-m",
|
||||
altFormat: "F Y"
|
||||
})
|
||||
],
|
||||
onChange: function(selectedDatesArr, dateStr) {
|
||||
// 선택한 달의 첫날로 달력을 이동
|
||||
fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");
|
||||
const [year, month] = dateStr.split("-");
|
||||
lastRemainingYear.value = parseInt(year, 10);
|
||||
lastRemainingMonth.value = month;
|
||||
loadCalendarData(lastRemainingYear.value, lastRemainingMonth.value);
|
||||
},
|
||||
onClose: function() {
|
||||
calendarDatepicker.value.style.display = "none";
|
||||
}
|
||||
});
|
||||
// FullCalendar 년월월(.fc-toolbar-title) 클릭 시 데이트피커 열기
|
||||
nextTick(() => {
|
||||
const titleEl = document.querySelector('.fc-toolbar-title');
|
||||
if (titleEl) {
|
||||
titleEl.style.cursor = 'pointer';
|
||||
titleEl.addEventListener('click', () => {
|
||||
const dpEl = calendarDatepicker.value;
|
||||
dpEl.style.display = 'block';
|
||||
dpEl.style.position = 'fixed';
|
||||
dpEl.style.top = '22%';
|
||||
dpEl.style.left = '66%';
|
||||
dpEl.style.transform = 'translate(-50%, -50%)';
|
||||
dpEl.style.zIndex = '9999';
|
||||
dpEl.style.border = 'none';
|
||||
dpEl.style.outline = 'none';
|
||||
dpEl.style.backgroundColor = 'transparent';
|
||||
fpInstance.open();
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 모달 본문 스크롤 */
|
||||
.modal-body {
|
||||
max-height: 130px;
|
||||
max-height: 140px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user