From 4b9700716f5192fe95db90f09dfd9b3214a61e4c Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 13 Jun 2022 20:47:47 -0400
Subject: [PATCH] minor logic updates to shared list- buttons, new
 question-chain component

---
 jest.config.js                                |   1 +
 .../button-question/button-question.vue       |   5 +
 .../question-chain/question-chain.vue         | 130 ++++++++++++++++++
 .../list-button-horizontal.vue                |  10 +-
 src/ux-components/list-button/list-button.vue |  10 +-
 src/ux-components/list-card/list-card.vue     |  10 +-
 6 files changed, 160 insertions(+), 6 deletions(-)
 create mode 100644 src/common-components/question-chain/question-chain.vue

diff --git a/jest.config.js b/jest.config.js
index 0dd06d9be..3eb317d81 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -26,6 +26,7 @@ module.exports = {
     "!src/ux-components/alert\alert.vue",
     "!src/helpers/validation-rules.js",
     "!src/common-components/menu-modal/menu-modal.vue",
+    "!src/common-components/question-chain/question-chain",
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index de00d3ce0..7bf4d56c8 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -36,6 +36,7 @@
               data-test="button"
               :validationRules="validationRules"
               :class="[suppressError ? 'alertError' : '']"
+              :clearOnUnmount="clearOnUnmount"
             />
           </div>
       </fieldset>
@@ -84,6 +85,10 @@ export default {
     validationRules: String,
     suppressError: Boolean,
     useTextForValue: Boolean,
+    clearOnUnmount: {
+      type: Boolean,
+      default: true
+    }
   },
   computed: {
     getFieldSetClasses() {
diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue
new file mode 100644
index 000000000..fb61608d5
--- /dev/null
+++ b/src/common-components/question-chain/question-chain.vue
@@ -0,0 +1,130 @@
+<template>
+    <div v-for="(q, i) in questions" :key="i">
+        <transition appear name="fade" mode="out-in">
+            <buttonQuestion
+                v-if="q.questionSequence === currentQuestion"
+                class="radioQuestion"
+                :questionText="q.questionText"
+                :answers="q.answers"
+                :groupName="`${questionData.glassName}-${questionData.glassLocation}-${i}`"
+                textPosition="text-start"
+                v-model="selectedValue"
+                isRequired=true
+                :validationRules="validationRules"
+                :clearOnUnmount=false
+            />
+        </transition>
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+export default {
+  name: "questionChain",
+  data() {
+    return {
+      models: Array,
+      currentQuestion: 1,
+      answeredQuestions: [],
+    };
+  },
+  props: {
+    questionData: Array,
+    validationRules: String,
+    modelValue: String,
+  },
+  computed: {
+    questions() {
+        const questions = this.questionData.partQuestions.map((q, i) => {
+            return {
+                questionText: q.questionText,
+                questionSequence: q.questionSequence,
+                answers: q.answers.map((a) => {
+                    return {
+                        Text: a.answerText,
+                        // Name will either be nextQuestionSequence or answerResult
+                        Name: a.nextQuestionSequence ? a.nextQuestionSequence : "answer-" + a.answerResult,
+                        nextQuestionSequence: a.nextQuestionSequence,
+                        answerResult: a.answerResult,
+                    }
+                })
+            }
+        });
+        // add an empty item to be array[0] since we start with 1
+        questions.unshift({});
+        return questions;
+    },
+    questionText() {
+        return this.questions[this.currentQuestion]?.questionText;
+    },
+    questionAnswers() {
+        return this.questions[this.currentQuestion]?.answers;
+    },
+    questionGroupname() {
+        return `${this.questionData.glassName}-${this.questionData.glassLocation}-${this.currentQuestion}`;
+    },
+    selectedValue: {
+      get: function() {
+        return this.modelValue;
+      },
+      set: async function(returnedAnswer) {
+        const isNewModelValueComplete = await this.getNewModelValue(returnedAnswer);
+
+        if (isNewModelValueComplete) {
+            this.$emit("update:modelValue", isNewModelValueComplete);
+        }
+      }
+    }
+  },
+  methods: {
+      getNewModelValue(returnedAnswer) {
+            if (!returnedAnswer || !Array.isArray(returnedAnswer)) { return false }
+            const lastAnswer = returnedAnswer[returnedAnswer.length - 1];
+            const currentQuestion = this.questions[this.currentQuestion];
+                console.log('currentQuestion: ', currentQuestion)
+                    console.log('currentQuestion.answers: ', currentQuestion.answers)
+
+            if (lastAnswer.indexOf("answer-") === 0) {
+                // if it is an answerResult
+                const finalAnswer = lastAnswer.slice(7);
+
+                const currentQuestionSelectedAnswer = currentQuestion.answers.find(
+                    ({ answerResult }) => answerResult === finalAnswer
+                );
+
+                // add current item to list of answered questions
+                this.answeredQuestions.push(
+                    {
+                        questionText: currentQuestion.questionText,
+                        selectedAnswerText: currentQuestionSelectedAnswer.Text,
+                    }
+                );
+
+                return {
+                    answerResult: finalAnswer,
+                    answeredQuestions: this.answeredQuestions,
+                };
+            } else {
+                const currentQuestionSelectedAnswer = currentQuestion.answers.find(
+                    ({ nextQuestionSequence }) => nextQuestionSequence === parseInt(lastAnswer)
+                );
+
+                // add current item to list of answered questions
+                this.answeredQuestions.push(
+                    {
+                        questionText: currentQuestion.questionText,
+                        selectedAnswerText: currentQuestionSelectedAnswer.Text,
+                    }
+                );
+
+                this.currentQuestion = parseInt(lastAnswer); // update count to display next question
+                return false;
+            }
+        }
+  },
+  components: {
+    buttonQuestion,
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 0938bf62d..dfd322cb3 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -78,6 +78,10 @@ export default {
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    clearOnUnmount: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -93,8 +97,10 @@ export default {
     }
   },
   unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
-    this.checkValue = false;
-    this.handleCheckChange();
+    if (this.clearOnUnmount) {
+      this.checkValue = false;
+      this.handleCheckChange();
+    }
   },
   methods: {
     displayLoader() {
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index a15cbb38c..861619093 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -78,6 +78,10 @@ export default {
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    clearOnUnmount: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -93,8 +97,10 @@ export default {
     }
   },
   unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
-    this.checkValue = false;
-    this.handleCheckChange();
+    if (this.clearOnUnmount) {
+      this.checkValue = false;
+      this.handleCheckChange();
+    }
   },
   methods: {
     displayLoader() {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index ac88c9b8e..88aad0b6a 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -86,6 +86,10 @@ export default {
     selectedValues: [Array, String],
     modelValue: Object,
     hasError: Boolean,
+    clearOnUnmount: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -100,8 +104,10 @@ export default {
     }
   },
   unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
-    this.checkValue = false;
-    this.handleCheckChange();
+    if (this.clearOnUnmount) {
+      this.checkValue = false;
+      this.handleCheckChange();
+    }
   },
   computed: {
     getLabelClasses() {