From 37e9c5461c092aee36f53cb8cc66b4f4b1dec56a Mon Sep 17 00:00:00 2001 From: david Date: Mon, 11 Nov 2024 06:01:19 +0100 Subject: [PATCH] Sortable handles --- app/assets/stylesheets/layout.scss | 4 ++++ app/javascript/controllers/sortable_controller.js | 14 ++++++++++---- app/views/elements/_element.html.erb | 2 +- app/views/elements/_page_nav_row.html.slim | 4 +++- app/views/reports/_page_nav.html.slim | 5 +++-- app/views/success_criteria/_header.html.slim | 7 +++---- 6 files changed, 24 insertions(+), 12 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 7aa69a6..5d29752 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -306,4 +306,8 @@ details.tree { .sc-level-aaa { background-color: $purple; +} + +.handle { + cursor: move; } \ No newline at end of file diff --git a/app/javascript/controllers/sortable_controller.js b/app/javascript/controllers/sortable_controller.js index 0df3a14..1288e30 100644 --- a/app/javascript/controllers/sortable_controller.js +++ b/app/javascript/controllers/sortable_controller.js @@ -6,16 +6,22 @@ import { put } from "@rails/request.js"; export default class extends Controller { linkedElement = null connect() { - this.element.style.cursor = "grab" + // this.element.style.cursor = "grab" if (this.element.dataset["linkedElementId"]) { this.linkedElement = document.getElementById(this.element.dataset["linkedElementId"]) } - new Sortable(this.element, { - group: this.groupValue, + let draggableSelector = ".item" + if (this.element.dataset["draggableSelector"]) { + draggableSelector = this.element.dataset["draggableSelector"] + } + console.log(draggableSelector, new Sortable(this.element, { + // group: this.groupValue, onEnd: this.onEndFactory(this.linkedElement), - }) + handle: ".handle", + // draggable: draggableSelector, + })) } onEndFactory(linkedElement) { diff --git a/app/views/elements/_element.html.erb b/app/views/elements/_element.html.erb index 6649226..346648f 100644 --- a/app/views/elements/_element.html.erb +++ b/app/views/elements/_element.html.erb @@ -27,7 +27,7 @@

<% end %> -
+
<% element.success_criteria.each do |sc| %> <%= render sc %> <% end %> diff --git a/app/views/elements/_page_nav_row.html.slim b/app/views/elements/_page_nav_row.html.slim index d1d4bb2..29713b4 100644 --- a/app/views/elements/_page_nav_row.html.slim +++ b/app/views/elements/_page_nav_row.html.slim @@ -4,8 +4,10 @@ li id=dom_id(element, :page_nav_row) data={ "sortable-url": element_path(element i.bi.bi-boxes.me-2 span id=dom_id(element, :page_nav_title) = "#{element.number} #{element.title}" + i.bi.bi-grip-vertical.float-end.handle - else =< link_to(report_path(element.report, page_id: element.page.id, anchor: dom_id(element)), data: { "turbo": false }) do i.bi.bi-boxes.me-2 span id=dom_id(element, :page_nav_title) - =< "#{element.number} #{element.title}" \ No newline at end of file + =< "#{element.number} #{element.title}" + i.bi.bi-grip-vertical.float-end.handle \ No newline at end of file diff --git a/app/views/reports/_page_nav.html.slim b/app/views/reports/_page_nav.html.slim index bfea6bf..a1f3c4d 100644 --- a/app/views/reports/_page_nav.html.slim +++ b/app/views/reports/_page_nav.html.slim @@ -14,14 +14,15 @@ - is_current = current_page == page li data={ "sortable-url": page_path(page), "form-name": "page", "position-attribute": "position" } details.tree open=current_page_displayed(page) class="" - summary class=(is_current ? "active" : nil) - .content + summary.d-flex class=(is_current ? "active" : nil) + .content.flex-fill i.bi.me-1 class="bi-file-earmark-check#{is_current ? "" : "" }" - if is_current span id=dom_id(page, :title) =< "#{page.position} #{page.path}" - else =< link_to(report_path(report, page_id: page.id), data: { "turbo-frame": :_top }) do span id=dom_id(page, :title) =< "#{page.position} #{page.path}" + i.bi.bi-grip-vertical.align-self-end.handle ul id=dom_id(page, :page_nav_elements) data={ controller: "sortable", "linked-element-id": "element_list" } - page.elements.each do |element| = render partial: "elements/page_nav_row", locals: { element: element, current_page: current_page == element.page } diff --git a/app/views/success_criteria/_header.html.slim b/app/views/success_criteria/_header.html.slim index 9d52067..a27c7be 100644 --- a/app/views/success_criteria/_header.html.slim +++ b/app/views/success_criteria/_header.html.slim @@ -1,9 +1,9 @@ - edit_mode = action_name == "edit" summary.d-flex.align-items-start id=dom_id(success_criterion, :header) - .content.d-flex.align-items-center + .content.d-flex.align-items-center.w-100 .result-icon.flex-shrink-0 class=[success_criterion_result_color_classes(success_criterion)] span.h1.bi class=[success_criterion_result_icon_classes(success_criterion)] - .fs- + .flex-fill span id=dom_id(success_criterion, :position) = success_criterion.page.position | . @@ -19,5 +19,4 @@ summary.d-flex.align-items-start id=dom_id(success_criterion, :header) = success_criterion_badge(success_criterion.check.external_number, extra_classes: "text-bg-info me-1") = success_criterion_badge(success_criterion.level, extra_classes: "sc-level-#{success_criterion.level.to_s.downcase} me-1") - - \ No newline at end of file + i.bi.bi-grip-vertical.handle \ No newline at end of file