From 44d439a125fb48d5493d4e4d668f75451864f72e Mon Sep 17 00:00:00 2001 From: Ben Williams Date: Fri, 11 Feb 2022 13:20:21 +0000 Subject: [PATCH 1/2] Resolve merge issues with CSSE tool autosuggestion dropdown --- app/assets/javascript/add-letter-code-list.js | 6 +- app/assets/javascript/add-result-code-list.js | 6 +- app/assets/javascript/add-sender-code-list.js | 2 +- app/assets/javascript/suggestionDropdown.js | 39 +++ app/assets/sass/components/_autocomplete.scss | 274 +++++++-------- app/views/layout-email-base.html | 6 - .../v12/CSSE-tool/CSSE-create-step5.html | 322 +++++++++++++----- .../v12/CSSE-tool/CSSE-create-step7.html | 90 +++-- docs/views/template-clinical.html | 2 - docs/views/template.html | 6 - package-lock.json | 69 ++-- package.json | 2 +- 12 files changed, 491 insertions(+), 333 deletions(-) create mode 100644 app/assets/javascript/suggestionDropdown.js diff --git a/app/assets/javascript/add-letter-code-list.js b/app/assets/javascript/add-letter-code-list.js index 33084c83..0d1a2e23 100644 --- a/app/assets/javascript/add-letter-code-list.js +++ b/app/assets/javascript/add-letter-code-list.js @@ -14,11 +14,11 @@ letterCodeButton.addEventListener('click', addNumberTolist); //Function to save the nhs number and spit it back out above function addNumberTolist() { - if(document.getElementById('autocomplete-customTemplates').value != "") { - var number = document.getElementById('autocomplete-customTemplates').value; // get value of whats inside the box + if(document.getElementById('letter-codes-autocomplete').value != "") { + var number = document.getElementById('letter-codes-autocomplete').value; // get value of whats inside the box var letterCodelength = letterCodes.push(number) //adds it to the array + adds to new variable letterCodelist.innerHTML+="
  • "+number+" Remove
    • " //spit it back out (with some added extras) - document.getElementById('autocomplete-customTemplates').value="" // clears the box for the next input + document.getElementById('letter-codes-autocomplete').value="" // clears the box for the next input } } diff --git a/app/assets/javascript/add-result-code-list.js b/app/assets/javascript/add-result-code-list.js index 51d2e91b..8d9a1ff4 100644 --- a/app/assets/javascript/add-result-code-list.js +++ b/app/assets/javascript/add-result-code-list.js @@ -7,9 +7,6 @@ //Define empty array where NHS numbers will live when entered var resultCode = [] //Define variables and helps the html talk to the javascript -var resultCodeinput = document.getElementById('result-code-result') -var hpvCodeinput = document.getElementById('result-code-hpv') -var actionCodeinput = document.getElementById('result-code-action') var resultCodelist = document.getElementById('result-code-list') var resultCodeButton = document.getElementById('add-result-code') @@ -18,6 +15,9 @@ resultCodeButton.addEventListener('click', addNumberTolist); //Function to save the nhs number and spit it back out above function addNumberTolist() { + var resultCodeinput = document.getElementById('result-code-result-autocomplete') + var hpvCodeinput = document.getElementById('result-code-hpv-autocomplete') + var actionCodeinput = document.getElementById('result-code-action-autocomplete') var rCode = resultCodeinput.value; // get value of whats inside the box of Result input var hCode = hpvCodeinput.value; // get value of whats inside the box of HPV input var aCode = actionCodeinput.value; // get value of whats inside the box of result input diff --git a/app/assets/javascript/add-sender-code-list.js b/app/assets/javascript/add-sender-code-list.js index 844f1c86..44f10aa9 100644 --- a/app/assets/javascript/add-sender-code-list.js +++ b/app/assets/javascript/add-sender-code-list.js @@ -7,7 +7,6 @@ //Define empty array where NHS numbers will live when entered var senderCodes = [] //Define variables and helps the html talk to the javascript -var senderCodeinput = document.getElementById('sender-code-input') var senderCodelist = document.getElementById('sender-code-list') var senderCodeButton = document.getElementById('add-sender-code') @@ -16,6 +15,7 @@ senderCodeButton.addEventListener('click', addNumberTolist); //Function to save the nhs number and spit it back out above function addNumberTolist() { + var senderCodeinput = document.getElementById('sender-code-input-autocomplete') var number = senderCodeinput.value; // get value of whats inside the box var senderCodelength = senderCodes.push(number) //adds it to the array senderCodelist.innerHTML+="
  • "+number+" Remove
    • " //spit it back out (with some added extras) diff --git a/app/assets/javascript/suggestionDropdown.js b/app/assets/javascript/suggestionDropdown.js new file mode 100644 index 00000000..48e7c044 --- /dev/null +++ b/app/assets/javascript/suggestionDropdown.js @@ -0,0 +1,39 @@ + +const createSuggestionDropdown = (data, elementId) => { + function customSuggest(query, syncResults) { + const results = data; + syncResults( + query + ? results.filter(function (result) { + var codeContains = + result.code.toLowerCase().indexOf(query.toLowerCase()) !== -1; + var resultNameContains = + result.name.toLowerCase().indexOf(query.toLowerCase()) !== -1; + return codeContains || resultNameContains; + }) + : [] + ); + } + + function inputValueTemplate(result) { + return result && result.code; + } + + function suggestionTemplate(result) { + return result && `
    ${result.code}
    ${result.name}
    `; + } + + const element = document.querySelector(`#${elementId}`); + const id = `${elementId}-autocomplete`; + accessibleAutocomplete({ + element: element, + id: id, + name: elementId, + displayMenu: 'overlay', + source: customSuggest, + templates: { + inputValue: inputValueTemplate, + suggestion: suggestionTemplate, + }, + }); +} \ No newline at end of file diff --git a/app/assets/sass/components/_autocomplete.scss b/app/assets/sass/components/_autocomplete.scss index 08a1c5a7..73965892 100644 --- a/app/assets/sass/components/_autocomplete.scss +++ b/app/assets/sass/components/_autocomplete.scss @@ -2,166 +2,140 @@ // COMPONENTS / AUTOCOMPLETE // ========================================================================== -// needed to add a further wrapper as this +// needed to add a further wrapper as this -.codecomplete { - .autocomplete__wrapper { - position: relative; - border-radius: 4px; - background-color: $color_nhsuk-white; - } - - .autocomplete__hint, - .autocomplete__input { - background-color: $color_nhsuk-white; - border-radius: 4px; - height: 40px; - font-size: 17px; - line-height: 1.5; - -webkit-appearance: none; - border: 2px solid #4c6272; - border-radius: 0; - box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - margin-bottom: 0; - width: 100%; - } - - .autocomplete__input { - background-color: transparent; - position: relative; - } - - .autocomplete__hint { - color: #bfc1c3; - position: absolute; - } - - .autocomplete__input--default { - padding: 8px; - } - - .autocomplete__input--focused { - outline-offset: 0; - outline: 3px solid #ffeb3b; - } - - .autocomplete__input--show-all-values { - padding: 4px 34px 4px 4px; - cursor: pointer; - } - - .autocomplete__dropdown-arrow-down { - z-index: -1; - display: inline-block; - position: absolute; - right: 8px; - width: 24px; - height: 24px; - top: 10px; - } - +.autocomplete__wrapper { + position: relative; +} +.autocomplete__hint, +.autocomplete__input { + @extend .nhsuk-input; + @extend .nhsuk-input--width-10; +} +.autocomplete__input { + background-color: white; + position: relative; +} +.autocomplete__hint { + color: #b1b4b6; + position: absolute; +} +.autocomplete__input--default { + padding: 5px; +} +.autocomplete__input--show-all-values { + padding: 5px 34px 5px 5px; + cursor: pointer; +} +.autocomplete__dropdown-arrow-down { + z-index: -1; + display: inline-block; + position: absolute; + right: 8px; + width: 24px; + height: 24px; + top: 10px; +} +.autocomplete__menu { + background-color: #fff; + border: 2px solid #0b0c0c; + border-top: 0; + color: #0b0c0c; + margin: 0; + max-height: 342px; + overflow-x: hidden; + padding: 0; + width: 100%; + width: calc(100% - 4px); +} +.autocomplete__menu--visible { + display: block; +} +.autocomplete__menu--hidden { + display: none; +} +.autocomplete__menu--overlay { + box-shadow: rgba(0, 0, 0, 0.256863) 0 2px 6px; + left: 0; + position: absolute; + top: 100%; + z-index: 100; + min-width: 500px; +} +.autocomplete__menu--inline { + position: relative; +} +.autocomplete__option { + border-bottom: solid #b1b4b6; + border-width: 1px 0; + cursor: pointer; + display: flex; + position: relative; +} +.autocomplete__option > * { + pointer-events: none; +} +.autocomplete__option:first-of-type { + border-top-width: 0; +} +.autocomplete__option:last-of-type { + border-bottom-width: 0; +} +.autocomplete__option--odd { + background-color: #fafafa; +} +.autocomplete__option--focused, +.autocomplete__option:hover { + background-color: #1d70b8; + border-color: #1d70b8; + color: #fff; + outline: 0; +} +.autocomplete__multiple-input { + display: flex; +} +@media (-ms-high-contrast: active), (forced-colors: active) { .autocomplete__menu { - background-color: #fff; - border: 4px solid #0b0c0c; - border-top: 0; - color: #34384b; - margin: 0; - max-height: 342px; - overflow-x: hidden; - padding: 0; - width: 100%; - width: calc(100% - 4px); - } - - .autocomplete__menu--visible { - display: block; - } - - .autocomplete__menu--hidden { - display: none; + border-color: FieldText; } - - .autocomplete__menu--overlay { - box-shadow: rgba(0,0,0,.256863) 0 2px 6px; - left: 0; - position: absolute; - top: 100%; - z-index: 100; - } - - .autocomplete__menu--inline { - position: relative; - } - .autocomplete__option { - border-bottom: solid #bfc1c3; - border-width: 1px 0; - cursor: pointer; - display: block; - position: relative; - } - - .autocomplete__option > * { - pointer-events: none; - } - - .autocomplete__option:first-of-type { - border-top-width: 0; - } - - .autocomplete__option:last-of-type { - border-bottom-width: 0; - } - - .autocomplete__option--odd { - background-color: #fafafa; + background-color: Field; + color: FieldText; } - .autocomplete__option--focused, .autocomplete__option:hover { - background-color: #005ea5; - border-color: #005ea5; - color: #fff; - outline: 0; + forced-color-adjust: none; + background-color: SelectedItem; + border-color: SelectedItem; + color: SelectedItemText; + outline-color: SelectedItemText; } - - .autocomplete__option--no-results { - background-color: #fafafa; - color: #646b6f; - cursor: not-allowed; - } - +} +.autocomplete__option--no-results { + background-color: #fafafa; + color: #646b6f; + cursor: not-allowed; +} +.autocomplete__hint, +.autocomplete__input, +.autocomplete__option { + font-size: 16px; + line-height: 1.25; + margin-bottom: 0; +} +.autocomplete__hint, +.autocomplete__option { + padding: 5px; +} +.autocomplete__option-name { + margin-left: 1em; + color: #4C6272; +} +@media (min-width: 641px) { .autocomplete__hint, .autocomplete__input, .autocomplete__option { - font-size: 17px; - line-height: 1.5; + font-size: 19px; + line-height: 1.31579; } - - .autocomplete__hint, - .autocomplete__option { - padding: 8px; - } - @media (min-width:641px) { - .autocomplete__hint, - .autocomplete__input, - .autocomplete__option { - font-size: 17px; - line-height: 1.5; - } - } - - - .autocomplete__input { - &:focus { - box-shadow: 0 0 0 4px #ffeb3b; - outline: 4px solid transparent; - outline-offset: 4px; - border: 4px solid black; - } - } - } - diff --git a/app/views/layout-email-base.html b/app/views/layout-email-base.html index b76ce8f1..2e51f73d 100644 --- a/app/views/layout-email-base.html +++ b/app/views/layout-email-base.html @@ -5,9 +5,7 @@ {% from 'action-link/macro.njk' import actionLink %} -{% from 'nav-a-z/macro.njk' import azNav %} {% from 'breadcrumb/macro.njk' import breadcrumb %} -{% from 'care-card/macro.njk' import careCard %} {% from 'contents-list/macro.njk' import contentsList %} {% from 'details/macro.njk' import details %} {% from 'header/macro.njk' import header %} @@ -16,11 +14,7 @@ {% from 'do-dont-list/macro.njk' import list %} {% from 'images/macro.njk' import image %} {% from 'inset-text/macro.njk' import insetText %} -{% from 'list-panel/macro.njk' import listPanel %} {% from 'pagination/macro.njk' import pagination %} -{% from 'panel/macro.njk' import panel %} -{% from 'promo/macro.njk' import promo %} -{% from 'review-date/macro.njk' import reviewDate %} {% from 'skip-link/macro.njk' import skipLink %} {% from 'tables/macro.njk' import table %} {% from 'warning-callout/macro.njk' import warningCallout %} diff --git a/app/views/v12/CSSE-tool/CSSE-create-step5.html b/app/views/v12/CSSE-tool/CSSE-create-step5.html index d7b5ace6..66f1a3da 100644 --- a/app/views/v12/CSSE-tool/CSSE-create-step5.html +++ b/app/views/v12/CSSE-tool/CSSE-create-step5.html @@ -6,92 +6,238 @@ + + const data = [ + { + code: 'PA1', + name: 'HPV Primary screening invitation', + recall: 'Invitation letter', + }, + { + code: 'PA2', + name: 'HPV Primary screening reminder', + recall: 'Invitation letter', + }, + { + code: 'PA3', + name: 'HPV Primary screening invitation (participant not registered with GP', + recall: 'Invitation letter', + }, + { + code: 'PA4', + name: 'HPV Primary screening reminder (participant not registered with GP', + recall: 'Invitation letter', + }, + { + code: 'PX0A', + name: 'HPV negative result with no cytology', + recall: 'Normal result letter', + }, + { + code: 'PX0C', + name: 'HPV negative result and ceased for age', + recall: 'Normal result letter', + }, + { + code: 'PX0R', + name: 'HPV negative result with early recall (12 or 36 months)', + recall: 'Normal result letter', + }, + { + code: 'PX0S', + name: 'HPV negative result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'PXUS', + name: 'Inadequate HPV result (no cytology) with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'PXUR', + name: 'Inadequate HPV result (no cytology)', + recall: 'Normal result letter', + }, + { + code: 'PX9S', + name: 'HPV positive result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P09R', + name: 'HPV positive, cytology negative and noncervical glandular neoplasia positive result with recall (12 or 36 months)', + recall: 'Normal result letter', + }, + { + code: 'P09S', + name: 'HPV positive, cytology negative and noncervical glandular neoplasia positive result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P19R', + name: 'HPV positive and inadequate cytology result with early recall (3 months)', + recall: 'Normal result letter', + }, + { + code: 'P19S', + name: 'HPV positive and inadequate cytology result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P39S', + name: 'HPV positive and low-grade dyskaryosis cytology result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P49S', + name: 'HPV positive and high-grade (severe) dyskaryosis cytology result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P59S', + name: 'HPV positive and abnormal squamous cytology result with urgent (2 week) referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P69S', + name: 'HPV positive and abnormal endocervical cytology result with urgent (2 week) referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P79S', + name: 'HPV positive and high-grade (moderate) dyskaryosis cytology result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P89S', + name: 'HPV positive and borderline squamous cytology result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P99S', + name: 'HPV positive and borderline endocervical cytology result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P29R', + name: 'HPV positive and negative cytology result with early recall', + recall: 'Normal result letter', + }, + { + code: 'P29S', + name: 'HPV positive and cytology negative with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'CXNC', + name: 'Ceasing due to no cervix', + recall: 'Ceasing letter', + }, + { + code: 'CUA', + name: 'Automatic ceasing due to age after non-response', + recall: 'Ceasing letter', + }, + { + code: 'CIC', + name: 'Ceasing due to informed consent at participant request', + recall: 'Ceasing letter', + }, + { + code: 'CMC', + name: 'Ceasing due to Mental Capacity Act at request of third party', + recall: 'Ceasing letter', + }, + { + code: 'CXAN', + name: 'Manual ceasing due to age', + recall: 'Ceasing letter', + }, + { + code: 'K-0A', + name: 'Negative self sample', + recall: 'Normal result letter', + }, + { + code: 'K-9R', + name: 'Positive self sample', + recall: 'Abnormal result letter', + }, + { + code: 'K1UH', + name: 'First inadequate self sample', + recall: '1st inadequate result letter', + }, + { + code: 'K2UH', + name: 'Second inadequate self sample', + recall: '2nd inadequate result letter', + }, + { code: 'K-0C', name: 'Ceased self sample', recall: 'Ceasing letter' }, + { + code: 'P0QS', + name: 'Old code: HPV positive, cytology negative and non-cervical glandular neoplasia positive result with early recall', + recall: 'Normal result letter', + }, + { + code: 'P1QR', + name: 'Old code: Cytology negative and non-cervical glandular neoplasia positive result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P1QS', + name: 'Old code: HPV positive and inadequate cytology result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P2QR', + name: 'Old code: HPV positive and negative cytology result with early recall', + recall: 'Normal result letter', + }, + { + code: 'P3QS', + name: 'Old code: Low-grade dyskaryosis cytology result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P4QS', + name: 'Old code: High-grade (severe) dyskaryosis cytology result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P5QS', + name: 'Old code: Abnormal squamous cytology result with urgent referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P6QS', + name: 'Old code: Abnormal endocervical cytology result with urgent referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P7QS', + name: 'Old code: High-grade (moderate) dyskaryosis cytology result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P8QS', + name: 'Old code: Borderline squamous cytology result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P9QS', + name: 'Old code: Borderline endocervical cytology result with referral to colposcopy', + recall: 'Abnormal result letter', + }, + { + code: 'P2QS', + name: 'Old code: Cytology negative with referral to colposcopy', + recall: 'Abnormal result letter', + }, + ]; + createSuggestionDropdown(data, 'letter-codes'); +