Extract helper for common code across columns
This commit is contained in:
Jorge Manrubia
@@ -9,9 +9,37 @@ module ColumnsHelper
|
||||
data: { turbo_frame: "_top" }
|
||||
end
|
||||
|
||||
def column_tag(id:, name:, drop_url:, collapsed: true, selected: nil, data: {}, **properties, &block)
|
||||
classes = token_list("cards", properties.delete(:class), "is-collapsed": collapsed)
|
||||
|
||||
data = {
|
||||
drag_and_drop_target: "container",
|
||||
navigable_list_target: "item",
|
||||
column_name: name,
|
||||
drag_and_drop_url: drop_url
|
||||
}.merge(data)
|
||||
|
||||
data[:action] = token_list(
|
||||
"turbo:before-morph-attribute->collapsible-columns#preventToggle",
|
||||
"focus->navigable-list#select",
|
||||
data.delete(:action)
|
||||
)
|
||||
|
||||
tag.section(id: id, class: classes, tabindex: "0", "aria-selected": selected, data: data, **properties) do
|
||||
tag.div(class: "cards__transition-container", data: {
|
||||
controller: "navigable-list",
|
||||
navigable_list_support_horizontal_navigation_value: "false",
|
||||
navigable_list_prevent_handled_keys_value: "true",
|
||||
navigable_list_auto_select_value: "false",
|
||||
navigable_list_actionable_items_value: "true",
|
||||
action: "keydown->navigable-list#navigate"
|
||||
}, &block)
|
||||
end
|
||||
end
|
||||
|
||||
def column_frame_tag(id, src: nil, data: {}, **options, &block)
|
||||
data = data.reverse_merge \
|
||||
"drag-and-drop-refresh": true,
|
||||
drag_and_drop_refresh: true,
|
||||
controller: "frame",
|
||||
action: "turbo:before-frame-render->frame#morphRender turbo:before-morph-element->frame#morphReload"
|
||||
options[:refresh] = :morph if src.present?
|
||||
|
||||
@@ -1,18 +1,12 @@
|
||||
<section id="closed-cards" class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-card-complete);"
|
||||
tabindex="0"
|
||||
data-drag-and-drop-target="container"
|
||||
data-drag-and-strum-target="container"
|
||||
data-collapsible-columns-target="column"
|
||||
data-navigable-list-target="item"
|
||||
data-column-name="Done"
|
||||
data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn focus->navigable-list#select"
|
||||
data-drag-and-drop-url="<%= columns_card_drops_closure_path("__id__") %>"
|
||||
>
|
||||
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-navigable-list-actionable-items-value="true" data-action="keydown->navigable-list#navigate">
|
||||
<header class="cards__header">
|
||||
<%= render "boards/show/expander", title: "Done", count: board.cards.closed.count, column_id: "closed-cards" %>
|
||||
<%= render "boards/show/menu/maximize", column_path: board_columns_closed_path(board) %>
|
||||
</header>
|
||||
<%= column_frame_tag :closed_column, src: board_columns_closed_path(board) %>
|
||||
</div>
|
||||
</section>
|
||||
<%= column_tag id: "closed-cards", name: "Done", drop_url: columns_card_drops_closure_path("__id__"), class: "cards--on-deck", style: "--card-color: var(--color-card-complete);",
|
||||
data: {
|
||||
drag_and_strum_target: "container",
|
||||
collapsible_columns_target: "column",
|
||||
action: "focus->collapsible-columns#focusOnColumn"
|
||||
} do %>
|
||||
<header class="cards__header">
|
||||
<%= render "boards/show/expander", title: "Done", count: board.cards.closed.count, column_id: "closed-cards" %>
|
||||
<%= render "boards/show/menu/maximize", column_path: board_columns_closed_path(board) %>
|
||||
</header>
|
||||
<%= column_frame_tag :closed_column, src: board_columns_closed_path(board) %>
|
||||
<% end %>
|
||||
|
||||
@@ -1,25 +1,18 @@
|
||||
<section id="<%= dom_id(column) %>"
|
||||
class="cards cards--doing is-collapsed" style="--card-color: <%= column.color %>;"
|
||||
tabindex="0"
|
||||
data-drag-and-drop-target="container"
|
||||
data-drag-and-strum-target="container"
|
||||
data-collapsible-columns-target="column"
|
||||
data-navigable-list-target="item"
|
||||
data-controller="clicker"
|
||||
data-column-name="<%= column.name %>"
|
||||
data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle turbo:before-stream-render@document->collapsible-columns#restoreState focus->collapsible-columns#focusOnColumn focus->navigable-list#select"
|
||||
data-drag-and-drop-url="<%= columns_card_drops_column_path("__id__", column_id: column.id) %>"
|
||||
>
|
||||
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-navigable-list-actionable-items-value="true" data-action="keydown->navigable-list#navigate">
|
||||
<header class="cards__header">
|
||||
<%= render "boards/show/menu/column", column: column %>
|
||||
<%= render "boards/show/expander", title: column.name, count: column.cards.active.count, column_id: dom_id(column) %>
|
||||
<%= column_tag id: dom_id(column), name: column.name, drop_url: columns_card_drops_column_path("__id__", column_id: column.id), class: "cards--doing", style: "--card-color: #{column.color};",
|
||||
data: {
|
||||
drag_and_strum_target: "container",
|
||||
collapsible_columns_target: "column",
|
||||
controller: "clicker",
|
||||
action: "turbo:before-stream-render@document->collapsible-columns#restoreState focus->collapsible-columns#focusOnColumn"
|
||||
} do %>
|
||||
<header class="cards__header">
|
||||
<%= render "boards/show/menu/column", column: column %>
|
||||
<%= render "boards/show/expander", title: column.name, count: column.cards.active.count, column_id: dom_id(column) %>
|
||||
|
||||
<%= link_to board_column_path(column.board, column), class: "cards__maximize-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>
|
||||
<%= icon_tag "grid", class: "translucent" %>
|
||||
<span class="for-screen-reader">Maximize column</span>
|
||||
<% end %>
|
||||
</header>
|
||||
<%= column_frame_tag dom_id(column, :cards), src: board_column_path(column.board, column) %>
|
||||
</div>
|
||||
</section>
|
||||
<%= link_to board_column_path(column.board, column), class: "cards__maximize-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>
|
||||
<%= icon_tag "grid", class: "translucent" %>
|
||||
<span class="for-screen-reader">Maximize column</span>
|
||||
<% end %>
|
||||
</header>
|
||||
<%= column_frame_tag dom_id(column, :cards), src: board_column_path(column.board, column) %>
|
||||
<% end %>
|
||||
|
||||
@@ -1,18 +1,12 @@
|
||||
<section id="not-now" class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-card-complete);"
|
||||
tabindex="0"
|
||||
data-collapsible-columns-target="column"
|
||||
data-drag-and-drop-target="container"
|
||||
data-drag-and-strum-target="container"
|
||||
data-navigable-list-target="item"
|
||||
data-column-name="Not Now"
|
||||
data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn focus->navigable-list#select"
|
||||
data-drag-and-drop-url="<%= columns_card_drops_not_now_path("__id__") %>"
|
||||
>
|
||||
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-navigable-list-actionable-items-value="true" data-action="keydown->navigable-list#navigate">
|
||||
<header class="cards__header">
|
||||
<%= render "boards/show/expander", title: "Not Now", count: board.cards.postponed.count, column_id: "not-now" %>
|
||||
<%= render "boards/show/menu/maximize", column_path: board_columns_not_now_path(board) %>
|
||||
</header>
|
||||
<%= column_frame_tag :not_now_column, src: board_columns_not_now_path(board) %>
|
||||
</div>
|
||||
</section>
|
||||
<%= column_tag id: "not-now", name: "Not Now", drop_url: columns_card_drops_not_now_path("__id__"), class: "cards--on-deck", style: "--card-color: var(--color-card-complete);",
|
||||
data: {
|
||||
collapsible_columns_target: "column",
|
||||
drag_and_strum_target: "container",
|
||||
action: "focus->collapsible-columns#focusOnColumn"
|
||||
} do %>
|
||||
<header class="cards__header">
|
||||
<%= render "boards/show/expander", title: "Not Now", count: board.cards.postponed.count, column_id: "not-now" %>
|
||||
<%= render "boards/show/menu/maximize", column_path: board_columns_not_now_path(board) %>
|
||||
</header>
|
||||
<%= column_frame_tag :not_now_column, src: board_columns_not_now_path(board) %>
|
||||
<% end %>
|
||||
|
||||
@@ -1,26 +1,17 @@
|
||||
<section id="the-stream" class="cards cards--considering"
|
||||
tabindex="0"
|
||||
data-drag-and-drop-target="container"
|
||||
data-navigable-list-target="item"
|
||||
data-column-name="Maybe?"
|
||||
data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->navigable-list#select"
|
||||
data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>"
|
||||
aria-selected="true">
|
||||
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-navigable-list-actionable-items-value="true" data-action="keydown->navigable-list#navigate">
|
||||
<header class="cards__header">
|
||||
<div class="cards__expander">
|
||||
<h2 class="cards__expander-title" data-collapsible-columns-target="title">Maybe?</h2>
|
||||
</div>
|
||||
<%= link_to board_columns_stream_path(board), class: "cards__maximize-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>
|
||||
<%= icon_tag "grid", class: "translucent" %>
|
||||
<span class="for-screen-reader">Expand column</span>
|
||||
<% end %>
|
||||
</header>
|
||||
<%= render "columns/show/add_card_button", board: board %>
|
||||
<% if page.used? %>
|
||||
<%= with_automatic_pagination "the-stream", @page do %>
|
||||
<%= render "boards/columns/list", cards: page.records, draggable: true %>
|
||||
<% end %>
|
||||
<%= column_tag id: "the-stream", name: "Maybe?", drop_url: columns_card_drops_stream_path("__id__"), collapsed: false, selected: "true", class: "cards--considering" do %>
|
||||
<header class="cards__header">
|
||||
<div class="cards__expander">
|
||||
<h2 class="cards__expander-title" data-collapsible-columns-target="title">Maybe?</h2>
|
||||
</div>
|
||||
<%= link_to board_columns_stream_path(board), class: "cards__maximize-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>
|
||||
<%= icon_tag "grid", class: "translucent" %>
|
||||
<span class="for-screen-reader">Expand column</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
<%= render "columns/show/add_card_button", board: board %>
|
||||
<% if page.used? %>
|
||||
<%= with_automatic_pagination "the-stream", @page do %>
|
||||
<%= render "boards/columns/list", cards: page.records, draggable: true %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
Reference in New Issue
Block a user