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

<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
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: "sideDoorOptions",
    props: {
        groupName: String,
        modelValue: Object,
        selectedDamageLocations: Array,
        cmsWidgetName: String,
    },
    methods: {
        initializeComponent(driverSideOptions, passengerSideOptions) {
            this.$refs.driverSideOptions.initializeComponent(driverSideOptions);
            this.$refs.passengerSideOptions.initializeComponent(passengerSideOptions);
        },
        getSideDoorReplacementOptions(
            selectedDoorSides,
            selectedDriverSideReplaceOptions,
            selectedPassengerSideReplaceOptions
        ) {
            return {
                selectedDoorSides: selectedDoorSides,
                selectedDriverSideReplaceOptions: selectedDriverSideReplaceOptions,
                selectedPassengerSideReplaceOptions: selectedPassengerSideReplaceOptions,
            };
        },
    },
    computed: {
        questionText() {
            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
        },
        answersFromCms() {
            return this.getCmsContent(this.cmsWidgetName, "Answers");
        },
        selectedValues: {
            get: function () {
                return this.modelValue;
            },
            set: function (newValue) {
                this.$emit("update:modelValue", newValue);
            },
        },
        selectedDoorSidesValues: {
            get: function () {
                return this.selectedValues.selectedDoorSides;
            },
            set: function (newValue) {
                this.selectedValues = this.getSideDoorReplacementOptions(
                    newValue,
                    this.selectedValues.selectedDriverSideReplaceOptions,
                    this.selectedValues.selectedPassengerSideReplaceOptions
                );
            },
        },
        selectedDriverSideReplaceOptionsValues: {
            get: function () {
                return this.selectedValues.selectedDriverSideReplaceOptions;
            },
            set: function (newValue) {
                this.selectedValues = this.getSideDoorReplacementOptions(
                    this.selectedValues.selectedDoorSides,
                    newValue,
                    this.selectedValues.selectedPassengerSideReplaceOptions
                );
            },
        },
        selectedPassengerSideReplaceOptionsValues: {
            get: function () {
                return this.selectedValues.selectedPassengerSideReplaceOptions;
            },
            set: function (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)
            );
        },
    },
    components: {
        buttonQuestion,
        replaceOptionsQuestion,
    },
};
</script>