akaunting/resources/assets/js/components/AkauntingSelectRemote.vue

<template>
    <base-input v-if="title" :label="title" :name="name" :class="formClasses" :error="formError">
        <el-select v-model="real_model" @input="change" disabled filterable v-if="disabled"
            :placeholder="placeholder">
            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                <p class="el-select-dropdown__empty">
                    {{ noMatchingDataText }}
                </p>
                <ul class="el-scrollbar__view el-select-dropdown__list">
                    <li class="el-select-dropdown__item el-select__footer">
                        <div @click="onAddItem">
                            <i class="fas fa-plus"></i>
                            <span>
                                {{ add_new_text }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>

            <div v-else-if="addNew.status && options.length == 0" slot="empty">
                <p class="el-select-dropdown__empty">
                    {{ noDataText }}
                </p>
                <ul class="el-scrollbar__view el-select-dropdown__list">
                    <li class="el-select-dropdown__item el-select__footer">
                        <div @click="onAddItem">
                            <i class="fas fa-plus"></i>
                            <span>
                                {{ add_new_text }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>

            <template slot="prefix">
                <span class="el-input__suffix-inner el-select-icon">
                    <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                </span>
            </template>

            <el-option v-if="!group" v-for="(label, value) in selectOptions"
               :key="value"
               :label="label"
               :value="value">
            </el-option>

            <el-option-group
                v-if="group"
                v-for="(options, name) in selectOptions"
                :key="name"
                :label="name">
                <el-option
                    v-for="(label, value) in options"
                    :key="value"
                    :label="label"
                    :value="value">
                </el-option>
            </el-option-group>

            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
                <div @click="onAddItem">
                    <i class="fas fa-plus"></i>
                    <span>
                        {{ add_new_text }}
                    </span>
                </div>
            </el-option>
        </el-select>

        <el-select v-model="real_model" @input="change" filterable v-if="!disabled && !multiple"
            :placeholder="placeholder">
            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                <p class="el-select-dropdown__empty">
                    {{ noMatchingDataText }}
                </p>
                <ul class="el-scrollbar__view el-select-dropdown__list">
                    <li class="el-select-dropdown__item el-select__footer">
                        <div @click="onAddItem">
                            <i class="fas fa-plus"></i>
                            <span>
                                {{ add_new_text }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>

            <div v-else-if="addNew.status && options.length == 0" slot="empty">
                <p class="el-select-dropdown__empty">
                    {{ noDataText }}
                </p>
                <ul class="el-scrollbar__view el-select-dropdown__list">
                    <li class="el-select-dropdown__item el-select__footer">
                        <div @click="onAddItem">
                            <i class="fas fa-plus"></i>
                            <span>
                                {{ add_new_text }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>

            <template slot="prefix">
                <span class="el-input__suffix-inner el-select-icon">
                    <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                </span>
            </template>

            <el-option v-if="!group" v-for="(label, value) in selectOptions"
               :key="value"
               :label="label"
               :value="value">
            </el-option>

            <el-option-group
                v-if="group"
                v-for="(options, name) in selectOptions"
                :key="name"
                :label="name">
                <el-option
                    v-for="(label, value) in options"
                    :key="value"
                    :label="label"
                    :value="value">
                </el-option>
            </el-option-group>

            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
                <div @click="onAddItem">
                    <i class="fas fa-plus"></i>
                    <span>
                        {{ add_new_text }}
                    </span>
                </div>
            </el-option>
        </el-select>

        <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple
            :placeholder="placeholder">
            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                <p class="el-select-dropdown__empty">
                    {{ noMatchingDataText }}
                </p>
                <ul class="el-scrollbar__view el-select-dropdown__list">
                    <li class="el-select-dropdown__item el-select__footer">
                        <div @click="onAddItem">
                            <i class="fas fa-plus"></i>
                            <span>
                                {{ add_new_text }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>

            <div v-else-if="addNew.status && options.length == 0" slot="empty">
                <p class="el-select-dropdown__empty">
                    {{ noDataText }}
                </p>
                <ul class="el-scrollbar__view el-select-dropdown__list">
                    <li class="el-select-dropdown__item el-select__footer">
                        <div @click="onAddItem">
                            <i class="fas fa-plus"></i>
                            <span>
                                {{ add_new_text }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>

            <template slot="prefix">
                <span class="el-input__suffix-inner el-select-icon">
                    <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                </span>
            </template>

            <el-option v-if="!group" v-for="(label, value) in selectOptions"
               :key="value"
               :label="label"
               :value="value">
            </el-option>

            <el-option-group
                v-if="group"
                v-for="(options, name) in selectOptions"
                :key="name"
                :label="name">
                <el-option
                    v-for="(label, value) in options"
                    :key="value"
                    :label="label"
                    :value="value">
                </el-option>
            </el-option-group>

            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
                <div @click="onAddItem">
                    <i class="fas fa-plus"></i>
                    <span>
                        {{ add_new_text }}
                    </span>
                </div>
            </el-option>
        </el-select>

        <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags
            :placeholder="placeholder">
            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                <p class="el-select-dropdown__empty">
                    {{ noMatchingDataText }}
                </p>
                <ul class="el-scrollbar__view el-select-dropdown__list">
                    <li class="el-select-dropdown__item el-select__footer">
                        <div @click="onAddItem">
                            <i class="fas fa-plus"></i>
                            <span>
                                {{ add_new_text }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>

            <div v-else-if="addNew.status && options.length == 0" slot="empty">
                <p class="el-select-dropdown__empty">
                    {{ noDataText }}
                </p>
                <ul class="el-scrollbar__view el-select-dropdown__list">
                    <li class="el-select-dropdown__item el-select__footer">
                        <div @click="onAddItem">
                            <i class="fas fa-plus"></i>
                            <span>
                                {{ add_new_text }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>

            <template slot="prefix">
                <span class="el-input__suffix-inner el-select-icon">
                    <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                </span>
            </template>

            <el-option v-if="!group" v-for="(label, value) in selectOptions"
               :key="value"
               :label="label"
               :value="value">
            </el-option>

            <el-option-group
                v-if="group"
                v-for="(options, name) in selectOptions"
                :key="name"
                :label="name">
                <el-option
                    v-for="(label, value) in options"
                    :key="value"
                    :label="label"
                    :value="value">
                </el-option>
            </el-option-group>

            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
                <div @click="onAddItem">
                    <i class="fas fa-plus"></i>
                    <span>
                        {{ add_new_text }}
                    </span>
                </div>
            </el-option>
        </el-select>

        <component v-bind:is="add_new_html" @submit="onSubmit"></component>

        <select :name="name" class="d-none" v-model="real_model">
            <option v-for="(label, value) in selectOptions" :value="value">{{ label }}</option>
        </select>
    </base-input>

    <el-select v-else
        :class="'pl-20 mr-40'"
        v-model="real_model"
        @input="change"
        filterable
        remote
        reserve-keyword
        :placeholder="placeholder"
        :remote-method="remoteMethod"
        :loading="loading">
            <div v-if="loading" class="el-select-dropdown__wrap" slot="empty">
                <p class="el-select-dropdown__empty loading">
                    {{ loadingText }}
                </p>
            </div>

            <div v-else-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                <p class="el-select-dropdown__empty">
                    {{ noMatchingDataText }}
                </p>
                <ul class="el-scrollbar__view el-select-dropdown__list">
                    <li class="el-select-dropdown__item el-select__footer">
                        <div @click="onAddItem">
                            <i class="fas fa-plus"></i>
                            <span>
                                {{ add_new_text }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>

            <div v-else-if="addNew.status && options.length == 0" slot="empty">
                <p class="el-select-dropdown__empty">
                    {{ noDataText }}
                </p>
                <ul class="el-scrollbar__view el-select-dropdown__list">
                    <li class="el-select-dropdown__item el-select__footer">
                        <div @click="onAddItem">
                            <i class="fas fa-plus"></i>
                            <span>
                                {{ add_new_text }}
                            </span>
                        </div>
                    </li>
                </ul>
            </div>

            <template slot="prefix">
                <span class="el-input__suffix-inner el-select-icon">
                    <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
                </span>
            </template>

            <el-option v-if="!group" v-for="option in selectOptions"
               :key="option.id"
               :label="option.name"
               :value="option.id">
            </el-option>

            <el-option-group
                v-if="group"
                v-for="(options, name) in selectOptions"
                :key="name"
                :label="name">
                <el-option
                    v-for="(label, value) in options"
                    :key="value"
                    :label="label"
                    :value="value">
                </el-option>
            </el-option-group>

            <el-option v-if="!loading && addNew.status && selectOptions != null && selectOptions.length != 0" class="el-select__footer" :value="add_new">
                <div @click="onAddItem">
                    <i class="fas fa-plus"></i>
                    <span>
                        {{ add_new_text }}
                    </span>
                </div>
            </el-option>
    </el-select>
</template>

<script>
import { Select, Option, OptionGroup, ColorPicker } from 'element-ui';

import AkauntingModalAddNew from './AkauntingModalAddNew';
import AkauntingModal from './AkauntingModal';
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
import AkauntingSelect from './AkauntingSelect';
import AkauntingDate from './AkauntingDate';
import AkauntingRecurring from './AkauntingRecurring';

import Form from './../plugins/form';

export default {
    name: "akaunting-select-remote",

    components: {
        [Select.name]: Select,
        [Option.name]: Option,
        [OptionGroup.name]: OptionGroup,
        [ColorPicker.name]: ColorPicker,
        AkauntingModalAddNew,
        AkauntingRadioGroup,
        AkauntingSelect,
        AkauntingModal,
        AkauntingDate,
        AkauntingRecurring,
    },

    props: {
        title: {
            type: String,
            default: null,
            description: "Selectbox label text"
        },
        placeholder: {
            type: String,
            default: '',
            description: "Selectbox input placeholder text"
        },
        formClasses: {
            type: Array,
            default: null,
            description: "Selectbox input class name"
        },
        formError: {
            type: String,
            default: null,
            description: "Selectbox input error message"
        },
        name: {
            type: String,
            default: null,
            description: "Selectbox attribute name"
        },
        value: {
            type: String,
            default: null,
            description: "Selectbox selected value"
        },
        options: null,

        model: null,

        icon: {
            type: String,
            description: "Prepend icon (left)"
        },

        addNew: {
            type: Object,
            default: function () {
                return {
                    text: 'Add New Item',
                    status: false,
                    path: null,
                    type: 'modal', // modal, inline
                    field: 'name',
                    buttons: {}
                };
            },
            description: "Selectbox Add New Item Feature"
        },

        group:  {
            type: Boolean,
            default: false,
            description: "Selectbox option group status"
        },
        multiple: {
            type: Boolean,
            default: false,
            description: "Multible feature status"
        },
        disabled: {
            type: Boolean,
            default: false,
            description: "Selectbox disabled status"
        },
        collapse:  {
            type: Boolean,
            default: false,
            description: "Selectbox collapse status"
        },

        loadingText: {
            type: String,
            default: 'Loading...',
            description: "Selectbox loading message"
        },
        noDataText: {
            type: String,
            default: 'No Data',
            description: "Selectbox empty options message"
        },
        noMatchingDataText: {
            type: String,
            default: 'No Matchign Data',
            description: "Selectbox search option not found item message"
        },

        remoteAction: {
            type: String,
            default: null,
            description: "Selectbox remote action path"
        },
        remoteType: {
            type: String,
            default: 'invoice',
            description: "Ger remote item type."
        },
        currencyCode: {
            type: String,
            default: 'USD',
            description: "Get remote item price currecy code"
        },
    },

    data() {
        return {
            list: [],
            add_new: this.addNew,
            add_new_text: this.addNew.text,
            selectOptions: this.options,
            real_model: this.model,
            add_new_html: '',
            form: {},
            loading: false,
        }
    },

    mounted() {
        this.real_model = this.value;

        this.$emit('interface', this.real_model);
    },

    methods: {
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;

                /*
                this.list = [];
                this.selectOptions = this.options;

                Object.keys(this.selectOptions).forEach(key => {
                    const item = this.selectOptions[key];

                    if (item.toLowerCase().indexOf(query.toLowerCase()) > -1) {
                        this.list.push(this.selectOptions[key]);
                    }
                });

                this.selectOptions = this.list;
                */
               if (!this.remoteAction) {
                   this.remoteAction = url + '/common/items/autocomplete';
               }

                axios.get(this.remoteAction, {
                    params: {
                        type: this.remoteType,
                        query: query,
                        currency_code: this.currencyCode,
                    }
                })
                .then(response => {
                    this.loading = false;

                    this.selectOptions = response.data.data;
                })
                .catch(e => {
                })
                .finally(function () {
                    // always executed
                });
            } else {
                this.selectOptions = this.options;
            }
        },

        change() {
            this.$emit('change', this.real_model);
            this.$emit('interface', this.real_model);

            this.selectOptions.forEach(item => {
                if (item.id == this.real_model) {
                    this.$emit('label', item.name);
                    this.$emit('option', item);

                    return;
                }
            });
        },

        onAddItem() {
            // Get Select Input value
            if (this.title) {
                var value = this.$children[0].$children[0].$children[0].$refs.input.value;
            } else {
                var value = this.$children[0].$children[0].$refs.input.value;
            }

            if (this.add_new.type == 'inline') {
                this.addInline(value);
            } else {
                this.onModal(value);
            }
        },

        addInline(value) {
            axios.post(this.add_new.path, {
                '_token': window.Laravel.csrfToken,
                'type': 'inline',
                field: this.add_new.field,
                value: value,
            })
            .then(response => {
                if (response.data.success) {
                    this.selectOptions = [];

                    this.selectOptions.push(response.data.data);
                    this.real_model = response.data.data.id;

                    this.change();

                    if (this.title) {
                        this.$children[0].$children[0].visible = false;
                    } else {
                        this.$children[0].visible = false;
                    }
                    //this.add_new.status = false;
                }
            })
            .catch(error => {
            });
        },

        onModal(value) {
            let add_new = this.add_new;

            axios.get(this.add_new.path)
            .then(response => {
                add_new.status = true;
                add_new.html = response.data.html;

                if (this.title) {
                    this.$children[0].$children[0].visible = false;
                } else {
                    this.$children[0].visible = false;
                }

                this.add_new_html = Vue.component('add-new-component', function (resolve, reject) {
                    resolve({
                        template: '<div><akaunting-modal-add-new :show="add_new.status" @submit="onSubmit" @cancel="add_new.status = false" :buttons="add_new.buttons" :title="add_new.text" :is_component=true :message="add_new.html"></akaunting-modal-add-new></div>',

                        components: {
                            AkauntingModalAddNew,
                            AkauntingRadioGroup,
                            AkauntingSelect,
                            AkauntingModal,
                            AkauntingDate,
                            AkauntingRecurring,
                            [ColorPicker.name]: ColorPicker,
                        },

                        data: function () {
                            return {
                                add_new: add_new,
                            }
                        },

                        methods: {
                            onSubmit(event) {
                                this.$emit('submit', event);
                            }
                        }
                    })
                });
            })
            .catch(e => {
                this.errors.push(e);
            })
            .finally(function () {
                // always executed
            });
        },

        onSubmit(event) {
            this.form = event;

            axios.post(this.form.action, this.form.data())
            .then(response => {
                this.form.loading = false;

                if (response.data.success) {
                    this.selectOptions[response.data.data.id] = response.data.data['name'];
                    this.real_model = response.data.data.id.toString();

                    this.change();

                    //this.add_new.status = false;
                }
            })
            .catch(error => {
                this.form.loading = false;

                this.form.onFail(error);

                this.method_show_html = error.message;
            });
        },
    },

    watch: {
        options: function (options) {
            // update options
            //this.selectOptions = options;
        }
    },
}
</script>

<style scoped>
    .form-group .modal {
        z-index: 3050;
    }

    .el-select-dropdown__empty {
        padding: 10px 0 0 !important;
    }

    .el-select-dropdown__empty.loading {
        padding: 10px 0 !important;
    }

    .el-select__footer {
        text-align: center;
        border-top: 1px solid #dee2e6;
        padding: 0px;
        cursor: pointer;
        color: #3c3f72;
        font-weight: bold;
        height: 38px;
        line-height: 38px;
        margin-top: 5px;
        margin-bottom: -6px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .el-select__footer.el-select-dropdown__item.hover {
        background-color: inherit !important;
    }

    .el-select__footer.el-select-dropdown__item:hover, .el-select__footer.el-select-dropdown__item:focus {
        background-color: #3c3f72 !important;
        color: white !important;
        border-top-color: #3c3f72;
    }

    .el-select__footer div span {
        margin-left: 5px;
    }
</style>