nidus-sync/ts/components/ReviewPoolColumnList.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>