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>Original document content</h3>
                    </template>
                </Toolbar>
            </template>

            <template #content>
                <div class="md-viewer">
                    <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>
                </div>
            </template>

        </Card>

        <Card
            class="p-mr-2 p-as-stretch file-card"
        >

            <template #header>
                <Toolbar>
                    <template #left>
                        <h3>Processed document content</h3>
                    </template>

                    <template #right>
                        <Button
                            label="Download document"
                            icon="pi pi-download"
                            class="p-button-secondary p-button-outlined p-button-sm"
                            @click="downloadOdt()"/>

                        <Button
                            label="Run filters"
                            icon="pi pi-play"
                            class="p-button-success p-button-outlined p-button-sm"
                            :disabled="fileContent == ''"
                            @click="runSearchers()"/>

                        <Button
                            label="Toggle filters list"
                            icon="pi pi-list"
                            class="p-button-info p-button-outlined p-button-sm"
                            @click="toggleSearchersSidebar()"/>
                    </template>
                </Toolbar>
            </template>

            <template #content>
                <div class="md-viewer">
                    <template v-if="processing === true">
                        <Skeleton /><br />
                        <Skeleton /><br />
                        <Skeleton /><br />
                        <Skeleton /><br />
                        <Skeleton /><br />
                        <Skeleton /><br />
                        <Skeleton /><br />
                    </template>
                    <template v-else-if="processedFileContent !== ''">
                        <vue-markdown :source="processedFileContent" />
                    </template>
                    <template v-else>
                        <Message severity="info" :closable="false">
                            Not processed yet. Please select and run some filters to see the result.
                        </Message>
                    </template>
                </div>
            </template>

        </Card>


        <Sidebar
            :visible.sync="searchersSidebarVisible"
            :showCloseIcon="true"
            class="p-sidebar-md"
            position="right">

            <div class="p-grid p-jc-between sidebar-title-container">
                <div class="p-col sidebar-title">
                    <h3>Document searchers</h3>
                </div>

                <div class="p-col-2">
                    <Button
                        icon="pi pi-plus"
                        class="p-button-success p-button-sm p-button-text add-searchers"
                        @click="toggleSearchersDialog(true)"
                        aria:haspopup="true"
                        aria-controls="searcers_dialog" />
                </div>
            </div>

            <Dialog
                header="Available document searchers"
                :visible.sync="searchersDialogVisible"
                :maximizable="true"
                :style="{width: '50vw'}"
                :contentStyle="{overflow: 'visible'}"
                id="searcers_dialog"
                ref="searcers-dialog">

                <DataTable
                    :value.sync="searchersData"
                    :selection.sync="selectedSearchers"
                    dataKey="id"
                    selectionMode="multiple"
                    class="p-datatable-sm"
                    :metaKeySelection="false"
                    :paginator="true" :rows="10"
                    paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
                    :rowsPerPageOptions="[10,20,50]">

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

                </DataTable>

                <template #footer>
                    <Button
                        label="Done"
                        icon="pi pi-check"
                        class="p-button-info p-button-outlined p-button-sm"
                        @click="toggleSearchersDialog(false)"/>
                </template>

            </Dialog>

            <DataTable
                :value.sync="selectedSearchers"
                dataKey="id"
                class="p-datatable-sm"
                :expandedRows.sync="expandedRows"
                @row-reorder="onSelectedSearchersReorder">

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

                <template #expansion="slotProps">
                    <div class="options-subtable">

                        <div class="p-fluid">
                            <div class="p-field">
                                <label :for="`replace_with__${slotProps.data.id}`">
                                    Replace values with:
                                </label>

                                <InputText
                                    :id="`replace_with__${slotProps.data.id}`"
                                    type="text"
                                    class="p-inputtext-sm"
                                    v-model="searchersOptions[slotProps.data.id]"/>
                            </div>
                        </div>

                    </div>
                </template>

            </DataTable>
        </Sidebar>
    </div>
</template>

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