Skip to content

Commit b528a8e

Browse files
emishraemishra
authored
Merge pull request #10 from microsoft/users/esmishra/summary-table-sort
Sorting data in table view
2 parents aef9e27 + e038546 commit b528a8e

File tree

1 file changed

+85
-42
lines changed

1 file changed

+85
-42
lines changed

‎source/reactjs/src/Components/Summary/SummaryTable/SummaryTableColumns.tsx‎

Lines changed: 85 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@ function SummaryTableColumns(props: any): React.ReactElement {
7474
Context as React.Context<IEmployeeExperienceContext>
7575
);
7676

77-
const isLoadingSummary = useSelector(getIsLoadingSummary);
7877
const isBulkSelected = useSelector(getIsBulkSelected);
7978
const selectedApprovalRecords = useSelector(getSelectedApprovalRecords);
8079
const readRequests = useSelector(getReadRequests);
@@ -107,9 +106,8 @@ function SummaryTableColumns(props: any): React.ReactElement {
107106
const [isSelectAllConfigured, setIsSelectAllConfigured] = React.useState(false);
108107
const [savedSelection, setSavedSelection] = React.useState([]);
109108
const [numFilters, setNumFilters] = React.useState(0);
110-
const [initialSortColumn] = React.useState(
111-
isPullTenantSelected ? tableColumns?.find((col) => col.isDefaultSortColumn)?.field : 'SubmittedDate'
112-
);
109+
const [sortedColumn, setSortedColumn] = React.useState('');
110+
const [isSortedDescending, setIsSortedDescending] = React.useState(false);
113111

114112
const documentNumberPrefix = filteredTenantInfo?.documentNumberPrefix;
115113
const isSingleGroupShown = props?.isSingleGroupShown ?? false;
@@ -474,15 +472,16 @@ function SummaryTableColumns(props: any): React.ReactElement {
474472
const allColumns: IColumn[] = [
475473
{
476474
key: 'IsRead',
477-
type: 'custom',
478475
name: 'IsRead',
479476
ariaLabel: 'Status',
480477
iconName: 'Page',
481478
className: fileIconCell,
482479
isIconOnly: true,
483480
isResizable: false,
481+
isSorted: sortedColumn === 'isRead',
482+
isSortedDescending: sortedColumn === 'isRead' ? isSortedDescending : true,
484483
fieldName: SummaryTableFieldNames.IsRead,
485-
minColumnWidth: 45,
484+
minWidth: 45,
486485
maxWidth: 60,
487486
onRender: (item: any) => {
488487
let lastFailedLocal = item.LastFailed;
@@ -502,12 +501,14 @@ function SummaryTableColumns(props: any): React.ReactElement {
502501
{
503502
key: 'ApprovalIdentifier',
504503
name: 'Document Number',
505-
type: 'number',
506504
fieldName: SummaryTableFieldNames.ApprovalIdentifier,
507505
isResizable: true,
506+
isSorted: sortedColumn === 'ApprovalIdentifier',
507+
isSortedDescending: sortedColumn === 'ApprovalIdentifier' ? isSortedDescending : true,
508508
maxWidth: 200,
509509
invertAlignment: true,
510510
ariaLabel: 'Document Number',
511+
onColumnClick: onSort,
511512
onRender: (item: any) => {
512513
const isOpen = getIdentifyingKey(item) === displayDocumentNumber;
513514
return (
@@ -544,12 +545,14 @@ function SummaryTableColumns(props: any): React.ReactElement {
544545
{
545546
key: 'SubmittedDate',
546547
name: 'Submitted Date',
547-
type: 'custom',
548548
fieldName: SummaryTableFieldNames.SubmittedDate,
549549
isResizable: true,
550-
minColumnWidth: ColSize.Medium,
550+
isSorted: sortedColumn === 'SubmittedDate',
551+
isSortedDescending: sortedColumn === 'SubmittedDate' ? isSortedDescending : true,
552+
minWidth: ColSize.Medium,
551553
maxWidth: ColSize.Medium,
552554
ariaLabel: 'Submitted Date',
555+
onColumnClick: onSort,
553556
onRender: (item: any) => {
554557
return (
555558
<Stack horizontal>
@@ -563,12 +566,14 @@ function SummaryTableColumns(props: any): React.ReactElement {
563566
{
564567
key: 'Submitter',
565568
name: 'Submitter',
566-
type: 'custom',
567569
fieldName: SummaryTableFieldNames.Submitter,
568570
isResizable: true,
569-
minColumnWidth: ColSize.Large,
571+
isSorted: sortedColumn === 'Submitter',
572+
isSortedDescending: sortedColumn === 'Submitter' ? isSortedDescending : true,
573+
minWidth: ColSize.Large,
570574
maxWidth: ColSize.XL,
571575
ariaLabel: 'Submitter',
576+
onColumnClick: onSort,
572577
onRender: (item: any) => {
573578
if (item['Submitter']) {
574579
return (
@@ -606,12 +611,14 @@ function SummaryTableColumns(props: any): React.ReactElement {
606611
{
607612
key: 'Title',
608613
name: 'Title',
609-
type: 'custom',
610614
fieldName: SummaryTableFieldNames.Title,
611615
isResizable: true,
612-
minColumnWidth: 120,
616+
isSorted: sortedColumn === 'Title',
617+
isSortedDescending: sortedColumn === 'Title' ? isSortedDescending : true,
618+
minWidth: 120,
613619
maxWidth: 200,
614620
ariaLabel: 'Title',
621+
onColumnClick: onSort,
615622
onRender: (item: any) => {
616623
if (item['Title']) {
617624
return (
@@ -625,13 +632,14 @@ function SummaryTableColumns(props: any): React.ReactElement {
625632
{
626633
key: 'UnitValue',
627634
name: 'Unit Value',
628-
type: 'number',
629635
fieldName: SummaryTableFieldNames.UnitValue,
630636
isResizable: true,
631-
minColumnWidth: ColSize.Large,
637+
isSorted: sortedColumn === 'UnitValue',
638+
isSortedDescending: sortedColumn === 'UnitValue' ? isSortedDescending : true,
639+
minWidth: ColSize.Large,
632640
maxWidth: ColSize.Large,
633641
ariaLabel: 'Unit Value',
634-
invertAlignment: true,
642+
onColumnClick: onSort,
635643
onRender: (item: any) => {
636644
return (
637645
<Stack horizontal>
@@ -643,9 +651,10 @@ function SummaryTableColumns(props: any): React.ReactElement {
643651
{
644652
key: 'CompanyCode',
645653
name: 'Company Code',
646-
type: 'custom',
647654
fieldName: SummaryTableFieldNames.CompanyCode,
648655
isResizable: true,
656+
isSorted: sortedColumn === 'CompanyCode',
657+
isSortedDescending: sortedColumn === 'CompanyCode' ? isSortedDescending : true,
649658
maxWidth: 200,
650659
ariaLabel: 'Company Code',
651660
onRender: (item: any) => {
@@ -659,11 +668,13 @@ function SummaryTableColumns(props: any): React.ReactElement {
659668
{
660669
key: 'CustomAttribute',
661670
name: 'Additional Information',
662-
type: 'custom',
663671
fieldName: SummaryTableFieldNames.CustomAttribute,
664672
isResizable: true,
665-
minColumnWidth: 120,
673+
isSorted: sortedColumn === 'CustomAttribute',
674+
isSortedDescending: sortedColumn === 'CustomAttribute' ? isSortedDescending : true,
675+
minWidth: 120,
666676
maxWidth: 300,
677+
onColumnClick: onSort,
667678
ariaLabel: 'Additional Information',
668679
onRender: (item: any) => {
669680
if (item['CustomAttribute']) {
@@ -684,9 +695,10 @@ function SummaryTableColumns(props: any): React.ReactElement {
684695
ariaLabel: 'Status',
685696
iconName: 'Info',
686697
isIconOnly: true,
687-
type: 'custom',
688698
fieldName: SummaryTableFieldNames.allowInBulkApproval,
689-
minColumnWidth: 25,
699+
isSorted: sortedColumn === 'allowInBulkApproval',
700+
isSortedDescending: sortedColumn === 'allowInBulkApproval' ? isSortedDescending : true,
701+
minWidth: 25,
690702
maxWidth: 25,
691703
onRender: (item: any) => {
692704
let allowed = item['allowInBulkApproval'] ?? true;
@@ -710,10 +722,11 @@ function SummaryTableColumns(props: any): React.ReactElement {
710722
{
711723
key: 'viewDetails',
712724
name: 'Details',
713-
type: 'custom',
714725
fieldName: SummaryTableFieldNames.viewDetails,
715-
minColumnWidth: ColSize.XS,
726+
minWidth: ColSize.XS,
716727
maxWidth: ColSize.XS,
728+
isSorted: sortedColumn === 'viewDetails',
729+
isSortedDescending: sortedColumn === 'viewDetails' ? isSortedDescending : true,
717730
ariaLabel: 'Details',
718731
onRender: (item: any) => {
719732
const isOpen = getIdentifyingKey(item) === displayDocumentNumber;
@@ -735,10 +748,11 @@ function SummaryTableColumns(props: any): React.ReactElement {
735748
{
736749
key: 'actionDetails',
737750
name: 'Approval Status',
738-
type: 'custom',
739751
fieldName: SummaryTableFieldNames.actionDetails,
740-
minColumnWidth: ColSize.XS,
752+
minWidth: ColSize.XS,
741753
maxWidth: ColSize.Small,
754+
isSorted: sortedColumn === 'actionDetails',
755+
isSortedDescending: sortedColumn === 'actionDetails' ? isSortedDescending : true,
742756
ariaLabel: 'Approval Status',
743757
isResizable: true,
744758
onRender: (item: any) => {
@@ -771,12 +785,14 @@ function SummaryTableColumns(props: any): React.ReactElement {
771785
{
772786
key: 'submittedForFullName',
773787
name: 'Submitted For',
774-
type: 'custom',
775788
fieldName: SummaryTableFieldNames.submittedForFullName,
776-
minColumnWidth: getColSizeforDimension(ColSize.Medium),
789+
minWidth: getColSizeforDimension(ColSize.Medium),
777790
maxWidth: dimensions.width >= breakpointMap.xxxl ? ColSize.XXL : ColSize.XL,
778791
ariaLabel: 'Submitted For',
792+
isSorted: sortedColumn === 'submittedForFullName',
793+
isSortedDescending: sortedColumn === 'submittedForFullName' ? isSortedDescending : true,
779794
isResizable: true,
795+
onColumnClick: onSort,
780796
onRender: (item: any) => {
781797
const displayText = item['submittedForFullName'] ?? '';
782798
return (
@@ -793,12 +809,14 @@ function SummaryTableColumns(props: any): React.ReactElement {
793809
{
794810
key: 'assignmentName',
795811
name: 'Assignment Name',
796-
type: 'custom',
797812
ariaLabel: 'Assignment Name',
798813
fieldName: SummaryTableFieldNames.assignmentName,
799-
minColumnWidth: getColSizeforDimension(ColSize.Large),
814+
minWidth: getColSizeforDimension(ColSize.Large),
800815
maxWidth: ColSize.XXXL,
816+
isSorted: sortedColumn === 'assignmentName',
817+
isSortedDescending: sortedColumn === 'assignmentName' ? isSortedDescending : true,
801818
isResizable: true,
819+
onColumnClick: onSort,
802820
onRender: (item: any) => {
803821
const displayText = item?.assignmentDetails?.assignmentName || '';
804822
return (
@@ -815,12 +833,14 @@ function SummaryTableColumns(props: any): React.ReactElement {
815833
{
816834
key: 'laborDate',
817835
name: 'Labor Date',
818-
type: 'custom',
819836
ariaLabel: 'Labor Date',
820837
fieldName: SummaryTableFieldNames.laborDate,
821-
minColumnWidth: ColSize.XS,
838+
minWidth: ColSize.XS,
822839
maxWidth: ColSize.Small,
840+
isSorted: sortedColumn === 'laborDate',
841+
isSortedDescending: sortedColumn === 'laborDate' ? isSortedDescending : true,
823842
isResizable: true,
843+
onColumnClick: onSort,
824844
onRender: (item: any) => {
825845
return (
826846
<Stack horizontal>
@@ -832,14 +852,16 @@ function SummaryTableColumns(props: any): React.ReactElement {
832852
},
833853
},
834854
{
835-
key: 'laborHours',
855+
key: 'displayLaborHours',
836856
name: 'Labor Duration',
837-
type: 'custom',
838857
fieldName: SummaryTableFieldNames.laborHours,
839-
minColumnWidth: ColSize.XS,
858+
minWidth: ColSize.XS,
840859
maxWidth: ColSize.Small,
841860
ariaLabel: 'Labor Duration',
861+
isSorted: sortedColumn === 'laborHours',
862+
isSortedDescending: sortedColumn === 'laborHours' ? isSortedDescending : true,
842863
isResizable: true,
864+
onColumnClick: onSort,
843865
onRender: (item: any) => {
844866
return (
845867
<Stack horizontal>
@@ -853,12 +875,14 @@ function SummaryTableColumns(props: any): React.ReactElement {
853875
{
854876
key: 'laborCategoryName',
855877
name: 'Labor Category',
856-
type: 'custom',
857878
fieldName: SummaryTableFieldNames.laborCategoryName,
858-
minColumnWidth: ColSize.Small,
879+
minWidth: ColSize.Small,
859880
ariaLabel: 'Labor Category',
881+
isSorted: sortedColumn === 'laborCategoryName',
882+
isSortedDescending: sortedColumn === 'laborCategoryName' ? isSortedDescending : true,
860883
maxWidth: ColSize.Large,
861884
isResizable: true,
885+
onColumnClick: onSort,
862886
onRender: (item: any) => {
863887
return (
864888
<TooltipHost content={item['laborCategoryName']}>
@@ -874,12 +898,14 @@ function SummaryTableColumns(props: any): React.ReactElement {
874898
{
875899
key: 'submittedByFullName',
876900
name: 'Submitted By',
877-
type: 'custom',
878901
fieldName: SummaryTableFieldNames.submittedByFullName,
879-
minColumnWidth: ColSize.Small,
902+
minWidth: ColSize.Small,
880903
maxWidth: ColSize.Large,
881904
ariaLabel: 'Submitted By',
905+
isSorted: sortedColumn === 'submittedByFullName',
906+
isSortedDescending: sortedColumn === 'submittedByFullName' ? isSortedDescending : true,
882907
isResizable: true,
908+
onColumnClick: onSort,
883909
onRender: (item: any) => {
884910
const displayText = item['submittedByFullName'] ?? '';
885911
return (
@@ -896,12 +922,14 @@ function SummaryTableColumns(props: any): React.ReactElement {
896922
{
897923
key: 'isBillable',
898924
name: 'Is Billable',
899-
type: 'custom',
900925
fieldName: SummaryTableFieldNames.isBillable,
901-
minColumnWidth: ColSize.XXS,
926+
minWidth: ColSize.XXS,
902927
ariaLabel: 'Is Billable',
903928
maxWidth: ColSize.XXS,
929+
isSorted: sortedColumn === 'isBillable',
930+
isSortedDescending: sortedColumn === 'isBillable' ? isSortedDescending : true,
904931
isResizable: true,
932+
onColumnClick: onSort,
905933
onRender: (item: any) => {
906934
return (
907935
<Stack horizontal>
@@ -915,11 +943,13 @@ function SummaryTableColumns(props: any): React.ReactElement {
915943
{
916944
key: 'laborNotes',
917945
name: 'Notes',
918-
type: 'custom',
919946
fieldName: SummaryTableFieldNames.laborNotes,
920-
minColumnWidth: ColSize.Small,
947+
minWidth: ColSize.Small,
921948
isResizable: true,
949+
isSorted: sortedColumn === 'laborNotes',
950+
isSortedDescending: sortedColumn === 'laborNotes' ? isSortedDescending : true,
922951
ariaLabel: 'Notes',
952+
onColumnClick: onSort,
923953
onRender: (item: any) => {
924954
const notesValue = item?.['laborNotes'] || '';
925955
return (
@@ -999,6 +1029,13 @@ function SummaryTableColumns(props: any): React.ReactElement {
9991029

10001030
function onSort(event: React.MouseEvent<HTMLElement, MouseEvent>, column: IColumn): void {
10011031
event.preventDefault();
1032+
//if no column is currently sorted, keep default false value for isSortedDescending
1033+
if (sortedColumn !== column.key) {
1034+
setIsSortedDescending(false);
1035+
} else {
1036+
setIsSortedDescending(!isSortedDescending);
1037+
}
1038+
setSortedColumn(column.key);
10021039
switch (column.key) {
10031040
case 'ApprovalIdentifier':
10041041
if (column.isSorted) {
@@ -1177,6 +1214,12 @@ function SummaryTableColumns(props: any): React.ReactElement {
11771214
}
11781215
break;
11791216
default:
1217+
const isSortedDescendingNew = column.isSorted ? !column.isSortedDescending : false;
1218+
const key = column.key;
1219+
props.tenantGroup.sort((a: T, b: T) =>
1220+
(isSortedDescendingNew ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1
1221+
);
1222+
setTableRecords(props.tenantGroup);
11801223
break;
11811224
}
11821225
}

0 commit comments

Comments
 (0)