From a70fcf92321968da7f34fe7b783dfc70a57508ac Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Thu, 19 Dec 2024 18:37:18 +0100 Subject: [PATCH 1/6] chore(admin): Add prettier config This allows to run prettier in your editor --- admin/.prettierrc | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 admin/.prettierrc diff --git a/admin/.prettierrc b/admin/.prettierrc new file mode 100644 index 0000000000..cc4e915353 --- /dev/null +++ b/admin/.prettierrc @@ -0,0 +1,4 @@ +{ + "trailingComma": "es5", + "semi": false +} From 4f79ff7e74aa687c9e467da460fe895fc417190f Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Thu, 19 Dec 2024 18:47:20 +0100 Subject: [PATCH 2/6] chore(Admin): Run prettier on js files Adjust the syntax of all admin js files to prettier config. --- .../layout/navigation/component.js | 2 +- .../orders/show/address/component.js | 4 +-- .../solidus_admin/orders/show/component.js | 4 +-- .../orders/show/customer_search/component.js | 9 ++--- .../stock_items/edit/component.js | 7 ++-- .../solidus_admin/ui/dropdown/component.js | 6 ++-- .../ui/forms/address/component.js | 11 +++--- .../solidus_admin/ui/forms/input/component.js | 7 ++-- .../solidus_admin/ui/modal/component.js | 4 +-- .../solidus_admin/ui/table/component.js | 28 +++++++-------- .../ui/table/ransack_filter/component.js | 34 ++++++++++--------- .../solidus_admin/ui/toast/component.js | 6 ++-- .../solidus_admin/ui/toggletip/component.js | 26 +++++++------- .../users/store_credits/index/component.js | 4 +-- .../users/store_credits/show/component.js | 4 +-- 15 files changed, 78 insertions(+), 78 deletions(-) diff --git a/admin/app/components/solidus_admin/layout/navigation/component.js b/admin/app/components/solidus_admin/layout/navigation/component.js index a88d49caec..7ec21ab73f 100644 --- a/admin/app/components/solidus_admin/layout/navigation/component.js +++ b/admin/app/components/solidus_admin/layout/navigation/component.js @@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus" export default class extends Controller { static values = { - cookie: String + cookie: String, } setCookie(event) { diff --git a/admin/app/components/solidus_admin/orders/show/address/component.js b/admin/app/components/solidus_admin/orders/show/address/component.js index ebb6df4ab3..fdf4c09f9e 100644 --- a/admin/app/components/solidus_admin/orders/show/address/component.js +++ b/admin/app/components/solidus_admin/orders/show/address/component.js @@ -1,9 +1,9 @@ -import { Controller } from '@hotwired/stimulus' +import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["addresses"] close() { - this.addressesTarget.removeAttribute('open') + this.addressesTarget.removeAttribute("open") } } diff --git a/admin/app/components/solidus_admin/orders/show/component.js b/admin/app/components/solidus_admin/orders/show/component.js index 8de1e56f47..6a8ce2ae8c 100644 --- a/admin/app/components/solidus_admin/orders/show/component.js +++ b/admin/app/components/solidus_admin/orders/show/component.js @@ -1,7 +1,7 @@ -import { Controller } from '@hotwired/stimulus' +import { Controller } from "@hotwired/stimulus" export default class extends Controller { closeMenus() { - this.element.querySelectorAll('details').forEach(details => details.removeAttribute('open')) + this.element.querySelectorAll("details").forEach((details) => details.removeAttribute("open")) } } diff --git a/admin/app/components/solidus_admin/orders/show/customer_search/component.js b/admin/app/components/solidus_admin/orders/show/customer_search/component.js index 68e6b65b05..4dd4d7885b 100644 --- a/admin/app/components/solidus_admin/orders/show/customer_search/component.js +++ b/admin/app/components/solidus_admin/orders/show/customer_search/component.js @@ -1,14 +1,15 @@ -import { Controller } from '@hotwired/stimulus' +import { Controller } from "@hotwired/stimulus" export default class extends Controller { static values = { customersUrl: String } async search({ detail: { query, controller } }) { - controller.resultsValue = - (await (await fetch(`${this.customersUrlValue}?q[name_or_variants_including_master_sku_cont]=${query}`)).text()) + controller.resultsValue = await ( + await fetch(`${this.customersUrlValue}?q[name_or_variants_including_master_sku_cont]=${query}`) + ).text() } submit(event) { - event.detail.resultTarget.querySelector('form').submit() + event.detail.resultTarget.querySelector("form").submit() } } diff --git a/admin/app/components/solidus_admin/stock_items/edit/component.js b/admin/app/components/solidus_admin/stock_items/edit/component.js index 6181ca0e90..74290149be 100644 --- a/admin/app/components/solidus_admin/stock_items/edit/component.js +++ b/admin/app/components/solidus_admin/stock_items/edit/component.js @@ -1,17 +1,18 @@ -import { Controller } from '@hotwired/stimulus' +import { Controller } from "@hotwired/stimulus" export default class extends Controller { static values = { initialCountOnHand: Number, } - static targets = ['countOnHand', 'quantityAdjustment'] + static targets = ["countOnHand", "quantityAdjustment"] connect() { this.updateCountOnHand() } updateCountOnHand() { - this.countOnHandTarget.value = parseInt(this.initialCountOnHandValue) + parseInt(this.quantityAdjustmentTarget.value) + this.countOnHandTarget.value = + parseInt(this.initialCountOnHandValue) + parseInt(this.quantityAdjustmentTarget.value) } } diff --git a/admin/app/components/solidus_admin/ui/dropdown/component.js b/admin/app/components/solidus_admin/ui/dropdown/component.js index 82080b800a..23a83937d3 100644 --- a/admin/app/components/solidus_admin/ui/dropdown/component.js +++ b/admin/app/components/solidus_admin/ui/dropdown/component.js @@ -1,5 +1,5 @@ -import { Controller } from '@hotwired/stimulus' -import { useClickOutside } from 'stimulus-use' +import { Controller } from "@hotwired/stimulus" +import { useClickOutside } from "stimulus-use" export default class extends Controller { connect() { @@ -11,6 +11,6 @@ export default class extends Controller { } close() { - this.element.removeAttribute('open') + this.element.removeAttribute("open") } } diff --git a/admin/app/components/solidus_admin/ui/forms/address/component.js b/admin/app/components/solidus_admin/ui/forms/address/component.js index c39c7cd161..cf54de223b 100644 --- a/admin/app/components/solidus_admin/ui/forms/address/component.js +++ b/admin/app/components/solidus_admin/ui/forms/address/component.js @@ -1,4 +1,4 @@ -import { Controller } from '@hotwired/stimulus' +import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["country", "state", "stateName", "stateWrapper", "stateNameWrapper"] @@ -7,8 +7,8 @@ export default class extends Controller { const countryId = this.countryTarget.value fetch(`/admin/countries/${countryId}/states`) - .then(response => response.json()) - .then(data => { + .then((response) => response.json()) + .then((data) => { this.updateStateOptions(data) }) } @@ -30,13 +30,12 @@ export default class extends Controller { const stateSelect = this.stateTarget const stateName = this.stateNameTarget - if (showSelect) { // Show state select dropdown. stateSelect.disabled = false stateName.value = "" - stateWrapper.classList.remove('hidden') - stateNameWrapper.classList.add('hidden') + stateWrapper.classList.remove("hidden") + stateNameWrapper.classList.add("hidden") } else { // Show state name text input if no states to choose from. stateSelect.disabled = true diff --git a/admin/app/components/solidus_admin/ui/forms/input/component.js b/admin/app/components/solidus_admin/ui/forms/input/component.js index 44ff79b03b..e9f1060779 100644 --- a/admin/app/components/solidus_admin/ui/forms/input/component.js +++ b/admin/app/components/solidus_admin/ui/forms/input/component.js @@ -1,4 +1,4 @@ -import { Controller } from '@hotwired/stimulus' +import { Controller } from "@hotwired/stimulus" export default class extends Controller { static values = { @@ -6,11 +6,10 @@ export default class extends Controller { } connect() { - if (this.customValidityValue) - this.element.setCustomValidity(this.customValidityValue) + if (this.customValidityValue) this.element.setCustomValidity(this.customValidityValue) } clearCustomValidity() { - this.element.setCustomValidity('') + this.element.setCustomValidity("") } } diff --git a/admin/app/components/solidus_admin/ui/modal/component.js b/admin/app/components/solidus_admin/ui/modal/component.js index 3d9ec5c408..193ad2b6fd 100644 --- a/admin/app/components/solidus_admin/ui/modal/component.js +++ b/admin/app/components/solidus_admin/ui/modal/component.js @@ -1,7 +1,7 @@ -import { Controller } from "@hotwired/stimulus"; +import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { - this.element.showModal(); + this.element.showModal() } } diff --git a/admin/app/components/solidus_admin/ui/table/component.js b/admin/app/components/solidus_admin/ui/table/component.js index 66837d4ce7..746c859f16 100644 --- a/admin/app/components/solidus_admin/ui/table/component.js +++ b/admin/app/components/solidus_admin/ui/table/component.js @@ -36,9 +36,9 @@ export default class extends Controller { const shouldSetSortable = this.sortableValue && this.modeValue !== "batch" && this.modeValue !== "search" if (shouldSetSortable) { - this.tableBodyTarget.setAttribute('data-controller', 'sortable') + this.tableBodyTarget.setAttribute("data-controller", "sortable") } else { - this.tableBodyTarget.removeAttribute('data-controller') + this.tableBodyTarget.removeAttribute("data-controller") } } @@ -54,13 +54,13 @@ export default class extends Controller { } clearSearch() { - this.searchFieldTarget.value = '' + this.searchFieldTarget.value = "" this.search() } resetSearchAndFilters() { if (this.hasFilterToolbarTarget) { - this.filterToolbarTarget.querySelectorAll('fieldset').forEach(fieldset => fieldset.disabled = true) + this.filterToolbarTarget.querySelectorAll("fieldset").forEach((fieldset) => (fieldset.disabled = true)) } this.searchFieldTarget.disabled = true @@ -70,7 +70,7 @@ export default class extends Controller { selectRow(event) { if (this.checkboxTargets.some((checkbox) => checkbox.checked)) { this.modeValue = "batch" - } else if (this.hasSearchFieldTarget && (this.searchFieldTarget.value !== '')) { + } else if (this.hasSearchFieldTarget && this.searchFieldTarget.value !== "") { this.modeValue = "search" } else if (this.hasScopesToolbarTarget) { this.modeValue = "scopes" @@ -84,7 +84,7 @@ export default class extends Controller { selectAllRows(event) { if (event.target.checked) { this.modeValue = "batch" - } else if (this.hasSearchFieldTarget && (this.searchFieldTarget.value !== '')) { + } else if (this.hasSearchFieldTarget && this.searchFieldTarget.value !== "") { this.modeValue = "search" } else if (this.hasScopesToolbarTarget) { this.modeValue = "scopes" @@ -106,10 +106,10 @@ export default class extends Controller { } else { const url = new URL(event.params.url, "http://dummy.com") const params = new URLSearchParams(url.search) - const frameId = params.get('_turbo_frame') + const frameId = params.get("_turbo_frame") const frame = frameId ? { frame: frameId } : {} // remove the custom _turbo_frame param from url search: - params.delete('_turbo_frame') + params.delete("_turbo_frame") url.search = params.toString() window.Turbo.visit(url.pathname + url.search, frame) @@ -117,7 +117,7 @@ export default class extends Controller { } toggleCheckbox(row) { - const checkbox = this.checkboxTargets.find(selection => row.contains(selection)) + const checkbox = this.checkboxTargets.find((selection) => row.contains(selection)) if (checkbox) { checkbox.checked = !checkbox.checked @@ -131,14 +131,10 @@ export default class extends Controller { confirmAction(event) { const message = event.params.message + .replace("${count}", this.selectedRows().length) .replace( - "${count}", - this.selectedRows().length - ).replace( "${resource}", - this.selectedRows().length > 1 ? - event.params.resourcePlural : - event.params.resourceSingular + this.selectedRows().length > 1 ? event.params.resourcePlural : event.params.resourceSingular ) if (!confirm(message)) { @@ -167,7 +163,7 @@ export default class extends Controller { // Update the rows background color this.checkboxTargets.filter((checkbox) => - checkbox.closest("tr").classList.toggle(this.selectedRowClass, checkbox.checked), + checkbox.closest("tr").classList.toggle(this.selectedRowClass, checkbox.checked) ) // Update the selected rows count diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js index fdbc336f8b..29f886d2c2 100644 --- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js +++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js @@ -1,11 +1,11 @@ -import { Controller } from '@hotwired/stimulus' -import { useClickOutside, useDebounce } from 'stimulus-use' +import { Controller } from "@hotwired/stimulus" +import { useClickOutside, useDebounce } from "stimulus-use" -const BG_GRAY = 'bg-gray-100' +const BG_GRAY = "bg-gray-100" export default class extends Controller { - static targets = ['details', 'summary', 'option', 'checkbox', 'menu'] - static debounces = ['init'] + static targets = ["details", "summary", "option", "checkbox", "menu"] + static debounces = ["init"] connect() { useDebounce(this, { wait: 50 }) @@ -37,7 +37,7 @@ export default class extends Controller { filterOptions(event) { const query = event.currentTarget.value.toLowerCase() this.optionTargets.forEach((option) => { - option.style.display = option.textContent.toLowerCase().includes(query) ? 'block' : 'none' + option.style.display = option.textContent.toLowerCase().includes(query) ? "block" : "none" }) } @@ -50,24 +50,26 @@ export default class extends Controller { this.checkboxTargets.forEach((checkbox) => { const hiddenElements = checkbox.parentElement.querySelectorAll("input[type='hidden']") checkbox.checked - ? hiddenElements.forEach(e => e.removeAttribute("disabled")) - : hiddenElements.forEach(e => e.setAttribute("disabled", true)) + ? hiddenElements.forEach((e) => e.removeAttribute("disabled")) + : hiddenElements.forEach((e) => e.setAttribute("disabled", true)) }) } sortCheckboxes() { const checkboxes = this.checkboxTargets - checkboxes.sort((a, b) => { - if (a.checked && !b.checked) return -1 - if (!a.checked && b.checked) return 1 - return 0 - }).forEach(checkbox => { - this.menuTarget.appendChild(checkbox.closest('div')) - }) + checkboxes + .sort((a, b) => { + if (a.checked && !b.checked) return -1 + if (!a.checked && b.checked) return 1 + return 0 + }) + .forEach((checkbox) => { + this.menuTarget.appendChild(checkbox.closest("div")) + }) } isAnyCheckboxChecked() { - return this.checkboxTargets.some(checkbox => checkbox.checked) + return this.checkboxTargets.some((checkbox) => checkbox.checked) } } diff --git a/admin/app/components/solidus_admin/ui/toast/component.js b/admin/app/components/solidus_admin/ui/toast/component.js index b8ecfcdf4d..de1cecf864 100644 --- a/admin/app/components/solidus_admin/ui/toast/component.js +++ b/admin/app/components/solidus_admin/ui/toast/component.js @@ -1,8 +1,8 @@ -import { Controller } from '@hotwired/stimulus' +import { Controller } from "@hotwired/stimulus" export default class extends Controller { - static targets = ['closeButton'] - static classes = ['animation'] + static targets = ["closeButton"] + static classes = ["animation"] static values = { transition: Number } connect() { diff --git a/admin/app/components/solidus_admin/ui/toggletip/component.js b/admin/app/components/solidus_admin/ui/toggletip/component.js index ec04b795ad..0b7d78a468 100644 --- a/admin/app/components/solidus_admin/ui/toggletip/component.js +++ b/admin/app/components/solidus_admin/ui/toggletip/component.js @@ -1,30 +1,30 @@ -import { Controller } from '@hotwired/stimulus' -import { useClickOutside } from 'stimulus-use' +import { Controller } from "@hotwired/stimulus" +import { useClickOutside } from "stimulus-use" export default class extends Controller { - static targets = ['bubble'] + static targets = ["bubble"] - connect () { + connect() { useClickOutside(this) this.open = false } - clickOutside () { + clickOutside() { this.close() } - toggle (e) { + toggle(e) { e.preventDefault() this.open = !this.open this.render() } - open () { + open() { this.open = true this.render() } - close () { + close() { this.open = false this.render() } @@ -35,10 +35,12 @@ export default class extends Controller { if (needsPositioning) { const bubbleRect = this.bubbleTarget.getBoundingClientRect() - if (bubbleRect.right > window.innerWidth) this.bubbleTarget.style.left = `${window.innerWidth - bubbleRect.width}px` - if (bubbleRect.bottom > window.innerHeight) this.bubbleTarget.style.top = `${window.innerHeight - bubbleRect.height}px` - if (bubbleRect.left < 0) this.bubbleTarget.style.left = '0px' - if (bubbleRect.top < 0) this.bubbleTarget.style.top = '0px' + if (bubbleRect.right > window.innerWidth) + this.bubbleTarget.style.left = `${window.innerWidth - bubbleRect.width}px` + if (bubbleRect.bottom > window.innerHeight) + this.bubbleTarget.style.top = `${window.innerHeight - bubbleRect.height}px` + if (bubbleRect.left < 0) this.bubbleTarget.style.left = "0px" + if (bubbleRect.top < 0) this.bubbleTarget.style.top = "0px" } } } diff --git a/admin/app/components/solidus_admin/users/store_credits/index/component.js b/admin/app/components/solidus_admin/users/store_credits/index/component.js index b6f7437145..18d886a69a 100644 --- a/admin/app/components/solidus_admin/users/store_credits/index/component.js +++ b/admin/app/components/solidus_admin/users/store_credits/index/component.js @@ -4,10 +4,10 @@ export default class extends Controller { actionButtonClicked(event) { const url = new URL(event.params.url, "http://dummy.com") const params = new URLSearchParams(url.search) - const frameId = params.get('_turbo_frame') + const frameId = params.get("_turbo_frame") const frame = frameId ? { frame: frameId } : {} // remove the custom _turbo_frame param from url search: - params.delete('_turbo_frame') + params.delete("_turbo_frame") url.search = params.toString() window.Turbo.visit(url.pathname + url.search, frame) diff --git a/admin/app/components/solidus_admin/users/store_credits/show/component.js b/admin/app/components/solidus_admin/users/store_credits/show/component.js index b6f7437145..18d886a69a 100644 --- a/admin/app/components/solidus_admin/users/store_credits/show/component.js +++ b/admin/app/components/solidus_admin/users/store_credits/show/component.js @@ -4,10 +4,10 @@ export default class extends Controller { actionButtonClicked(event) { const url = new URL(event.params.url, "http://dummy.com") const params = new URLSearchParams(url.search) - const frameId = params.get('_turbo_frame') + const frameId = params.get("_turbo_frame") const frame = frameId ? { frame: frameId } : {} // remove the custom _turbo_frame param from url search: - params.delete('_turbo_frame') + params.delete("_turbo_frame") url.search = params.toString() window.Turbo.visit(url.pathname + url.search, frame) From b13d7cc4bc78f1109d9608bde72c5fe80494bd6d Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Thu, 19 Dec 2024 18:11:26 +0100 Subject: [PATCH 3/6] feat(admin): Add pages index Stimulus controller This controller provides a openModal action that we can use to load the modal remotely instead of returning the whole index page with the table rendered below the modal. Currently no page uses this, but it can be implemented page by page. --- .../components/solidus_admin/layout/page_helpers.rb | 2 +- .../solidus_admin/ui/pages/index/component.html.erb | 2 +- .../solidus_admin/ui/pages/index/component.js | 10 ++++++++++ .../solidus_admin/ui/pages/index/component.rb | 4 ++++ 4 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 admin/app/components/solidus_admin/ui/pages/index/component.js diff --git a/admin/app/components/solidus_admin/layout/page_helpers.rb b/admin/app/components/solidus_admin/layout/page_helpers.rb index 47bffa1f50..b13c094345 100644 --- a/admin/app/components/solidus_admin/layout/page_helpers.rb +++ b/admin/app/components/solidus_admin/layout/page_helpers.rb @@ -2,7 +2,7 @@ module SolidusAdmin::Layout::PageHelpers def page(**attrs, &block) - tag.div(capture(&block), class: "px-4 relative", "data-controller": stimulus_id, **attrs) + + tag.div(capture(&block), class: "px-4 relative", "data-controller": attrs.fetch(:stimulus_id, stimulus_id), **attrs) + tag.div(render(component("layout/feedback").new), class: "flex justify-center py-10") end diff --git a/admin/app/components/solidus_admin/ui/pages/index/component.html.erb b/admin/app/components/solidus_admin/ui/pages/index/component.html.erb index 69916f08dd..0717b892d9 100644 --- a/admin/app/components/solidus_admin/ui/pages/index/component.html.erb +++ b/admin/app/components/solidus_admin/ui/pages/index/component.html.erb @@ -1,4 +1,4 @@ -<%= page do %> +<%= page "data-controller": stimulus_id do %> <% if @tabs %> <%= page_header do %> <%= render_title %> diff --git a/admin/app/components/solidus_admin/ui/pages/index/component.js b/admin/app/components/solidus_admin/ui/pages/index/component.js new file mode 100644 index 0000000000..a56a351670 --- /dev/null +++ b/admin/app/components/solidus_admin/ui/pages/index/component.js @@ -0,0 +1,10 @@ +import { Controller } from "@hotwired/stimulus"; + +export default class extends Controller { + async openModal(event) { + event.preventDefault(); + const url = event.target.href; + const response = await fetch(url); + document.body.insertAdjacentHTML("beforeend", await response.text()); + } +} diff --git a/admin/app/components/solidus_admin/ui/pages/index/component.rb b/admin/app/components/solidus_admin/ui/pages/index/component.rb index ad6cd5b509..6bf4ed2546 100644 --- a/admin/app/components/solidus_admin/ui/pages/index/component.rb +++ b/admin/app/components/solidus_admin/ui/pages/index/component.rb @@ -20,6 +20,10 @@ def scopes; []; end def filters; []; end def columns; []; end + def self.stimulus_id + "ui--pages--index" + end + def initialize(page:) @page = page @tabs = tabs&.map { |tab| Tab.new(**tab) } From b83936303883bb4b66f3ee61a710a10cb64c1b9c Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Thu, 19 Dec 2024 18:18:02 +0100 Subject: [PATCH 4/6] feat(admin/ui/modal): Add close action This removes the dialog element from the dom after closing it. Combined with the new pages index controller we can open and close modals without leaving the page. Much faster and less round trips. --- .../components/solidus_admin/ui/modal/component.html.erb | 2 +- admin/app/components/solidus_admin/ui/modal/component.js | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/admin/app/components/solidus_admin/ui/modal/component.html.erb b/admin/app/components/solidus_admin/ui/modal/component.html.erb index 8b40816125..b26b2fc3bb 100644 --- a/admin/app/components/solidus_admin/ui/modal/component.html.erb +++ b/admin/app/components/solidus_admin/ui/modal/component.html.erb @@ -6,7 +6,7 @@ **@attributes ) %> > - +
diff --git a/admin/app/components/solidus_admin/ui/modal/component.js b/admin/app/components/solidus_admin/ui/modal/component.js index 193ad2b6fd..f993485818 100644 --- a/admin/app/components/solidus_admin/ui/modal/component.js +++ b/admin/app/components/solidus_admin/ui/modal/component.js @@ -3,5 +3,14 @@ import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { this.element.showModal() + this.element.addEventListener("close", () => this.removeModal()) + } + + close() { + this.element.close() + } + + removeModal() { + this.element.remove() } } From b0a64652bf3348c7c5166f976be0a823852df62a Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Thu, 19 Dec 2024 18:56:02 +0100 Subject: [PATCH 5/6] fix(admin/table): Only add rowClicked action if rowUrl is present If a table has no rowUrl defined we currently redirect to root path. Which is not preferable. We should do nothing instead. --- .../components/solidus_admin/ui/table/component.html.erb | 7 ++++--- admin/app/components/solidus_admin/ui/table/component.js | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/admin/app/components/solidus_admin/ui/table/component.html.erb b/admin/app/components/solidus_admin/ui/table/component.html.erb index 69a155cd66..dd6f1a04be 100644 --- a/admin/app/components/solidus_admin/ui/table/component.html.erb +++ b/admin/app/components/solidus_admin/ui/table/component.html.erb @@ -137,11 +137,12 @@ <%= "data-sortable-animation-value=#{@sortable.animation}" if @sortable&.animation %> > <% @data.rows.each do |row| %> + <% rowUrl = @data.url.call(row) %> + class="border-b border-gray-100 last:border-0 <%= 'hover:bg-gray-50 cursor-pointer' if rowUrl %> <%= 'bg-gray-15 text-gray-700' if @data.fade&.call(row) %>" + <% if rowUrl %> data-action="click-><%= stimulus_id %>#rowClicked" - data-<%= stimulus_id %>-url-param="<%= @data.url.call(row) %>" + data-<%= stimulus_id %>-url-param="<%= rowUrl %>" <%= "data-sortable-url=#{@sortable.url.call(row)}" if @sortable&.url %> <% end %> > diff --git a/admin/app/components/solidus_admin/ui/table/component.js b/admin/app/components/solidus_admin/ui/table/component.js index 746c859f16..e98f470855 100644 --- a/admin/app/components/solidus_admin/ui/table/component.js +++ b/admin/app/components/solidus_admin/ui/table/component.js @@ -103,7 +103,7 @@ export default class extends Controller { if (this.modeValue === "batch") { this.toggleCheckbox(event.currentTarget) - } else { + } else if (event.params.url) { const url = new URL(event.params.url, "http://dummy.com") const params = new URLSearchParams(url.search) const frameId = params.get("_turbo_frame") From ae95308d0f6c55b883e9a5e244d2c9cef95e273e Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Thu, 19 Dec 2024 20:41:59 +0100 Subject: [PATCH 6/6] feat(admin/shipping_categories): Load modal remotely This is actual links to open the new and edit forms in the modal dialog remotely. --- .../edit/component.html.erb | 5 ++- .../shipping_categories/index/component.rb | 34 +++++++------------ .../new/component.html.erb | 6 ++-- .../shipping_categories_controller.rb | 8 +++-- .../spec/features/shipping_categories_spec.rb | 6 ++-- 5 files changed, 26 insertions(+), 33 deletions(-) diff --git a/admin/app/components/solidus_admin/shipping_categories/edit/component.html.erb b/admin/app/components/solidus_admin/shipping_categories/edit/component.html.erb index 88185925b3..f5119fa971 100644 --- a/admin/app/components/solidus_admin/shipping_categories/edit/component.html.erb +++ b/admin/app/components/solidus_admin/shipping_categories/edit/component.html.erb @@ -1,5 +1,5 @@ -<%= turbo_frame_tag :edit_shipping_category_modal do %> - <%= render component("ui/modal").new(title: t(".title")) do |modal| %> +<%= render component("ui/modal").new(title: t(".title")) do |modal| %> + <%= turbo_frame_tag :edit_shipping_category_modal do %> <%= form_for @shipping_category, url: solidus_admin.shipping_category_path(@shipping_category), html: { id: form_id } do |f| %>
<%= render component("ui/forms/field").text_field(f, :name) %> @@ -13,4 +13,3 @@ <% end %> <% end %> <% end %> -<%= render component("shipping_categories/index").new(page: @page) %> diff --git a/admin/app/components/solidus_admin/shipping_categories/index/component.rb b/admin/app/components/solidus_admin/shipping_categories/index/component.rb index 4253dcec01..1ac8b0ae49 100644 --- a/admin/app/components/solidus_admin/shipping_categories/index/component.rb +++ b/admin/app/components/solidus_admin/shipping_categories/index/component.rb @@ -5,35 +5,20 @@ def model_class Spree::ShippingCategory end - def actions - render component("ui/button").new( - tag: :a, - text: t('.add'), - href: spree.new_admin_shipping_category_path, - icon: "add-line", - class: "align-self-end w-full", - ) - end - def page_actions render component("ui/button").new( tag: :a, text: t('.add'), - href: solidus_admin.new_shipping_category_path, data: { turbo_frame: :new_shipping_category_modal }, + href: solidus_admin.new_shipping_category_path, data: { + action: "click->ui--pages--index#openModal" + }, icon: "add-line", class: "align-self-end w-full", ) end - def turbo_frames - %w[ - new_shipping_category_modal - edit_shipping_category_modal - ] - end - - def row_url(shipping_category) - spree.edit_admin_shipping_category_path(shipping_category, _turbo_frame: :edit_shipping_category_modal) + def edit_url(shipping_category) + spree.edit_admin_shipping_category_path(shipping_category) end def search_key @@ -57,7 +42,14 @@ def batch_actions def columns [ - :name + { + header: :name, + data: ->(shipping_category) do + link_to shipping_category.name, edit_url(shipping_category), + data: { action: "click->ui--pages--index#openModal" }, + class: "body-link" + end + }, ] end end diff --git a/admin/app/components/solidus_admin/shipping_categories/new/component.html.erb b/admin/app/components/solidus_admin/shipping_categories/new/component.html.erb index e3cf3a7593..fb3e207cb0 100644 --- a/admin/app/components/solidus_admin/shipping_categories/new/component.html.erb +++ b/admin/app/components/solidus_admin/shipping_categories/new/component.html.erb @@ -1,5 +1,5 @@ -<%= turbo_frame_tag :new_shipping_category_modal do %> - <%= render component("ui/modal").new(title: t(".title")) do |modal| %> +<%= render component("ui/modal").new(title: t(".title")) do |modal| %> + <%= turbo_frame_tag :new_shipping_category_modal do %> <%= form_for @shipping_category, url: solidus_admin.shipping_categories_path(page: params[:page], q: params[:q]), html: { id: form_id } do |f| %>
<%= render component("ui/forms/field").text_field(f, :name) %> @@ -13,5 +13,3 @@ <% end %> <% end %> <% end %> - -<%= render component("shipping_categories/index").new(page: @page) %> diff --git a/admin/app/controllers/solidus_admin/shipping_categories_controller.rb b/admin/app/controllers/solidus_admin/shipping_categories_controller.rb index a7a58686da..3f60371890 100644 --- a/admin/app/controllers/solidus_admin/shipping_categories_controller.rb +++ b/admin/app/controllers/solidus_admin/shipping_categories_controller.rb @@ -12,7 +12,9 @@ def new set_index_page respond_to do |format| - format.html { render component('shipping_categories/new').new(page: @page, shipping_category: @shipping_category) } + format.html do + render component('shipping_categories/new').new(page: @page, shipping_category: @shipping_category), layout: false + end end end @@ -57,7 +59,9 @@ def edit set_index_page respond_to do |format| - format.html { render component('shipping_categories/edit').new(page: @page, shipping_category: @shipping_category) } + format.html do + render component('shipping_categories/edit').new(page: @page, shipping_category: @shipping_category), layout: false + end end end diff --git a/admin/spec/features/shipping_categories_spec.rb b/admin/spec/features/shipping_categories_spec.rb index 09ad72338f..e91cb91346 100644 --- a/admin/spec/features/shipping_categories_spec.rb +++ b/admin/spec/features/shipping_categories_spec.rb @@ -65,15 +65,15 @@ before do Spree::ShippingCategory.create(name: "Letter Mail") visit "/admin/shipping_categories#{query}" - find_row("Letter Mail").click - expect(page).to have_css("dialog", wait: 5) + click_on "Letter Mail" + expect(page).to have_css("dialog") expect(page).to have_content("Edit Shipping Category") expect(page).to be_axe_clean end it "closing the modal keeps query params" do within("dialog") { click_on "Cancel" } - expect(page).not_to have_selector("dialog", wait: 5) + expect(page).not_to have_selector("dialog") expect(page.current_url).to include(query) end