Improve Parser UX

angular.json

@@ -24,7 +24,12 @@
             "tsConfig": "apps/total-angular/tsconfig.app.json",
             "assets": [
               "apps/total-angular/src/favicon.ico",
-              "apps/total-angular/src/assets"
+              "apps/total-angular/src/assets",
+			  {
+					"glob": "**/*",
+					"input": "./libs/parser/src/assets",
+					"output": "./assets"
+			  }
             ],
             "styles": [
               "apps/total-angular/src/styles.less"

libs/parser/src/assets/help/topics.json

@@ -0,0 +1,98 @@
+{
+    "data": [
+        {
+            "title": "Introduction",
+            "text": "<p>GroupDocs.Parser allows you to extract data from your documents. It is easy to define a template with predefined fields and then extract data from your documents with it. The templates are stored on your computer in your browser storage. It is easy to upload new documents and apply your templates to automate document processing.</p><img class='help-topic-image' src='assets/help/Introduction.png'/><p>To extract data please define text fields. The <em>Text field</em> represents a rectangular area on the document page from which the text is extracted. Each field has a unique name. Text fields are grouped by <em>templates</em>.</p><p>By default, the template is empty. Once you add a new field, the template is stored on your computer with the <em>template name</em>. You can change this name (so you can easily find and load it later).</p><p>The next articles show how to extract data and work with fields and templates.</p>"
+        },
+        {
+            "title": "How to add a field",
+			"image": "assets/help/field_add.gif",
+			"text": "The field defines a rectangular area on the document page to extract a text. To add a field click <b>Add text field</b> button."
+        },
+        {
+            "title": "How to move a field",
+			"image": "assets/help/field_move.gif",
+			"text": "To move a field press the left mouse button inside the rectangular area and move the cursor to the destination position. Then release the mouse button."
+        },
+        {
+            "title": "How to resize a field",
+			"image": "assets/help/field_resize.gif",
+			"text": "To resize a field press the left mouse button inside one of four rectangular areas. Move the mouse cursor to resize a rectangular field area. Then release the mouse button."
+        },
+        {
+            "title": "How to rename a field",
+			"image": "assets/help/field_rename.gif",
+			"text": "To rename a field double click to the field or click <b>Rename the field</b> button. Then type a new name and press <b>Enter</b> or click <b>Save</b> button."
+        },
+        {
+            "title": "How to remove a field",
+			"image": "assets/help/field_remove.gif",
+			"text": "To remove a field select it. In the context menu click the button with recycle bin image."
+        },
+        {
+            "title": "How to parse data",
+			"image": "assets/help/parse.gif",
+			"text": "To parse data click <b>Parse</b> button."
+        },
+		{
+            "title": "How to download parsed data",
+			"image": "assets/help/parse_download.gif",
+			"text": "To download parsed data click <b>Download as CSV</b> button."
+        },
+        {
+            "title": "How to rename a template",
+			"image": "assets/help/template_rename.gif",
+			"text": "To rename a template click <b>Rename the current template</b> button. Then type a new name and press <b>Enter</b> or click <b>Save</b> button."
+        },
+        {
+            "title": "How to download a template",
+			"image": "assets/help/template_download.gif",
+			"text": "To download a template click <b>Download the current template</b> button. This file you can use on other devices."
+        },
+        {
+            "title": "How to remove a template",
+			"image": "assets/help/template_remove.gif",
+			"text": "To remove a template click <b>Remove the current template</b> button."
+        },
+        {
+            "title": "How to upload a template",
+			"image": "assets/help/template_upload.gif",
+			"text": "To upload a template click <b>Upload the existing template</b> button. Then select a template from your computer."
+        },
+        {
+            "title": "How to create a template",
+			"image": "assets/help/template_create.gif",
+			"text": "To create a template click <b>Create a new template</b> button."
+        },
+        {
+            "title": "How to manage templates",
+			"image": "assets/help/template_manage.gif",
+			"text": "To manage templates click <b>≡</b> button. This list contains all of stored templates. You can rename, delete or download any template. To do this hover (or tap) on the template row and click the corresponding button. To load a template double click to it."
+        },
+        {
+            "title": "How to add a table",
+			"image": "assets/help/table_add.gif",
+			"text": "The table defines a rectangular area on the document page to extract a table data. To add a table click <b>Add table</b> button."
+        },
+        {
+            "title": "How to resize a table",
+			"image": "assets/help/table_resize.gif",
+			"text": "To resize a table press the left mouse button inside one of four rectangular areas. Move the mouse cursor to resize a rectangular field area. Then release the mouse button. Or press and hold the left mouse button on any of four edges of the table, then move the mouse cursor."
+        },
+        {
+            "title": "How to add a column separator",
+			"image": "assets/help/table_add_separators.gif",
+			"text": "To add a column separator click <b>+</b> button on the left (right) of the table. Separator is created on the left (right) edge of the table. Then drag the created separator between table columns."
+        },
+        {
+            "title": "How to remove a column separator",
+			"image": "assets/help/table_remove_separator.gif",
+			"text": "To remove a column separator move the mouse cursor to it. In the context menu click the button with recycle bin image."
+        },
+        {
+            "title": "How to parse a table",
+			"image": "assets/help/parse_table.gif",
+			"text": "To parse data click <b>Parse</b> button. Then click <b>Show Table</b> button to view the table data."
+        }
+    ]
+}

libs/parser/src/lib/app-models.ts

@@ -3,6 +3,12 @@ import { Observable, Subject, Subscription } from 'rxjs';
 import { PageModel } from "@groupdocs.examples.angular/common-components";
 import { __values } from "tslib";
 
+export class HelpTopic {
+  title: string;
+  image: string;
+  text: string;
+}
+
 export class TableValue {
   constructor(obj: any) {
     for (let i = 0; i < obj.length; i++) {

libs/parser/src/lib/field/field.component.html

@@ -28,7 +28,7 @@
         <div *ngFor="let column of field.columns" class="tc-top resizable-handle" [style.left.px]="column.value"></div>
         <div *ngFor="let column of field.columns" class="tc-bottom resizable-handle" [style.left.px]="column.value"></div>
         <div *ngFor="let column of field.columns" class="tc" [style.left.px]="column.value"
-            (mousedown)="mouseDown($event, column.name)">
+            (mousedown)="mouseDown($event, column.name)" (panstart)="mouseDown($event, column.name)">
             <div class="tc-background"></div>
             <div class="tc-remove image-btn" title="Remove column separator" (click)="removeColumn(column)">
                 <fa-icon [icon]="'trash'"></fa-icon>

libs/parser/src/lib/field/field.component.ts

@@ -134,17 +134,37 @@ export class FieldComponent implements OnInit, OnDestroy {
   }
 
   addColumnLeft() {
-    this.field.addColumn(null, this.width * 0.1);
+    let pos = this.width * 0.05;
+    while (this.getColumnAt(pos) !== null && pos < this.width * 0.95 - 15) {
+      pos += 15;
+    }
+
+    this.field.addColumn(null, pos);
   }
 
   addColumnRight() {
-    this.field.addColumn(null, this.width * 0.9);
+    let pos = this.width * 0.95;
+    while (this.getColumnAt(pos) !== null && pos > this.width * 0.05 + 15) {
+      pos -= 15;
+    }
+
+    this.field.addColumn(null, pos);
   }
 
   removeColumn(column: TemplateFieldTableSeparator) {
     this.field.removeColumn(column);
   }
 
+  private getColumnAt(pos: number): TemplateFieldTableSeparator {
+    for (let i = 0; i < this.field.columns.length; i++) {
+      if (Math.abs(this.field.columns[i].value - pos) < 0.1) {
+        return this.field.columns[i];
+      }
+    }
+
+    return null;
+  }
+
   set field(field: TemplateField) {
     this._field = field;
 

libs/parser/src/lib/help-topics/help-topics.component.html

@@ -0,0 +1,36 @@
+<gd-modal id="gd-help-topics" [title]="'Help Topics'" (visible)="refresh($event)">
+    <section id="gd-helpbrowser-section" *ngIf="!topic">
+        <div id="gd-modal-helpbrowser" class="gd-modal-table">
+            <div class="list-help-body">
+                <div class="list-help-lines" *ngFor="let topic of topics" (click)="choose(topic);">
+                    <div class="help-description">
+                        <div class="help-name">{{topic?.title}}</div>
+                        <img *ngIf="topic?.image" [style.visibility]="'hidden'" [style.width]="'1px'"
+                            [style.height]="'1px'" [src]="topic?.image" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <div *ngIf="topic">
+        <div class="toolbar-panel">
+            <gd-button [icon]="'bars'" (click)="showTopics()"></gd-button>
+            <gd-button [icon]="'chevron-left'" [disabled]="isFirstTopic()" (click)="goPrev()"></gd-button>
+            <gd-button [icon]="'chevron-right'" [disabled]="isLastTopic()" (click)="goNext()"></gd-button>
+        </div>
+        <div id="help-topic" >
+            <div class="help-topic-title">{{ topic.title }}</div>
+            <div class="help-topic-image-block" *ngIf="topic?.image">
+                <fa-icon class="loading-message" [icon]="['fas','circle-notch']" [spin]="true"
+                    *ngIf="imageVisibility == 'hidden'"></fa-icon>
+                <img class="help-topic-image" (load)="onLoad()" [style.visibility]="imageVisibility"
+                    [src]="topic?.image" />
+            </div>
+            <div class="help-topic-text" [innerHTML]="topic.text"></div>
+        </div>
+    </div>
+
+    <div class="help-checkbox"><input type="checkbox" [checked]="showHelpAtStart"
+        (change)="showHelpAtStart = !showHelpAtStart"/><div (click)="showHelpAtStart = !showHelpAtStart">Show after the document is loaded</div></div>
+</gd-modal>

libs/parser/src/lib/help-topics/help-topics.component.less

@@ -0,0 +1,134 @@
+@import "./../../styles/variables";
+#help-topic {
+  min-width: 800px;
+  min-height: 500px;
+  max-height: 80vh;
+  overflow-x: hidden;
+  overflow-y: auto;   
+}
+
+#gd-helpbrowser-section {
+    min-width: 800px;
+    min-height: 500px;
+    overflow-y: auto;
+    max-height: 80vh;
+    overflow-x: hidden;
+    overflow-y: auto;   
+  }
+
+.help-topic-image-block {
+  display: block;
+  margin: 0 auto;  
+}
+
+.help-topic-image {
+  max-width: 600px;
+  max-height: 400px;
+  display: block;
+  margin: 0 auto;  
+}
+
+.loading-message {
+  display: block;
+  text-align: center;
+  margin: 0 auto;
+}
+
+.help-topic-title {
+  display: block;
+  margin: 24px;  
+  font-size: 16pt;
+  display: block;
+}
+
+.help-topic-text {
+  display: block;
+  padding: 24px;  
+  position: static;
+}
+
+
+.gd-modal-table {
+    width: 100%;
+    text-align: left;
+}
+
+.toolbar-panel {
+  width      : 100%;
+  display    : flex;
+  align-items: center;
+  padding-left: 10px;
+}
+
+.list-help-header {
+    height: 60px;
+    color: @dove-gray;
+    font-size: 13px;
+    font-weight: bold;
+    background-color: @wild-sand;
+    margin-top: 24px;
+  }
+
+.header-name {
+    padding-left: 24px;
+    width: 90%;
+    line-height: 60px;
+  }
+
+.list-help-lines, .list-help-header {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }  
+
+.list-help-lines {
+    border-bottom: 1px solid @mercury;
+  }
+
+.gd-help-name {
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+  }
+
+.help-description {
+    display: flex;
+    width: 90%;
+    padding: 18px 0px 18px 24px;
+    font-size: 14px;
+    flex: 1;    
+    cursor: pointer;
+    overflow: hidden;
+  }  
+
+.help-name {
+    font-size: 16px;
+    color: @dove-gray;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+.help-checkbox {
+  margin: 10px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+}
+
+.list-help-lines:hover{
+    background-color: @nav-accent-background;
+  }
+
+  @media (max-width: 1037px) {
+    #help-topic {
+      min-width: 0px;
+      min-height: 0px;
+    }
+
+    #gd-helpbrowser-section {
+        min-width: 0px;
+        min-height: 0px;
+      }
+  }

libs/parser/src/lib/help-topics/help-topics.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HelpTopicsComponent } from './help-topics.component';
+
+describe('HelpTopicsComponent', () => {
+  let component: HelpTopicsComponent;
+  let fixture: ComponentFixture<HelpTopicsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HelpTopicsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HelpTopicsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});