diff --git a/app/javascript/controllers/duplicate_checker_controller.js b/app/javascript/controllers/duplicate_checker_controller.js index 5d54d670..c762474f 100644 --- a/app/javascript/controllers/duplicate_checker_controller.js +++ b/app/javascript/controllers/duplicate_checker_controller.js @@ -25,39 +25,51 @@ export default class extends Controller { connect() { const form = this.element this.hideRestOfForm() + form.addEventListener('change', () => { this.checkDuplicates() }); const titleField = form.querySelector("#space_title") titleField.addEventListener('input', (e) => { - if (e.target.value.length < 5) { - return - } - this.checkDuplicates() }) } async checkDuplicates() { - const data = new FormData(this.element); - const title = data.get("space[title]"); - const address = data.get("space[address]"); - const post_number = data.get("space[post_number]"); + const { + title, + address, + post_number + } = this.extractDataFromForm() - const enoughDataToFindByTitle = title.length > 5 - const enoughDataToFindByAddress = (!post_number || (!address && !post_number)) + if (this.checkIfDataIsStale(title, address, post_number)) { + return // No need to check anything if we have the same data + } - if (!enoughDataToFindByTitle || !enoughDataToFindByAddress) return + const enoughDataToFindByTitle = title.length > 5 + const enoughDataToFindByAddress = (!!address && !!post_number) - if (this.checkIfDataIsStale(title, address, post_number)) { - return + if (!enoughDataToFindByTitle && !enoughDataToFindByAddress) { + return this.renderNoDuplicates() } + return await this.renderFetchedDuplicates(title, address, post_number) + } + + extractDataFromForm() { + const data = new FormData(this.element); + const title = data.get("space[title]"); + const address = data.get("space[address]"); + const post_number = data.get("space[post_number]"); + return { title, address, post_number } + } + + async renderFetchedDuplicates(title, address, post_number) { let url = "/check_duplicates?" - url += `title=${title}&` - url += `address=${address}&` - url += `post_number=${post_number}&` + url += `title=${title}&` + url += `address=${address}&` + url += `post_number=${post_number}&` const result = await (await fetch(url)).json() if (result && result.html) { @@ -68,8 +80,16 @@ export default class extends Controller { return this.showRestOfForm() } + renderNoDuplicates() { + return this.duplicatesRenderHereTarget.innerHTML = "" + } + + checkIfDataIsStale(title, address, post_number) { - if (title !== this.state.title || address !== this.state.address || post_number !== this.state.post_number) { + if ( + title !== this.state.title || + address !== this.state.address || + post_number !== this.state.post_number) { this.state.title = title this.state.address = address this.state.post_number = post_number diff --git a/spec/features/user_manages_space_spec.rb b/spec/features/user_manages_space_spec.rb index 959557e3..f0626b15 100644 --- a/spec/features/user_manages_space_spec.rb +++ b/spec/features/user_manages_space_spec.rb @@ -27,14 +27,14 @@ fill_in "space_post_number", with: space.post_number find("body").click # Blur from field - expect(page).to have_content(I18n.t("space_create.any_of_these.one")) + expect(page).to have_content(I18n.t("space_create.any_of_these.one"), wait: 10) click_on I18n.t("space_create.none_are_duplicates.one") tom_select("select#space_space_type_ids", option_id: space_type.id) tom_select("select#space_space_group_title", option_id: space_group.title) click_on I18n.t("helpers.submit.create", model: Space.model_name.human) - expect(page).to have_content(space.title) + expect(page).to have_text(space.title) end end