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 00000000000..cc4e9153538 --- /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 a88d49caec1..7ec21ab73fd 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 ebb6df4ab34..fdf4c09f9eb 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 8de1e56f478..6a8ce2ae8cc 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 68e6b65b05b..4dd4d7885b2 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 6181ca0e904..74290149beb 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 82080b800aa..23a83937d30 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 c39c7cd161b..cf54de223b2 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 44ff79b03b0..e9f10607793 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 3d9ec5c408e..193ad2b6fd6 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 66837d4ce75..746c859f167 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 fdbc336f8b1..29f886d2c2a 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 b8ecfcdf4d1..de1cecf8644 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 ec04b795ad7..0b7d78a468a 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 b6f7437145d..18d886a69ab 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 b6f7437145d..18d886a69ab 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 47bffa1f50a..b13c0943453 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 69916f08dd4..0717b892d9d 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 00000000000..a56a351670e --- /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 ad6cd5b5092..6bf4ed2546a 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 8b408161258..b26b2fc3bb4 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 193ad2b6fd6..f9934858189 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 69a155cd66d..dd6f1a04be0 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 746c859f167..e98f4708554 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 88185925b39..f5119fa9712 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 4253dcec01c..1ac8b0ae49d 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 e3cf3a75937..fb3e207cb09 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 a7a58686da7..3f603718900 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 09ad72338fd..e91cb913469 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