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>

<!--        <Panel :header="searcher.name">-->
<!--            <template #icons>-->
<!--                <a-->
<!--                    class="p-panel-header-icon p-link"-->
<!--                    v-if="editable"-->
<!--                    :href="`/searchers/${searcher.id}/edit`"-->
<!--                >-->
<!--                    <span class="pi pi-cog"></span>-->
<!--                </a>-->
<!--            </template>-->

<!--            <div class="p-d-flex p-jc-start">-->
<!--                <h5>{{ searcher.description }}</h5>-->

<!--                <Timeline :value="searcher.rows">-->
<!--                    <template #opposite="slotProps">-->
<!--                        <small class="p-text-secondary">-->
<!--                            {{ slotProps.index + 1 }}-->
<!--                        </small>-->
<!--                    </template>-->
<!--                    <template #content="slotProps">-->
<!--                        <ScrollPanel-->
<!--                            style="max-width: 90vw; height: 125px"-->
<!--                            class="searcher-list"-->
<!--                        >-->
<!--                            <div-->
<!--                                v-for="(-->
<!--                                    searcherItem, columnIndex-->
<!--                                ) in slotProps.item"-->
<!--                                :key="`column-${columnIndex}`"-->
<!--                            >-->
<!--                                <div class="box is-plain p-shadow-5">-->
<!--                                    <template-->
<!--                                        v-if="-->
<!--                                            searcherItem.hasOwnProperty('name')-->
<!--                                        "-->
<!--                                    >-->
<!--                                        <searcher-show-->
<!--                                            :editable="false"-->
<!--                                            :searcher="searcherItem"-->
<!--                                        ></searcher-show>-->
<!--                                    </template>-->

<!--                                    <template v-else>-->
<!--                                        <b>{{ searcherItem.expression }}</b>-->
<!--                                    </template>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </ScrollPanel>-->
<!--                        <Divider />-->
<!--                    </template>-->
<!--                </Timeline>-->
<!--            </div>-->
<!--        </Panel>-->
    </div>
</template>

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

@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');
    }

    public async changeRoute(url: string) {
        window.location.href = url;
    }

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

<style lang="scss" scoped>
    ::v-deep .p-timeline-event-opposite {
        flex: 0 !important;
    }

    ::v-deep .p-timeline-event-content {
        margin-bottom: 25px;
    }

    ::v-deep .searcher-list {
        .p-scrollpanel-content {
            display: flex;
            flex-direction: row;
            padding-top: 25px
        }

        .p-scrollpanel-bar {
            background-color: #1976d2;
            opacity: 1;
            transition: background-color 0.3s;
        }
    }
</style>