board-comment 다시머지지
This commit is contained in:
parent
692d363756
commit
6e4382f473
@ -61,7 +61,7 @@ const props = defineProps({
|
||||
},
|
||||
profileName: {
|
||||
type: String,
|
||||
default: null,
|
||||
default: '익명',
|
||||
},
|
||||
unknown: {
|
||||
type: Boolean,
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
📌 {{ notice.title }}
|
||||
<i v-if="notice.img" class="bi bi-image me-1"></i>
|
||||
<i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
|
||||
<span v-if="isNewPost(notice.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
|
||||
<span v-if="isNewPost(notice.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
|
||||
</td>
|
||||
<td class="text-center">{{ notice.author }}</td>
|
||||
<td class="text-center">{{ notice.date }}</td>
|
||||
@ -78,7 +78,7 @@
|
||||
{{ post.title }}
|
||||
<i v-if="post.img" class="bi bi-image me-1"></i>
|
||||
<i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
|
||||
<span v-if="isNewPost(post.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
|
||||
<span v-if="isNewPost(post.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
|
||||
</td>
|
||||
<td class="text-center">{{ post.author }}</td>
|
||||
<td class="text-center">{{ post.date }}</td>
|
||||
@ -199,6 +199,7 @@ const fetchGeneralPosts = async (page = 1) => {
|
||||
id: totalPosts - ((page - 1) * selectedSize.value) - index,
|
||||
title: post.title,
|
||||
author: post.author || '익명',
|
||||
rawDate: post.date,
|
||||
date: formatDate(post.date), // 날짜 변환 적용
|
||||
views: post.cnt || 0,
|
||||
hasAttachment: post.hasAttachment || false,
|
||||
@ -239,6 +240,7 @@ const fetchNoticePosts = async () => {
|
||||
title: post.title,
|
||||
author: post.author || '관리자',
|
||||
date: formatDate(post.date),
|
||||
rawDate: post.date,
|
||||
views: post.cnt || 0,
|
||||
hasAttachment: post.hasAttachment || false,
|
||||
img: post.firstImageUrl || null
|
||||
|
||||
@ -149,7 +149,7 @@ const comments = ref([]);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const currentBoardId = ref(Number(route.params.id));
|
||||
const unknown = computed(() => profileName.value === null);
|
||||
const unknown = computed(() => profileName.value === '익명');
|
||||
const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id
|
||||
const authorId = ref(null); // 작성자 id
|
||||
|
||||
@ -189,15 +189,15 @@ const fetchBoardDetails = async () => {
|
||||
|
||||
// API 응답 데이터 반영
|
||||
// const boardDetail = data.boardDetail || {};
|
||||
|
||||
profileName.value = data.author || null;
|
||||
|
||||
|
||||
profileName.value = data.author || '익명';
|
||||
|
||||
// 익명확인하고 싶을때
|
||||
// profileName.value = 'null;
|
||||
|
||||
|
||||
// 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
|
||||
authorId.value = data.author;
|
||||
|
||||
|
||||
boardTitle.value = data.title || '제목 없음';
|
||||
boardContent.value = data.content || '';
|
||||
date.value = data.date || '';
|
||||
@ -206,7 +206,7 @@ const fetchBoardDetails = async () => {
|
||||
dislikes.value = data.dislikeCount || 0;
|
||||
attachment.value = data.hasAttachment || null;
|
||||
commentNum.value = data.commentCount || 0;
|
||||
|
||||
|
||||
} catch (error) {
|
||||
alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
|
||||
}
|
||||
@ -272,12 +272,12 @@ const fetchComments = async (page = 1) => {
|
||||
page
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const commentsList = response.data.data.list.map(comment => ({
|
||||
commentId: comment.LOCCMTSEQ, // 댓글 ID
|
||||
boardId: comment.LOCBRDSEQ,
|
||||
parentId: comment.LOCCMTPNT, // 부모 ID
|
||||
author: comment.author || null,
|
||||
author: comment.author || '익명',
|
||||
content: comment.LOCCMTRPY,
|
||||
likeCount: comment.likeCount || 0,
|
||||
dislikeCount: comment.dislikeCount || 0,
|
||||
@ -458,7 +458,7 @@ const editComment = (comment) => {
|
||||
// c.isCommentPassword = false;
|
||||
// });
|
||||
|
||||
// if (comment.unknown) {
|
||||
// if (comment.unknown) {
|
||||
// comment.isCommentPassword = true;
|
||||
// } else {
|
||||
// comment.isEditTextarea = true;
|
||||
@ -565,10 +565,10 @@ const submitCommentPassword = async (comment, password) => {
|
||||
|
||||
if (response.data.code === 200 && response.data.data === true) {
|
||||
comment.isCommentPassword = false;
|
||||
|
||||
|
||||
if (lastCommentClickedButton.value === "edit") {
|
||||
comment.isEditTextarea = true;
|
||||
// handleSubmitEdit(comment, comment.content);
|
||||
// handleSubmitEdit(comment, comment.content);
|
||||
} else if (lastCommentClickedButton.value === "delete") {
|
||||
|
||||
deleteReplyComment(comment)
|
||||
@ -620,7 +620,7 @@ const deleteReplyComment = async (comment) => {
|
||||
|
||||
if (response.data.code === 200) {
|
||||
// console.log("댓글 삭제 성공!");
|
||||
await fetchComments();
|
||||
await fetchComments();
|
||||
} else {
|
||||
// console.log("댓글 삭제 실패:", response.data.message);
|
||||
alert("댓글 삭제에 실패했습니다.");
|
||||
@ -641,7 +641,7 @@ const handleSubmitEdit = async (comment, editedContent) => {
|
||||
|
||||
// 수정 성공 시 업데이트
|
||||
comment.content = editedContent;
|
||||
comment.isEditTextarea = false;
|
||||
comment.isEditTextarea = false;
|
||||
} catch (error) {
|
||||
console.error("댓글 수정 중 오류 발생:", error);
|
||||
}
|
||||
|
||||
@ -1,307 +1,304 @@
|
||||
<template>
|
||||
<div class="vacation-management">
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="card app-calendar-wrapper">
|
||||
<div class="row g-0">
|
||||
<div class="row g-0">
|
||||
<div class="col app-calendar-content">
|
||||
<div class="card shadow-none border-0">
|
||||
<ProfileList
|
||||
@profileClick="handleProfileClick"
|
||||
:remainingVacationData="remainingVacationData"
|
||||
/>
|
||||
<div class="card shadow-none border-0">
|
||||
<ProfileList
|
||||
@profileClick="handleProfileClick"
|
||||
:remainingVacationData="remainingVacationData"
|
||||
/>
|
||||
<div class="card-body w-75 p-3 align-self-center">
|
||||
<VacationModal
|
||||
<!-- 모달에 필터링된 연차 목록 전달 -->
|
||||
<VacationModal
|
||||
v-if="isModalOpen"
|
||||
:isOpen="isModalOpen"
|
||||
:myVacations="myVacations"
|
||||
:receivedVacations="receivedVacations"
|
||||
:myVacations="filteredMyVacations"
|
||||
:receivedVacations="filteredReceivedVacations"
|
||||
:userColors="userColors"
|
||||
@close="isModalOpen = false"
|
||||
/>
|
||||
/>
|
||||
|
||||
<VacationGrantModal
|
||||
v-if="isGrantModalOpen"
|
||||
:isOpen="isGrantModalOpen"
|
||||
:targetUser="selectedUser"
|
||||
:remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
|
||||
@close="isGrantModalOpen = false"
|
||||
@updateVacation="fetchRemainingVacation"
|
||||
/>
|
||||
<full-calendar
|
||||
<VacationGrantModal
|
||||
v-if="isGrantModalOpen"
|
||||
:isOpen="isGrantModalOpen"
|
||||
:targetUser="selectedUser"
|
||||
:remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
|
||||
@close="isGrantModalOpen = false"
|
||||
@updateVacation="fetchRemainingVacation"
|
||||
/>
|
||||
<full-calendar
|
||||
ref="fullCalendarRef"
|
||||
:options="calendarOptions"
|
||||
class="flatpickr-calendar-only"
|
||||
/>
|
||||
<HalfDayButtons
|
||||
/>
|
||||
<HalfDayButtons
|
||||
@toggleHalfDay="toggleHalfDay"
|
||||
@addVacationRequests="saveVacationChanges"
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import "flatpickr/dist/flatpickr.min.css";
|
||||
import "@/assets/css/app-calendar.css";
|
||||
import { reactive, ref, onMounted, nextTick } from "vue";
|
||||
import axios from "@api";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import HalfDayButtons from "@c/button/HalfDayButtons.vue";
|
||||
import ProfileList from "@c/vacation/ProfileList.vue";
|
||||
import { useUserStore } from "@s/userList";
|
||||
import VacationModal from "@c/modal/VacationModal.vue"
|
||||
import { useUserInfoStore } from "@s/useUserInfoStore";
|
||||
import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
|
||||
import { fetchHolidays } from "@c/calendar/holiday.js";
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted, nextTick, computed } from "vue";
|
||||
import axios from "@api";
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import "flatpickr/dist/flatpickr.min.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 { useUserStore } from "@s/userList";
|
||||
import { useUserInfoStore } from "@s/useUserInfoStore";
|
||||
import { fetchHolidays } from "@c/calendar/holiday.js";
|
||||
|
||||
const userStore = useUserInfoStore();
|
||||
const userListStore = useUserStore();
|
||||
const userList = ref([]);
|
||||
const userColors = ref({});
|
||||
const myVacations = ref([]); // 내가 사용한 연차 목록
|
||||
const receivedVacations = ref([]); // 내가 받은 연차 목록
|
||||
const isModalOpen = ref(false);
|
||||
const remainingVacationData = ref({});
|
||||
const userStore = useUserInfoStore();
|
||||
const userListStore = useUserStore();
|
||||
const userList = ref([]);
|
||||
const userColors = ref({});
|
||||
const myVacations = ref([]); // 전체 "사용한 연차" 목록
|
||||
const receivedVacations = ref([]); // 전체 "받은 연차" 목록
|
||||
const isModalOpen = ref(false);
|
||||
const remainingVacationData = ref({});
|
||||
// 모달을 열 때 기준 연도 (모달에 표시할 연도)
|
||||
const modalYear = ref(new Date().getFullYear());
|
||||
const modalMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
|
||||
const lastRemainingYear = ref(new Date().getFullYear());
|
||||
|
||||
const isGrantModalOpen = ref(false);
|
||||
const selectedUser = ref(null);
|
||||
const isGrantModalOpen = ref(false);
|
||||
const selectedUser = ref(null);
|
||||
|
||||
// FullCalendar 관련 참조 및 데이터
|
||||
const fullCalendarRef = ref(null);
|
||||
const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이벤트 (API 이벤트 + 선택 이벤트)
|
||||
const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
|
||||
const halfDayType = ref(null);
|
||||
const vacationCodeMap = ref({}); // 휴가 코드명 저장용
|
||||
// FullCalendar 관련
|
||||
const fullCalendarRef = ref(null);
|
||||
const calendarEvents = ref([]);
|
||||
const selectedDates = ref(new Map());
|
||||
const halfDayType = ref(null);
|
||||
const vacationCodeMap = ref({});
|
||||
const holidayDates = ref(new Set());
|
||||
const fetchedEvents = ref([]);
|
||||
|
||||
// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
|
||||
const holidayDates = ref(new Set());
|
||||
const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
|
||||
const calendarOptions = reactive({
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
initialView: "dayGridMonth",
|
||||
headerToolbar: {
|
||||
left: "today",
|
||||
center: "title",
|
||||
right: "prev,next",
|
||||
},
|
||||
locale: "ko",
|
||||
selectable: false,
|
||||
dateClick: handleDateClick,
|
||||
datesSet: handleMonthChange,
|
||||
events: calendarEvents,
|
||||
});
|
||||
|
||||
// FullCalendar 옵션 객체 (events에 calendarEvents를 지정)
|
||||
const calendarOptions = reactive({
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
initialView: "dayGridMonth",
|
||||
headerToolbar: {
|
||||
left: "today",
|
||||
center: "title",
|
||||
right: "prev,next",
|
||||
},
|
||||
locale: "ko",
|
||||
selectable: false,
|
||||
dateClick: handleDateClick,
|
||||
datesSet: handleMonthChange,
|
||||
events: calendarEvents,
|
||||
});
|
||||
onMounted(async () => {
|
||||
await userStore.userInfo();
|
||||
await fetchRemainingVacation();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await userStore.userInfo();
|
||||
await fetchRemainingVacation();
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
// 프로필 클릭 시 연차 내역 가져오기
|
||||
const handleProfileClick = async (user) => {
|
||||
try {
|
||||
if (user.MEMBERSEQ === userStore.user.id) {
|
||||
// 내 프로필을 클릭한 경우
|
||||
const response = await axios.get(`vacation/history`);
|
||||
|
||||
if (response.status === 200 && response.data) {
|
||||
myVacations.value = response.data.data.usedVacations || [];
|
||||
receivedVacations.value = response.data.data.receivedVacations || [];
|
||||
isModalOpen.value = true; // 내 연차 모달 열기
|
||||
isGrantModalOpen.value = false;
|
||||
} else {
|
||||
console.warn("❌ 연차 내역을 불러오지 못했습니다.");
|
||||
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;
|
||||
}, {});
|
||||
}
|
||||
} else {
|
||||
// 다른 사람의 프로필을 클릭한 경우
|
||||
selectedUser.value = user;
|
||||
isGrantModalOpen.value = true; // 연차 부여 모달 열기
|
||||
isModalOpen.value = false;
|
||||
} catch (error) {
|
||||
console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("🚨 연차 데이터 불러오기 실패:", error);
|
||||
};
|
||||
|
||||
// 프로필 클릭 시 연차 내역 가져오기
|
||||
const handleProfileClick = async (user) => {
|
||||
try {
|
||||
if (user.MEMBERSEQ === userStore.user.id) {
|
||||
const response = await axios.get(`vacation/history`);
|
||||
if (response.status === 200 && response.data) {
|
||||
myVacations.value = response.data.data.usedVacations || [];
|
||||
receivedVacations.value = response.data.data.receivedVacations || [];
|
||||
isModalOpen.value = true;
|
||||
// 모달을 열 때 기준 연도와 기준 월 갱신
|
||||
modalYear.value = new Date().getFullYear();
|
||||
modalMonth.value = String(new Date().getMonth() + 1).padStart(2, "0");
|
||||
isGrantModalOpen.value = false;
|
||||
} else {
|
||||
console.warn("❌ 연차 내역을 불러오지 못했습니다.");
|
||||
}
|
||||
} else {
|
||||
selectedUser.value = user;
|
||||
isGrantModalOpen.value = true;
|
||||
isModalOpen.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("🚨 연차 데이터 불러오기 실패:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUserList = async () => {
|
||||
try {
|
||||
await userListStore.fetchUserList();
|
||||
userList.value = userListStore.userList;
|
||||
if (!userList.value.length) {
|
||||
console.warn("📌 사용자 목록이 비어 있음!");
|
||||
return;
|
||||
}
|
||||
userColors.value = {};
|
||||
userList.value.forEach((user) => {
|
||||
userColors.value[user.MEMBERSEQ] = user.usercolor || "#FFFFFF";
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("📌 사용자 목록 불러오기 오류:", error);
|
||||
}
|
||||
};
|
||||
|
||||
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] || "기타";
|
||||
};
|
||||
|
||||
// computed: modalYear와 일치하는 항목만 필터링
|
||||
const filteredMyVacations = computed(() => {
|
||||
const filtered = myVacations.value.filter(vac => {
|
||||
console.log(vac)
|
||||
const year = vac.date ? vac.date.split("T")[0].substring(0, 4) : null;
|
||||
console.log("vacation year:", year, "modalYear:", modalYear.value);
|
||||
return year === String(modalYear.value);
|
||||
});
|
||||
console.log("filteredMyVacations:", filtered);
|
||||
return filtered;
|
||||
});
|
||||
|
||||
const filteredReceivedVacations = computed(() => {
|
||||
return receivedVacations.value.filter(vac => {
|
||||
console.log(
|
||||
vac.date,
|
||||
vac.date ? vac.date.split("T")[0].substring(0, 4) : null,
|
||||
modalYear.value
|
||||
);
|
||||
return vac.date && vac.date.split("T")[0].substring(0, 4) === String(modalYear.value);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function updateCalendarEvents() {
|
||||
const selectedEvents = Array.from(selectedDates.value)
|
||||
.filter(([date, type]) => type !== "delete")
|
||||
.map(([date, type]) => ({
|
||||
title: getVacationType(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) {
|
||||
return selectedDates.value.get(event.start) !== "delete";
|
||||
}
|
||||
return true;
|
||||
});
|
||||
calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUserList = async () => {
|
||||
try {
|
||||
await userListStore.fetchUserList();
|
||||
userList.value = userListStore.userList;
|
||||
const getVacationTypeClass = (type) => {
|
||||
if (type === "700101") return "half-day-am";
|
||||
if (type === "700102") return "half-day-pm";
|
||||
return "full-day";
|
||||
};
|
||||
|
||||
if (!userList.value.length) {
|
||||
console.warn("📌 사용자 목록이 비어 있음!");
|
||||
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;
|
||||
}
|
||||
|
||||
userColors.value = {};
|
||||
userList.value.forEach((user) => {
|
||||
userColors.value[user.MEMBERSEQ] = user.usercolor || "#FFFFFF";
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("📌 사용자 목록 불러오기 오류:", error);
|
||||
}
|
||||
};
|
||||
|
||||
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; // code를 key로, name을 value로 설정
|
||||
return acc;
|
||||
}, {});
|
||||
if (selectedDates.value.has(clickedDateStr)) {
|
||||
selectedDates.value.delete(clickedDateStr);
|
||||
updateCalendarEvents();
|
||||
return;
|
||||
}
|
||||
const unsentVacation = myVacations.value.find(
|
||||
(vac) => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(clickedDateStr) && !vac.LOCVACRMM
|
||||
);
|
||||
if (unsentVacation) {
|
||||
selectedDates.value.set(clickedDateStr, "delete");
|
||||
} else {
|
||||
console.warn("❌ 공통 코드 데이터를 불러오지 못했습니다.");
|
||||
const type = halfDayType.value
|
||||
? (halfDayType.value === "AM" ? "700101" : "700102")
|
||||
: "700103";
|
||||
selectedDates.value.set(clickedDateStr, type);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("🚨 공통 코드 API 호출 실패:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 🔹 typeCode를 통해 code명 반환
|
||||
const getVacationType = (typeCode) => {
|
||||
return vacationCodeMap.value[typeCode] || "기타";
|
||||
};
|
||||
|
||||
|
||||
function updateCalendarEvents() {
|
||||
// 신규 선택한 연차(추가 대상): type이 "delete"가 아닌 항목
|
||||
const selectedEvents = Array.from(selectedDates.value)
|
||||
.filter(([date, type]) => type !== "delete")
|
||||
.map(([date, type]) => ({
|
||||
title: getVacationType(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) { // saved 플래그가 있는 이벤트는 저장된 연차
|
||||
return selectedDates.value.get(event.start) !== "delete";
|
||||
}
|
||||
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"; // 연차 → 전체 배경
|
||||
};
|
||||
|
||||
/**
|
||||
* 날짜 클릭 이벤트
|
||||
* - 주말(토, 일)과 공휴일은 클릭되지 않음
|
||||
* - 클릭 시 해당 날짜를 selectedDates에 추가 또는 제거한 후 updateCalendarEvents() 호출
|
||||
*/
|
||||
function handleDateClick(info) {
|
||||
const clickedDateStr = info.dateStr; // "YYYY-MM-DD" 형식
|
||||
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;
|
||||
}
|
||||
|
||||
// 토글: 이미 선택된 날짜라면 해제
|
||||
if (selectedDates.value.has(clickedDateStr)) {
|
||||
selectedDates.value.delete(clickedDateStr);
|
||||
halfDayType.value = null;
|
||||
updateCalendarEvents();
|
||||
return;
|
||||
}
|
||||
|
||||
// 저장된(보낸사람 없는) 연차가 있는지 확인
|
||||
const unsentVacation = myVacations.value.find(
|
||||
(vac) => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(clickedDateStr) && !vac.LOCVACRMM
|
||||
);
|
||||
|
||||
if (unsentVacation) {
|
||||
// 기존 저장된 연차가 있다면, 클릭 시 "delete" 플래그 지정 (즉, 숨김 처리)
|
||||
selectedDates.value.set(clickedDateStr, "delete");
|
||||
} else {
|
||||
// 그렇지 않으면 신규 연차 추가: halfDayType 값에 따라 결정
|
||||
const type = halfDayType.value
|
||||
? (halfDayType.value === "AM" ? "700101" : "700102")
|
||||
: "700103";
|
||||
selectedDates.value.set(clickedDateStr, type);
|
||||
function toggleHalfDay(type) {
|
||||
halfDayType.value = halfDayType.value === type ? null : type;
|
||||
}
|
||||
|
||||
halfDayType.value = null;
|
||||
updateCalendarEvents();
|
||||
}
|
||||
|
||||
/**
|
||||
* 오전/오후 반차 버튼 토글
|
||||
*/
|
||||
function toggleHalfDay(type) {
|
||||
halfDayType.value = halfDayType.value === type ? null : type;
|
||||
}
|
||||
|
||||
/**
|
||||
* 백엔드에서 휴가 데이터를 가져와 이벤트로 변환
|
||||
*/
|
||||
async function fetchVacationData(year, month) {
|
||||
async function fetchVacationData(year, month) {
|
||||
try {
|
||||
const response = await axios.get(`vacation/list/${year}/${month}`);
|
||||
if (response.status === 200) {
|
||||
const vacationList = response.data;
|
||||
// 내 연차 데이터 업데이트 (사용자 본인의 연차만)
|
||||
myVacations.value = vacationList.filter(
|
||||
(vac) => vac.MEMBERSEQ === userStore.user.id
|
||||
);
|
||||
// 기존 저장된 연차 이벤트에 saved 플래그 추가
|
||||
// 모달이 열려 있더라도 전달받은 연도가 기존 modalYear와 다르면 업데이트
|
||||
if (modalYear.value !== year) {
|
||||
myVacations.value = vacationList.filter(
|
||||
(vac) => vac.MEMBERSEQ === userStore.user.id
|
||||
);
|
||||
modalYear.value = year;
|
||||
// modalMonth는 그대로 유지 (월은 모달 업데이트 조건에서 제외)
|
||||
}
|
||||
// 캘린더 이벤트 매핑
|
||||
const events = vacationList
|
||||
.filter((vac) => !vac.LOCVACRMM) // 보낸사람이 없는(저장된) 연차
|
||||
.filter((vac) => !vac.LOCVACRMM)
|
||||
.map((vac) => {
|
||||
let dateStr = vac.LOCVACUDT.split("T")[0];
|
||||
let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
|
||||
let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
|
||||
return {
|
||||
title: getVacationType(vac.LOCVACTYP),
|
||||
start: dateStr,
|
||||
backgroundColor,
|
||||
classNames: [getVacationTypeClass(vac.LOCVACTYP)],
|
||||
saved: true, // saved 플래그 추가
|
||||
saved: true,
|
||||
};
|
||||
})
|
||||
.filter((event) => event !== null);
|
||||
.filter((event) => event.start);
|
||||
return events;
|
||||
} else {
|
||||
console.warn("📌 휴가 데이터를 불러오지 못함");
|
||||
@ -313,94 +310,80 @@ halfDayType.value = halfDayType.value === type ? null : type;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
|
||||
*/
|
||||
async function saveVacationChanges() {
|
||||
// 추가할 연차: selectedDates 항목 중 type이 "delete"가 아닌 경우
|
||||
const selectedDatesArray = Array.from(selectedDates.value);
|
||||
const vacationsToAdd = selectedDatesArray
|
||||
.filter(([date, type]) => type !== "delete")
|
||||
.filter(([date, type]) =>
|
||||
// 기존 데이터에 없거나, 기존 데이터에 있더라도 보낸사람(LOCVACRMM)이 있는 경우 추가
|
||||
!myVacations.value.some(vac => vac.LOCVACUDT.startsWith(date)) ||
|
||||
myVacations.value.some(vac => vac.LOCVACUDT.startsWith(date) && vac.LOCVACRMM)
|
||||
)
|
||||
.map(([date, type]) => ({ date, type }));
|
||||
|
||||
// 삭제할 연차: 기존 데이터 중 보낸사람이 없는 항목에서,
|
||||
// 해당 날짜가 "delete"로 지정되었거나 선택되지 않은 경우
|
||||
const vacationsToDelete = myVacations.value
|
||||
.filter(vac => {
|
||||
const date = vac.LOCVACUDT.split("T")[0];
|
||||
// 오직 해당 날짜가 "delete"로 선택된 경우만 삭제 대상으로 처리
|
||||
return selectedDates.value.get(date) === "delete" && !vac.LOCVACRMM;
|
||||
})
|
||||
.map(vac => {
|
||||
const id = vac.LOCVACSEQ ;
|
||||
return typeof id === "number" ? Number(id) : id;
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await axios.post("vacation/batchUpdate", {
|
||||
add: vacationsToAdd,
|
||||
delete: vacationsToDelete
|
||||
});
|
||||
if (response.data && response.data.status === "OK") {
|
||||
alert("✅ 휴가 변경 사항이 저장되었습니다.");
|
||||
await fetchRemainingVacation();
|
||||
const currentDate = fullCalendarRef.value.getApi().getDate();
|
||||
await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
|
||||
// 초기화: 선택한 날짜 해제
|
||||
selectedDates.value.clear();
|
||||
updateCalendarEvents();
|
||||
} else {
|
||||
alert("❌ 휴가 저장 중 오류가 발생했습니다.");
|
||||
async function saveVacationChanges() {
|
||||
const selectedDatesArray = Array.from(selectedDates.value);
|
||||
const vacationsToAdd = selectedDatesArray
|
||||
.filter(([date, type]) => type !== "delete")
|
||||
.filter(([date, type]) =>
|
||||
!myVacations.value.some(vac => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(date)) ||
|
||||
myVacations.value.some(vac => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(date) && vac.LOCVACRMM)
|
||||
)
|
||||
.map(([date, type]) => ({ date, type }));
|
||||
const vacationsToDelete = myVacations.value
|
||||
.filter(vac => {
|
||||
if (!vac.LOCVACUDT) return false;
|
||||
const date = vac.LOCVACUDT.split("T")[0];
|
||||
return selectedDates.value.get(date) === "delete" && !vac.LOCVACRMM;
|
||||
})
|
||||
.map(vac => {
|
||||
const id = vac.LOCVACSEQ;
|
||||
return typeof id === "number" ? Number(id) : id;
|
||||
});
|
||||
try {
|
||||
const response = await axios.post("vacation/batchUpdate", {
|
||||
add: vacationsToAdd,
|
||||
delete: vacationsToDelete
|
||||
});
|
||||
if (response.data && response.data.status === "OK") {
|
||||
alert("✅ 휴가 변경 사항이 저장되었습니다.");
|
||||
await fetchRemainingVacation();
|
||||
const currentDate = fullCalendarRef.value.getApi().getDate();
|
||||
await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
|
||||
selectedDates.value.clear();
|
||||
updateCalendarEvents();
|
||||
} else {
|
||||
alert("❌ 휴가 저장 중 오류가 발생했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("🚨 휴가 변경 저장 실패:", error);
|
||||
alert("❌ 휴가 저장 요청에 실패했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("🚨 휴가 변경 저장 실패:", error);
|
||||
alert("❌ 휴가 저장 요청에 실패했습니다.");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 달력 월 변경 시 호출 (FullCalendar의 datesSet 옵션)
|
||||
*/
|
||||
function handleMonthChange(viewInfo) {
|
||||
const currentDate = viewInfo.view.currentStart;
|
||||
const year = currentDate.getFullYear();
|
||||
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
|
||||
loadCalendarData(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 loadCalendarData(year, month) {
|
||||
fetchedEvents.value = [];
|
||||
const [vacationEvents, holidayEvents] = await Promise.all([
|
||||
fetchVacationData(year, month),
|
||||
fetchHolidays(year, month),
|
||||
]);
|
||||
// 클릭 불가 처리를 위해 공휴일 날짜 Set 업데이트
|
||||
holidayDates.value = new Set(holidayEvents.map((event) => event.start));
|
||||
fetchedEvents.value = [...vacationEvents, ...holidayEvents];
|
||||
updateCalendarEvents();
|
||||
await nextTick();
|
||||
fullCalendarRef.value.getApi().refetchEvents();
|
||||
}
|
||||
async function loadCalendarData(year, month) {
|
||||
if (lastRemainingYear.value !== year) {
|
||||
await fetchRemainingVacation();
|
||||
lastRemainingYear.value = year;
|
||||
}
|
||||
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();
|
||||
}
|
||||
|
||||
// 컴포넌트 마운트 시 현재 달의 데이터 로드
|
||||
onMounted(async () => {
|
||||
await fetchUserList(); // 사용자 목록 먼저 불러오기
|
||||
await fetchVacationCodes();
|
||||
const today = new Date();
|
||||
const year = today.getFullYear();
|
||||
const month = String(today.getMonth() + 1).padStart(2, "0");
|
||||
await loadCalendarData(year, month);
|
||||
});
|
||||
</script>
|
||||
onMounted(async () => {
|
||||
await fetchUserList();
|
||||
await fetchVacationCodes();
|
||||
const today = new Date();
|
||||
const year = today.getFullYear();
|
||||
const month = String(today.getMonth() + 1).padStart(2, "0");
|
||||
await loadCalendarData(year, month);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style>
|
||||
/* 스타일 정의 */
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user