task bucket fixes and task creation clarity
This commit is contained in:
@@ -3,6 +3,7 @@ import { addTask, calculateDateFromUrgency, calculateUrgencyFromDate, store, ups
|
||||
import { Search, Command, Clock, ArrowUpCircle, Copy, ChevronDown, Gauge, RotateCcw } from "lucide-solid";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { TextField, TextFieldInput } from "@/components/ui/textfield";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
|
||||
import { TagPicker } from "@/components/TagPicker";
|
||||
@@ -29,6 +30,7 @@ const [tags, setTags] = createSignal<string[]>([]);
|
||||
const [description, setDescription] = createSignal("");
|
||||
const [size, setSize] = createSignal<string>("3");
|
||||
const [dateString, setDateString] = createSignal<string>("");
|
||||
const [showValidation, setShowValidation] = createSignal(false);
|
||||
|
||||
let lastParsedTags: string[] = [];
|
||||
|
||||
@@ -40,6 +42,7 @@ const resetQuickEntryState = () => {
|
||||
setDescription("");
|
||||
setSize("3");
|
||||
setDateString("");
|
||||
setShowValidation(false);
|
||||
lastParsedTags = [];
|
||||
};
|
||||
|
||||
@@ -140,7 +143,12 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
|
||||
|
||||
const parseAndAdd = async () => {
|
||||
let text = input();
|
||||
if (!text || !priority() || !urgency()) return;
|
||||
if (!text || !priority() || !urgency()) {
|
||||
setShowValidation(true);
|
||||
toast.error("Please fill in all required fields (Title, Priority, Urgency)");
|
||||
if (!text) inputRef?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
let finalPriority = parseInt(priority());
|
||||
let finalUrgency = parseInt(urgency());
|
||||
@@ -268,20 +276,33 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
|
||||
|
||||
return (
|
||||
<div class="flex flex-col h-full bg-card">
|
||||
<div class="flex items-center px-4 py-3 border-b border-border sticky top-0 bg-card z-10">
|
||||
<Search class="text-muted-foreground mr-3" size={20} />
|
||||
<TextField class="flex-1">
|
||||
<TextFieldInput
|
||||
id="quick-entry-input"
|
||||
name="task-title"
|
||||
ref={inputRef}
|
||||
value={input()}
|
||||
onInput={(e) => setInput(e.currentTarget.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && parseAndAdd()}
|
||||
placeholder="Task title... type /p1-10 for priority and /u1-10 for urgency"
|
||||
class="border-none shadow-none focus-visible:ring-0 text-lg"
|
||||
/>
|
||||
</TextField>
|
||||
<div class={cn("flex flex-col border-b border-border sticky top-0 bg-card z-10 transition-colors", showValidation() && !input() && "bg-destructive/5")}>
|
||||
<div class="flex items-center px-4 py-3">
|
||||
<Search class={cn("text-muted-foreground mr-3 transition-colors", showValidation() && !input() && "text-destructive")} size={20} />
|
||||
<TextField
|
||||
class="flex-1"
|
||||
validationState={showValidation() && !input() ? "invalid" : "valid"}
|
||||
>
|
||||
<TextFieldInput
|
||||
id="quick-entry-input"
|
||||
name="task-title"
|
||||
ref={inputRef}
|
||||
value={input()}
|
||||
onInput={(e) => setInput(e.currentTarget.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && parseAndAdd()}
|
||||
placeholder="Task title... type /p1-10 for priority and /u1-10 for urgency"
|
||||
class="border-none shadow-none focus-visible:ring-0 text-lg p-0"
|
||||
/>
|
||||
</TextField>
|
||||
</div>
|
||||
<Show when={showValidation() && !input()}>
|
||||
<div class="px-4 pb-2 -mt-1 flex items-center gap-1.5 animate-in fade-in slide-in-from-top-1 duration-200">
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-destructive" />
|
||||
<span class="text-[0.625rem] font-bold uppercase tracking-widest text-destructive/80">
|
||||
Title is required to create a task
|
||||
</span>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto overscroll-contain">
|
||||
@@ -305,11 +326,17 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
|
||||
{props.item.rawValue.label}
|
||||
</SelectItem>
|
||||
)}
|
||||
validationState={showValidation() && !priority() ? "invalid" : "valid"}
|
||||
>
|
||||
<SelectTrigger class="w-full bg-background border-none shadow-sm h-10 px-3 overflow-hidden">
|
||||
<SelectTrigger
|
||||
class={cn(
|
||||
"w-full bg-background border shadow-sm h-10 px-3 overflow-hidden transition-colors border-transparent",
|
||||
showValidation() && !priority() && "border-destructive/50 bg-destructive/5"
|
||||
)}
|
||||
>
|
||||
<div class="flex items-center gap-2 truncate">
|
||||
<ArrowUpCircle size={14} class="text-primary shrink-0" />
|
||||
<span class="text-sm font-medium truncate">
|
||||
<ArrowUpCircle size={14} class={cn("text-primary shrink-0", showValidation() && !priority() && "text-destructive")} />
|
||||
<span class={cn("text-sm font-medium truncate", showValidation() && !priority() && "text-destructive")}>
|
||||
{PRIORITY_OPTIONS.find(o => o.value === priority())?.label || (priority() === "" ? "Pick Priority" : priority())}
|
||||
</span>
|
||||
</div>
|
||||
@@ -364,11 +391,17 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
|
||||
{props.item.rawValue.label}
|
||||
</SelectItem>
|
||||
)}
|
||||
validationState={showValidation() && !urgency() ? "invalid" : "valid"}
|
||||
>
|
||||
<SelectTrigger class="w-full bg-background border-none shadow-sm h-10 px-3 overflow-hidden">
|
||||
<SelectTrigger
|
||||
class={cn(
|
||||
"w-full bg-background border shadow-sm h-10 px-3 overflow-hidden transition-colors border-transparent",
|
||||
showValidation() && !urgency() && "border-destructive/50 bg-destructive/5"
|
||||
)}
|
||||
>
|
||||
<div class="flex items-center gap-2 truncate">
|
||||
<Clock size={14} class="text-primary shrink-0" />
|
||||
<span class="text-sm font-medium truncate">
|
||||
<Clock size={14} class={cn("text-primary shrink-0", showValidation() && !urgency() && "text-destructive")} />
|
||||
<span class={cn("text-sm font-medium truncate", showValidation() && !urgency() && "text-destructive")}>
|
||||
{URGENCY_OPTIONS.find(o => o.value === urgency())?.label || (urgency() === "" ? "Pick Urgency" : urgency())}
|
||||
</span>
|
||||
</div>
|
||||
@@ -505,7 +538,7 @@ export const QuickEntryForm: Component<QuickEntryFormProps> = (props) => {
|
||||
</Popover>
|
||||
</Show>
|
||||
|
||||
<Button size="sm" onClick={parseAndAdd} disabled={!input() || !priority() || !urgency()}>
|
||||
<Button size="sm" onClick={parseAndAdd}>
|
||||
Create Task
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user