Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front
This commit is contained in:
commit
fe00b53e4f
@ -12,65 +12,37 @@
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.half-day-buttons .btn.active {
|
||||
}
|
||||
.half-day-buttons .btn.active {
|
||||
border: 2px solid black;
|
||||
}
|
||||
.fc-daygrid-day-frame {
|
||||
min-height: 80px !important;
|
||||
max-height: 120px !important;
|
||||
overflow: hidden !important;
|
||||
padding-top: 25px !important;
|
||||
}
|
||||
.fc-daygrid-day-events {
|
||||
}
|
||||
|
||||
.fc-daygrid-day-events {
|
||||
max-height: 100px !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
.fc-daygrid-event {
|
||||
position: absolute !important;
|
||||
height: 20px !important;
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
margin: 2px 0 !important;
|
||||
padding: 0 !important;
|
||||
border-radius: 2px !important;
|
||||
border: none !important;
|
||||
}
|
||||
.fc-daygrid-event-harness {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
gap: 22px;
|
||||
}
|
||||
.fc-daygrid-event.half-day-am {
|
||||
width: 45% !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
.fc-daygrid-event.half-day-pm {
|
||||
width: 45% !important;
|
||||
left: auto !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
.fc-daygrid-event.full-day {
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
.fc-day-sun .fc-daygrid-day-number,
|
||||
.fc-col-header-cell:first-child .fc-col-header-cell-cushion {
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
border: none;
|
||||
}
|
||||
.fc-daygrid-event.half-day-am {
|
||||
width: calc(50% - 4px) !important;
|
||||
}
|
||||
.fc-daygrid-event.half-day-pm {
|
||||
width: calc(50% - 4px) !important;
|
||||
margin-left: auto !important
|
||||
}
|
||||
.fc-day-sun .fc-daygrid-day-number,
|
||||
.fc-col-header-cell:first-child .fc-col-header-cell-cushion {
|
||||
color: #ff4500 !important;
|
||||
}
|
||||
.fc-day-sat .fc-daygrid-day-number,
|
||||
.fc-col-header-cell:last-child .fc-col-header-cell-cushion {
|
||||
}
|
||||
.fc-day-sat .fc-daygrid-day-number,
|
||||
.fc-col-header-cell:last-child .fc-col-header-cell-cushion {
|
||||
color: #6076e0 !important;
|
||||
}
|
||||
.fc-daygrid-day-number {
|
||||
position: absolute !important;
|
||||
top: 0px !important;
|
||||
left: 5px !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
.fc-daygrid-day-number {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.grayscaleImg {
|
||||
filter: grayscale(100%);
|
||||
|
||||
202
src/components/commuters/Calendar.vue
Normal file
202
src/components/commuters/Calendar.vue
Normal file
@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="card app-calendar-wrapper">
|
||||
<div class="row g-0">
|
||||
<div class="col app-calendar-sidebar border-end text-center" id="app-calendar-sidebar">
|
||||
<div class="card-body pb-0">
|
||||
<img v-if="user" :src="`http://localhost:10325/upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-50 h-auto rounded-circle"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col app-calendar-content">
|
||||
<div class="card shadow-none border-0">
|
||||
<div class="card-body pb-0">
|
||||
<full-calendar
|
||||
ref="fullCalendarRef"
|
||||
:events="calendarEvents"
|
||||
:options="calendarOptions"
|
||||
defaultView="dayGridMonth"
|
||||
class="flatpickr-calendar-only"
|
||||
>
|
||||
</full-calendar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<center-modal :display="isModalVisible" @close="isModalVisible = $event">
|
||||
<template #title> Add Event </template>
|
||||
<template #body>
|
||||
<FormInput
|
||||
title="이벤트 제목"
|
||||
name="event"
|
||||
:is-essential="true"
|
||||
:is-alert="eventAlert"
|
||||
@update:data="eventTitle = $event"
|
||||
/>
|
||||
<FormInput
|
||||
title="이벤트 날짜"
|
||||
type="date"
|
||||
name="eventDate"
|
||||
:is-essential="true"
|
||||
:is-alert="eventDateAlert"
|
||||
@update:data="eventDate = $event"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="addEvent">추가</button>
|
||||
</template>
|
||||
</center-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FullCalendar from '@fullcalendar/vue3';
|
||||
import dayGridPlugin from '@fullcalendar/daygrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
import CenterModal from '@c/modal/CenterModal.vue';
|
||||
import { inject, onMounted, reactive, ref, watch } from 'vue';
|
||||
import $api from '@api';
|
||||
import { isEmpty } from '@/common/utils';
|
||||
import FormInput from '../input/FormInput.vue';
|
||||
import 'flatpickr/dist/flatpickr.min.css';
|
||||
import '@/assets/css/app-calendar.css';
|
||||
import { useThemeStore } from '@s/darkmode';
|
||||
import { fetchHolidays } from '@c/calendar/holiday';
|
||||
import { useUserInfoStore } from '@/stores/useUserInfoStore';
|
||||
|
||||
const user = ref(null);
|
||||
|
||||
const userStore = useUserInfoStore();
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const dayjs = inject('dayjs');
|
||||
const fullCalendarRef = ref(null);
|
||||
const calendarEvents = ref([]);
|
||||
const isModalVisible = ref(false);
|
||||
const eventAlert = ref(false);
|
||||
const eventDateAlert = ref(false);
|
||||
const eventTitle = ref('');
|
||||
const eventDate = ref('');
|
||||
const selectedDate = ref(null);
|
||||
|
||||
|
||||
// 날짜 선택 핸들러
|
||||
const handleDateSelect = (selectedDates) => {
|
||||
if (selectedDates.length > 0) {
|
||||
const selectedDate = dayjs(selectedDates[0]).format('YYYY-MM-DD');
|
||||
eventDate.value = selectedDate;
|
||||
showModal();
|
||||
}
|
||||
};
|
||||
|
||||
// 달력 데이터 가져오기
|
||||
const fetchData = async () => {
|
||||
const calendarApi = fullCalendarRef.value?.getApi();
|
||||
if (!calendarApi) return;
|
||||
|
||||
const date = calendarApi.currentData.viewTitle;
|
||||
const dateArr = date.split(' ');
|
||||
let currentYear = dateArr[0].trim();
|
||||
let currentMonth = dateArr[1].trim();
|
||||
const regex = /\D/g;
|
||||
currentYear = parseInt(currentYear.replace(regex, ''), 10);
|
||||
currentMonth = parseInt(currentMonth.replace(regex, ''), 10);
|
||||
|
||||
try {
|
||||
const holidayEvents = await fetchHolidays(currentYear, String(currentMonth).padStart(2, '0'));
|
||||
const existingEvents = calendarEvents.value.filter(event => !event.classNames?.includes('holiday-event'));
|
||||
calendarEvents.value = [...existingEvents, ...holidayEvents];
|
||||
} catch (error) {
|
||||
console.error('공휴일 정보 로딩 실패:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 달력 이동
|
||||
const moveCalendar = async (value = 0) => {
|
||||
const calendarApi = fullCalendarRef.value?.getApi();
|
||||
|
||||
if (value === 1) {
|
||||
calendarApi.prev();
|
||||
} else if (value === 2) {
|
||||
calendarApi.next();
|
||||
} else if (value === 3) {
|
||||
calendarApi.today();
|
||||
}
|
||||
|
||||
await fetchData();
|
||||
};
|
||||
|
||||
const showModal = () => {
|
||||
isModalVisible.value = true;
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
isModalVisible.value = false;
|
||||
eventTitle.value = '';
|
||||
eventDate.value = '';
|
||||
};
|
||||
|
||||
const addEvent = () => {
|
||||
if (!checkEvent()) {
|
||||
calendarEvents.value.push({
|
||||
title: eventTitle.value,
|
||||
start: eventDate.value,
|
||||
backgroundColor: '#4CAF50' // 일반 이벤트 색상
|
||||
});
|
||||
closeModal();
|
||||
}
|
||||
};
|
||||
|
||||
const checkEvent = () => {
|
||||
eventAlert.value = isEmpty(eventTitle.value);
|
||||
eventDateAlert.value = isEmpty(eventDate.value);
|
||||
return eventAlert.value || eventDateAlert.value;
|
||||
};
|
||||
|
||||
const calendarOptions = reactive({
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
headerToolbar: {
|
||||
left: 'today',
|
||||
center: 'title',
|
||||
right: 'prev,next',
|
||||
},
|
||||
locale: 'kr',
|
||||
events: calendarEvents,
|
||||
eventOrder: 'sortIdx',
|
||||
selectable: true,
|
||||
dateClick: handleDateSelect,
|
||||
droppable: false,
|
||||
eventDisplay: 'block',
|
||||
|
||||
customButtons: {
|
||||
prev: {
|
||||
text: 'PREV',
|
||||
click: () => moveCalendar(1),
|
||||
},
|
||||
today: {
|
||||
text: 'TODAY',
|
||||
click: () => moveCalendar(3),
|
||||
},
|
||||
next: {
|
||||
text: 'NEXT',
|
||||
click: () => moveCalendar(2),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 달력 뷰 변경 감지
|
||||
watch(() => fullCalendarRef.value?.getApi().currentData.viewTitle, async () => {
|
||||
await fetchData();
|
||||
});
|
||||
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchData();
|
||||
await userStore.userInfo();
|
||||
user.value = userStore.user;
|
||||
});
|
||||
</script>
|
||||
@ -172,7 +172,6 @@ const userStore = useUserInfoStore();
|
||||
// 상태 관리
|
||||
const user = ref(null);
|
||||
const projectList = ref([]);
|
||||
const filteredProjects = ref([]);
|
||||
const selectedCategory = ref(null);
|
||||
const searchText = ref('');
|
||||
|
||||
|
||||
@ -40,10 +40,11 @@
|
||||
@update:alert="pwhintResAlert = $event"
|
||||
:value="pwhintRes"
|
||||
/>
|
||||
<div class="d-flex mt-5">
|
||||
<RouterLink type="button" class="btn btn-secondary me-2 w-50" to="/login">취소</RouterLink>
|
||||
<button type="button" @click="handleSubmit" class="btn btn-primary w-50">확인</button>
|
||||
<div class="d-flex gap-2 mt-7 mb-3">
|
||||
<BackBtn class=" w-50" @click="handleback"/>
|
||||
<SaveBtn class="w-50" @click="handleSubmit" />
|
||||
</div>
|
||||
<p v-if="userCheckMsg" class="invalid-feedback d-block mb-0">{{ userCheckMsg }}</p>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@ -73,7 +74,8 @@
|
||||
<span v-if="passwordcheckError" class="invalid-feedback d-block">{{ passwordcheckError }}</span>
|
||||
|
||||
<div class="d-grid gap-2 mt-5 mb-5">
|
||||
<button type="button" @click="handleNewPassword" class="btn btn-primary">확인</button>
|
||||
<SaveBtn @click="handleNewPassword" />
|
||||
<p v-if="pwErrMsg" class="invalid-feedback d-block mb-0">{{ pwErrMsg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -86,6 +88,8 @@
|
||||
import { useToastStore } from '@s/toastStore';
|
||||
import UserFormInput from '@c/input/UserFormInput.vue';
|
||||
import FormSelect from '../input/FormSelect.vue';
|
||||
import BackBtn from '@c/button/BackBtn.vue';
|
||||
import SaveBtn from '../button/SaveBtn.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const toastStore = useToastStore();
|
||||
@ -94,6 +98,8 @@
|
||||
const birth = ref('');
|
||||
const pwhint = ref('');
|
||||
const pwhintRes = ref('');
|
||||
const userCheckMsg = ref("");
|
||||
const pwErrMsg = ref("");
|
||||
|
||||
const idAlert = ref(false);
|
||||
const birthAlert = ref(false);
|
||||
@ -108,15 +114,22 @@
|
||||
const passwordcheckAlert = ref(false);
|
||||
const passwordcheckErrorAlert = ref(false);
|
||||
|
||||
const { pwhintList } = commonApi();
|
||||
const { pwhintList } = commonApi({
|
||||
loadPwhint: true,
|
||||
});
|
||||
|
||||
const handleIdChange = value => {
|
||||
id.value = value;
|
||||
idAlert.value = false;
|
||||
};
|
||||
|
||||
const handleback = () => {
|
||||
router.push('/login');
|
||||
}
|
||||
|
||||
// 아이디, 생년월일, 비밀번호 힌트, 답변이 일치하는 member 재설정 input 보이기
|
||||
const handleSubmit = async () => {
|
||||
userCheckMsg.value = '';
|
||||
idAlert.value = id.value.trim() === '';
|
||||
pwhintResAlert.value = pwhintRes.value.trim() === '';
|
||||
birthAlert.value = birth.value.trim() === '';
|
||||
@ -135,7 +148,8 @@
|
||||
if (response.status === 200 && response.data.data === true) {
|
||||
resetForm.value = true;
|
||||
} else {
|
||||
toastStore.onToast('일치하는 정보가 없습니다.', 'e');
|
||||
userCheckMsg.value = '입력하신 정보와 일치하는 회원이 없습니다.';
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
@ -151,9 +165,10 @@
|
||||
|
||||
// 비밀번호 업데이트
|
||||
const handleNewPassword = async () => {
|
||||
pwErrMsg.value = '';
|
||||
passwordAlert.value = password.value.trim() === '';
|
||||
passwordcheckAlert.value = passwordcheck.value.trim() === '';
|
||||
|
||||
checkPw();
|
||||
if (passwordAlert.value || passwordcheckAlert.value || passwordcheckErrorAlert.value) {
|
||||
return;
|
||||
}
|
||||
@ -164,7 +179,7 @@
|
||||
});
|
||||
|
||||
if (checkResponse.data.data === false) {
|
||||
toastStore.onToast('기존 비밀번호와 동일한 비밀번호로 변경할 수 없습니다.', 'e');
|
||||
pwErrMsg.value = '기존 비밀번호와 동일한 비밀번호로 변경할 수 없습니다.';
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
|
||||
<div class="d-grid gap-2 mt-7 mb-5">
|
||||
<button type="submit" @click="handleSubmit" class="btn btn-primary">로그인</button>
|
||||
<p v-if="errorMessage" class="invalid-feedback d-block mb-0">{{ errorMessage }}</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 d-flex justify-content-around">
|
||||
@ -29,7 +30,6 @@
|
||||
<script setup>
|
||||
import $api from '@api';
|
||||
import router from '@/router';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ref } from 'vue';
|
||||
import UserFormInput from '@c/input/UserFormInput.vue';
|
||||
import { useUserInfoStore } from '@/stores/useUserInfoStore';
|
||||
@ -39,9 +39,9 @@
|
||||
const idAlert = ref(false);
|
||||
const passwordAlert = ref(false);
|
||||
const remember = ref(false);
|
||||
const errorMessage = ref("");
|
||||
|
||||
const userStore = useUserInfoStore();
|
||||
const route = useRoute();
|
||||
|
||||
const handleIdChange = value => {
|
||||
id.value = value;
|
||||
@ -53,7 +53,8 @@
|
||||
passwordAlert.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const handleSubmit = async () => {
|
||||
errorMessage.value = '';
|
||||
idAlert.value = id.value.trim() === '';
|
||||
passwordAlert.value = password.value.trim() === '';
|
||||
|
||||
@ -61,16 +62,23 @@ const handleSubmit = async () => {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
$api.post('user/login', {
|
||||
loginId: id.value,
|
||||
password: password.value,
|
||||
remember: remember.value,
|
||||
}, { headers: { 'X-Page-Route': route.path } })
|
||||
}, { headers: { isLogin: true } })
|
||||
.then(res => {
|
||||
if (res.status === 200) {
|
||||
userStore.userInfo();
|
||||
router.push('/');
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error.response) {
|
||||
error.config.isLoginRequest = true;
|
||||
errorMessage.value = error.response.data.message;
|
||||
console.clear();
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -141,9 +141,11 @@
|
||||
:is-alert="phoneAlert"
|
||||
@update:data="phone = $event"
|
||||
@update:alert="phoneAlert = $event"
|
||||
@blur="checkPhoneDuplicate"
|
||||
:maxlength="11"
|
||||
:value="phone"
|
||||
/>
|
||||
<span v-if="phoneError" class="invalid-feedback d-block">{{ phoneError }}</span>
|
||||
|
||||
<div class="d-flex mt-5">
|
||||
<RouterLink type="button" class="btn btn-secondary me-2 w-50" to="/login">취소</RouterLink>
|
||||
@ -181,6 +183,7 @@
|
||||
const detailAddress = ref('');
|
||||
const postcode = ref(''); // 우편번호
|
||||
const phone = ref('');
|
||||
const phoneError = ref('');
|
||||
const color = ref(''); // 선택된 color
|
||||
const mbti = ref(''); // 선택된 MBTI
|
||||
const pwhint = ref(''); // 선택된 pwhint
|
||||
@ -196,6 +199,7 @@
|
||||
const birthAlert = ref(false);
|
||||
const addressAlert = ref(false);
|
||||
const phoneAlert = ref(false);
|
||||
const phoneErrorAlert = ref(false);
|
||||
|
||||
const toastStore = useToastStore();
|
||||
|
||||
@ -251,6 +255,19 @@
|
||||
}
|
||||
};
|
||||
|
||||
// 전화번호 중복체크
|
||||
const checkPhoneDuplicate = async () => {
|
||||
const response = await $api.get(`/user/checkPhone?memberTel=${phone.value}`);
|
||||
|
||||
if (!response.data.data) {
|
||||
phoneErrorAlert.value = true;
|
||||
phoneError.value = '이미 사용 중인 전화번호입니다.';
|
||||
} else {
|
||||
phoneErrorAlert.value = false;
|
||||
phoneError.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 컬러, mbti, 비밀번호 힌트 목록 불러오기
|
||||
const { colorList, mbtiList, pwhintList } = commonApi({
|
||||
loadColor: true, colorType: 'YON',
|
||||
@ -298,7 +315,7 @@
|
||||
}
|
||||
|
||||
if (profilAlert.value || idAlert.value || idErrorAlert.value || passwordAlert.value || passwordcheckAlert.value ||
|
||||
passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value || addressAlert.value || phoneAlert.value) {
|
||||
passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value || addressAlert.value || phoneAlert.value || phoneErrorAlert.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
:class="{ 'grayscaleImg': isUserDisabled(user) }"
|
||||
:src="`${baseUrl}upload/img/profile/${user.MEMBERPRF}`"
|
||||
:style="`border-color: ${user.usercolor} !important;`"
|
||||
@error="$event.target.src = '/img/icons/icon.png'"
|
||||
alt="user"
|
||||
/>
|
||||
</li>
|
||||
|
||||
@ -38,17 +38,11 @@ const loadScript = src => {
|
||||
script.type = 'text/javascript';
|
||||
script.async = true;
|
||||
document.body.appendChild(script);
|
||||
// script.onload = () => {
|
||||
// console.log(`${src} loaded successfully.`);
|
||||
// };
|
||||
// script.onerror = () => {
|
||||
// console.error(`Failed to load script: ${src}`);
|
||||
// };
|
||||
};
|
||||
nextTick(async () => {
|
||||
await wait(200);
|
||||
loadScript('/vendor/js/menu.js');
|
||||
loadScript('/js/main.js');
|
||||
// loadScript('/js/main.js');
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
|
||||
@ -67,12 +67,18 @@
|
||||
<div class="text-truncate">Project</div>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li class="menu-item" :class="$route.path.includes('/sample') ? 'active' : ''">
|
||||
<li class="menu-item" :class="$route.path.includes('/commuters') ? 'active' : ''">
|
||||
<RouterLink class="menu-link" to="/commuters">
|
||||
<i class="menu-icon icon-base bx bx-buildings"></i>
|
||||
<div class="text-truncate">Commuters</div>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<!-- <li class="menu-item" :class="$route.path.includes('/sample') ? 'active' : ''">
|
||||
<RouterLink class="menu-link" to="/sample"> <i class="bi "></i>
|
||||
<i class="menu-icon tf-icons bx bx-calendar"></i>
|
||||
<div class="text-truncate">Sample</div>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</li> -->
|
||||
</ul>
|
||||
</aside>
|
||||
<!-- / Menu -->
|
||||
|
||||
@ -152,7 +152,7 @@
|
||||
<!-- User -->
|
||||
<li class="nav-item navbar-dropdown dropdown-user dropdown">
|
||||
<a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
|
||||
<img v-if="user" :src="`http://localhost:10325/upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-40 h-auto rounded-circle"/>
|
||||
<img v-if="user" :src="`${baseUrl}upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-40 h-auto rounded-circle" @error="$event.target.src = '/img/icons/icon.png'"/>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
@ -232,8 +232,10 @@ import { useUserInfoStore } from '@/stores/useUserInfoStore';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useThemeStore } from '@s/darkmode';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import $api from '@api';
|
||||
|
||||
const user = ref(null);
|
||||
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const userStore = useUserInfoStore();
|
||||
|
||||
@ -80,6 +80,10 @@ const routes = [
|
||||
path: '/projectlist',
|
||||
component: () => import('@v/projectlist/TheProjectList.vue'),
|
||||
},
|
||||
{
|
||||
path: '/commuters',
|
||||
component: () => import('@v/commuters/TheCommuters.vue'),
|
||||
},
|
||||
{
|
||||
path: '/sample',
|
||||
component: () => import('@c/calendar/SampleCalendar.vue'),
|
||||
|
||||
9
src/views/commuters/TheCommuters.vue
Normal file
9
src/views/commuters/TheCommuters.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<Calendar />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Calendar from '@c/commuters/Calendar.vue';
|
||||
|
||||
|
||||
</script>
|
||||
@ -123,17 +123,19 @@
|
||||
};
|
||||
|
||||
// 프로필 클릭 시 연차 내역 가져오기
|
||||
const handleProfileClick = async (user) => {
|
||||
// 프로필 클릭 시 연차 내역 가져오기
|
||||
const handleProfileClick = async (user) => {
|
||||
try {
|
||||
if (user.MEMBERSEQ === userStore.user.id) {
|
||||
const response = await axios.get(`vacation/history`);
|
||||
const year = new Date().getFullYear(); // 현재 연도
|
||||
// 연도 파라미터를 전달하여 전체 연도의 연차 내역을 조회
|
||||
const response = await axios.get(`vacation/history?year=${year}`);
|
||||
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");
|
||||
// 모달을 열 때 기준 연도 갱신
|
||||
modalYear.value = year;
|
||||
isGrantModalOpen.value = false;
|
||||
} else {
|
||||
console.warn("❌ 연차 내역을 불러오지 못했습니다.");
|
||||
@ -146,7 +148,7 @@
|
||||
} catch (error) {
|
||||
console.error("🚨 연차 데이터 불러오기 실패:", error);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const fetchUserList = async () => {
|
||||
try {
|
||||
@ -186,10 +188,11 @@
|
||||
};
|
||||
|
||||
// computed: modalYear와 일치하는 항목만 필터링
|
||||
const filteredMyVacations = computed(() => {
|
||||
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;
|
||||
// vac.date가 없으면 vac.LOCVACUDT를 사용하도록 함
|
||||
const dateStr = vac.date || vac.LOCVACUDT;
|
||||
const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
|
||||
console.log("vacation year:", year, "modalYear:", modalYear.value);
|
||||
return year === String(modalYear.value);
|
||||
});
|
||||
@ -199,12 +202,10 @@
|
||||
|
||||
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);
|
||||
const dateStr = vac.date || vac.LOCVACUDT;
|
||||
const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
|
||||
console.log("vacation year:", year, "modalYear:", modalYear.value);
|
||||
return dateStr && year === String(modalYear.value);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user