112 lines
4.2 KiB
TypeScript
112 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useMemo } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { useChannels, useChannel, useUpdateChannel } from "@/hooks/use-channels";
|
|
import type { LibraryItemFull, ScheduleConfig } from "@/lib/types";
|
|
import { WEEKDAYS } from "@/lib/types";
|
|
|
|
interface Props {
|
|
selectedItems: LibraryItemFull[];
|
|
}
|
|
|
|
export function AddToBlockDialog({ selectedItems }: Props) {
|
|
const [open, setOpen] = useState(false);
|
|
const [channelId, setChannelId] = useState("");
|
|
const [blockId, setBlockId] = useState("");
|
|
|
|
const { data: channels } = useChannels();
|
|
const { data: channel } = useChannel(channelId);
|
|
const updateChannel = useUpdateChannel();
|
|
|
|
const manualBlocks = useMemo(() => {
|
|
if (!channel) return [];
|
|
const seen = new Set<string>();
|
|
const result: { id: string; name: string }[] = [];
|
|
for (const day of WEEKDAYS) {
|
|
for (const block of channel.schedule_config.day_blocks[day] ?? []) {
|
|
if (block.content.type === "manual" && !seen.has(block.id)) {
|
|
seen.add(block.id);
|
|
result.push({ id: block.id, name: block.name });
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
}, [channel]);
|
|
|
|
async function handleConfirm() {
|
|
if (!channel || !blockId) return;
|
|
const updatedDayBlocks = { ...channel.schedule_config.day_blocks };
|
|
for (const day of WEEKDAYS) {
|
|
updatedDayBlocks[day] = (updatedDayBlocks[day] ?? []).map(block => {
|
|
if (block.id !== blockId || block.content.type !== "manual") return block;
|
|
return {
|
|
...block,
|
|
content: {
|
|
...block.content,
|
|
items: [...block.content.items, ...selectedItems.map(i => i.id)],
|
|
},
|
|
};
|
|
});
|
|
}
|
|
|
|
const scheduleConfig: ScheduleConfig = { day_blocks: updatedDayBlocks };
|
|
|
|
await updateChannel.mutateAsync({
|
|
id: channelId,
|
|
data: { schedule_config: scheduleConfig },
|
|
});
|
|
setOpen(false);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button size="sm" variant="outline" onClick={() => setOpen(true)}>Add to block</Button>
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent className="max-w-sm">
|
|
<DialogHeader><DialogTitle>Add to existing block</DialogTitle></DialogHeader>
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<p className="mb-1.5 text-xs text-zinc-400">Channel</p>
|
|
<Select value={channelId} onValueChange={v => { setChannelId(v); setBlockId(""); }}>
|
|
<SelectTrigger><SelectValue placeholder="Select channel…" /></SelectTrigger>
|
|
<SelectContent>
|
|
{channels?.map(c => (
|
|
<SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{channelId && (
|
|
<div>
|
|
<p className="mb-1.5 text-xs text-zinc-400">Manual block</p>
|
|
{manualBlocks.length === 0 ? (
|
|
<p className="text-xs text-zinc-500">No manual blocks in this channel.</p>
|
|
) : (
|
|
<Select value={blockId} onValueChange={setBlockId}>
|
|
<SelectTrigger><SelectValue placeholder="Select block…" /></SelectTrigger>
|
|
<SelectContent>
|
|
{manualBlocks.map(b => (
|
|
<SelectItem key={b.id} value={b.id}>{b.name}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
</div>
|
|
)}
|
|
<p className="text-xs text-zinc-500">Adding {selectedItems.length} item(s) to selected block.</p>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
|
|
<Button disabled={!blockId || updateChannel.isPending} onClick={handleConfirm}>
|
|
{updateChannel.isPending ? "Saving…" : "Add items"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|