initial commit

frontend/src/components/controls/Icon.tsx

@@ -123,3 +123,5 @@ export const EmailedIcon = ({...props}) => (
     <Icon fa="fas fa-check fa-stack-2x" size={1} color="green" />
   </Icon>
 );
+
+export const SortIcon = ({...props}) => <Icon className="tst-sort" fa="fa fa-sort" {...props} />;

frontend/src/components/controls/table/ListHeader.tsx

@@ -1,5 +1,6 @@
 import {t} from '../../utils';
 import {IFeature} from '../feature/feature-models';
+import { SortIcon } from '../Icon';
 
 
 type ListHeaderProps<TModel> = {
@@ -15,6 +16,7 @@ export const ListHeader = ({feature}: ListHeaderProps<any>) => {
         {feature.list.rows.cells.map(col => {
           let header: string = '';
           let width: string | undefined | number;
+          let addSort: boolean = false;
           if (!col.header) {
             header = feature.trans.props[col.key];
           } else if (typeof col.header === 'string') {
@@ -24,9 +26,14 @@ export const ListHeader = ({feature}: ListHeaderProps<any>) => {
             width = col.header.width;
           }
 
+          if(col.sort) {
+            addSort = true;
+          }
+
           return (
             <th key={col.key} style={{width}}>
               {header ? t(header) : <>&nbsp;</>}
+              {addSort ? <><SortIcon/></> : <>&nbsp;</>}
             </th>
           );
         })}

frontend/src/components/controls/table/ListHeaderCell.tsx

@@ -0,0 +1,10 @@
+export const ListHeaderCell = () => {
+  const [hovered, eventHandlers] = useHover();
+
+  return (
+    <th key={col.key} style={{width}} {...eventHandlers}>
+      {header ? t(header) : <>&nbsp;</>}
+      {addSort ? <><SortIcon/></> : <>&nbsp;</>}
+    </th>
+  )
+}

frontend/src/components/controls/table/table-models.ts

@@ -86,6 +86,8 @@ export interface IListCell<TModel> {
   // BUG: GroupedInvoiceTable footer is wrong
   /** Will span until next cell with a footer */
   footer?: string | ((models: TModel[]) => string | React.ReactNode);
+
+  sort?: StringFn<TModel>
 }
 
 

frontend/src/components/hooks/useHover.tsx

@@ -0,0 +1,12 @@
+const { useState, useMemo } = React;
+
+const useHover = () => {
+  const [hovered, setHovered] = useState<boolean>();
+
+  const eventHandlers = useMemo(() => ({
+    onMouseOver() { setHovered(true); },
+    onMouseOut() { setHovered(false); }
+  }), []);
+
+  return {hovered, eventHandlers};
+}

frontend/src/components/project/models/getProjectFeature.tsx

@@ -115,10 +115,12 @@ const projectListConfig = (config: ProjectFeatureBuilderConfig): IList<FullProje
     header: 'project.consultant',
     value: p => <ConsultantLinkWithModal consultant={p.consultant} showType />,
     footer: (models: FullProjectModel[]) => <ConsultantCountFooter consultants={models.map(x => x.consultant)} />,
+    sort: p => p.consultantName
   }, {
     key: 'startDate',
     header: 'project.startDate',
     value: p => formatDate(p.details.startDate),
+    sort: undefined
   }, {
     key: 'endDate',
     header: 'project.endDate',