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

<template>
    <div id="searchers-show">
        <div>
            <h1 v-if="editable">
                {{ searcher.hasOwnProperty('name') ? searcher.name : searcher.expression }}
            </h1>

            <h3 v-if=" ! editable">
                {{ searcher.hasOwnProperty('name') ? searcher.name : searcher.expression }}
            </h3>

            <h5>{{ searcher.description }}</h5>

            <div v-if="editable && ! ducklingSearcher" style="margin-bottom: 1rem;">
                <a @click="onEdit">
                    <Button class="fc-button">
                        Edit
                    </Button>
                </a>

                <a @click="onDelete">
                    <Button class="fc-button p-button-danger">
                        Delete
                    </Button>
                </a>
            </div>
        </div>

        <div v-if=" ! editing"
             v-for="(row, rowIndex) in searcher.rows"
             :key="`row-${rowIndex}`"
             class="searchers-row flex-row">
            <div v-for="(searcherItem, columnIndex) in row"
                 :key="`column-${columnIndex}`"
                 class="searcher box"
                 :class="{'is-highlighted': searcher.hasOwnProperty('highlight')}">
                <template v-if="searcherItem.hasOwnProperty('name')">
                    <searcher-show :editable=" ! standalone && editable"
                                   :standalone="standalone"
                                   :searcher="searcherItem"
                                   @deleted="onDeleted(rowIndex, columnIndex)">
                    </searcher-show>
                </template>

                <template v-else>
                    <b>{{ searcherItem.expression }}</b>

                    <p>
                        <!--                            // Show example here, so for example the user has to input the example in order to save-->
                        <!--                            // the regex, show highlight, so apply regex on example text-->
                    </p>
                </template>
            </div>
        </div>

        <Dialog v-if="editing"
                header="Edit searcher"
                position="center"
                :visible.sync="editing"
                :closable="true"
                :style="{width: '100vw', height: '100vh',}"
                :modal="true">
            <searchers-editor v-if="searcher.hasOwnProperty('name')"
                             :searcher="searcher"
                              :standalone="true"
                              @updated="onSearcherUpdated">
            </searchers-editor>

            <regex-create v-if="searcher.hasOwnProperty('expression')"
                          :regex="searcher.expression"
                          @updated="onRegexUpdated">
            </regex-create>
        </Dialog>

        <Dialog
            header="Delete searcher"
            :visible.sync="deleting"
            :style="{width: '50vw'}"
            :contentStyle="{overflow: 'visible'}"
            id="remove-searcher-dialog"
            ref="remove-searcher-dialog">

            <p>
                Are you sure you want to delete this searcher?
            </p>

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

                <Button
                    label="Delete searcher"
                    icon="pi pi-check"
                    class="p-button-danger p-button-outlined p-button-sm"
                    @click="confirmDelete"/>
            </template>
        </Dialog>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Prop} from "vue-property-decorator";

@Component({
    name: 'SearcherShow',

    components: {
        'searchers-editor': () => import('./Create.vue'),
    },
})
export default class Show extends Vue {
    private editing: boolean = false;
    private deleting: boolean = false;

    @Prop({default: {}})
    public readonly searcher!: any;

    @Prop({default: true})
    public readonly editable!: boolean;

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

    onEdit() {
        if (this.standalone) {
            window.location.href = `/searchers/${this.searcher.id}/edit`;

            return;
        }

        this.editing = true;
    }

    onDelete() {
        if (this.standalone) {
            this.deleting = true;

            return;
        }

        this.$emit('deleted');
    }

    async confirmDelete() {
        try {
            await (window as any).axios.delete(`/searchers/${this.searcher.id}`);

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

            window.location.href = '/searchers';
        } catch (e) {
            console.log(e);
        }
    }

    onDeleted(rowIndex: number, columnIndex: number) {
        this.searcher.rows[rowIndex].splice(columnIndex, 1);

        if (this.searcher.rows[rowIndex].length === 0) {
            this.searcher.rows.splice(rowIndex, 1);
        }

        if (this.searcher.rows.length === 0) {
            this.$emit('deleted');
        }
    }

    onRegexUpdated(regex: string) {
        this.$set(this.searcher, 'expression', regex);

        this.editing = false;
    }

    onSearcherUpdated(searcher: any) {
        this.$set(this.searcher, 'name', searcher.name);
        this.$set(this.searcher, 'rows', searcher.rows);

        this.editing = false;
    }

    get ducklingSearcher(): boolean {
        return this.searcher.type !== 'custom' && ! this.searcher.hasOwnProperty('expression');
    }
};
</script>