diff --git a/src/components/user/UserList.vue b/src/components/user/UserList.vue index f4d9e6c..c5a1779 100644 --- a/src/components/user/UserList.vue +++ b/src/components/user/UserList.vue @@ -4,23 +4,22 @@ v-for="(user, index) in userList" :key="index" class="avatar pull-up" - :class="{ 'opacity-100': user.disabled }" + :class="{ 'opacity-100': isUserDisabled(user) }" @click="toggleDisable(index)" data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" :aria-label="user.MEMBERSEQ" :data-bs-original-title="getTooltipTitle(user)" - > + > user - @@ -29,38 +28,83 @@ import { onMounted, ref, nextTick } from 'vue'; import { useUserStore } from '@s/userList'; import $api from '@api'; -const emit = defineEmits(); +const emit = defineEmits(['user-list-update']); const userStore = useUserStore(); const userList = ref([]); const baseUrl = $api.defaults.baseURL.replace(/api\/$/, ''); +const props = defineProps({ + projctSeq: { + type: Number, + required: false, + } +}); + +// 사용자의 프로젝트 참여 상태 확인 +const fetchProjectParticipation = async () => { + if (props.projctSeq) { + const response = await $api.get(`project/members/${props.projctSeq}`); + if (response.status === 200) { + const projectMembers = response.data.data; + userList.value = userList.value.map(user => ({ + ...user, + PROJCTYON: projectMembers.find(pm => pm.MEMBERSEQ === user.MEMBERSEQ)?.PROJCTYON ?? '1' + })); + } + } +}; + // 사용자 목록 호출 onMounted(async () => { await userStore.fetchUserList(); userList.value = userStore.userList; + if (props.projctSeq) { + await fetchProjectParticipation(); + } + nextTick(() => { const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]'); tooltips.forEach((tooltip) => { - new bootstrap.Tooltip(tooltip); + new bootstrap.Tooltip(tooltip); }); }); }); -// 클릭 시 활성화/비활성화 -const toggleDisable = (index) => { +// 사용자 비활성화 상태 확인 +const isUserDisabled = (user) => { + return props.projctSeq ? user.PROJCTYON === '0' : user.disabled; +}; + +// 클릭 시 활성화/비활성화 및 DB 업데이트 +const toggleDisable = async (index) => { const user = userList.value[index]; if (user) { - user.disabled = !user.disabled; - emitUserListUpdate(); + const newParticipationStatus = props.projctSeq + ? user.PROJCTYON === '1' + : !user.disabled; + + if (props.projctSeq) { + const response = await $api.patch('project/updateYon', { + memberSeq: user.MEMBERSEQ, + projctSeq: props.projctSeq, + projctYon: newParticipationStatus ? '0' : '1' + }); + + if (response.status === 200) { + user.PROJCTYON = newParticipationStatus ? '0' : '1'; + } + } else { + user.disabled = newParticipationStatus; + emitUserListUpdate(); + } } }; // emit const emitUserListUpdate = () => { - const activeUsers = userList.value.filter((user) => !user.disabled); - const disabledUsers = userList.value.filter((user) => user.disabled); - + const activeUsers = userList.value.filter(user => !isUserDisabled(user)); + const disabledUsers = userList.value.filter(user => isUserDisabled(user)); emit('user-list-update', { activeUsers, disabledUsers }); }; @@ -68,6 +112,3 @@ const getTooltipTitle = (user) => { return user.MEMBERSEQ === userStore.userInfo.id ? '나' : user.MEMBERNAM; }; - -