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

<template>
    <div>
        <h1> Searchers </h1>

        <div v-if=" ! allowSelect" style="margin-bottom: 1rem;">
            <Button class="fc-button p-button-success" label="Add searcher" @click="createSearcher()"/>
        </div>

        <div class="content">
            <DataTable
                :value.sync="searchers"
                :selection.sync="selectedSearcher"
                dataKey="id"
                :selectionMode="allowSelect ? 'single' : ''"
                class="p-datatable-md"
                :paginator="true"
                :rows="10"
                paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
                currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
                :rowsPerPageOptions="[10,20,50]">

                <Column v-if="allowSelect" selectionMode="single" headerStyle="width: 3em"></Column>

                <Column header="Name" sortable>
                    <template #body="slotProps">
                        {{ slotProps.data.name }}
                    </template>
                </Column>
                <Column header="Actions" headerStyle="text-align: right">
                    <template #body="slotProps">
                        <div class="action-buttons" style="text-align: right">
                            <Button
                                :disabled="slotProps.data.type !== 'custom'"
                                label="Open"
                                icon="pi pi-folder-open"
                                class="p-button-sm"
                                @click.stop="onOpen(slotProps.data.id)"/>

                            <Button
                                :disabled="slotProps.data.type !== 'custom'"
                                label="Edit"
                                icon="pi pi-pencil"
                                class="p-button-sm p-button-success"
                                @click.stop="onEdit(slotProps.data.id)"/>

                            <Button
                                :disabled="slotProps.data.type !== 'custom'"
                                label="Delete"
                                icon="pi pi-times"
                                class="p-button-sm p-button-danger"
                                @click.stop="onDelete(slotProps.data.id)"/>
                        </div>
                    </template>
                </Column>
            </DataTable>
        </div>
    </div>
</template>

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

@Component({
})
export default class Index extends Vue {
    private searchers: Array<Searcher> = [];
    private selectedSearcher: any = {};

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

    @Prop({default: () => []})
    public readonly ignoreSearcherIds!: Array<string>;

    async boot() {
        try {
            const { data } = await (window as any).axios.get('/searchers');

            this.searchers = data.searchers.filter((searcher: Searcher) => {
                return ! this.ignoreSearcherIds.includes(searcher.id);
            });
        } catch (e) {

        }
    }

    onOpen(id: string) {
        window.open(this.getURL(id), '_self');
    }

    onEdit(id: string) {
        window.open(this.getURL(id) + '/edit', '_self');
    }

    async onDelete(id: string) {
        try {
            await (window as any).axios.delete(`/searchers/${id}`);

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

            this.searchers = this.searchers.filter(x => x.id !== id);
        } catch (e) {
            console.log(e);
        }
    }

    getURL(id: string) {
        return `/searchers/${id}`;
    }

    @Watch('selectedSearcher')
    selectedSearcherIdChanged(value: any) {
        this.$emit('selected', value);
    }

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

    createSearcher() {
        window.location.href = '/searchers/create';
    }

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