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.
111 lines
4.0 KiB
111 lines
4.0 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>
|
|
</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"
|
|
:expandedRows.sync="expandedRows"
|
|
@row-reorder="onSelectedSearchersReorder"
|
|
@row-expand="onSelectedSearcherExpand"
|
|
@row-collapse="onSelectedSearcherCollapse">
|
|
|
|
<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="firstname">Option 1</label>
|
|
<InputText id="firstname" type="text" class="p-inputtext-sm" />
|
|
</div>
|
|
<div class="p-field">
|
|
<label for="lastname">Option 2</label>
|
|
<InputText id="lastname" type="text" class="p-inputtext-sm" />
|
|
</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">
|
|
|
|
<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>
|