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.
125 lines
4.6 KiB
125 lines
4.6 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>File preview</h3>
|
|
</template>
|
|
|
|
<template #right>
|
|
<Button
|
|
label="Run filters"
|
|
icon="pi pi-play"
|
|
class="p-button-success p-button-outlined p-button-sm"
|
|
:disabled="fileContent == ''"
|
|
@click="runFilters()"/>
|
|
</template>
|
|
</Toolbar>
|
|
</template>
|
|
|
|
<template #content>
|
|
<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>
|
|
</template>
|
|
|
|
</Card>
|
|
|
|
<Card class="p-mr-2 p-as-stretch filters-card">
|
|
<template #header>
|
|
<Toolbar>
|
|
<template #left>
|
|
<h3>Document searchers</h3>
|
|
</template>
|
|
<template #right>
|
|
<Button
|
|
icon="pi pi-plus"
|
|
class="p-button-success p-button-sm p-button-text"
|
|
@click="toggleSearchersMenu"
|
|
aria:haspopup="true"
|
|
aria-controls="overlay_panel" />
|
|
</template>
|
|
</Toolbar>
|
|
</template>
|
|
|
|
<template #content>
|
|
<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" sortable></Column>
|
|
<Column :expander="true" headerStyle="width: 3rem" />
|
|
|
|
<template #expansion="slotProps">
|
|
<div class="options-subtable">
|
|
<!-- TODO: Add real options here -->
|
|
<!-- <h5>Options for {{slotProps.data.name}}</h5> -->
|
|
|
|
<!-- <ProgressSpinner /> -->
|
|
|
|
<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>
|
|
</template>
|
|
</Card>
|
|
|
|
<OverlayPanel
|
|
ref="searchers-overlay"
|
|
appendTo="body"
|
|
id="overlay_panel"
|
|
style="width: 300px">
|
|
|
|
<DataTable
|
|
:value.sync="searchersData"
|
|
:selection.sync="selectedSearchers"
|
|
dataKey="id"
|
|
selectionMode="multiple"
|
|
class="p-datatable-sm"
|
|
:metaKeySelection="false"
|
|
:paginator="true" :rows="10"
|
|
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
|
|
:rowsPerPageOptions="[10,20,50]">
|
|
|
|
<Column selectionMode="multiple" headerStyle="width: 3em"></Column>
|
|
<Column field="name" header="Name" sortable></Column>
|
|
|
|
</DataTable>
|
|
</OverlayPanel>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" src="./ProcessFile.ts"></script>
|
|
<style lang="scss" src="./ProcessFile.scss"></style>
|