UI cleanup and better tagging of terms that were searched

Author: jmgasper

src/apps/talent-search/src/assets/check-mark.svg

@@ -4,6 +4,7 @@ export default interface MemberEmsiSkill {
     emsiId:string
     name:string;
     category:string;
+    isSearched: boolean;
 }
 
 

src/apps/talent-search/src/assets/checkpoint-small.svg

@@ -11,14 +11,14 @@ import codes from "country-calling-code";
 
 export const memberColumns: ReadonlyArray<TableColumn<Member>> = [
     {
-        label: 'Handle',
+        label: 'Wins',
         propertyName: 'numberOfChallengesWon',
-        type: 'element',
+        type: 'numberElement',
         renderer: MemberHandleRenderer,
+        defaultSortDirection: 'desc'
     },
     {
         label: 'Skills',
-        propertyName: 'emsiSkills',
         type: 'element',
         renderer: MemberSkillsRenderer,
     }
@@ -67,14 +67,28 @@ export default class SkillSearchResult extends Component<SkillSearchResultsProps
                 if(response.length==PER_PAGE){
                     this.state.hasMore = true
                 }
-
+                let filter = this.props.skillsFilter;
                 response.forEach(function (value){
                     const code = codes.find((i) => i.isoCode3 === value.competitionCountryCode);
 
                     if (code) {
                       value.country = code.country;
                     }
+
+                    //This isn't great TODO: make this cleaner
+                    value.emsiSkills.forEach(function (emsiSkill){
+                        emsiSkill.isSearched = false;
+                        for(let i=0; i<filter.length; i++){
+                            if(emsiSkill.emsiId == filter[i].emsiId){
+                                emsiSkill.isSearched = true;
+                            }
+                        }
+                    })
+                    //Move the values that were searched to the front of the skills list for display in the UI
+                    value.emsiSkills.sort((a, b) => a.isSearched ? -1 : 0)
                 })
+                
+
             }
             if(this.state.page==1){
                 this.state.searchResults = response;

src/apps/talent-search/src/assets/verified-icon-white.svg

@@ -5,6 +5,7 @@
   display: grid;
   grid-template-rows: repeat(auto-fill, 1fr);
   grid-template-columns: 72px 250px;
+  width:100px;
   gap: 8px;
 }
 

src/apps/talent-search/src/lib/models/MemberEmsiSkill.ts

@@ -1,8 +1,7 @@
 @import "@libs/ui/styles/includes";
 @import "@libs/ui/styles/variables";
 
-.self-reported{
-    flex: 0 0 auto;
+.skill{
     font-family: $font-barlow; 
     font-weight: $font-weight-medium;
     background-color: rgb(34, 107, 116);
@@ -14,25 +13,15 @@
     font-size: 14px;
     line-height: 16px;
     cursor: pointer;
-    position: inherit;
+    position: relative;
+    
 }
-
-.challenge-win{
-    flex: 0 0 auto;
-    font-family: $font-barlow; 
-    font-weight: $font-weight-medium;
-    background-color: rgb(106, 52, 155);
-    color: #fff;
-    margin-top: 4px;
-    margin-right: 4px;
-    border-radius: 5px;
+.challengeWin{
     padding: 4px 6px 4px 26px;
-    font-size: 14px;
-    line-height: 18px;
-    cursor: pointer;
-    position: inherit;
 }
-
+.isSearched{
+    background-color: rgb(106, 52, 155);
+}
 
 .before{
   position: absolute;
@@ -42,7 +31,4 @@
   margin:0px;
   width: 16px;
   height: 16px;
-  border-radius:8px;
-  border: 1px #fff solid;
-
 }

src/apps/talent-search/src/routes/talent-search/components/skill-search-results/SkillSearchResults.tsx

@@ -2,28 +2,32 @@
 import { Component } from 'react'
 import MemberEmsiSkill from '@talentSearch/lib/models/MemberEmsiSkill'
 import styles from './SkillTag.module.scss'
-import { ReactComponent as IconCheck } from '@talentSearch/assets/check-mark.svg';
+import { ReactComponent as IconCheck } from '@talentSearch/assets/verified-icon-white.svg';
 
 type SkillTagProps = {
-    skill:MemberEmsiSkill
+    skill: MemberEmsiSkill
 }
 
 export default class SkillTag extends Component<SkillTagProps>{
 
     render() {
-        let style = "self-reported"
+        let style = styles["skill"]
+
+        if(this.props.skill.isSearched){
+            style = style + " " + styles["isSearched"]
+        }
         if(this.props.skill.skillSources.includes("ChallengeWin")){
-            style = "challenge-win"
+            style = style + " " + styles["challengeWin"]
         }
         return(
             <div
                 key={this.props.skill.emsiId}
                 data-id={this.props.skill.emsiId}
                 tabIndex={0}
-                className={styles[style]}
+                className={style}
             >
                 {this.props.skill.skillSources.includes("ChallengeWin") ?
-                    <i><IconCheck className={styles["before"]}/></i> : ''}
+                    <IconCheck className={styles["before"]}/>: ''}
                 {this.props.skill.name}
             </div>
         )