searchanddisplace-core/resources/js/components/ProcessFile.vue

<template>

    <div class="p-d-flex p-flex-row p-jc-between p-ai-stretch">
        <Panel
            class="p-mr-2 p-as-stretch file-card"
        >
            <template #header>
                File preview
            </template>

            <Skeleton /><br />
            <Skeleton /><br />
            <Skeleton /><br />
            <Skeleton /><br />
            <Skeleton /><br />
            <Skeleton /><br />
            <Skeleton /><br />
        </Panel>

        <Card class="p-mr-2 p-as-stretch filters-card">
            <template #header>
                <Toolbar>
                    <template #left>
                        <h3>Available filters</h3>
                    </template>
                    <template #right>
                        <Button
                            icon="pi pi-plus"
                            class="p-button-success"
                        />
                    </template>
                </Toolbar>
            </template>

            <template #content>
                <filter-view
                    v-for="(filter, id, index) in filters"
                    :key="index"
                    :id="id"
                    :display-name="filter.display_name"
                    :options="filter.options"
                ></filter-view>
            </template>
        </Card>
    </div>
</template>

<script lang="ts">
    import axios from 'axios';
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import { FileData } from '../interfaces/FileData';
    import { FilterInterface } from '../interfaces/FilterInterface';

    @Component
    export default class ProcessFile extends Vue {

        @Prop({ default: null })
        public readonly file!: FileData|null;

        @Prop({ default: [] })
        public readonly filters!: { [keys:string]: FilterInterface }

        private selectedFile: File|null = null;
        private selectedFilters = [];

        /**
         *
         */
        created() {
            console.log('FILE: ', this.file);
            console.log('FILTERS: ', this.filters);
        }
    }
</script>

<style lang="scss">
.file-card {
    flex: 0 1 66%;
}

.filters-card {
    flex: 0 1 32%
}
</style>