91 lines
2.2 KiB
Vue
91 lines
2.2 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>
|
|
<div v-show="loading">
|
|
<p>Loading</p>
|
|
</div>
|
|
<!-- 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="doClick(task)"
|
|
>
|
|
<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: "doDeselectTask", id: number): void;
|
|
(e: "doSelectTask", id: number): void;
|
|
}
|
|
interface Props {
|
|
error: string | null;
|
|
loading?: boolean;
|
|
selectedTaskID: number | null;
|
|
tasks: ReviewTask[];
|
|
total: number;
|
|
}
|
|
const emit = defineEmits<Emits>();
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
loading: false,
|
|
});
|
|
function doClick(task: ReviewTask) {
|
|
if (task.id == props.selectedTaskID) {
|
|
emit("doDeselectTask", task.id);
|
|
} else {
|
|
emit("doSelectTask", task.id);
|
|
}
|
|
}
|
|
</script>
|