휴가가리스트 모달
This commit is contained in:
parent
2304c3d4d3
commit
f7ca508a9c
165
src/components/modal/VacationModal.vue
Normal file
165
src/components/modal/VacationModal.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<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-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">
|
||||
{{ totalUsedVacationCount - usedVacations.findIndex(v => v.date === vacation.date) }})
|
||||
</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>
|
||||
|
||||
<!-- 연차 데이터 없음 -->
|
||||
<p v-if="mergedVacations.length === 0" class="no-data">
|
||||
🚫 사용한 연차가 없습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
// ✅ 사용한 연차 개수
|
||||
const totalUsedVacationCount = computed(() => props.myVacations.length);
|
||||
|
||||
// ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
|
||||
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)
|
||||
);
|
||||
});
|
||||
|
||||
// ✅ 날짜 형식 변환 (YYYY-MM-DD)
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
emit("close");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 모달 스타일 */
|
||||
.modal-dialog {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 스크롤 가능한 모달 */
|
||||
.modal-content {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
width: 75%;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 닫기 버튼 */
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 리스트 기본 스타일 */
|
||||
.vacation-list {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* 리스트 아이템 */
|
||||
.vacation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
/* 인덱스 (연차 사용 개수) */
|
||||
.vacation-index {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* "-" 빨간색 */
|
||||
.minus-symbol {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* "+" 파란색 */
|
||||
.plus-symbol {
|
||||
color: blue;
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 날짜 스타일 */
|
||||
.vacation-date {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 연차 데이터 없음 */
|
||||
.no-data {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: gray;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,67 +1,71 @@
|
||||
<template>
|
||||
<div class="card-body d-flex justify-content-center">
|
||||
<ul class="list-unstyled d-flex align-items-center gap-7 mb-0 mt-2">
|
||||
<li
|
||||
v-for="(user, index) in sortedUserList"
|
||||
:key="index"
|
||||
:class="{ disabled: user.disabled }"
|
||||
@click="toggleDisable(index)"
|
||||
data-bs-placement="top"
|
||||
:aria-label="user.MEMBERSEQ"
|
||||
>
|
||||
<img
|
||||
class="rounded-circle user-avatar"
|
||||
:src="getUserProfileImage(user.MEMBERPRF)"
|
||||
alt="user"
|
||||
:style="getDynamicStyle(user)"
|
||||
@error="setDefaultImage"
|
||||
@load="showImage"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list-unstyled d-flex align-items-center gap-7 mb-0 mt-2">
|
||||
<li
|
||||
v-for="(user, index) in sortedUserList"
|
||||
:key="index"
|
||||
:class="{ disabled: user.disabled }"
|
||||
@click="$emit('profileClick', user)"
|
||||
data-bs-placement="top"
|
||||
:aria-label="user.MEMBERSEQ"
|
||||
>
|
||||
<img
|
||||
class="rounded-circle user-avatar "
|
||||
:src="getUserProfileImage(user.MEMBERPRF)"
|
||||
alt="user"
|
||||
:style="getDynamicStyle(user)"
|
||||
@error="setDefaultImage"
|
||||
@load="showImage"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, computed, nextTick } from "vue";
|
||||
import { useUserStore } from "@s/useUserStore"; // 사용자 정보 스토어 사용
|
||||
import { useUserStore as useUserListStore } from "@s/userList"; // 사원 리스트 스토어
|
||||
import { useUserStore } from "@s/useUserStore";
|
||||
import { useUserStore as useUserListStore } from "@s/userList";
|
||||
import $api from "@api";
|
||||
|
||||
defineEmits(["profileClick"]);
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userListStore = useUserListStore();
|
||||
|
||||
const userList = ref([]);
|
||||
const userListContainer = ref(null);
|
||||
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
|
||||
const defaultProfile = "/img/icons/icon.png";
|
||||
|
||||
const employeeId = ref(null); // 현재 로그인한 사용자 ID
|
||||
const employeeId = ref(null);
|
||||
const userColors = ref({});
|
||||
|
||||
onMounted(async () => {
|
||||
await userStore.userInfo(); // 로그인한 사용자 정보 가져오기
|
||||
await userListStore.fetchUserList(); // 사원 리스트 가져오기
|
||||
await userStore.userInfo();
|
||||
if (userStore.user) {
|
||||
employeeId.value = userStore.user.id;
|
||||
} else {
|
||||
console.error("❌ 로그인한 사용자 정보를 불러오지 못했습니다.");
|
||||
}
|
||||
|
||||
userList.value = userListStore.userList;
|
||||
await userListStore.fetchUserList();
|
||||
userList.value = userListStore.userList;
|
||||
|
||||
// 로그인한 사용자의 ID 가져오기
|
||||
if (userStore.user) {
|
||||
employeeId.value = userStore.user.id;
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
||||
tooltips.forEach((tooltip) => {
|
||||
new bootstrap.Tooltip(tooltip);
|
||||
});
|
||||
});
|
||||
// 사용자별 색상 저장
|
||||
userList.value.forEach(user => {
|
||||
userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
|
||||
console.log(userColors.value[user.MEMBERSEQ])
|
||||
});
|
||||
|
||||
// 내 프로필을 가장 앞에 배치한 리스트 정렬
|
||||
nextTick(() => {
|
||||
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
||||
tooltips.forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const sortedUserList = computed(() => {
|
||||
if (!employeeId.value) return userList.value; // 로그인한 사용자가 없으면 기존 리스트 반환
|
||||
|
||||
// 내 프로필 찾기
|
||||
const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
|
||||
const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
|
||||
|
||||
@ -87,7 +91,7 @@
|
||||
const totalUsers = userList.value.length;
|
||||
|
||||
if (totalUsers <= 7) return "120px"; // 7명 이하
|
||||
if (totalUsers <= 10) return "110px"; // ~10명
|
||||
if (totalUsers <= 10) return "100px"; // ~10명
|
||||
if (totalUsers <= 20) return "80px"; // ~20명
|
||||
return "60px"; // 20명 이상
|
||||
});
|
||||
@ -97,8 +101,9 @@
|
||||
return {
|
||||
width: profileSize.value,
|
||||
height: profileSize.value,
|
||||
borderWidth: "3px",
|
||||
borderWidth: "4px",
|
||||
borderColor: user.usercolor || "#ccc",
|
||||
borderStyle: "solid",
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -5,8 +5,17 @@
|
||||
<div class="row g-0">
|
||||
<div class="col app-calendar-content">
|
||||
<div class="card shadow-none border-0">
|
||||
<ProfileList />
|
||||
<ProfileList @profileClick="handleProfileClick" />
|
||||
<div class="card-body">
|
||||
<VacationModal
|
||||
v-if="isModalOpen"
|
||||
:isOpen="isModalOpen"
|
||||
:myVacations="myVacations"
|
||||
:receivedVacations="receivedVacations"
|
||||
:userColors="userColors"
|
||||
@click="handleProfileClick(user)"
|
||||
@close="isModalOpen = false"
|
||||
/>
|
||||
<full-calendar
|
||||
ref="fullCalendarRef"
|
||||
:options="calendarOptions"
|
||||
@ -31,18 +40,45 @@ 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, watchEffect } from "vue";
|
||||
import { reactive, ref, onMounted, nextTick, computed } from "vue";
|
||||
import axios from "@api";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
import HalfDayButtons from "@c/button/HalfDayButtons.vue";
|
||||
import ProfileList from "@/components/vacation/ProfileList.vue";
|
||||
import ProfileList from "@c/vacation/ProfileList.vue";
|
||||
import { useUserStore } from "@s/userList";
|
||||
import VacationModal from "@c/modal/VacationModal.vue"
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userList = ref([]);
|
||||
const userColors = ref({});
|
||||
const myVacations = ref([]); // 내가 사용한 연차 목록
|
||||
const receivedVacations = ref([]); // 내가 받은 연차 목록
|
||||
const isModalOpen = ref(false);
|
||||
|
||||
|
||||
// 프로필 클릭 시 연차 내역 가져오기
|
||||
const handleProfileClick = async (user) => {
|
||||
try {
|
||||
console.log(`🔍 ${user.MEMBERSEQ}님의 연차 내역 요청 중...`);
|
||||
const response = await axios.get(`vacation/history`);
|
||||
|
||||
if (response.status === 200 && response.data) {
|
||||
console.log("✅ 연차 내역 응답:", response.data);
|
||||
myVacations.value = response.data.data.usedVacations || [];
|
||||
receivedVacations.value = response.data.data.receivedVacations || [];
|
||||
|
||||
console.log("📌 myVacations:", myVacations.value);
|
||||
console.log("📌 receivedVacations:", receivedVacations.value);
|
||||
|
||||
isModalOpen.value = true;
|
||||
} else {
|
||||
console.warn("❌ 연차 내역을 불러오지 못했습니다.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("🚨 연차 데이터 불러오기 실패:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUserList = async () => {
|
||||
try {
|
||||
await userStore.fetchUserList();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user