125 lines
3.3 KiB
Vue
125 lines
3.3 KiB
Vue
<template>
|
|
<v-card title="Channel members" class="min-h-[540px]">
|
|
<v-list density="comfortable" lines="one">
|
|
<v-list-item v-for="item in members" :title="item.account.nick">
|
|
<template #subtitle>@{{ item.account.name }}</template>
|
|
<template #prepend>
|
|
<v-avatar
|
|
color="grey-lighten-2"
|
|
icon="mdi-account-circle"
|
|
class="rounded-card me-2"
|
|
size="small"
|
|
:image="item?.account.avatar"
|
|
/>
|
|
</template>
|
|
<template #append>
|
|
<v-btn
|
|
icon="mdi-account-remove"
|
|
size="x-small"
|
|
color="error"
|
|
variant="text"
|
|
:disabled="!checkKickable(item)"
|
|
@click="kickMember(item)"
|
|
/>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
|
|
<div v-if="isOwned">
|
|
<v-divider class="mt-2 mb-3 border-opacity-50 mx-[-1rem]" />
|
|
|
|
<div class="px-3">
|
|
<v-dialog class="max-w-[540px]">
|
|
<template #activator="{ props }">
|
|
<v-btn v-bind="props" block prepend-icon="mdi-account-plus" variant="plain"> Invite someone </v-btn>
|
|
</template>
|
|
|
|
<template #default="{ isActive }">
|
|
<channel-invitation
|
|
:item="props.item"
|
|
@relist="listMembers"
|
|
@error="(val) => (error = val)"
|
|
@close="isActive.value = false"
|
|
/>
|
|
</template>
|
|
</v-dialog>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- @vue-ignore -->
|
|
<v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from "vue"
|
|
import { request } from "@/scripts/request"
|
|
import { getAtk, useUserinfo } from "@/stores/userinfo"
|
|
import { computed } from "vue"
|
|
import ChannelInvitation from "@/components/chat/channels/ChannelInvitation.vue"
|
|
|
|
const id = useUserinfo()
|
|
|
|
const props = defineProps<{ item: any }>()
|
|
|
|
const members = ref<any[]>([])
|
|
|
|
const isOwned = computed(() => {
|
|
return id.userinfo.idSet?.messaging === props.item?.account_id
|
|
})
|
|
|
|
const loading = ref(false)
|
|
const error = ref<string | null>(null)
|
|
|
|
watch(
|
|
() => props.item,
|
|
(val) => {
|
|
if (val?.id) {
|
|
listMembers(val.id)
|
|
}
|
|
},
|
|
{ deep: true, immediate: true }
|
|
)
|
|
|
|
async function listMembers(id: number) {
|
|
loading.value = true
|
|
const res = await request("messaging", `/api/channels/${id}/members`)
|
|
if (res.status !== 200) {
|
|
error.value = await res.text()
|
|
} else {
|
|
error.value = null
|
|
members.value = await res.json()
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
async function kickMember(item: any) {
|
|
loading.value = true
|
|
const res = await request("messaging", `/api/channels/${props.item?.id}/kick`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
|
|
body: JSON.stringify({
|
|
account_name: item.account.name
|
|
})
|
|
})
|
|
if (res.status !== 200) {
|
|
error.value = await res.text()
|
|
} else {
|
|
await listMembers(props.item?.id)
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
function checkKickable(item: any) {
|
|
if (item.account?.id === id.userinfo.idSet?.messaging) return false
|
|
if (item.account?.id === props.item?.account_id) return false
|
|
return true
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.rounded-card {
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|