Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-04-18 23:44:53 +00:00
parent 732aa9f417
commit f7d0725edb
1 changed files with 149 additions and 0 deletions
@@ -0,0 +1,149 @@
+import { useState, useEffect } from "react";
+import { supabase } from "@/integrations/supabase/client";
+import { useAuth } from "@/lib/auth";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { CalendarIcon, Loader2 } from "lucide-react";
+import { format, addDays } from "date-fns";
+import { toast } from "sonner";
+
+interface Template {
+  id: string;
+  name: string;
+}
+
+export function ApplyCollectionWorkflowDialog({
+  open,
+  onOpenChange,
+  collectionId,
+  onApplied,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  collectionId: string;
+  onApplied?: () => void;
+}) {
+  const { user } = useAuth();
+  const [templates, setTemplates] = useState<Template[]>([]);
+  const [templateId, setTemplateId] = useState<string | null>(null);
+  const [startDate, setStartDate] = useState<Date>(new Date());
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    supabase
+      .from("workflow_templates")
+      .select("id, name")
+      .order("name")
+      .then(({ data }) => setTemplates((data ?? []) as Template[]));
+    setTemplateId(null);
+    setStartDate(new Date());
+  }, [open]);
+
+  const apply = async () => {
+    if (!user || !templateId) return;
+    setSubmitting(true);
+    const { data: tpl } = await supabase
+      .from("workflow_template_tasks")
+      .select("*")
+      .eq("template_id", templateId)
+      .order("sort_order");
+    const items = tpl ?? [];
+    if (!items.length) {
+      setSubmitting(false);
+      toast.error("Template has no tasks.");
+      return;
+    }
+    const first = items[0];
+    const { error } = await supabase.from("collection_tasks").insert({
+      collection_id: collectionId,
+      title: first.title,
+      due_date: format(addDays(startDate, first.days_from_start), "yyyy-MM-dd"),
+      sort_order: 0,
+      assignee_id: first.default_assignee_id ?? null,
+      workflow_template_id: templateId,
+      template_task_id: first.id,
+      created_by: user.id,
+    });
+    setSubmitting(false);
+    if (error) {
+      toast.error(error.message || "Failed to apply");
+      return;
+    }
+    toast.success(
+      `Workflow started — ${items.length} step${items.length === 1 ? "" : "s"} will run sequentially.`,
+    );
+    onApplied?.();
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Apply workflow to this collection</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div>
+            <Label className="text-xs">Template</Label>
+            <Select value={templateId ?? ""} onValueChange={setTemplateId}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select template…" />
+              </SelectTrigger>
+              <SelectContent>
+                {templates.map((t) => (
+                  <SelectItem key={t.id} value={t.id}>
+                    {t.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Label className="text-xs">First task due date (next steps chain off completion)</Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline" className="w-full justify-start font-normal">
+                  <CalendarIcon className="h-3.5 w-3.5 mr-2" />
+                  {format(startDate, "MM/dd/yyyy")}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" align="start">
+                <Calendar mode="single" selected={startDate} onSelect={(d) => d && setStartDate(d)} />
+              </PopoverContent>
+            </Popover>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Only the first task is created now. Each subsequent task is auto-created when the
+            previous one is marked complete, with a due date X days after completion.
+          </p>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={apply} disabled={!templateId || submitting}>
+            {submitting && <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />}
+            Apply
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}