+```
+
+Build the template from the route helper through a sentinel, so an
+installation under a relative URL root keeps working; `{id}` is expanded on
+the client with the dragged row's id:
+
+```ruby
+def move_url_template
+ id_placeholder = "__id__"
+ drop_admin_text_transform_action_path(id_placeholder).sub(id_placeholder, "{id}")
+end
+```
+
+The expanded URL must stay same-origin and relative; only path, query and
+fragment survive.
+
+## The list
+
+The list element declares the type it persists and the type it accepts.
+`type` doubles as the `list_type` the server receives, so a list without one
+cannot accept drops and warns in the console. `name` is what screen readers
+hear when a row arrives from another list; give it even for one list, it
+costs nothing and the list may gain siblings.
+
+```html
+
">
+
+```
+
+Rows may sit in a child `-
+ …rows…
+
- `, as `BorderBoxList` renders them, or directly
+under the list element. Both resolve without configuration, so table rows
+and cards need no special markup.
+
+## The row
+
+Each row declares its identity and hosts the drag handle:
+
+```html
+
- + + … + +``` + +`Primer::OpenProject::DragHandle` renders that button for you; give it the +`handle` target. + +Without a `handle` target the whole row is the handle, which fights with +links and buttons inside it. Add a `preview` target on an inner element when +the row's own box is not what should follow the pointer (a card inside a +padded `
- `, for instance); the default preview is the row itself. + +## The move menu + +A drag is a pointer gesture, so every sortable row also needs a keyboard- +and screen-reader-reachable path. Put move actions in the row's Primer +`ActionMenu`; the controller depends on that component. Each action is a +`moveItem` target with a `direction` param (`top`, `up`, `down`, `bottom`) +and the `move` action, passed to `with_item` so the attributes land on the +menu's `
- `, not on the button inside it:
+
+```erb
+<%%= render(Primer::Alpha::ActionMenu.new) do |menu| %>
+ <%% menu.with_show_button(icon: "kebab-horizontal", scheme: :invisible, "aria-label": action.label) %>
+ <%% menu.with_divider(data: { sortable_lists__item_target: "moveDivider" }) %>
+ <%% menu.with_item(
+ label: "Move up",
+ tag: :button,
+ data: {
+ sortable_lists__item_target: "moveItem",
+ sortable_lists__item_direction_param: "up",
+ action: "click->sortable-lists--item#move"
+ }
+ ) %>
+<%% end %>
+```
+
+`move` looks up the row's `
` element and asks it whether that +` - ` is disabled or hidden before moving anything; the click reaches the +`
- ` by bubbling up from the button. A row without an `ActionMenu` still +drags, its `move` action just does nothing. The `moveDivider` target on the +divider above the group lets the controller hide it together with the +actions when none applies. + +Availability is recomputed every time the menu opens: the first row has no +"up", the last no "down". Unavailable actions are hidden; set +`data-sortable-lists--item-hide-unavailable-value="false"` on the row to +disable them instead. + +## The backend request + +A drop, or a move action, sends `PUT` to the expanded move URL with +`responseKind: 'turbo-stream'` and three form fields: + +| Field | Value for one list | +| --- | --- | +| `list_type` | the list's `type` | +| `list_id` | blank; the list declares no `id` | +| `prev_id` | id of the row the moved row now follows, or blank when it landed first | + +`prev_id` is an anchor, not an index: a stale ordinal cannot silently move +the wrong row. A drop that leaves the row where it was sends nothing. + +The row moves in the DOM before the request resolves. The endpoint answers +by streaming the re-rendered list, and the morph replaces the optimistic +placement with the server's order. A failure rolls the row back; a `422` +stays silent because the server has already streamed its own message, any +other status raises a generic toast. + +For `acts_as_list` models the endpoint is a few lines with the +`Lists::MoveAfterAnchor` concern; the API reference tab describes the server +half, including the anchor rules and what to do when the model orders by +something other than a position column. diff --git a/lookbook/docs/20-patterns/44-drag-and-drop[sibling-lists].md.erb b/lookbook/docs/20-patterns/44-drag-and-drop[sibling-lists].md.erb new file mode 100644 index 000000000000..2b282c2e4df1 --- /dev/null +++ b/lookbook/docs/20-patterns/44-drag-and-drop[sibling-lists].md.erb @@ -0,0 +1,125 @@ +--- +label: Sibling lists +--- + +Several lists of one kind under one root, with rows moving between them. +Backlogs is the reference: an inbox and any number of sprint columns, all +holding work packages. Everything from the One list tab still applies; this +tab adds only what siblings need. + +<%= embed Patterns::SortableListsPreview, :sibling_lists, panels: %i[source] %> + +As on the One list tab, the preview's move URL points at a path that does +not exist: every drop and every move action rolls back with an error toast. + +## Give every list an id + +The lists accept the same item type, so each needs an `id` to tell them +apart; that value is the `list_id` the server receives. Their own `type` is +the kind of destination the server decodes and may differ between siblings: +the Backlogs inbox declares `inbox`, every sprint column `sprint`, and both +accept `work_package`: + +```html +
+``` + +A move into another list is the ordinary request with that list's +`list_type` and `list_id`; the client sends nothing extra to relocate a row. +On the server a +change of list is a reparent plus an insert, so run both in one transaction +and lock both lists: a failed insert must leave the record where it started. + +`name` is announced to screen readers when a row arrives from another list +("moved to Sprint 3"), so it must be the user-facing name. + +## Keyboard path between lists + +The move menu from the One list tab only reorders within the row's current +list; its four directions never change the list. A keyboard user still has +to be able to change list, so the consumer adds its own actions that send +the same `PUT` with the destination's `list_type` and `list_id` and no +`prev_id`, landing the row first. Backlogs' +`WorkPackageCardMenuComponent` shows both shapes: "Move to inbox" is a form +item submitting `list_type=inbox` directly, while "Move to sprint…" and +"Move to backlog…" open a dialog to pick the destination and then submit the +same request. The preview above has no such action, so its cross-list move +is drag-only. + +## Drops on empty space + +An empty list is still a drop target, because the list element accepts the +drop, not its rows. A drop on the empty space of a non-empty list lands at +the end by default; set `data-sortable-lists--list-drop-position-value="start"` +on lists that read newest-first, as the Backlogs inbox does. + +## Rows that may not leave + +Set `data-sortable-lists--item-confined-value="true"` on a row the server +will reorder in place but refuses to relocate. It stays fully draggable and +its own list accepts it, so reordering keeps working; every other list +refuses the drop and a release there leaves the row where it was. + +That is different from a row that may not move at all. Backlogs renders a +work package the user may not sort as a plain row: no `sortable-lists--item` +controller and no item id, so it neither drags nor anchors its neighbors' +drops. + +## Auto-scrolling columns + +Put `sortable-lists--scrollable` on the element that actually scrolls, which +is rarely the list itself. Backlogs wraps each column of lists in one: + +```html ++``` + +Add the scrollable outlet to the root alongside the other two, with the same +id scoping: + +```html +data-sortable-lists-sortable-lists--scrollable-outlet="#backlogs_container [data-controller~='sortable-lists--scrollable']" +``` + +`allowedAxis` accepts `vertical` (default), `horizontal` or `all`; +`maxScrollSpeed` accepts `standard` (default) or `fast`. + +## Optimistic placement + +By default the endpoint streams the re-rendered list back and the morph +reconciles the row's position. A board that re-renders on every drag pays +for that with flicker, so the root can ask for an event-only answer: + +```html ++``` + +(plus the outlet selectors from the One list tab.) + +This appends `optimistic=true` to the move URL. The endpoint may then +acknowledge with an event alone and leave the client's placement standing. +Backlogs is the only surface that opts in today. + +The flag is a request, not a promise. Backlogs skips the re-render only for a +same-list move whose requested anchor is verifiably the persisted one: a +blank `prev_id` with nothing above the row, or a non-blank one that really is +the row above. A cross-list move, or an anchor that has meanwhile left the +list, reloads the frame, because the persisted order and the optimistic order +have diverged. A failed request still rolls the rows back, unless a +concurrent morph has already moved them, in which case the fresher server +state wins. + +## Batch selection + +Selecting several rows and moving them together is in development +([AGILE-278](https://community.openproject.org/wp/AGILE-278), +[AGILE-361](https://community.openproject.org/wp/AGILE-361)). The root's +`selection_enabled` value and the collection move endpoint it drives are not +yet a stable contract; this section documents them once they settle. diff --git a/lookbook/docs/20-patterns/45-drag-and-drop[nested-lists].md.erb b/lookbook/docs/20-patterns/45-drag-and-drop[nested-lists].md.erb new file mode 100644 index 000000000000..c1095a84c3dd --- /dev/null +++ b/lookbook/docs/20-patterns/45-drag-and-drop[nested-lists].md.erb @@ -0,0 +1,105 @@ +--- +label: Nested lists +--- + +Rows that are themselves lists: chapters that reorder, each holding articles +that reorder within their chapter and move to another. Project Attributes +(`Settings::ProjectCustomFieldSections`) is the reference. This is the +advanced case; the six rules below are all it adds to the previous tabs. + +## Anatomy of a nested root + +" alt="One root holding a chapter list; each chapter row hosts its own article list; one move endpoint per item type" width="636" style="max-width: 100%"> + +Chapters reorder among themselves; articles reorder within a chapter and +move between chapters. Still one root: the second level comes from a second +item type, never from a second root. The colors match the diagrams in +**Implementation overview**; the same four controllers, only the types differ. + +**One root, two item types, never nested roots.** Depth comes from a second +item type under the same root. The root's outlet selectors match at any +depth, so it already sees both levels; a row belongs to the innermost list +that contains it. + +``` +[sortable-lists] root + └ [sortable-lists--list] type: chapter · accepted_type: chapter + └ [sortable-lists--item] a chapter, as a row of the chapter list + └ [sortable-lists--list] the same chapter, as a list of articles + type: article · accepted_type: article · id:
+ └ [sortable-lists--item] an article +``` + +**The item and the list it hosts are different elements.** The chapter row +wraps the article list, usually with ordinary layout markup between them. + +```html + ++``` + +Inside `ChapterComponent` the same chapter becomes a list: + +```html ++ <%% chapters.each do |chapter| %> +++ <%%= render(ChapterComponent.new(chapter:)) %> ++ <%% end %> +++``` + +**`accepted_type` keeps the levels apart.** Every list under the root is a +candidate target for every dragged row; the accepted type is the only thing +stopping a chapter from being dropped into a list of articles. A list +without one accepts nothing. + +**One move endpoint per item type.** The root supplies `move_url_templates`, +a JSON object keyed by item type, instead of `move_url_template`. The +dragged row's type keys the lookup, because the endpoint belongs to the +record being moved. `move_url_template` remains the fallback for a type +without its own entry. + +```ruby +def move_url_templates + id_placeholder = "__id__" + { + chapter: drop_chapter_path(id_placeholder).sub(id_placeholder, "{id}"), + article: drop_article_path(id_placeholder).sub(id_placeholder, "{id}") + } +end +``` + +**The chapter's `handle` and `preview` live inside the article list +element**, because that inner element is what should drag and preview; the +outer row would drag its margins with it. Stimulus binds a target to the +nearest ancestor controller with that identifier and skips the nested +`sortable-lists--item` controllers of the articles, so the chapter's targets +stay the chapter's however deep they sit, and the articles' handles never +leak upward. + +**Levels need not share a row tag.** Chapter rows above are `+ + <%%= chapter.name %> + +- …article rows…
`s directly +under the list element; article lists are `BorderBoxList`s with `- ` rows +in a `
- `. Both resolve without configuration.
diff --git a/lookbook/docs/20-patterns/46-drag-and-drop[api-reference].md.erb b/lookbook/docs/20-patterns/46-drag-and-drop[api-reference].md.erb
new file mode 100644
index 000000000000..20355dfd2415
--- /dev/null
+++ b/lookbook/docs/20-patterns/46-drag-and-drop[api-reference].md.erb
@@ -0,0 +1,188 @@
+---
+label: API reference
+---
+
+The values, outlets, targets and actions of the four controllers, then the
+backend request, the server half, the response policy, the Angular
+counterpart and the migration table.
+
+## Attributes
+
+The suite is built on
+[Pragmatic drag and drop](https://atlassian.design/components/pragmatic-drag-and-drop/);
+links below point at its documentation where a concept is theirs.
+
+Four kinds of attribute appear on the markup, each with the standard Stimulus
+spelling:
+
+| Kind | Attribute | Example |
+| --- | --- | --- |
+| Value | `data-
- -value`, camel case hyphenated | `data-sortable-lists--list-accepted-type-value="task"` | +| Outlet | `data-sortable-lists- -outlet` | `data-sortable-lists-sortable-lists--list-outlet="#tasks [data-controller~='sortable-lists--list']"` | +| Target | `data- -target=" "` | `data-sortable-lists--item-target="handle"` | +| Action | `data-action=" -> # "`, params as `data- --param` | `data-action="click->sortable-lists--item#move"` | + +When you pass them through a Rails `data:` hash, as the previews do, write the +controller with a double underscore and the rest with single ones: +`sortable_lists__list_accepted_type_value:`. + +### `sortable-lists` (root) + +#### Values + +| Value | Type | Default | Meaning | +| --- | --- | --- | --- | +| `moveUrlTemplate` | string | | URI template expanded with the dragged row's id; must expand to a relative same-origin URL | +| `moveUrlTemplates` | JSON object | | per-item-type templates keyed by the dragged row's type; `moveUrlTemplate` is the fallback | +| `optimistic` | boolean | `false` | appends `optimistic=true` to the move URL and keeps the client's placement when the server answers with an event alone | + +#### Outlets + +| Outlet | Required | Meaning | +| --- | --- | --- | +| `sortable-lists--list` | yes | every list under this root | +| `sortable-lists--item` | yes | every row under this root | +| `sortable-lists--scrollable` | when declared | every auto-scrolling container under this root | + +### `sortable-lists--list` + +#### Values + +| Value | Type | Default | Meaning | +| --- | --- | --- | --- | +| `type` | string | | the list's own type, sent as `list_type`; a list without one accepts no drops | +| `acceptedType` | string | | the item type this list accepts; omit to make the list display-only ([typing data](https://atlassian.design/components/pragmatic-drag-and-drop/core-package/recipes/typing-data)) | +| `id` | string | | sent as `list_id`; required as soon as two lists share a type | +| `name` | string | | announced to screen readers on a cross-list move | +| `dropPosition` | `start` or `end` | `end` | where a drop on the list's empty space lands | + +### `sortable-lists--item` + +#### Values + +| Value | Type | Default | Meaning | +| --- | --- | --- | --- | +| `id` | string | | the record id; expands `{id}` in the move URL and is sent as a neighbor's `prev_id` | +| `type` | string | | matched against lists' `acceptedType`; keys `moveUrlTemplates` ([typing data](https://atlassian.design/components/pragmatic-drag-and-drop/core-package/recipes/typing-data)) | +| `label` | string | | accessible name used in announcements and in the external drag data | +| `confined` | boolean | `false` | reorders within its own list only; foreign lists refuse it | +| `hideUnavailable` | boolean | `true` | hide inapplicable move actions; `false` disables them instead | +| `externalUrl` | URL | | when set, a drag also carries `text/uri-list`, `text/plain` and, with a label, `text/html` for targets outside the page ([data for external consumers](https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#data-for-external-consumers-getinitialdataforexternal), [external adapter](https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/external/about)) | + +#### Targets + +| Target | Cardinality | Meaning | +| --- | --- | --- | +| `handle` | one | the element that starts a drag; the whole row when absent ([drag handles](https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drag-handles)) | +| `preview` | one | the element that follows the pointer; the row when absent ([drag previews](https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/drag-previews)) | +| `moveItem` | one per move action | a move action; carries the `direction` param | +| `moveMenu` | one | the submenu or group wrapping the move actions, hidden or disabled when none applies | +| `moveDivider` | one | the divider above the move actions, hidden together with them | + +#### Actions + +| Action | Params | Meaning | +| --- | --- | --- | +| `move` | `direction`: `top`, `up`, `down` or `bottom` | moves the row without a drag; bound as `click->sortable-lists--item#move` | + +### `sortable-lists--scrollable` + +#### Values + +| Value | Type | Default | Meaning | +| --- | --- | --- | --- | +| `allowedAxis` | `vertical`, `horizontal` or `all` | `vertical` | which edges trigger auto-scroll | +| `maxScrollSpeed` | `standard` or `fast` | `standard` | | + +## The move request + +`PUT` to the expanded move URL with `responseKind: 'turbo-stream'` and three +form fields: + +| Field | Meaning | +| --- | --- | +| `list_type` | the destination list's `type` | +| `list_id` | the destination list's `id`; blank when it declares none, required as soon as two lists share a type | +| `prev_id` | id of the row the moved row now follows; blank when it landed first | + +`prev_id` is always a record id, whatever the server orders by underneath. A +drop that leaves the row where it started sends no request. + +## The server half + +Two ordering families back this request. A blank `prev_id` moves the +record to the top in both. What happens to an anchor that is unknown, +outside the destination's scope, or the moved record itself depends on the +implementation: + +* `acts_as_list` models include `Lists::MoveAfterAnchor`, which resolves the + anchor within a scope you pass and reinserts relative to it. It refuses + such anchors, returning `false` without mutating anything. +* Backlogs' own `move_after` removes the row from its list before looking + the anchor up, and an anchor it cannot find puts the row at the top + instead of refusing. The streamed list reconciles the client afterwards; + the Sibling lists tab describes when Backlogs reloads for that reason. +* Models ordering by an array of keys insert after the anchor's key, + translating the incoming id to that key first. + +A move that changes list is a reparent plus an insert: one transaction, +both lists locked, so a failed insert leaves the record in its original +list. Answer refusals with `422` after streaming your own message; the client +keeps that status silent apart from the rollback. Any other failure raises a +generic toast. + +## Response policy + +The row moves in the DOM before the request resolves. + +* **Morph reconciliation (default).** The endpoint streams the re-rendered + list; the morph replaces the client's placement with the server's order. +* **Event-only (`optimistic`).** The endpoint may acknowledge with an event + alone. The server decides per request whether the client's placement is + trustworthy; see the Sibling lists tab. + +A failed request rolls the rows back, unless a concurrent morph has already +moved them. + +## Angular counterpart + +Angular surfaces use the `opSortableLists`, `opSortableListsList` and +`opSortableListsItem` directives in +`frontend/src/app/shared/directives/sortable-lists/`, backed by the engine +in `frontend/src/common/drag-and-drop/sortable-lists-engine.ts`. Both +suites build on Pragmatic drag and drop and follow the same styling +conventions (`data-dragging`, `data-drop-position`, `data-drop-container`), +but share no code. + +They differ on persistence, and this paragraph is only an overview; the +event interfaces in `sortable-lists.directive.ts` are the contract. A drop +emits an `opSortableListsDrop` event carrying the target and edge. The +component persists the result itself, then calls the event's +`complete(success)`; until it does, the root stays busy and refuses further +drags, warning after ten seconds. A row leaving for another list also emits +`opSortableListsRemoved` on its source list, settled with `finalize()`. +There is no `prev_id` request. The draggable autocompleter uses these +directives; new server-rendered surfaces use the Stimulus suite. + +## Used in + +* Text transform actions (`Admin::TextTransformActions`): one list. +* Backlogs (`modules/backlogs`): sibling lists, scrollable columns, + optimistic placement, confined rows, external drag data. +* Project Attributes (`Settings::ProjectCustomFieldSections`): nested lists + with per-type move endpoints. + +## Migrating off `generic-drag-and-drop` + +| `generic-drag-and-drop` | `sortable-lists` | +| --- | --- | +| `generic_drag_and_drop_target: "container"` | a `sortable-lists--list` controller on the list | +| `generic_drag_and_drop_target: "scrollContainer"` | a `sortable-lists--scrollable` controller | +| `drop-url` on the row | `move-url-template` on the root | +| `draggable-type` / `target-allowed-drag-type` | the row's `type` and the list's `accepted-type` | +| index-based position params | `list_type` + `list_id` + `prev_id` | +| no keyboard path | `moveItem` menu actions | + +The endpoint changes shape too: Dragula posted an index, so a server that +still computes positions from one needs porting to anchor semantics before +its list can move over. diff --git a/lookbook/docs/patterns/accessibility/18-aria-live.md.erb b/lookbook/docs/20-patterns/accessibility/18-aria-live.md.erb similarity index 100% rename from lookbook/docs/patterns/accessibility/18-aria-live.md.erb rename to lookbook/docs/20-patterns/accessibility/18-aria-live.md.erb diff --git a/lookbook/docs/patterns/accessibility/19-blank-target-links.md.erb b/lookbook/docs/20-patterns/accessibility/19-blank-target-links.md.erb similarity index 100% rename from lookbook/docs/patterns/accessibility/19-blank-target-links.md.erb rename to lookbook/docs/20-patterns/accessibility/19-blank-target-links.md.erb diff --git a/lookbook/docs/styles/02-icons.md.erb b/lookbook/docs/40-styles/02-icons.md.erb similarity index 100% rename from lookbook/docs/styles/02-icons.md.erb rename to lookbook/docs/40-styles/02-icons.md.erb diff --git a/lookbook/docs/styles/03-colors.md.erb b/lookbook/docs/40-styles/03-colors.md.erb similarity index 100% rename from lookbook/docs/styles/03-colors.md.erb rename to lookbook/docs/40-styles/03-colors.md.erb diff --git a/lookbook/docs/styles/10-box-list-item-states.md.erb b/lookbook/docs/40-styles/10-box-list-item-states.md.erb similarity index 100% rename from lookbook/docs/styles/10-box-list-item-states.md.erb rename to lookbook/docs/40-styles/10-box-list-item-states.md.erb diff --git a/lookbook/previews/patterns/sortable_lists_preview.rb b/lookbook/previews/patterns/sortable_lists_preview.rb new file mode 100644 index 000000000000..76a29829a361 --- /dev/null +++ b/lookbook/previews/patterns/sortable_lists_preview.rb @@ -0,0 +1,51 @@ +# frozen_string_literal: true + +#-- copyright +# OpenProject is an open source project management software. +# Copyright (C) the OpenProject GmbH +# +# This program is free software; you can redistribute it and/or +# modify it under the terms of the GNU General Public License version 3. +# +# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: +# Copyright (C) 2006-2013 Jean-Philippe Lang +# Copyright (C) 2010-2013 the ChiliProject Team +# +# This program is free software; you can redistribute it and/or +# modify it under the terms of the GNU General Public License +# as published by the Free Software Foundation; either version 2 +# of the License, or (at your option) any later version. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU General Public License for more details. +# +# You should have received a copy of the GNU General Public License +# along with this program; if not, write to the Free Software +# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. +# +# See COPYRIGHT and LICENSE files for more details. +#++ + +module Patterns + # @hidden + class SortableListsPreview < ViewComponent::Preview + # Rows drag and the move menu works, but the move URL points at a path + # that does not exist, so every drop ends in the generic error toast and + # the rows roll back. Persistence needs a real endpoint. + # @display min_height 320px + def single_list + render_with_template + end + + # Two lists accepting the same item type under one root. Rows drag + # between them and the move menu reorders within a list; the request + # fails for the same reason as in the single list. No action changes + # list: that keyboard path is the consumer's, see the Sibling lists tab. + # @display min_height 320px + def sibling_lists + render_with_template + end + end +end diff --git a/lookbook/previews/patterns/sortable_lists_preview/sibling_lists.html.erb b/lookbook/previews/patterns/sortable_lists_preview/sibling_lists.html.erb new file mode 100644 index 000000000000..f095fa81b17a --- /dev/null +++ b/lookbook/previews/patterns/sortable_lists_preview/sibling_lists.html.erb @@ -0,0 +1,70 @@ + + <%= render(Primer::Box.new(display: :flex, style: "gap: 16px")) do %> + <% { "todo" => ["Write the spec", "Review the design"], "done" => ["Ship it"] }.each do |list_id, titles| %> + <%= render(Primer::Box.new(flex: 1)) do %> + <%= + render( + OpenProject::Common::BorderBoxListComponent.new( + container: "sortable-lists-preview-#{list_id}", + data: { + controller: "sortable-lists--list", + sortable_lists__list_type_value: "task", + sortable_lists__list_accepted_type_value: "task", + sortable_lists__list_id_value: list_id, + sortable_lists__list_name_value: list_id.capitalize + } + ) + ) do |list| + list.with_header(title: list_id.capitalize) + move_items = { "Move to top" => "top", "Move up" => "up", "Move down" => "down", "Move to bottom" => "bottom" } + + titles.each do |title| + list.with_item( + data: { + controller: "sortable-lists--item", + sortable_lists__item_id_value: title.parameterize, + sortable_lists__item_type_value: "task", + sortable_lists__item_label_value: title + } + ) do + render(Primer::Box.new(display: :flex, align_items: :center)) do + concat( + render( + Primer::OpenProject::DragHandle.new( + classes: "handle", + mr: 2, + data: { sortable_lists__item_target: "handle" } + ) + ) + ) + concat(render(Primer::Beta::Text.new(flex: 1)) { title }) + concat( + render(Primer::Alpha::ActionMenu.new(anchor_align: :end)) do |menu| + menu.with_show_button(icon: "kebab-horizontal", "aria-label": "Actions for #{title}", scheme: :invisible) + menu.with_divider(data: { sortable_lists__item_target: "moveDivider" }) + move_items.each do |label, direction| + menu.with_item( + label:, + tag: :button, + data: { + sortable_lists__item_target: "moveItem", + sortable_lists__item_direction_param: direction, + action: "click->sortable-lists--item#move" + } + ) + end + end + ) + end + end + end + end + %> + <% end %> + <% end %> + <% end %> +diff --git a/lookbook/previews/patterns/sortable_lists_preview/single_list.html.erb b/lookbook/previews/patterns/sortable_lists_preview/single_list.html.erb new file mode 100644 index 000000000000..8cb8bd888168 --- /dev/null +++ b/lookbook/previews/patterns/sortable_lists_preview/single_list.html.erb @@ -0,0 +1,63 @@ ++ <%= + render( + OpenProject::Common::BorderBoxListComponent.new( + container: "sortable-lists-preview", + data: { + controller: "sortable-lists--list", + sortable_lists__list_type_value: "task", + sortable_lists__list_accepted_type_value: "task", + sortable_lists__list_name_value: "Tasks" + } + ) + ) do |list| + list.with_header(title: "Tasks") + move_items = { "Move to top" => "top", "Move up" => "up", "Move down" => "down", "Move to bottom" => "bottom" } + + ["Write the spec", "Review the design", "Ship it"].each_with_index do |title, index| + list.with_item( + data: { + controller: "sortable-lists--item", + sortable_lists__item_id_value: index + 1, + sortable_lists__item_type_value: "task", + sortable_lists__item_label_value: title + } + ) do + render(Primer::Box.new(display: :flex, align_items: :center)) do + concat( + render( + Primer::OpenProject::DragHandle.new( + classes: "handle", + mr: 2, + data: { sortable_lists__item_target: "handle" } + ) + ) + ) + concat(render(Primer::Beta::Text.new(flex: 1)) { title }) + concat( + render(Primer::Alpha::ActionMenu.new(anchor_align: :end)) do |menu| + menu.with_show_button(icon: "kebab-horizontal", "aria-label": "Actions for #{title}", scheme: :invisible) + menu.with_divider(data: { sortable_lists__item_target: "moveDivider" }) + move_items.each do |label, direction| + menu.with_item( + label:, + tag: :button, + data: { + sortable_lists__item_target: "moveItem", + sortable_lists__item_direction_param: direction, + action: "click->sortable-lists--item#move" + } + ) + end + end + ) + end + end + end + end + %> +