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

<template>
    <div class="p-d-flex p-flex-wrap">
        <Card
            v-for="(searcher, id) in searchers"
            :key="id"
            :class="{'p-mr-4': true, 'selected': (id === selectedSearcherId), 'p-shadow-10': (id === selectedSearcherId)}">

            <template #title>
                {{ searcher.name }}
            </template>

            <template #content>
                {{ searcher.description }}
            </template>

            <template #footer>
                <Button
                    icon="pi pi-check-square"
                    label="Select"
                    class="p-button-sm"
                    @click="onSelect(id)" />

                <Button
                    icon="pi pi-eye"
                    label="View"
                    class="p-button-secondary p-button-sm"
                    style="margin-left: .5em"
                    @click.stop="onOpen(id)"/>
            </template>
        </Card>
    </div>
</template>

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

@Component({
})
export default class Index extends Vue {
    private searchers: any = {};
    private selectedSearcherId: string = '';

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

            this.searchers = data.searchers;
        } catch (e) {

        }
    }

    onSelect(id: string) {
        if (this.selectedSearcherId === id) {
            this.selectedSearcherId = '';

            this.$emit('selected', {});

            return;
        }

        this.selectedSearcherId = id;

        this.$emit('selected', this.searchers[id]);
    }

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

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

    created() {
        this.boot();
    }
};
</script>

<style lang="scss" scoped>
.p-card {
    transition: box-shadow 0.2s ease-in-out;
}
</style>