editor: speed up the editor

* Reduces the resource and the time to load the editor.
* Adds a new method to set the list of the hidden fields.
* Removes the bad use of `setTimeout`.
* Adds scroll to suggestion list.
* Closes rero/rero-ils#1747.
* Closes rero/rero-ils#1908.
* Fixes autocomplete external link UI.

Co-Authored-by: Johnny Mariéthoz <Johnny.Mariethoz@rero.ch>

projects/rero/ng-core/src/lib/record/editor/extensions.ts

@@ -167,17 +167,14 @@ export class NgCoreFormlyExtension {
     }
     model = removeEmptyValues(model);
     const modelEmpty = isEmpty(model);
-    if (!modelEmpty && field.templateOptions.hide === true) {
-      setTimeout(() => {
+    if (field.templateOptions.hide === true && field.hide === undefined) {
+      // show the field if it contains data
+      if (!modelEmpty) {
         field.hide = false;
-        this._editorService.removeHiddenField(field);
-      });
-    }
-    if (modelEmpty && (field.templateOptions.hide === true && field.hide === undefined)) {
-      setTimeout(() => {
+      } else {
         field.hide = true;
         this._editorService.addHiddenField(field);
-      });
+      }
     }
   }
 
@@ -434,7 +431,7 @@ export function registerNgCoreFormlyExtension(
           // Build a string based on min/max values specified into configuration
           // depending of min/max configuration, the message must be different
           let counterMessage = '';
-          if (min > 0 && max < Infinity){
+          if (min > 0 && max < Infinity) {
             counterMessage = (min === max)
               ? translate.instant(_('strictly {{counter}}'), { counter: min })
               : translate.instant(_('between {{min}} and {{max}}'), { min, max });
@@ -445,7 +442,7 @@ export function registerNgCoreFormlyExtension(
           }
 
           // Combine string to return a full sentence
-          return translate.instant(_('should have {{counter}} {{keys}}'), {counter: counterMessage, keys: joinKeysString});
+          return translate.instant(_('should have {{counter}} {{keys}}'), { counter: counterMessage, keys: joinKeysString });
         }
       },
       {

projects/rero/ng-core/src/lib/record/editor/services/editor.service.ts

@@ -125,7 +125,7 @@ export class EditorService {
    * @returns boolean, true if I'm the root
    */
   isRoot(field: FormlyFieldConfig) {
-    if (!field) {
+    if (field == null) {
       return false;
     }
     return field.templateOptions && field.templateOptions.isRoot && field.templateOptions.isRoot === true;

projects/rero/ng-core/src/lib/record/editor/type/object-type/object-type.component.ts

@@ -25,9 +25,4 @@ import { FieldType } from '@ngx-formly/core';
   templateUrl: './object-type.component.html'
 })
 export class ObjectTypeComponent extends FieldType {
-  // default value
-  defaultOptions = {
-    defaultValue: {}
-  };
-
 }

projects/rero/ng-core/src/lib/record/editor/type/remote-typeahead/remote-typeahead.component.html

@@ -44,17 +44,19 @@
 
 <ng-template #customListTemplate let-matches="matches" let-query="query" let-typeaheadTemplateMethods>
   <ng-container *ngFor="let match of matches">
-    <div [ngClass]="{ 'disabled font-weight-bold': match.header }" class="dropdown-item"
+    <div [ngClass]="{ 'disabled font-weight-bold': match.header }" class="dropdown-item d-flex flex-row"
       [class.active]="typeaheadTemplateMethods.isActive(match)">
-      <span (click)="typeaheadTemplateMethods.selectMatch(match, $event)"
+      <div class='flex-grow-1' (click)="typeaheadTemplateMethods.selectMatch(match, $event)"
         (mouseenter)="typeaheadTemplateMethods.selectActive(match)">
         <span *ngIf="match.item.currentSearch">{{ 'Add' | translate }}:&nbsp;</span>
         <span [innerHTML]="match.value"></span>
-      </span>
-      <a class="ml-1" *ngIf="match.item.externalLink && typeaheadTemplateMethods.isActive(match)" target="_blank"
-        href="{{ match.item.externalLink }}">
-        <i class="float-right fa fa-external-link text-light"></i>
-      </a>
+      </div>
+      <div>
+        <a class="ml-1" *ngIf="match.item.externalLink && typeaheadTemplateMethods.isActive(match)" target="_blank"
+          href="{{ match.item.externalLink }}">
+          <i class="fa fa-external-link text-light"></i>
+        </a>
+      </div>
     </div>
   </ng-container>
 </ng-template>

projects/rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.html

@@ -1,16 +1,16 @@
 <!--
   RERO angular core
   Copyright (C) 2020 RERO
- 
+
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
   the Free Software Foundation, version 3 of the License.
- 
+
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
   GNU Affero General Public License for more details.
- 
+
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
@@ -24,6 +24,9 @@
       [typeahead]="typeaheadFields$"
       [typeaheadAsync]="true"
       [typeaheadItemTemplate]="itemTemplate"
+      [typeaheadScrollable]="true"
+      [typeaheadOptionsInScrollableView]="15"
+      [typeaheadOptionsLimit]="100"
       typeaheadOptionField="name"
       (typeaheadOnSelect)="itemSelected($event)"
       class="form-control"

projects/rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.ts

@@ -150,7 +150,6 @@ export class AddFieldEditorComponent implements OnInit {
   showSelectedField(field: any) {
     // show the field in the form
     field.hide = false;
-
     // reset the input value
     this.value = undefined;
     // remove the the element from the list of hidden fields