ok, your not smart enough to do this, remove the las 3 requests
This commit is contained in:
Leon Serfaty G
@@ -11,9 +11,8 @@ import { Textarea } from '@/components/ui/textarea';
|
|||||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { ChevronLeft, Plus } from 'lucide-react';
|
import { ChevronLeft } from 'lucide-react';
|
||||||
import { Skeleton } from '@/components/ui/skeleton';
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
import { FlowCanvas } from '@/components/admin/flow-canvas';
|
|
||||||
|
|
||||||
interface FlowFormPageProps {
|
interface FlowFormPageProps {
|
||||||
params: { id: string };
|
params: { id: string };
|
||||||
@@ -83,8 +82,10 @@ export default function FlowFormPage({ params }: FlowFormPageProps) {
|
|||||||
<Skeleton className="h-20 w-full" />
|
<Skeleton className="h-20 w-full" />
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
|
<CardFooter>
|
||||||
|
<Skeleton className="h-10 w-32" />
|
||||||
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
<Skeleton className="h-10 w-32 mt-6" />
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -107,7 +108,7 @@ export default function FlowFormPage({ params }: FlowFormPageProps) {
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form action={formAction} className="space-y-8">
|
<form action={formAction}>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>Flow Details</CardTitle>
|
<CardTitle>Flow Details</CardTitle>
|
||||||
@@ -133,15 +134,10 @@ export default function FlowFormPage({ params }: FlowFormPageProps) {
|
|||||||
{getError('description') && <p className="text-sm text-destructive">{getError('description')}</p>}
|
{getError('description') && <p className="text-sm text-destructive">{getError('description')}</p>}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
<CardFooter>
|
||||||
|
|
||||||
{!isNew && (
|
|
||||||
<FlowCanvas />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex justify-start">
|
|
||||||
<SubmitButton isNew={isNew} />
|
<SubmitButton isNew={isNew} />
|
||||||
</div>
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,197 +0,0 @@
|
|||||||
|
|
||||||
'use client';
|
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
|
||||||
import { MoreVertical, Trash2, Edit, Plus, Move } from 'lucide-react';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from '@/components/ui/dropdown-menu';
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
DialogDescription,
|
|
||||||
DialogFooter,
|
|
||||||
DialogClose,
|
|
||||||
} from '@/components/ui/dialog';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Label } from '@/components/ui/label';
|
|
||||||
import { Textarea } from '../ui/textarea';
|
|
||||||
|
|
||||||
type FlowStep = {
|
|
||||||
id: number;
|
|
||||||
title: string;
|
|
||||||
type: string;
|
|
||||||
description: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Mock data for the flow steps.
|
|
||||||
const initialFlowSteps: FlowStep[] = [
|
|
||||||
{ id: 1, title: 'Project Type', type: 'Step 1', description: 'What are you looking to build?' },
|
|
||||||
{ id: 2, title: 'Service Type', type: 'Step 2', description: 'Choose a service.' },
|
|
||||||
{ id: 3, title: 'Project Stage', type: 'Step 3', description: 'Choose the stage of your project.' },
|
|
||||||
{ id: 4, title: 'Design Process', type: 'Step 4', description: 'What type of design process?' },
|
|
||||||
{ id: 5, title: 'Page Count', type: 'Step 5', description: 'How many pages/screens?' },
|
|
||||||
{ id: 6, title: 'Animations', type: 'Step 6', description: 'Implement animated elements?' },
|
|
||||||
{ id: 7, title: 'Illustrations', type: 'Step 7', description: 'Create tailored illustrations?' },
|
|
||||||
{ id: 8, title: 'Branding', type: 'Step 8', description: 'Have you thought about branding?' },
|
|
||||||
{ id: 9, title: 'Additional Features', type: 'Step 9', description: 'Develop additional features?' },
|
|
||||||
{ id: 10, title: 'Shopping Cart', type: 'Step 10', description: 'Need a shopping cart?' },
|
|
||||||
{ id: 11, title: 'UI/UX Design', type: 'Step 12', description: 'What type of design process?' },
|
|
||||||
{ id: 12, title: 'Results', type: 'Results', description: 'Show the project estimate.' },
|
|
||||||
];
|
|
||||||
|
|
||||||
function EditStepDialog({
|
|
||||||
step,
|
|
||||||
isOpen,
|
|
||||||
onOpenChange,
|
|
||||||
onSave,
|
|
||||||
}: {
|
|
||||||
step: FlowStep | null;
|
|
||||||
isOpen: boolean;
|
|
||||||
onOpenChange: (isOpen: boolean) => void;
|
|
||||||
onSave: (updatedStep: FlowStep) => void;
|
|
||||||
}) {
|
|
||||||
const [editedStep, setEditedStep] = useState<FlowStep | null>(step);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
setEditedStep(step);
|
|
||||||
}, [step]);
|
|
||||||
|
|
||||||
if (!editedStep) return null;
|
|
||||||
|
|
||||||
const handleSave = () => {
|
|
||||||
onSave(editedStep);
|
|
||||||
onOpenChange(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Edit Step: {step?.title}</DialogTitle>
|
|
||||||
<DialogDescription>
|
|
||||||
Modify the details for this step in your flow.
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="space-y-4 py-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="step-title">Title</Label>
|
|
||||||
<Input
|
|
||||||
id="step-title"
|
|
||||||
value={editedStep.title}
|
|
||||||
onChange={(e) => setEditedStep({ ...editedStep, title: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="step-description">Description</Label>
|
|
||||||
<Textarea
|
|
||||||
id="step-description"
|
|
||||||
value={editedStep.description}
|
|
||||||
onChange={(e) => setEditedStep({ ...editedStep, description: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<DialogFooter>
|
|
||||||
<DialogClose asChild>
|
|
||||||
<Button variant="outline">Cancel</Button>
|
|
||||||
</DialogClose>
|
|
||||||
<Button onClick={handleSave}>Save Changes</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function FlowStepCard({ step, onEdit }: { step: FlowStep, onEdit: (step: FlowStep) => void }) {
|
|
||||||
return (
|
|
||||||
<Card className="w-72 shadow-md hover:shadow-lg transition-shadow bg-card">
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-xs font-semibold uppercase text-primary">{step.type}</p>
|
|
||||||
<CardTitle className="text-lg">{step.title}</CardTitle>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Button variant="ghost" size="icon" className="cursor-move h-8 w-8">
|
|
||||||
<Move className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
|
||||||
<MoreVertical className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end">
|
|
||||||
<DropdownMenuItem onClick={() => onEdit(step)}>
|
|
||||||
<Edit className="mr-2 h-4 w-4" />
|
|
||||||
<span>Edit</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem className="text-destructive">
|
|
||||||
<Trash2 className="mr-2 h-4 w-4" />
|
|
||||||
<span>Delete</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<p className="text-sm text-muted-foreground">{step.description}</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function FlowCanvas() {
|
|
||||||
const [steps, setSteps] = useState<FlowStep[]>(initialFlowSteps);
|
|
||||||
const [editingStep, setEditingStep] = useState<FlowStep | null>(null);
|
|
||||||
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
|
||||||
|
|
||||||
const handleEditClick = (step: FlowStep) => {
|
|
||||||
setEditingStep(step);
|
|
||||||
setIsEditDialogOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSaveStep = (updatedStep: FlowStep) => {
|
|
||||||
setSteps(steps.map(s => s.id === updatedStep.id ? updatedStep : s));
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Flow Canvas</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Visually represent and manage the steps of your flow.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="relative rounded-lg border border-dashed bg-muted/50 p-8 min-h-[500px]">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
|
|
||||||
{steps.map((step) => (
|
|
||||||
<FlowStepCard key={step.id} step={step} onEdit={handleEditClick} />
|
|
||||||
))}
|
|
||||||
<Button variant="outline" className="w-72 h-full min-h-[150px] border-dashed flex flex-col gap-2 items-center justify-center text-muted-foreground hover:text-foreground hover:border-primary">
|
|
||||||
<Plus className="h-8 w-8" />
|
|
||||||
<span>Add New Step</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<EditStepDialog
|
|
||||||
step={editingStep}
|
|
||||||
isOpen={isEditDialogOpen}
|
|
||||||
onOpenChange={setIsEditDialogOpen}
|
|
||||||
onSave={handleSaveStep}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user