Merge pull request #1516 from topcoder-platform/PM-4198_customer-portal-completed-profiles-report-updates

PM-4198 display all skills

Author: vas3a

src/apps/customer-portal/src/pages/profile-completion/ProfileCompletionPage/ProfileCompletionPage.module.scss

@@ -169,3 +169,26 @@
     color: $black-80;
     white-space: nowrap;
 }
+
+.moreIndicator {
+    display: inline-block;
+    background: $black-5;
+    border: 1px solid $black-20;
+    border-radius: $sp-1;
+    padding: $sp-1 $sp-2;
+    font-size: 12px;
+    line-height: 16px;
+    color: $black-80;
+    font-weight: 700;
+    min-width: 24px;
+    text-align: center;
+    cursor: help;
+}
+
+.link {
+    display: flex;
+    gap: $sp-1;
+    text-decoration: underline;
+    color: $link-blue;
+    cursor: pointer;
+}

src/apps/customer-portal/src/pages/profile-completion/ProfileCompletionPage/ProfileCompletionPage.tsx

@@ -116,15 +116,23 @@ export const ProfileCompletionPage: FC = () => {
     const displayedRows = useMemo(() => profiles
         .map(profile => {
             const userSkills = profile.userId ? (memberSkills.get(profile.userId) || []) : []
-            const principalSkills = userSkills
-                .filter(skill => skill.displayMode?.name === UserSkillDisplayModes.principal)
-                .slice(0, 5)
+
+            // Prioritize principal skills, then add additional skills
+            const allSkillsByPriority = [
+                ...userSkills.filter(skill => skill.displayMode?.name === UserSkillDisplayModes.principal),
+                ...userSkills.filter(skill => skill.displayMode?.name !== UserSkillDisplayModes.principal),
+            ]
+
+            const displayedSkills = allSkillsByPriority.slice(0, 5)
+            const additionalSkillsCount = Math.max(0, allSkillsByPriority.length - 5)
 
             return {
                 ...profile,
+                additionalSkillsCount,
                 countryLabel: profile.countryCode
                     ? countryMap.get(profile.countryCode) || profile.countryName || profile.countryCode
                     : profile.countryName || '-',
+                displayedSkills,
                 fullName: [profile.firstName, profile.lastName].filter(Boolean)
                     .join(' ')
                     .trim(),
@@ -133,7 +141,6 @@ export const ProfileCompletionPage: FC = () => {
                     : profile.countryName]
                     .filter(Boolean)
                     .join(', '),
-                principalSkills,
             }
         })
         .sort((a, b) => a.handle.localeCompare(b.handle)), [profiles, countryMap, memberSkills])
@@ -195,8 +202,7 @@ export const ProfileCompletionPage: FC = () => {
                                     <th>Handle</th>
                                     <th>Location</th>
                                     <th>Skills</th>
-                                    <th>Principal Skills</th>
-                                    <th>Go to profile</th>
+                                    <th>{' '}</th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -224,22 +230,30 @@ export const ProfileCompletionPage: FC = () => {
                                             </a>
                                         </td>
                                         <td>{profile.locationLabel || profile.countryLabel}</td>
-                                        <td>{profile.skillCount ?? '-'}</td>
                                         <td>
-                                            {profile.principalSkills && profile.principalSkills.length > 0 ? (
+                                            {profile.displayedSkills && profile.displayedSkills.length > 0 ? (
                                                 <div className={styles.skillsList}>
-                                                    {profile.principalSkills.map(skill => (
+                                                    {profile.displayedSkills.map(skill => (
                                                         <span key={skill.id} className={styles.skillTag}>
                                                             {skill.name}
                                                         </span>
                                                     ))}
+                                                    {profile.additionalSkillsCount > 0 && (
+                                                        <span className={styles.moreIndicator}>
+                                                            +
+                                                            {profile.additionalSkillsCount}
+                                                            {' '}
+                                                            skills
+                                                        </span>
+                                                    )}
                                                 </div>
                                             ) : (
                                                 '-'
                                             )}
                                         </td>
                                         <td>
                                             <a
+                                                className={styles.link}
                                                 href={`${EnvironmentConfig.USER_PROFILE_URL}/${profile.handle}`}
                                                 target='_blank'
                                                 rel='noreferrer noopener'