52 lines
1.7 KiB
Vue
52 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { getPromotionsOnDay } from '@/api/rank';
|
|
import { onMounted, ref } from 'vue';
|
|
import MemberCard from '../members/MemberCard.vue';
|
|
import Spinner from '../ui/spinner/Spinner.vue';
|
|
import { PromotionDetails } from '@shared/types/rank';
|
|
|
|
|
|
const props = defineProps<{
|
|
date: Date
|
|
}>()
|
|
|
|
const promoList = ref<PromotionDetails[]>();
|
|
const loading = ref(true);
|
|
|
|
onMounted(async () => {
|
|
promoList.value = await getPromotionsOnDay(props.date);
|
|
loading.value = false;
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="overflow-x-auto">
|
|
<table v-if="!loading" class="min-w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="border-b-2 border-gray-200 bg-white/10">
|
|
<th class="px-4 py-3 text-sm font-semibold">Member</th>
|
|
<th class="px-4 py-3 text-sm font-semibold">Rank</th>
|
|
<th class="px-4 py-3 text-sm font-semibold text-right">Approved By</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-for="p in promoList" :key="p.member_id" class="border-b transition-colors">
|
|
<td class="px-2 py-2">
|
|
<MemberCard :member-id="p.member_id" />
|
|
</td>
|
|
<td class="px-4 py-2 text-sm">
|
|
{{ p.short_name }}
|
|
</td>
|
|
<td class="px-2 py-2 text-sm text-right">
|
|
<MemberCard :member-id="p.created_by_id" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div v-else class="overflow-hidden mx-auto flex w-full">
|
|
<Spinner class="size-7"></Spinner>
|
|
</div>
|
|
</div>
|
|
</template> |