Work around for project dropdown overflows (#11030)

* Work around for project dropdown overflows

The new hierarchical project dropdowns caused an issue because long
project names are cut off by default. This makes it impossible to
distinguish when the naming conventions puts the difference between
project at the end of their name, for example:

"Project with long name 1" and "Project with long name 2" will both
show up as "Project with...".

This commit adds a `title` attribute with the name, so hovering the
option will give users the possibility of reading the full name.

It also widens the result list in a rather hacky way. It works, but
could cause the result list to be cut off by the screen edge if
the project select is e.g. all the way on the right in the wp table.

Closes https://community.openproject.org/projects/openproject/work_packages/43083/activity

* Avoid that the input of the project edit field overflows the table cell (see #42939). Further, the current project is shown instead of a placeholder.

* Add explanation for hacky work around

Co-authored-by: Henriette Darge <h.darge@openproject.com>

app/views/layouts/base.html.erb

@@ -163,6 +163,7 @@ See COPYRIGHT and LICENSE files for more details.
     <%= content_for :additional_js_dom_ready %>
   }(jQuery));
 <% end %>
+<div class="op-wide-autocomplete-wrapper"></div>
 <%= call_hook :view_layouts_base_body_bottom %>
 </body>
 </html>

frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.html

@@ -29,11 +29,13 @@
     let-search="search"
   >
     <div
+      [title]="item.name"
       class="ng-option-label ellipsis"
       [ngStyle]="{ 'padding-left.px': item.numberOfAncestors * 16 }"
       [opSearchHighlight]="search"
     >{{ item.name }}</div>
     <div
+      [title]="item.disabledReason"
       *ngIf="item.disabled && item.disabledReason"
       class="ng-option-label ellipsis"
       [ngStyle]="{ 'padding-left.px': item.numberOfAncestors * 16 }"

frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.sass

@@ -6,7 +6,11 @@
     width: 100%
     display: flex
 
+  &_inline
+    .op-autocompleter
+      display: inline
+
   // Unfortunately, ng-select is extremely specific with its selectors
   .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled
     cursor: default
-    color: $spot-color-basic-gray-3 
+    color: $spot-color-basic-gray-3

frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component.ts

@@ -89,6 +89,11 @@ export interface IProjectAutocompleterData {
 export class ProjectAutocompleterComponent implements ControlValueAccessor {
   @HostBinding('class.op-project-autocompleter') public className = true;
 
+  @HostBinding('class.op-project-autocompleter_inline')
+  public get inlineClass():boolean {
+    return this.isInlineContext;
+  }
+
   projectTracker = (item:IProjectAutocompleteItem):ID => item.href || item.id;
 
   // Load all projects as default
@@ -112,6 +117,8 @@ export class ProjectAutocompleterComponent implements ControlValueAccessor {
 
   @Input() public appendTo = '';
 
+  @Input() public isInlineContext = false;
+
   // This function allows mapping of the results before they are fed to the tree
   // structuring and destructuring algorithms used internally the this component
   // to show the tree structure. By default it does not do much, but it is

frontend/src/app/shared/components/fields/edit/field-types/project-edit-field.component.html

@@ -2,11 +2,13 @@
   *ngIf="url; else loadingTemplate"
   [ngClass]="'inline-edit--field ' + handler.fieldName"
 
+  [value]="value"
   [url]="url"
   [apiFilters]="APIFilters"
   [focusDirectly]="!(handler.inEditMode || isNew)"
   [openDirectly]="!isNew"
-  appendTo="body"
+  [isInlineContext]="true"
+  appendTo=".op-wide-autocomplete-wrapper"
 
   (valueChange)="onModelChange($event)"
   (cancel)="handler.handleUserCancel()"
@@ -19,4 +21,4 @@
   >
     <svg:rect x="0" y="0" width="100%" height="100%" rx="1" />
   </op-content-loader>
-</ng-template>
+</ng-template>

frontend/src/global_styles/common/openproject-common.module.sass

@@ -8,3 +8,4 @@
 @import '../../app/shared/components/table/scrollable-table'
 @import 'export-options/export-options'
 @import 'select/select'
+@import 'wide-autocomplete-wrapper/wide-autocomplete-wrapper'

frontend/src/global_styles/common/wide-autocomplete-wrapper/wide-autocomplete-wrapper.sass

@@ -0,0 +1,26 @@
+/* This block is currently only used as an `appendTo` option
+ * for ng-select instances that need an option dropdown list that
+ * is wider than the input field it is attached to.
+ *
+ * You can use this by adding `appendTo=".op-wide-autocomplete-wrapper"`
+ * to any ng-select instance that needs it.
+ *
+ * Normally, ng-select propagates classes to the dropdowns when `appendTo` is used (see:
+ * https://github.com/ng-select/ng-select/issues/1361#issuecomment-537837586 ).
+ * Unfortunately for us, this does not work when using `ngClass` (see:
+ * https://github.com/ng-select/ng-select/issues/1627 )
+ *
+ * So instead of simply adding a class to the dropdown,
+ * we have to add a specific class to the DOM-element it is attached to
+ *
+ * Note: This makes the panel wider to the right hand side,
+ * so it if the input is already at the very right end, the dropdown will propabyl be cut off.
+ */
+
+.op-wide-autocomplete-wrapper
+  position: absolute
+
+  .ng-dropdown-panel
+    // This has to be important because ng-select sets
+    // the positioning styles directly on the element.
+    min-width: 200px !important