Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front
This commit is contained in:
yoon
commit
c1c4f68901
@ -22,21 +22,21 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineEmits, ref } from "vue";
|
||||
<script setup>
|
||||
import { defineEmits, ref } from "vue";
|
||||
|
||||
const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
|
||||
const halfDayType = ref(null);
|
||||
const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
|
||||
const halfDayType = ref(null);
|
||||
|
||||
const toggleHalfDay = (type) => {
|
||||
halfDayType.value = halfDayType.value === type ? null : type;
|
||||
emit("toggleHalfDay", halfDayType.value);
|
||||
};
|
||||
const toggleHalfDay = (type) => {
|
||||
halfDayType.value = halfDayType.value === type ? null : type;
|
||||
emit("toggleHalfDay", halfDayType.value);
|
||||
};
|
||||
|
||||
const addVacationRequests = () => {
|
||||
emit("addVacationRequests");
|
||||
};
|
||||
</script>
|
||||
const addVacationRequests = () => {
|
||||
emit("addVacationRequests");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
@ -68,12 +68,12 @@
|
||||
{
|
||||
date: new Date().toISOString().split("T")[0],
|
||||
type: "700103",
|
||||
senderId: props.targetUser.senderId,
|
||||
receiverId: props.targetUser.MEMBERSEQ,
|
||||
count: grantCount.value,
|
||||
},
|
||||
];
|
||||
|
||||
console.log(props.targetUser)
|
||||
console.log(payload)
|
||||
const response = await axios.post("vacation", payload);
|
||||
console.log(response)
|
||||
if (response.data && response.data.status === "OK") {
|
||||
|
||||
@ -1,116 +1,164 @@
|
||||
<template>
|
||||
<div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
|
||||
<div class="modal-content modal-scroll">
|
||||
<h5 class="modal-title">📅 내 연차 사용 내역</h5>
|
||||
<button class="close-btn" @click="closeModal">✖</button>
|
||||
<div class="modal-content modal-scroll">
|
||||
<h5 class="modal-title">📅 내 연차 사용 내역</h5>
|
||||
<button class="close-btn" @click="closeModal">✖</button>
|
||||
|
||||
<!-- 연차 사용 및 받은 연차 리스트 -->
|
||||
<div class="modal-body" v-if="mergedVacations.length > 0">
|
||||
<ol class="vacation-list">
|
||||
<li v-for="(vacation, index) in mergedVacations" :key="index" class="vacation-item">
|
||||
<span v-if="vacation.type === 'used'" class="vacation-index">
|
||||
{{ getVacationIndex(index) }})
|
||||
</span>
|
||||
<span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
|
||||
{{ vacation.type === 'used' ? '-' : '+' }}
|
||||
</span>
|
||||
<span
|
||||
:style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
|
||||
class="vacation-date"
|
||||
>
|
||||
{{ formatDate(vacation.date) }}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!-- 연차 목록 -->
|
||||
<div class="modal-body" v-if="mergedVacations.length > 0">
|
||||
<ol class="vacation-list">
|
||||
<li
|
||||
v-for="(vac, index) in mergedVacations"
|
||||
:key="vac._expandIndex"
|
||||
class="vacation-item"
|
||||
>
|
||||
<!-- Used 항목만 인덱스 표시 -->
|
||||
<span v-if="vac.category === 'used'" class="vacation-index">
|
||||
{{ usedVacationIndexMap[vac._expandIndex] }})
|
||||
</span>
|
||||
|
||||
<!-- 연차 데이터 없음 -->
|
||||
<p v-if="mergedVacations.length === 0" class="no-data">
|
||||
🚫 사용한 연차가 없습니다.
|
||||
</p>
|
||||
<span :class="vac.category === 'used' ? 'minus-symbol' : 'plus-symbol'">
|
||||
{{ vac.category === 'used' ? '-' : '+' }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
:style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
|
||||
class="vacation-date"
|
||||
>
|
||||
{{ formatDate(vac.date) }}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- 연차 데이터 없음 -->
|
||||
<p v-else class="no-data">
|
||||
🚫 사용한 연차가 없습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
isOpen: Boolean,
|
||||
myVacations: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
receivedVacations: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
userColors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
isOpen: Boolean,
|
||||
myVacations: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
receivedVacations: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
userColors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
// ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
|
||||
const usedVacations = computed(() =>
|
||||
props.myVacations.map(v => ({ ...v, type: "used" }))
|
||||
);
|
||||
|
||||
const receivedVacations = computed(() =>
|
||||
props.receivedVacations.map(v => ({ ...v, type: "received" }))
|
||||
);
|
||||
|
||||
// ✅ 정확한 정렬 및 리스트 병합
|
||||
const mergedVacations = computed(() => {
|
||||
return [...usedVacations.value, ...receivedVacations.value].sort(
|
||||
(a, b) => new Date(b.date) - new Date(a.date)
|
||||
);
|
||||
/**
|
||||
* 1) Used 휴가를 used_quota만큼 펼치기
|
||||
* - category: "used"
|
||||
* - code: 휴가 코드(예: LOCVACTYP)
|
||||
* - _expandIndex: 각 항목마다 고유한 확장 인덱스 (누적 인덱스 매핑에 사용)
|
||||
*/
|
||||
let globalCounter = 0; // 확장 시 사용할 전역 카운터
|
||||
const usedVacations = computed(() => {
|
||||
const result = [];
|
||||
props.myVacations.forEach((v) => {
|
||||
const count = v.used_quota || 1;
|
||||
for (let i = 0; i < count; i++) {
|
||||
result.push({
|
||||
...v,
|
||||
category: "used",
|
||||
code: v.LOCVACTYP, // 휴가 코드 (700103 등)
|
||||
_expandIndex: globalCounter++,
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
});
|
||||
|
||||
// ✅ 연차 개수 반영된 인덱스 반환 (누적 합산)
|
||||
const getVacationIndex = (index) => {
|
||||
let count = 0;
|
||||
for (let i = 0; i <= index; i++) {
|
||||
const v = mergedVacations.value[i];
|
||||
count += v.used_quota; // 누적하여 더함
|
||||
}
|
||||
return count;
|
||||
};
|
||||
/**
|
||||
* 2) Received 휴가: category: "received"
|
||||
*/
|
||||
const receivedVacations = computed(() =>
|
||||
props.receivedVacations.map((v) => ({
|
||||
...v,
|
||||
category: "received",
|
||||
}))
|
||||
);
|
||||
|
||||
// ✅ 날짜 형식 변환 (YYYY-MM-DD)
|
||||
/**
|
||||
* 3) Used 휴가만 날짜 오름차순 정렬 → 누적 인덱스 계산
|
||||
* - type === "700103"이면 +1
|
||||
* - 그 외이면 +0.5
|
||||
*/
|
||||
const sortedUsedVacationsAsc = computed(() => {
|
||||
return [...usedVacations.value].sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date) || (a._expandIndex - b._expandIndex);
|
||||
});
|
||||
});
|
||||
|
||||
const usedVacationIndexMap = computed(() => {
|
||||
let cumulative = 0;
|
||||
const map = {};
|
||||
sortedUsedVacationsAsc.value.forEach((item) => {
|
||||
const increment = item.type === "700103" ? 1 : 0.5;
|
||||
cumulative += increment;
|
||||
map[item._expandIndex] = cumulative;
|
||||
});
|
||||
return map;
|
||||
});
|
||||
|
||||
/**
|
||||
* 4) 최종 표시할 merged 리스트 (Used + Received)
|
||||
* - 날짜 내림차순 정렬 (최신 → 과거)
|
||||
*/
|
||||
const mergedVacations = computed(() => {
|
||||
const all = [...usedVacations.value, ...receivedVacations.value];
|
||||
// 날짜 내림차순 + 확장 인덱스 내림차순
|
||||
all.sort((a, b) => {
|
||||
const dateDiff = new Date(b.date) - new Date(a.date);
|
||||
if (dateDiff !== 0) return dateDiff;
|
||||
return b._expandIndex - a._expandIndex;
|
||||
});
|
||||
return all;
|
||||
});
|
||||
|
||||
/** 날짜 포맷 (YYYY-MM-DD) */
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
|
||||
if (!dateString) return "";
|
||||
// 만약 dateString이 "YYYY-MM-DD" 형식이라면 그대로 반환
|
||||
// 혹은 "YYYY-MM-DD..." 라면 앞 10자만 잘라 반환
|
||||
return dateString.substring(0, 10);
|
||||
};
|
||||
|
||||
|
||||
/** 모달 닫기 */
|
||||
const closeModal = () => {
|
||||
emit("close");
|
||||
emit("close");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 모달 스타일 */
|
||||
.modal-dialog {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 스크롤 가능한 모달 */
|
||||
.modal-content {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
width: 75%;
|
||||
<style scoped>
|
||||
/* 모달 본문 */
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
width: 400px;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 닫기 버튼 */
|
||||
.close-btn {
|
||||
/* 닫기 버튼 */
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
@ -118,18 +166,17 @@ const closeModal = () => {
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* 리스트 기본 스타일 */
|
||||
.vacation-list {
|
||||
/* 리스트 기본 스타일 */
|
||||
.vacation-list {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 리스트 아이템 */
|
||||
.vacation-item {
|
||||
/* 리스트 아이템 */
|
||||
.vacation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
@ -138,49 +185,41 @@ const closeModal = () => {
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
/* 인덱스 (연차 사용 개수) */
|
||||
.vacation-index {
|
||||
/* 인덱스 (연차 사용 개수) */
|
||||
.vacation-index {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
/* "-" 빨간색 */
|
||||
.minus-symbol {
|
||||
/* "-" 빨간색 */
|
||||
.minus-symbol {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* "+" 파란색 */
|
||||
.plus-symbol {
|
||||
/* "+" 파란색 */
|
||||
.plus-symbol {
|
||||
color: blue;
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 날짜 스타일 */
|
||||
.vacation-date {
|
||||
/* 날짜 스타일 */
|
||||
.vacation-date {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
/* 연차 유형 스타일 */
|
||||
.vacation-type {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: gray;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* 연차 데이터 없음 */
|
||||
.no-data {
|
||||
/* 연차 데이터 없음 */
|
||||
.no-data {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: gray;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="card-body d-flex justify-content-center">
|
||||
<ul class="list-unstyled d-flex align-items-center gap-3 mb-0 mt-2">
|
||||
<ul class="list-unstyled d-flex align-items-center gap-5 mb-0 mt-2">
|
||||
<li
|
||||
v-for="(user, index) in sortedUserList"
|
||||
:key="index"
|
||||
@ -10,7 +10,7 @@
|
||||
:aria-label="user.MEMBERSEQ"
|
||||
>
|
||||
<img
|
||||
class="rounded-circle user-avatar "
|
||||
class="rounded-circle"
|
||||
:src="getUserProfileImage(user.MEMBERPRF)"
|
||||
alt="user"
|
||||
:style="getDynamicStyle(user)"
|
||||
@ -96,10 +96,10 @@
|
||||
const profileSize = computed(() => {
|
||||
const totalUsers = userList.value.length;
|
||||
|
||||
if (totalUsers <= 7) return "120px"; // 7명 이하
|
||||
if (totalUsers <= 10) return "100px"; // ~10명
|
||||
if (totalUsers <= 20) return "80px"; // ~20명
|
||||
return "60px"; // 20명 이상
|
||||
if (totalUsers <= 7) return "100px"; // 7명 이하
|
||||
if (totalUsers <= 10) return "80px"; // ~10명
|
||||
if (totalUsers <= 20) return "60px"; // ~20명
|
||||
return "40px"; // 20명 이상
|
||||
});
|
||||
|
||||
// 개별 유저 스타일 적용
|
||||
|
||||
@ -9,16 +9,16 @@
|
||||
@profileClick="handleProfileClick"
|
||||
:remainingVacationData="remainingVacationData"
|
||||
/>
|
||||
<div class="card-body">
|
||||
<div class="card-body w-75 p-3 align-self-center">
|
||||
<VacationModal
|
||||
v-if="isModalOpen"
|
||||
:isOpen="isModalOpen"
|
||||
:myVacations="myVacations"
|
||||
:receivedVacations="receivedVacations"
|
||||
:userColors="userColors"
|
||||
@click="handleProfileClick(user)"
|
||||
@close="isModalOpen = false"
|
||||
/>
|
||||
|
||||
<VacationGrantModal
|
||||
v-if="isGrantModalOpen"
|
||||
:isOpen="isGrantModalOpen"
|
||||
@ -34,7 +34,7 @@
|
||||
/>
|
||||
<HalfDayButtons
|
||||
@toggleHalfDay="toggleHalfDay"
|
||||
@addVacationRequests="addVacationRequests"
|
||||
@addVacationRequests="saveVacationChanges"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -99,7 +99,6 @@ const handleProfileClick = async (user) => {
|
||||
if (user.MEMBERSEQ === userStore.user.id) {
|
||||
// 내 프로필을 클릭한 경우
|
||||
const response = await axios.get(`vacation/history`);
|
||||
console.log(response)
|
||||
|
||||
if (response.status === 200 && response.data) {
|
||||
myVacations.value = response.data.data.usedVacations || [];
|
||||
@ -188,23 +187,28 @@ const getVacationType = (typeCode) => {
|
||||
return vacationCodeMap.value[typeCode] || "기타";
|
||||
};
|
||||
|
||||
/**
|
||||
* API 이벤트(fetchedEvents)와 사용자가 선택한 날짜(selectedDates)를 병합하여
|
||||
* calendarEvents를 업데이트하는 함수
|
||||
* - 선택 이벤트는 display: "background" 옵션을 사용하여 배경으로 표시
|
||||
* - 선택된 타입에 따라 클래스(selected-am, selected-pm, selected-full)를 부여함
|
||||
*/
|
||||
|
||||
function updateCalendarEvents() {
|
||||
const selectedEvents = Array.from(selectedDates.value).map(([date, type]) => {
|
||||
return {
|
||||
title: getVacationType(type),
|
||||
start: date,
|
||||
backgroundColor: "rgba(0, 128, 0, 0.3)",
|
||||
display: "background",
|
||||
classNames: [getVacationTypeClass(type)],
|
||||
};
|
||||
});
|
||||
calendarEvents.value = [...fetchedEvents.value, ...selectedEvents];
|
||||
// 신규 선택한 연차(추가 대상): type이 "delete"가 아닌 항목
|
||||
const selectedEvents = Array.from(selectedDates.value)
|
||||
.filter(([date, type]) => type !== "delete")
|
||||
.map(([date, type]) => ({
|
||||
title: getVacationType(type),
|
||||
start: date,
|
||||
backgroundColor: "rgba(0, 128, 0, 0.3)",
|
||||
display: "background",
|
||||
classNames: [getVacationTypeClass(type)]
|
||||
}));
|
||||
|
||||
// 기존 백엔드에서 불러온 저장된 연차 이벤트 중,
|
||||
// 해당 날짜가 삭제 대상으로 표시되어 있으면 제거
|
||||
const filteredFetchedEvents = fetchedEvents.value.filter(event => {
|
||||
if (event.saved) { // saved 플래그가 있는 이벤트는 저장된 연차
|
||||
return selectedDates.value.get(event.start) !== "delete";
|
||||
}
|
||||
return true;
|
||||
});
|
||||
calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
|
||||
}
|
||||
|
||||
/**
|
||||
@ -221,30 +225,46 @@ calendarEvents.value = [...fetchedEvents.value, ...selectedEvents];
|
||||
* - 주말(토, 일)과 공휴일은 클릭되지 않음
|
||||
* - 클릭 시 해당 날짜를 selectedDates에 추가 또는 제거한 후 updateCalendarEvents() 호출
|
||||
*/
|
||||
function handleDateClick(info) {
|
||||
const clickedDateStr = info.dateStr;
|
||||
const clickedDate = info.date;
|
||||
function handleDateClick(info) {
|
||||
const clickedDateStr = info.dateStr; // "YYYY-MM-DD" 형식
|
||||
const clickedDate = info.date;
|
||||
const todayStr = new Date().toISOString().split("T")[0];
|
||||
|
||||
// 주말 (토:6, 일:0)은 클릭 무시
|
||||
if (clickedDate.getDay() === 0 || clickedDate.getDay() === 6) {
|
||||
// 주말, 공휴일, 오늘 이전 날짜는 클릭 불가
|
||||
if (
|
||||
clickedDate.getDay() === 0 ||
|
||||
clickedDate.getDay() === 6 ||
|
||||
holidayDates.value.has(clickedDateStr) ||
|
||||
clickedDateStr < todayStr
|
||||
) {
|
||||
return;
|
||||
}
|
||||
// 공휴일이면 클릭 무시
|
||||
if (holidayDates.value.has(clickedDateStr)) {
|
||||
return;
|
||||
}
|
||||
if (!selectedDates.value.has(clickedDateStr)) {
|
||||
const type = halfDayType.value
|
||||
? halfDayType.value === "AM"
|
||||
? "700101"
|
||||
: "700102"
|
||||
: "700103";
|
||||
selectedDates.value.set(clickedDateStr, type);
|
||||
} else {
|
||||
}
|
||||
|
||||
// 토글: 이미 선택된 날짜라면 해제
|
||||
if (selectedDates.value.has(clickedDateStr)) {
|
||||
selectedDates.value.delete(clickedDateStr);
|
||||
}
|
||||
halfDayType.value = null;
|
||||
updateCalendarEvents();
|
||||
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);
|
||||
}
|
||||
|
||||
halfDayType.value = null;
|
||||
updateCalendarEvents();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -257,66 +277,93 @@ halfDayType.value = halfDayType.value === type ? null : type;
|
||||
/**
|
||||
* 백엔드에서 휴가 데이터를 가져와 이벤트로 변환
|
||||
*/
|
||||
async function fetchVacationData(year, month) {
|
||||
try {
|
||||
async function fetchVacationData(year, month) {
|
||||
try {
|
||||
const response = await axios.get(`vacation/list/${year}/${month}`);
|
||||
if (response.status == 200) {
|
||||
const vacationList = response.data;
|
||||
const events = vacationList
|
||||
if (response.status === 200) {
|
||||
const vacationList = response.data;
|
||||
// 내 연차 데이터 업데이트 (사용자 본인의 연차만)
|
||||
myVacations.value = vacationList.filter(
|
||||
(vac) => vac.MEMBERSEQ === userStore.user.id
|
||||
);
|
||||
// 기존 저장된 연차 이벤트에 saved 플래그 추가
|
||||
const events = vacationList
|
||||
.filter((vac) => !vac.LOCVACRMM) // 보낸사람이 없는(저장된) 연차
|
||||
.map((vac) => {
|
||||
let dateStr = vac.LOCVACUDT.split("T")[0];
|
||||
let className = "fc-daygrid-event";
|
||||
let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
|
||||
return {
|
||||
let dateStr = 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 플래그 추가
|
||||
};
|
||||
})
|
||||
.filter((event) => event !== null);
|
||||
return events;
|
||||
return events;
|
||||
} else {
|
||||
console.warn("📌 휴가 데이터를 불러오지 못함");
|
||||
return [];
|
||||
console.warn("📌 휴가 데이터를 불러오지 못함");
|
||||
return [];
|
||||
}
|
||||
} catch (error) {
|
||||
} catch (error) {
|
||||
console.error("Error fetching vacation data:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
|
||||
*/
|
||||
async function addVacationRequests() {
|
||||
if (selectedDates.value.size === 0) {
|
||||
alert("휴가를 선택해주세요.");
|
||||
return;
|
||||
}
|
||||
const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
|
||||
date,
|
||||
type,
|
||||
}));
|
||||
try {
|
||||
const response = await axios.post("vacation", vacationRequests);
|
||||
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;
|
||||
});
|
||||
|
||||
|
||||
console.log("vacationsToAdd:", vacationsToAdd);
|
||||
console.log("vacationsToDelete:", vacationsToDelete);
|
||||
|
||||
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();
|
||||
const year = currentDate.getFullYear();
|
||||
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
|
||||
loadCalendarData(year, month);
|
||||
selectedDates.value.clear();
|
||||
updateCalendarEvents();
|
||||
alert("✅ 휴가 변경 사항이 저장되었습니다.");
|
||||
await fetchRemainingVacation();
|
||||
const currentDate = fullCalendarRef.value.getApi().getDate();
|
||||
await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
|
||||
// 초기화: 선택한 날짜 해제
|
||||
selectedDates.value.clear();
|
||||
updateCalendarEvents();
|
||||
} else {
|
||||
alert("휴가 저장 중 오류가 발생했습니다.");
|
||||
alert("❌ 휴가 저장 중 오류가 발생했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("휴가 저장에 실패했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("🚨 휴가 변경 저장 실패:", error);
|
||||
alert("❌ 휴가 저장 요청에 실패했습니다.");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user