pipeline: batch controls move to queued column header
This commit is contained in:
@@ -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} />
|
||||||
|
|||||||
@@ -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)} />
|
||||||
|
|||||||
Reference in New Issue
Block a user