-
-
Notifications
You must be signed in to change notification settings - Fork 318
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2582 from sascha-karnatz/update_javascript/page_s…
…elect Page Select Component
Showing
18 changed files
with
436 additions
and
145 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| module Alchemy | ||
| module Admin | ||
| class PageSelect < ViewComponent::Base | ||
| delegate :alchemy, to: :helpers | ||
|
|
||
| def initialize(page = nil, url: nil, allow_clear: false, placeholder: Alchemy.t(:search_page), query_params: nil) | ||
| @page = page | ||
| @url = url | ||
| @allow_clear = allow_clear | ||
| @placeholder = placeholder | ||
| @query_params = query_params | ||
| end | ||
|
|
||
| def call | ||
| content_tag("alchemy-page-select", content, attributes) | ||
| end | ||
|
|
||
| private | ||
|
|
||
| def attributes | ||
| options = { | ||
| placeholder: @placeholder, | ||
| url: @url || alchemy.api_pages_path | ||
| } | ||
|
|
||
| options = options.merge({"allow-clear": @allow_clear}) if @allow_clear | ||
| options = options.merge({"query-params": @query_params.to_json}) if @query_params | ||
|
|
||
| if @page | ||
| selection = { | ||
| id: @page.id, | ||
| name: @page.name, | ||
| url_path: @page.url_path | ||
| } | ||
| options = options.merge({selection: selection.to_json}) | ||
| end | ||
|
|
||
| options | ||
| end | ||
| end | ||
| end | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import { AlchemyHTMLElement } from "./alchemy_html_element" | ||
|
|
||
| class PageSelect extends AlchemyHTMLElement { | ||
| static properties = { | ||
| allowClear: { default: false }, | ||
| selection: { default: undefined }, | ||
| placeholder: { default: "" }, | ||
| queryParams: { default: "{}" }, | ||
| url: { default: "" } | ||
| } | ||
|
|
||
| connected() { | ||
| this.input.classList.add("alchemy_selectbox") | ||
|
|
||
| const dispatchCustomEvent = (name, detail = {}) => { | ||
| this.dispatchEvent(new CustomEvent(name, { bubbles: true, detail })) | ||
| } | ||
|
|
||
| $(this.input) | ||
| .select2(this.select2Config) | ||
| .on("select2-open", (event) => { | ||
| // add focus to the search input. Select2 is handling the focus on the first opening, | ||
| // but it does not work the second time. One process in select2 is "stealing" the focus | ||
| // if the command is not delayed. It is an intermediate solution until we are going to | ||
| // move away from Select2 | ||
| setTimeout(() => { | ||
| document.querySelector("#select2-drop .select2-input").focus() | ||
| }, 100) | ||
| }) | ||
| .on("change", (event) => { | ||
| if (event.added) { | ||
| dispatchCustomEvent("Alchemy.PageSelect.PageAdded", event.added) | ||
| } else { | ||
| dispatchCustomEvent("Alchemy.PageSelect.PageRemoved") | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| get input() { | ||
| return this.getElementsByTagName("input")[0] | ||
| } | ||
|
|
||
| get select2Config() { | ||
| return { | ||
| placeholder: this.placeholder, | ||
| allowClear: this.allowClear, | ||
| initSelection: (_$el, callback) => { | ||
| if (this.selection) { | ||
| callback(JSON.parse(this.selection)) | ||
| } | ||
| }, | ||
| ajax: this.ajaxConfig, | ||
| formatSelection: this._renderResult, | ||
| formatResult: this._renderListEntry | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Ajax configuration for Select2 | ||
| * @returns {object} | ||
| */ | ||
| get ajaxConfig() { | ||
| const data = (term, page) => { | ||
| return { | ||
| q: { name_cont: term, ...JSON.parse(this.queryParams) }, | ||
| page: page | ||
| } | ||
| } | ||
|
|
||
| const results = (data) => { | ||
| const meta = data.meta | ||
| return { | ||
| results: data.pages, | ||
| more: meta.page * meta.per_page < meta.total_count | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| url: this.url, | ||
| datatype: "json", | ||
| quietMillis: 300, | ||
| data, | ||
| results | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * result which is visible if a page was selected | ||
| * @param {object} page | ||
| * @returns {string} | ||
| * @private | ||
| */ | ||
| _renderResult(page) { | ||
| return page.text || page.name | ||
| } | ||
|
|
||
| /** | ||
| * html template for each list entry | ||
| * @param {object} page | ||
| * @returns {string} | ||
| * @private | ||
| */ | ||
| _renderListEntry(page) { | ||
| return ` | ||
| <div class="page-select--page"> | ||
| <div class="page-select--top"> | ||
| <i class="icon far fa-file fa-lg"></i> | ||
| <span class="page-select--page-name">${page.name}</span> | ||
| <span class="page-select--page-urlname">${page.url_path}</span> | ||
| </div> | ||
| <div class="page-select--bottom"> | ||
| <span class="page-select--site-name">${page.site.name}</span> | ||
| <span class="page-select--language-code">${page.language.name}</span> | ||
| </div> | ||
| </div> | ||
| ` | ||
| } | ||
| } | ||
|
|
||
| customElements.define("alchemy-page-select", PageSelect) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** | ||
| * convert dashes and underscore strings into camelCase strings | ||
| * @param {string} str | ||
| * @returns {string} | ||
| */ | ||
| export function toCamelCase(str) { | ||
| return str | ||
| .split(/-|_/) | ||
| .reduce((a, b) => a + b.charAt(0).toUpperCase() + b.slice(1)) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| require "rails_helper" | ||
|
|
||
| RSpec.describe Alchemy::Admin::PageSelect, type: :component do | ||
| before do | ||
| render | ||
| end | ||
|
|
||
| context "without parameters" do | ||
| subject(:render) do | ||
| render_inline(described_class.new) { "Page Select Content" } | ||
| end | ||
|
|
||
| it "should render the component and render given block content" do | ||
| expect(page).to have_selector("alchemy-page-select") | ||
| expect(page).to have_text("Page Select Content") | ||
| end | ||
|
|
||
| it "should not allow clearing" do | ||
| expect(page).not_to have_selector("alchemy-page-select[allow-clear]") | ||
| end | ||
|
|
||
| it "should have the default placeholder" do | ||
| expect(page).to have_selector("alchemy-page-select[placeholder='Search page']") | ||
| end | ||
|
|
||
| it "should have the default page api - url" do | ||
| expect(page).to have_selector("alchemy-page-select[url='/api/pages']") | ||
| end | ||
|
|
||
| it "should not have a selection" do | ||
| expect(page).to_not have_selector("alchemy-page-select[selection]") | ||
| end | ||
| end | ||
|
|
||
| context "with page" do | ||
| let(:alchemy_page) { create(:alchemy_page, id: 123, name: "Test Page") } | ||
| subject(:render) do | ||
| render_inline(described_class.new(alchemy_page)) | ||
| end | ||
|
|
||
| it "should have a serialized page information" do | ||
| expect(page).to have_selector('alchemy-page-select[selection="{\"id\":123,\"name\":\"Test Page\",\"url_path\":\"/test-page\"}"]') | ||
| end | ||
| end | ||
|
|
||
| context "with url" do | ||
| subject(:render) do | ||
| render_inline(described_class.new(nil, url: "/foo-bar")) | ||
| end | ||
|
|
||
| it "should have an url parameter" do | ||
| expect(page).to have_selector('alchemy-page-select[url="/foo-bar"]') | ||
| end | ||
| end | ||
|
|
||
| context "with allow clear" do | ||
| subject(:render) do | ||
| render_inline(described_class.new(nil, allow_clear: true)) | ||
| end | ||
|
|
||
| it "should not have a allow_clear attribute" do | ||
| expect(page).to have_selector("alchemy-page-select[allow-clear]") | ||
| end | ||
| end | ||
|
|
||
| context "with custom placeholder" do | ||
| subject(:render) do | ||
| render_inline(described_class.new(nil, placeholder: "Custom Placeholder")) | ||
| end | ||
|
|
||
| it "should have a custom placeholder" do | ||
| expect(page).to have_selector("alchemy-page-select[placeholder='Custom Placeholder']") | ||
| end | ||
| end | ||
|
|
||
| context "with query parameter" do | ||
| subject(:render) do | ||
| render_inline(described_class.new(nil, query_params: {foo: :bar})) | ||
| end | ||
|
|
||
| it "should have serialized custom parameter" do | ||
| expect(page).to have_selector('alchemy-page-select[query-params="{\"foo\":\"bar\"}"]') | ||
| end | ||
| end | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
spec/javascript/alchemy_admin/components/page_select.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { renderComponent } from "./component.helper" | ||
|
|
||
| // import jquery and append it to the window object | ||
| import jQuery from "jquery" | ||
| globalThis.$ = jQuery | ||
| globalThis.jQuery = jQuery | ||
|
|
||
| import "alchemy_admin/components/page_select" | ||
| import("vendor/jquery_plugins/select2") | ||
|
|
||
| describe("alchemy-page-select", () => { | ||
| /** | ||
| * | ||
| * @type {HTMLElement | undefined} | ||
| */ | ||
| let component = undefined | ||
|
|
||
| describe("without configuration", () => { | ||
| beforeEach(() => { | ||
| const html = ` | ||
| <alchemy-page-select> | ||
| <input type="text"> | ||
| </alchemy-page-select> | ||
| ` | ||
| component = renderComponent("alchemy-page-select", html) | ||
| }) | ||
|
|
||
| it("should render the input field", () => { | ||
| expect(component.getElementsByTagName("input")[0]).toBeInstanceOf( | ||
| HTMLElement | ||
| ) | ||
| }) | ||
|
|
||
| it("should initialize Select2", () => { | ||
| expect( | ||
| component.getElementsByClassName("select2-container").length | ||
| ).toEqual(1) | ||
| }) | ||
|
|
||
| it("should not show a remove 'button'", () => { | ||
| expect( | ||
| document.querySelector(".select2-container.select2-allowclear") | ||
| ).toBeNull() | ||
| }) | ||
| }) | ||
|
|
||
| describe("allow clear", () => { | ||
| beforeEach(() => { | ||
| const html = ` | ||
| <alchemy-page-select allow-clear> | ||
| <input type="text"> | ||
| </alchemy-page-select> | ||
| ` | ||
| component = renderComponent("alchemy-page-select", html) | ||
| }) | ||
|
|
||
| it("should show a remove 'button'", () => { | ||
| expect(component.allowClear).toBeTruthy() | ||
| }) | ||
| }) | ||
|
|
||
| describe("query params", () => { | ||
| beforeEach(() => { | ||
| const html = ` | ||
| <alchemy-page-select query-params="{"foo":"bar"}"> | ||
| <input type="text"> | ||
| </alchemy-page-select> | ||
| ` | ||
| component = renderComponent("alchemy-page-select", html) | ||
| }) | ||
|
|
||
| it("should receive query parameter", () => { | ||
| expect(JSON.parse(component.queryParams)).toEqual({ foo: "bar" }) | ||
| }) | ||
|
|
||
| it("should add the query parameter to the API call", () => { | ||
| expect(component.ajaxConfig.data("test").q.foo).toEqual("bar") | ||
| }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
spec/javascript/alchemy_admin/utils/string_conversions.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { toCamelCase } from "alchemy_admin/utils/string_conversions" | ||
|
|
||
| describe("toCamelCase", () => { | ||
| it("convert dashes into camelCase", () => { | ||
| expect(toCamelCase("foo-bar-bazzz")).toEqual("fooBarBazzz") | ||
| }) | ||
|
|
||
| it("convert underscore into camelCase", () => { | ||
| expect(toCamelCase("foo_bar")).toEqual("fooBar") | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters