DigitalConsumer.ISS/src/layouts/vehicle-damage/side-door-options/side-door-options.vue

<template>
    <div class="side-door-options">
        <transition
            name="fade"
            mode="out-in">
            <div
                v-if="selectedDamageLocations.includes('SideDoor')"
                class="side-doors"
                aria-live="polite">
                <buttonQuestion
                    v-model="selectedDoorSidesValues"
                    :questionText="questionText"
                    isMultiSelect
                    :answers="answersToDisplay"
                    :groupName="groupName"
                    buttonTypeString="listCard"
                    validationRules="damage-side-required"
                    isRequired />
            </div>
        </transition>
        <replaceOptionsQuestion
            ref="driverSideOptions"
            v-model="selectedDriverSideReplaceOptionsValues"
            cmsWidgetName="DriverSideReplaceOptionsQuestion"
            :isAvailable="isDriverSideReplaceOptionsQuestionAvailable"
            groupName="driverSideOptions"
            isMultiSelect
            filterByVehicleCategory
            validationRules="driver-side-options-required"
            isRequired />
        <replaceOptionsQuestion
            ref="passengerSideOptions"
            v-model="selectedPassengerSideReplaceOptionsValues"
            cmsWidgetName="PassengerSideReplaceOptionsQuestion"
            :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable"
            groupName="passengerSideOptions"
            isMultiSelect
            filterByVehicleCategory
            validationRules="passenger-side-options-required"
            isRequired />
    </div>
</template>

<script>
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import replaceOptionsQuestion from '@/layouts/vehicle-damage/replace-options-question/replace-options-question.vue';
import { defineRule } from 'vee-validate';
import { required } from '@/helpers/validation-rules';
import errorMessages from '@/constants/error-messages';
import damageLocationsSelected from '@/constants/damage-locations-selected';

// DEFINE VALIDATION RULES
defineRule('damage-side-required', required(errorMessages.DAMAGE_SIDE_REQUIRED));
defineRule('driver-side-options-required', required(errorMessages.DRIVER_SIDE_OPTIONS_REQUIRED));
defineRule('passenger-side-options-required', required(errorMessages.PASSENGER_SIDE_OPTIONS_REQUIRED));

export default {
    name: 'side-door-options',
    components: {
        buttonQuestion,
        replaceOptionsQuestion
    },
    props: {
        groupName: String,
        modelValue: Object,
        selectedDamageLocations: Array,
        cmsWidgetName: String
    },
    emits: ['update:modelValue'],
    computed: {
        questionText() {
            return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
        },
        answersFromCms() {
            return this.getCmsContent(this.cmsWidgetName, 'Answers');
        },
        selectedValues: {
            get() {
                return this.modelValue;
            },
            set(newValue) {
                this.$emit('update:modelValue', newValue);
            }
        },
        selectedDoorSidesValues: {
            get() {
                return this.selectedValues.selectedDoorSides;
            },
            set(newValue) {
                this.selectedValues = this.getSideDoorReplacementOptions(
                    newValue,
                    this.selectedValues.selectedDriverSideReplaceOptions,
                    this.selectedValues.selectedPassengerSideReplaceOptions
                );
            }
        },
        selectedDriverSideReplaceOptionsValues: {
            get() {
                return this.selectedValues.selectedDriverSideReplaceOptions;
            },
            set(newValue) {
                this.selectedValues = this.getSideDoorReplacementOptions(
                    this.selectedValues.selectedDoorSides,
                    newValue,
                    this.selectedValues.selectedPassengerSideReplaceOptions
                );
            }
        },
        selectedPassengerSideReplaceOptionsValues: {
            get() {
                return this.selectedValues.selectedPassengerSideReplaceOptions;
            },
            set(newValue) {
                this.selectedValues = this.getSideDoorReplacementOptions(
                    this.selectedValues.selectedDoorSides,
                    this.selectedValues.selectedDriverSideReplaceOptions,
                    newValue
                );
            }
        },
        answersToDisplay() {
            const filteredAnswers = Array.isArray(this.answersFromCms)
                ? this.answersFromCms.filter((ans) => {
                    const name = ans.Name.split('-');
                    return name[0].toUpperCase() === this.mainStore.vehicle.category;
                })
                : [];

            return filteredAnswers.map((ans) => {
                const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
                ans.Name = newName;
                return ans;
            });
        },
        isDriverSideReplaceOptionsQuestionAvailable() {
            return (
                Array.isArray(this.selectedDoorSidesValues)
                && this.selectedDoorSidesValues.includes(damageLocationsSelected.DRIVERSIDE)
                && Array.isArray(this.selectedDamageLocations)
                && this.selectedDamageLocations.includes(damageLocationsSelected.SIDEDOOR)
            );
        },
        isPassengerSideReplaceOptionsQuestionAvailable() {
            return (
                Array.isArray(this.selectedDoorSidesValues)
                && this.selectedDoorSidesValues.includes(damageLocationsSelected.PASSENGERSIDE)
                && Array.isArray(this.selectedDamageLocations)
                && this.selectedDamageLocations.includes(damageLocationsSelected.SIDEDOOR)
            );
        }
    },
    methods: {
        initializeComponent(driverSideOptions, passengerSideOptions) {
            this.$refs.driverSideOptions.initializeComponent(driverSideOptions);
            this.$refs.passengerSideOptions.initializeComponent(passengerSideOptions);
        },
        getSideDoorReplacementOptions(
            selectedDoorSides,
            selectedDriverSideReplaceOptions,
            selectedPassengerSideReplaceOptions
        ) {
            return {
                selectedDoorSides,
                selectedDriverSideReplaceOptions,
                selectedPassengerSideReplaceOptions
            };
        }
    }
};
</script>