From 0403ad22d81671c478b074241c9f727758cd1bfd Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Mon, 11 Mar 2024 15:14:02 -0400 Subject: [PATCH 1/6] WIP --- .../insurance-company/insurance-company.vue | 107 +++++++++++++----- 1 file changed, 81 insertions(+), 26 deletions(-) diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue index da649eb3a..1b0ee15ab 100644 --- a/src/layouts/insurance-company/insurance-company.vue +++ b/src/layouts/insurance-company/insurance-company.vue @@ -109,17 +109,75 @@ export default { }, computed: { insuranceCompanyListTags() { + // return this.insuranceCompanyList.map((item) => { + // return item.accountName; + // }); + + const termMap = [ + { + term: "1st", + altTerm: "FIRST", + } + ]; + + const doTest = (testTerm) => { + return termMap.find((matchingTerm) => { + if (testTerm.includes(matchingTerm.term)) return matchingTerm.altTerm; + return; + }); + }; + + return this.insuranceCompanyList.map((item) => { - return item.accountName; + // return item.accountName; + return { + label: item.accountName, + altTerms: doTest(item.accountName) ? doTest(item.accountName) : "", + } }); + + + + + // return [ + // { + // "label": "1ST INSURANCE", + // "altTerms": "FIRST" + // }, + // { + // "label": "AAA INSURANCE", + // "altTerms": "AMERICAN AUTOMOTIVE AUTOMOBILE ASSOCIATION TRIPLE" + // }, + // { + // "label": "AMERICAN ROADS INSURANCE", + // "altTerms": "" + // }, + // { + // "label": "DONT USE US INSURANCE", + // "altTerms": "" + // }, + // { + // "label": "FIRST PIONEER INSURANCE", + // "altTerms": "1ST" + // }, + // ]; }, }, methods: { arePagePrerequisitesValid() { return store.getters.vehicle.carId !== null; }, - handleAutocompleteSelect(value) { - this.selectedQuery = value; + findMatches(request, response) { + const matches = []; + const term = request?.term?.toUpperCase(); + console.log(this.insuranceCompanyListTags); + this.insuranceCompanyListTags.forEach((tag, index) => { + if (tag.label.indexOf(term) !== -1 || tag.altTerms.indexOf(term) !== -1) { + matches.push(tag); + } + }); + + response(matches); }, backButtonAction() { // Go back to Quote page @@ -131,30 +189,25 @@ export default { }, }, mounted() { - const select = this.handleAutocompleteSelect; + setTimeout(() => { + $("#autocomplete").autocomplete({ + source: this.findMatches, + position: { + my: "left top+6", + }, + minLength: 0, // Necessary to display menu when clearing input - $("#autocomplete").autocomplete({ - source: this.insuranceCompanyListTags, - position: { - my: "left top+6", - }, - minLength: 0, // Necessary to display menu when clearing input - // Bold matching letters as you type in the input - search: function (event, ui) { - setTimeout(() => { - let w = $(this).autocomplete("widget").find("div"), - re = new RegExp("(" + this.value + ")", "i"); - w.html((i, html) => html.replace(re, "$1")); - }, 5); - }, - }); - }, - watch: { - selectedQuery(newValue, oldValue) { - if (oldValue.length > 0 && newValue.length === 0) { - $("#autocomplete").autocomplete("search", ""); - } - }, + // Bold matching letters as you type in the input + search: function (event, ui) { + setTimeout(() => { + let w = $(this).autocomplete("widget").find("div"); + let regExpString = "(" + this.value + ")"; + let re = new RegExp(regExpString, "i"); + w.html((i, html) => html.replace(re, "$1")); + }, 5); + }, + }); + }, 5); }, components: { funnelHeader, @@ -176,6 +229,8 @@ ul { background: $white; border: 1px solid $gray; border-radius: 0.25rem; + height: 50%; + overflow: auto; li { &:hover, .ui-state-active { From 7057f6bf52531529adf7b301946aa8322eaebef3 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Mon, 11 Mar 2024 16:28:35 -0400 Subject: [PATCH 2/6] CSR-1891: use term mapping to update co list --- .../insurance-company/insurance-company.vue | 122 ++++++------------ 1 file changed, 36 insertions(+), 86 deletions(-) diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue index 1b0ee15ab..94fa57001 100644 --- a/src/layouts/insurance-company/insurance-company.vue +++ b/src/layouts/insurance-company/insurance-company.vue @@ -41,35 +41,24 @@ import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { settleAllPromises } from "@/helpers/layout-helper"; import { storeActions } from "@/constants/store-actions"; -import { errorMessages } from "@/constants/error-messages"; -import { - getDamageString, - getIsWindshieldOnly, - isGlassAvailableForCarId, -} from "@/helpers/damage-helper"; -import { required, regex } from "@/helpers/validation-rules"; import { Form, defineRule } from "vee-validate"; -import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper"; -import { routerParams } from "@/router/router-constants/router-params"; import baseMixin from "@/mixins/base-mixin.js"; import store from "@/store"; import vinPagesMixin from "@/mixins/vin-pages-mixin"; import $ from "jquery"; -// DEFINE VALIDATION RULES -defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); -defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)); -defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED)); -defineRule( - "email-address-format", - regex( - /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/, - errorMessages.EMAIL_ADDRESS_FORMAT - ) -); -defineRule("vin-required", required(errorMessages.VIN_REQUIRED)); -defineRule("vin-format", regex(/^[a-hA-Hj-nJ-NpPr-zR-Z0-9]{17}$/, errorMessages.VIN_FORMAT)); +// MAPPNG +const termMapping = [ + { + term: "1ST", + altTerm: "FIRST", + }, + { + term: "AAA", + altTerm: "American" + } +]; export default { name: "insurance-company", @@ -96,73 +85,36 @@ export default { ]; const resultMap = await settleAllPromises(promiseResultMap); + + const searchableInsuranceCompanyList = resultMap.insuranceCompanyList.map(( insuranceCompany ) => { + + insuranceCompany.altTerms = ""; + + termMapping.forEach((matchingTerm) => { + if (insuranceCompany.accountName.toUpperCase().includes(matchingTerm.term.toUpperCase())) { + insuranceCompany.altTerms = insuranceCompany.altTerms + matchingTerm.altTerm?.toUpperCase() + " "; + } + }); + + return insuranceCompany; + + }); + + console.log("searchableInsuranceCompanyList: ", searchableInsuranceCompanyList); + // Call the "next" function to complete the transition to this page. next((vm) => { vm.setCmsContent(resultMap.cmsContent); - vm.insuranceCompanyList = resultMap.insuranceCompanyList; + vm.originalList = resultMap.insuranceCompanyList; + vm.searchableInsuranceCompanyList = searchableInsuranceCompanyList; }); }, data() { return { - insuranceCompanyList: [], + searchableInsuranceCompanyList: [], + originalList: [], }; }, - computed: { - insuranceCompanyListTags() { - // return this.insuranceCompanyList.map((item) => { - // return item.accountName; - // }); - - const termMap = [ - { - term: "1st", - altTerm: "FIRST", - } - ]; - - const doTest = (testTerm) => { - return termMap.find((matchingTerm) => { - if (testTerm.includes(matchingTerm.term)) return matchingTerm.altTerm; - return; - }); - }; - - - return this.insuranceCompanyList.map((item) => { - // return item.accountName; - return { - label: item.accountName, - altTerms: doTest(item.accountName) ? doTest(item.accountName) : "", - } - }); - - - - - // return [ - // { - // "label": "1ST INSURANCE", - // "altTerms": "FIRST" - // }, - // { - // "label": "AAA INSURANCE", - // "altTerms": "AMERICAN AUTOMOTIVE AUTOMOBILE ASSOCIATION TRIPLE" - // }, - // { - // "label": "AMERICAN ROADS INSURANCE", - // "altTerms": "" - // }, - // { - // "label": "DONT USE US INSURANCE", - // "altTerms": "" - // }, - // { - // "label": "FIRST PIONEER INSURANCE", - // "altTerms": "1ST" - // }, - // ]; - }, - }, methods: { arePagePrerequisitesValid() { return store.getters.vehicle.carId !== null; @@ -170,13 +122,11 @@ export default { findMatches(request, response) { const matches = []; const term = request?.term?.toUpperCase(); - console.log(this.insuranceCompanyListTags); - this.insuranceCompanyListTags.forEach((tag, index) => { - if (tag.label.indexOf(term) !== -1 || tag.altTerms.indexOf(term) !== -1) { - matches.push(tag); + this.originalList.forEach((company, index) => { + if (company.accountName.indexOf(term) !== -1 || company.altTerms.indexOf(term) !== -1) { + matches.push(company.accountName); } }); - response(matches); }, backButtonAction() { @@ -207,7 +157,7 @@ export default { }, 5); }, }); - }, 5); + }, 0); }, components: { funnelHeader, From 224fd66c0cd8c24406e3f2fc4ec4c62ba595099a Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Mon, 11 Mar 2024 16:32:58 -0400 Subject: [PATCH 3/6] WIP add names to mapping. --- src/layouts/insurance-company/insurance-company.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue index 94fa57001..00cfb97d0 100644 --- a/src/layouts/insurance-company/insurance-company.vue +++ b/src/layouts/insurance-company/insurance-company.vue @@ -54,6 +54,10 @@ const termMapping = [ term: "1ST", altTerm: "FIRST", }, + { + term: "FIRST", + altTerm: "1ST", + }, { term: "AAA", altTerm: "American" From 75c312e66e54e9711146706ee55159e850ed9fc0 Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Tue, 12 Mar 2024 08:56:55 -0400 Subject: [PATCH 4/6] CSR-1891 set font weight to bold for matching characters --- src/layouts/insurance-company/insurance-company.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue index 00cfb97d0..fba35927f 100644 --- a/src/layouts/insurance-company/insurance-company.vue +++ b/src/layouts/insurance-company/insurance-company.vue @@ -157,7 +157,7 @@ export default { let w = $(this).autocomplete("widget").find("div"); let regExpString = "(" + this.value + ")"; let re = new RegExp(regExpString, "i"); - w.html((i, html) => html.replace(re, "$1")); + w.html((i, html) => html.replace(re, "$1")); }, 5); }, }); From f0687661d05dfad9d9ff487b25e6c6dd04cc1302 Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Tue, 12 Mar 2024 09:09:15 -0400 Subject: [PATCH 5/6] Remove console.log. --- src/layouts/insurance-company/insurance-company.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue index fba35927f..999ca41c1 100644 --- a/src/layouts/insurance-company/insurance-company.vue +++ b/src/layouts/insurance-company/insurance-company.vue @@ -104,8 +104,6 @@ export default { }); - console.log("searchableInsuranceCompanyList: ", searchableInsuranceCompanyList); - // Call the "next" function to complete the transition to this page. next((vm) => { vm.setCmsContent(resultMap.cmsContent); From 8cb712c2ad46a544f50a9821853fc4cb589e0563 Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Tue, 12 Mar 2024 09:56:45 -0400 Subject: [PATCH 6/6] CSR-1891 re-add select code, format. --- .../insurance-company/insurance-company.vue | 44 ++++++++++++------- 1 file changed, 29 insertions(+), 15 deletions(-) diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue index 065432c90..e880b1534 100644 --- a/src/layouts/insurance-company/insurance-company.vue +++ b/src/layouts/insurance-company/insurance-company.vue @@ -60,8 +60,8 @@ const termMapping = [ }, { term: "AAA", - altTerm: "American" - } + altTerm: "American", + }, ]; export default { @@ -89,19 +89,24 @@ export default { const resultMap = await settleAllPromises(promiseResultMap); - const searchableInsuranceCompanyList = resultMap.insuranceCompanyList.map(( insuranceCompany ) => { + const searchableInsuranceCompanyList = resultMap.insuranceCompanyList.map( + (insuranceCompany) => { + insuranceCompany.altTerms = ""; - insuranceCompany.altTerms = ""; + termMapping.forEach((matchingTerm) => { + if ( + insuranceCompany.accountName + .toUpperCase() + .includes(matchingTerm.term.toUpperCase()) + ) { + insuranceCompany.altTerms = + insuranceCompany.altTerms + matchingTerm.altTerm?.toUpperCase() + " "; + } + }); - termMapping.forEach((matchingTerm) => { - if (insuranceCompany.accountName.toUpperCase().includes(matchingTerm.term.toUpperCase())) { - insuranceCompany.altTerms = insuranceCompany.altTerms + matchingTerm.altTerm?.toUpperCase() + " "; - } - }); - - return insuranceCompany; - - }); + return insuranceCompany; + } + ); // Call the "next" function to complete the transition to this page. next((vm) => { @@ -124,7 +129,10 @@ export default { const matches = []; const term = request?.term?.toUpperCase(); this.originalList.forEach((company, index) => { - if (company.accountName.indexOf(term) !== -1 || company.altTerms.indexOf(term) !== -1) { + if ( + company.accountName.indexOf(term) !== -1 || + company.altTerms.indexOf(term) !== -1 + ) { matches.push(company.accountName); } }); @@ -165,6 +173,7 @@ export default { }, }, mounted() { + const select = this.selectParentAccountNumber; setTimeout(() => { $("#autocomplete").autocomplete({ source: this.findMatches, @@ -179,9 +188,14 @@ export default { let w = $(this).autocomplete("widget").find("div"); let regExpString = "(" + this.value + ")"; let re = new RegExp(regExpString, "i"); - w.html((i, html) => html.replace(re, "$1")); + w.html((i, html) => + html.replace(re, "$1") + ); }, 5); }, + select: function (event, ui) { + select(ui.item.value); + }, }); }, 0); },