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 #right>
                        <Button @click="onAddNewSearcher"
                                type="button"
                                label="Add new searcher"
                                class="p-button p-button-outlined p-button-secondary p-button-sm">
                        </Button>

                        <Button @click="onDefineSearcher"
                                type="button"
                                label="Define searcher"
                                class="p-button p-button-outlined p-button-primary p-button-sm">
                        </Button>

                        <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 #title>
                Original document content
            </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 #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="Download raw"
                            :icon=" ! applyingOnOriginalDocument ? 'pi pi-download' : 'pi pi-loading'"
                            class="p-button-secondary p-button-outlined p-button-sm"
                            :disabled="processedFileContent == '' || applyingOnOriginalDocument"
                            @click="downloadOriginal"/>

                        <Button
                            label="Run search"
                            icon="pi pi-play"
                            class="p-button-success p-button-outlined p-button-sm"
                            :disabled="!canRunSearchers()"
                            @click="runSearchersWithoutDisplacing"/>

                        <Button
                            label="Run S&D"
                            icon="pi pi-play"
                            class="p-button-success p-button-outlined p-button-sm"
                            :disabled="!canRunSearchers()"
                            @click="runSearchers"/>
                    </template>
                </Toolbar>
            </template>
            <template #title>
                Processed document content
            </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()"
                    :disabled="searchersDialogVisible === true"/>
            </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]"
                    :filters="searchersFilters">
                    <Column selectionMode="multiple" headerStyle="width: 3em"></Column>

                    <Column
                        field="name"
                        header="Name"
                        sortable>
                        <template #body="slotProps">
                            {{slotProps.data.name}}
                        </template>
                        <template #filter>
                            <InputText type="text" v-model="searchersFilters['global']" class="p-column-filter" placeholder="Search by name por description"/>
                        </template>
                    </Column>
                    <Column
                        field="description"
                        header="Description"
                        sortable
                        class="filter-description">
                    </Column>
                </DataTable>

                <template #footer>
                    <Button
                        label="Done"
                        icon="pi pi-check"
                        class="p-button-info p-button-outlined p-button-sm"
                        @click="toggleSearchersDialog(false)">
                    </Button>
                </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">
                                <div class="p-field-radiobutton">
                                    <RadioButton name="action_type"
                                                 id="action_type_replace"
                                                 value="replace"
                                                 v-model="searchersOptions[slotProps.data.id].type">
                                    </RadioButton>

                                    <label for="action_type_replace">Replace</label>
                                </div>

                                <div class="p-field-radiobutton">
                                    <RadioButton name="action_type"
                                                 id="action_type_displace"
                                                 value="displace"
                                                 v-model="searchersOptions[slotProps.data.id].type">
                                    </RadioButton>

                                    <label for="action_type_displace">Displace</label>
                                </div>
                            </div>
                        </div>

                        <div class="p-field">
                            <label :for="`displace_with__${slotProps.data.id}`">
                                <span>
                                    {{ searchersOptions[slotProps.data.id].type === 'replace' ? 'Replace' : 'Displace (tag)' }}
                                </span>

                                <span>
                                    values with:
                                </span>
                            </label>

                            <InputText
                                :id="`displace_with__${slotProps.data.id}`"
                                type="text"
                                class="p-inputtext-sm"
                                v-model="searchersOptions[slotProps.data.id].value"
                                v-tooltip.top="
                                        (slotProps.data.param === 'required') ?
                                        'This field is required.' : null
                                    "
                                :class="{'p-invalid': !isValidParam(slotProps.data.id, slotProps.data.param)}"/>
                        </div>
                    </div>
                </template>

                <template #footer>
                    <Button
                        label="Run filters"
                        icon="pi pi-play"
                        class="p-button-success p-button-sm"
                        :disabled="!canRunSearchers()"
                        @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'}"
            :baseZIndex="2014"
            id="upload_dialog"
            ref="upload-dialog">

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

        </Dialog>

        <define-searcher v-if="showDefineSearcher"
                         :text="searcherToDefineText"
                         @done="onSearcherDefined"
                         @close="showDefineSearcher = false">
        </define-searcher>
    </div>
</template>

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