122 lines
3.1 KiB
Vue
122 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<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 }">
|
|
<realm-invitation
|
|
:item="props.item"
|
|
@relist="listMembers"
|
|
@error="(val) => (showErrorSnackbar(val))"
|
|
@close="isActive.value = false"
|
|
/>
|
|
</template>
|
|
</v-dialog>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 RealmInvitation from "@/components/realms/RealmInvitation.vue"
|
|
import { useUI } from "@/stores/ui"
|
|
|
|
const id = useUserinfo()
|
|
|
|
const props = defineProps<{ item: any }>()
|
|
|
|
const members = ref<any[]>([])
|
|
|
|
const isOwned = computed(() => {
|
|
return id.userinfo.idSet?.interactive === props.item?.account_id
|
|
})
|
|
|
|
const { showErrorSnackbar } = useUI()
|
|
const loading = ref(false)
|
|
|
|
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("interactive", `/api/realms/${id}/members`)
|
|
if (res.status !== 200) {
|
|
showErrorSnackbar(await res.text())
|
|
} else {
|
|
members.value = await res.json()
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
async function kickMember(item: any) {
|
|
loading.value = true
|
|
const res = await request("interactive", `/api/realms/${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) {
|
|
showErrorSnackbar(await res.text())
|
|
} else {
|
|
await listMembers(props.item?.id)
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
function checkKickable(item: any) {
|
|
if (item.account?.id === id.userinfo.idSet?.interactive) return false
|
|
if (item.account?.id === props.item?.account_id) return false
|
|
return true
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.rounded-card {
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|