mirror of
https://github.com/plan-player-analytics/Plan.git
synced 2024-09-09 13:28:48 +02:00
Make it possible to sort extension tables
This commit is contained in:
parent
ffba3c05db
commit
e4a32a2902
@ -1,8 +1,10 @@
|
||||
import React, {useState} from 'react';
|
||||
import React, {useCallback, useState} from 'react';
|
||||
import {useTheme} from "../../hooks/themeHook";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import ExtensionIcon, {toExtensionIconHtmlString} from "./ExtensionIcon";
|
||||
import DataTablesTable from "../table/DataTablesTable";
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {faSort, faSortDown, faSortUp} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
const ExtensionDataTable = ({table}) => {
|
||||
const [id] = useState("extension-table-" + new Date().getTime() + "-" + (Math.floor(Math.random() * 100000)));
|
||||
@ -39,22 +41,65 @@ const ExtensionDataTable = ({table}) => {
|
||||
)
|
||||
}
|
||||
|
||||
const sortComparator = (columnIndex) => (rowA, rowB) => {
|
||||
const a = rowA[columnIndex].valueUnformatted;
|
||||
const b = rowB[columnIndex].valueUnformatted;
|
||||
if (a === b) return 0;
|
||||
if (isNaN(Number(a)) || isNaN(Number(b))) {
|
||||
return String(a).toLowerCase().localeCompare(String(b).toLowerCase());
|
||||
} else {
|
||||
const numA = Number(a);
|
||||
const numB = Number(b);
|
||||
if (numA < numB) return -1;
|
||||
if (numA > numB) return 1;
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
const sortRows = (rows, sortIndex, sortReversed) => {
|
||||
if (sortIndex === undefined) return rows;
|
||||
|
||||
const comparator = sortComparator(sortIndex);
|
||||
const sorted = rows.sort(comparator);
|
||||
if (sortReversed) return rows.reverse();
|
||||
return sorted;
|
||||
}
|
||||
|
||||
const ExtensionColoredTable = ({table}) => {
|
||||
const {nightModeEnabled} = useTheme();
|
||||
const {t} = useTranslation();
|
||||
|
||||
const rows = table.table.rows.length ? table.table.rows.map((row, i) => <tr key={i}>{row.map((value, j) => <td
|
||||
key={i + '' + j}>{value.value || String(value)}</td>)}</tr>) :
|
||||
const [sortBy, setSortBy] = useState(undefined);
|
||||
const [sortReverse, setSortReverse] = useState(false);
|
||||
const changeSort = useCallback(index => {
|
||||
if (index === sortBy) {
|
||||
setSortReverse(!sortReverse);
|
||||
} else {
|
||||
setSortBy(index);
|
||||
setSortReverse(false);
|
||||
}
|
||||
|
||||
}, [sortBy, setSortBy, sortReverse, setSortReverse]);
|
||||
|
||||
const rows = table.table.rows.length ? sortRows(table.table.rows, sortBy, sortReverse)
|
||||
.map((row, i) => <tr key={JSON.stringify(row)}>{row.map((value, j) => <td
|
||||
key={JSON.stringify(value)}>{value.value || String(value)}</td>)}</tr>) :
|
||||
<tr>{table.table.columns.map((column, i) =>
|
||||
<td key={i}>{i === 0 ? t('generic.noData') : '-'}</td>)}
|
||||
<td key={JSON.stringify(column)}>{i === 0 ? t('generic.noData') : '-'}</td>)}
|
||||
</tr>
|
||||
|
||||
return (
|
||||
<table className={"table table-striped" + (nightModeEnabled ? " table-dark" : '')}>
|
||||
<thead className={table.tableColorClass}>
|
||||
<tr>
|
||||
{table.table.columns.map((column, i) => <th key={i}><ExtensionIcon
|
||||
icon={table.table.icons[i]}/> {column}
|
||||
{table.table.columns.map((column, i) => <th className={'extension-table-header'}
|
||||
key={JSON.stringify(column)} onClick={() => changeSort(i)}>
|
||||
<ExtensionIcon icon={table.table.icons[i]}/>
|
||||
|
||||
{column}
|
||||
|
||||
<FontAwesomeIcon className={sortBy === i ? '' : 'opacity-50'}
|
||||
icon={sortBy === i ? (sortReverse ? faSortDown : faSortUp) : faSort}/>
|
||||
</th>)}
|
||||
</tr>
|
||||
</thead>
|
||||
|
@ -1429,4 +1429,8 @@ ul.filters {
|
||||
|
||||
.contributor {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.extension-table-header {
|
||||
cursor: pointer;
|
||||
}
|
Loading…
Reference in New Issue
Block a user