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.
84 lines
2.2 KiB
84 lines
2.2 KiB
<template>
|
|
|
|
<div class="p-d-flex p-flex-row p-jc-between p-ai-stretch">
|
|
<Panel
|
|
class="p-mr-2 p-as-stretch file-card"
|
|
>
|
|
<template #header>
|
|
File preview
|
|
</template>
|
|
|
|
<Skeleton /><br />
|
|
<Skeleton /><br />
|
|
<Skeleton /><br />
|
|
<Skeleton /><br />
|
|
<Skeleton /><br />
|
|
<Skeleton /><br />
|
|
<Skeleton /><br />
|
|
</Panel>
|
|
|
|
<Card class="p-mr-2 p-as-stretch filters-card">
|
|
<template #header>
|
|
<Toolbar>
|
|
<template #left>
|
|
<h3>Available filters</h3>
|
|
</template>
|
|
<template #right>
|
|
<Button
|
|
icon="pi pi-plus"
|
|
class="p-button-success"
|
|
/>
|
|
</template>
|
|
</Toolbar>
|
|
</template>
|
|
|
|
<template #content>
|
|
<filter-view
|
|
v-for="(filter, id, index) in filters"
|
|
:key="index"
|
|
:id="id"
|
|
:display-name="filter.display_name"
|
|
:options="filter.options"
|
|
></filter-view>
|
|
</template>
|
|
</Card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import axios from 'axios';
|
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
|
import { FileData } from '../interfaces/FileData';
|
|
import { FilterInterface } from '../interfaces/FilterInterface';
|
|
|
|
@Component
|
|
export default class ProcessFile extends Vue {
|
|
|
|
@Prop({ default: null })
|
|
public readonly file!: FileData|null;
|
|
|
|
@Prop({ default: [] })
|
|
public readonly filters!: { [keys:string]: FilterInterface }
|
|
|
|
private selectedFile: File|null = null;
|
|
private selectedFilters = [];
|
|
|
|
/**
|
|
*
|
|
*/
|
|
created() {
|
|
console.log('FILE: ', this.file);
|
|
console.log('FILTERS: ', this.filters);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.file-card {
|
|
flex: 0 1 66%;
|
|
}
|
|
|
|
.filters-card {
|
|
flex: 0 1 32%
|
|
}
|
|
</style>
|