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

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

                    <template #right>

                        <Button
                            label="Try another document"
                            icon="pi pi-upload"
                            class="p-button-success p-button-outlined p-button-sm"
                            @click="toggleUploadDialog()"/>
                    </template>
                </Toolbar>
            </template>

            <template #content>
                <div class="md-viewer" style="text-align: start; font-size: 0.7em;">
                    <template v-if="fileContent === ''">
                        <Skeleton/>
                        <br/>
                        <Skeleton/>
                        <br/>
                        <Skeleton/>
                        <br/>
                        <Skeleton/>
                        <br/>
                        <Skeleton/>
                        <br/>
                        <Skeleton/>
                        <br/>
                        <Skeleton/>
                        <br/>
                    </template>
                    <template v-else>
                        <div v-html="compiledFileContent"></div>
                    </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>
                        <label for="show-diff-highlight" class="switch-label">Highlight differences:</label>
                        <InputSwitch
                            v-model="showDiffHighlight"
                            name="show-diff-highlight"
                            inputId="show-diff-highlight"
                            :disabled="processedFileContent == ''"/>

                        <Button
                            label="Download document"
                            icon="pi pi-download"
                            class="p-button-secondary p-button-outlined p-button-sm"
                            :disabled="processedFileContent == ''"
                            @click="downloadOdt"/>

                        <Button
                            label="Run filters"
                            icon="pi pi-play"
                            class="p-button-success p-button-outlined p-button-sm"
                            :disabled="fileContent == '' || Object.keys(selectedSearchers).length === 0"
                            @click="runSearchers"/>
                    </template>
                </Toolbar>
            </template>

            <template #content>
                <div class="md-viewer" style="text-align: start; font-size: 0.7em;">
                    <template v-if="processing === true">
                        <Skeleton/>
                        <br/>
                        <Skeleton/>
                        <br/>
                        <Skeleton/>
                        <br/>
                        <Skeleton/>
                        <br/>
                        <Skeleton/>
                        <br/>
                        <Skeleton/>
                        <br/>
                        <Skeleton/>
                        <br/>
                    </template>
                    <template v-else-if="processedFileContentPreview !== ''">
                        <div v-html="compiledProcessedFileContentPreview" v-if="showDiffHighlight"></div>
                        <div v-html="compiledProcessedFileContent" v-else></div>
                    </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="true"
            :showCloseIcon="false"
            :class="{'p-sidebar-md': true, 'p-sidebar-leave-to': !searchersSidebarVisible}"
            :dismissable="true"
            :modal="false"
            :autoZIndex="true"
            :baseZIndex="1000"
            position="right">
            <div class="p-grid p-jc-start">
                <Button
                    icon="pi pi-list"
                    class="p-button-info p-button-icon-only sidebar-toggle-button"
                    @click="toggleSearchersSidebar()"/>
            </div>

            <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="searchers_dialog"
                    ref="searchers-dialog">

                <DataTable
                    :value.sync="searchers"
                    :selection.sync="newlySelectedSearchers"
                    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="Object.values(selectedSearchers)"
                dataKey="id"
                class="p-datatable-sm"
                :expandedRows.sync="expandedRows"
                @row-reorder="onSelectedSearchersReorder"
                :scrollable="true"
                scrollHeight="80vh">

                <Column :rowReorder="true" headerStyle="width: 3rem"/>

                <Column field="name" header="Name"></Column>

                <Column headerStyle="width: 3rem">
                    <template #body="slotProps">
                        <Button icon="pi pi-trash"
                                class="p-button-rounded p-button-warning"
                                @click="confirmDeleteProduct(slotProps.data)"/>
                    </template>
                </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>

                <template #footer>
                    <Button
                        label="Run filters"
                        icon="pi pi-play"
                        class="p-button-success p-button-sm"
                        :disabled="fileContent == '' || Object.keys(selectedSearchers).length === 0"
                        @click="toggleSearchersSidebar(); runSearchers()"/>
                </template>
            </DataTable>
        </Sidebar>


        <!-- File upload dialog -->
        <Dialog header="Upload a new file"
            :visible.sync="uploadDialogVisible"
            :maximizable="true"
            :style="{width: '50vw'}"
            :contentStyle="{overflow: 'visible'}"
            id="upload_dialog"
            ref="upload-dialog">


            <FileUpload
                name="upload[]"
                :customUpload="true"
                :auto="true"
                @uploader="uploadFile">
                <template #empty>
                    <p>Drag and drop files to here to upload.</p>
                </template>
            </FileUpload>

        </Dialog>
    </div>
</template>

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