From 081cb97990fc6a846eae36ce9e85a9f1907ddbe0 Mon Sep 17 00:00:00 2001 From: Abirami Date: Tue, 15 Oct 2024 17:10:52 +0100 Subject: [PATCH 1/8] fix accessibility issues --- src/client/assets/javascripts/plant-search.js | 24 +++++++++++++++++-- src/server/plant-health/format/index.njk | 10 ++++---- src/server/plant-health/search/index.njk | 1 + 3 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/client/assets/javascripts/plant-search.js b/src/client/assets/javascripts/plant-search.js index 9de491c..d9ada63 100644 --- a/src/client/assets/javascripts/plant-search.js +++ b/src/client/assets/javascripts/plant-search.js @@ -325,6 +325,8 @@ if (document.querySelector('#my-autocomplete-container')) { ?.childNodes[0]?.value, minLength: 3, autoselect: true, + hint: true, + hintClasses: 'custom-hint-class', showNoOptionsFound: false, templates: { inputValue: function (asd) { @@ -333,8 +335,14 @@ if (document.querySelector('#my-autocomplete-container')) { }, suggestion: function (asd) { if (regexValue?.length > 0) { + const inputElement = + document.getElementsByClassName('custom-hint-class') + inputElement[0]?.setAttribute('aria-label', 'autocomplete__hint') + inputElement[0]?.setAttribute('id', 'autocomplete__hint') return ( - '
' + + '
' + asd?.text?.replace( new RegExp(regexValue, 'gi'), (match) => `${match}` @@ -342,8 +350,17 @@ if (document.querySelector('#my-autocomplete-container')) { '
' ) } else { + const inputElement = + document.getElementsByClassName('custom-hint-class') + document + .querySelector('.custom-hint-class') + .setAttribute('aria-label', 'autocomplete__hint') + inputElement[0]?.setAttribute('aria-label', 'autocomplete__hint') + inputElement[0]?.setAttribute('id', 'autocomplete__hint') return ( - '
' + + '
' + asd?.replace( new RegExp(asd, 'gi'), (match) => `${match}` @@ -357,4 +374,7 @@ if (document.querySelector('#my-autocomplete-container')) { }) const inputElement = document.getElementById('my-autocomplete') inputElement?.setAttribute('aria-label', 'autocompleteSearchQuery') + const inputElement1 = document.getElementsByClassName('custom-hint-class') + inputElement1[0]?.setAttribute('aria-label', 'autocomplete__hint') + inputElement1[0]?.setAttribute('id', 'autocomplete__hint') } diff --git a/src/server/plant-health/format/index.njk b/src/server/plant-health/format/index.njk index fe7dd34..3a5a457 100644 --- a/src/server/plant-health/format/index.njk +++ b/src/server/plant-health/format/index.njk @@ -31,11 +31,11 @@
{% endif %}
- - - - - + + + + + {{ govukRadios({ name: "format", id: "format", diff --git a/src/server/plant-health/search/index.njk b/src/server/plant-health/search/index.njk index a9ab247..5081bbc 100644 --- a/src/server/plant-health/search/index.njk +++ b/src/server/plant-health/search/index.njk @@ -45,6 +45,7 @@ Error: {{errorMessage.message.text}}

{% endif %} +
{% if invalidSearchEntry %} From 9ca5faa038b4a3f3a8e5a1b6158cbc7d94ce7ae0 Mon Sep 17 00:00:00 2001 From: Abirami Date: Tue, 15 Oct 2024 18:01:16 +0100 Subject: [PATCH 2/8] fix unnecessary file change --- src/server/plant-health/search/index.njk | 1 - 1 file changed, 1 deletion(-) diff --git a/src/server/plant-health/search/index.njk b/src/server/plant-health/search/index.njk index 5081bbc..a9ab247 100644 --- a/src/server/plant-health/search/index.njk +++ b/src/server/plant-health/search/index.njk @@ -45,7 +45,6 @@ Error: {{errorMessage.message.text}}

{% endif %} -
{% if invalidSearchEntry %} From 5a89f39c0b7c769da699f519d95825bca7f0f80a Mon Sep 17 00:00:00 2001 From: Abirami Date: Wed, 16 Oct 2024 10:35:51 +0100 Subject: [PATCH 3/8] INNS changes and accessibility issue fix for pest and contry search --- src/client/assets/javascripts/country-search.js | 9 +++++++++ src/client/assets/javascripts/pest-search.js | 9 +++++++++ src/server/locales/plant-details/en_cy.json | 1 + src/server/locales/plant-details/en_gb.json | 1 + src/server/plant-health/plant-details/index.njk | 4 +++- 5 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/client/assets/javascripts/country-search.js b/src/client/assets/javascripts/country-search.js index 40b90ff..de58163 100644 --- a/src/client/assets/javascripts/country-search.js +++ b/src/client/assets/javascripts/country-search.js @@ -89,12 +89,21 @@ if (document.querySelector('#my-autocomplete-country-container')) { ?.childNodes[0]?.value, minLength: 3, autoselect: true, + hint: true, + hintClasses: 'custom-hint-class', showNoOptionsFound: false, templates: { inputValue: function (asd) { return asd?.text }, suggestion: function (asd) { + const inputElement = + document.getElementsByClassName('custom-hint-class') + document + .querySelector('.custom-hint-class') + .setAttribute('aria-label', 'autocomplete__hint') + inputElement[0]?.setAttribute('aria-label', 'autocomplete__hint') + inputElement[0]?.setAttribute('id', 'autocomplete__hint') if (regexValue?.length > 0) { return ( '
' + diff --git a/src/client/assets/javascripts/pest-search.js b/src/client/assets/javascripts/pest-search.js index fb7ebaf..a77d342 100644 --- a/src/client/assets/javascripts/pest-search.js +++ b/src/client/assets/javascripts/pest-search.js @@ -319,6 +319,8 @@ if (document.querySelector('#my-autocomplete-pest-container')) { ?.childNodes[0]?.value, minLength: 3, autoselect: true, + hint: true, + hintClasses: 'custom-hint-class', showNoOptionsFound: false, templates: { inputValue: function (asd) { @@ -326,6 +328,13 @@ if (document.querySelector('#my-autocomplete-pest-container')) { return asd?.text }, suggestion: function (asd) { + const inputElement = + document.getElementsByClassName('custom-hint-class') + document + .querySelector('.custom-hint-class') + .setAttribute('aria-label', 'autocomplete__hint') + inputElement[0]?.setAttribute('aria-label', 'autocomplete__hint') + inputElement[0]?.setAttribute('id', 'autocomplete__hint') if (regexValue?.length > 0) { return ( '
' + diff --git a/src/server/locales/plant-details/en_cy.json b/src/server/locales/plant-details/en_cy.json index 13e656b..505d89b 100644 --- a/src/server/locales/plant-details/en_cy.json +++ b/src/server/locales/plant-details/en_cy.json @@ -15,6 +15,7 @@ "prohibitedContentText3": "Er gwaethaf cyfyngiadau mewnforio, efallai y byddwch yn gallu", "prohibitedContentText4": "o unrhyw wlad, talaith neu diriogaeth", "prohibitedContentText5": "Rhaid i chi gymhwyso'r wybodaeth wahardd cyn dilyn y rheolau mewnforio", + "pestINNSContent": "Ystyrir bod y plâu a'r clefydau canlynol yn risg i amaethyddiaeth, garddwriaeth, bywyd gwyllt neu goedwigoedd Prydain Fawr. Gall llwythi gael eu dinistrio o'u herwydd. Hyd yn oed os oes gennych drwydded o dan Orchymyn Rhywogaethau Goresgynnol Estron 2019, mae'n bosibl y cânt eu dinistrio os oes angen oherwydd y risg o glefydau.", "pestNewContent1": "Ystyrir bod y plâu a'r clefydau canlynol yn risg i amaethyddiaeth, garddwriaeth, bywyd gwyllt neu goedwigoedd Prydain Fawr. Os canfyddir un o'r plâu neu'r clefydau hyn yn ystod arolygiadau iechyd planhigion, bydd camau'n cael eu cymryd. Gallai hyn arwain at oedi neu ddinistrio llwythi.", "pestNewContent2": "Ystyrir bod y plâu a'r clefydau canlynol yn risg i amaethyddiaeth, garddwriaeth, bywyd gwyllt neu goedwigoedd Prydain Fawr. Gall llwythi gael eu dinistrio o'u herwydd", "RNQPPestHeader": "Plâu a chlefydau eraill", diff --git a/src/server/locales/plant-details/en_gb.json b/src/server/locales/plant-details/en_gb.json index 7d8ceca..7287e96 100644 --- a/src/server/locales/plant-details/en_gb.json +++ b/src/server/locales/plant-details/en_gb.json @@ -27,6 +27,7 @@ "pestContentHundredPercentText41": "Consignments may be destroyed because of them.", "pestContentHundredPercentText42": "These pests and diseases are considered a risk to Great Britain's agriculture, horticulture, wildlife or forests. If one of these pests or diseases is found during plant health inspections, action will be taken. This could result in consignments being delayed or destroyed.", "pestContentHundredPercentText5": "You must", + "pestINNSContent": "The following pests and diseases are considered a risk to Great Britain's agriculture, horticulture, wildlife or forests. Consignments may be destroyed because of them. Even if you have a permit under the Invasive Alien Species Order 2019, they may be destroyed if needed due to disease risk.", "pestNewContent1": "The following pests and diseases are considered a risk to Great Britain's agriculture, horticulture, wildlife or forests. If one of these pests or diseases is found during plant health inspections, action will be taken. This could result in consignments being delayed or destroyed.", "pestNewContent2": "The following pests and diseases are considered a risk to Great Britain's agriculture, horticulture, wildlife or forests. Consignments may be destroyed because of them.", "RNQPPestHeader": "Other pests and diseases", diff --git a/src/server/plant-health/plant-details/index.njk b/src/server/plant-health/plant-details/index.njk index 86d87d7..bdb0e6a 100644 --- a/src/server/plant-health/plant-details/index.njk +++ b/src/server/plant-health/plant-details/index.njk @@ -115,8 +115,10 @@

{{mainContent.pestContentText1}} {{countrySearchQuery.value | capitalize}} {{mainContent.pestContentText2}}.

{% else %}

- {% if (annexSixRule) and (annexSixRule === 'INNS' or outcome.toLowerCase() === 'prohibited') %} + {% if (annexSixRule) and (outcome.toLowerCase() === 'prohibited') %} {{mainContent.pestNewContent2}} + {%elif (annexSixRule) and (annexSixRule === 'INNS') %} + {{mainContent.pestINNSContent}} {% else %} {{mainContent.pestNewContent1}} {% endif %} From a3935951945786939c18b81a7f206607da1f7202 Mon Sep 17 00:00:00 2001 From: Abirami Date: Wed, 16 Oct 2024 11:33:28 +0100 Subject: [PATCH 4/8] error page title --- .../assets/javascripts/country-search.js | 2 +- src/client/assets/javascripts/pest-search.js | 2 +- .../problem-with-service/controller.js | 7 ++----- .../problem-with-service/controller.test.js | 19 ++++++++----------- 4 files changed, 12 insertions(+), 18 deletions(-) diff --git a/src/client/assets/javascripts/country-search.js b/src/client/assets/javascripts/country-search.js index de58163..75e2a3b 100644 --- a/src/client/assets/javascripts/country-search.js +++ b/src/client/assets/javascripts/country-search.js @@ -101,7 +101,7 @@ if (document.querySelector('#my-autocomplete-country-container')) { document.getElementsByClassName('custom-hint-class') document .querySelector('.custom-hint-class') - .setAttribute('aria-label', 'autocomplete__hint') + ?.setAttribute('aria-label', 'autocomplete__hint') inputElement[0]?.setAttribute('aria-label', 'autocomplete__hint') inputElement[0]?.setAttribute('id', 'autocomplete__hint') if (regexValue?.length > 0) { diff --git a/src/client/assets/javascripts/pest-search.js b/src/client/assets/javascripts/pest-search.js index a77d342..3ad2757 100644 --- a/src/client/assets/javascripts/pest-search.js +++ b/src/client/assets/javascripts/pest-search.js @@ -332,7 +332,7 @@ if (document.querySelector('#my-autocomplete-pest-container')) { document.getElementsByClassName('custom-hint-class') document .querySelector('.custom-hint-class') - .setAttribute('aria-label', 'autocomplete__hint') + ?.setAttribute('aria-label', 'autocomplete__hint') inputElement[0]?.setAttribute('aria-label', 'autocomplete__hint') inputElement[0]?.setAttribute('id', 'autocomplete__hint') if (regexValue?.length > 0) { diff --git a/src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.js b/src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.js index 633cc9a..0dd7781 100644 --- a/src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.js +++ b/src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.js @@ -21,7 +21,7 @@ const problemWithServiceController = { const statusCode = parseInt(request.query.statusCode) const errorMessage = statusCodeMessage(statusCode) - let pageTitle = 'Error: ' + let pageTitle if ( statusCode === 500 || statusCode === 502 || @@ -29,16 +29,13 @@ const problemWithServiceController = { statusCode === 504 ) { pageTitle = - pageTitle + 'Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK' } else { if (statusCode === 404) { pageTitle = - pageTitle + 'Page not found — Check plant health information and import rules — GOV.UK' } else { - pageTitle = - pageTitle + 'Check plant health information and import rules — GOV.UK' + pageTitle = 'Check plant health information and import rules — GOV.UK' } } if (statusCode !== undefined) { diff --git a/src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.test.js b/src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.test.js index a43f5b3..68554f0 100644 --- a/src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.test.js +++ b/src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.test.js @@ -29,7 +29,7 @@ describe('problemWithServiceController', () => { heading: 404, message: 'Page not found', pageTitle: - 'Error: Page not found — Check plant health information and import rules — GOV.UK', + 'Page not found — Check plant health information and import rules — GOV.UK', statusCode: 404 }) ) @@ -45,8 +45,7 @@ describe('problemWithServiceController', () => { expect.objectContaining({ heading: 403, message: 'Forbidden', - pageTitle: - 'Error: Check plant health information and import rules — GOV.UK', + pageTitle: 'Check plant health information and import rules — GOV.UK', statusCode: 403 }) ) @@ -62,8 +61,7 @@ describe('problemWithServiceController', () => { expect.objectContaining({ heading: 401, message: 'Unauthorized', - pageTitle: - 'Error: Check plant health information and import rules — GOV.UK', + pageTitle: 'Check plant health information and import rules — GOV.UK', statusCode: 401 }) ) @@ -79,8 +77,7 @@ describe('problemWithServiceController', () => { expect.objectContaining({ heading: 400, message: 'Bad Request', - pageTitle: - 'Error: Check plant health information and import rules — GOV.UK', + pageTitle: 'Check plant health information and import rules — GOV.UK', statusCode: 400 }) ) @@ -97,7 +94,7 @@ describe('problemWithServiceController', () => { heading: 500, message: 'Something went wrong', pageTitle: - 'Error: Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK', + 'Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK', statusCode: 500 }) ) @@ -114,7 +111,7 @@ describe('problemWithServiceController', () => { heading: 502, message: 'Something went wrong', pageTitle: - 'Error: Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK', + 'Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK', statusCode: 502 }) ) @@ -131,7 +128,7 @@ describe('problemWithServiceController', () => { heading: 503, message: 'Something went wrong', pageTitle: - 'Error: Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK', + 'Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK', statusCode: 503 }) ) @@ -148,7 +145,7 @@ describe('problemWithServiceController', () => { heading: 504, message: 'Something went wrong', pageTitle: - 'Error: Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK', + 'Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK', statusCode: 504 }) ) From aec4dde9d5823eb24223d8f630a9a51be6cc8e4a Mon Sep 17 00:00:00 2001 From: Abirami Date: Wed, 16 Oct 2024 11:52:04 +0100 Subject: [PATCH 5/8] fix duplicates issue --- .../problem-with-service/controller.test.js | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.test.js b/src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.test.js index 68554f0..957facb 100644 --- a/src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.test.js +++ b/src/server/check-plant-health-information-and-import-rules/problem-with-service/controller.test.js @@ -2,6 +2,11 @@ import { problemWithServiceController } from '~/src/server/check-plant-health-in describe('problemWithServiceController', () => { let request, h + const technicalError = + 'Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK' + const pageNotFoundError = + 'Page not found — Check plant health information and import rules — GOV.UK' + const pageTitle = 'Check plant health information and import rules — GOV.UK' beforeEach(() => { request = { @@ -28,8 +33,7 @@ describe('problemWithServiceController', () => { expect.objectContaining({ heading: 404, message: 'Page not found', - pageTitle: - 'Page not found — Check plant health information and import rules — GOV.UK', + pageTitle: pageNotFoundError, statusCode: 404 }) ) @@ -45,7 +49,7 @@ describe('problemWithServiceController', () => { expect.objectContaining({ heading: 403, message: 'Forbidden', - pageTitle: 'Check plant health information and import rules — GOV.UK', + pageTitle, statusCode: 403 }) ) @@ -61,7 +65,7 @@ describe('problemWithServiceController', () => { expect.objectContaining({ heading: 401, message: 'Unauthorized', - pageTitle: 'Check plant health information and import rules — GOV.UK', + pageTitle, statusCode: 401 }) ) @@ -77,7 +81,7 @@ describe('problemWithServiceController', () => { expect.objectContaining({ heading: 400, message: 'Bad Request', - pageTitle: 'Check plant health information and import rules — GOV.UK', + pageTitle, statusCode: 400 }) ) @@ -93,8 +97,7 @@ describe('problemWithServiceController', () => { expect.objectContaining({ heading: 500, message: 'Something went wrong', - pageTitle: - 'Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK', + pageTitle: technicalError, statusCode: 500 }) ) @@ -110,8 +113,7 @@ describe('problemWithServiceController', () => { expect.objectContaining({ heading: 502, message: 'Something went wrong', - pageTitle: - 'Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK', + pageTitle: technicalError, statusCode: 502 }) ) @@ -127,8 +129,7 @@ describe('problemWithServiceController', () => { expect.objectContaining({ heading: 503, message: 'Something went wrong', - pageTitle: - 'Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK', + pageTitle: technicalError, statusCode: 503 }) ) @@ -144,8 +145,7 @@ describe('problemWithServiceController', () => { expect.objectContaining({ heading: 504, message: 'Something went wrong', - pageTitle: - 'Sorry, there is a problem with the service — Check plant health information and import rules — GOV.UK', + pageTitle: technicalError, statusCode: 504 }) ) From 9883825563218859ff5eee64ac5e87f318880c4e Mon Sep 17 00:00:00 2001 From: Abirami Date: Wed, 16 Oct 2024 12:07:10 +0100 Subject: [PATCH 6/8] duplicates fix --- .../assets/javascripts/country-search.js | 9 +++------ src/client/assets/javascripts/pest-search.js | 9 +++------ src/client/assets/javascripts/plant-search.js | 18 ++++-------------- 3 files changed, 10 insertions(+), 26 deletions(-) diff --git a/src/client/assets/javascripts/country-search.js b/src/client/assets/javascripts/country-search.js index 75e2a3b..3cf326a 100644 --- a/src/client/assets/javascripts/country-search.js +++ b/src/client/assets/javascripts/country-search.js @@ -97,13 +97,10 @@ if (document.querySelector('#my-autocomplete-country-container')) { return asd?.text }, suggestion: function (asd) { - const inputElement = + const inputElementCustom = document.getElementsByClassName('custom-hint-class') - document - .querySelector('.custom-hint-class') - ?.setAttribute('aria-label', 'autocomplete__hint') - inputElement[0]?.setAttribute('aria-label', 'autocomplete__hint') - inputElement[0]?.setAttribute('id', 'autocomplete__hint') + inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint') + inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint') if (regexValue?.length > 0) { return ( '

' + diff --git a/src/client/assets/javascripts/pest-search.js b/src/client/assets/javascripts/pest-search.js index 3ad2757..a459dc2 100644 --- a/src/client/assets/javascripts/pest-search.js +++ b/src/client/assets/javascripts/pest-search.js @@ -328,13 +328,10 @@ if (document.querySelector('#my-autocomplete-pest-container')) { return asd?.text }, suggestion: function (asd) { - const inputElement = + const inputElementCustom = document.getElementsByClassName('custom-hint-class') - document - .querySelector('.custom-hint-class') - ?.setAttribute('aria-label', 'autocomplete__hint') - inputElement[0]?.setAttribute('aria-label', 'autocomplete__hint') - inputElement[0]?.setAttribute('id', 'autocomplete__hint') + inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint') + inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint') if (regexValue?.length > 0) { return ( '
' + diff --git a/src/client/assets/javascripts/plant-search.js b/src/client/assets/javascripts/plant-search.js index d9ada63..da7fa3e 100644 --- a/src/client/assets/javascripts/plant-search.js +++ b/src/client/assets/javascripts/plant-search.js @@ -334,11 +334,11 @@ if (document.querySelector('#my-autocomplete-container')) { return asd?.text }, suggestion: function (asd) { + const inputElementCustom = + document.getElementsByClassName('custom-hint-class') + inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint') + inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint') if (regexValue?.length > 0) { - const inputElement = - document.getElementsByClassName('custom-hint-class') - inputElement[0]?.setAttribute('aria-label', 'autocomplete__hint') - inputElement[0]?.setAttribute('id', 'autocomplete__hint') return ( '
' ) } else { - const inputElement = - document.getElementsByClassName('custom-hint-class') - document - .querySelector('.custom-hint-class') - .setAttribute('aria-label', 'autocomplete__hint') - inputElement[0]?.setAttribute('aria-label', 'autocomplete__hint') - inputElement[0]?.setAttribute('id', 'autocomplete__hint') return ( '
Date: Wed, 16 Oct 2024 13:35:46 +0100 Subject: [PATCH 7/8] fix duplicates --- src/client/assets/javascripts/application.js | 22 +++++++++++++++ .../assets/javascripts/country-search.js | 28 ++++--------------- src/client/assets/javascripts/pest-search.js | 27 ++++-------------- src/client/assets/javascripts/plant-search.js | 27 ++++-------------- 4 files changed, 38 insertions(+), 66 deletions(-) diff --git a/src/client/assets/javascripts/application.js b/src/client/assets/javascripts/application.js index 32e4b77..b8aecf7 100644 --- a/src/client/assets/javascripts/application.js +++ b/src/client/assets/javascripts/application.js @@ -12,4 +12,26 @@ import './plant-search.js' import './pest-search.js' import './country-search.js' +export function timerFunction(query, finalArray, populateResults) { + return setTimeout(async () => { + try { + if (query.length > 2) { + function compareNames(a, b) { + if (a.text < b.text) { + return -1 + } + if (a.text > b.text) { + return 1 + } + return 0 + } + return populateResults(finalArray.sort(compareNames)) + } + } catch (error) { + // TypeError: Failed to fetch + // console.log('Error fetching suggestions:', error) + } + }, 1000) +} + initAll() diff --git a/src/client/assets/javascripts/country-search.js b/src/client/assets/javascripts/country-search.js index 3cf326a..9fd47a6 100644 --- a/src/client/assets/javascripts/country-search.js +++ b/src/client/assets/javascripts/country-search.js @@ -1,4 +1,6 @@ import accessibleAutocomplete from './accessible-autocomplete.min.js' +import { timerFunction } from './application.js' + let finalArray = [] let timer @@ -10,28 +12,10 @@ async function fetchSuggestions(query, populateResults) { defaultcountryCode?.setAttribute('value', null) const apiUrl = '/search/countries?searchQuery=' + query await clearTimeout(timer) - timer = await setTimeout(async () => { - try { - if (query.length > 2) { - const response = await fetch(apiUrl) - const responseJSON = await response.json() - await renderSuggestions(responseJSON, query) - function compareNames(a, b) { - if (a.text < b.text) { - return -1 - } - if (a.text > b.text) { - return 1 - } - return 0 - } - populateResults(finalArray.sort(compareNames)) - } - } catch (error) { - // TypeError: Failed to fetch - // console.log('Error fetching suggestions:', error) - } - }, 1000) + const response = await fetch(apiUrl) + const responseJSON = await response.json() + await renderSuggestions(responseJSON, query) + timer = timerFunction(query, finalArray, populateResults) } let regexValue, suggestions async function renderSuggestions(json, query) { diff --git a/src/client/assets/javascripts/pest-search.js b/src/client/assets/javascripts/pest-search.js index a459dc2..2e9727a 100644 --- a/src/client/assets/javascripts/pest-search.js +++ b/src/client/assets/javascripts/pest-search.js @@ -1,4 +1,5 @@ import accessibleAutocomplete from './accessible-autocomplete.min.js' +import { timerFunction } from './application.js' let finalArray = [] let timer @@ -10,28 +11,10 @@ async function fetchSuggestions(query, populateResults) { defaultcslref?.setAttribute('value', null) const apiUrl = '/search/pests?searchQuery=' + query await clearTimeout(timer) - timer = await setTimeout(async () => { - try { - if (query.length > 2) { - const response = await fetch(apiUrl) - const responseJSON = await response.json() - await renderSuggestions(responseJSON, query) - function compareNames(a, b) { - if (a.text.trim() < b.text.trim()) { - return -1 - } - if (a.text.trim() > b.text.trim()) { - return 1 - } - return 0 - } - populateResults(finalArray.sort(compareNames)) - } - } catch (error) { - // TypeError: Failed to fetch - // console.log('Error fetching suggestions:', error) - } - }, 1000) + const response = await fetch(apiUrl) + const responseJSON = await response.json() + await renderSuggestions(responseJSON, query) + timer = timerFunction(query, finalArray, populateResults) } let regexValue async function renderSuggestions(json, query) { diff --git a/src/client/assets/javascripts/plant-search.js b/src/client/assets/javascripts/plant-search.js index da7fa3e..1983fe2 100644 --- a/src/client/assets/javascripts/plant-search.js +++ b/src/client/assets/javascripts/plant-search.js @@ -1,4 +1,5 @@ import accessibleAutocomplete from './accessible-autocomplete.min.js' +import { timerFunction } from './application.js' let finalArray = [] let timer @@ -9,28 +10,10 @@ async function fetchSuggestions(query, populateResults) { defaulthostref?.setAttribute('value', '') const apiUrl = '/search/plants?searchQuery=' + query await clearTimeout(timer) - timer = await setTimeout(async () => { - try { - if (query.length > 2) { - const response = await fetch(apiUrl) - const responseJSON = await response.json() - await renderSuggestions(responseJSON, query) - function compareNames(a, b) { - if (a.text < b.text) { - return -1 - } - if (a.text > b.text) { - return 1 - } - return 0 - } - populateResults(finalArray.sort(compareNames)) - } - } catch (error) { - // TypeError: Failed to fetch - // console.log('Error fetching suggestions:', error) - } - }, 1000) + const response = await fetch(apiUrl) + const responseJSON = await response.json() + await renderSuggestions(responseJSON, query) + timer = timerFunction(query, finalArray, populateResults) } let regexValue async function renderSuggestions(json, query) { From 9ea0516fbbe0f1ec8d609dec5dc28c5efde38b11 Mon Sep 17 00:00:00 2001 From: Abirami Date: Wed, 16 Oct 2024 14:05:33 +0100 Subject: [PATCH 8/8] fix duplicates --- src/client/assets/javascripts/application.js | 49 +++++++++++++++---- .../assets/javascripts/country-search.js | 32 +++--------- src/client/assets/javascripts/pest-search.js | 34 +++---------- src/client/assets/javascripts/plant-search.js | 40 +++------------ 4 files changed, 62 insertions(+), 93 deletions(-) diff --git a/src/client/assets/javascripts/application.js b/src/client/assets/javascripts/application.js index b8aecf7..b5e55d2 100644 --- a/src/client/assets/javascripts/application.js +++ b/src/client/assets/javascripts/application.js @@ -12,19 +12,20 @@ import './plant-search.js' import './pest-search.js' import './country-search.js' +function compareNames(a, b) { + if (a.text < b.text) { + return -1 + } + if (a.text > b.text) { + return 1 + } + return 0 +} + export function timerFunction(query, finalArray, populateResults) { return setTimeout(async () => { try { if (query.length > 2) { - function compareNames(a, b) { - if (a.text < b.text) { - return -1 - } - if (a.text > b.text) { - return 1 - } - return 0 - } return populateResults(finalArray.sort(compareNames)) } } catch (error) { @@ -34,4 +35,34 @@ export function timerFunction(query, finalArray, populateResults) { }, 1000) } +export function inputValueTemplate(asd) { + return asd?.text +} + +export function suggestionTemplate(asd, regexValue) { + const inputElementCustom = + document.getElementsByClassName('custom-hint-class') + inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint') + inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint') + let template + if (regexValue?.length > 0) { + template = + '
' + + asd?.text?.replace( + new RegExp(regexValue, 'gi'), + (match) => `${match}` + ) + + '
' + } else { + template = + '
' + + asd?.replace( + new RegExp(asd, 'gi'), + (match) => `${match}` + ) + + '
' + } + return template +} + initAll() diff --git a/src/client/assets/javascripts/country-search.js b/src/client/assets/javascripts/country-search.js index 9fd47a6..b2242b6 100644 --- a/src/client/assets/javascripts/country-search.js +++ b/src/client/assets/javascripts/country-search.js @@ -1,5 +1,9 @@ import accessibleAutocomplete from './accessible-autocomplete.min.js' -import { timerFunction } from './application.js' +import { + timerFunction, + inputValueTemplate, + suggestionTemplate +} from './application.js' let finalArray = [] let timer @@ -78,32 +82,10 @@ if (document.querySelector('#my-autocomplete-country-container')) { showNoOptionsFound: false, templates: { inputValue: function (asd) { - return asd?.text + return inputValueTemplate(asd) }, suggestion: function (asd) { - const inputElementCustom = - document.getElementsByClassName('custom-hint-class') - inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint') - inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint') - if (regexValue?.length > 0) { - return ( - '
' + - asd?.text?.replace( - new RegExp(regexValue, 'gi'), - (match) => `${match}` - ) + - '
' - ) - } else { - return ( - '
' + - asd?.replace( - new RegExp(asd, 'gi'), - (match) => `${match}` - ) + - '
' - ) - } + return suggestionTemplate(asd, regexValue) } }, onConfirm diff --git a/src/client/assets/javascripts/pest-search.js b/src/client/assets/javascripts/pest-search.js index 2e9727a..93ae44e 100644 --- a/src/client/assets/javascripts/pest-search.js +++ b/src/client/assets/javascripts/pest-search.js @@ -1,5 +1,9 @@ import accessibleAutocomplete from './accessible-autocomplete.min.js' -import { timerFunction } from './application.js' +import { + timerFunction, + inputValueTemplate, + suggestionTemplate +} from './application.js' let finalArray = [] let timer @@ -291,7 +295,6 @@ const onConfirm = (e) => { .appendChild(inputCslref) } } -const cslRefElement = document.getElementById('#cslRef') if (document.querySelector('#my-autocomplete-pest-container')) { accessibleAutocomplete({ element: document.querySelector('#my-autocomplete-pest-container'), @@ -307,33 +310,10 @@ if (document.querySelector('#my-autocomplete-pest-container')) { showNoOptionsFound: false, templates: { inputValue: function (asd) { - cslRefElement?.setAttribute('value', asd?.cslRef) - return asd?.text + return inputValueTemplate(asd) }, suggestion: function (asd) { - const inputElementCustom = - document.getElementsByClassName('custom-hint-class') - inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint') - inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint') - if (regexValue?.length > 0) { - return ( - '
' + - asd?.text?.replace( - new RegExp(regexValue, 'gi'), - (match) => `${match}` - ) + - '
' - ) - } else { - return ( - '
' + - asd?.replace( - new RegExp(asd, 'gi'), - (match) => `${match}` - ) + - '
' - ) - } + return suggestionTemplate(asd, regexValue) } }, onConfirm diff --git a/src/client/assets/javascripts/plant-search.js b/src/client/assets/javascripts/plant-search.js index 1983fe2..5fa984d 100644 --- a/src/client/assets/javascripts/plant-search.js +++ b/src/client/assets/javascripts/plant-search.js @@ -1,5 +1,10 @@ import accessibleAutocomplete from './accessible-autocomplete.min.js' -import { timerFunction } from './application.js' +import { + timerFunction, + inputValueTemplate, + suggestionTemplate +} from './application.js' + let finalArray = [] let timer @@ -296,8 +301,6 @@ const onConfirm = (e) => { document.querySelector('#my-autocomplete-container').appendChild(inputHref) } } -const hostRefElement = document.getElementById('#hostRef') - if (document.querySelector('#my-autocomplete-container')) { accessibleAutocomplete({ element: document.querySelector('#my-autocomplete-container'), @@ -313,37 +316,10 @@ if (document.querySelector('#my-autocomplete-container')) { showNoOptionsFound: false, templates: { inputValue: function (asd) { - hostRefElement?.setAttribute('value', asd?.hostRef) - return asd?.text + return inputValueTemplate(asd) }, suggestion: function (asd) { - const inputElementCustom = - document.getElementsByClassName('custom-hint-class') - inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint') - inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint') - if (regexValue?.length > 0) { - return ( - '
' + - asd?.text?.replace( - new RegExp(regexValue, 'gi'), - (match) => `${match}` - ) + - '
' - ) - } else { - return ( - '
' + - asd?.replace( - new RegExp(asd, 'gi'), - (match) => `${match}` - ) + - '
' - ) - } + return suggestionTemplate(asd, regexValue) } }, onConfirm