UI changes

workbench/frontend/src/app/common/components/resource-query/resource-query.component.html

@@ -1,8 +1,6 @@
-<h2>resources: {{ (resources$ | async)?.length }}</h2>
-
-
 <div style="display: flex;">
   <div style="width: 30%;">
+    <h2>Resources: {{ (resources$ | async)?.length }}</h2>
     <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>
@@ -11,12 +9,19 @@ <h2>resources: {{ (resources$ | async)?.length }}</h2>
     </mat-chip-list>
   </div>
   <div style="width: 70%;">
+    <h2>Query Templates:</h2>
 
-    <button mat-raised-button (click)="doQuery()" color="primary" class="margin-10">run query</button>
-    query-templates:
-    <button mat-button (click)="applyTmpl('default')" class="margin-10">default</button>
-    <button mat-button (click)="applyTmpl('skill')" class="margin-10">by skill</button>
-    <button mat-button (click)="applyTmpl('region')" class="margin-10">by region</button>
+    <div class="tab-container">
+      <button mat-button (click)="applyTmpl('default')" [ngClass]="{'selected': selectedTemplate === 'default'}"
+              class="margin-10">Default
+      </button>
+      <button mat-button (click)="applyTmpl('skill')" [ngClass]="{'selected': selectedTemplate === 'skill'}"
+              class="margin-10">By Skill
+      </button>
+      <button mat-button (click)="applyTmpl('region')" [ngClass]="{'selected': selectedTemplate === 'region'}"
+              class="margin-10">By Region
+      </button>
+    </div>
 
 
     <div style="height: 5px; margin-top: 15px;">
@@ -30,16 +35,14 @@ <h2>resources: {{ (resources$ | async)?.length }}</h2>
 
     <hr style="margin-top: 16px; margin-bottom: 16px; border: 1px solid #ddd;">
 
-    <mat-expansion-panel>
-
-      <mat-expansion-panel-header>Filter</mat-expansion-panel-header>
+    <div style="display: flex; justify-content: space-between; align-items: start; margin-top: 15px;">
 
       <div style="display: inline-flex; flex-wrap: wrap; margin-bottom: 16px;">
         <div style="display: flex; flex-direction: column;">
           <mat-checkbox>Crowd</mat-checkbox>
           <mat-checkbox>Internal</mat-checkbox>
         </div>
-        <form [formGroup]="form">
+        <!--<form [formGroup]="form">
           <mat-form-field style="margin-left: 24px;">
             <mat-label>Skills</mat-label>
 
@@ -53,10 +56,11 @@ <h2>resources: {{ (resources$ | async)?.length }}</h2>
               </mat-option>
             </mat-select>
           </mat-form-field>
-        </form>
+        </form>-->
       </div>
 
-    </mat-expansion-panel>
+      <button mat-raised-button (click)="doQuery()" style="" color="primary" class="margin-10">run query</button>
+    </div>
 
 
   </div>

workbench/frontend/src/app/common/components/resource-query/resource-query.component.scss

@@ -0,0 +1,17 @@
+.selected {
+  background-color: #e0e0e0; /* Greyish color for selected tab */
+  color: #333; /* Adjust text color for better contrast */
+  border-bottom: 3px solid #ccc; /* Border color for selected tab */
+}
+
+.mat-button {
+  transition: background-color 0.3s; /* Add a smooth transition for background color */
+}
+
+.mat-button:not(.selected):hover {
+  background-color: #e0e0e0; /* Change background color on hover for non-selected buttons */
+}
+
+.selected:hover {
+  background-color: #e0e0e0; /* Change background color on hover for non-selected buttons */
+}

workbench/frontend/src/app/common/components/resource-query/resource-query.component.ts

@@ -58,6 +58,9 @@ export class ResourceQueryComponent implements OnInit, OnDestroy {
   public allResources: any[] = [];
   public selectedSkills: string[] = [];
 
+  public selectedTemplate = 'default';
+
+
   @Input() selectedMandatorySkills: string[];
   @Output() change = new EventEmitter<string[]>();
 
@@ -87,7 +90,7 @@ export class ResourceQueryComponent implements OnInit, OnDestroy {
       selectedSkills: []
     });
 
-    this.svc.queryResource(TEMPLATES.default).subscribe(resources => {
+    this.svc.queryResourceSkills(TEMPLATES.default).subscribe(resources => {
       this.allResources = resources;
       this.skillResourcesMap.clear();
 
@@ -120,7 +123,7 @@ export class ResourceQueryComponent implements OnInit, OnDestroy {
       withLatestFrom(merge(of(this.form.value), this.form.valueChanges)),
       mergeMap(([_, form]) => {
         this.isLoading$.next(true);
-        return this.svc.queryResource(form.query).pipe(
+        return this.svc.queryResourceSkills(form.query).pipe(
           catchError(error => {
             console.error(error);
 
@@ -160,6 +163,7 @@ export class ResourceQueryComponent implements OnInit, OnDestroy {
   }
 
   public applyTmpl(t: keyof typeof TEMPLATES): void {
+    this.selectedTemplate = t;
     this.form.patchValue({ query: TEMPLATES[t] });
   }
 

workbench/frontend/src/app/common/services/query.service.ts

@@ -110,8 +110,52 @@ export class QueryService {
     );
   }
 
+  public queryResourceSkills<list extends QueryResponse<item>, item extends {
+    id: string,
+    firstName: string,
+    lastName: string
+  }>(query: string): Observable<any> {
+    return combineLatest([
+      this._query<list, item>(query),
+      this._query<QueryResponse<TagObj>, TagObj>(`SELECT tag.id as id, tag.name as name
+                                     FROM Tag tag
+                                     WHERE tag.inactive = false`),
+      this._query<QueryResponse<SkillObj>, SkillObj>(`SELECT skill.id        as id,
+                                                skill.tag       as tag,
+                                                skill.person    as person,
+                                                skill.startDate as startDate,
+                                                skill.endDate   as endDate
+                                         FROM Skill skill
+                                         WHERE skill.inactive = false`)
+    ])
+      .pipe(
+        map(([resources, tags, skills]) => {
+          const tagMap = tags.data.reduce((m, { id, name }) => m.set(id, name), new Map<string, string>());
+          const skillMap = skills.data.reduce((m, skill) => {
+            const currentItem = {
+              name: (tagMap.get(skill.tag) || skill.tag),
+              start: skill.startDate === 'null' ? null : skill.startDate,
+              end: skill.endDate === 'null' ? null : skill.endDate
+            };
+            if (m.has(skill.person)) {
+              m.get(skill.person)?.push(currentItem);
+            } else {
+              m.set(skill.person, [currentItem]);
+            }
+            return m;
+          }, new Map<string, { name: string, start: string, end: string }[]>());
+
+          return resources.data.map(it => ({
+            ...it,
+            skills: skillMap.has(it.id) ? skillMap.get(it.id).sort((a, b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0)) : []
+          }));
+        }),
+        tap((currentList) => this.addToCache('resource', currentList))
+      );
+  }
+
 
-  public queryResource<list extends QueryResponse<item>, item extends {
+  public queryResourceSkills_new<list extends QueryResponse<item>, item extends {
     id: string,
     firstName: string,
     lastName: string,