휴가 로직 변경
This commit is contained in:
parent
6d883aacb3
commit
50d3b0d257
@ -157,7 +157,7 @@
|
||||
.fc-toolbar-title {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 클릭 가능한 날짜 (오늘 + 미래) */
|
||||
/* 클릭 가능한 날짜 */
|
||||
.fc-daygrid-day.clickable {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
@ -362,6 +362,28 @@
|
||||
background-color: #0b5ed7 !important;
|
||||
color: white;
|
||||
}
|
||||
/* 풀 연차 버튼 스타일 */
|
||||
.vac-btn-primary {
|
||||
color: #fff;
|
||||
background-color: #28a745; /* 녹색 */
|
||||
border-color: #28a745;
|
||||
box-shadow: 0 0.125rem 0.25rem 0 rgba(40, 167, 69, 0.4);
|
||||
font-size: 28px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
/* 풀 연차 버튼 활성화 스타일 */
|
||||
.vac-btn-primary.active {
|
||||
background-color: #218838 !important;
|
||||
color: #fff;
|
||||
border: 3px solid #91d091 !important;
|
||||
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
/* 풀 연차 버튼이 눌렸을 때 효과 */
|
||||
.vac-btn-primary:active {
|
||||
transform: scale(0.9);
|
||||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
/* 버튼 기본 */
|
||||
.vac-btn-success {
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
@ -1,26 +1,40 @@
|
||||
<template>
|
||||
<div class="row gx-2 mb-4">
|
||||
<div class="col-4">
|
||||
<div class="col-3">
|
||||
<div class="ratio ratio-1x1">
|
||||
<!-- 오전 반차 버튼 -->
|
||||
<button class="vac-btn vac-btn-warning rounded-circle d-flex align-items-center justify-content-center" :class="{ active: halfDayType === 'AM' }"
|
||||
<button class="vac-btn vac-btn-warning rounded-circle d-flex align-items-center justify-content-center"
|
||||
:class="{ active: halfDayType === 'AM' }"
|
||||
@click="toggleHalfDay('AM')">
|
||||
<i class="bi bi-sun"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="col-3">
|
||||
<div class="ratio ratio-1x1">
|
||||
<!-- 오후 반차 버튼 -->
|
||||
<button class="vac-btn vac-btn-info rounded-circle d-flex align-items-center justify-content-center" :class="{ active: halfDayType === 'PM' }"
|
||||
<button class="vac-btn vac-btn-info rounded-circle d-flex align-items-center justify-content-center"
|
||||
:class="{ active: halfDayType === 'PM' }"
|
||||
@click="toggleHalfDay('PM')">
|
||||
<i class="bi bi-moon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="col-3">
|
||||
<div class="ratio ratio-1x1">
|
||||
<button class="vac-btn-success rounded-circle d-flex align-items-center justify-content-center" @click="addVacationRequests"
|
||||
<!-- 풀 연차 버튼 -->
|
||||
<button class="vac-btn vac-btn-primary rounded-circle d-flex align-items-center justify-content-center"
|
||||
:class="{ active: halfDayType === 'FULL' }"
|
||||
@click="toggleHalfDay('FULL')">
|
||||
<i class="bi bi-calendar"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="ratio ratio-1x1">
|
||||
<!-- 저장 버튼 -->
|
||||
<button class="vac-btn-success rounded-circle d-flex align-items-center justify-content-center"
|
||||
@click="addVacationRequests"
|
||||
:class="{ active: !isDisabled, disabled: isDisabled }">
|
||||
✔
|
||||
</button>
|
||||
@ -30,11 +44,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineEmits, ref, defineProps, watch } from "vue";
|
||||
import { defineEmits, ref, defineProps } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
isDisabled: Boolean,
|
||||
selectedDate: String // 날짜 선택 값을 props로 받음
|
||||
isDisabled: Boolean
|
||||
});
|
||||
|
||||
const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
|
||||
@ -45,14 +58,7 @@ halfDayType.value = halfDayType.value === type ? null : type;
|
||||
emit("toggleHalfDay", halfDayType.value);
|
||||
};
|
||||
|
||||
// `selectedDate`가 변경되면 반차 선택 초기화
|
||||
watch(() => props.selectedDate, (newDate) => {
|
||||
if (newDate) {
|
||||
resetHalfDay();
|
||||
}
|
||||
});
|
||||
|
||||
// 날짜 선택 후 반차 버튼 상태 초기화
|
||||
// 날짜 클릭 후 버튼 상태 자동 초기화
|
||||
const resetHalfDay = () => {
|
||||
halfDayType.value = null;
|
||||
emit("resetHalfDay");
|
||||
@ -64,4 +70,3 @@ emit("addVacationRequests");
|
||||
|
||||
defineExpose({ resetHalfDay });
|
||||
</script>
|
||||
|
||||
|
||||
@ -106,6 +106,7 @@ const isGrantModalOpen = ref(false);
|
||||
const fullCalendarRef = ref(null);
|
||||
const calendarEvents = ref([]);
|
||||
const selectedDates = ref(new Map());
|
||||
|
||||
const halfDayType = ref(null);
|
||||
const vacationCodeMap = ref({});
|
||||
const holidayDates = ref(new Set());
|
||||
@ -118,7 +119,6 @@ const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"
|
||||
// 데이트피커 인풋 ref
|
||||
const calendarDatepicker = ref(null);
|
||||
let fpInstance = null;
|
||||
|
||||
/* 변경사항 여부 확인 */
|
||||
const hasChanges = computed(() => {
|
||||
return (
|
||||
@ -173,40 +173,53 @@ function handleDateClick(info) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isMyVacation = myVacations.value.some(vac => {
|
||||
const vacDate = vac.date ? vac.date.substring(0, 10) : "";
|
||||
return vacDate === clickedDateStr && !vac.receiverId;
|
||||
});
|
||||
// 기존 값 확인
|
||||
const currentValue = selectedDates.value.get(clickedDateStr);
|
||||
|
||||
const isMyVacation = myVacations.value.some(vac => vac.date.substring(0, 10) === clickedDateStr && !vac.receiverId);
|
||||
|
||||
// 이미 활성화된 날짜를 한 번 더 클릭하면 비활성화
|
||||
if (currentValue && currentValue !== "delete") {
|
||||
console.log("🛑 활성화된 날짜 비활성화:", clickedDateStr);
|
||||
selectedDates.value.delete(clickedDateStr);
|
||||
updateCalendarEvents();
|
||||
return;
|
||||
}
|
||||
|
||||
// 버튼을 누르지 않았을 때 - 삭제 모드
|
||||
if (!halfDayType.value) {
|
||||
if (isMyVacation) {
|
||||
if (selectedDates.value.get(clickedDateStr) === "delete") {
|
||||
if (currentValue === "delete") {
|
||||
selectedDates.value.delete(clickedDateStr);
|
||||
} else {
|
||||
selectedDates.value.set(clickedDateStr, "delete");
|
||||
}
|
||||
} else {
|
||||
selectedDates.value.set(clickedDateStr, "700103");
|
||||
}
|
||||
updateCalendarEvents();
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedDates.value.has(clickedDateStr)) {
|
||||
selectedDates.value.delete(clickedDateStr);
|
||||
updateCalendarEvents();
|
||||
return;
|
||||
// 버튼을 눌렀을 때 - 기존 휴가 삭제 후 새로운 값 추가
|
||||
if (isMyVacation) {
|
||||
console.log("🗑 기존 휴가 삭제 후 새로운 상태 추가:", clickedDateStr);
|
||||
selectedDates.value.set(clickedDateStr, "delete");
|
||||
}
|
||||
const type = halfDayType.value
|
||||
? (halfDayType.value === "AM" ? "700101" : "700102")
|
||||
: "700103";
|
||||
|
||||
const type = halfDayType.value === "AM" ? "700101" :
|
||||
halfDayType.value === "PM" ? "700102" :
|
||||
"700103"; // 풀연차
|
||||
|
||||
selectedDates.value.set(clickedDateStr, type);
|
||||
|
||||
if (halfDayType.value) {
|
||||
// 버튼을 한 번 사용 후 자동 해제 (일회성)
|
||||
halfDayType.value = null;
|
||||
}
|
||||
updateCalendarEvents();
|
||||
|
||||
if (halfDayButtonsRef.value) {
|
||||
halfDayButtonsRef.value.resetHalfDay();
|
||||
}
|
||||
|
||||
updateCalendarEvents();
|
||||
}
|
||||
|
||||
function markClickableDates() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user