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

WIP update countdown color, add text update checkbox.

Browse source
This commit is contained in:
Bryan Mauger 2023-05-30 15:07:51 -04:00
parent a343b4bedb
commit 8e98b62b2e
2 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/digital-components/textarea-question/textarea-question.vue
View file

@ -19,7 +19,7 @@
tabindex="0" tabindex="0"
class="caption mt-2 mb-0" class="caption mt-2 mb-0"
id="charactersremaining" id="charactersremaining"
:style="{ color: countdownColor }"> :class="[urgentCountdown ? 'urgent-countdown' : '']">
{{ remainingCount }}/{{ maxLength }} characters remaining {{ remainingCount }}/{{ maxLength }} characters remaining
</p> </p>
</div> </div>
@ -74,10 +74,9 @@ export default {
remainingCount() { remainingCount() {
return this.maxLength - this.value.length; return this.maxLength - this.value.length;
}, },
countdownColor() { urgentCountdown() {
// Chanage text color to red when 10% of max remain return this.remainingCount <= this.maxLength * 0.1 ? true : false;
return this.remainingCount <= this.maxLength * 0.1 ? "red" : ""; }
},
}, },
methods: { methods: {
updateCount() { updateCount() {
@ -119,6 +118,9 @@ export default {
} }
p { p {
color: $gray-500; color: $gray-500;
&.urgent-countdown {
color: $red;
}
} }
} }
</style> </style>

14
src/layouts/customer-details/customer-details.vue
View file

@ -28,8 +28,12 @@
cmsWidgetName="phoneNumberQuestionWidget" cmsWidgetName="phoneNumberQuestionWidget"
v-model="phoneNumber" v-model="phoneNumber"
isRequired isRequired
validationRules="phone-number-required" validationRules="phone-number-required" />
/> <checkbox
class="mb-5"
cmsWidgetName="TextMeQuestionWidget"
:checkboxLabel="checkboxLabelCopy"
v-model="textMeUpdates"/>
<textareaQuestion <textareaQuestion
class="mb-4" class="mb-4"
v-model="techNotes" v-model="techNotes"
@ -54,6 +58,7 @@ import textareaQuestion from "@/digital-components/textarea-question/textarea-qu
import textboxQuestion from "@/digital-components/textbox-question/textbox-question"; import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import phoneNumberQuestion from "@/digital-components/phonenumber-question/phonenumber-question"; import phoneNumberQuestion from "@/digital-components/phonenumber-question/phonenumber-question";
import textBlock from "@/digital-components/text-block/text-block"; import textBlock from "@/digital-components/text-block/text-block";
import checkbox from "@/ux-components/checkbox/checkbox";
//Supporting files //Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper"; import { settleAllPromises } from "@/helpers/layout-helper";
@ -105,12 +110,16 @@ export default {
lastName: "", lastName: "",
emailAddress: "", emailAddress: "",
phoneNumber: "", phoneNumber: "",
textMeUpdates: "",
}; };
}, },
computed: { computed: {
textAreaLabelCopy() { textAreaLabelCopy() {
return this.getCmsContent("TextAreaContentWidget", "QuestionText"); return this.getCmsContent("TextAreaContentWidget", "QuestionText");
}, },
checkboxLabelCopy() {
return this.getCmsContent("TextMeQuestionWidget", "QuestionText");
},
}, },
components: { components: {
funnelHeader, funnelHeader,
@ -121,6 +130,7 @@ export default {
Form, Form,
textBlock, textBlock,
phoneNumberQuestion, phoneNumberQuestion,
checkbox
}, },
}; };
</script> </script>