Edit
This commit is contained in:
@@ -0,0 +1,318 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Tag, TagId, Status } from "@/lib/types";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Card } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import { X, Plus, GripVertical } from "lucide-react";
|
||||||
|
|
||||||
|
export type EditViewProps = {
|
||||||
|
tags: Record<TagId, Tag>;
|
||||||
|
statuses: Status[];
|
||||||
|
setTags: (tags: Record<TagId, Tag>) => void;
|
||||||
|
setStatuses: (statuses: Status[]) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const COLOR_OPTIONS = [
|
||||||
|
"red",
|
||||||
|
"orange",
|
||||||
|
"yellow",
|
||||||
|
"green",
|
||||||
|
"blue",
|
||||||
|
"indigo",
|
||||||
|
"purple",
|
||||||
|
"pink",
|
||||||
|
"gray",
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function EditView({
|
||||||
|
tags,
|
||||||
|
statuses,
|
||||||
|
setTags,
|
||||||
|
setStatuses,
|
||||||
|
}: EditViewProps) {
|
||||||
|
const [newTagName, setNewTagName] = useState("");
|
||||||
|
const [newTagColor, setNewTagColor] = useState("blue");
|
||||||
|
const [newStatusName, setNewStatusName] = useState("");
|
||||||
|
const [newStatusColor, setNewStatusColor] = useState("blue");
|
||||||
|
|
||||||
|
const handleAddTag = () => {
|
||||||
|
if (newTagName.trim()) {
|
||||||
|
const newTagId = `tag-${Date.now()}`;
|
||||||
|
setTags({
|
||||||
|
...tags,
|
||||||
|
[newTagId]: {
|
||||||
|
id: newTagId,
|
||||||
|
name: newTagName,
|
||||||
|
color: newTagColor,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
setNewTagName("");
|
||||||
|
setNewTagColor("blue");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteTag = (tagId: TagId) => {
|
||||||
|
const newTags = { ...tags };
|
||||||
|
delete newTags[tagId];
|
||||||
|
setTags(newTags);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddStatus = () => {
|
||||||
|
if (newStatusName.trim()) {
|
||||||
|
const newStatus: Status = {
|
||||||
|
id: `status-${Date.now()}`,
|
||||||
|
name: newStatusName,
|
||||||
|
color: newStatusColor,
|
||||||
|
order: statuses.length,
|
||||||
|
};
|
||||||
|
setStatuses([...statuses, newStatus]);
|
||||||
|
setNewStatusName("");
|
||||||
|
setNewStatusColor("blue");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteStatus = (statusId: string) => {
|
||||||
|
setStatuses(statuses.filter((s) => s.id !== statusId));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateStatusName = (statusId: string, newName: string) => {
|
||||||
|
setStatuses(
|
||||||
|
statuses.map((s) => (s.id === statusId ? { ...s, name: newName } : s)),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateStatusColor = (statusId: string, newColor: string) => {
|
||||||
|
setStatuses(
|
||||||
|
statuses.map((s) => (s.id === statusId ? { ...s, color: newColor } : s)),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateTagName = (tagId: TagId, newName: string) => {
|
||||||
|
setTags({
|
||||||
|
...tags,
|
||||||
|
[tagId]: { ...tags[tagId], name: newName },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateTagColor = (tagId: TagId, newColor: string) => {
|
||||||
|
setTags({
|
||||||
|
...tags,
|
||||||
|
[tagId]: { ...tags[tagId], color: newColor },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Tags Section */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Tags</h3>
|
||||||
|
<Card className="p-4 space-y-3">
|
||||||
|
{Object.entries(tags).map(([tagId, tag]) => (
|
||||||
|
<div
|
||||||
|
key={tagId}
|
||||||
|
className="flex items-center gap-3 p-3 bg-secondary rounded-lg"
|
||||||
|
>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<button
|
||||||
|
className="w-6 h-6 rounded-full border-2 border-gray-300 cursor-pointer hover:border-gray-400 transition-colors"
|
||||||
|
style={{ backgroundColor: tag.color || "gray" }}
|
||||||
|
/>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-40 p-3">
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{COLOR_OPTIONS.map((color) => (
|
||||||
|
<button
|
||||||
|
key={color}
|
||||||
|
className="w-8 h-8 rounded-md border-2 transition-all hover:scale-110"
|
||||||
|
style={{
|
||||||
|
backgroundColor: color,
|
||||||
|
borderColor:
|
||||||
|
tag.color === color ? "black" : "transparent",
|
||||||
|
}}
|
||||||
|
onClick={() => handleUpdateTagColor(tagId, color)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
value={tag.name}
|
||||||
|
onChange={(e) => handleUpdateTagName(tagId, e.target.value)}
|
||||||
|
placeholder="Tag name"
|
||||||
|
className="flex-1"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => handleDeleteTag(tagId)}
|
||||||
|
className="p-2 hover:bg-destructive/10 rounded-md transition-colors"
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div className="flex gap-2 pt-2">
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<button
|
||||||
|
className="w-6 h-6 rounded-full border-2 border-gray-300 cursor-pointer hover:border-gray-400 transition-colors"
|
||||||
|
style={{ backgroundColor: newTagColor || "gray" }}
|
||||||
|
/>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-40 p-3">
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{COLOR_OPTIONS.map((color) => (
|
||||||
|
<button
|
||||||
|
key={color}
|
||||||
|
className="w-8 h-8 rounded-md border-2 transition-all hover:scale-110"
|
||||||
|
style={{
|
||||||
|
backgroundColor: color,
|
||||||
|
borderColor:
|
||||||
|
newTagColor === color ? "black" : "transparent",
|
||||||
|
}}
|
||||||
|
onClick={() => setNewTagColor(color)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
value={newTagName}
|
||||||
|
onChange={(e) => setNewTagName(e.target.value)}
|
||||||
|
placeholder="New tag name"
|
||||||
|
className="flex-1"
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
handleAddTag();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button onClick={handleAddTag} size="sm" className="gap-1">
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
Add
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Statuses Section */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Statuses</h3>
|
||||||
|
<Card className="p-4 space-y-3">
|
||||||
|
{statuses.map((status) => (
|
||||||
|
<div
|
||||||
|
key={status.id}
|
||||||
|
className="flex items-center gap-3 p-3 bg-secondary rounded-lg"
|
||||||
|
>
|
||||||
|
<GripVertical className="w-4 h-4 text-muted-foreground" />
|
||||||
|
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<button
|
||||||
|
className="w-6 h-6 rounded-full border-2 border-gray-300 cursor-pointer hover:border-gray-400 transition-colors"
|
||||||
|
style={{ backgroundColor: status.color || "gray" }}
|
||||||
|
/>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-40 p-3">
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{COLOR_OPTIONS.map((color) => (
|
||||||
|
<button
|
||||||
|
key={color}
|
||||||
|
className="w-8 h-8 rounded-md border-2 transition-all hover:scale-110"
|
||||||
|
style={{
|
||||||
|
backgroundColor: color,
|
||||||
|
borderColor:
|
||||||
|
status.color === color ? "black" : "transparent",
|
||||||
|
}}
|
||||||
|
onClick={() =>
|
||||||
|
handleUpdateStatusColor(status.id, color)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
value={status.name}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleUpdateStatusName(status.id, e.target.value)
|
||||||
|
}
|
||||||
|
placeholder="Status name"
|
||||||
|
className="flex-1"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => handleDeleteStatus(status.id)}
|
||||||
|
className="p-2 hover:bg-destructive/10 rounded-md transition-colors"
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div className="flex gap-2 pt-2">
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<button
|
||||||
|
className="w-6 h-6 rounded-full border-2 border-gray-300 cursor-pointer hover:border-gray-400 transition-colors"
|
||||||
|
style={{ backgroundColor: newStatusColor || "gray" }}
|
||||||
|
/>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-40 p-3">
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{COLOR_OPTIONS.map((color) => (
|
||||||
|
<button
|
||||||
|
key={color}
|
||||||
|
className="w-8 h-8 rounded-md border-2 transition-all hover:scale-110"
|
||||||
|
style={{
|
||||||
|
backgroundColor: color,
|
||||||
|
borderColor:
|
||||||
|
newStatusColor === color ? "black" : "transparent",
|
||||||
|
}}
|
||||||
|
onClick={() => setNewStatusColor(color)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
value={newStatusName}
|
||||||
|
onChange={(e) => setNewStatusName(e.target.value)}
|
||||||
|
placeholder="New status name"
|
||||||
|
className="flex-1"
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
handleAddStatus();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button onClick={handleAddStatus} size="sm" className="gap-1">
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
Add
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user