pipeline: batch controls move to queued column header

This commit is contained in:
2026-04-15 07:04:06 +02:00
parent d6e8d264c5
commit 12e4fbf14e
2 changed files with 14 additions and 18 deletions

View File

@@ -1,5 +1,4 @@
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { Button } from "~/shared/components/ui/button";
import { api } from "~/shared/lib/api"; import { api } from "~/shared/lib/api";
import type { PipelineData } from "~/shared/lib/types"; import type { PipelineData } from "~/shared/lib/types";
import { DoneColumn } from "./DoneColumn"; import { DoneColumn } from "./DoneColumn";
@@ -31,11 +30,6 @@ export function PipelinePage() {
setLoading(false); setLoading(false);
}, []); }, []);
const startQueue = useCallback(async () => {
await api.post("/api/execute/start");
load();
}, [load]);
useEffect(() => { useEffect(() => {
load(); load();
}, [load]); }, [load]);
@@ -88,12 +82,7 @@ export function PipelinePage() {
<div className="flex flex-col -mx-3 sm:-mx-5 -mt-4 -mb-12 h-[calc(100vh-3rem)] overflow-hidden"> <div className="flex flex-col -mx-3 sm:-mx-5 -mt-4 -mb-12 h-[calc(100vh-3rem)] overflow-hidden">
<div className="flex items-center justify-between px-6 py-3 border-b shrink-0"> <div className="flex items-center justify-between px-6 py-3 border-b shrink-0">
<h1 className="text-lg font-semibold">Pipeline</h1> <h1 className="text-lg font-semibold">Pipeline</h1>
<div className="flex items-center gap-4"> <span className="text-sm text-gray-500">{data.doneCount} files in desired state</span>
<span className="text-sm text-gray-500">{data.doneCount} files in desired state</span>
<Button variant="primary" size="sm" onClick={startQueue}>
Start queue
</Button>
</div>
</div> </div>
<div className="flex flex-1 gap-4 p-4 overflow-x-auto overflow-y-hidden min-h-0"> <div className="flex flex-1 gap-4 p-4 overflow-x-auto overflow-y-hidden min-h-0">
<ReviewColumn items={data.review} total={data.reviewTotal} jellyfinUrl={data.jellyfinUrl} onMutate={load} /> <ReviewColumn items={data.review} total={data.reviewTotal} jellyfinUrl={data.jellyfinUrl} onMutate={load} />

View File

@@ -10,23 +10,30 @@ interface QueueColumnProps {
} }
export function QueueColumn({ items, jellyfinUrl, onMutate }: QueueColumnProps) { export function QueueColumn({ items, jellyfinUrl, onMutate }: QueueColumnProps) {
const runAll = async () => {
await api.post("/api/execute/start");
onMutate();
};
const clear = async () => { const clear = async () => {
if (!confirm(`Cancel all ${items.length} pending jobs?`)) return; if (!confirm(`Cancel all ${items.length} pending jobs?`)) return;
await api.post("/api/execute/clear"); await api.post("/api/execute/clear");
onMutate(); onMutate();
}; };
const unapprove = async (itemId: number) => { const unapprove = async (itemId: number) => {
await api.post(`/api/review/${itemId}/unapprove`); await api.post(`/api/review/${itemId}/unapprove`);
onMutate(); onMutate();
}; };
const actions =
items.length > 0
? [
{ label: "Run all", onClick: runAll, primary: true },
{ label: "Clear", onClick: clear },
]
: undefined;
return ( return (
<ColumnShell <ColumnShell title="Queued" count={items.length} actions={actions}>
title="Queued"
count={items.length}
actions={items.length > 0 ? [{ label: "Clear", onClick: clear }] : undefined}
>
<div className="space-y-2"> <div className="space-y-2">
{items.map((item) => ( {items.map((item) => (
<PipelineCard key={item.id} item={item} jellyfinUrl={jellyfinUrl} onUnapprove={() => unapprove(item.item_id)} /> <PipelineCard key={item.id} item={item} jellyfinUrl={jellyfinUrl} onUnapprove={() => unapprove(item.item_id)} />