searchanddisplace-core/resources/js/components/Searchers/AddBox.vue

<template>
    <div>
        <div @click="adding = true"
             class="box"
             style="font-size: 6rem; max-width: 100px;">
            +
        </div>

        <Dialog header="Select searcher"
                position="right"
                :visible="adding"
                :closable="false"
                :style="{width: '50vw'}"
                :modal="true">
            <searchers @selected="onSearcherSelected"
                       :ignore-searcher-ids="ignoreSearcherIds"
                       :allow-select="true">
            </searchers>

            <template #footer>
                <Button label="Close"
                        icon="pi pi-times"
                        @click="adding = false"
                        class="p-button-text"/>

                <Button label="Confirm"
                        icon="pi pi-check"
                        @click="onConfirm"
                        :disabled="Object.keys(selectedSearcher).length === 0"
                        autofocus />
            </template>
        </Dialog>
    </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator";
import Dialog from 'primevue/dialog';
import Searchers from './Index.vue';

@Component({
    name: 'AddBox',

    components: {
        Dialog,
        Searchers,
    },
})
export default class Create extends Vue {
    private adding: boolean = false;
    private selectedSearcher: Object = {};

    @Prop({default: () => {return[];}})
    public readonly ignoreSearcherIds!: Array<string>;

    onSearcherSelected(searcher: Object) {
        this.selectedSearcher = searcher;
    }

    onConfirm() {
        this.$emit('added', this.selectedSearcher);

        this.selectedSearcher = {};

        this.adding = false;
    }
};
</script>