searchanddisplace-core/resources/js/components/Regex/Create.vue

<template>
    <div id="regex-create">
        <div>
            <div>
                <input v-model="name"
                       type="text"
                       placeholder="Enter searcher name"
                       class="input">
            </div>

            <button @click="onSave" :disabled=" ! name || ! pattern">
                Save
            </button>
        </div>

        <div class="regex-box">
            <div class="main">
                <pattern-box v-model="pattern"></pattern-box>

                <text-box :pattern="pattern"
                          :flags="flags">
                </text-box>

                <flags v-model="flags"></flags>
            </div>

            <aside>
                <side-bar></side-bar>
            </aside>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import TextBox from './TextBox.vue';
import PatternBox from './PatternBox.vue';
import Flags from './Flags.vue';
import SideBar from './SideBar.vue';

@Component({
    components: {
        TextBox,
        PatternBox,
        Flags,
        SideBar,
    },
})

export default class Create extends Vue {
    private name: string = '';
    private pattern: string = '';
    private flags: Array<string> = ['g', 'i'];

    async onSave() {
        try {
            const { data } = await (window as any).axios.post('/regex', {
                name: this.name,
                expression: this.pattern,
            });

            alert('Saved.');
        } catch (e) {
            console.log(e);
            console.log('Something went wrong.');
        }
    }
};
</script>