CST-11045 CSS refactor + dropdown data correctly populated

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

@@ -4,11 +4,10 @@
       <label class="mt-2 row">Request {{ pattern }} at the following service</label>
       <div class="row">
         <select [(ngModel)]="selectedServices[pattern]" class="form-control col">
-            <option *ngFor="let service of (ldnServicesRD$ | async)?.payload?.page" [value]="service">
+          <option *ngFor="let service of filterServices(pattern)" [ngValue]="service">
             {{ service.name }}
           </option>
         </select>
-          {{selectedServices[pattern]?.name}}
         <div class="col-sm-1">
           <button (click)="removeService(i)" class="btn btn-outline-dark trash-button">
             <i class="fas fa-trash"></i>
@@ -16,12 +15,27 @@
         </div>
       </div>
       <small class="row">Select a service for {{ pattern }} of this item</small>
-      <ds-alert *ngIf="selectedServices[pattern]" class="row ds-alert-box" [dismissible]="false" [type]="AlertTypeEnum.Success">
-        <img class="coar-img-submission" src="../../../../assets/images/notify_logo.png" alt="Coar-Notify-Pattern">
-        <ng-container >
-          The selected service is compatible with the item according to its current status. {{ selectedServices[pattern].name }}: {{ selectedServices[pattern].description }}
-        </ng-container>
-      </ds-alert>
+      <div class="row">
+        <div *ngIf="selectedServices[pattern]" class="alert alert-success col">
+          <div class="row ml-2 mt-2 mb-1">
+            <img alt="Coar-Notify-Pattern" class="coar-img-submission "
+                 src="../../../../assets/images/notify_logo.png">
+            <i class="fa-solid fa-circle-check icon-check ml-2"></i>
+            <div class="mt-1 ml-4">The selected service is compatible with the item according to its current status.</div>
+          </div>
+          <div class="row ml-2 mt-2 mb-1">
+            <img alt="Coar-Notify-Pattern" class="coar-img-submission invisible"
+                 src="../../../../assets/images/notify_logo.png">
+            <i class="fa-solid fa-circle-check icon-check ml-2 invisible"></i>
+            <div class="mt-1 ml-4" >{{ selectedServices[pattern].name }}: {{ selectedServices[pattern].description }}</div>
+          </div>
+        </div>
+        <div class="col-sm-1 invisible">
+          <button class="btn btn-outline-dark trash-button">
+            <i class="fas fa-trash"></i>
+          </button>
+        </div>
+      </div>
       <span (click)="addService()"
             class="add-pattern-link mb-2 row">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
     </div>

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

@@ -2,14 +2,21 @@
   color: #0048ff;
   cursor: pointer;
 }
+
 .ds-alert-coar {
   position: relative
 }
 
 .coar-img-submission {
-  position: absolute; top: 0; left: 0; width: 50px; height: 50px;
+  max-height: var(--ds-header-logo-height);
 }
 
+.icon-check {
+  color: rgba(6, 68, 6, 0.42);
+  font-size: var(--ds-header-logo-height);
+}
+
+
 .ds-alert-box {
 
 }

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

@@ -23,15 +23,14 @@ import { LdnServicesService } from '../../../admin/admin-ldn-services/ldn-servic
 import { isLoading } from '../../../core/data/request-entry-state.model';
 import { LdnService } from '../../../admin/admin-ldn-services/ldn-services-model/ldn-services.model';
 import { SECTION_COAR_FORM_LAYOUT, SECTION_COAR_FORM_MODEL } from './section-coar-notify-model';
-import {
-  CoarNotifyConfigDataService
-} from './coar-notify-config-data.service';
+import { CoarNotifyConfigDataService } from './coar-notify-config-data.service';
 import { RemoteData } from '../../../core/data/remote-data';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { SubmissionCoarNotifyConfig } from './submission-coar-notify.config';
 import { FormFieldPreviousValueObject } from '../../../shared/form/builder/models/form-field-previous-value-object';
 import { UntypedFormGroup } from '@angular/forms';
 import { AlertType } from '../../../shared/alert/aletr-type';
+import { filter, map, take } from "rxjs/operators";
 
 export interface CoarNotifyDropdownSelector {
   ldnService: LdnService;
@@ -60,8 +59,11 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
 
   patterns: string[] = [];
   selectedServices: { [key: string]: LdnService } = {};
+  patternServices: { [key: string]: LdnService } = {};
+
   patternsLoaded = false;
-  selectedService: any;
+  patternObservables: Observable<RemoteData<PaginatedList<LdnService>>[]>;
+
 
 
   public AlertTypeEnum = AlertType;
@@ -314,44 +316,73 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
    * Retriev available NotifyConfigs
    */
   fetchLdnServices() {
+    if (!this.ldnServicesRD$) {
       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, pattern)
-          );
+          const servicesWithPattern = this.getServicesWithPattern(pattern, data?.payload?.page);
 
-          //console.log('Pattern:', pattern);
-          //console.log('Service:', this.selectedServices[pattern]);
+          if (servicesWithPattern.length > 0) {
+            this.selectedServices[pattern] = servicesWithPattern[0];
+          }
+
+          console.log('Pattern:', pattern);
+          console.log('Service:', this.selectedServices[pattern]);
 
           if (this.selectedServices[pattern]) {
-            //console.log('Name:', this.selectedServices[pattern].name);
-            //console.log('Description:', this.selectedServices[pattern].description);
+            console.log('Name:', this.selectedServices[pattern].name);
+            console.log('Description:', this.selectedServices[pattern].description);
           }
         });
       }
     });
   }
 
+  getServicesWithPattern(pattern: string, services: LdnService[] | null): LdnService[] {
+    if (services) {
+      return services.filter((service) => this.hasInboundPattern(service, pattern));
+    }
+    return [];
+  }
+
+
+  filterServices(pattern: string): LdnService[] {
+    let ldnServices: LdnService[] = [];
+
+    this.ldnServicesRD$.pipe(
+      filter((rd) => rd.hasSucceeded),
+      map((rd) => rd.payload.page)
+    ).subscribe((services) => {
+      ldnServices = services.filter((service) => this.hasInboundPattern(service, pattern));
+    });
+
+    return ldnServices;
+  }
+
+
+
+
+
+  hasInboundPattern(service: any, patternType: string): boolean {
+    console.log('Pattern Type:', patternType);
+    console.log('Inbound Patterns in Service:', service.notifyServiceInboundPatterns);
+
+    const hasPattern = service.notifyServiceInboundPatterns.some((pattern: { pattern: string; }) => {
+      console.log('Checking Pattern:', pattern.pattern);
+      return pattern.pattern === patternType;
+    });
+
+    console.log('Has Inbound Pattern:', hasPattern);
+    return hasPattern;
+  }
 
   protected getSectionStatus(): Observable<boolean> {
     return undefined;
   }
 
-  hasInboundPattern(service: any, patternType: string): boolean {
-    //console.log('Pattern Type:', patternType);
-    //console.log('Inbound Patterns in Service:', service.notifyServiceInboundPatterns);
-
-    const hasPattern = service.notifyServiceInboundPatterns.some((pattern: { pattern: string; }) => {
-      //console.log('Checking Pattern:', pattern.pattern);
-      return pattern.pattern === patternType;
-    });
-
-    //console.log('Has Inbound Pattern:', hasPattern);
-    return hasPattern;
-  }
 }

src/app/submission/submission.module.ts

@@ -10,7 +10,7 @@ import { SubmissionFormFooterComponent } from './form/footer/submission-form-foo
 import { SubmissionFormComponent } from './form/submission-form.component';
 import { SubmissionFormSectionAddComponent } from './form/section-add/submission-form-section-add.component';
 import { SubmissionSectionContainerComponent } from './sections/container/section-container.component';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { Action, StoreConfig, StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { submissionReducers, SubmissionState } from './submission.reducers';
@@ -129,6 +129,7 @@ const DECLARATIONS = [
         NgbCollapseModule,
         NgbAccordionModule,
         UploadModule,
+        NgOptimizedImage,
     ],
   declarations: DECLARATIONS,
   exports: [