Tasks Subtask Names And Overdue - edmozley/freeitsm GitHub Wiki

Tasks: subtasks had no names in the side panel, and done tasks said Overdue

Fixed in 3.9.0 ยท Reported in #184 by @srinivasansanthosh ยท Module: Tasks

Two of the points in #184 were bugs rather than requests. Both are fixed; the rest of the issue (Hide done, which subtasks a card lists, ordering tasks in a project stage) shipped as features in the same release - see Tasks and Projects.

1. The subtask's name was squeezed to nothing

What you saw

Open a task with subtasks in the side panel (the default way a task opens). Each subtask row showed a drag handle, a tick box, a priority and two date boxes - and no name. The reporter put it exactly: "the limited space is used up by the checkbox and owner label." Below the list, the Add row pushed the whole panel into a sideways scroll, with the Add button off the edge.

The large task window (the expand button) was fine.

What was wrong

The subtask row is a CSS grid: handle | tick | name | who | start | due, with fixed widths for everything except the name - about 330px of fixed parts. The side panel is 480px wide with padding, leaving about 440px. CSS grid then grows the owner column (minmax(0, 110px)) to its limit before the name column (1fr) gets anything, so the owner took the last ~90px and the name got 0px.

There was a rule for narrow screens - but it was a @media (max-width: 700px) query, which measures the window. The panel is 480px wide on the widest monitor, so on a desktop that rule never ran.

The Add row was a flex line of a text box, two date boxes and a button with nothing allowed to shrink. A date box will not go below the browser's own minimum width unless told min-width: 0, and the rule that was meant to size them lost to a more specific .subtask-add input rule.

The fix

A container query - it measures the subtask area itself, not the window:

.subtask-section { container: subtasks / inline-size; }
@container subtasks (max-width: 600px) {
    .subtask-item, .subtask-head {
        grid-template-columns: 14px 16px minmax(0, 1fr) 118px 118px;
        grid-template-areas:
            "grip tick name name  name"
            "grip .    who  start due";
    }
}

In a narrow space each subtask is now two lines: the name across the full width, then who has it and the two dates under their headings. Nothing is hidden. The Add row wraps, and its boxes may shrink.

Measured: in the side panel the name went from 0px to 320px wide, and the panel body from 550px of content in 472px of space to 472 in 472 - no sideways scroll.

2. A finished task still said "Overdue"

What you saw

A task finished after its due date showed Overdue on its board card and in the list - for ever.

What was wrong

formatDueBadge() looked only at the date. Two places called it with nothing else: the board card and the list's Due column. Every other place that shows lateness already checked whether the task was done first - the subtask rows under a card, the Projects plan, Watchtower and the REST API - so this was two call sites, not a design gap.

A second, quieter fault sat underneath: list.php returned "is this task done?" as a number for subtasks but, for parent tasks, whatever the database driver gave back - which can be the string "0". In JavaScript "0" is true, so any check written the obvious way (if (t.status_is_closed)) would have called every task done.

The fix

  • formatDueBadge(date, done) shows just the date for a done task, and both callers pass it.
  • taskIsDone() reads the flag through Number(), and list.php now casts it for parent tasks as it already did for subtasks.

Checked: task 2008 on the dev install - done, due 10 September - now shows 10.09 where it said Overdue.

๐Ÿ“ Files changed

File Change
๐ŸŸช assets/css/tasks.css The container query; the add row wraps and its boxes may shrink
๐ŸŸฆ assets/js/tasks.js taskIsDone(); formatDueBadge(date, done) and its two callers
๐ŸŸฉ api/tasks/list.php Parent tasks' done flag cast to a number

What this means for you

Upgrade to 3.9.0 and hard-refresh (Ctrl-F5). Nothing was ever saved wrongly - both were display faults.

Related pages