53 lines
1.6 KiB
Vue
53 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import axios from 'axios'
|
|
import type { FollowerEntry } from "@/Types/types"
|
|
import FollowerCard from "@/Components/FlightsGoneBy/Admin/FollowerCard.vue";
|
|
|
|
const followers = ref<FollowerEntry[]>([])
|
|
const loading = ref(true)
|
|
|
|
onMounted(async () => {
|
|
const { data } = await axios.get<FollowerEntry[]>('/followers')
|
|
followers.value = data
|
|
loading.value = false
|
|
})
|
|
|
|
const pendingCount = computed(() => followers.value.filter(f => !f.verified).length)
|
|
|
|
function handleApproved(userId: number) {
|
|
const entry = followers.value.find(f => f.user.id === userId)
|
|
if (entry) entry.verified = true
|
|
}
|
|
|
|
function handleRemoved(userId: number) {
|
|
followers.value = followers.value.filter(f => f.user.id !== userId)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="loading" class="d-flex justify-center py-8">
|
|
<v-progress-circular indeterminate color="primary" />
|
|
</div>
|
|
|
|
<div v-else>
|
|
<p v-if="pendingCount" class="text-body-2 text-medium-emphasis mb-3">
|
|
{{ pendingCount }} pending request{{ pendingCount > 1 ? 's' : '' }}
|
|
</p>
|
|
|
|
<p v-if="!followers.length" class="text-body-2 text-medium-emphasis">
|
|
No followers yet.
|
|
</p>
|
|
|
|
<FollowerCard
|
|
v-for="entry in followers"
|
|
:key="entry.user.id"
|
|
:entry="entry"
|
|
class="mb-2"
|
|
@approved="handleApproved(entry.user.id)"
|
|
@denied="handleRemoved(entry.user.id)"
|
|
@removed="handleRemoved(entry.user.id)"
|
|
/>
|
|
</div>
|
|
</template>
|