Feature/entry number for display and navigation (#1215)

* initial commit for goto entry

* Add entry number to Entry card

* Remove unneeded import

* clear goto after valid move

* Add function to check if filtering and sorting is on. Add implementation ng-disabled to back, forward and goto elements

* Added controller model to imnput element to track current enrty index

* Change input tool tip message

* Remove unused binding to ui element

* Min and Max validation properties were inadvertently removed.  dc-entry entry-index="$ctrl.entryIndex() removed on rebase, adding back

* reset input value on blur; hide control on filter

This change adds a ng-blur handler that resets the value of the numeric input to the current entry index.  This fixes the input having a sticky invalid state/red box when the user clicks a button or loses focus on the input.

Additionally, we hide the controls when the filter is active, instead of disabling.

Co-authored-by: Chris Hirt <chris@hirtfamily.net>

Author: palmtreefrb

src/angular-app/bellows/core/offline/editor-data.service.ts

@@ -269,6 +269,17 @@ export class EditorDataService {
     return index;
   }
 
+  // find entry id from index number, used to goto and display  editor record 
+  getIdInFilteredList = (index: number): string => {
+    let list = this.filteredEntries;
+    let id: string;
+    if(index > 0 && index <= list.length){
+      let entry = list[index-1];
+      id = entry.id;
+    }
+    return id;
+  }
+
   sortEntries = (shouldResetVisibleEntriesList: boolean): angular.IPromise<any> => {
     const startTime = performance.now();
     return this.configService.getEditorConfig().then(config => {

src/angular-app/languageforge/lexicon/core/lexicon-editor-data.service.ts

@@ -17,6 +17,7 @@ export class LexiconEditorDataService {
   removeEntryFromLists = this.editorDataService.removeEntryFromLists;
   addEntryToEntryList = this.editorDataService.addEntryToEntryList;
   getIndexInList = this.editorDataService.getIndexInList;
+  getIdInFilteredList = this.editorDataService.getIdInFilteredList;
   showInitialEntries = this.editorDataService.showInitialEntries;
   showMoreEntries = this.editorDataService.showMoreEntries;
   sortEntries = this.editorDataService.sortEntries;

src/angular-app/languageforge/lexicon/editor/_editor.scss

@@ -827,3 +827,20 @@ dc-entry .card {
 form.submitted .ng-invalid {
     border: 1px solid #f00;
 }
+
+// remove up/down arrows for goto Entry
+.gotoEntry {
+  width: 60px;
+  &::-webkit-inner-spin-button{ display: none; }
+  -moz-appearance:textfield;
+}
+
+.gotoEntry.ng-invalid {
+  border: 3px solid #f00;
+}
+
+.gotoEntry:focus.ng-invalid {
+  background-color: #fff;
+  outline: none;
+  border: 3px solid #f00;
+}

src/angular-app/languageforge/lexicon/editor/editor-entry.view.html

@@ -116,7 +116,7 @@
                             <dc-rendered config="$ctrl.lecConfig.entry" global-config="$ctrl.lecConfig"
                                         model="$ctrl.currentEntry" option-lists="$ctrl.lecOptionLists"></dc-rendered>
                         </div>
-                        <dc-entry config="$ctrl.lecConfig.entry" model="$ctrl.currentEntry" control="$ctrl.control"></dc-entry>
+                        <dc-entry config="$ctrl.lecConfig.entry" model="$ctrl.currentEntry" control="$ctrl.control" entry-index="$ctrl.entryIndex()"></dc-entry>
                     </div>
                 </div>
             </div>

src/angular-app/languageforge/lexicon/editor/editor.component.html

@@ -11,10 +11,12 @@
                             <span class="d-none d-md-inline-block">List</span></a>
                     </div>
                     <div class="float-right" data-ng-show="$ctrl.isAtEditorEntry()">
-                        <div class="btn-group">
+                        <div class="btn-group" ng-form="validateGoto" ng-hide="$ctrl.entryListModifiers.filterActive()">
                             <button class="btn btn-std" data-ng-click="$ctrl.skipToEntry(-1)" ng-disabled="!$ctrl.canSkipToEntry(-1)">
                                 <span class="fa fa-arrow-left"></span> <span class="d-none d-lg-inline-block">Previous</span>
                             </button>
+                            <input type="number" id="goto" name="goto" class="gotoEntry" title="Enter a number and press Enter to go to that entry"
+                            data-ng-min="1" data-ng-max="$ctrl.filteredEntries.length === 0 ? 1 : $ctrl.filteredEntries.length" data-ng-model="item.value" data-ng-value="$ctrl.currentIndex.index" data-ng-blur="item.value = $ctrl.currentIndex.index" data-on-enter="$ctrl.gotoToEntry(item.value, validateGoto.goto.$valid)"></input>
                             <button class="btn btn-std" data-ng-click="$ctrl.skipToEntry(1)" ng-disabled="!$ctrl.canSkipToEntry(1)">
                                 <span class="d-none d-lg-inline-block">Next</span> <span class="fa fa-arrow-right"></span>
                             </button>

src/angular-app/languageforge/lexicon/editor/editor.component.ts

@@ -49,6 +49,11 @@ export class LexiconEditorController implements angular.IController {
 
   lastSavedDate = new Date();
   currentEntry: LexEntry = new LexEntry();
+
+  currentIndex = {
+    index: -1
+  }
+
   commentContext = {
     contextGuid: ''
   };
@@ -469,6 +474,20 @@ export class LexiconEditorController implements angular.IController {
     this.goToEntry(id);
   }
 
+  gotoToEntry(index: number, isValid: boolean) {
+    if (isValid) {
+      let id = this.editorService.getIdInFilteredList(Number(index));
+      this.editEntryAndScroll(id);
+    }
+  }
+
+  entryIndex(): number {
+    let id = this.currentEntry.id;
+    let index = this.editorService.getIndexInList(id, this.entries)
+    this.currentIndex.index = index + 1;
+    return this.currentIndex.index;
+  }
+
   canSkipToEntry(distance: number): boolean {
     const i = this.editorService.getIndexInList(this.currentEntry.id, this.visibleEntries) + distance;
     return i >= 0 && i < this.visibleEntries.length;

src/angular-app/languageforge/lexicon/editor/field/dc-entry.component.ts

@@ -6,11 +6,11 @@ import {LexEntry} from '../../shared/model/lex-entry.model';
 import {LexSense} from '../../shared/model/lex-sense.model';
 import {LexConfigFieldList} from '../../shared/model/lexicon-config.model';
 import {FieldControl} from './field-control.model';
-
 export class FieldEntryController implements angular.IController {
   model: LexEntry;
   config: LexConfigFieldList;
   control: FieldControl;
+  entryIndex: number;
 
   contextGuid: string = '';
   fieldName: string = 'entry';
@@ -83,7 +83,8 @@ export const FieldEntryComponent: angular.IComponentOptions = {
   bindings: {
     model: '=',
     config: '<',
-    control: '<'
+    control: '<',
+    entryIndex: '<'
   },
   controller: FieldEntryController,
   templateUrl: '/angular-app/languageforge/lexicon/editor/field/dc-entry.component.html'