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

  1. <template>
  2. <div>
  3. <h1> Searchers </h1>
  4. <div v-if=" ! allowSelect" style="margin-bottom: 1rem;">
  5. <Button class="fc-button p-button-success" label="Add searcher" @click="createSearcher()"/>
  6. </div>
  7. <div class="content">
  8. <DataTable
  9. :value.sync="searchers"
  10. :selection.sync="selectedSearcher"
  11. dataKey="id"
  12. :selectionMode="allowSelect ? 'single' : ''"
  13. class="p-datatable-md"
  14. :paginator="true"
  15. :rows="10"
  16. paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
  17. currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
  18. :rowsPerPageOptions="[10,20,50]">
  19. <Column v-if="allowSelect" selectionMode="single" headerStyle="width: 3em"></Column>
  20. <Column header="Name" field="name" sortable></Column>
  21. <Column header="Actions" headerStyle="text-align: right">
  22. <template #body="slotProps">
  23. <div class="action-buttons" style="text-align: right">
  24. <Button
  25. :disabled="slotProps.data.type !== 'custom'"
  26. label="Open"
  27. icon="pi pi-folder-open"
  28. class="p-button-sm"
  29. @click.stop="onOpen(slotProps.data.id)"/>
  30. <Button
  31. :disabled="slotProps.data.type !== 'custom'"
  32. label="Edit"
  33. icon="pi pi-pencil"
  34. class="p-button-sm p-button-success"
  35. @click.stop="onEdit(slotProps.data.id)"/>
  36. <Button
  37. :disabled="slotProps.data.type !== 'custom'"
  38. label="Delete"
  39. icon="pi pi-times"
  40. class="p-button-sm p-button-danger"
  41. @click.stop="onDelete(slotProps.data.id)"/>
  42. </div>
  43. </template>
  44. </Column>
  45. </DataTable>
  46. </div>
  47. </div>
  48. </template>
  49. <script lang="ts">
  50. import {Component, Prop, Vue, Watch} from "vue-property-decorator";
  51. import {Searcher} from "@/interfaces/Searcher";
  52. import { eventBus } from "@/app";
  53. @Component({
  54. })
  55. export default class Index extends Vue {
  56. private searchers: Array<Searcher> = [];
  57. private selectedSearcher: any = {};
  58. @Prop({default: false})
  59. public readonly allowSelect!: boolean;
  60. @Prop({default: () => []})
  61. public readonly ignoreSearcherIds!: Array<string>;
  62. async boot() {
  63. try {
  64. const { data } = await (window as any).axios.get('/all-searchers');
  65. this.searchers = data.searchers.filter((searcher: Searcher) => {
  66. return ! this.ignoreSearcherIds.includes(searcher.id);
  67. });
  68. } catch (e) {
  69. }
  70. }
  71. onOpen(id: string) {
  72. window.open(this.getURL(id), '_self');
  73. }
  74. onEdit(id: string) {
  75. window.open(this.getURL(id) + '/edit', '_self');
  76. }
  77. async onDelete(id: string) {
  78. try {
  79. await (window as any).axios.delete(`/searchers/${id}`);
  80. this.$toast.add({
  81. severity: 'success',
  82. summary: 'Searcher deleted.',
  83. life: 3000,
  84. });
  85. this.searchers = this.searchers.filter(x => x.id !== id);
  86. } catch (e) {
  87. console.log(e);
  88. }
  89. }
  90. getURL(id: string) {
  91. return `/searchers/${id}`;
  92. }
  93. @Watch('selectedSearcher')
  94. selectedSearcherIdChanged(value: any) {
  95. this.$emit('selected', value);
  96. }
  97. public async changeRoute(url: string) {
  98. window.location.href = url;
  99. }
  100. createSearcher() {
  101. window.location.href = '/searchers/create';
  102. }
  103. created() {
  104. this.boot();
  105. eventBus.$on('changeRoute', this.changeRoute);
  106. }
  107. };
  108. </script>