DigitalConsumer.FixMyGlass/src/common-components/button-question/button-question.vue

<template>
  <div :class="isOverflowScrollable ? 'button_question' : ''">
    <div v-if="questionText" class="mt-6 mb-4 d-flex">
      <span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
    </div>
    <div class="w-100 d-flex justify-content-center">
      <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
        <legend class="sr-only">{{groupName}}</legend>
          <div :class="getComponentWrapperClasses">
            <component
              :is="buttonType"
              v-for="answer in answers"
              :key="answer.Name ? answer.Name : answer"
              @isCheckedChanged="handleCheckedChanged"
              :buttonID="answer.Name ? answer.Name : answer"
              :value="answer.Name ? answer.Name : answer"
              :buttonLabel="answer.Text ? answer.Text : answer"
              :buttonLabelSubCopy="answer.SubText"
              :textPosition="textPosition"
              :isMultiSelect="isMultiSelect"
              :groupName="groupName"
              :loaderEnabled="loaderEnabled"
              :loaderColor="loaderColor"
              :loaderPosition="loaderPosition"
              :sizeInRem="sizeInRem"
              :isWide="isWide"
              :isRequired="isRequired"
              :buttonImage="answer.AnswerImageUrl"
              :buttonImageId="answer.ImageId"
              :altText="answer.Name ? answer.Name : answer"
              screenReaderOnlyText="(opens new window)"
              :colLength="this.answers.length < 3 ? '' : '-4'"
              :selectedButtonIDs="selectedValues"
              data-test="button"
            />
          </div>
      </fieldset>
    </div>
  </div>
</template>

<script>
import listButton from "@/ux-components/list-button/list-button";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
import listCard from "@/ux-components/list-card/list-card";
import radio from "@/ux-components/radio/radio";

export default {
  name: "buttonQuestion",
  props: {
    buttonType: {
      type: String,
      default: "listButton",
    },
    isMultiSelect: Boolean,
    groupName: String,
    questionText: String,
    answers: Array,
    textPosition: {
      type: String,
      default: "text-center",
    },
    loaderEnabled: Boolean,
    loaderColor: {
      type: String,
      default: "blue",
    },
    loaderPosition: {
      type: String,
      default: "right",
    },
    sizeInRem: {
      type: [String, Number],
      default: 1.5,
    },
    isRequired: Boolean,
    isOverflowScrollable: Boolean,
    isWide: Boolean,
    modelValue: Array,
  },
  computed: {
    getFieldSetClasses() {
      return this.isOverflowScrollable
        ? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
        : "";
    },
    getComponentWrapperClasses() {
      let classes;
      switch (this.buttonType) {
        case "listButton":
          classes = "w-100";
          break;
        case "listButtonHorizontal":
          classes = "d-flex flex-row p-0";
          break;
        case 'listCard':
          classes = 'row justify-content-center g-2'
          break;
        case 'radio':
          classes = 'ui-radio d-flex'
          break;
      }
      return classes;
    },
    selectedValues: {
      get: function() {
        return this.modelValue;
      },
      set: function(newValue) {
        this.$emit("update:modelValue", newValue);
      }
    },
  },
  mounted(){
    if(Array.isArray(this.answers) && this.answers.length === 1) {
      const newSelectedValues = this.selectedValues;
      newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
      this.selectedValues = newSelectedValues;
    }
  },
  methods: {
    handleCheckedChanged(val) {
      if(this.isMultiSelect) {
        // Add or remove item to array of data to emit
        const newSelectedValues = this.selectedValues;
        val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
        this.selectedValues = newSelectedValues;
      } else {
        this.selectedValues = [val.buttonId]
      }
    },
  },
  components: {
    listButton,
    listButtonHorizontal,
    listCard,
    radio,
  },
};
</script>

<style lang="scss" scoped>
.button_question {
  color: $black;
  height: calc(100vh - 280px);

  .overflow-scroll {
    // Height will be determined by overall height of content above list
    height: calc(100% - 320px);
    -webkit-overflow-scrolling: touch;
  }
}
</style>