PM-589 Opportunity table fixes

Author: himaniraghav3

src/apps/copilots/src/pages/copilot-opportunity-list/index.tsx

@@ -13,14 +13,20 @@ import {
 import { CopilotOpportunity } from '../../models/CopilotOpportunity'
 import { copilotRoutesMap } from '../../copilots.routes'
 import { CopilotOpportunitiesResponse, useCopilotOpportunities } from '../../services/copilot-opportunities'
+import { ProjectTypeLabels } from '../../constants'
 
 import styles from './styles.module.scss'
 
 const tableColumns: TableColumn<CopilotOpportunity>[] = [
     {
         label: 'Title',
         propertyName: 'projectName',
-        type: 'text',
+        renderer: (copilotOpportunity: CopilotOpportunity) => (
+            <div>
+                {copilotOpportunity.projectName}
+            </div>
+        ),
+        type: 'element',
     },
     {
         label: 'Status',
@@ -33,6 +39,7 @@ const tableColumns: TableColumn<CopilotOpportunity>[] = [
         type: 'element',
     },
     {
+        isSortable: false,
         label: 'Skills Required',
         propertyName: 'skills',
         renderer: (copilotOpportunity: CopilotOpportunity) => (
@@ -49,7 +56,12 @@ const tableColumns: TableColumn<CopilotOpportunity>[] = [
     {
         label: 'Type',
         propertyName: 'type',
-        type: 'text',
+        renderer: (copilotOpportunity: CopilotOpportunity) => (
+            <div className={styles.type}>
+                {ProjectTypeLabels[copilotOpportunity.projectType]}
+            </div>
+        ),
+        type: 'element',
     },
     {
         label: 'Starting Date',
@@ -80,7 +92,10 @@ const CopilotOpportunityList: FC<{}> = () => {
         data: opportunities, isValidating, size, setSize,
     }: CopilotOpportunitiesResponse = useCopilotOpportunities()
 
-    const tableData = useMemo(() => opportunities, [opportunities])
+    const tableData = useMemo(() => opportunities.map(opportunity => ({
+        ...opportunity,
+        type: ProjectTypeLabels[opportunity.projectType] ?? '',
+    })), [opportunities])
 
     function loadMore(): void {
         setSize(size + 1)
@@ -103,6 +118,7 @@ const CopilotOpportunityList: FC<{}> = () => {
                 moreToLoad={isValidating || opportunities.length > 0}
                 onLoadMoreClick={loadMore}
                 onRowClick={handleRowClick}
+                removeDefaultSort
             />
             {opportunitiesLoading && (
                 <LoadingSpinner overlay />

src/apps/copilots/src/pages/copilot-opportunity-list/styles.module.scss

@@ -3,6 +3,8 @@
 .skillsContainer {
     display: flex;
     flex-wrap: wrap;
+    overflow-x: auto;
+    overflow-y: hidden;
     gap: 8px;
 }
 
@@ -26,4 +28,8 @@
 
 .activeStatus {
     color: green;
-}
+}
+
+.type {
+    white-space: nowrap;
+}

src/libs/ui/lib/components/table/Table.tsx

@@ -102,6 +102,11 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
 
         function toggleSort(fieldName: string): void {
 
+            const col = props.columns.find(c => c.propertyName === fieldName)
+
+            // if sortable is false, we return
+            if (!col?.isSortable === false) return
+
             // if we don't have anything to sort by, we shouldn't be here
             if (!sort && !props.removeDefaultSort) {
                 return
@@ -129,7 +134,7 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
 
         const headerRow: Array<JSX.Element> = displayColumns
             .map((col, index) => {
-                const isSortable: boolean = !!col.propertyName
+                const isSortable: boolean = !!col.propertyName && col.isSortable !== false
                 const isCurrentlySorted: boolean = isSortable && col.propertyName === sort?.fieldName
                 const colorClass: string = isCurrentlySorted ? 'black-100' : 'black-60'
                 const sortableClass: string | undefined = isSortable ? styles.sortable : undefined
@@ -151,7 +156,7 @@ const Table: <T extends { [propertyName: string]: any }>(props: TableProps<T>) =
                                     </Tooltip>
                                 </div>
                             )}
-                            {!props.disableSorting && (
+                            {!props.disableSorting && isSortable && (
                                 <TableSort
                                     iconClass={colorClass}
                                     isCurrentlySorted={isCurrentlySorted}

src/libs/ui/lib/components/table/table-column.model.ts

@@ -11,4 +11,5 @@ export interface TableColumn<T> {
     readonly isExpand?: boolean
     readonly colSpan?: number
     readonly type: TableCellType
+    readonly isSortable?: boolean
 }

src/libs/ui/lib/components/table/table-functions/table.functions.ts

@@ -53,11 +53,11 @@ export function getSorted<T extends { [propertyName: string]: any }>(
 
     if (sortColumn.type === 'date') {
         return sortedData
-            .sort((a: T, b: T) => sortNumbers(
-                (a[sort.fieldName] as Date).getTime(),
-                (b[sort.fieldName] as Date).getTime(),
-                sort.direction,
-            ))
+            .sort((a: T, b: T) => {
+                const aDate = new Date(a[sort.fieldName])
+                const bDate = new Date(b[sort.fieldName])
+                return sortNumbers(aDate.getTime(), bDate.getTime(), sort.direction)
+            })
     }
 
     return sortedData