[pull] dev from opf:dev

Gemfile.lock

@@ -789,7 +789,7 @@ GEM
     net-smtp (0.5.0)
       net-protocol
     nio4r (2.7.4)
-    nokogiri (1.18.1)
+    nokogiri (1.18.2)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     oj (3.16.9)

frontend/src/app/app.module.ts

@@ -234,6 +234,9 @@ import { appBaseSelector, ApplicationBaseComponent } from 'core-app/core/routing
 import { SpotSwitchComponent } from 'core-app/spot/components/switch/switch.component';
 import { OPContextMenuService } from 'core-app/shared/components/op-context-menu/op-context-menu.service';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
+import {
+  TimeEntriesWorkPackageAutocompleterComponent,
+} from 'core-app/shared/components/autocompleter/time-entries-work-package-autocompleter/time-entries-work-package-autocompleter.component';
 
 export function initializeServices(injector:Injector) {
   return () => {
@@ -425,6 +428,7 @@ export class OpenProjectModule implements DoBootstrap {
     registerCustomElement('opce-project-autocompleter', ProjectAutocompleterComponent, { injector });
     registerCustomElement('opce-members-autocompleter', MembersAutocompleterComponent, { injector });
     registerCustomElement('opce-user-autocompleter', UserAutocompleterComponent, { injector });
+    registerCustomElement('opce-time-entries-work-package-autocompleter', TimeEntriesWorkPackageAutocompleterComponent, { injector });
     registerCustomElement('opce-macro-attribute-value', AttributeValueMacroComponent, { injector });
     registerCustomElement('opce-macro-attribute-label', AttributeLabelMacroComponent, { injector });
     registerCustomElement('opce-macro-wp-quickinfo', WorkPackageQuickinfoMacroComponent, { injector });

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

@@ -4,6 +4,7 @@
     *ngIf="inputName && !(multiple && multipleAsSeparateInputs)"
     type="hidden"
     [attr.name]="inputName"
+    [value]="mappedInputValue"
     [attr.data-action]="hiddenFieldAction">
   <ng-container *ngIf="multiple && multipleAsSeparateInputs">
     <input

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

@@ -200,7 +200,7 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
 
   @Input() public selectableGroupAsModel?:boolean = true;
 
-  @Input() public searchFn:(term:string, item:any) => boolean;
+  @Input() public searchFn:(term:string, item:unknown) => boolean;
 
   @Input() public trackByFn = this.defaultTrackByFunction();
 
@@ -293,7 +293,7 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
 
   initialDebounce = true;
 
-  private opAutocompleterService = new OpAutocompleterService(this.apiV3Service);
+  readonly opAutocompleterService = new OpAutocompleterService(this.apiV3Service);
 
   constructor(
     readonly injector:Injector,
@@ -319,17 +319,6 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
     if (this.items) {
       this.items$.next(this.items as IOPAutocompleterOption[]);
     }
-
-    if (this.inputValue && this.resource && !this.model) {
-      this
-        .opAutocompleterService
-        .loadValue(this.inputValue, this.resource, this.multiple)
-        .subscribe((resource) => {
-          this.model = resource as unknown as T;
-          this.syncHiddenField(this.mappedInputValue);
-          this.cdRef.detectChanges();
-        });
-    }
   }
 
   ngOnChanges(changes:SimpleChanges):void {
@@ -343,6 +332,17 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
       this.syncHiddenField(this.mappedInputValue);
     }
 
+    if (this.inputValue && this.resource && !this.model) {
+      this
+        .opAutocompleterService
+        .loadValue(this.inputValue, this.resource, this.multiple)
+        .subscribe((resource) => {
+          this.model = resource as unknown as T;
+          this.syncHiddenField(this.mappedInputValue);
+          this.cdRef.detectChanges();
+        });
+    }
+
     this.ngZone.runOutsideAngular(() => {
       setTimeout(() => {
         this.results$ = merge(
@@ -385,7 +385,7 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
     this.open.emit();
   }
 
-  public getOptionsItems(searchKey:string):Observable<any> {
+  public getOptionsItems(searchKey:string):Observable<unknown> {
     return of((this.items as IOPAutocompleterOption[])?.filter((element) => element.name.includes(searchKey)));
   }
 
@@ -414,6 +414,7 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
     this.onTouched(val);
     this.onChange(val);
     this.syncHiddenField(this.mappedInputValue);
+    this.syncedInput?.nativeElement.dispatchEvent(new Event('change'));
     this.change.emit(val);
 
     if (this.resetOnChange) {
@@ -592,13 +593,19 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
     );
   }
 
-  protected syncHiddenField(mappedInputValue:string|string[]) {
+  protected syncHiddenField(mappedInputValue:string|string[]):void {
     const input = this.syncedInput?.nativeElement;
-    if (input) {
-      input.value = Array.isArray(mappedInputValue) ? mappedInputValue.join(',') : mappedInputValue;
-      const event = new Event('change');
-      input.dispatchEvent(event);
+    if (!input) {
+      return;
     }
+
+    const newValue = Array.isArray(mappedInputValue) ? mappedInputValue.join(',') : mappedInputValue;
+    // Don't fire a change event if the value is the same
+    if (input.value === newValue) {
+      return;
+    }
+
+    input.value = newValue;
   }
 
   public addNewObjectFn(searchTerm:string):unknown {

frontend/src/app/shared/components/autocompleter/openproject-autocompleter.module.ts

@@ -15,9 +15,6 @@ import { ColorsAutocompleterComponent } from 'core-app/shared/components/colors/
 import {
   WorkPackageAutocompleterComponent,
 } from 'core-app/shared/components/autocompleter/work-package-autocompleter/wp-autocompleter.component';
-import {
-  TimeEntryWorkPackageAutocompleterComponent,
-} from 'core-app/shared/components/autocompleter/te-work-package-autocompleter/te-work-package-autocompleter.component';
 import {
   VersionAutocompleterComponent,
 } from 'core-app/shared/components/autocompleter/version-autocompleter/version-autocompleter.component';
@@ -52,12 +49,15 @@ import {
 import {
   ProjectAutocompleterTemplateComponent,
 } from 'core-app/shared/components/autocompleter/project-autocompleter/project-autocompleter-template.component';
+import {
+  TimeEntriesWorkPackageAutocompleterComponent,
+} from 'core-app/shared/components/autocompleter/time-entries-work-package-autocompleter/time-entries-work-package-autocompleter.component';
 
 export const OPENPROJECT_AUTOCOMPLETE_COMPONENTS = [
   CreateAutocompleterComponent,
   VersionAutocompleterComponent,
   WorkPackageAutocompleterComponent,
-  TimeEntryWorkPackageAutocompleterComponent,
+  TimeEntriesWorkPackageAutocompleterComponent,
   DraggableAutocompleteComponent,
   UserAutocompleterComponent,
   UserAutocompleterTemplateComponent,

frontend/src/app/shared/components/autocompleter/time-entries-work-package-autocompleter/time-entries-work-package-autocompleter-template.component.html

@@ -0,0 +1,32 @@
+<ng-template #headerTemplate>
+  <div class="scrollable-tabs">
+    <div class="op-scrollable-tabs--tab-container">
+      <ul class="op-tab-row">
+        <li
+          class="op-tab-row--tab"
+          (click)="autocompleter.changeMode('all')"
+        >
+          <a
+            href="#"
+            class="op-tab-row--link"
+            [class.op-tab-row--link_selected]="autocompleter.mode === 'all'"
+            [textContent]="autocompleter.labelAll"
+          >
+          </a>
+        </li>
+        <li
+          class="op-tab-row--tab"
+          (click)="autocompleter.changeMode('recent')"
+        >
+          <a
+            href="#"
+            class="op-tab-row--link"
+            [class.op-tab-row--link_selected]="autocompleter.mode === 'recent'"
+            [textContent]="autocompleter.labelRecent"
+          >
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</ng-template>

frontend/src/app/shared/components/autocompleter/te-work-package-autocompleter/te-work-package-autocompleter.component.ts → frontend/src/app/shared/components/autocompleter/time-entries-work-package-autocompleter/time-entries-work-package-autocompleter-template.component.ts

@@ -26,44 +26,30 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
+import { ChangeDetectionStrategy, Component, Injector, Input, TemplateRef, ViewChild } from '@angular/core';
 import {
-  AfterViewInit,
-  Component,
-  EventEmitter,
-  Injector,
-  Output,
-  ViewEncapsulation,
-} from '@angular/core';
-import { WorkPackageAutocompleterComponent } from 'core-app/shared/components/autocompleter/work-package-autocompleter/wp-autocompleter.component';
-
-export type TimeEntryWorkPackageAutocompleterMode = 'all'|'recent';
+  IAutocompleterTemplateComponent,
+  OpAutocompleterComponent,
+} from 'core-app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component';
+import {
+  TimeEntriesWorkPackageAutocompleterComponent,
+} from 'core-app/shared/components/autocompleter/time-entries-work-package-autocompleter/time-entries-work-package-autocompleter.component';
 
 @Component({
-  templateUrl: './te-work-package-autocompleter.component.html',
-  styleUrls: [
-    './te-work-package-autocompleter.component.sass',
-  ],
-  selector: 'te-work-package-autocompleter',
-  encapsulation: ViewEncapsulation.None,
+  templateUrl: './time-entries-work-package-autocompleter-template.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TimeEntryWorkPackageAutocompleterComponent extends WorkPackageAutocompleterComponent implements AfterViewInit {
-  @Output() modeSwitch = new EventEmitter<TimeEntryWorkPackageAutocompleterMode>();
+export class TimeEntriesWorkPackageAutocompleterTemplateComponent implements IAutocompleterTemplateComponent {
+  @Input() public mode:string|undefined;
+  @Input() public isOpenedInModal:boolean = false;
+  @Input() public hoverCards:boolean = true;
+
+  @ViewChild('headerTemplate') headerTemplate:TemplateRef<Element>;
+
+  autocompleter:TimeEntriesWorkPackageAutocompleterComponent = this.injector.get(OpAutocompleterComponent) as TimeEntriesWorkPackageAutocompleterComponent;
 
   constructor(
     readonly injector:Injector,
   ) {
-    super(injector);
-
-    this.text.all = this.I18n.t('js.label_all');
-    this.text.recent = this.I18n.t('js.label_recent');
-  }
-
-  public mode:TimeEntryWorkPackageAutocompleterMode = 'all';
-
-  public setMode(value:TimeEntryWorkPackageAutocompleterMode) {
-    if (value !== this.mode) {
-      this.modeSwitch.emit(value);
-    }
-    this.mode = value;
   }
 }