Add clickable priority dropdown on task detail pages

t-182·WorkTask·
·
·
·Omni/Jr.hs
Created3 months ago·Updated3 months ago

Description

Edit

On /tasks/<id> pages, the status badge is clickable and opens a dropdown to change status. Implement the same pattern for the priority label (e.g., "P1 High").

Current priority display (in task detail header): Lucid.span_ [Lucid.class_ "priority-badge"] (Lucid.toHtml (tshow priority <> " " <> priorityDesc priority))

Design:

  • Click on "P1 High" opens dropdown with P0-P4 options
  • Each option shows priority code and description (e.g., "P0 Critical", "P1 High", etc.)
  • Current priority is highlighted/checked
  • Selecting changes priority via HTMX POST

Implementation:

1. Add new route: "tasks" :> Capture "id" Text :> "priority" :> ReqBody '[FormUrlEncoded] PriorityForm :> Post '[Lucid.HTML] PriorityBadgePartial

2. Add form and partial types: newtype PriorityForm = PriorityForm TaskCore.Priority data PriorityBadgePartial = PriorityBadgePartial TaskCore.Priority Text

3. Add handler: priorityHandler :: Text -> PriorityForm -> Handler PriorityBadgePartial

  • Update task priority in database
  • Return new badge partial

4. Create priority dropdown components (mirror status pattern): priorityBadgeClickable :: Priority -> Text -> HtmlT m () priorityDropdownOptions :: Priority -> Text -> HtmlT m () priorityOption :: Priority -> Priority -> Text -> HtmlT m ()

5. Wrap priority in #priority-badge-container div for HTMX targeting

6. Reuse existing .status-badge-dropdown CSS classes, or create parallel .priority-badge-dropdown classes

7. Add JavaScript handlers (or reuse toggle/close logic with class parameterization):

  • togglePriorityDropdown(elem)
  • closePriorityDropdown(container)

Or generalize: toggleDropdown(elem, containerClass)

Files: Omni/Jr/Web.hs, Omni/Jr/Web/Style.hs, Omni/Task/Core.hs (add updateTaskPriority if not exists)

Timeline (0)

No activity yet.