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

<template>
    <Dialog header="Define searcher"
            :visible.sync="showDialog"
            :maximizable="true"
            :modal="true"
            :block-scroll="false"
            :style="{'position': 'absolute'}"
            :contentStyle="{height: '100%'}"
            :baseZIndex="2014"
            id="define-searcher"
            ref="define-searcher">

        <div v-if=" ! text" class="p-d-flex p-flex-row">
            <div class="p-field-radiobutton p-mr-4">
                <RadioButton name="searcher-type"
                             id="searcher-type-regex"
                             value="regex"
                             v-model="type">
                </RadioButton>

                <label for="searcher-type-regex">Regex</label>
            </div>

            <div class="p-field-radiobutton">
                <RadioButton name="searcher-type"
                             id="searcher-type-compound"
                             value="compound"
                             v-model="type">
                </RadioButton>

                <label for="searcher-type-compound">Searcher</label>
            </div>
        </div>

        <regex-create v-if="type === 'regex'"
                      :standalone="true"
                      @searcher="onDefined">
        </regex-create>

        <searcher-create v-if="type === 'compound'"
                         :is-defining="true"
                         :defined-searcher="text"
                         @defined="onDefined">
        </searcher-create>
    </Dialog>
</template>

<script lang="ts">
import RadioButton from "primevue/radiobutton";
import {Component, Prop, Vue, Watch} from "vue-property-decorator";
import SearcherCreate from './Create';
import RegexCreate from '../Regex/Create';

@Component({
    components: {
        RadioButton,
        SearcherCreate,
        RegexCreate,
    },
})
export default class DefineSearcher extends Vue {
    private showDialog: boolean = false;
    private type: String = '';

    @Prop({default: ''})
    public readonly text!: string;

    private onDefined(searcher: Object) {
        this.$emit('done', searcher);
    }

    @Watch('showDialog')
    showDialogChanged() {
        if ( ! this.showDialog) {
            this.$emit('close');
        }
    }

    created() {
        this.type = this.text ? 'compound' : 'regex';
    }

    mounted() {
        this.showDialog = true;
    }
};
</script>

<style lang="sass">
    #define-searcher
        .p-dialog-content
            min-height: 90%
</style>