WIP isolate autocomplete component.
This commit is contained in:
Bryan Mauger
parent
f8cce48f29
commit
f8e1e70dbf
3 changed files with 205 additions and 146 deletions
184
src/layouts/insurance-company/insurance-company-question.vue
Normal file
184
src/layouts/insurance-company/insurance-company-question.vue
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<textboxQuestion
|
||||
v-model="parentAccountNumber"
|
||||
customInputId="autocomplete"
|
||||
class="mb-4 mt-5"
|
||||
cmsWidgetName="InsuranceCoQuestionWidget"
|
||||
includeSearchIcon />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import $ from "jquery";
|
||||
|
||||
// MAPPNG
|
||||
const termMapping = [
|
||||
{
|
||||
term: "1ST",
|
||||
altTerm: "FIRST",
|
||||
},
|
||||
{
|
||||
term: "FIRST",
|
||||
altTerm: "1ST",
|
||||
},
|
||||
{
|
||||
term: "AAA",
|
||||
altTerm: "American",
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "insurance-company-question",
|
||||
props: {
|
||||
originalList: Array,
|
||||
},
|
||||
// data() {
|
||||
// return {
|
||||
// searchableInsuranceCompanyList: [],
|
||||
// }
|
||||
// },
|
||||
computed: {
|
||||
searchableInsuranceCompanyList() {
|
||||
|
||||
return this.originalList.map(
|
||||
(insuranceCompany) => {
|
||||
insuranceCompany.altTerms = "";
|
||||
|
||||
termMapping.forEach((matchingTerm) => {
|
||||
if (
|
||||
insuranceCompany.accountName
|
||||
.toUpperCase()
|
||||
.includes(matchingTerm.term.toUpperCase())
|
||||
) {
|
||||
insuranceCompany.altTerms =
|
||||
insuranceCompany.altTerms + matchingTerm.altTerm?.toUpperCase() + " ";
|
||||
}
|
||||
});
|
||||
|
||||
return insuranceCompany;
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
findMatches(request, response) {
|
||||
const matches = [];
|
||||
const term = request?.term?.toUpperCase();
|
||||
this.searchableInsuranceCompanyList.forEach((company, index) => {
|
||||
if (
|
||||
company.accountName.indexOf(term) !== -1 ||
|
||||
company.altTerms.indexOf(term) !== -1
|
||||
) {
|
||||
matches.push(company.accountName);
|
||||
}
|
||||
});
|
||||
console.log("matches: ", matches);
|
||||
response(matches);
|
||||
},
|
||||
selectParentAccountNumber(parentAccountName) {
|
||||
if (!this.insuranceCompanyList) {
|
||||
console.error("No insurance companies found");
|
||||
return;
|
||||
}
|
||||
|
||||
var selectedItem = this.insuranceCompanyList.filter((item) => {
|
||||
return item.accountName === parentAccountName;
|
||||
});
|
||||
|
||||
if (selectedItem) {
|
||||
this.selectedParentAccount = selectedItem[0].parentAccountNumber;
|
||||
} else {
|
||||
console.error("Error locating " + parentAccountName);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const select = this.selectParentAccountNumber;
|
||||
setTimeout(() => {
|
||||
$("#autocomplete").autocomplete({
|
||||
source: this.findMatches,
|
||||
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");
|
||||
let regExpString = "(" + this.value + ")";
|
||||
let re = new RegExp(regExpString, "i");
|
||||
w.html((i, html) =>
|
||||
html.replace(re, "<span style='font-weight: bold;'>$1</span>")
|
||||
);
|
||||
}, 5);
|
||||
},
|
||||
select: function (event, ui) {
|
||||
select(ui.item.value);
|
||||
},
|
||||
});
|
||||
}, 0);
|
||||
|
||||
console.log("searchableInsuranceCompanyList: ", this.searchableInsuranceCompanyList);
|
||||
},
|
||||
components: {
|
||||
textboxQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
ul {
|
||||
&.ui-autocomplete {
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0.25rem;
|
||||
background: $white;
|
||||
border: 1px solid $gray;
|
||||
border-radius: 0.25rem;
|
||||
height: auto;
|
||||
max-height: 50%;
|
||||
overflow: auto;
|
||||
li {
|
||||
&:hover,
|
||||
.ui-state-active {
|
||||
background-color: $gray-100;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-menu-item-wrapper {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
padding-left: 0.25rem;
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
&.ui-state-active {
|
||||
border: 1px solid $gray-200;
|
||||
border-radius: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui-helper-hidden-accessible {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,12 +10,17 @@
|
|||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
|
||||
<textboxQuestion
|
||||
v-model="selectedQuery"
|
||||
customInputId="autocomplete"
|
||||
class="mb-4 mt-5"
|
||||
cmsWidgetName="InsuranceCoQuestionWidget"
|
||||
includeSearchIcon />
|
||||
|
||||
<insurance-company-question
|
||||
v-model="parentAccountNumber"
|
||||
:originalList="originalList" />
|
||||
|
||||
<!--
|
||||
<insurance-company-question
|
||||
v-model="parentAccountNumber"
|
||||
:searchableInsuranceCompanyList="searchableInsuranceCompanyList"
|
||||
:originalList="originalList" />
|
||||
-->
|
||||
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
|
|
@ -34,8 +39,8 @@
|
|||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
|
||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
import insuranceCompanyQuestion from "@/layouts/insurance-company/insurance-company-question";
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -46,23 +51,6 @@ import baseMixin from "@/mixins/base-mixin.js";
|
|||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
|
||||
import store from "@/store";
|
||||
import $ from "jquery";
|
||||
|
||||
// MAPPNG
|
||||
const termMapping = [
|
||||
{
|
||||
term: "1ST",
|
||||
altTerm: "FIRST",
|
||||
},
|
||||
{
|
||||
term: "FIRST",
|
||||
altTerm: "1ST",
|
||||
},
|
||||
{
|
||||
term: "AAA",
|
||||
altTerm: "American",
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "insurance-company",
|
||||
|
|
@ -89,55 +77,30 @@ 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("originalList: ", resultMap.insuranceCompanyList);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.originalList = resultMap.insuranceCompanyList;
|
||||
vm.searchableInsuranceCompanyList = searchableInsuranceCompanyList;
|
||||
});
|
||||
},
|
||||
//Added
|
||||
data() {
|
||||
return {
|
||||
parentAccountNumber: this.selectedParentAccountNumber(),
|
||||
searchableInsuranceCompanyList: [],
|
||||
originalList: [],
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectedParentAccountNumber() {
|
||||
return store?.order?.payment?.parentAccountNumber;
|
||||
},
|
||||
arePagePrerequisitesValid() {
|
||||
return store.getters.vehicle.carId !== null;
|
||||
},
|
||||
findMatches(request, response) {
|
||||
const matches = [];
|
||||
const term = request?.term?.toUpperCase();
|
||||
this.originalList.forEach((company, index) => {
|
||||
if (
|
||||
company.accountName.indexOf(term) !== -1 ||
|
||||
company.altTerms.indexOf(term) !== -1
|
||||
) {
|
||||
matches.push(company.accountName);
|
||||
}
|
||||
});
|
||||
response(matches);
|
||||
},
|
||||
backButtonAction() {
|
||||
// Go back to Quote page
|
||||
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
|
|
@ -155,102 +118,14 @@ export default {
|
|||
loadingModal: this.$refs.loadingModal,
|
||||
});
|
||||
},
|
||||
selectParentAccountNumber(parentAccountName) {
|
||||
if (!this.insuranceCompanyList) {
|
||||
console.error("No insurance companies found");
|
||||
return;
|
||||
}
|
||||
|
||||
var selectedItem = this.insuranceCompanyList.filter((item) => {
|
||||
return item.accountName === parentAccountName;
|
||||
});
|
||||
|
||||
if (selectedItem) {
|
||||
this.selectedParentAccount = selectedItem[0].parentAccountNumber;
|
||||
} else {
|
||||
console.error("Error locating " + parentAccountName);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const select = this.selectParentAccountNumber;
|
||||
setTimeout(() => {
|
||||
$("#autocomplete").autocomplete({
|
||||
source: this.findMatches,
|
||||
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");
|
||||
let regExpString = "(" + this.value + ")";
|
||||
let re = new RegExp(regExpString, "i");
|
||||
w.html((i, html) =>
|
||||
html.replace(re, "<span style='font-weight: bold;'>$1</span>")
|
||||
);
|
||||
}, 5);
|
||||
},
|
||||
select: function (event, ui) {
|
||||
select(ui.item.value);
|
||||
},
|
||||
});
|
||||
}, 0);
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
navbar,
|
||||
funnelSubHeader,
|
||||
textboxQuestion,
|
||||
Form,
|
||||
loadingModal,
|
||||
insuranceCompanyQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
ul {
|
||||
&.ui-autocomplete {
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0.25rem;
|
||||
background: $white;
|
||||
border: 1px solid $gray;
|
||||
border-radius: 0.25rem;
|
||||
height: 50%;
|
||||
overflow: auto;
|
||||
li {
|
||||
&:hover,
|
||||
.ui-state-active {
|
||||
background-color: $gray-100;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-menu-item-wrapper {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
padding-left: 0.25rem;
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
&.ui-state-active {
|
||||
border: 1px solid $gray-200;
|
||||
border-radius: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui-helper-hidden-accessible {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue