Multi-Track Timeline Block for Vue

Edit LANES at the top of the file. Each lane has an id, a name and its entries; each entry has an id, a week from 1 to 6, a title, a state of done, doing or next and, when it waits on work in another lane, needs with that entry's id. The weeks come from WEEK_ONE, a Monday, so the dates and the Now mark are worked out for you, and the count of waiting entries is derived from the needs links and the states, so nothing is typed twice.

Its column leaves the table and the remaining columns share the width, while the week column and every row height stay as they were. The lane buttons are toggles that are pressed while their lane is shown. The last lane cannot be hidden: pressing it says so in the status line instead. Hiding is local state; reload and all four come back.

An entry counts as waiting when its needs points at an entry that is not done yet. In the example three entries wait: Order history on the Orders export, Regression pass on the account pages and Launch check on Order history. The count follows the data if you change a state.

The grid is a real table with a caption, column headers and a row header for each week, and every entry is a list item whose state is written as a word beside its glyph, never colour alone. The lane buttons are named by their lane and report their pressed state, and a polite status line says which lane was hidden or shown and how many are visible.

The table scrolls sideways inside a named region the keyboard can reach, and the week column is held at the start so you always know which row you are reading. The lane buttons wrap above it.

The shown lanes are local state and nothing is requested. To use real work items, pass your own lanes in the same shape and keep the helpers; they use no time library and no locale, so the server and every browser write the same dates.