Commit 053c76d4 authored by TJHeeringa's avatar TJHeeringa

Restructering of Project; Creation of generic ExtremeTable; bugfixes

parent 5c768165
This diff is collapsed.
......@@ -5,41 +5,43 @@
"dependencies": {
"@date-io/date-fns": "^1.3.13",
"@date-io/moment": "^1.3.13",
"@devexpress/dx-react-core": "^1.11.2",
"@devexpress/dx-react-grid": "^1.11.2",
"@devexpress/dx-react-grid-bootstrap4": "^1.11.2",
"@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/free-solid-svg-icons": "^5.12.1",
"@fortawesome/react-fontawesome": "^0.1.8",
"@devexpress/dx-react-core": "^2.6.4",
"@devexpress/dx-react-grid": "^2.6.4",
"@devexpress/dx-react-grid-export": "^2.6.4",
"@devexpress/dx-react-grid-material-ui": "^2.6.4",
"@fortawesome/fontawesome-svg-core": "^1.2.29",
"@fortawesome/free-solid-svg-icons": "^5.13.1",
"@fortawesome/react-fontawesome": "^0.1.11",
"@icon/open-iconic": "^1.1.4",
"@material-ui/core": "^4.9.5",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/pickers": "^3.2.10",
"@mui-treasury/components": "^1.0.0",
"@mui-treasury/components": "^1.5.2",
"@mui-treasury/styling": "^0.2.8",
"availity-reactstrap-validation": "^2.6.1",
"bootstrap": "^4.4.1",
"bootstrap": "^4.5.0",
"bootstrap-switch-button-react": "^1.2.0",
"clsx": "^1.1.1",
"env-cmd": "^10.1.0",
"file-saver": "^2.0.2",
"i": "^0.3.6",
"jquery": "^3.4.1",
"jquery": "^3.5.1",
"json-loader": "^0.5.7",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"moment": "^2.27.0",
"node-sass": "^4.14.1",
"npm": "^6.13.7",
"query-string": "^6.11.0",
"npm": "^6.14.5",
"query-string": "^6.13.1",
"react": "^16.13.1",
"react-big-calendar": "^0.24.6",
"react-bootstrap": "^1.0.0-beta.16",
"react-bootstrap": "^1.0.1",
"react-bootstrap-switch": "^15.5.3",
"react-cookie": "^3.1.2",
"react-country-region-selector": "^1.4.7",
"react-csv": "^1.1.2",
"react-data-grid": "^5.0.5",
"react-datepicker": "^2.15.0",
"react-dom": "^16.12.0",
"react-datepicker": "^2.16.0",
"react-dom": "^16.13.1",
"react-icons": "^3.10.0",
"react-lorem-ipsum": "^1.4.4",
"react-material-ui-form-validator": "^2.0.10",
......@@ -49,16 +51,16 @@
"react-router-tabs": "^1.3.2",
"react-scripts": "^2.1.8",
"react-search-input": "^0.11.3",
"react-simple-tree-menu": "^1.1.15",
"react-simple-tree-menu": "^1.1.17",
"react-sizeme": "^2.6.12",
"react-spinkit": "^3.0.0",
"react-strap": "0.0.1",
"react-table": "^6.11.5",
"reactstrap": "^8.4.0",
"reactstrap": "^8.5.1",
"restful-react": "^7.6.4",
"typescript": "^3.8.2",
"typescript": "^3.9.6",
"universal-cookie": "^3.1.0",
"uuid": "^8.0.0"
"uuid": "^8.2.0"
},
"scripts": {
"start": "react-scripts start",
......@@ -78,8 +80,8 @@
"not op_mini all"
],
"devDependencies": {
"babel-plugin-root-import": "^6.4.1",
"husky": "^4.2.3",
"babel-plugin-root-import": "^6.5.0",
"husky": "^4.2.5",
"react-image-webp": "^0.2.2"
},
"husky": {
......
......@@ -5,10 +5,8 @@ import { PageLayoutContext } from "./Contexts/PageLayout";
import { library } from '@fortawesome/fontawesome-svg-core'
import {faBars,faCheck,faHome,faIgloo,faPlus,faSignOutAlt,faTimes,faUser,faChevronLeft} from '@fortawesome/free-solid-svg-icons'
import { createMuiTheme, ThemeProvider, MuiThemeProvider } from '@material-ui/core/styles';
import '@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css'
import '@icon/open-iconic/open-iconic.css'
import PublicPageLayout from "./Components/PageLayout/PublicPageLayout";
import { BrowserRouter as Router, Route, } from "react-router-dom"
require('bootstrap');
library.add(faSignOutAlt, faUser, faIgloo, faBars, faCheck, faTimes, faHome, faPlus, faChevronLeft);
......
import React, { Component } from "react";
import { Button, Card, CardBody, CardSubtitle, CardTitle, CardText } from "reactstrap";
import { Link } from "react-router-dom";
import Poll from 'restful-react'
import React, {Component} from "react";
import PropTypes from 'prop-types';
......
......@@ -8,7 +8,7 @@ import TextInfoContent from '@mui-treasury/components/content/textInfo';
import { useBlogTextInfoContentStyles } from '@mui-treasury/styles/textInfoContent/blog';
import { useOverShadowStyles } from '@mui-treasury/styles/shadow/over';
import PropTypes from "prop-types";
import { Info } from "App/Components/Info";
import { Info } from "App/Components/Info/Info";
const useStyles = makeStyles(theme => ({
......
......@@ -5,11 +5,10 @@ import { AvField, AvForm } from "availity-reactstrap-validation";
import { CountryDropdown } from 'react-country-region-selector';
import { Helper } from "App/Helper";
import { Osiris } from 'App/Components/Profile/Osiris'
import { Info } from "App/Components/Info";
import { Osiris } from 'App/Components/Forms/Osiris'
import { Info } from "App/Components/Info/Info";
import { v4 as uuidv4 } from 'uuid';
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
import {Authorized} from "../../Routing/Authenticated/Authorized";
export class Profile extends Component {
......
import { Component } from 'react'
import React from 'react'
import {Info} from "App/Components/Info";
import {Info} from "App/Components/Info/Info";
export class AssociationInfo extends Component {
......
import { Component } from 'react'
import React from 'react'
import { Info } from "App/Components/Info";
import { Info } from "App/Components/Info/Info";
export class ProfileInfo extends Component {
......
import React, { Component } from 'react'
import {Row, Col} from 'reactstrap'
import List from "@material-ui/core/List";
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Collapse from '@material-ui/core/Collapse';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import PropTypes from "prop-types";
import { makeStyles } from '@material-ui/core/styles';
const CollapsableList = ({ component: Component, listItemText, ...passThroughProps }) => {
const [open, setOpen] = React.useState(false);
const handleToggle = () => setOpen(!open);
return (
<List>
<ListItem button onClick={handleToggle} style={{backgroundColor: 'grey'}}>
<ListItemText primary={listItemText} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
<Component {...passThroughProps} handleToggle={handleToggle}/>
</Collapse>
</List>
)
}
CollapsableList.propTypes = {
listItemText: PropTypes.string.isRequired,
component: PropTypes.object.isRequired,
};
export default CollapsableList;
\ No newline at end of file
......@@ -3,7 +3,7 @@ import 'react-table/react-table.css'
import { IntegratedPaging,IntegratedSelection,PagingState,SelectionState,FilteringState,
IntegratedFiltering,SortingState,IntegratedSorting,SearchState,EditingState } from '@devexpress/dx-react-grid'
import { Grid, PagingPanel, Table, TableHeaderRow, TableSelection, TableFilterRow, ColumnChooser, TableColumnVisibility,
Toolbar, SearchPanel, TableEditRow, TableEditColumn } from '@devexpress/dx-react-grid-bootstrap4'
Toolbar, SearchPanel, TableEditRow, TableEditColumn } from '@devexpress/dx-react-grid-material-ui'
import { CSVLink } from "react-csv";
import { Button } from 'reactstrap'
import { Helper } from "App/Helper";
......
......@@ -2,7 +2,7 @@ import React from 'react';
import HomeWorkIcon from '@material-ui/icons/HomeWork';
import InfoIcon from '@material-ui/icons/Info';
import EventIcon from '@material-ui/icons/Event';
import DrawerList from 'App/Components/Drawer/DrawerList';
import DrawerList from 'App/Components/Lists/DrawerList';
import PeopleRoundedIcon from '@material-ui/icons/PeopleRounded';
import GroupWorkIcon from '@material-ui/icons/GroupWork';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
......
......@@ -4,7 +4,7 @@ import HomeIcon from '@material-ui/icons/Home';
import HomeWorkIcon from '@material-ui/icons/HomeWork';
import InfoIcon from '@material-ui/icons/Info';
import EventIcon from '@material-ui/icons/Event';
import DrawerList from 'App/Components/Drawer/DrawerList';
import DrawerList from 'App/Components/Lists/DrawerList';
import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
import GradeIcon from '@material-ui/icons/Grade';
import AccountBoxIcon from '@material-ui/icons/AccountBox';
......
......@@ -3,7 +3,7 @@ import HomeIcon from '@material-ui/icons/Home';
import InfoIcon from '@material-ui/icons/Info';
import EventIcon from '@material-ui/icons/Event';
import HelpIcon from '@material-ui/icons/Help';
import DrawerList from 'App/Components/Drawer/DrawerList';
import DrawerList from 'App/Components/Lists/DrawerList';
export default function PublicSideBar(props){
......
import React, { useState } from 'react'
import { makeStyles, lighten } from '@material-ui/core/styles';
import PropTypes from "prop-types";
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import { Row, Col } from 'reactstrap'
import MuiTable from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TablePagination from '@material-ui/core/TablePagination';
import Paper from '@material-ui/core/Paper';
import Checkbox from '@material-ui/core/Checkbox';
import clsx from 'clsx';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import Tooltip from '@material-ui/core/Tooltip';
import MuiToolbar from '@material-ui/core/Toolbar';
import { Helper } from "App/Helper";
import 'react-table/react-table.css';
const useToolbarStyles = makeStyles((theme) => ({
root: {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1),
},
highlight:
theme.palette.type === 'light'
? {
color: theme.palette.secondary.main,
backgroundColor: lighten(theme.palette.secondary.light, 0.85),
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.secondary.dark,
},
title: {
flex: '1 1 100%',
},
}));
const EnhancedTableToolbar = (props) => {
const classes = useToolbarStyles();
const { numSelected } = props;
return (
<MuiToolbar
className={clsx(classes.root, {[classes.highlight]: numSelected > 0})}
>
{numSelected > 0 ? (
<Typography className={classes.title} color="inherit" variant="subtitle1" component="div">
{numSelected} selected
</Typography>
) : (
<Typography className={classes.title} variant="h6" id="tableTitle" component="div">
Rows
</Typography>
)}
{numSelected > 0 && (
<Tooltip title="Delete">
<IconButton aria-label="delete" onClick={()=>props.onClick()}>
<DeleteIcon />
</IconButton>
</Tooltip>
)}
</MuiToolbar>
);
};
EnhancedTableToolbar.propTypes = {
numSelected: PropTypes.number.isRequired,
};
const useStyles = makeStyles(theme => ({
wrapper: {
display: 'flex',
justifyContent: 'space-between',
padding: theme.spacing(1, 0),
},
icon: {
margin: theme.spacing(2, 0),
marginRight: theme.spacing(2),
},
textField: {
width: '100%',
},
column: {
width: '48%'
},
matchButtonDiv: {
display: 'flex',
justifyContent: 'center',
},
matchButton: {
width: '48%',
fontSize: '24px',
}
}));
const EnhancedTable = ({headers, filterProperties, rows, ...props}) => {
const classes = useStyles();
const [selected, setSelected] = useState([]);
const [allSelected, setAllSelected] = useState(false);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [page, setPage] = useState(0);
const handleCheck = (event, row_slug) => {
// Function adds the row to the list of checked rows if not checked yet, else removes it from the checked rows
let new_selected = selected.filter(slug=>slug!==row_slug);
console.log(rows.length, rows);
console.log(selected.length, selected);
console.log(new_selected.length, new_selected);
console.log(selected.concat([row_slug]).length, selected.concat([row_slug]));
// check if filtering removed an element, which meant that the row_slug was in there
if (new_selected.length === selected.length) {
// pushing to selected and then calling setSelected gives state errors, so doing the concat as workaround
new_selected = new_selected.concat([row_slug]);
setSelected(new_selected)
} else {
setSelected(new_selected)
}
if (new_selected.length === rows.length) {
setAllSelected(true);
} else {
setAllSelected(false);
}
};
const handleAllCheck = () => {
let newAllSelected = !allSelected;
if (newAllSelected) {
setSelected(rows.map(row=>row.slug))
} else {
setSelected([]);
}
setAllSelected(newAllSelected);
};
const handleDelete = () => {
let new_rows = rows.filter(row=>!selected.includes(row.slug));
setAllSelected(false);
setSelected([]);
props.onDelete(new_rows);
};
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
return (
<Paper>
<EnhancedTableToolbar
numSelected={selected.length}
onClick={handleDelete}
/>
<TableContainer component={Paper}>
<MuiTable className={classes.table} size="small" aria-label="a dense table">
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
checked={allSelected}
onChange={handleAllCheck}
inputProps={{ 'aria-label': 'select all desserts' }}
/>
</TableCell>
{headers.map((header, h)=><TableCell key={h}>{header}</TableCell>)}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, i) =>{
let checked = selected.includes(row.slug);
return (
<TableRow
key={i}
role="checkbox"
aria-checked={checked}
selected={checked}
onClick={(event) => handleCheck(event, row.slug)}
>
<TableCell padding="checkbox">
<Checkbox
checked={checked}
inputProps={{ 'aria-labelledby': i }}
/>
</TableCell>
{Object.values(Helper.filterObjectOnProperties(row, filterProperties)).map((column, c)=><TableCell key={c}>{column}</TableCell>)}
</TableRow>
)})}
</TableBody>
</MuiTable>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
)
};
export default EnhancedTable;
\ No newline at end of file
import React, { Component, useState, useRef, useCallback } from "react";
import {
ColumnChooser,
Grid,
PagingPanel,
SearchPanel,
Table,
TableFilterRow,
TableHeaderRow,
TableSelection,
TableColumnVisibility,
TableColumnReordering,
TableGroupRow,
GroupingPanel,
ExportPanel,
Toolbar,
DragDropProvider,
} from "@devexpress/dx-react-grid-material-ui";
import {
FilteringState, IntegratedFiltering, IntegratedPaging, IntegratedSelection,
IntegratedSorting,
PagingState,
SearchState,
SelectionState,
SortingState,
DataTypeProvider,
GroupingState,
IntegratedGrouping,
} from "@devexpress/dx-react-grid";
import {Getter, Plugin} from "@devexpress/dx-react-core";
import { GridExporter } from '@devexpress/dx-react-grid-export';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import PropTypes from "prop-types";
import saveAs from 'file-saver';
const CurrencyFormatter = ({ value }) => (
value.toLocaleString('en-GB', { style: 'currency', currency: 'euro' })
);
const CurrencyTypeProvider = props => (
<DataTypeProvider
formatterComponent={CurrencyFormatter}
{...props}
/>
);
const DateFormatter = ({ value }) => (
<span>
{value.toLocaleDateString()}
</span>
);
const DateTypeProvider = props => (
<DataTypeProvider {...props} formatterComponent={DateFormatter} />
);
const ExtremeTable = (props) => {
const { headers, rows, getRowId,
defaultSorting, defaultFilters, defaultHiddenColumnNames,
pageSizes, showSelectAll, showExporter, showGrouping, selectByRowClick,
currencyColumns,
rowSelectionEnabledFilter, selection: {selection, setSelection}} = props;
if (setSelection === undefined){
const [selection, setSelection] = useState([]);
}
const getHiddenColumnsFilteringExtensions = hiddenColumnNames => hiddenColumnNames
.map(columnName => ({
columnName,
predicate: () => false,
}));
const onHiddenColumnNamesChange = hiddenColumnNames => setFilteringColumnExtensions(
getHiddenColumnsFilteringExtensions(hiddenColumnNames),
);
const onSave = (workbook) => {
workbook.csv.writeBuffer().then((buffer) => {
saveAs(new Blob([buffer], { type