[35354] Harmonize work package autocompleters (#8990)

* creating a general auto completer

* providing some attributes of ng-select

* renaming files to show the generality of the autocompleter

* removing autocompleter component from common module

* injecting a view to ng-select content and adding default content

* separating business logic with service providance

* fix the path of files

* make sure op patches module is loaded

* changing the module of autocompleter component

* changing the autocompleter module and doing the changes in Aleix Comments

* adding comments to code and writing test for them

* error test

* error jasmine test

* Test simplification

* Fix spec

* angular test

* merge the changes in angular test

* enabling the component to have a function for setting the options

* resolving PR errors

* improve the template and change style format

Co-authored-by: Aleix Suau <info@macrofonoestudio.es>
Co-authored-by: Oliver Günther <mail@oliverguenther.de>

frontend/src/app/modules/autocompleter/op-autocompleter/directives/op-autocompleter-header-template.directive.ts

@@ -0,0 +1,11 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: "[op-autocompleter-header-tmp]"
+})
+  // A Directive to be used on the option template of  
+  //  ng-select (what will be shown in each row of drop down)
+  // it is used when you want to inject a different template 
+export class OpAutocompleterHeaderTemplateDirective {
+
+}

frontend/src/app/modules/autocompleter/op-autocompleter/directives/op-autocompleter-label-template.directive.ts

@@ -0,0 +1,11 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: "[op-autocompleter-label-tmp]"
+})
+  // A Directive to be used on the label template of  
+  //  ng-select (what will be shown in the input box after selecting an item)
+  // it is used when you want to inject a different template 
+export class OpAutocompleterLabelTemplateDirective {
+
+}

frontend/src/app/modules/autocompleter/op-autocompleter/directives/op-autocompleter-option-template.directive.ts

@@ -0,0 +1,11 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: "[op-autocompleter-option-tmp]"
+})
+  // A Directive to be used on the option template of  
+  //  ng-select (what will be shown in each row of drop down)
+  // it is used when you want to inject a different template 
+export class OpAutocompleterOptionTemplateDirective {
+
+}

frontend/src/app/modules/autocompleter/op-autocompleter/op-autocompleter.component.html

@@ -0,0 +1,143 @@
+
+<div class="inline-label ng-select-container">
+  <ng-select #ngSelectInstance
+        [(ngModel)]="model"
+        [items]="results$ | async"
+        [ngClass]="classes"
+        [typeahead]="searchInput$"
+        [clearOnBackspace]="clearOnBackspace"
+        [clearSearchOnAdd]="clearSearchOnAdd"
+        [hideSelected]="hideSelected"
+        [appendTo]="appendTo"
+        [multiple]="multiple"
+        [loading]="isLoading"
+        [addTag]="addTag"
+        [virtualScroll]="virtualScroll"
+        [required]="required"
+        [clearable]="clearable"
+        [closeOnSelect]="closeOnSelect"
+        [openOnEnter]="openOnEnter"
+        [disabled]="disabled"
+        [name]="name"
+        bindLabel="name"
+        [bindValue]="bindValue"
+        [markFirst]="markFirst"
+        [notFoundText]="notFoundText"
+        [typeToSearchText]="typeToSearchText"
+        [addTagText]="addTagText"
+        [loadingText]="loadingText"
+        [clearAllText]="clearAllText"
+        [appearance]="appearance"
+        [dropdownPosition]="dropdownPosition"
+        [selectOnTab]="selectOnTab"
+        [maxSelectedItems]="maxSelectedItems"
+        [placeholder]="placeholder"
+        [groupBy]="groupBy"
+        [groupValue]="groupValue"
+        [bufferAmount]="bufferAmount"
+        [selectableGroup]="selectableGroup"
+        [searchable]="searchable"
+        [selectableGroupAsModel]="selectableGroupAsModel"
+        [trackByFn]="trackByFn"
+        [labelForId]="labelForId"
+        [inputAttrs]="inputAttrs"
+        [tabIndex]="tabIndex"
+        [readonly]="readonly"
+        [searchWhileComposing]="searchWhileComposing"
+        [minTermLength]="minTermLength"
+        [editableSearchTerm]="editableSearchTerm"
+        [keyDownFn]="keyDownFn"
+
+        (change)="changed($event)"
+        (open)="opened($event)"
+        (close)="closed($event)"
+        (blur)="blured($event)"
+        (focus)="focused($event)"
+        (clear)="cleared($event)"
+        (keydown)="keydowned($event)"
+        (scroll)="scrolled($event)"
+        (scrollToEnd)="scrolledToEnd($event)"
+        (add)="added($event)"
+        (remove)="removed($event)"
+        >
+
+        <ng-template ng-header-tmp let-item="item" *ngIf="headerTemplate">
+          <ng-container [ngTemplateOutlet]="headerTemplate" [ngTemplateOutletContext]="{$implicit:item}">
+          </ng-container>
+        </ng-template>
+
+          <ng-template ng-label-tmp let-item="item">
+            <ng-container [ngTemplateOutlet]="labelTemplate ? labelTemplate : defaultLabel" [ngTemplateOutletContext]="{$implicit:item}">
+            </ng-container>
+          </ng-template>
+
+          <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
+            <ng-container [ngTemplateOutlet]="optionTemplate ? optionTemplate : defaultOption" [ngTemplateOutletContext]="{$implicit:item}">
+            </ng-container>
+          </ng-template>
+
+  </ng-select>
+</div>
+
+
+<ng-template let-item  #defaultOption [ngSwitch]="true">
+
+  <ng-container *ngSwitchCase="resource === 'work_packages' || resource === 'parent-child'">
+
+    <div class="op-autocompleter--option-wrapper">
+
+      <op-principal
+      data-class-list="avatar op-autocompleter-author-avatar hidden-for-mobile"
+      [principal]="item.author"
+      [hide-name]="true"
+    ></op-principal>
+      <span class="op-autocompleter-wp-subject"> 
+      {{item.subject}} 
+      </span>
+
+      <div class="op-autocompleter--wp-content">
+        <span [textContent]="item.project?.name" 
+        class="op-autocompleter--wp-project">
+        </span>
+
+        <a class="op-autocompleter--wp-id"
+          [ngClass]="uiStateLinkClass">
+        #{{item.id}}
+        </a>
+        <span [textContent]="item.status?.name"
+          [ngClass]="highlighting('status',item.status?.id)"
+          class="op-autocompleter--wp-status">
+        </span>
+
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="resource ==='user' || resource ==='assignee'">
+    <op-principal
+    *ngIf="item && item.href"
+    [principal]="item"
+    [hide-name]="true"
+    size="mini"
+  ></op-principal>
+  {{ item.name }}
+  </ng-container>
+
+
+  <ng-container *ngSwitchCase="resource ==='subproject' || resource ==='version' || resource ==='status'">
+  {{ item.name }}
+  </ng-container>
+</ng-template>
+
+
+
+<ng-template let-item  #defaultLabel [ngSwitch]="resource">
+
+  <ng-container *ngSwitchCase="'work_packages'">
+    {{item.type.name }} #{{ item.id }} {{ item.subject }}
+  </ng-container>
+
+  <ng-container *ngSwitchDefault>
+    {{ item.name }}
+    </ng-container>
+</ng-template>

frontend/src/app/modules/autocompleter/op-autocompleter/op-autocompleter.component.sass

@@ -0,0 +1,44 @@
+.op-autocompleter
+  &--option-wrapper
+    padding: 5px 5px
+    line-height: 15px
+    min-height: 25px  // line-height + padding
+    word-break: break-word
+
+
+  &-author-avatar
+    margin-right: 5px
+    float: left
+
+
+  &--wp-content
+    display: grid
+    grid-template-columns: 50% 1fr auto
+    grid-template-areas: "project idlink status"
+    font-size: 0.8rem
+    padding: 5px 0 5px 0px
+
+
+
+    &--wp-project
+      grid-area: project
+
+
+    &--wp-id
+      grid-area: idlink
+      place-self: right 
+      font-style: italic
+
+    &--wp-status
+      grid-area: status
+      overflow: hidden
+      font-style: italic
+
+
+  &--wp-subject
+    font-weight: bold
+    display: inline-block
+    width: 85%
+    overflow: hidden
+    white-space: nowrap
+    text-overflow: ellipsis