Minor updates to UI

public/css/app.css

@@ -10373,7 +10373,7 @@
 }
 
 .header {
-  background: var(--blue-400);
+  background: #2196F3;
   height: 4rem;
   padding: 0 2rem;
   border-bottom: 1px solid #dee2e6;
@@ -10388,7 +10388,7 @@
 }
 
 .footer {
-  background: var(--blue-400);
+  background: #2196F3;
   height: 4rem;
   border-top: 1px solid #dee2e6;
   border-bottom: 1px solid #dee2e6;

resources/js/app.ts

@@ -29,6 +29,8 @@ import OverlayPanel from 'primevue/overlaypanel';
 import Checkbox from 'primevue/checkbox';
 import ProgressSpinner from 'primevue/progressspinner';
 import InputText from 'primevue/inputtext';
+import Dialog from 'primevue/dialog';
+import Message from 'primevue/message';
 
 // Own components
 import ApiPlugin    from '@plugins/ApiPlugin';
@@ -68,6 +70,8 @@ Vue.component('OverlayPanel', OverlayPanel);
 Vue.component('Checkbox', Checkbox);
 Vue.component('ProgressSpinner', ProgressSpinner);
 Vue.component('InputText', InputText);
+Vue.component('Dialog', Dialog);
+Vue.component('Message', Message);
 
 Vue.component('home', Home);
 Vue.component('process-file', ProcessFile);

resources/js/components/ProcessFile/ProcessFile.scss

@@ -1,11 +1,54 @@
 .file-card {
-    flex: 0 1 74%;
+    flex: 0 1 49%;
 }
 
-.filters-card {
-    flex: 0 1 24%
-}
+// .filters-card {
+//     flex: 0 1 24%
+// }
 .p-overlaypanel {
     // width: 450px;
     min-width: 450px;
 }
+
+.p-toolbar-group-right {
+    button {
+        margin-left: 10px;
+    }
+}
+
+.p-sidebar-content {
+    .p-toolbar {
+        margin-top: 32px;
+    }
+}
+
+.p-card-header {
+    .p-toolbar {
+        border: unset;
+        border-radius: unset;
+        border-bottom: 1px solid #dee2e6;
+        padding: .5rem;
+    }
+}
+
+button.add-searchers {
+    height: 100%;
+}
+
+.p-col.sidebar-title {
+    display: flex;
+    align-content: flex-start;
+    justify-content: flex-start;
+}
+
+.p-grid.sidebar-title-container {
+    padding-top: 50px;
+}
+
+.md-viewer {
+    text-align: start;
+
+    h1, h2, h3, h4, h5 {
+        font-size: initial;
+    }
+}

resources/js/components/ProcessFile/ProcessFile.ts

@@ -21,25 +21,37 @@ export default class ProcessFile extends Vue {
     /**
      * 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 processed document content
+    private processedFileContent: string = '';
+
+    // Flag to determine whether the text is processing or not
+    private processing: boolean = false;
+
+    // Toggles the visibility of the selected searchers sidebar
+    private searchersSidebarVisible: boolean = false;
+
+    // Toggles the visibility of the available searchers dialog
+    private searchersDialogVisible: boolean = false;
+
     // The list of filters/searchers in a format usable by the datatable
     private searchersData: Array<{ id: string; name: string; }> = [];
 
+    // The list of filters applied to the selected searchers
+    private searchersFilters: any = [];
+
     // 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; }> = [];
 
+    // The list of options applied to the searchers (for the moment, only replace_with)
     private searchersOptions: { [key: string]: string } = {};
 
     /**
@@ -59,6 +71,27 @@ export default class ProcessFile extends Vue {
         this.intervalId = setInterval(this.waitForFile, 3000);
     }
 
+    /**
+     * Toggle the sidebar containing the searchers
+     */
+    private toggleSearchersSidebar() {
+        this.searchersSidebarVisible = !this.searchersSidebarVisible;
+    }
+
+    /**
+     * Toggle the menu containing the list of available searchers
+     *
+     * @param {string}  newValue    The new value for the dialog visibility
+     */
+     private toggleSearchersDialog(newValue?: boolean) {
+
+        if (typeof newValue !== 'undefined') {
+            this.searchersDialogVisible = newValue;
+        } else {
+            this.searchersDialogVisible = !this.searchersDialogVisible;
+        }
+    }
+
     /**
      * Wait for the file to be processed in ingest
      */
@@ -90,15 +123,6 @@ export default class ProcessFile extends Vue {
         }
     }
 
-    /**
-     * 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)
     {
@@ -106,21 +130,30 @@ export default class ProcessFile extends Vue {
     }
 
     /**
-     * Run the filters
+     * Run the searchers
      */
-    private async runFilters() {
+    private async runSearchers() {
+        this.processing = true;
+        this.processedFileContent = '';
+
+        setTimeout(
+            async () => {
                 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;
+                this.processedFileContent = response.content;
+                this.processing = false;
+            },
+            2500
+        );
     }
 }

resources/js/components/ProcessFile/ProcessFile.vue

@@ -8,22 +8,65 @@
             <template #header>
                 <Toolbar>
                     <template #left>
-                        <h3>File preview</h3>
+                        <h3>Original document content</h3>
+                    </template>
+                </Toolbar>
+            </template>
+
+            <template #content>
+                <div class="md-viewer">
+                    <template v-if="fileContent === ''">
+                        <Skeleton /><br />
+                        <Skeleton /><br />
+                        <Skeleton /><br />
+                        <Skeleton /><br />
+                        <Skeleton /><br />
+                        <Skeleton /><br />
+                        <Skeleton /><br />
+                    </template>
+                    <template v-else>
+                        <vue-markdown :source="fileContent" />
+                    </template>
+                </div>
+            </template>
+
+        </Card>
+
+        <Card
+            class="p-mr-2 p-as-stretch file-card"
+        >
+
+            <template #header>
+                <Toolbar>
+                    <template #left>
+                        <h3>Processed document content</h3>
                     </template>
 
                     <template #right>
+                        <Button
+                            label="Download document"
+                            icon="pi pi-download"
+                            class="p-button-secondary p-button-outlined p-button-sm"/>
+
                         <Button
                             label="Run filters"
                             icon="pi pi-play"
                             class="p-button-success p-button-outlined p-button-sm"
                             :disabled="fileContent == ''"
-                            @click="runFilters()"/>
+                            @click="runSearchers()"/>
+
+                        <Button
+                            label="Toggle filters list"
+                            icon="pi pi-list"
+                            class="p-button-info p-button-outlined p-button-sm"
+                            @click="toggleSearchersSidebar()"/>
                     </template>
                 </Toolbar>
             </template>
 
             <template #content>
-                <template v-if="fileContent === ''">
+                <div class="md-viewer">
+                    <template v-if="processing === true">
                         <Skeleton /><br />
                         <Skeleton /><br />
                         <Skeleton /><br />
@@ -32,31 +75,77 @@
                         <Skeleton /><br />
                         <Skeleton /><br />
                     </template>
+                    <template v-else-if="processedFileContent !== ''">
+                        <vue-markdown :source="processedFileContent" />
+                    </template>
                     <template v-else>
-                    <vue-markdown :source="fileContent" />
+                        <Message severity="info" :closable="false">
+                            Not processed yet. Please select and run some filters to see the result.
+                        </Message>
                     </template>
+                </div>
             </template>
 
         </Card>
 
-        <Card class="p-mr-2 p-as-stretch filters-card">
-            <template #header>
-                <Toolbar>
-                    <template #left>
+
+        <Sidebar
+            :visible.sync="searchersSidebarVisible"
+            :showCloseIcon="true"
+            class="p-sidebar-md"
+            position="right">
+
+            <div class="p-grid p-jc-between sidebar-title-container">
+                <div class="p-col sidebar-title">
                     <h3>Document searchers</h3>
-                    </template>
-                    <template #right>
+                </div>
+
+                <div class="p-col-2">
                     <Button
                         icon="pi pi-plus"
-                            class="p-button-success p-button-sm p-button-text"
-                            @click="toggleSearchersMenu"
+                        class="p-button-success p-button-sm p-button-text add-searchers"
+                        @click="toggleSearchersDialog(true)"
                         aria:haspopup="true"
-                            aria-controls="overlay_panel" />
-                    </template>
-                </Toolbar>
+                        aria-controls="searcers_dialog" />
+                </div>
+            </div>
+
+            <Dialog
+                header="Available document searchers"
+                :visible.sync="searchersDialogVisible"
+                :maximizable="true"
+                :style="{width: '50vw'}"
+                :contentStyle="{overflow: 'visible'}"
+                id="searcers_dialog"
+                ref="searcers-dialog">
+
+                <DataTable
+                    :value.sync="searchersData"
+                    :selection.sync="selectedSearchers"
+                    dataKey="id"
+                    selectionMode="multiple"
+                    class="p-datatable-sm"
+                    :metaKeySelection="false"
+                    :paginator="true" :rows="10"
+                    paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
+                    :rowsPerPageOptions="[10,20,50]">
+
+                    <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
+                    <Column field="name" header="Name" sortable></Column>
+
+                </DataTable>
+
+                <template #footer>
+                    <Button
+                        label="Done"
+                        icon="pi pi-check"
+                        class="p-button-info p-button-outlined p-button-sm"
+                        @click="toggleSearchersDialog(false)"/>
                 </template>
 
-            <template #content>
+            </Dialog>
+
             <DataTable
                 :value.sync="selectedSearchers"
                 dataKey="id"
@@ -65,15 +154,12 @@
                 @row-reorder="onSelectedSearchersReorder">
 
                 <Column :rowReorder="true" headerStyle="width: 3rem" />
-                    <Column field="name" header="Name" sortable></Column>
+                <Column field="name" header="Name">
+                </Column>
                 <Column :expander="true" headerStyle="width: 3rem" />
 
                 <template #expansion="slotProps">
                     <div class="options-subtable">
-                            <!-- TODO: Add real options here -->
-                            <!-- <h5>Options for {{slotProps.data.name}}</h5> -->
-
-                            <!-- <ProgressSpinner /> -->
 
                         <div class="p-fluid">
                             <div class="p-field">
@@ -93,31 +179,7 @@
                 </template>
 
             </DataTable>
-            </template>
-        </Card>
-
-        <OverlayPanel
-            ref="searchers-overlay"
-            appendTo="body"
-            id="overlay_panel"
-            style="width: 300px">
-
-            <DataTable
-                :value.sync="searchersData"
-                :selection.sync="selectedSearchers"
-                dataKey="id"
-                selectionMode="multiple"
-                class="p-datatable-sm"
-                :metaKeySelection="false"
-                :paginator="true" :rows="10"
-                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
-                :rowsPerPageOptions="[10,20,50]">
-
-                <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
-                <Column field="name" header="Name" sortable></Column>
-
-            </DataTable>
-        </OverlayPanel>
+        </Sidebar>
     </div>
 </template>
 

resources/js/components/layout/Header.vue

@@ -2,7 +2,7 @@
     <div class="header">
         <!-- Left side of header -->
         <div class="left">
-            <Button class="p-button-text" label="Search and Displace" />
+            <Button class="p-button-primary" label="Search and Displace" />
         </div>
 
         <!-- Right side of header -->

resources/sass/_variables.scss

@@ -1,7 +1,9 @@
 $header-height: 4rem;
-$header-background: var(--blue-400);
+// $header-background: var(--blue-400);
+$header-background: #2196F3;
 
 $footer-height: 4rem;
-$footer-background: var(--blue-400);
+// $footer-background: var(--blue-400);
+$footer-background: #2196F3;
 
 $content-padding: 25px;