Show navigation
TodoList Quick Add
Part of TodoList to a todo product, built on task rows. A todo is usually a few words, and adding one used to open the whole edit dialog — a name, a rich-text editor and a date field — for them.
How it works
- The field leads the Items blade.
ResourceTodoListTopSlotholds an Add a todoUiTextField, its label hidden and its placeholder saying what it does, where an Add button used to open the dialog. It sits in aform, so Enter submits it natively. - Enter adds through the store's
addItem: the name is normalized, a name of only whitespace adds nothing, and the newTodoListItemis appended toitems, so it lands at the foot of the open group, as Microsoft To Do adds a task to the bottom of its list. The field empties at once and keeps focus for the next todo. A name pastITEM_NAME_MAX_LENGTH, the limit the dialog's name field counts, is refused with the field's error rather than cut short, and the field shows no count until then, so it lines up with the search button beside it. - Escape empties the field.
- A refused save takes the new todo back out of the list, and the typed name goes back into the field so nothing is lost — unless the next todo is already being typed there.
- Detail stays a click away. A due date and notes are set by opening the new row, the same dialog every row opens; the field grows no date picker and parses no dates from the name.
- Search folds into a button beside the field, which opens the search field focused; it folds away again once focus leaves it empty. A search in progress keeps it open, so a filtered list always shows its filter.
- The Calendar blade's double click keeps opening the dialog, since there the date is the point.
The field is labelled Add a todo rather than To Do's Add a task, since every other label in the list — Search todos, Delete todo — names a todo.
What is deliberately not in it
- No natural-language dates ("pay rent every 1st"), as Todoist parses them. It is a parser to own and localise, for a saving of one click into the date field.
Key files
| File | Role |
|---|---|
apps/web/app/components/Resource/TodoList/TopSlot.vue | The Add a todo field and the folding search |
apps/web/app/store/resource/todoList/index.ts | addItem, a create by name unwound on refusal |
Sources
- Microsoft To Do — create, edit, delete and restore tasks — "+ Add a task" in any list, typing the title and pressing Enter, and "your new task will be added to the bottom of your list".
Scroll to top