CST-11045 Improved css and remove console log and interpolation, added small notify regarding service compatibility

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

@@ -1,15 +1,29 @@
-<div class="container">
-  <ds-alert [content]="'submission.sections.notify.info'" [dismissible]="true" [type]="AlertTypeEnum.Info"></ds-alert>
-  <div class="dropdown-section">
-    <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>
+  <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>
+        <div class="row">
+          <select [(ngModel)]="selectedServices[pattern]" class="form-control col">
+            <option *ngFor="let service of (ldnServicesRD$ | async)?.payload?.page" [value]="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>
+            </button>
+          </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>
+      <span (click)="addService()"
+            class="add-pattern-link mb-2 row">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
+    </div>
+  </ng-container>
 </div>

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

@@ -0,0 +1,15 @@
+.add-pattern-link {
+  color: #0048ff;
+  cursor: pointer;
+}
+.ds-alert-coar{
+  position: relative
+}
+
+.coar-img-submission{
+  position: absolute; top: 0; left: 0; width: 50px; height: 50px;
+}
+
+.ds-alert-box{
+
+}

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

@@ -61,6 +61,8 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
   patterns: string[] = [];
   selectedServices: { [key: string]: LdnService } = {};
   patternsLoaded = false;
+  selectedService: any;
+
 
   public AlertTypeEnum = AlertType;
   /**
@@ -181,6 +183,18 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
     });
   }
 
+
+  addService() {
+    this.patterns.push('');
+  }
+
+
+  removeService(index: number) {
+    if (index >= 0 && index < this.patterns.length) {
+      this.patterns.splice(index, 1);
+    }
+  }
+
   /**
    * Handle the customEvent (ex. drag-drop move event).
    * The customEvent is stored inside event.$event
@@ -301,25 +315,43 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
    */
   fetchLdnServices() {
     this.ldnServicesRD$ = this.ldnServicesService.findAll().pipe(
-        getFirstCompletedRemoteData()
+      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}`)
+            this.hasInboundPattern(service, pattern)
           );
+
+          //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);
+          }
         });
       }
     });
   }
 
+
   protected getSectionStatus(): Observable<boolean> {
     return undefined;
   }
 
   hasInboundPattern(service: any, patternType: string): boolean {
-    return service.notifyServiceInboundPatterns.some(pattern => pattern.pattern === patternType);
+    //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;
   }
 }