126 lines
4.0 KiB
Vue
126 lines
4.0 KiB
Vue
<template>
|
|
<div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
|
|
<div class="vac-modal-content">
|
|
<div class="vac-modal-header">
|
|
<h5 class="vac-grant-modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
|
|
<button class="close-btn" @click="closeModal">✖</button>
|
|
</div>
|
|
<div class="vac-modal-body">
|
|
<p class="vac-modal-text">선물할 연차 개수를 선택하세요.</p>
|
|
<div class="count-container">
|
|
<button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
|
|
<span class="count-value">{{ grantCount }}</span>
|
|
<button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
|
|
</div>
|
|
<div class="custom-button-container">
|
|
<button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0 || isGiftButtonDisabled">
|
|
<i class="bx bx-gift"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineProps, defineEmits, watch, onMounted, computed } from "vue";
|
|
import axios from "@api";
|
|
import { useToastStore } from '@s/toastStore';
|
|
import { useUserInfoStore } from "@s/useUserInfoStore";
|
|
const userStore = useUserInfoStore();
|
|
const toastStore = useToastStore();
|
|
const props = defineProps({
|
|
isOpen: Boolean,
|
|
targetUser: Object,
|
|
remainingVacationData: Object,
|
|
});
|
|
|
|
const emit = defineEmits(["close", "updateVacation"]);
|
|
const grantCount = ref(0);
|
|
const maxQuota = 2;
|
|
const sentCount = ref(0);
|
|
const availableQuota = ref(2);
|
|
|
|
const myUserId = computed(() => userStore.user.id);
|
|
const myRemainingQuota = computed(() => {
|
|
return props.remainingVacationData?.[myUserId.value] ?? 0;
|
|
});
|
|
const isGiftButtonDisabled = computed(() => {
|
|
return myRemainingQuota.value <= 0;
|
|
});
|
|
// 사원 별 남은 보내기 개수
|
|
const fetchSentVacationCount = async () => {
|
|
try {
|
|
const payload = { receiverId: props.targetUser.MEMBERSEQ };
|
|
const response = await axios.get("vacation/sent", { params: payload });
|
|
sentCount.value = response.data.data[0]?.count || 0;
|
|
availableQuota.value = Math.max(maxQuota - sentCount.value, 0);
|
|
grantCount.value = availableQuota.value;
|
|
} catch (error) {
|
|
availableQuota.value = maxQuota;
|
|
grantCount.value = maxQuota;
|
|
}
|
|
};
|
|
|
|
// 개수 증가
|
|
const increaseCount = () => {
|
|
if (grantCount.value < availableQuota.value) {
|
|
grantCount.value++;
|
|
}
|
|
};
|
|
// 개수 감소
|
|
const decreaseCount = () => {
|
|
if (grantCount.value > 0) {
|
|
grantCount.value--;
|
|
}
|
|
};
|
|
|
|
// 연차 선물하기
|
|
const saveVacationGrant = async () => {
|
|
try {
|
|
const payload = [{
|
|
date: new Date().toISOString().split("T")[0],
|
|
type: "700103",
|
|
receiverId: props.targetUser.MEMBERSEQ,
|
|
count: grantCount.value,
|
|
}];
|
|
const response = await axios.post("vacation", payload);
|
|
if (response.data?.status === "OK") {
|
|
toastStore.onToast('연차가 선물되었습니다.', 's');
|
|
await fetchSentVacationCount();
|
|
emit("updateVacation");
|
|
closeModal();
|
|
} else {
|
|
toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
|
|
}
|
|
} catch (error) {
|
|
toastStore.onToast(' 연차 선물 실패!!.', 'e');
|
|
}
|
|
};
|
|
|
|
// 모달 닫기기
|
|
const closeModal = () => {
|
|
emit("close");
|
|
};
|
|
|
|
watch(() => props.isOpen, async (newVal) => {
|
|
if (newVal && props.targetUser?.MEMBERSEQ) {
|
|
await fetchSentVacationCount();
|
|
}
|
|
});
|
|
watch(() => props.targetUser, async (newUser) => {
|
|
if (newUser?.MEMBERSEQ) {
|
|
await fetchSentVacationCount();
|
|
}
|
|
}, { deep: true });
|
|
|
|
onMounted(async () => {
|
|
if (props.isOpen && props.targetUser?.MEMBERSEQ) {
|
|
await fetchSentVacationCount();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|