Removable members

This commit is contained in:
LittleSheep 2024-03-23 16:52:00 +08:00
parent 327941455e
commit 19be4e2a67
3 changed files with 84 additions and 32 deletions

View File

@ -0,0 +1,54 @@
<template>
<v-card prepend-icon="mdi-account-plus" title="Invite someone">
<v-form @submit.prevent="inviteMember">
<v-card-text>
<v-text-field
label="Username"
variant="outlined"
density="comfortable"
hint="Require username not the nickname"
v-model="targetName"
/>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn type="reset" color="grey-darken-3" @click="emits('close')">Cancel</v-btn>
<v-btn type="submit" :disabled="loading">Invite</v-btn>
</v-card-actions>
</v-form>
</v-card>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { request } from "@/scripts/request"
import { getAtk } from "@/stores/userinfo"
const props = defineProps<{item: any}>()
const emits = defineEmits(["close", "error", "relist"])
const loading = ref(false)
const targetName = ref("")
async function inviteMember(evt: SubmitEvent) {
const form = evt.target as HTMLFormElement
loading.value = true
const res = await request(`/api/realms/${props.item?.id}/invite`, {
method: "POST",
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
body: JSON.stringify({
account_name: targetName.value
})
})
if (res.status !== 200) {
emits("error", await res.text())
} else {
form.reset()
emits("relist")
}
loading.value = false
}
</script>

View File

@ -2,6 +2,7 @@
<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"
@ -11,7 +12,16 @@
:image="item?.account.avatar"
/>
</template>
<template #subtitle>@{{ item.account.name }}</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>
@ -25,25 +35,12 @@
</template>
<template #default="{ isActive }">
<v-card prepend-icon="mdi-account-plus" title="Invite someone">
<v-form @submit.prevent="inviteMember">
<v-card-text>
<v-text-field
label="Username"
variant="outlined"
density="comfortable"
hint="Require username not the nickname"
v-model="data.account_name"
<realm-invitation
:item="props.item"
@relist="listMembers"
@error="(val) => (error = val)"
@close="isActive.value = false"
/>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn type="reset" color="grey-darken-3" @click="isActive.value = false">Cancel</v-btn>
<v-btn type="submit" :disabled="loading">Invite</v-btn>
</v-card-actions>
</v-form>
</v-card>
</template>
</v-dialog>
</div>
@ -59,15 +56,12 @@ 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"
const id = useUserinfo()
const props = defineProps<{ item: any }>()
const data = ref<any>({
account_name: ""
})
const members = ref<any[]>([])
const isOwned = computed(() => {
@ -99,24 +93,28 @@ async function listMembers(id: number) {
loading.value = false
}
async function inviteMember(evt: SubmitEvent) {
const form = evt.target as HTMLFormElement
const payload = data.value
async function kickMember(item: any) {
loading.value = true
const res = await request(`/api/realms/${props.item?.id}/invite`, {
const res = await request(`/api/realms/${props.item?.id}/kick`, {
method: "POST",
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
body: JSON.stringify(payload)
body: JSON.stringify({
account_name: item.account.name
})
})
if (res.status !== 200) {
error.value = await res.text()
} else {
form.reset()
await listMembers(props.item?.id)
}
loading.value = false
}
function checkKickable(item: any) {
if (item.account?.id === id.userinfo.data?.id) return false
if (item.account?.id === props.item?.account_id) return false
return true
}
</script>
<style>

View File

@ -25,7 +25,7 @@
</v-card>
<v-card class="mt-3 pb-3" title="Realm Members">
<realm-members :item="metadata" />
<realm-members class="mt-[-8px]" :item="metadata" />
</v-card>
</div>
</v-container>