Browse Source

Minor bugfixes

master
Radu Liviu Carjan 3 years ago
parent
commit
4437b5da6a
  1. 21485
      package-lock.json
  2. 1
      package.json
  3. 1354
      public/js/app.js
  4. 1
      public/js/mitt.es.js.map
  5. 4
      resources/js/app.ts
  6. 14
      resources/js/components/Home/Home.ts
  7. 5
      resources/js/components/Home/Home.vue
  8. 54
      resources/js/components/ProcessFile/ProcessFile.ts
  9. 49
      resources/js/components/ProcessFile/ProcessFile.vue
  10. 37
      resources/js/components/layout/Header.vue

21485
package-lock.json
File diff suppressed because it is too large
View File

1
package.json

@ -29,6 +29,7 @@
"dependencies": {
"@types/marked": "^2.0.3",
"marked": "^2.0.5",
"mitt": "^2.1.0",
"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primevue": "^2.4.1",

1354
public/js/app.js
File diff suppressed because it is too large
View File

1
public/js/mitt.es.js.map

@ -0,0 +1 @@
{"version":3,"file":"mitt.es.js","sources":["../src/index.ts"],"sourcesContent":["export type EventType = string | symbol;\n\n// An event handler can take an optional event argument\n// and should not return a value\nexport type Handler<T = any> = (event?: T) => void;\nexport type WildcardHandler = (type: EventType, event?: any) => void;\n\n// An array of all currently registered event handlers for a type\nexport type EventHandlerList = Array<Handler>;\nexport type WildCardEventHandlerList = Array<WildcardHandler>;\n\n// A map of event types and their corresponding event handlers.\nexport type EventHandlerMap = Map<EventType, EventHandlerList | WildCardEventHandlerList>;\n\nexport interface Emitter {\n\tall: EventHandlerMap;\n\n\ton<T = any>(type: EventType, handler: Handler<T>): void;\n\ton(type: '*', handler: WildcardHandler): void;\n\n\toff<T = any>(type: EventType, handler: Handler<T>): void;\n\toff(type: '*', handler: WildcardHandler): void;\n\n\temit<T = any>(type: EventType, event?: T): void;\n\temit(type: '*', event?: any): void;\n}\n\n/**\n * Mitt: Tiny (~200b) functional event emitter / pubsub.\n * @name mitt\n * @returns {Mitt}\n */\nexport default function mitt(all?: EventHandlerMap): Emitter {\n\tall = all || new Map();\n\n\treturn {\n\n\t\t/**\n\t\t * A Map of event names to registered handler functions.\n\t\t */\n\t\tall,\n\n\t\t/**\n\t\t * Register an event handler for the given type.\n\t\t * @param {string|symbol} type Type of event to listen for, or `\"*\"` for all events\n\t\t * @param {Function} handler Function to call in response to given event\n\t\t * @memberOf mitt\n\t\t */\n\t\ton<T = any>(type: EventType, handler: Handler<T>) {\n\t\t\tconst handlers = all.get(type);\n\t\t\tconst added = handlers && handlers.push(handler);\n\t\t\tif (!added) {\n\t\t\t\tall.set(type, [handler]);\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove an event handler for the given type.\n\t\t * @param {string|symbol} type Type of event to unregister `handler` from, or `\"*\"`\n\t\t * @param {Function} handler Handler function to remove\n\t\t * @memberOf mitt\n\t\t */\n\t\toff<T = any>(type: EventType, handler: Handler<T>) {\n\t\t\tconst handlers = all.get(type);\n\t\t\tif (handlers) {\n\t\t\t\thandlers.splice(handlers.indexOf(handler) >>> 0, 1);\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Invoke all handlers for the given type.\n\t\t * If present, `\"*\"` handlers are invoked after type-matched handlers.\n\t\t *\n\t\t * Note: Manually firing \"*\" handlers is not supported.\n\t\t *\n\t\t * @param {string|symbol} type The event type to invoke\n\t\t * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler\n\t\t * @memberOf mitt\n\t\t */\n\t\temit<T = any>(type: EventType, evt: T) {\n\t\t\t((all.get(type) || []) as EventHandlerList).slice().map((handler) => { handler(evt); });\n\t\t\t((all.get('*') || []) as WildCardEventHandlerList).slice().map((handler) => { handler(type, evt); });\n\t\t}\n\t};\n}\n"],"names":["all","Map","on","type","handler","handlers","get","push","set","off","splice","indexOf","emit","evt","slice","map"],"mappings":"wBAgC6BA,GAG5B,MAAO,CAKNA,IAPDA,EAAMA,GAAO,IAAIC,IAehBC,YAAYC,EAAiBC,GAC5B,IAAMC,EAAWL,EAAIM,IAAIH,GACXE,GAAYA,EAASE,KAAKH,IAEvCJ,EAAIQ,IAAIL,EAAM,CAACC,KAUjBK,aAAaN,EAAiBC,GAC7B,IAAMC,EAAWL,EAAIM,IAAIH,GACrBE,GACHA,EAASK,OAAOL,EAASM,QAAQP,KAAa,EAAG,IAcnDQ,cAAcT,EAAiBU,IAC5Bb,EAAIM,IAAIH,IAAS,IAAyBW,QAAQC,IAAI,SAACX,GAAcA,EAAQS,MAC7Eb,EAAIM,IAAI,MAAQ,IAAiCQ,QAAQC,IAAI,SAACX,GAAcA,EAAQD,EAAMU"}

4
resources/js/app.ts

@ -33,6 +33,8 @@ import Dialog from 'primevue/dialog';
import Message from 'primevue/message';
import Timeline from 'primevue/timeline';
import ScrollPanel from 'primevue/scrollpanel';
import ConfirmationService from 'primevue/confirmationservice';
import ConfirmDialog from 'primevue/confirmdialog';
// Own components
import AppHeader from './components/layout/Header.vue';
@ -50,6 +52,7 @@ Vue.use(PrimeVue, {
});
Vue.use(ToastService);
Vue.use(ConfirmationService);
Vue.use(ApiPlugin);
Vue.component('Button', Button);
@ -78,6 +81,7 @@ Vue.component('Dialog', Dialog);
Vue.component('Message', Message);
Vue.component('Timeline', Timeline);
Vue.component('ScrollPanel', ScrollPanel);
Vue.component('ConfirmDialog', ConfirmDialog);
// Layout
Vue.component('app-header', AppHeader);

14
resources/js/components/Home/Home.ts

@ -17,9 +17,19 @@ export default class Home extends Vue {
/**
* A method which uploads the files to the server for processing
*
* @param event The event containing the uploaded files information
* @param {any} event The event containing the uploaded files information
*/
public async uploadFile(event: any): Promise<void> {
let file = event.files[0];
return this.uploadNewFile(file);
}
/**
* A method which uploads the files to the server for processing
*
* @param {File} file The event containing the uploaded files information
*/
public async uploadNewFile(file: File): Promise<void> {
this.uploading = true;
this.fileUploaded = false;
@ -27,8 +37,6 @@ export default class Home extends Vue {
this.$toast.add({severity: 'info', summary: 'Uploading...', detail: 'Uploading your file...', life: 3000});
try {
let file = event.files[0];
let response = await this.$api.uploadFile(file);
this.fileUploaded = true;

5
resources/js/components/Home/Home.vue

@ -25,7 +25,10 @@
<Skeleton /><br />
</div>
<div class="wrap" v-else>
<process-file :file="uploadResult" :searchers="searchers"></process-file>
<process-file
@newFile="uploadNewFile"
:file="uploadResult"
:searchers="searchers"></process-file>
</div>
</template>

54
resources/js/components/ProcessFile/ProcessFile.ts

@ -42,6 +42,9 @@ export default class ProcessFile extends Vue {
// Toggles the visibility of the available searchers dialog
private searchersDialogVisible: boolean = false;
// Toggles the visibility of the document upload dialog
private uploadDialogVisible: boolean = false;
// The list of filters/searchers in a format usable by the datatable
// private searchersData: Array<{ id: string; name: string; type: string; }> = [];
@ -52,7 +55,7 @@ export default class ProcessFile extends Vue {
private selectedSearchers: any = {};
//The list of expanded rows in the selected filters/searchers table
private expandedRows: Array<{ id: string; name: string; }> = [];
private expandedRows: Array<any> = [];
// The list of options applied to the searchers (for the moment, only replace_with)
private searchersOptions: { [key: string]: string } = {};
@ -111,13 +114,54 @@ export default class ProcessFile extends Vue {
if ( ! this.searchersDialogVisible) {
for (let selectedSearcher of this.newlySelectedSearchers) {
this.selectedSearchers[selectedSearcher.id] = selectedSearcher;
// this.selectedSearchers[selectedSearcher.id] = selectedSearcher;
this.$set(this.selectedSearchers, selectedSearcher.id, selectedSearcher);
this.expandedRows = Object.values(this.selectedSearchers).filter((p: any) => p.id);
}
this.newlySelectedSearchers = [];
}
}
/**
* Toggle the dialog which lets the user upload a new document
*
* @param {boolean} newValue
*/
toggleUploadDialog(newValue?: boolean) {
if (typeof newValue !== 'undefined') {
this.uploadDialogVisible = newValue;
} else {
this.uploadDialogVisible = !this.searchersDialogVisible;
}
}
/**
* A method which uploads the files to the server for processing
*
* @param event The event containing the uploaded files information
*/
public async uploadFile(event: any): Promise<void> {
this.$confirm.require({
message: 'You will lose any progress on the current uploaded document. Are you sure you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => {
this.fileContent = this.processedFileContent = '';
let file = event.files[0];
this.toggleUploadDialog(false);
this.$emit('newFile', file);
},
reject: () => {
// TODO: Show a message to the user that the action was cancelled.
}
});
}
/**
* Wait for the file to be processed in ingest
*/
@ -154,7 +198,7 @@ export default class ProcessFile extends Vue {
* @param $event
*/
private onSelectedSearchersReorder($event: any) {
this.selectedSearchers = $event.value;
Object.assign({}, this.selectedSearchers, $event.value);
}
private confirmDeleteProduct(searcher: any) {
@ -190,6 +234,7 @@ export default class ProcessFile extends Vue {
* Create the diff preview for the document
*/
private createDiffPreview() {
console.log('CREATING DIFF PREVIEW: ', this.processedFileContent);
this.processedFileContentPreview = this.processedFileContent;
let indexes: Array<{ start: number; end: number }> = [];
@ -233,7 +278,6 @@ export default class ProcessFile extends Vue {
*/
@Watch('showDiffHighlight')
private onDiffHighlightChanged(newValue: boolean, oldValue: boolean): void {
console.log('OLD: ', oldValue);
console.log('NEW: ', newValue);
//
}
}

49
resources/js/components/ProcessFile/ProcessFile.vue

@ -6,6 +6,15 @@
<template #left>
<h3>Original document content</h3>
</template>
<template #right>
<Button
label="Try another document"
icon="pi pi-upload"
class="p-button-success p-button-outlined p-button-sm"
@click="toggleUploadDialog()"/>
</template>
</Toolbar>
</template>
@ -60,7 +69,7 @@
label="Run filters"
icon="pi pi-play"
class="p-button-success p-button-outlined p-button-sm"
:disabled="fileContent == '' || selectedSearchers.length === 0"
:disabled="fileContent == '' || Object.keys(selectedSearchers).length === 0"
@click="runSearchers()"/>
</template>
</Toolbar>
@ -169,13 +178,15 @@
dataKey="id"
class="p-datatable-sm"
:expandedRows.sync="expandedRows"
@row-reorder="onSelectedSearchersReorder">
@row-reorder="onSelectedSearchersReorder"
:scrollable="true"
scrollHeight="80vh">
<Column :rowReorder="true" headerStyle="width: 3rem"/>
<Column field="name" header="Name"></Column>
<Column>
<Column headerStyle="width: 3rem">
<template #body="slotProps">
<Button icon="pi pi-trash"
class="p-button-rounded p-button-warning"
@ -204,8 +215,40 @@
</div>
</template>
<template #footer>
<Button
label="Run filters"
icon="pi pi-play"
class="p-button-success p-button-sm"
:disabled="fileContent == '' || Object.keys(selectedSearchers).length === 0"
@click="toggleSearchersSidebar(); runSearchers()"/>
</template>
</DataTable>
</Sidebar>
<!-- File upload dialog -->
<Dialog header="Upload a new file"
:visible.sync="uploadDialogVisible"
:maximizable="true"
:style="{width: '50vw'}"
:contentStyle="{overflow: 'visible'}"
id="upload_dialog"
ref="upload-dialog">
<FileUpload
name="upload[]"
:customUpload="true"
:auto="true"
@uploader="uploadFile">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
</Dialog>
</div>
</template>

37
resources/js/components/layout/Header.vue

@ -2,19 +2,25 @@
<div class="header">
<!-- Left side of header -->
<div class="left">
<Button @click="onHomeButtonClick" class="p-button-primary" label="Search and Displace" />
<Button
@click="onRouteChange('/')"
class="p-button-primary"
label="Search and Displace" />
</div>
<!-- Right side of header -->
<div class="right">
<a href="/regex/create" style="margin-right: 1rem;">
<Button class="fc-button">Add regex</Button>
</a>
<a href="/searchers">
<Button class="fc-button">Searchers</Button>
</a>
<Button
@click="onRouteChange('/regex/create')"
class="p-button-primary fc-button"
label="Add regex" />
<Button
@click="onRouteChange('/searchers')"
class="p-button-primary fc-button"
label="Add regex" />
</div>
<ConfirmDialog></ConfirmDialog>
</div>
</template>
@ -27,5 +33,20 @@ export default class AppHeader extends Vue {
onHomeButtonClick() {
window.location.href = '/';
}
onRouteChange(url: string) {
this.$confirm.require({
message: 'You will lose any progress on the current uploaded document. Are you sure you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => {
console.log("ACCEPT!");
window.location.href = url;
},
reject: () => {
// TODO: Show a message to the user that the action was cancelled.
}
});
}
}
</script>
Loading…
Cancel
Save