DigitalConsumer.FixMyGlass/src/layouts/vehicle-damage/windshield-options/windshield-options.vue

<template>
    <transition name="fade">
        <div class="windshield-options" aria-live="polite">
            <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
                :isAvailable=isWindshieldDamageLocation
                :suppressError="suppressError"
                groupName="WindshieldDamageTypeQuestion"
                v-model="selectedWindshieldDamageTypeValues" 
            />
            <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
                :isAvailable=isRepairOptionSelected
                groupName="WindshieldChipCountQuestion"
                v-model="selectedWindshieldChipCountValues" 
            />
            <replaceOptionsQuestion ref="replaceOptionsQuestion"
                :isAvailable=isReplaceOptionSelected
                groupName="WindshieldReplaceOptions"
                v-model="selectedWindshieldReplaceOptionsValues"
            />
        </div>
    </transition>
</template>

<script>
import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
export default ({
    name: "windshieldOptions",
    data(){
        return {
            chipCountQuestionText: String,
            chipCountAnswersFromCms: Array,

            selectedWindshieldDamageType: null,
            selectedWindshieldChipCount: null,
            selectedWindshieldReplaceOptions: [],
        }
    },

    props: {
        modelValue: Array,
        selectedDamageLocations: Array,
        selectedChipCount: Array,
        selectedReplaceOptions: Array,
        suppressError: Boolean
    },

    methods: {
        initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms, 
            windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){

            this.chipCountQuestionText = windshieldChipCountQuestionFromCms.QuestionText;
            this.chipCountAnswersFromCms = windshieldChipCountQuestionFromCms.Answers;

            this.$refs.windshieldDamageTypeQuestion.initializeComponent(windshieldDamageTypeQuestionFromCms);
            this.$refs.windshieldChipCountQuestion.initializeComponent(windshieldChipCountQuestionFromCms);
            this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
        },
        getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
            return {
                selectedWindshieldDamageType: selectedWindshieldDamageType,
                selectedWindshieldChipCount: selectedWindshieldChipCount,
                selectedWindshieldReplaceOptions: selectedWindshieldReplaceOptions
            }
        },
    },
    computed: {
        selectedValues: {
            get: function() {
                return this.modelValue;
            },
            set: function(newValue) {
                this.$emit("update:modelValue", newValue);
            }
        },
        selectedWindshieldDamageTypeValues:{
            get: function() {
                return this.selectedValues.selectedWindshieldDamageType;
            },
            set: function(newValue) {
                this.selectedValues = this.getWindshieldOptions(newValue, this.selectedWindshieldChipCountValues, this.selectedWindshieldReplaceOptionsValues);
            }
        },
        selectedWindshieldChipCountValues: {
            get: function() {
                return this.selectedValues.selectedChipCount;
            },
            set: function(newValue) {
                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
            }
        },
        selectedWindshieldReplaceOptionsValues: {
            get: function() {
                return this.selectedValues.selectedWindshieldReplaceOptions;
            },
            set: function(newValue) {
                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, this.selectedWindshieldChipCountValues, newValue);
            }
        },
        isWindshieldDamageLocation() {
            return  this.selectedDamageLocations.some(selectedDamages => 
                {
                    const categoryAndGlass = selectedDamages.split('-'); //ie: "Suv-Windshield" Splits the answers into [0]"Suv" [1]"Windshield"
                    return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
                });
        },
        isRepairOptionSelected(){
            if (!this.selectedWindshieldDamageTypeValues) return false;

            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation;
        },
        isReplaceOptionSelected(){
            if (!this.selectedWindshieldDamageTypeValues) return false;

            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
        },
    },
    components: {
        windshieldDamageTypeQuestion,
        windshieldChipCountQuestion,
        replaceOptionsQuestion
    },
})
</script>