skills sync

SAP-samples · Nov 29, 2023 · dfb5447 · dfb5447
1 parent c612c41
commit dfb5447
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git a/workbench/frontend/src/app/common/components/resource-query/resource-query.component.html b/workbench/frontend/src/app/common/components/resource-query/resource-query.component.html
@@ -1,10 +1,22 @@
 <div style="display: flex;">
-  <div style="width: 30%;">
+  <div style="width: 30%; margin-right: 24px;">
     <h2>Resources: {{ (resources$ | async)?.length }}</h2>
+    <div style="display: inline-flex; flex-direction: row; align-items: center;">
+
+    <h3 *ngIf="(selectedSkills$ | async)?.length > 0" style="white-space: nowrap; font-weight: bold;">Selected Skills:</h3>
+
+    <mat-chip-list style="margin-left: 16px; margin-bottom: 20px;">
+      <mat-chip *ngFor="let skill of (selectedSkills$ | async)" [removable]="true" (removed)="removeSkill(skill)">
+        {{ skill }}
+        <mat-icon matChipRemove style="margin-left: 4px;">close</mat-icon>
+      </mat-chip>
+    </mat-chip-list>
+    </div>
+
     <mat-chip-list style="margin-bottom: 20px;">
-      <mat-chip *ngFor="let resource of (resources$ | async)" [removable]="true" (removed)="remove(resource)">
-        <mat-icon matChipRemove>delete</mat-icon>
+      <mat-chip style="white-space: nowrap;" *ngFor="let resource of (resources$ | async)" [removable]="true" (removed)="remove(resource)">
         [{{ resource.id | slice:0:6 }}] {{ resource.firstName }} {{ resource.lastName }}
+        <mat-icon matChipRemove>close</mat-icon>
       </mat-chip>
     </mat-chip-list>
   </div>

diff --git a/workbench/frontend/src/app/common/components/resource-query/resource-query.component.ts b/workbench/frontend/src/app/common/components/resource-query/resource-query.component.ts
@@ -2,8 +2,8 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { BehaviorSubject, merge, of, Subject } from 'rxjs';
-import { catchError, mergeMap, take, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
+import { BehaviorSubject, merge, Observable, of, Subject } from 'rxjs';
+import { catchError, map, mergeMap, take, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
 import { QueryService } from '../../services/query.service';
 import { SharedSkillsService } from '../../services/shared-skill.service';
 
@@ -56,7 +56,7 @@ export class ResourceQueryComponent implements OnInit, OnDestroy {
   public allSkills = [];
   public skillResourcesMap: Map<string, Set<any>> = new Map();
   public allResources: any[] = [];
-  public selectedSkills: string[] = [];
+  public selectedSkills$ = new BehaviorSubject<string[]>([]);
 
   public selectedTemplate = 'default';
   public crowdChecked = false;
@@ -89,7 +89,6 @@ export class ResourceQueryComponent implements OnInit, OnDestroy {
   public ngOnInit(): void {
     this.form = this.fb.group({
       query: [TEMPLATES.default],
-      selectedSkills: []
     });
 
     this.svc.queryResourceSkills(TEMPLATES.default).subscribe(resources => {
@@ -110,12 +109,7 @@ export class ResourceQueryComponent implements OnInit, OnDestroy {
       this.allSkills = Array.from(this.skillResourcesMap.keys());
     });
 
-    this.form.get('selectedSkills').valueChanges.pipe(
-      takeUntil(this.onDestroy$)
-    ).subscribe(selectedSkills => {
-      this.selectedSkills = selectedSkills;
-      this.updateResources(this.selectedSkills);
-    });
+    this.selectedSkills$ = this.sharedSkillsService.selectedSkills$;
 
     this.sharedSkillsService.selectedSkills$.subscribe((selectedSkills) => {
       this.updateResources(selectedSkills);
@@ -168,6 +162,17 @@ export class ResourceQueryComponent implements OnInit, OnDestroy {
     ).subscribe();
   }
 
+
+  public removeSkill(skill: string): void {
+    this.sharedSkillsService.selectedSkills$.pipe(
+      take(1), // Take only one emission to avoid unnecessary subscriptions
+      map((selectedSkills) => selectedSkills.filter((s) => s !== skill))
+    ).subscribe((updatedSkills) => {
+      this.selectedSkills$.next(updatedSkills);
+    });
+    this.selectedSkills$ = this.sharedSkillsService.selectedSkills$;
+  }
+
   public doQuery(): void {
     this.onQuery.next();
   }

diff --git a/workbench/frontend/src/app/common/services/shared-skill.service.ts b/workbench/frontend/src/app/common/services/shared-skill.service.ts
@@ -7,7 +7,7 @@ import { BehaviorSubject } from 'rxjs';
 })
 export class SharedSkillsService {
   private selectedSkillsSubject = new BehaviorSubject<string[]>([]);
-  selectedSkills$ = this.selectedSkillsSubject.asObservable();
+  selectedSkills$ = this.selectedSkillsSubject;
 
   updateSelectedSkills(selectedSkills: string[]): void {
     this.selectedSkillsSubject.next(selectedSkills);

diff --git a/workbench/frontend/src/app/slot-booking/components/job-builder/job-builder.component.ts b/workbench/frontend/src/app/slot-booking/components/job-builder/job-builder.component.ts
@@ -121,6 +121,10 @@ export class JobBuilderComponent implements OnInit, OnDestroy, AfterContentInit
       takeUntil(this.onDestroy$)
     ).subscribe();
 
+    this.sharedSkillsService.selectedSkills$.subscribe(() =>
+      this.selectedMandatorySkills$ = this.sharedSkillsService.selectedSkills$
+    );
+
     this.selectedOptionalSkills$.pipe(
       tap((list) => this.form.patchValue({ optionalSkills: list })),
       takeUntil(this.onDestroy$)