Merge pull request #17130 from opf/implementation/58522-add-drop-down…

…-selector-to-the-custom-field-value-assignment

[#58522] add drop down selection to hierarchy cfs

app/models/custom_value/hierarchy_strategy.rb

@@ -28,11 +28,14 @@
 
 class CustomValue::HierarchyStrategy < CustomValue::ARObjectStrategy
   def validate_type_of_value
-    raise NotImplementedError
-  end
+    item = CustomField::Hierarchy::Item.find_by(id: value)
+    return :invalid if item.nil?
+
+    parent = custom_field.hierarchy_root
 
-  def typed_value
-    raise NotImplementedError
+    if persistence_service.descendant_of?(item:, parent:).failure?
+      :inclusion
+    end
   end
 
   private
@@ -42,11 +45,15 @@ def ar_class
   end
 
   def ar_object(value)
-    option = CustomField::Hierarchy::Item.find_by(id: value.to_s)
-    if option.nil?
+    item = CustomField::Hierarchy::Item.find_by(id: value.to_s)
+    if item.nil?
       "#{value} #{I18n.t(:label_not_found)}"
     else
-      option.value
+      item.label
     end
   end
+
+  def persistence_service
+    @persistence_service ||= CustomFields::Hierarchy::HierarchicalItemService.new
+  end
 end

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

@@ -20,12 +20,13 @@
            (keydown)="keyPressed($event)"
            bindLabel="name">
   <ng-template ng-tag-tmp let-search="searchTerm">
-    <b [textContent]="text.add_new_action"></b>: {{search}}
+    <b [textContent]="text.add_new_action"></b>: {{ search }}
   </ng-template>
 
   <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
     <span [ngOptionHighlight]="search"
           [textContent]="item.name"
+          [ngStyle]="{'padding-left.px': item.depth * 16}"
           class="ng-option-label ellipsis">
     </span>
   </ng-template>

frontend/src/app/shared/components/fields/edit/edit-field.initializer.ts

@@ -105,11 +105,13 @@ export function initializeCoreEditFields(editFieldService:EditFieldService, sele
         'TimeEntriesActivity',
         'Category',
         'CustomOption',
+        'CustomField::Hierarchy::Item',
       ])
       .addFieldType(MultiSelectEditFieldComponent, 'multi-select', [
         '[]CustomOption',
         '[]User',
         '[]Version',
+        '[]CustomField::Hierarchy::Item',
       ])
       .addFieldType(FloatEditFieldComponent, 'float', ['Float'])
       .addFieldType(WorkPackageEditFieldComponent, 'workPackage', ['WorkPackage'])

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

@@ -18,6 +18,13 @@
            [appendTo]="appendTo"
            [dropdownPosition]="'top'"
            [hideSelected]="true">
+  <ng-template ng-option-tmp let-item="item">
+    <span
+      class="ng-option-label ellipsis"
+      [textContent]="item.name"
+      [ngStyle]="{'padding-left.px': item.depth * 16}"
+    ></span>
+  </ng-template>
   <ng-template ng-footer-tmp *ngIf="showAddNewUserButton">
     <op-invite-user-button
         [projectId]="resource.project?.id"

frontend/src/app/shared/components/fields/edit/field-types/multi-select-edit-field.component.ts

@@ -173,7 +173,7 @@ export class MultiSelectEditFieldComponent extends EditFieldComponent implements
       });
     }
 
-    this.availableOptions = availableValues || [];
+    this.availableOptions = this.filterInvalidValues(availableValues || []);
     this._selectedOption = this.buildSelectedOption();
     this.checkCurrentValueValidity();
 
@@ -207,6 +207,10 @@ export class MultiSelectEditFieldComponent extends EditFieldComponent implements
     return Promise.resolve();
   }
 
+  private filterInvalidValues(availableValues:HalResource[]) {
+    return availableValues.filter((value) => !!value.name);
+  }
+
   private checkCurrentValueValidity() {
     if (this.value) {
       this.currentValueInvalid = !!(

frontend/src/app/shared/components/fields/edit/field-types/select-edit-field/select-edit-field.component.ts

@@ -26,19 +26,20 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component, InjectFlags, OnInit, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, InjectFlags, OnInit } from '@angular/core';
+import { StateService, UIRouterGlobals } from '@uirouter/core';
+import { from, Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
+import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import {
-  SelectAutocompleterRegisterService
+  SelectAutocompleterRegisterService,
 } from 'core-app/shared/components/fields/edit/field-types/select-edit-field/select-autocompleter-register.service';
-import { from, Observable, } from 'rxjs';
-import { map, tap, } from 'rxjs/operators';
-import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import {
-  CreateAutocompleterComponent
+  CreateAutocompleterComponent,
 } from 'core-app/shared/components/autocompleter/create-autocompleter/create-autocompleter.component';
 import { EditFormComponent } from 'core-app/shared/components/fields/edit/edit-form/edit-form.component';
-import { StateService, UIRouterGlobals } from '@uirouter/core';
 import { CollectionResource } from 'core-app/features/hal/resources/collection-resource';
 import { HalResourceNotificationService } from 'core-app/features/hal/services/hal-resource-notification.service';
 import { HalResourceSortingService } from 'core-app/features/hal/services/hal-resource-sorting.service';
@@ -52,6 +53,7 @@ export interface ValueOption {
 
 @Component({
   templateUrl: './select-edit-field.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SelectEditFieldComponent extends EditFieldComponent implements OnInit {
   @InjectField() selectAutocompleterRegister:SelectAutocompleterRegisterService;
@@ -151,7 +153,8 @@ export class SelectEditFieldComponent extends EditFieldComponent implements OnIn
   }
 
   private setValues(availableValues:HalResource[]) {
-    this.availableOptions = this.sortValues(availableValues);
+    const sortedValues = this.sortValues(availableValues);
+    this.availableOptions = this.filterInvalidValues(sortedValues);
     this.addEmptyOption();
   }
 
@@ -285,6 +288,10 @@ export class SelectEditFieldComponent extends EditFieldComponent implements OnIn
     return this.halSorting.sort(availableValues);
   }
 
+  private filterInvalidValues(availableValues:HalResource[]) {
+    return availableValues.filter((value) => !!value.name);
+  }
+
   // Subclasses shall be able to override the filters with which the
   // allowed values are reduced in the backend.
   protected allowedValuesFilter(query?:string) {

lib/api/v3/utilities/custom_field_injector.rb

@@ -51,7 +51,7 @@ class CustomFieldInjector
           "user" => ["users", "groups", "placeholder_users"],
           "version" => "versions",
           "list" => "custom_options",
-          "hierarchy" => "hierarchical_items"
+          "hierarchy" => "custom_field_items"
         }.freeze
 
         REPRESENTER_MAP = {

lib/api/v3/utilities/custom_field_injector/link_value_getter.rb

@@ -85,6 +85,8 @@ def link_value_path_method(custom_field, custom_value)
                 derive_principal_path_method(custom_value)
               when "list"
                 :custom_option
+              when "hierarchy"
+                :custom_field_item
               else
                 custom_field.field_format
               end