Replace jquery-autocomplete in wp-relations-autocomplete

Author: oliverguenther

.rubocop.yml

@@ -271,3 +271,7 @@ UnderscorePrefixedVariableName:
 
 Void:
   Enabled: false
+
+Layout/MultilineMethodCallIndentation:
+  Enabled: false
+

config/locales/js-en.yml

@@ -518,7 +518,7 @@ en:
 
     relations_autocomplete:
       placeholder: "Enter the related work package id"
-      parent_placeholder: "Choose new parent, press enter to unset, escape to cancel."
+      parent_placeholder: "Choose new parent or press escape to cancel."
 
     repositories:
       select_tag: 'Select tag'

frontend/src/app/components/work-packages/wp-breadcrumb/wp-breadcrumb-parent.component.ts

@@ -44,6 +44,7 @@ export class WorkPackageBreadcrumbParentComponent {
   public text = {
     edit_parent: this.I18n.t('js.relation_buttons.change_parent'),
     set_or_remove_parent: this.I18n.t('js.relations_autocomplete.parent_placeholder'),
+    remove_parent: this.I18n.t('js.relation_buttons.remove_parent'),
     set_parent: this.I18n.t('js.relation_buttons.set_parent'),
   };
 
@@ -76,12 +77,9 @@ export class WorkPackageBreadcrumbParentComponent {
     this.toggle(true);
   }
 
-  public updateParent(newParentId:string|null) {
+  public updateParent(newParent:WorkPackageResource|null) {
     this.close();
-    if (_.isNil(newParentId)) {
-      newParentId = null;
-    }
-
+    let newParentId = newParent ? newParent.id : null;
     if (_.get(this.parent, 'id', null) === newParentId) {
       return;
     }

frontend/src/app/components/work-packages/wp-breadcrumb/wp-breadcrumb-parent.html

@@ -10,17 +10,21 @@
     (execute)="open()"
     *ngIf="canModifyParent()"
     [linkTitle]="parent ? text.edit_parent : text.set_parent"
-    linkClass="wp-relation--parent-change hide-when-print">
-    <op-icon icon-classes="icon-small {{ parent ? 'icon-edit icon2' : 'icon-add icon4' }}"></op-icon>
+    linkClass="wp-relation--parent-change -no-decoration hide-when-print icon-small {{ parent ? 'icon-edit icon5' : 'icon-add icon4' }}">
     <span *ngIf="!parent" [textContent]="text.set_parent"></span>
   </accessible-by-keyboard>
+  <accessible-by-keyboard
+      (execute)="updateParent(null)"
+      *ngIf="canModifyParent() && parent"
+      [linkTitle]="text.remove_parent"
+      linkClass="wp-relation--parent-remove hide-when-print -no-decoration icon-small icon-remove icon4">
+  </accessible-by-keyboard>
 </ng-container>
-<wp-relations-autocomplete-upgraded
+<wp-relations-autocomplete
   *ngIf="active"
   [inputPlaceholder]="text.set_or_remove_parent"
   [workPackage]="workPackage"
-  (onEscape)="close()"
-  (onBlur)="close()"
-  (onWorkPackageIdSelected)="updateParent($event)"
+  (onCancel)="close()"
+  (onReferenced)="updateParent($event)"
   filterCandidatesFor="parent">
-</wp-relations-autocomplete-upgraded>
+</wp-relations-autocomplete>

frontend/src/app/components/wp-relations/embedded/inline/add-existing/wp-relation-inline-add-existing.component.html

@@ -2,11 +2,11 @@
      data-indicator-name="relationAddChild">
   <div class="v-align wp-relations-create--form wp-relations--add-form">
     <div class="grid-content medium-10">
-      <wp-relations-autocomplete-upgraded
+      <wp-relations-autocomplete
           [workPackage]="workPackage"
-          (onWorkPackageIdSelected)="updateSelectedId($event)"
+          (onReferenced)="onReferenced($event)"
           [filterCandidatesFor]="relationType">
-      </wp-relations-autocomplete-upgraded>
+      </wp-relations-autocomplete>
     </div>
     <div class="grid-content medium-2 collapse wp-relations-controls-section relation-row">
       <accessible-by-keyboard

frontend/src/app/components/wp-relations/embedded/inline/add-existing/wp-relation-inline-add-existing.component.ts

@@ -35,6 +35,7 @@ import {WorkPackageNotificationService} from "core-components/wp-edit/wp-notific
 import {WorkPackageCacheService} from "core-components/work-packages/work-package-cache.service";
 import {WpRelationInlineCreateServiceInterface} from "core-components/wp-relations/embedded/wp-relation-inline-create.service.interface";
 import {WorkPackageTableRefreshService} from "core-components/wp-table/wp-table-refresh-request.service";
+import {WorkPackageResource} from "core-app/modules/hal/resources/work-package-resource";
 
 @Component({
   templateUrl: './wp-relation-inline-add-existing.component.html'
@@ -80,8 +81,11 @@ export class WpRelationInlineAddExistingComponent {
       });
   }
 
-  public updateSelectedId(workPackageId:string) {
-    this.selectedWpId = workPackageId;
+  public onReferenced(workPackage?:WorkPackageResource) {
+    if (workPackage) {
+      this.selectedWpId = workPackage.id!;
+      this.addExisting();
+    }
   }
 
   public get relationType() {

frontend/src/app/components/wp-relations/wp-relations-create/wp-relation-create.template.html

@@ -33,12 +33,12 @@
         </select>
       </div>
       <div class="grid-content medium-7">
-        <wp-relations-autocomplete-upgraded
+        <wp-relations-autocomplete
             [workPackage]="workPackage"
-            (onWorkPackageIdSelected)="updateSelectedId($event)"
+            (onReferenced)="onReferenced($event)"
             appendToContainer=".work-packages-tab-view--overflow"
             selectedRelationType="parent">
-        </wp-relations-autocomplete-upgraded>
+        </wp-relations-autocomplete>
       </div>
       <div class="grid-content medium-2 collapse wp-relations-controls-section relation-row">
         <accessible-by-keyboard

frontend/src/app/components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.component.ts

@@ -0,0 +1,153 @@
+//-- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// 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 General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+//++
+
+import {
+  AfterContentInit,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
+import {I18nService} from 'core-app/modules/common/i18n/i18n.service';
+import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';
+import {from, Observable, of, Subject} from "rxjs";
+import {catchError, debounceTime, distinctUntilChanged, map, switchMap, tap} from "rxjs/operators";
+import {WorkPackageNotificationService} from "core-components/wp-edit/wp-notification.service";
+import {NgSelectComponent} from "@ng-select/ng-select";
+import {IsolatedQuerySpace} from "core-app/modules/work_packages/query-space/isolated-query-space";
+import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service";
+import {WorkPackageCollectionResource} from "core-app/modules/hal/resources/wp-collection-resource";
+import {CurrentProjectService} from "core-components/projects/current-project.service";
+import {ApiV3FilterBuilder} from "core-components/api/api-v3/api-v3-filter-builder";
+import {HalResourceService} from "core-app/modules/hal/services/hal-resource.service";
+import {SchemaCacheService} from "core-components/schemas/schema-cache.service";
+
+@Component({
+  selector: 'wp-relations-autocomplete',
+  templateUrl: './wp-relations-autocomplete.html',
+
+  // Allow styling the embedded ng-select
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./wp-relations-autocomplete.sass']
+})
+export class WorkPackageRelationsAutocomplete implements AfterContentInit {
+  readonly text = {
+    placeholder: this.I18n.t('js.relations_autocomplete.placeholder')
+  };
+
+  @Input() inputPlaceholder:string = this.text.placeholder;
+  @Input() workPackage:WorkPackageResource;
+  @Input() selectedRelationType:string;
+  @Input() filterCandidatesFor:string;
+
+  @Input() appendToContainer:string = 'body';
+  @ViewChild(NgSelectComponent) public ngSelectComponent:NgSelectComponent;
+
+  @Output() onCancel = new EventEmitter<undefined>();
+  @Output() onReferenced = new EventEmitter<WorkPackageResource>();
+  @Output() onEmptySelected = new EventEmitter<undefined>();
+
+  // Whether we're currently loading
+  public isLoading = false;
+
+  // Search input from ng-select
+  public searchInput$ = new Subject<string>();
+
+  // Search results mapped to input
+  public results$:Observable<WorkPackageResource[]> = this.searchInput$.pipe(
+    debounceTime(250),
+    distinctUntilChanged(),
+    tap(() => this.isLoading = true),
+    switchMap(queryString => this.autocompleteWorkPackages(queryString))
+  );
+
+  constructor(private readonly querySpace:IsolatedQuerySpace,
+              private readonly pathHelper:PathHelperService,
+              private readonly wpNotificationsService:WorkPackageNotificationService,
+              private readonly CurrentProject:CurrentProjectService,
+              private readonly halResourceService:HalResourceService,
+              private readonly schemaCacheService:SchemaCacheService,
+              private readonly cdRef:ChangeDetectorRef,
+              private readonly I18n:I18nService) {
+  }
+
+  ngAfterContentInit():void {
+    if (!this.ngSelectComponent) {
+      return;
+    }
+    this.ngSelectComponent.open();
+
+    setTimeout(() => {
+      this.ngSelectComponent.focus();
+    }, 25);
+  }
+
+  cancel() {
+    this.onCancel.emit();
+  }
+
+  public onWorkPackageSelected(workPackage?:WorkPackageResource) {
+    if (workPackage) {
+      this.schemaCacheService
+        .ensureLoaded(workPackage)
+        .then(() => {
+          this.onReferenced.emit(workPackage);
+          this.ngSelectComponent.close();
+        });
+    }
+  }
+
+  private autocompleteWorkPackages(query:string):Observable<WorkPackageResource[]> {
+    // Return when the search string is empty
+    if (query.length === 0) {
+      this.isLoading = false;
+      return of([]);
+    }
+
+    // Remove prefix # from search
+    query = query.replace(/^#/, '');
+
+    return from(
+      this.workPackage.availableRelationCandidates.$link.$fetch({
+        query: query,
+        type: this.filterCandidatesFor || this.selectedRelationType
+      }) as Promise<WorkPackageCollectionResource>
+    )
+    .pipe(
+        map(collection => collection.elements),
+        catchError((error:unknown) => {
+          this.wpNotificationsService.handleRawError(error);
+          return of([]);
+        }),
+        tap(() => this.isLoading = false)
+      );
+  }
+}

frontend/src/app/components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.html

@@ -0,0 +1,19 @@
+<div class="wp-relations--autocomplete">
+<ng-select ngClass="wp-inline-create--reference-autocompleter"
+           [items]="results$ | async"
+           [appendTo]="appendToContainer"
+           [multiple]="false"
+           [loading]="isLoading"
+           [placeholder]="inputPlaceholder"
+           [typeahead]="searchInput$"
+           [closeOnSelect]="true"
+           (close)="cancel()"
+           (change)="onWorkPackageSelected($event)">
+  <ng-template ng-label-tmp let-item="item">
+    {{item.type.name }} #{{ item.id }} {{ item.subject }}
+  </ng-template>
+  <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
+    {{item.type.name }} #{{ item.id }} {{ item.subject }}
+  </ng-template>
+</ng-select>
+</div>

frontend/src/app/components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.sass

@@ -0,0 +1,5 @@
+ng-select.wp-inline-create--reference-autocompleter
+  border: none
+
+  .ng-clear-wrapper
+    display: none