geodata-catalog/frontend/src/components/OverviewScreen.vue

<template>
    <div class="overview">
        <va-card class="content-container">
            <map-component v-if="settleFinishedComputed" ref="map" :idlist="itemIdList"
                @mapClick="$emit('mapClick', $event)" />
        </va-card>
        <va-card class="content-container">
            <va-scroll-container vertical>
                <va-data-table virtual-scroller sticky-header v-if="items.length" :items="items" :columns="columns" :hoverable="true" :clickable="true"
                    @row:click="(e) => $router.push(`/items/${e.item.id}`)"
                    no-data-filtered-html="Не найдено образцов, соответствующих данному запросу" />
                <h1 v-else class="no-items">Не найдено образцов, соответствующих данному запросу</h1>
            </va-scroll-container>
        </va-card>
    </div>
</template>


<script>
import MapComponent from "./MapComponent.vue";
export default {
    name: "overview-screen",
    components: { MapComponent },
    props: {
        items: {
            type: Array,
            required: true,
        },
        columns: {
            type: Array,
            required: true,
        },
    },
    data() {
        return {
            settleFinished: false,
        }
    },
    methods: {},
    computed: {
        itemIdList() {
            return this.items.map(item => item.internal_id)
        },

        settleFinishedComputed() {
            let result = this.settleFinished ? this.settleFinished : Boolean(this.items.length);
            this.settleFinished = true;
            return result
        }
    },

}
</script>


<style lang="css" scoped>
.overview {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.content-container {
    width: 80rem;
    height: 30rem;
    margin: 1rem auto;
}

.no-items {
    margin: 3rem;
}
</style>