|
|
|
@ -1,7 +1,6 @@ |
|
|
|
import axios from 'axios'; |
|
|
|
// import OverlayPanel from 'primevue/overlaypanel/OverlayPanel';
|
|
|
|
import {Vue, Component, Prop, Watch} from 'vue-property-decorator'; |
|
|
|
import {FileData} from '@/interfaces/FileData'; |
|
|
|
import marked from 'marked'; |
|
|
|
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'; |
|
|
|
import { FileData } from '@/interfaces/FileData'; |
|
|
|
|
|
|
|
@Component |
|
|
|
export default class ProcessFile extends Vue { |
|
|
|
@ -30,6 +29,10 @@ export default class ProcessFile extends Vue { |
|
|
|
// The processed document content
|
|
|
|
private processedFileContent: string = ''; |
|
|
|
|
|
|
|
private processedFileContentPreview: string = ''; |
|
|
|
|
|
|
|
private documentDiffIndexes: { [key:string]: Array<{ start: number; end: number; }>; } = {}; |
|
|
|
|
|
|
|
// Flag to determine whether the text is processing or not
|
|
|
|
private processing: boolean = false; |
|
|
|
|
|
|
|
@ -54,6 +57,9 @@ export default class ProcessFile extends Vue { |
|
|
|
// The list of options applied to the searchers (for the moment, only replace_with)
|
|
|
|
private searchersOptions: { [key: string]: string } = {}; |
|
|
|
|
|
|
|
// Flag to determine whether or not we will show the diff highlights
|
|
|
|
private showDiffHighlight: boolean = false; |
|
|
|
|
|
|
|
/** |
|
|
|
* |
|
|
|
*/ |
|
|
|
@ -61,6 +67,27 @@ export default class ProcessFile extends Vue { |
|
|
|
this.intervalId = setInterval(this.waitForFile, 3000); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* MD-to-HTML compiled file content |
|
|
|
*/ |
|
|
|
get compiledFileContent(): string { |
|
|
|
return marked(this.fileContent); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* MD-to-HTML compiled processed file content |
|
|
|
*/ |
|
|
|
get compiledProcessedFileContent(): string { |
|
|
|
return marked(this.processedFileContent); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* MD-to-HTML compiled processed file content with diff highlight |
|
|
|
*/ |
|
|
|
get compiledProcessedFileContentPreview(): string { |
|
|
|
return marked(this.processedFileContentPreview); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Toggle the sidebar containing the searchers |
|
|
|
*/ |
|
|
|
@ -114,7 +141,12 @@ export default class ProcessFile extends Vue { |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
private onSelectedSearchersReorder($event: any) { |
|
|
|
/** |
|
|
|
* |
|
|
|
* @param $event |
|
|
|
*/ |
|
|
|
private onSelectedSearchersReorder($event: any) |
|
|
|
{ |
|
|
|
this.selectedSearchers = $event.value; |
|
|
|
} |
|
|
|
|
|
|
|
@ -135,15 +167,62 @@ export default class ProcessFile extends Vue { |
|
|
|
|
|
|
|
const response = await this.$api.filterDocument(this.fileContent, searchers); |
|
|
|
|
|
|
|
console.log(response); |
|
|
|
|
|
|
|
this.processedFileContent = response.content; |
|
|
|
this.documentDiffIndexes = response.indexes; |
|
|
|
this.createDiffPreview(); |
|
|
|
|
|
|
|
this.processing = false; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Create the diff preview for the document |
|
|
|
*/ |
|
|
|
private createDiffPreview() { |
|
|
|
this.processedFileContentPreview = this.processedFileContent; |
|
|
|
|
|
|
|
let indexes: Array<{start: number; end: number}> = []; |
|
|
|
|
|
|
|
for (let searcher in this.documentDiffIndexes) { |
|
|
|
const searcherIndexes = this.documentDiffIndexes[searcher]; |
|
|
|
|
|
|
|
searcherIndexes.forEach(index => { |
|
|
|
indexes.push(index); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
indexes.sort((a, b) => { |
|
|
|
return b.start - a.start; |
|
|
|
}); |
|
|
|
|
|
|
|
this.processedFileContentPreview = indexes.reduce( |
|
|
|
(r, a) => { |
|
|
|
r[a.start] = '<mark>' + r[a.start]; |
|
|
|
r[a.end] += '</mark>'; |
|
|
|
return r; |
|
|
|
}, |
|
|
|
this.processedFileContent.split('') |
|
|
|
).join(''); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Download the document in ODT format |
|
|
|
*/ |
|
|
|
private async downloadOdt() { |
|
|
|
let response = await this.$api.convertFile(this.processedFileContent); |
|
|
|
|
|
|
|
window.open(`${window.location.origin}/file/download/` + response.path); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Watch the `showDiffHighlight` property for changes |
|
|
|
* |
|
|
|
* @param {boolean} newValue |
|
|
|
* @param {boolean} oldValue |
|
|
|
*/ |
|
|
|
@Watch('showDiffHighlight') |
|
|
|
private onDiffHighlightChanged(newValue: boolean, oldValue: boolean): void |
|
|
|
{ |
|
|
|
console.log('OLD: ', oldValue); |
|
|
|
console.log('NEW: ', newValue); |
|
|
|
} |
|
|
|
} |
Orzu Ionut
3 years ago