xshop/resources/js/components/MorphSelector.vue

<template>
    <div class="morph-selector">
        <div v-if="this.morph != null && this.id != null">
            {{ humanReadableMorph(morph) }}: [{{ id }}]
        </div>
        <select class="form-control mt-2" v-model="morph" @change="updateList">
            <option :value="null"> Module</option>
            <option v-for="m in morphs" :value="m"> {{ humanReadableMorph(m) }}</option>
        </select>
        <label id="q" class="mt-2">
            Search
            <!-- WIP : translate-->
        </label>
        <input @input="updateList" type="text" id="q" v-model="q" class="form-control" placeholder="search">
        <div v-if="all.length > 0">

            <ul class="list-group my-2">
                <template v-for="item in all">
                    <li :class="`list-group-item `+(id == item.id?'selected':'') " @click="selectId(item.id)">

                        <template v-if="item.name != undefined">
                            <template v-if="xlang == null">
                                {{ item.name }}
                            </template>
                            <template v-else>
                                {{ item.name[xlang] }}
                            </template>
                        </template>
                        <template v-if="item.title != undefined">
                            <template v-if="xlang == null">
                                {{ item.title }}
                            </template>
                            <template v-else>
                                {{ item.title[xlang] }}
                            </template>
                        </template>
                    </li>
                </template>
            </ul>
        </div>
        <div v-if="this.morph != null && this.id != null">
            <input type="hidden" :value="morph" :name="xnameType">
            <input type="hidden" :value="id" :name="xnameId">
        </div>
    </div>
</template>

<script>
export default {
    name: "morph-selector",
    components: {},
    data: () => {
        return {
            morph: null,
            q: '',
            all: [],
            id: null,
        }
    },
    props: {
        emits: ['update:modelType', 'update:modelId'],
        modelType: {
            default: 'noting',
            type: String,
        },
        modelId: {
            default: 'noting',
            type: String,
        },
        xnameType: {
            default: 'attachable_type'
        },
        xnameId: {
            default: 'attachable_id'
        },
        morphs: {
            default: [],
        },
        morphSearchLink: {
            default: null,
        },
        xlang: {
            default: null
        },
        xid: {
            default: null,
        },
        xmorph: {
            default: null,
        }
    },
    mounted() {
        if (this.modelType == 'noting' || this.modelType == 'noting') {

            if (this.xmorph != null && this.xmorph != 'null' && this.xmorph != '') {
                this.morph = this.xmorph;
            }
            if (this.xid != null && this.xid != 'null' && this.xid != '') {
                this.id = parseInt(this.xid);
            }
        } else {
            this.morph = this.modelType;
            this.id = this.modelId;
        }
    },
    computed: {},
    methods: {
        selectId(i) {
            this.id = i;
        },
        async updateList() {
            this.id = null;
            const url = this.morphSearchLink;
            if (url != null) {
                let res = await axios.post(url, {
                    morph: this.morph,
                    q: this.q,
                });
                if (res.data.OK) {
                    this.all = res.data.data;
                }
            }
        },
        humanReadableMorph(morph) {
            const tmp = morph.split('\\');
            return tmp[tmp.length - 1];
        },


    },
    watch: {
        morph(newValue) {
            if (this.modelType != 'noting') {
                this.$emit('update:modelType', newValue);
            }
        },
        id(newValue) {
            if (this.modelId != 'noting' && newValue != null) {
                this.$emit('update:modelId', newValue.toString());
            }
        },
    }
}
</script>

<style scoped>
.morph-selector {

}

.list-group-item.selected {
    background: darkred;
}
</style>