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.
 
 
 
 
 
 

131 lines
4.2 KiB

<template>
<div>
<h1> Searchers </h1>
<div v-if=" ! allowSelect" style="margin-bottom: 1rem;">
<Button class="fc-button p-button-success" label="Add searcher" @click="createSearcher()"/>
</div>
<div class="content">
<DataTable
:value.sync="searchers"
:selection.sync="selectedSearcher"
dataKey="id"
:selectionMode="allowSelect ? 'single' : ''"
class="p-datatable-md"
:paginator="true"
:rows="10"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
:rowsPerPageOptions="[10,20,50]">
<Column v-if="allowSelect" selectionMode="single" headerStyle="width: 3em"></Column>
<Column header="Name" field="name" sortable></Column>
<Column header="Actions" headerStyle="text-align: right">
<template #body="slotProps">
<div class="action-buttons" style="text-align: right">
<Button
:disabled="slotProps.data.type !== 'custom'"
label="Open"
icon="pi pi-folder-open"
class="p-button-sm"
@click.stop="onOpen(slotProps.data.id)"/>
<Button
:disabled="slotProps.data.type !== 'custom'"
label="Edit"
icon="pi pi-pencil"
class="p-button-sm p-button-success"
@click.stop="onEdit(slotProps.data.id)"/>
<Button
:disabled="slotProps.data.type !== 'custom'"
label="Delete"
icon="pi pi-times"
class="p-button-sm p-button-danger"
@click.stop="onDelete(slotProps.data.id)"/>
</div>
</template>
</Column>
</DataTable>
</div>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue, Watch} from "vue-property-decorator";
import {Searcher} from "@/interfaces/Searcher";
import { eventBus } from "@/app";
@Component({
})
export default class Index extends Vue {
private searchers: Array<Searcher> = [];
private selectedSearcher: any = {};
@Prop({default: false})
public readonly allowSelect!: boolean;
@Prop({default: () => []})
public readonly ignoreSearcherIds!: Array<string>;
async boot() {
try {
const { data } = await (window as any).axios.get('/all-searchers');
this.searchers = data.searchers.filter((searcher: Searcher) => {
return ! this.ignoreSearcherIds.includes(searcher.id);
});
} catch (e) {
}
}
onOpen(id: string) {
window.open(this.getURL(id), '_self');
}
onEdit(id: string) {
window.open(this.getURL(id) + '/edit', '_self');
}
async onDelete(id: string) {
try {
await (window as any).axios.delete(`/searchers/${id}`);
this.$toast.add({
severity: 'success',
summary: 'Searcher deleted.',
life: 3000,
});
this.searchers = this.searchers.filter(x => x.id !== id);
} catch (e) {
console.log(e);
}
}
getURL(id: string) {
return `/searchers/${id}`;
}
@Watch('selectedSearcher')
selectedSearcherIdChanged(value: any) {
this.$emit('selected', value);
}
public async changeRoute(url: string) {
window.location.href = url;
}
createSearcher() {
window.location.href = '/searchers/create';
}
created() {
this.boot();
eventBus.$on('changeRoute', this.changeRoute);
}
};
</script>