71 lines
1.7 KiB
Vue
71 lines
1.7 KiB
Vue
<template>
|
|
<!-- 컴포넌트 사용 ex)
|
|
|
|
<UserList @user-list-update="handleUserListUpdate" />
|
|
|
|
-->
|
|
<ul class="list-unstyled users-list d-flex align-items-center">
|
|
<li
|
|
v-for="(user, index) in userList"
|
|
:key="index"
|
|
class="avatar pull-up"
|
|
:class="{ disabled: user.disabled }"
|
|
@click="toggleDisable(index)"
|
|
data-bs-toggle="tooltip"
|
|
data-popup="tooltip-custom"
|
|
data-bs-placement="top"
|
|
:aria-label="user.MEMBERSEQ"
|
|
:data-bs-original-title="user.MEMBERSEQ"
|
|
>
|
|
<img
|
|
class="rounded-circle"
|
|
:src="`http://localhost:10325/upload/img/profile/${user.MEMBERPRF}`"
|
|
alt="profile"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { useUserStore } from '@s/userList';
|
|
|
|
const emit = defineEmits();
|
|
const userStore = useUserStore();
|
|
const userList = ref([]);
|
|
|
|
// 사용자 목록 호출
|
|
onMounted(async () => {
|
|
await userStore.fetchUserList();
|
|
userList.value = userStore.userList;
|
|
});
|
|
|
|
// 클릭 시 활성화/비활성화
|
|
const toggleDisable = (index) => {
|
|
const user = userList.value[index];
|
|
if (user) {
|
|
user.disabled = !user.disabled;
|
|
emitUserListUpdate();
|
|
}
|
|
};
|
|
|
|
// emit
|
|
const emitUserListUpdate = () => {
|
|
const activeUsers = userList.value.filter(user => !user.disabled);
|
|
const disabledUsers = userList.value.filter(user => user.disabled);
|
|
|
|
emit('user-list-update', { activeUsers, disabledUsers });
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
/* disabled 클래스를 적용할 때 사용자의 이미지를 흐리게 */
|
|
.avatar.disabled {
|
|
opacity: 0.5; /* 흐리게 만들기 */
|
|
}
|
|
|
|
/* 비활성화된 상태에서 이미지를 회색으로 변환 */
|
|
.avatar.disabled img {
|
|
filter: grayscale(100%);
|
|
}
|
|
</style>
|