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.
|
|
<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> </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> <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" 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="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="searchers_dialog" ref="searchers-dialog">
<DataTable :value.sync="searchers" :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>
|