fix(funders): fixed funders bug

src/app/features/metadata/dialogs/funding-dialog/funding-dialog.component.html

@@ -6,21 +6,22 @@
           <label [for]="'funderName-' + $index">
             {{ 'project.metadata.funding.dialog.funderName' | translate }}
           </label>
+
           <p-select
             [id]="'funderName-' + $index"
             formControlName="funderName"
             [options]="funderOptions()"
             optionLabel="label"
             optionValue="value"
             [placeholder]="'project.metadata.funding.dialog.selectFunder' | translate"
-            appendTo="body"
             class="w-full"
             [filter]="true"
             filterBy="label"
             [showClear]="true"
             [loading]="fundersLoading()"
+            [emptyFilterMessage]="filterMessage()"
+            [emptyMessage]="filterMessage()"
             [autoOptionFocus]="false"
-            resetFilterOnHide="false"
             (onChange)="onFunderSelected($event.value, $index)"
             (onFilter)="onFunderSearch($event.filter)"
           />

src/app/features/metadata/dialogs/funding-dialog/funding-dialog.component.ts

@@ -1,6 +1,6 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { TranslatePipe } from '@ngx-translate/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
@@ -9,13 +9,13 @@ import { Select } from 'primeng/select';
 
 import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
 
-import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 
 import { CustomValidators } from '@osf/shared/helpers';
 
-import { Funder, FunderOption, FundingDialogResult, FundingEntryForm, FundingForm, SupplementData } from '../../models';
+import { Funder, FundingDialogResult, FundingEntryForm, FundingForm, SupplementData } from '../../models';
 import { GetFundersList, MetadataSelectors } from '../../store';
 
 @Component({
@@ -28,46 +28,39 @@ export class FundingDialogComponent implements OnInit {
   dialogRef = inject(DynamicDialogRef);
   config = inject(DynamicDialogConfig);
   destroyRef = inject(DestroyRef);
+  translateService = inject(TranslateService);
 
   actions = createDispatchMap({ getFundersList: GetFundersList });
 
   fundersList = select(MetadataSelectors.getFundersList);
   fundersLoading = select(MetadataSelectors.getFundersLoading);
-  funderOptions = signal<FunderOption[]>([]);
+  funderOptions = computed(() => {
+    const funders = this.fundersList() || [];
+    return funders.map((funder) => ({
+      label: funder.name,
+      value: funder.name,
+      id: funder.id,
+      uri: funder.uri,
+    }));
+  });
 
   fundingForm = new FormGroup<FundingForm>({ fundingEntries: new FormArray<FormGroup<FundingEntryForm>>([]) });
 
   private searchSubject = new Subject<string>();
 
   configFunders = this.config.data?.funders;
 
-  constructor() {
-    effect(() => {
-      const funders = this.fundersList() || [];
-      this.funderOptions.set(
-        funders.map((funder) => ({
-          label: funder.name,
-          value: funder.name,
-          id: funder.id,
-          uri: funder.uri,
-        }))
-      );
-    });
-
-    effect(() => {
-      const control = this.fundingForm.controls['fundingEntries'];
-
-      return this.fundersLoading() ? control.disable() : control.enable();
-    });
-  }
+  filterMessage = computed(() =>
+    this.fundersLoading()
+      ? this.translateService.instant('project.metadata.funding.dialog.loadingFunders')
+      : this.translateService.instant('project.metadata.funding.dialog.noFundersFound')
+  );
 
   get fundingEntries() {
     return this.fundingForm.get('fundingEntries') as FormArray<FormGroup<FundingEntryForm>>;
   }
 
   ngOnInit(): void {
-    this.actions.getFundersList();
-
     if (this.configFunders?.length > 0) {
       this.configFunders.forEach((funder: Funder) => {
         this.addFundingEntry({

src/app/shared/components/project-selector/project-selector.component.html

@@ -3,16 +3,16 @@
   [loading]="isProjectsLoading()"
   [options]="projectsOptions()"
   [filter]="true"
-  (onFilter)="handleFilterSearch($event)"
   optionLabel="label"
   optionValue="value"
   appendTo="body"
   [emptyFilterMessage]="filterMessage()"
   [emptyMessage]="filterMessage()"
-  (onChange)="handleProjectChange($event)"
-  [placeholder]="placeholder() | translate"
   [(ngModel)]="selectedProject"
+  [placeholder]="placeholder() | translate"
   [showClear]="showClear() && !!selectedProject()"
+  (onFilter)="handleFilterSearch($event)"
+  (onChange)="handleProjectChange($event)"
 >
   <ng-template #selectedItem let-selectedOption>
     {{ selectedOption.label }}

src/assets/i18n/en.json

@@ -977,7 +977,8 @@
           "selectFunder": "Select a funder",
           "autoPopulated": "Auto-populated from selection",
           "loadingFunders": "Loading funders...",
-          "description": "Add funding and support information for this project."
+          "description": "Add funding and support information for this project.",
+          "noFundersFound": "No funders found"
         }
       },
       "affiliatedInstitutions": {