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

<template>
    <div id="regex-create">
        <Card>
            <template #title v-if=" ! regex">
                New regex searcher
            </template>
            <template #content>
                <div class="p-fluid p-formgrid p-grid">
                    <div class="p-field p-col-12 p-md-6">
                        <label for="name">Enter searcher name</label>
                        <InputText v-model="name"
                                type="text"
                                name="name"
                                id="name">
                        </InputText>
                    </div>
                    <div class="p-field p-col-12 p-md-6">
                        <label for="tag">Enter searcher tag (optional)</label>
                        <InputText v-model="tag"
                                    type="text"
                                    name="tag"
                                    id="tag">
                        </InputText>
                    </div>
                </div>
            </template>
            <template #footer>
                <Button @click="onSave"
                        :disabled="( ! name && ! regex) || ! pattern"
                        class="p-button-raised">
                    Save
                </Button>
            </template>
        </Card>

        <Card>
            <template #content>
                <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>
            </template>
        </Card>
    </div>
</template>

<script lang="ts">
import {Component, Prop, 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';
import { eventBus } from "@/app";

@Component({
    name: 'RegexCreate',

    components: {
        TextBox,
        PatternBox,
        Flags,
        SideBar,
    },
})

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

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

    @Prop({
        default: false,
    })
    public readonly standalone!: boolean;

    onSave() {
        if ( ! this.regex) {
            this.save();

            return;
        }

        this.$emit('updated', this.pattern);
    }

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

            this.$toast.add({
                severity: 'success',
                summary: 'Searcher created.',
                life: 1000,
            });

            if ( ! this.standalone) {
                setTimeout(() => {
                    window.location.href = `/searchers/${data.searcher.id}`;
                }, 1000);

                return;
            }

            this.$emit('searcher', data.searcher);
        } catch (e) {
            console.log(e);
            console.log('Something went wrong.');
        }
    }

    public async changeRoute(url: string) {
        if (this.pattern !== '' && this.pattern !== undefined) {
            if (this.name === '' || this.name === undefined) {
                this.name = 'Unnamed regex - ' + Date.now();
            }

            await this.save();
        }

        window.location.href = url;
    }

    created() {
        if (this.regex) {
            this.pattern = this.regex;
        }

        eventBus.$on('changeRoute', this.changeRoute);
    }
};
</script>

<style lang="scss" scoped>
#regex-create {
    margin-top: 25px;
}
</style>