123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import axios from 'axios'
|
|
import type { FollowerEntry } from "@/Types/types"
|
|
|
|
const props = defineProps<{
|
|
entry: FollowerEntry
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
approved: []
|
|
denied: []
|
|
removed: []
|
|
}>()
|
|
|
|
const processing = ref(false)
|
|
const confirmingRemove = ref(false)
|
|
|
|
async function approve() {
|
|
processing.value = true
|
|
try {
|
|
await axios.post(`/followers/${encodeURIComponent(props.entry.user.name)}/approve`)
|
|
emit('approved')
|
|
} finally {
|
|
processing.value = false
|
|
}
|
|
}
|
|
|
|
async function deny() {
|
|
processing.value = true
|
|
try {
|
|
await axios.post(`/followers/${encodeURIComponent(props.entry.user.name)}/deny`)
|
|
emit('denied')
|
|
} finally {
|
|
processing.value = false
|
|
}
|
|
}
|
|
|
|
async function remove() {
|
|
processing.value = true
|
|
try {
|
|
await axios.delete(`/followers/${encodeURIComponent(props.entry.user.name)}`)
|
|
emit('removed')
|
|
} finally {
|
|
processing.value = false
|
|
confirmingRemove.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-card variant="outlined" class="follower-card pa-3 d-flex align-center">
|
|
<v-icon icon="mdi-account-circle" size="40" class="mr-3" />
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="text-body-2 font-weight-medium">{{ entry.user.name }}</div>
|
|
<div v-if="!entry.verified" class="text-caption text-medium-emphasis">
|
|
Wants to follow you
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="!entry.verified">
|
|
<v-btn
|
|
size="small"
|
|
color="primary"
|
|
variant="flat"
|
|
:loading="processing"
|
|
class="mr-2"
|
|
@click="approve"
|
|
>
|
|
Approve
|
|
</v-btn>
|
|
<v-btn
|
|
size="small"
|
|
variant="outlined"
|
|
:disabled="processing"
|
|
@click="deny"
|
|
>
|
|
Deny
|
|
</v-btn>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<v-btn
|
|
v-if="!confirmingRemove"
|
|
size="small"
|
|
variant="text"
|
|
:disabled="processing"
|
|
@click="confirmingRemove = true"
|
|
>
|
|
Remove
|
|
</v-btn>
|
|
<template v-else>
|
|
<span class="text-caption mr-2">Remove follower?</span>
|
|
<v-btn
|
|
size="small"
|
|
color="error"
|
|
variant="flat"
|
|
:loading="processing"
|
|
class="mr-1"
|
|
@click="remove"
|
|
>
|
|
Confirm
|
|
</v-btn>
|
|
<v-btn
|
|
size="small"
|
|
variant="text"
|
|
:disabled="processing"
|
|
@click="confirmingRemove = false"
|
|
>
|
|
Cancel
|
|
</v-btn>
|
|
</template>
|
|
</template>
|
|
</v-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.follower-card {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
</style>
|