️ This Gitlab will be shut down at 2021-12-31 23:59:59.
Students and staff can migrate to gitlab.utwente.nl.
SNT members can migrate to gitlab.snt.utwente.nl.
Contact bestuur@snt.utwente.nl for more information.

Migrate your projects today!
Export your project using the webinterface or use a script.

Commit 1ff4f0bf authored by TJHeeringa's avatar TJHeeringa

Various stuff

parent 1d142218
......@@ -16,7 +16,7 @@ const InfoForm = ({infoFormObject: propInfoFormObject, InfoComponent, FormCompon
const [formType, toggleFormType] = useInfoFormState("info");
const handleInfoFormObjectChange = (field, value) => {
setInfoFormObjectChanges(prevState => ({...prevState, ...fieldAndValueToStateChanges(field, value)}));
setInfoFormObjectChanges(prevState => ({...prevState, ...fieldAndValueToStateChanges(field, value, prevState)}));
};
const onUpdate = useCallback((data)=>{
......
import Button from "@material-ui/core/Button";
import Container from "@material-ui/core/Container";
import Divider from "@material-ui/core/Divider";
import Typography from "@material-ui/core/Typography";
......@@ -6,9 +7,11 @@ import ArchiveIcon from "@material-ui/icons/Archive";
import UnarchiveIcon from "@material-ui/icons/Unarchive";
import ViewListIcon from "@material-ui/icons/ViewList";
import ViewModuleIcon from "@material-ui/icons/ViewModule";
import {orderBy} from "lodash";
import SearchBar from "material-ui-search-bar";
import moment from "moment";
import PropTypes from "prop-types";
import React, {useState} from "react";
import React, {useMemo, useState} from "react";
import { NavLink,useRouteMatch } from "react-router-dom";
import Sushi from "../../../../img/Sushi-11-me.jpg";
......@@ -18,8 +21,8 @@ import Wrapper from "../../../Components/Fields/Wrapper";
import RecursiveTreeView from "../../../Components/Lists/Tree";
import Block from "../../../Components/PageLayout/Content/Block";
import ToggleGroup from "../../../Components/Toggle/ToggleGroup";
import Button from "@material-ui/core/Button";
const KEY_TO_FILTER = "full_name";
const GroupList = ({ groups, boards }) => {
const { path } = useRouteMatch();
......@@ -27,7 +30,6 @@ const GroupList = ({ groups, boards }) => {
const [layout, setLayout] = useState("blocks");
const [searchTerm, setSearchTerm] = useState("");
const KEY_TO_FILTER = "full_name";
const createFilter = (searchTerm, key) => item=>item[key].toLowerCase().includes(searchTerm.toLowerCase());
const resetSearchTerm = () => setSearchTerm("");
......@@ -87,9 +89,24 @@ const GroupList = ({ groups, boards }) => {
return MiracleGrow(groups, "url", "parent_group");
};
const filteredGroups = groups ? groups.filter(createFilter(searchTerm, KEY_TO_FILTER)) : [];
const filteredGroups = useMemo(()=>{
if (!groups) {
return [];
}
let filteredGroups = groups;
if (!archive) {
filteredGroups = filteredGroups.filter(group=> !group.dissolution_date || (moment() < moment(group.dissolution_date)));
}
if (searchTerm) {
filteredGroups = filteredGroups.filter(createFilter(searchTerm, KEY_TO_FILTER));
}
return filteredGroups;
}, [archive, searchTerm, groups]);
const tree = groupsToTree(filteredGroups.map(committee=>groupToGroupInTreeViewFormat(committee)));
const cards = tree.leaves.map(board=>groupToGroupCard(board));
const cards = orderBy(tree.leaves, ["full_name"], ["asc"]).map(board=>groupToGroupCard(board));
const archiveButtons = [
{ value: true, ariaLabel: "Archived", Icon: ArchiveIcon },
......@@ -100,43 +117,46 @@ const GroupList = ({ groups, boards }) => {
{ value: "flat", ariaLabel: "Flat list", Icon: ViewListIcon},
{ value: "blocks", ariaLabel: "Card Grid", Icon: ViewModuleIcon}
];
console.log(archive);
return (
<Container>
<Block>
<Wrapper>
<Typography variant={"h5"}>{ boards ? "Boards" : "Committees" }</Typography>
<div>
<ToggleGroup
toggle={archive}
setToggle={setArchive}
toggleButtons={archiveButtons}
/>
&nbsp;
<ToggleGroup
toggle={layout}
setToggle={setLayout}
toggleButtons={layoutButtons}
/>
</div>
</Wrapper>
<Divider/>
<br/>
<SearchBar
placeholder={"Search"}
value={searchTerm}
onChange={setSearchTerm}
onCancelSearch={resetSearchTerm}
/>
<Wrapper>
<div/>
<NavLink to={path+"/add"}>
<Button variant={"contained"} color={"primary"}>
<Typography>Add</Typography>
</Button>
</NavLink>
</Wrapper>
</Block>
<>
<Container>
<Block>
<Wrapper>
<Typography variant={"h5"}>{ boards ? "Boards" : "Committees" }</Typography>
<div>
<ToggleGroup
toggle={archive}
setToggle={setArchive}
toggleButtons={archiveButtons}
/>
&nbsp;
{/*<ToggleGroup*/}
{/* toggle={layout}*/}
{/* setToggle={setLayout}*/}
{/* toggleButtons={layoutButtons}*/}
{/*/>*/}
</div>
</Wrapper>
<Divider/>
<br/>
<SearchBar
placeholder={"Search"}
value={searchTerm}
onChange={setSearchTerm}
onCancelSearch={resetSearchTerm}
/>
<Wrapper>
<div/>
<NavLink to={path+"/add"}>
<Button variant={"contained"} color={"primary"}>
<Typography>Add</Typography>
</Button>
</NavLink>
</Wrapper>
</Block>
</Container>
{ layout === "tree" &&
<Block>
<RecursiveTreeView
......@@ -158,7 +178,7 @@ const GroupList = ({ groups, boards }) => {
chunk_size={4}
/>
}
</Container>
</>
);
};
......
......@@ -3,7 +3,7 @@ import Typography from "@material-ui/core/Typography";
import ArchiveIcon from "@material-ui/icons/Archive";
import UnarchiveIcon from "@material-ui/icons/Unarchive";
import { BackButton } from "App/Components/BackButton";
import React, {useEffect, useState} from "react";
import React, {useEffect, useMemo, useState} from "react";
import { useParams } from "react-router-dom";
import Wrapper from "../../../Components/Fields/Wrapper";
......@@ -13,6 +13,7 @@ import {useAlertHandler} from "../../../Contexts/AlertHandler";
import {useAPI} from "../../../Contexts/API";
import GroupMemberManagementAssociationMemberList from "./GroupMemberManagementAssociationMemberList";
import GroupMemberManagementGroupMemberList from "./GroupMemberManagementGroupMemberList";
import moment from "moment";
const GroupMemberManagement = ({ association }) => {
......@@ -34,12 +35,10 @@ const GroupMemberManagement = ({ association }) => {
// Get the full representation of propGroup on mount
useEffect(()=>{
console.log("This is called");
API.callv4({
url: "/groups/" + slug,
method: "GET",
on_succes: (data) => {
console.log("This is called too");
setGroup(data);
setMemberships(data.groupmemberships);
},
......@@ -65,6 +64,26 @@ const GroupMemberManagement = ({ association }) => {
return data;
};
const groupMemberList = useMemo(()=>{
let list = memberships.map(member_profile => ({
slug: member_profile.slug,
url: member_profile.url,
given_name: member_profile.profile.given_name,
surname: member_profile.profile.surname,
date_joined: member_profile.date_joined,
date_left: member_profile.date_left,
duty: member_profile.duty,
email: member_profile.email,
order: member_profile.order,
description: member_profile.description,
}));
if (!archive) {
list = list.filter(group=> !group.date_left || (moment() < moment(group.date_left)));
}
return list;
}, [archive, memberships]);
const rowSelectionEnabledFilter = (row, selection) => {
const profile_urls = memberships.map(m => m.profile.url);
return !profile_urls.includes(row.url);
......@@ -93,7 +112,7 @@ const GroupMemberManagement = ({ association }) => {
<GroupMemberManagementGroupMemberList
board_group={group.board_group}
association={association}
memberships={morphDataToGroupMemberList(memberships)}
memberships={groupMemberList}
updateRows={updateMembership}
removeRow={removeMembership}
/>
......
......@@ -10,6 +10,7 @@ import MemberTable from "../../../Components/Tables/MemberTable";
import { useAPI } from "../../../Contexts/API";
import {useMembers} from "../../../Contexts/Members";
const initial_headers = ["given_name", "surname", "date_joined", "phase"];
const GroupMemberManagementAssociationMemberList = ({ group, association, onAdd, rowSelectionEnabledFilter }) => {
const alertHandler = useAlertHandler();
......@@ -51,7 +52,7 @@ const GroupMemberManagementAssociationMemberList = ({ group, association, onAdd,
<hr className={"box-title-separator"}/>
<MemberTable
rowSelectionEnabledFilter={rowSelectionEnabledFilter}
initial_headers={["student_number", "given_name", "surname", "date_joined", "date_left"]}
initial_headers={initial_headers}
defaultFilters={defaultFilters}
defaultSorting={defaultSorting}
selection={{selection: selection, setSelection: setSelection}}
......
......@@ -22,14 +22,14 @@ import {useMembers} from "../../../Contexts/Members";
const getRowId = (row) => row.slug;
/* eslint-disable no-shadow */
const Popup = ({ row, onChange, onApplyChanges, onCancelChanges, open }) => {
const PopupBoard = ({ row, onChange, onApplyChanges, onCancelChanges, open }) => {
return (
<Dialog open={open} onClose={onCancelChanges} aria-labelledby={"form-dialog-title"} fullWidth={true}>
<ValidatorForm
onSubmit={onApplyChanges}
onError={errors => console.log(errors)}
>
<DialogTitle id={"form-dialog-title"}>Group membership details</DialogTitle>
<DialogTitle id={"form-dialog-title"}>Board membership details</DialogTitle>
<DialogContent>
<Wrapper>
<TextField
......@@ -102,6 +102,56 @@ const Popup = ({ row, onChange, onApplyChanges, onCancelChanges, open }) => {
);
};
/* eslint-disable no-shadow */
const PopupCommittee = ({ row, onChange, onApplyChanges, onCancelChanges, open }) => {
return (
<Dialog open={open} onClose={onCancelChanges} aria-labelledby={"form-dialog-title"} fullWidth={true}>
<ValidatorForm
onSubmit={onApplyChanges}
onError={errors => console.log(errors)}
>
<DialogTitle id={"form-dialog-title"}>Committee membership details</DialogTitle>
<DialogContent>
<Wrapper>
<TextField
name={"Duty"}
label={"Duty"}
value={row.duty || ""}
onChange={onChange}
required
/>
</Wrapper>
<Wrapper>
<DateField
name={"date_joined"}
label={"Date joined"}
value={row.date_joined || ""}
onChange={onChange}
required
/>
</Wrapper>
<Wrapper>
<DateField
name={"date_left"}
label={"Date left"}
value={row.date_left || null}
onChange={onChange}
/>
</Wrapper>
</DialogContent>
<DialogActions>
<Button onClick={onCancelChanges} variant={"contained"}>
Cancel
</Button>
<Button type={"submit"} color={"primary"} variant={"contained"}>
Save
</Button>
</DialogActions>
</ValidatorForm>
</Dialog>
);
};
const GroupMemberManagementGroupMemberList = ({ memberships, board_group, updateRows, removeRow}) => {
const API = useAPI();
const alerthandler = useAlertHandler();
......@@ -138,7 +188,6 @@ const GroupMemberManagementGroupMemberList = ({ memberships, board_group, update
const numberColumns = ["order"];
const onChange = (differences, original_row, edited_row, edited_row_index) => {
let membership = {
url: edited_row.url,
date_joined: edited_row.date_joined,
......@@ -174,6 +223,8 @@ const GroupMemberManagementGroupMemberList = ({ memberships, board_group, update
});
};
const Popup = useMemo(()=>board_group ? PopupBoard : PopupCommittee, [board_group]);
return (
<ExtremeTable
headers={columns}
......
......@@ -84,19 +84,31 @@ const MembersDetail = ({ association, current_member, onMembershipUpdate, onProf
event: enrollment.event.name,
start_date: moment.utc(enrollment.event.start_date).local().format("YYYY-MM-DD HH:mm"),
end_date: moment.utc(enrollment.event.end_date).local().format("YYYY-MM-DD HH:mm"),
enrollment_option: enrollment.enrollment_option.name
enrollment_option: enrollment.enrollment_option.name,
participation_fee: enrollment.enrollment_option.participation_fee,
})),[enrollments]);
const enrollments_headers = [
{name: "event", title: "Event"},
{name: "start_date", title: "Start Date"},
{name: "end_date", title: "End Date"},
{name: "enrollment_option", title: "Enrollment Option"}
{name: "enrollment_option", title: "Enrollment Option"},
{name: "participation_fee", title: "Participation fee"}
];
const purchases_rows = useMemo(()=>purchases.map(purchase=>
[purchase.product, purchase.price, purchase.amount, purchase.total, purchase.purchase_date]
),[purchases]);
const purchases_headers = ["Product", "Price", "Amount", "Total", "When"];
const purchases_rows = useMemo(()=>purchases.map(purchase=>({
product: purchase.product,
price: purchase.price,
amount: purchase.amount,
total: purchase.total,
purchase_date: purchase.purchase_date,
})),[purchases]);
const purchases_headers = [
{name: "product", title: "Product"},
{name: "price", title: "Price"},
{name: "amount", title: "Amount"},
{name: "total", title: "Total"},
{name: "when", title: "When"}
];
const invoices_rows = useMemo(()=>invoices.map(invoice=> ({
price: invoice.price,
......@@ -270,6 +282,7 @@ const MembersDetail = ({ association, current_member, onMembershipUpdate, onProf
showSelect={false}
showGrouping={false}
showColumnChooser={false}
currencyColumns={["participation_fee"]}
/>
</Block>
<Block>
......@@ -281,9 +294,13 @@ const MembersDetail = ({ association, current_member, onMembershipUpdate, onProf
</Button>
</Wrapper>
<hr className={"box-title-separator"}/>
<SimpleTable
<ExtremeTable
rows={purchases_rows}
headers={purchases_headers}
showSelect={false}
showGrouping={false}
showColumnChooser={false}
currencyColumns={["price", "total"]}
/>
</Block>
<Block>
......@@ -297,6 +314,7 @@ const MembersDetail = ({ association, current_member, onMembershipUpdate, onProf
showSelect={false}
showGrouping={false}
showColumnChooser={false}
currencyColumns={["price"]}
/>
</Block>
<Block>
......
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