searchanddisplace-core/resources/js/components/ProcessFile/ProcessFile.ts

import axios from 'axios';
// import OverlayPanel from 'primevue/overlaypanel/OverlayPanel';
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { FileData } from '@interfaces/FileData';

@Component
export default class ProcessFile extends Vue {

    /**
     * Props
     */
    // The data for the file we are processing
    @Prop({ default: { id: -1, file: '', path: '' } })
    public readonly file!: FileData;

    // The list of available searchers
    @Prop({ default: [] })
    public readonly searchers!: { [keys: string]: string; }


    /**
     * Class members
     */
    public $refs!: {
        'searchers-overlay': any
    }

    // The id of the interval used to query the file status
    private intervalId!: any;

    // The content of the file we are processing
    private fileContent: string = '';

    // The list of filters/searchers in a format usable by the datatable
    private searchersData: Array<{ id: string; name: string; }> = [];

    // The list of selected filters/searchers
    private selectedSearchers: Array<{ id: string; name: string; }> = [];

    //The list of expanded rows in the selected filters/searchers table
    private expandedRows: Array<{id: string; name: string; }> = [];

    private searchersOptions: { [key: string]: string } = {};

    /**
     *
     */
    created() {
        for(let index in this.searchers) {
            let searcherData = {
                id: index,
                name: this.searchers[index]
            };

            this.searchersData.push(searcherData);
        }


        this.intervalId = setInterval(this.waitForFile, 3000);
    }

    /**
     * Wait for the file to be processed in ingest
     */
    private async waitForFile() {

        const response = await this.$api.getFileData(this.file.id);

        if (response.content !== null) {

            if (response.ingest_status === 'fail') {
                this.$toast.add({
                    severity: 'error',
                    summary: 'File error',
                    detail: 'THere was an error processing the file in ingest',
                    life: 3000
                });
            } else {
                this.fileContent = response.content;

                this.$toast.add({
                    severity:'success',
                    summary: 'File loaded',
                    detail: 'The file has been processed by ingest.',
                    life: 3000
                });

                clearInterval(this.intervalId);
            }
        }
    }

    /**
     * Toggle the menu containing the list of available searchers
     *
     * @param $event
     */
    private toggleSearchersMenu($event: any) {
        this.$refs['searchers-overlay'].toggle($event);
    }


    private onSelectedSearchersReorder($event: any)
    {
        this.selectedSearchers = $event.value;
    }

    /**
     * Run the filters
     */
    private async runFilters() {
        let searchers: Array<{ key: string; replace_with: string; }> = [];
        this.selectedSearchers.forEach( (searcher) => {
            searchers.push({
                'key': searcher.id,
                'replace_with': this.searchersOptions[searcher.id] || ''
            });
        })

        const response = await this.$api.filterDocument(this.fileContent, searchers);

        console.log(response);

        this.fileContent = response.content;
    }
}