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)"
- >
+ >
-
@@ -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;
};
-
-