jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-408 | Refactor alerts and alertcopy interaction

Browse source
This commit is contained in:
Scott Kiener 2022-05-12 16:39:41 -04:00
parent e054eef031
commit 5ab0d527b2
1 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/ux-components/alert/alert.vue
View file

@ -5,15 +5,17 @@
:class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
>
<p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
<p v-if="splitAlertCopyForLink.length">
<template v-for="copy in splitAlertCopyForLink" :key="copy">
<span v-if="copy.includes('routerLink:')" class="m-0 text-body">
<router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
</span>
<span v-else class="m-0 text-body" v-html="copy"></span>
</template>
</p>
<p v-else class="m-0 text-body" v-html="alertCopy"></p>
<template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
<p class="m-0 text-body small" v-if="!paragraph.includes('routerLink:')" v-html="paragraph"></p>
<p class="m-0 text-body small" v-else>
<template v-for="copy in splitParagraphForRouterLink(paragraph)" :key="copy">
<span v-if="!copy.includes('routerLink:')" v-html="copy"></span>
<span v-else>
<router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
</span>
</template>
</p>
</template>
<button
type="button"
class="btn-close p-2"
@ -57,10 +59,18 @@ export default {
},
alertCopy(){
return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
//return "<p style='display:none'>This is just a long string. {routerLink:estimate,provide your VIN} This is just a long string.</p>How Did you Even manage this?<p>This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.</p>";
},
splitAlertCopyForLink(){
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
return this.alertCopy.split(/{(.*?)}/g);
splitAlertCopyForParagraphTag(){
// splits the alertCopy on <p ... > (with or without attributes) and </p>
// filter removes empty strings that are a result of string.split with regex
return this.alertCopy.split(/(?:<p(?:.*?)>)|(?:<\/p>)/g).filter(paragraph => paragraph !== "");
},
},
methods: {
splitParagraphForRouterLink(paragraph){
// splits paragraph on { ... } such as {routerlink: ...}
return paragraph.split(/{(.*?)}/g);
}
},
};