Repo for the search and displace core module including the interface to select files and search and displace operations to run on them.
https://searchanddisplace.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
10 KiB
263 lines
10 KiB
<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="!canRunSearchers()"
|
|
@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()"
|
|
: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]">
|
|
|
|
<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]"
|
|
v-tooltip.top="
|
|
(slotProps.data.param === 'required') ?
|
|
'This field is required.' : null
|
|
"
|
|
:class="{'p-invalid': !isValidParam(slotProps.data.id, slotProps.data.param)}"/>
|
|
</div>
|
|
</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[]"
|
|
: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>
|