DigitalConsumer.FixMyGlass/src/common-components/base-input-button/base-input-button.vue

<template>
    <label
        :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
        :for="buttonId"
        @mousedown.left="handleEventAction('click', $event)">
        <input
            :type="inputType"
            :id="buttonId"
            :key="buttonId"
            :name="groupName"
            :class="inputClasses"
            :aria-required="isRequired"
            :value="value"
            :checked="isChecked"
            @keypress.space="handleEventAction('space', $event)"
            @keypress.enter="handleEventAction('enter', $event)"
            @change="handleEventAction('change', $event)" />

        <slot></slot>
    </label>
</template>

<script>
// import { queryStrings } from "@/constants/query-strings";
import { useField } from "vee-validate";
import { toRef } from "vue";
// import { gaStoreActions } from "../../constants/store-actions";

export default {
    name: "base-input-button",
    emits: ["change"],
    model: {
        prop: "modelValue",
        event: "change",
    },
    props: {
        value: {
            type: [String, Number],
            required: true,
        },
        modelValue: {
            type: [Array, String, Number],
            required: true,
        },
        isMultiSelect: Boolean,
        groupName: {
            type: String,
            required: true,
        },
        validationRules: {
            type: String,
            default: "",
        },
        buttonWrapperClasses: [String, Array, Object],
        inputClasses: [String, Array, Object],
        valueToLogType: String,
        selectOnKeypress: {
            type: Boolean,
            default: true,
        },
        isRequired: Boolean,
    },
    data() {
        return {
            valueToEmit: null,
        };
    },
    mounted() {
        if (this.isChecked) {
            this.handleChange(this.modelValue);
        }
    },
    methods: {
        handleEventAction(eventType, e) {
            const eventTypes = {
                CHANGE: "change",
                ENTER: "enter",
                SPACE: "space",
                CLICK: "click",
            };

            if (this.isMultiSelect) {
                switch (eventType) {
                    case eventTypes.ENTER:
                    case eventTypes.CHANGE:
                        this.handleClick(e);
                        // this.dispatchStoreAction(
                        //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
                        //     this.groupName,
                        //     false
                        // );
                        
                        // this.pushClickEventToGA();
                        break;
                }
            } else {
                switch (eventType) {
                    case eventTypes.CLICK:
                    case eventTypes.ENTER:
                    case eventTypes.SPACE:
                        this.handleClick(e);
                        // this.pushClickEventToGAIfReady();
                        break;
                    case eventTypes.CHANGE:
                        this.selectOnKeypress
                            ? this.handleClick(e)
                            : this.handleSelectionChange(e);
                        break;
                }
            }
        },
        handleSelectionChange(e) {
            if (
                this.isMultiSelect &&
                (this.modelValue instanceof Array || this.modelValue == null)
            ) {
                let newValue = this.modelValue ? [...this.modelValue] : [];
                if (!newValue.includes(this.value)) {
                    newValue.push(this.value);
                } else {
                    newValue.splice(newValue.indexOf(this.value), 1);
                }

                this.valueToEmit = newValue;
            } else {
                this.valueToEmit = this.value;
            }

            // this.dispatchStoreAction(
            //     gaStoreActions.UPDATE_CURRENTLY_SELECTED_VALUES,
            //     {
            //         groupName: this.groupName,
            //         value: this.value,
            //     },
            // );

            this.handleChange(this.valueToEmit);
        },
        handleClick(e) {
            this.handleSelectionChange(e);
            this.$emit("buttonClicked", this.valueToEmit);
        },
        // pushClickEventToGA(value) {
        //     const lastFocusedInputGroup =
        //         this.$store.getters.gaClickInformation.lastFocusedInputGroup;
        //     // this.dispatchStoreAction(
        //     //     gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
        //     //     {
        //     //         groupName: lastFocusedInputGroup,
        //     //         value: value ?? this.value,
        //     //     },
        //     // );

        //     // this.pushEventToGA(
        //     //     this.$route.query[queryStrings.FMG_PAGE],
        //     //     this.GaActions.CLICKED,
        //     //     value?.toString() ?? this.value?.toString(),
        //     //     true,
        //     //     this.valueToLogType
        //     // );
        // },
        // handleBlur() {
        //     // this.dispatchStoreAction(
        //     //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
        //     //     this.groupName,
        //     //     false
        //     // );
        //     // this.dispatchStoreAction(
        //     //     gaStoreActions.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT,
        //     //     this.isMultiSelect,
        //     //     false
        //     // );
        // },
        // handleKeyboardNavigation(key) {
        //     this.pushClickEventToGAIfReady(key);
        // },
        // pushClickEventToGAIfReady(event) {
        //     const gaClickInformation = this.$store.getters.gaClickInformation;
        //     const firedGaClickEventValues =
        //         gaClickInformation.firedGaClickEventValues;
        //     const currentlySelectedValues =
        //         gaClickInformation.currentlySelectedValues;
        //     const lastFocusedInputGroup =
        //         gaClickInformation.lastFocusedInputGroup;
        //     const wasLastFocusedInputMultiselect =
        //         gaClickInformation.wasLastFocusedInputMultiselect;

        //     const keyCode = event?.code;
        //     // Keyboard navigation
        //     if (keyCode) {
        //         if (
        //             !wasLastFocusedInputMultiselect &&
        //             currentlySelectedValues[lastFocusedInputGroup] &&
        //             firedGaClickEventValues[lastFocusedInputGroup] !=
        //                 currentlySelectedValues[lastFocusedInputGroup]
        //         ) {
        //             if (keyCode === "Tab") {
        //                 this.pushClickEventToGA(
        //                     currentlySelectedValues[lastFocusedInputGroup]
        //                 );
        //             } else if (keyCode?.includes("Arrow")) {
        //                 if (lastFocusedInputGroup != this.groupName) {
        //                     this.pushClickEventToGA(
        //                         currentlySelectedValues[lastFocusedInputGroup]
        //                     );
        //                 }
        //             }
        //         }
        //     } else {
        //         // Radio click
        //         // this.dispatchStoreAction(
        //         //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
        //         //     this.groupName,
        //         //     false
        //         // );
                
        //         if (
        //             firedGaClickEventValues[this.groupName] !=
        //             currentlySelectedValues[this.groupName]
        //         ) {
        //             this.pushClickEventToGA(
        //                 currentlySelectedValues[this.groupName]
        //             );
        //         } 
        //     }
        // },
    },
    computed: {
        isChecked() {
            if (this.isMultiSelect && this.modelValue instanceof Array) {
                return this.modelValue.includes(this.value);
            }

            return this.modelValue == this.value;
        },
        inputType() {
            return this.isMultiSelect ? "checkbox" : "radio";
        },
        buttonId() {
            return `${this.groupName}-${JSON.stringify(this.value)?.replace(
                " ",
                "-"
            )}`;
        },
    },
    setup(props) {
        const inputType = props.isMultiSelect ? "checkbox" : "radio";

        const fieldOptions = {
            type: inputType,
            validateOnValueUpdate: false,
            validateOnMount: false,
        };

        const { handleChange, meta, errors } = useField(
            toRef(props, "groupName"),
            toRef(props, "validationRules"),
            fieldOptions
        );

        return {
            handleChange,
            errors,
            meta,
            fieldOptions, // only need to expose this for unit test purposes
        };
    },
};
</script>

<style lang="scss" scoped>
input {
    opacity: 0;
    height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it
    width: 0;
}
</style>