Merge pull request #7101 from opf/fix/client-credentials-user

Fix client credentials user

[ci skip]

app/views/oauth/applications/_form.html.erb

@@ -63,7 +63,9 @@ See docs/COPYRIGHT.rdoc for more details.
       </label>
       <div class="form--field-container -visible-overflow">
         <div class="form--text-field-container -middle">
-          <user-autocompleter></user-autocompleter>
+          <%= f.hidden_field :client_credentials_user_id,  value: @application.client_credentials_user_id %>
+          <user-autocompleter data-allow-empty="true"
+                              data-update-input="application[client_credentials_user_id]"></user-autocompleter>
         </div>
       </div>
       <p class="form--field-instructions">

frontend/src/app/modules/common/autocomplete/user-autocompleter.component.ts

@@ -26,23 +26,26 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
 import {DynamicBootstrapper} from "core-app/globals/dynamic-bootstrapper";
 import {HalResourceService} from "core-app/modules/hal/services/hal-resource.service";
 import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service";
 import {ApiV3FilterBuilder} from "core-components/api/api-v3/api-v3-filter-builder";
 import {NgSelectComponent} from "@ng-select/ng-select/dist";
+import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 
 @Component({
   template: `
     <ng-select [items]="options"
                bindLabel="name"
                bindValue="id"
+               [ngModel]="initialSelection"
                [virtualScroll]="true"
                (search)="onSearch($event)"
                (change)="onModelChange($event)" >
       <ng-template ng-option-tmp let-item="item" let-index="index">
-        <user-avatar [attr.data-user-name]="item.name"
+        <user-avatar *ngIf="item.href"
+                     [attr.data-user-name]="item.name"
                      [attr.data-user-avatar-src]="item.avatar"
                      data-class-list="avatar-mini">
         </user-avatar>
@@ -59,14 +62,33 @@ export class UserAutocompleterComponent implements OnInit {
 
   // Load all users as default
   @Input() public url:string = this.pathHelper.api.v3.users.path;
+  @Input() public allowEmpty:boolean = false;
+
+  @Input() public initialSelection:number|null = null;
+
+  // Update an input field after changing, used when externally loaded
+  private updateInputField:HTMLInputElement|undefined;
 
   public options:any[];
 
-  constructor(protected halResourceService:HalResourceService,
+  constructor(protected elementRef:ElementRef,
+              protected halResourceService:HalResourceService,
+              protected I18n:I18nService,
               readonly pathHelper:PathHelperService) {
   }
 
   ngOnInit() {
+    const input = this.elementRef.nativeElement.dataset['updateInput'];
+    const allowEmpty = this.elementRef.nativeElement.dataset['allowEmpty'];
+    if (input) {
+      this.updateInputField = document.getElementsByName(input)[0] as HTMLInputElement|undefined;
+      this.setInitialSelection();
+    }
+
+    if (allowEmpty === 'true') {
+      this.allowEmpty = true;
+    }
+
     this.setAvailableUsers(this.url, '');
   }
 
@@ -77,6 +99,10 @@ export class UserAutocompleterComponent implements OnInit {
       if (this.clearAfterSelection) {
         this.ngSelectComponent.clearItem(user);
       }
+
+      if (this.updateInputField) {
+        this.updateInputField.value = user.id;
+      }
     }
   }
 
@@ -97,8 +123,19 @@ export class UserAutocompleterComponent implements OnInit {
         this.options = res.elements.map((el:any) => {
           return {name: el.name, id: el.id, href: el.href, avatar: el.avatar};
         });
+
+        if (this.allowEmpty) {
+          this.options.unshift({ name: this.I18n.t('js.timelines.filter.noneSelection'), id: null });
+        }
       });
   }
+
+  private setInitialSelection() {
+    if (this.updateInputField) {
+      const id = parseInt(this.updateInputField.value);
+      this.initialSelection = isNaN(id) ? null : id;
+    }
+  }
 }
 
 DynamicBootstrapper.register({ selector: 'user-autocompleter', cls: UserAutocompleterComponent  });