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

<template>

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

            <template #content>
                <template v-if="fileContent === ''">
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                </template>
                <template v-else>
                    <vue-markdown :source="fileContent" />
                </template>
            </template>

        </Card>

        <Card class="p-mr-2 p-as-stretch filters-card">
            <template #header>
                <Toolbar>
                    <template #left>
                        <h3>Document searchers</h3>
                    </template>
                    <template #right>
                        <Button
                            icon="pi pi-plus"
                            class="p-button-success p-button-sm p-button-text"
                            @click="toggleSearchersMenu"
                            aria:haspopup="true"
                            aria-controls="overlay_panel" />
                    </template>
                </Toolbar>
            </template>

            <template #content>
                <DataTable
                    :value.sync="selectedSearchers"
                    dataKey="id"
                    :expandedRows.sync="expandedRows"
                    @row-reorder="onSelectedSearchersReorder"
                    @row-expand="onSelectedSearcherExpand"
                    @row-collapse="onSelectedSearcherCollapse">

                    <Column :rowReorder="true" headerStyle="width: 3rem" />
                    <Column field="name" header="Name" sortable></Column>
                    <Column :expander="true" headerStyle="width: 3rem" />

                    <template #expansion="slotProps">
                        <div class="options-subtable">
                            <!-- TODO: Add real options here -->
                            <h5>Options for {{slotProps.data.name}}</h5>

                            <!-- <ProgressSpinner /> -->

                            <div class="p-fluid">
                                <div class="p-field">
                                    <label for="firstname">Option 1</label>
                                    <InputText id="firstname" type="text" class="p-inputtext-sm" />
                                </div>
                                <div class="p-field">
                                    <label for="lastname">Option 2</label>
                                    <InputText id="lastname" type="text" class="p-inputtext-sm" />
                                </div>
                            </div>

                        </div>
                    </template>

                </DataTable>
            </template>
        </Card>

        <OverlayPanel
            ref="searchers-overlay"
            appendTo="body"
            id="overlay_panel"
            style="width: 300px">

            <DataTable
                :value.sync="searchersData"
                :selection.sync="selectedSearchers"
                dataKey="id"
                selectionMode="multiple"
                class="p-datatable-sm"
                :metaKeySelection="false">

                <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
                <Column field="name" header="Name" sortable></Column>

            </DataTable>
        </OverlayPanel>
    </div>
</template>

<script lang="ts" src="./ProcessFile.ts"></script>
<style lang="scss" src="./ProcessFile.scss"></style>