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

src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts

@@ -84,6 +84,10 @@ export class LdnServicesService extends IdentifiableDataService<LdnService> impl
         return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
     }
 
+   /*findByPattern(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
+    return this.findAllData.find
+   }*/
+
     public delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
         return this.deleteData.delete(objectId, copyVirtualMetadata);
     }

src/app/submission/form/submission-form.component.html

@@ -1,7 +1,6 @@
 <div class="container-fluid">
     <div *ngIf="!(isLoading() | async)" class="submission-form-header mb-3 d-flex flex-wrap position-sticky">
         <div *ngIf="(uploadEnabled$ | async)" class="w-100">
-          <p>ds-submission-upload-files</p>
             <ds-submission-upload-files [submissionId]="submissionId"
                                         [collectionId]="collectionId"
                                         [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>
@@ -10,7 +9,6 @@
 
         <div class="submission-form-header-item mb-3 mb-sm-0 flex-sm-grow-1 flex-md-grow-0">
           <ng-container *ngIf="!isSectionHidden">
-            <p>ds-submission-form-collection </p>
             <ds-submission-form-collection
             [currentCollectionId]="collectionId"
                                            [currentDefinition]="definitionId"
@@ -22,7 +20,6 @@
           </ng-container>
         </div>
         <div class="submission-form-header-item text-right">
-          <p>ds-submission-form-section-add </p>
             <ds-submission-form-section-add [collectionId]="collectionId"
                                             [submissionId]="submissionId">
             </ds-submission-form-section-add>
@@ -32,7 +29,6 @@
     <div class="submission-form-content">
         <ds-themed-loading *ngIf="(isLoading() | async)" message="Loading..."></ds-themed-loading>
         <ng-container *ngFor="let object of (submissionSections | async)">
-          <p>ds-submission-section-container</p>
             <ds-submission-section-container [collectionId]="collectionId"
                                              [submissionId]="submissionId"
                                              [sectionData]="object">
@@ -44,7 +40,6 @@
         </ds-submission-section-container-->
     </div>
     <div *ngIf="!(isLoading() | async)" class="submission-form-footer mt-3 mb-3 position-sticky">
-      <p>ds-submission-form-footer</p>
         <ds-submission-form-footer [submissionId]="submissionId"></ds-submission-form-footer>
     </div>
 </div>

src/app/submission/sections/container/section-container.component.html

@@ -42,7 +42,7 @@
           <ds-alert *ngFor="let error of sectionRef.getErrors(); let i = index" [content]="error" [dismissible]="true"
             [type]="AlertTypeEnum.Error" (close)="sectionRef.removeError(i)"></ds-alert>
         </div>
-        <div id="sectionContent_{{sectionData.id}}" (click)="sectionRef.setFocus($event)">aaaaaaaaa
+        <div id="sectionContent_{{sectionData.id}}" (click)="sectionRef.setFocus($event)">
           <ng-container *ngComponentOutlet="getSectionContent(); injector: objectInjector;"></ng-container>
         </div>
       </ng-template>

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;
   }
 }

src/assets/i18n/en.json5

@@ -1982,6 +1982,8 @@
 
   "info.coar-notify.breadcrumbs": "Notify Support",
 
+  "submission.sections.notify.info": "The selected service is compatible with the item according to its current status. {{ service.name }}: {{ service.description }}",
+
   "info.feedback.head": "Feedback",
 
   "info.feedback.title": "Feedback",