Commit 4454e109 authored by TJHeeringa's avatar TJHeeringa

Updated Matchings and DebtCollections

parent 053c76d4
......@@ -58,8 +58,8 @@ const DateTypeProvider = props => (
const ExtremeTable = (props) => {
const { headers, rows, getRowId,
defaultSorting, defaultFilters, defaultHiddenColumnNames,
pageSizes, showSelectAll, showExporter, showGrouping, selectByRowClick,
defaultSorting, defaultFilters, defaultHiddenColumnNames, pageSizes,
showSelect, showSelectAll, showExporter, showGrouping, selectByRowClick,
currencyColumns,
rowSelectionEnabledFilter, selection: {selection, setSelection}} = props;
......@@ -91,9 +91,7 @@ const ExtremeTable = (props) => {
const [columnOrder, setColumnOrder] = useState(headers.map(header=>header.name));
const exporterRef = useRef(null);
const startExport = useCallback((options) => {
exporterRef.current.exportGrid(options);
}, [exporterRef]);
const startExport = useCallback((options) => {exporterRef.current.exportGrid(options)}, [exporterRef]);
const rowSelectionEnabled = row => rowSelectionEnabledFilter(row, selection);
......@@ -112,20 +110,24 @@ const ExtremeTable = (props) => {
sorting={sorting}
onSortingChange={setSorting}
/>
{showGrouping &&
<GroupingState
grouping={grouping}
onGroupingChange={setGrouping}
/>
}
<PagingState
pageSize={pageSize}
onPageSizeChange={setPageSize}
currentPage={currentPage}
onCurrentPageChange={setCurrentPage}
/>
{showSelect &&
<SelectionState
selection={selection}
onSelectionChange={setSelection}
/>
}
<FilteringState
defaultFilters={defaultFilters}
/>
......@@ -136,11 +138,15 @@ const ExtremeTable = (props) => {
<IntegratedFiltering
columnExtensions={filteringColumnExtensions}
/>
{showSelect &&
<PatchedIntegratedSelection
rowSelectionEnabled={rowSelectionEnabled}
/>
}
<IntegratedPaging />
<IntegratedGrouping />
{showGrouping &&
<IntegratedGrouping/>
}
<Table />
<TableColumnReordering
order={columnOrder}
......@@ -148,21 +154,25 @@ const ExtremeTable = (props) => {
/>
<TableHeaderRow
showSortingControls
showGroupingControls
showGroupingControls={showGrouping}
/>
<TableColumnVisibility
defaultHiddenColumnNames={defaultHiddenColumnNames}
onHiddenColumnNamesChange={onHiddenColumnNamesChange}
/>
{showSelect &&
<PatchedTableSelection
showSelectAll={showSelectAll}
selectByRowClick={selectByRowClick}
rowSelectionEnabled={rowSelectionEnabled}
/>
}
<TableFilterRow
showFilterSelector
/>
<TableGroupRow />
{showGrouping &&
<TableGroupRow/>
}
<Toolbar />
<PagingPanel
pageSizes={pageSizes}
......@@ -197,12 +207,13 @@ ExtremeTable.propTypes = {
/* Headers above the table */
headers: PropTypes.arrayOf(PropTypes.exact({
name: PropTypes.string,
title: PropTypes.string,
index: PropTypes.number
title: PropTypes.string
})).isRequired,
/* Rows in the table */
rows: PropTypes.arrayOf(PropTypes.object).isRequired,
// Optional properties
/* Boolean that enables selection */
showSelect: PropTypes.bool,
/* Boolean for showing the checkbox with allows selecting of all at once */
showSelectAll: PropTypes.bool,
/* Setting to true creates an option to export to .csv */
......@@ -237,6 +248,7 @@ ExtremeTable.propTypes = {
};
ExtremeTable.defaultProps = {
showSelect: true,
showSelectAll: true,
showExporter: false,
showGrouping: true,
......@@ -247,7 +259,7 @@ ExtremeTable.defaultProps = {
defaultHiddenColumnNames: [],
currencyColumns: [],
rowSelectionEnabledFilter: (row, selection) => true,
handleSelectionChange: ()=>{}
selection: {selection: undefined, setSelection: undefined}
};
export default ExtremeTable;
......
import React, { Component, useState } from 'react'
import React, { useState } from 'react'
import { makeStyles, useTheme, lighten } from '@material-ui/core/styles';
import PropTypes from "prop-types";
import Container from "react-bootstrap/Container";
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import { IntegratedPaging, IntegratedSelection, PagingState, SelectionState, FilteringState, IntegratedFiltering, SortingState,IntegratedSorting, SearchState } from '@devexpress/dx-react-grid';
import { Grid, PagingPanel, Table, TableHeaderRow, TableSelection, TableFilterRow, Toolbar, SearchPanel } from '@devexpress/dx-react-grid-material-ui';
import { Getter, Plugin } from '@devexpress/dx-react-core';
import { useGet } from "restful-react"
import { Row, Col } from 'reactstrap';
import { v4 as uuidv4 } from 'uuid';
import 'react-table/react-table.css';
......@@ -45,35 +42,95 @@ const useStyles = makeStyles(theme => ({
const Matchings = (props) => {
const classes = useStyles();
const alertHandler = useAlertHandler();
const data = [
{slug: uuidv4(), given_name: "Henk1", surname: "Piet"},
{slug: uuidv4(), given_name: "Henk2", surname: "Piet"},
{slug: uuidv4(), given_name: "Henk3", surname: "Piet"},
{slug: uuidv4(), given_name: "Henk4", surname: "Piet"},
{slug: uuidv4(), given_name: "Henk5", surname: "Piet"},
{slug: uuidv4(), given_name: "Henk6", surname: "Piet"},
{slug: uuidv4(), given_name: "Henk7", surname: "Piet"},
{slug: uuidv4(), given_name: "Henk8", surname: "Piet"},
{slug: uuidv4(), given_name: "Henk9", surname: "Piet"},
{slug: uuidv4(), given_name: "Henk10", surname: "Piet"},
{slug: uuidv4(), given_name: "Henk11", surname: "Piet"},
{slug: uuidv4(), given_name: "Henk12", surname: "Piet"},
{slug: uuidv4(), given_name: "Henk13", surname: "Piet"},
];
const headers = [
{ name: 'given_name', title: 'Given Name'},
{ name: 'surname', title: 'Last Name'},
];
const [rows, setRows] = useState(data);
const [filteredRows, setFiltered] = useState(data);
const [show, setShowMatches] = useState(true);
const [matches, setMatches] = useState([]);
const [matchSlugs, setMatchSlugs] = useState([]);
const [selectedLeft, setLeft] = useState({});
const [selectedRight, setRight] = useState({});
let { data: members, loading: loadingMembers } = useGet({
path: props.association.url + '/members/current',
queryParams: {limit: 10000},
resolve: data => data && data.results
});
let { data: data_fields, loading: loadingDataFields } = useGet({
path: props.association.url + '/data_fields',
queryParams: {limit: 10000},
resolve: data => data && data.results
});
let { data: membertypes, loading: loadingMembertypes } = useGet({
path: props.association.url + '/membertypes',
queryParams: {limit: 100},
resolve: data => data && data.results
});
console.log(loadingMembers, loadingDataFields, loadingMembertypes);
const morphDataToMemberProfiles = (data, membertypes) => {
return data.map(nested_member_profile => {
let member_profile = nested_member_profile.profile;
member_profile.type = nested_member_profile.type.type;
member_profile.date_joined = nested_member_profile.date_joined;
member_profile.urls = {'membership': nested_member_profile.url};
nested_member_profile.association_specific_data.forEach(data => {
member_profile[data.name] = data.value;
member_profile.urls[data.name] = data.url;
});
membertypes.forEach(data => {
member_profile.urls[data.name] = data.url;
});
return member_profile
});
};
const morphDataToHeaders = (data_fields) => {
let headers = [
{name: 'student_number', title: 'Student Nr' },
{name: 'first_names', title: 'First Name' },
{name: 'surname', title: 'Last Name' },
{name: 'given_name', title: 'Given Name' },
{name: 'date_of_birth', title: 'Date of Birth' },
{name: 'country', title: 'Country' },
{name: 'city', title: 'City' },
{name: 'email', title: 'Email' },
{name: 'phone_number', title: 'Phone' },
{name: 'gender', title: 'Gender' },
{name: 'address', title: 'Address' },
{name: 'zip_code', title: 'Zip Code' },
{name: 'type', title: 'Membertype' },
{name: 'date_joined', title: 'Date Joined' },
{name: 'date_left', title: 'Date Left' },
{name: 'bic_code', title: 'BIC' },
{name: 'iban', title: 'IBAN' },
{name: 'is_master', title: 'Master Student' },
];
data_fields.forEach((data, i) =>
headers.push(
{name: data.name, title: data.name }
)
);
return headers
};
const defaultHiddenColumnNames = [
'student_number',
'first_names',
'surname',
'date_of_birth',
'country',
'city',
'email',
'phone_number',
'gender',
'address',
'zip_code',
'type',
'date_joined',
'date_left',
'bic_code',
'iban',
'is_master',
];
const createMatch = () => {
console.log(selectedRight, selectedLeft);
if (Object.keys(selectedLeft).length === 0 || Object.keys(selectedRight).length === 0 || selectedLeft === selectedRight) {
......@@ -93,7 +150,6 @@ const Matchings = (props) => {
setLeft({});
setRight({});
setMatchSlugs(slugs);
setFiltered(filteredRows.filter(row=>!slugs.includes(row.slug)))
}
};
......@@ -103,7 +159,6 @@ const Matchings = (props) => {
let slugs = left_slugs.concat(right_slugs);
setMatches(new_matches);
setMatchSlugs(slugs);
setFiltered(rows.filter(row=>!slugs.includes(row.slug)));
};
// const postGroupMembership = (group_membership) => {
......@@ -114,7 +169,20 @@ const Matchings = (props) => {
// 'json',
// );
// };
console.log(matches);
const rows = (loadingMembers || loadingMembertypes) ? [{}] : morphDataToMemberProfiles(members, membertypes).filter(row=>!matchSlugs.includes(row.slug));
const headers = loadingDataFields ? morphDataToHeaders([]) : morphDataToHeaders(data_fields);
console.log("matches", matches);
console.log("members", matchSlugs, members && members.filter(row=>!matchSlugs.includes(row.slug)), loadingMembers);
console.log("members v2", members, loadingMembers);
console.log("membertypes", membertypes, loadingMembertypes);
console.log("hidden column names", defaultHiddenColumnNames);
console.log("headers", headers);
console.log("rows", rows);
return (
<>
<Container>
......@@ -147,8 +215,9 @@ const Matchings = (props) => {
selected={selectedLeft}
selectedFilter={selectedRight}
setSelected={(selection)=>setLeft(selection)}
rows={filteredRows}
rows={rows}
headers={headers}
defaultHiddenColumnNames={defaultHiddenColumnNames}
/>
</Col>
<Col className={classes.column}>
......@@ -156,9 +225,10 @@ const Matchings = (props) => {
association={props.association}
selected={selectedRight}
selectedFilter={selectedLeft}
setSelected={(selection)=>setRight(selection)}
rows={filteredRows}
setSelected={(selection) => setRight(selection)}
rows={rows}
headers={headers}
defaultHiddenColumnNames={defaultHiddenColumnNames}
/>
</Col>
</Row>
......@@ -182,7 +252,7 @@ Matchings.propTypes = {
export default Matchings;
const MemberList = (props) => {
const { rows, headers, selected, selectedFilter, setSelected } = props;
const { rows, headers, selected, selectedFilter, setSelected, defaultHiddenColumnNames } = props;
const rowSelectionEnabledFilter = (row, selection) => {
if (selected.slug !== undefined){
......@@ -211,6 +281,7 @@ const MemberList = (props) => {
showSelectAll={false}
selection={{selection: [selected.index], setSelection: handleSelectionChange}}
rowSelectionEnabledFilter={rowSelectionEnabledFilter}
defaultHiddenColumnNames={defaultHiddenColumnNames}
/>
</div>
)
......
......@@ -2,6 +2,8 @@ import React from "react";
import { makeStyles } from '@material-ui/core/styles';
import PropTypes from "prop-types";
import SimpleTable from "App/Components/Tables/SimpleTable"
import ExtremeTable from "App/Components/Tables/ExtremeTable"
import { zipObject } from 'lodash';
const useStyles = makeStyles(theme => ({
root: {}
......@@ -9,14 +11,27 @@ const useStyles = makeStyles(theme => ({
const DebtCollectionDetail = ({rows, ...props}) => {
const classes = useStyles();
const number_of_rows = 500;
const headers = ["Who", "Amount", "Identifier", "Bank Account", "Email"];
const dummyHeaders = "Pie is kind of pi".split(" ");
// const dummyRow = dummyHeaders.map(header=>{return {name: header}});
const dummyRow = dummyHeaders;
const dummyRows = [dummyRow, dummyRow, dummyRow, dummyRow];
const dummyRow = "Pie is kind of pi".split(" ");
const dummyRows = Array.apply(null, Array(number_of_rows)).map(i=>dummyRow);
const extremeHeaders = headers.map(header=>{return {name: header.toLowerCase(), title: header}});
const extremeDummyRow = zipObject(headers.map(header=>header.toLowerCase()), dummyRow);
const extremeDummyRows = Array.apply(null, Array(number_of_rows)).map(i=>extremeDummyRow);
return (
<SimpleTable headers={headers} rows={dummyRows}/>
<>
{/*<SimpleTable headers={headers} rows={dummyRows}/>*/}
<ExtremeTable
headers={extremeHeaders}
rows={extremeDummyRows}
showExporter={true}
showGrouping={false}
showSelect={false}
/>
</>
)
};
DebtCollectionDetail.propTypes = {
......
import { Component } from 'react'
import React 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 Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import PropTypes from "prop-types";
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import DebtCollectionDetail from "./DebtCollectionDetail";
import Button from '@material-ui/core/Button';
const useStyles = makeStyles((theme) => ({
root: {
......@@ -24,8 +19,8 @@ const useStyles = makeStyles((theme) => ({
// textAlign: 'center',
color: theme.palette.text.secondary,
},
detail: {
addButton: {
width: '100%',
}
}));
......@@ -34,13 +29,14 @@ const DebtCollections = (props) => {
const classes = useStyles();
const DummyDebtCollections = [
{date: new Date("2020-07-08"), amount: 48.09},
{date: new Date("2019-11-18"), amount: 2011},
{date: new Date("2019-09-21"), amount: 182.50},
{date: new Date("2019-08-31"), amount: 3787},
{date: new Date("2019-08-14"), amount: 508.48},
{slug: "a", date: new Date("2020-07-08"), amount: 48.09},
{slug: "b", date: new Date("2019-11-18"), amount: 2011},
{slug: "c", date: new Date("2019-09-21"), amount: 182.50},
{slug: "d", date: new Date("2019-08-31"), amount: 3787},
{slug: "e", date: new Date("2019-08-14"), amount: 508.48},
];
const [debtCollections, setebtCollections] = React.useState([]);
const [selectedDebtCollection, setSelectedDebtCollection] = React.useState({});
return (
......@@ -50,6 +46,9 @@ const DebtCollections = (props) => {
<div className={'box'}>
<Typography variant={'h4'}>Debt Collections</Typography>
<List>
<ListItem button onClick={()=>{}}>
<ListItemText primary={"New"}/>
</ListItem>
{DummyDebtCollections.map((debtCollection,d)=>
<ListItem button key={d} onClick={()=>setSelectedDebtCollection(debtCollection)}>
<ListItemText primary={debtCollection.date.toDateString()} secondary={""+debtCollection.amount.toFixed(2)}/>
......
......@@ -60,6 +60,7 @@ class MembersCurrent extends Component {
return member_profile
});
};
morphDataToEditingStateColumnExtensions = (data) => {
let editingStateColumnExtensions = [
{columnName: 'student_number', editingEnabled: false},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment