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.
188 lines
6.9 KiB
188 lines
6.9 KiB
<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>
|