calendar modal question

src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue

@@ -0,0 +1,176 @@
+<template>
+    <modal
+        :ref="modalName"
+        :fontSize="true"
+        :headerText="modalHeaderText"
+        :footerButtonText="footerCloseButtonText"
+        :onModalClosedCallback="onModalClosed"
+        class="calendar-modal"
+        @isModalOpened="setModalStatus"
+        @footerButtonEvent="setSelectedCalendarOption">
+        <template v-if="isModalOpened">
+            <buttonQuestion
+                ref="buttonQuestion"
+                v-model="selectedCalendarOption"
+                buttonTypeString="calendarModalListButton"
+                :answers="getCalendarOptionData"
+                groupName="chooseCalendarType"
+                class="mt-1"
+                textPosition="text-center"
+                isRequired
+                validationRules="calendar-option-required" />
+        </template>
+    </modal>
+</template>
+<script>
+import modal from '@/digital-components/modal/modal.vue';
+import buttonQuestion from '@/digital-components/button-question/button-question.vue';
+import { defineRule, useField } from 'vee-validate';
+import errorMessages from '@/constants/error-messages.js';
+import { required } from '@/helpers/validation-rules';
+import { deepClone } from '@/helpers/object-helper';
+import { v4 as uuidv4 } from 'uuid';
+import calendarModalListButton from './calendar-modal-list-button/calendar-modal-list-button.vue';
+// Validation for the modal button
+defineRule('calendar-option-required', required(errorMessages.OPTION_REQUIRED));
+export default {
+    name: 'calendar-modal-question',
+    components: {
+        modal,
+        buttonQuestion
+    },
+    props: {
+        calendarOptionsData: Object,
+        modelValue: {
+            type: Object,
+            default: () => ({
+                url: null,
+                name: null,
+                icon: null
+            })
+        }
+    },
+    emits: ['calendar-modal-closed', 'update:modelValue'],
+    setup(props) {
+        const uuid = uuidv4();
+        const componentId = !props.customComponentId
+            ? `component-${uuid}`
+            : props.customComponentId;
+
+        const { modelValue } = deepClone(props);
+        const initialValue = modelValue;
+
+        const fieldOptions = {
+            value: modelValue,
+            initialValue
+        };
+
+        const { errorMessage, handleChange, meta, validate, errors } = useField(
+            componentId,
+            props.validationRules,
+            fieldOptions
+        );
+
+        return {
+            componentId,
+            errorMessage,
+            handleChange,
+            validate,
+            meta,
+            errors
+        };
+    },
+    data() {
+        return {
+            isModalOpened: false,
+            selectedValue: null,
+            calendarModalListButton
+        };
+    },
+    computed: {
+        modalName() {
+            return 'calendarOptions';
+        },
+        modalHeaderText() {
+            return 'Add to Calendar';
+        },
+        footerCloseButtonText() {
+            return 'Add to Calendar';
+        },
+        modal() {
+            return this.$refs[this.modalName];
+        },
+        selectedCalendarOption: {
+            get() {
+                return this.modelValue?.name;
+            },
+            set(newValue) {
+                // Button Question only supports Number, or String data types so we must convert to the full object before emitting
+                this.selectedValue = this.getSelectedCalendarObject(newValue);
+            }
+        },
+        getCalendarOptionData() {
+            return this.calendarOptionsData.map((item) => ({
+                value: item.name,
+                buttonLabel: item.icon
+            }));
+        },
+        watch: {
+            modelValue: {
+                handler(newValue) {
+                    this.handleChange(newValue);
+                },
+                deep: true
+            }
+        }
+    },
+    methods: {
+        openModal() {
+            this.modal.openModal();
+        },
+        setModalStatus(isOpened) {
+            this.isModalOpened = isOpened;
+        },
+        closeModal() {
+            this.modal.closeModal();
+        },
+        onModalClosed() {
+            this.$emit('calendar-modal-closed');
+        },
+        async setSelectedCalendarOption() {
+            this.$emit('update:modelValue', this.selectedValue);
+            this.closeModal();
+        },
+
+        getSelectedCalendarObject(calendarOptionId) {
+            // eslint-disable-next-line no-shadow
+            const calendarOption = this.calendarOptionsData?.find((calendarOption) => calendarOption.name === calendarOptionId);
+
+            if (calendarOption) {
+                return {
+                    url: calendarOption.url,
+                    name: calendarOption.name,
+                    icon: calendarOption.icon
+                };
+            }
+
+            return {
+                url: null,
+                name: null,
+                icon: null
+            };
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.calendar-modal.modal.modal-component {
+    > .modal-dialog > .modal-content {
+        margin-top: 24px;
+    }
+    .modal-header {
+        padding-bottom: 0;
+        margin-bottom: 0 !important;
+    }
+}
+</style>