feat(settings): add Custom Fields tab with localStorage schema + task detail panel rendering
This commit is contained in:
@@ -0,0 +1,254 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { Plus, Trash2, GripVertical } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
|
||||
const STORAGE_KEY = 'pe_custom_field_schemas';
|
||||
|
||||
type FieldType = 'text' | 'number' | 'select' | 'checkbox';
|
||||
type FieldScope = 'task' | 'habit' | 'project' | 'note';
|
||||
|
||||
interface FieldSchema {
|
||||
id: string;
|
||||
name: string;
|
||||
type: FieldType;
|
||||
options?: string[];
|
||||
scope: FieldScope;
|
||||
}
|
||||
|
||||
const FIELD_TYPES: { value: FieldType; label: string }[] = [
|
||||
{ value: 'text', label: 'Text' },
|
||||
{ value: 'number', label: 'Number' },
|
||||
{ value: 'select', label: 'Select' },
|
||||
{ value: 'checkbox', label: 'Checkbox' },
|
||||
];
|
||||
|
||||
const SCOPE_OPTIONS: { value: FieldScope; label: string }[] = [
|
||||
{ value: 'task', label: 'Task' },
|
||||
{ value: 'habit', label: 'Habit' },
|
||||
{ value: 'project', label: 'Project' },
|
||||
{ value: 'note', label: 'Note' },
|
||||
];
|
||||
|
||||
function loadSchemas(): FieldSchema[] {
|
||||
if (typeof window === 'undefined') return [];
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
return raw ? JSON.parse(raw) : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function saveSchemas(schemas: FieldSchema[]) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(schemas));
|
||||
}
|
||||
|
||||
export function SettingsCustomFields() {
|
||||
const [schemas, setSchemas] = useState<FieldSchema[]>([]);
|
||||
const [filterScope, setFilterScope] = useState<FieldScope | 'all'>('all');
|
||||
|
||||
// Create form
|
||||
const [newName, setNewName] = useState('');
|
||||
const [newType, setNewType] = useState<FieldType>('text');
|
||||
const [newScope, setNewScope] = useState<FieldScope>('task');
|
||||
const [newOptions, setNewOptions] = useState('');
|
||||
|
||||
// Delete
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setSchemas(loadSchemas());
|
||||
}, []);
|
||||
|
||||
const filteredSchemas = filterScope === 'all'
|
||||
? schemas
|
||||
: schemas.filter((s) => s.scope === filterScope);
|
||||
|
||||
function handleAdd() {
|
||||
if (!newName.trim()) return;
|
||||
const newSchema: FieldSchema = {
|
||||
id: crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`,
|
||||
name: newName.trim(),
|
||||
type: newType,
|
||||
scope: newScope,
|
||||
options: newType === 'select' ? newOptions.split(',').map((o) => o.trim()).filter(Boolean) : undefined,
|
||||
};
|
||||
const updated = [...schemas, newSchema];
|
||||
saveSchemas(updated);
|
||||
setSchemas(updated);
|
||||
toast.success('Custom field added');
|
||||
setNewName('');
|
||||
setNewType('text');
|
||||
setNewOptions('');
|
||||
}
|
||||
|
||||
function handleDelete(id: string) {
|
||||
const updated = schemas.filter((s) => s.id !== id);
|
||||
saveSchemas(updated);
|
||||
setSchemas(updated);
|
||||
setDeletingId(null);
|
||||
toast.success('Custom field removed');
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Custom Fields</CardTitle>
|
||||
<CardDescription>
|
||||
Define custom field schemas for tasks, habits, projects, and notes. Stored locally in your browser.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Scope filter */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Label htmlFor="cf-filter-scope" className="text-xs">Filter by scope:</Label>
|
||||
<Select value={filterScope} onValueChange={(v) => setFilterScope(v as FieldScope | 'all')}>
|
||||
<SelectTrigger id="cf-filter-scope" className="w-40">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All scopes</SelectItem>
|
||||
{SCOPE_OPTIONS.map((s) => (
|
||||
<SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Schema list */}
|
||||
<div className="space-y-2">
|
||||
{filteredSchemas.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{schemas.length === 0
|
||||
? 'No custom fields defined yet. Add one below.'
|
||||
: 'No custom fields match the selected scope.'}
|
||||
</p>
|
||||
) : (
|
||||
filteredSchemas.map((field) => (
|
||||
<div key={field.id} className="flex items-center justify-between rounded-lg border p-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
|
||||
<div>
|
||||
<span className="font-medium">{field.name}</span>
|
||||
<div className="flex gap-1 mt-1">
|
||||
<Badge variant="secondary" className="text-xs">{field.type}</Badge>
|
||||
<Badge variant="outline" className="text-xs capitalize">{field.scope}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setDeletingId(field.id)}
|
||||
aria-label={`Delete custom field: ${field.name}`}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" aria-hidden="true" />
|
||||
</Button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add form */}
|
||||
<div className="flex flex-wrap items-end gap-2 rounded-lg border p-3">
|
||||
<div className="flex-1 space-y-1">
|
||||
<Label htmlFor="new-cf-name" className="text-xs">Name</Label>
|
||||
<Input
|
||||
id="new-cf-name"
|
||||
placeholder="Field name"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-32 space-y-1">
|
||||
<Label htmlFor="new-cf-type" className="text-xs">Type</Label>
|
||||
<Select value={newType} onValueChange={(v) => setNewType(v as FieldType)}>
|
||||
<SelectTrigger id="new-cf-type">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{FIELD_TYPES.map((t) => (
|
||||
<SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="w-32 space-y-1">
|
||||
<Label htmlFor="new-cf-scope" className="text-xs">Scope</Label>
|
||||
<Select value={newScope} onValueChange={(v) => setNewScope(v as FieldScope)}>
|
||||
<SelectTrigger id="new-cf-scope">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SCOPE_OPTIONS.map((s) => (
|
||||
<SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{newType === 'select' && (
|
||||
<div className="w-48 space-y-1">
|
||||
<Label htmlFor="new-cf-options" className="text-xs">Options (comma-separated)</Label>
|
||||
<Input
|
||||
id="new-cf-options"
|
||||
placeholder="Option A, Option B"
|
||||
value={newOptions}
|
||||
onChange={(e) => setNewOptions(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Button onClick={handleAdd} disabled={!newName.trim()}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Delete confirmation */}
|
||||
<AlertDialog open={!!deletingId} onOpenChange={(open) => !open && setDeletingId(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Remove custom field?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This removes the field definition from your browser storage. Existing task data is not affected.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => deletingId && handleDelete(deletingId)}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Remove
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user