VUE GIST

<template>
    <div class="list-new-container">
        hello -- {{course.min_value}}
    </div>
</template>

<script>
    export default {
        name: "SingleBuffet",

        props: ['pax', 'course'],

        data() {
            return {
                edit: false
            };
        },

        methods: {
            switchEdit(e) {
                let $b = $(e.target);

                $b.prop('disabled', true);

                if (!this.edit) {
                    this.edit = true;
                    $('[rel="label-' + this.pax.id + '"]').slideUp(function () {
                        $(this).next().slideDown(function () {
                            $(this).children('input').focus().select();
                            $b.prop('disabled', false);
                        });
                    });
                } else
                    this.saveData($b);
            },

            loadImage() {
                $('.image-preview[data-id="' + this.pax.id + '"]').click();
            },

            saveData($b) {
                let $f = $('.image-preview[data-id="' + this.pax.id + '"]');

                let files = [];
                if ($f.length)
                    files = $f[0].files;

                if (!files.length && this.pax.id === 'new') {
                    new Noty({
                        type: 'warning',
                        text: '<div><p class="m-0"><b>Image : </b></p><p class="m-0">Please select an image.</p></div>'
                    }).show();
                    $b.prop('disabled', false);
                    return false;
                }

                mApp.block("#listing_container_" + this.pax.id, {overlayColor: "#000000", type: "loader", state: "primary", message: "Processing..."});

                if (files.length) {
                    let formData = new FormData();

                    if (files.length)
                        formData.append('image', files[0]);

                    if (this.pax.id == 'new')
                        formData.append('category_id', this.pax.category_id);

                    axios.post('/api/admin/course/pax/' + this.pax.id + '/files', formData).then(r => {
                        this.pax.id = r.data.id;
                        this.pax.image = r.data.image;

                        this.updatePax($b);
                    }).catch(() => {
                        mApp.unblock("#listing_container_" + this.pax.id);
                        $b.prop('disabled', false);
                    });
                } else {
                    this.updatePax($b);
                }
            },

            updatePax($b) {
                axios.post('/api/admin/course/pax/' + this.pax.id + '/data', this.pax).then(r => {
                    this.pax.label = r.data.label;
                    this.pax.price = r.data.price;

                    $('[rel="input-' + this.pax.id + '"]').slideUp(function () {
                        $(this).prev().slideDown(function () {
                            mApp.unblock("#listing_container_" + r.data.id);
                        });
                    });

                    this.edit = false;
                    $b.prop('disabled', false);

                    this.$emit('reloadPaxes', 'pax updated');
                }).catch(() => {
                    mApp.unblock("#listing_container_" + this.pax.id);
                    $b.prop('disabled', false);
                });
            },

            deletePax() {
                axios.delete('/api/admin/course/pax/' + this.pax.id, this.pax).then(r => {
                    this.$emit('reloadPaxes', 'pax updated');
                }).catch(() => {
                });
            }
        }
    }
</script>

<style scoped>

</style>