CST-11045 Dynamically creating dropdowns based on the coarconfig

src/app/submission/sections/section-coar-notify/section-coar-notify.component.html

@@ -1,31 +1,15 @@
 <div class="container">
-
-  <ds-alert [content]="'submission.sections.notify.info'"
-            [dismissible]="true"
-            [type]="AlertTypeEnum.Info"></ds-alert>
+  <ds-alert [content]="'submission.sections.notify.info'" [dismissible]="true" [type]="AlertTypeEnum.Info"></ds-alert>
   <div class="dropdown-section">
-    <div class="dropdown">
-      <label>Request a Review at the following service</label>
-      <select [(ngModel)]="requestReview">
-        <option *ngFor="let reviewPatternService of (ldnServicesRD$ | async)?.payload?.page"
-                [value]="reviewPatternService">{{ reviewPatternService.name }}</option>
-      </select>
-    </div>
-
-    <div class="dropdown">
-      <label>Request an Endorsement at the following service</label>
-      <select [(ngModel)]="requestEndorsement">
-        <option *ngFor="let endorsementPatternService of (coarNotifyConfigRD$ | async)?.payload?.page"
-                [value]="endorsementPatternService">{{ endorsementPatternService.patterns }}</option>
-      </select>
-    </div>
-
-    <div class="dropdown">
-      <label>Dropdown 3</label>
-      <select [(ngModel)]="requestIngest">
-        <option *ngFor="let ingestPatternService of (ldnServicesRD$ | async)?.payload?.page"
-                [value]="ingestPatternService">{{ ingestPatternService.name }}</option>
-      </select>
-    </div>
+    <ng-container *ngIf="patternsLoaded">
+      <div class="dropdown" *ngFor="let pattern of patterns">
+        <label>Request a {{ pattern }} at the following service</label>
+        <select [(ngModel)]="selectedServices[pattern]">
+          <option *ngFor="let service of (ldnServicesRD$ | async)?.payload?.page" [value]="service">
+            {{ service.name }}
+          </option>
+        </select>
+      </div>
+    </ng-container>
   </div>
 </div>

src/app/submission/sections/section-coar-notify/section-coar-notify.component.ts

@@ -57,12 +57,11 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
 
   ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
 
-  selectedServiceValues: any[] = [];
 
-  /**
-   * The AlertType enumeration
-   * @type {AlertType}
-   */
+  patterns: string[] = [];
+  selectedServices: { [key: string]: LdnService } = {};
+  patternsLoaded = false;
+
   public AlertTypeEnum = AlertType;
   /**
    * The form model
@@ -171,7 +170,15 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
    */
   setCoarNotifyConfig() {
     this.coarNotifyConfigRD$ = this.coarNotifyConfigDataService.findAll().pipe(
-      getFirstCompletedRemoteData());
+        getFirstCompletedRemoteData()
+    );
+
+    this.coarNotifyConfigRD$.subscribe((data) => {
+      if (data.hasSucceeded) {
+        this.patterns = data.payload.page[0].patterns;
+        this.patternsLoaded = true;
+      }
+    });
   }
 
   /**
@@ -181,10 +188,10 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
    */
   onCustomEvent(event: DynamicFormControlEvent) {
     this.formOperationsService.dispatchOperationsFromEvent(
-      this.pathCombiner,
-      event,
-      this.previousValue,
-      null);
+        this.pathCombiner,
+        event,
+        this.previousValue,
+        null);
   }
 
   /**
@@ -223,10 +230,10 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
     }
 
     this.formOperationsService.dispatchOperationsFromEvent(
-      this.pathCombiner,
-      event,
-      this.previousValue,
-      this.hasStoredValue(fieldId, fieldIndex));
+        this.pathCombiner,
+        event,
+        this.previousValue,
+        this.hasStoredValue(fieldId, fieldIndex));
 
   }
 
@@ -241,8 +248,8 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
   hasStoredValue(fieldId, index): boolean {
     if (isNotEmpty(this.sectionData.data)) {
       return this.sectionData.data.hasOwnProperty(fieldId) &&
-        isNotEmpty(this.sectionData.data[fieldId][index]) &&
-        !this.isFieldToRemove(fieldId, index);
+          isNotEmpty(this.sectionData.data[fieldId][index]) &&
+          !this.isFieldToRemove(fieldId, index);
     } else {
       return false;
     }
@@ -284,8 +291,8 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
    */
   onSectionDestroy() {
     this.subs
-      .filter((subscription) => hasValue(subscription))
-      .forEach((subscription) => subscription.unsubscribe());
+        .filter((subscription) => hasValue(subscription))
+        .forEach((subscription) => subscription.unsubscribe());
   }
 
   /**
@@ -293,9 +300,19 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
    * Retriev available NotifyConfigs
    */
   fetchLdnServices() {
-    this.ldnServicesRD$ =  this.ldnServicesService.findAll().pipe(
+    this.ldnServicesRD$ = this.ldnServicesService.findAll().pipe(
         getFirstCompletedRemoteData()
-      );
+    );
+
+    this.ldnServicesRD$.subscribe((data) => {
+      if (this.patternsLoaded) {
+        this.patterns.forEach((pattern) => {
+          this.selectedServices[pattern] = data.payload.page.find((service) =>
+              this.hasInboundPattern(service, `Request ${pattern}`)
+          );
+        });
+      }
+    });
   }
 
   protected getSectionStatus(): Observable<boolean> {