Eli Ribble
f88ca57d97
This makes it possible to start hydrating the types into valid data types like Dates which means I can get type safety guarantees when displaying information.
77 lines
1.9 KiB
Vue
77 lines
1.9 KiB
Vue
<style scoped lang="scss">
|
|
.entry-item {
|
|
padding: 15px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.entry-item:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.entry-item.active {
|
|
background-color: #e7f3ff;
|
|
border-left: 4px solid #0d6efd;
|
|
}
|
|
</style>
|
|
<template>
|
|
<!-- Error Alert -->
|
|
<div v-if="error" class="mt-3 alert alert-danger alert-dismissible">
|
|
{{ error }}
|
|
<button type="button" class="btn-close" @click="error = null"></button>
|
|
</div>
|
|
|
|
<div class="p-3 border-bottom bg-primary text-white">
|
|
<h5 class="mb-0"><i class="bi bi-list-ul"></i> Review Queue</h5>
|
|
<small>{{ total }} entries pending</small>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="tasks == null" class="p-4 text-center">
|
|
<span class="spinner-border" role="status"></span>
|
|
<p class="mt-2">Loading tasks...</p>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else-if="tasks.length === 0" class="p-4 text-center text-muted">
|
|
<i class="bi bi-check-circle" style="font-size: 48px"></i>
|
|
<p class="mt-2">No entries to review!</p>
|
|
</div>
|
|
|
|
<!-- Task List -->
|
|
<div
|
|
v-for="task in tasks"
|
|
:key="task.id"
|
|
class="entry-item"
|
|
:class="{ active: selectedTaskID === task.id }"
|
|
@click="emit('doSelectTask', task.id)"
|
|
>
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<i class="bi bi-droplet"></i>
|
|
<strong>Pool {{ task.id }}</strong>
|
|
</div>
|
|
<small class="text-muted">{{ task.pool?.condition }}</small>
|
|
</div>
|
|
<small class="text-muted d-block mt-1">
|
|
{{ formatAddress(task.address) }}
|
|
</small>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { formatAddress } from "@/format";
|
|
import { ReviewTask } from "@/type/api";
|
|
|
|
interface Emits {
|
|
(e: "doSelectTask", id: number): void;
|
|
}
|
|
interface Props {
|
|
error: string | null;
|
|
selectedTaskID: number | null;
|
|
tasks: ReviewTask[];
|
|
total: number;
|
|
}
|
|
const emit = defineEmits<Emits>();
|
|
const props = defineProps<Props>();
|
|
</script>
|