chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue

<template>
<div class="vue-component">
    <h2><a id="section-110"></a>
        {{ $t('startdate.change') }}
    </h2>
    <div>
        <div class="mb-3 row">
            <div class="col-sm-12 date-update">
                <input class="form-control" type="date" id="startDate" v-model="startDateInput">
            </div>
        </div>
    </div>
</div>

</template>

<script>

import { dateToISO, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
import { mapState } from 'vuex';

export default {
    name: 'startDate',
    data() {
        return {
            lastRecordedDate: null
        }
    },
    computed: {
        ...mapState({
            startDate: state => dateToISO(ISOToDatetime(state.accompanyingCourse.openingDate.datetime))
        }),
        startDateInput: {
            get() {
                return this.startDate;
            },
            set(value) {
                this.lastRecordedDate = value;

                setTimeout(() => {
                    console.log('timeout finished')
                    if (this.lastRecordedDate === value) {
                        console.log('last recorded', this.lastRecordedDate, 'value', value)
                        this.$store.dispatch('updateStartDate', value)
                            .catch(({name, violations}) => {
                                if (name === 'ValidationException' || name === 'AccessException') {
                                    violations.forEach((violation) => this.$toast.open({message: violation}));
                                } else {
                                    this.$toast.open({message: 'An error occurred'})
                                }
                        })
                    }
                }, 3000)
            }
        }
    }
}

</script>

<style lang="scss" scoped>
.date-update {
    display: flex;
    justify-content: space-between;
    &-btn {
        margin-left: 1rem;
    }
}
</style>