CST-11045 CSS refactor + dropdown data correctly populated

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

@@ -1,27 +1,41 @@
 <div>
   <ng-container *ngIf="patternsLoaded">
     <div *ngFor="let pattern of patterns; let i = index" class="col mt-3">
-        <label class="mt-2 row">Request {{ pattern }} at the following service</label>
+      <label class="mt-2 row">Request {{ pattern }} at the following service</label>
-        <div class="row">
+      <div class="row">
-          <select [(ngModel)]="selectedServices[pattern]" class="form-control col">
+        <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 }}
+            {{ service.name }}
-            </option>
+          </option>
-          </select>
+        </select>
-          {{selectedServices[pattern]?.name}}
+        <div class="col-sm-1">
-          <div class="col-sm-1">
+          <button (click)="removeService(i)" class="btn btn-outline-dark trash-button">
-            <button (click)="removeService(i)" class="btn btn-outline-dark trash-button">
+            <i class="fas fa-trash"></i>
-              <i class="fas fa-trash"></i>
+          </button>
-            </button>
+        </div>
+      </div>
+      <small class="row">Select a service for {{ pattern }} of this item</small>
+      <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>
-      <small class="row">Select a service for {{ pattern }} of this item</small>
+        <div class="col-sm-1 invisible">
-      <ds-alert *ngIf="selectedServices[pattern]" class="row ds-alert-box" [dismissible]="false" [type]="AlertTypeEnum.Success">
+          <button class="btn btn-outline-dark trash-button">
-        <img class="coar-img-submission" src="../../../../assets/images/notify_logo.png" alt="Coar-Notify-Pattern">
+            <i class="fas fa-trash"></i>
-        <ng-container >
+          </button>
-          The selected service is compatible with the item according to its current status. {{ selectedServices[pattern].name }}: {{ selectedServices[pattern].description }}
+        </div>
-        </ng-container>
+      </div>
-      </ds-alert>
       <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{
+
+.ds-alert-coar {
   position: relative
 }
 
-.coar-img-submission{
+.coar-img-submission {
-  position: absolute; top: 0; left: 0; width: 50px; height: 50px;
+  max-height: var(--ds-header-logo-height);
 }
 
-.ds-alert-box{
+.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 {
+import { CoarNotifyConfigDataService } from './coar-notify-config-data.service';
-  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;
@@ -172,7 +174,7 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
    */
   setCoarNotifyConfig() {
     this.coarNotifyConfigRD$ = this.coarNotifyConfigDataService.findAll().pipe(
-        getFirstCompletedRemoteData()
+      getFirstCompletedRemoteData()
     );
 
     this.coarNotifyConfigRD$.subscribe((data) => {
@@ -202,10 +204,10 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
    */
   onCustomEvent(event: DynamicFormControlEvent) {
     this.formOperationsService.dispatchOperationsFromEvent(
-        this.pathCombiner,
+      this.pathCombiner,
-        event,
+      event,
-        this.previousValue,
+      this.previousValue,
-        null);
+      null);
   }
 
   /**
@@ -244,10 +246,10 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
     }
 
     this.formOperationsService.dispatchOperationsFromEvent(
-        this.pathCombiner,
+      this.pathCombiner,
-        event,
+      event,
-        this.previousValue,
+      this.previousValue,
-        this.hasStoredValue(fieldId, fieldIndex));
+      this.hasStoredValue(fieldId, fieldIndex));
 
   }
 
@@ -262,8 +264,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]) &&
+        isNotEmpty(this.sectionData.data[fieldId][index]) &&
-          !this.isFieldToRemove(fieldId, index);
+        !this.isFieldToRemove(fieldId, index);
     } else {
       return false;
     }
@@ -305,8 +307,8 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
    */
   onSectionDestroy() {
     this.subs
-        .filter((subscription) => hasValue(subscription))
+      .filter((subscription) => hasValue(subscription))
-        .forEach((subscription) => subscription.unsubscribe());
+      .forEach((subscription) => subscription.unsubscribe());
   }
 
   /**
@@ -314,44 +316,73 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
    * Retriev available NotifyConfigs
    */
   fetchLdnServices() {
-    this.ldnServicesRD$ = this.ldnServicesService.findAll().pipe(
+    if (!this.ldnServicesRD$) {
-      getFirstCompletedRemoteData()
+      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) =>
+          const servicesWithPattern = this.getServicesWithPattern(pattern, data?.payload?.page);
-            this.hasInboundPattern(service, pattern)
-          );
 
-          //console.log('Pattern:', pattern);
+          if (servicesWithPattern.length > 0) {
-          //console.log('Service:', this.selectedServices[pattern]);
+            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('Name:', this.selectedServices[pattern].name);
-            //console.log('Description:', this.selectedServices[pattern].description);
+            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';
@@ -115,21 +115,22 @@ const DECLARATIONS = [
 ];
 
 @NgModule({
-  imports: [
+    imports: [
-    CommonModule,
+        CommonModule,
-    CoreModule.forRoot(),
+        CoreModule.forRoot(),
-    SharedModule,
+        SharedModule,
-    StoreModule.forFeature('submission', submissionReducers, storeModuleConfig as StoreConfig<SubmissionState, Action>),
+        StoreModule.forFeature('submission', submissionReducers, storeModuleConfig as StoreConfig<SubmissionState, Action>),
-    EffectsModule.forFeature(),
+        EffectsModule.forFeature(),
-    EffectsModule.forFeature(submissionEffects),
+        EffectsModule.forFeature(submissionEffects),
-    JournalEntitiesModule.withEntryComponents(),
+        JournalEntitiesModule.withEntryComponents(),
-    ResearchEntitiesModule.withEntryComponents(),
+        ResearchEntitiesModule.withEntryComponents(),
-    FormModule,
+        FormModule,
-    NgbModalModule,
+        NgbModalModule,
-    NgbCollapseModule,
+        NgbCollapseModule,
-    NgbAccordionModule,
+        NgbAccordionModule,
-    UploadModule,
+        UploadModule,
-  ],
+        NgOptimizedImage,
+    ],
   declarations: DECLARATIONS,
   exports: [
     ...DECLARATIONS,