shadcn.io is not affiliated with official shadcn/ui
Writer Assignments Kanban Block for Vue
A content desk with an Unassigned pool and a lane for each of four writers, where dropping a brief on a writer assigns it and a writer's word limit refuses an overload.
Installation
Overview
Assign briefs to writers without going over anyone's month with this content desk board for Vue with Ark UI. A hairline frame with a plus mark on each corner holds an Unassigned pool and a lane for each of four writers, by four statuses (Briefed, Writing, Editing and Published) over fifteen briefs. Each brief shows its title, its type as an icon and a word in an outline Badge (Feature, Guide or Brief) and its word target. A writer's lane head adds up the targets of their briefs and shows "Words this month" against a limit of 6,000 with a small bar and the words still free, and the pool's head says how many briefs are unassigned. Assigning is a drop on a writer's lane or "Hand to" in the brief's menu. Two rules refuse with the reason in words: a writer can't be given more than 6,000 words in the month, and a brief with no writer waits in Briefed. A card moves three ways: drag its grip, focus the grip and use Space, the arrow keys and Escape, or open its Dropdown Menu. A polite status line in the foot reports each move, and Reset puts the desk back. The frame is ruled by Guides. For editorial teams, agencies and any desk that hands out written work.
FAQ
How do I use my own writers and briefs?
Edit LANES, STATUSES, START and CAP. The lane with the id pool is the unassigned row; the others are writers. A brief has an id, a title, a kind (Feature, Guide or Brief), its words and the column it starts in, written as the lane and the status joined by a dot (thea.writing). The word totals, the free words and the header sentence are worked out from the briefs.
How do I move a brief without a mouse?
Tab to the grip at the start of a card, named "Move" with the brief's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place in the cell (at the top or bottom of a cell the card crosses into the neighbouring writer's cell in the same status), ArrowLeft and ArrowRight to go to the neighbouring status in the same writer (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Every step is announced in the status line, for example "A walk along the canal, Odessa Crane, Editing, position 1 of 2."
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with two groups of choices: "Move to" each status and "Hand to" each writer, the current one ticked in both. Choosing one moves the card, puts focus on the card in its new place and says so in the status line. "Hand to Unassigned" puts a brief back in the pool, but only from Briefed.
How do the word limit and the pool rule work?
refusalOf asks two helpers. One adds the brief's words to the writer it is going to and refuses when the total passes CAP; the other refuses any move into the Unassigned lane that isn't into Briefed, because a brief with no writer can't be in progress. The drop, the keyboard steps and the menu all ask it, a refused move leaves the brief where it was, and the status line gives the number and the way out.
What stays in the demo, and how do I save the assignments?
Everything: the moves live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting desk. To save for real, call your API from put, the one function every finished move goes through, and update the briefs from the response. The writers and briefs are made up.
How does it work on a phone?
The board is one scroll region that moves sideways and up and down inside its fixed height, so the page never jumps, and the writer names are sticky so you always know whose row you are in. Touch drags from the grip only, so the rest of a card still scrolls the board, and the menu is the other way to move a card. The status line is still read out to screen readers.