Skip to content

GitLab

F
frontend
Commit 1aa6a1c1 authored by TJHeeringa's avatar TJHeeringa
Browse files
Options

Various fixes

parent 904fa02a
Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 118 deletions
src/App/Components/Fields/FontAwesomeIconHolder.js 0 → 100644
View file @ 1aa6a1c1
import makeStyles from "@material-ui/core/styles/makeStyles";
import useTheme from "@material-ui/core/styles/useTheme";
import PropTypes from "prop-types";
import React from "react";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
const useStyles = makeStyles(theme=>({
icon: {
margin: theme.spacing(2, 0),
marginRight: theme.spacing(2),
},
}));
const FontAwesomeIconHolder = ({ icon, ...rest_props }) => {
const theme = useTheme();
const classes = useStyles(theme);
return (
<FontAwesomeIcon className={"MuiSvgIcon-root makeStyles-icon-22 MuiSvgIcon-colorAction"} icon={icon} />
);
};
FontAwesomeIconHolder.propTypes = {
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired
};
export default FontAwesomeIconHolder;
src/App/Components/Forms/AssociationForm.js
View file @ 1aa6a1c1
......@@ -13,6 +13,7 @@ import EventBusyIcon from "@material-ui/icons/EventBusy";
import GavelIcon from "@material-ui/icons/Gavel";
import LineStyleIcon from "@material-ui/icons/LineStyle";
import LocationCityIcon from "@material-ui/icons/LocationCity";
import WhatsAppIcon from '@material-ui/icons/WhatsApp';
import MarkunreadMailboxIcon from "@material-ui/icons/MarkunreadMailbox";
import PhoneIcon from "@material-ui/icons/Phone";
import PhotoIcon from "@material-ui/icons/Photo";
......@@ -29,6 +30,8 @@ import { Helper } from "App/Helper";
import PropTypes from "prop-types";
import React, { useState } from "react";
import { ValidatorForm } from "react-material-ui-form-validator";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import FontAwesomeIconHolder from "../Fields/FontAwesomeIconHolder";
......@@ -111,6 +114,39 @@ export const AssociationForm = (props) => {
</Wrapper>
<Typography variant={"h5"}>Contact</Typography>
<Wrapper>
<IconHolder Icon={EmailIcon}/>
<TextField
name={"email"}
value={association.email}
onChange={(event)=>handleAssociationChange("email",event.target.value)}
/>
</Wrapper>
<Wrapper>
<IconHolder Icon={PhoneIcon}/>
<TextField
name={"phone_number"}
value={association.phone_number}
onChange={(event)=>handleAssociationChange("phone_number",event.target.value)}
/>
</Wrapper>
<Wrapper>
<IconHolder Icon={WhatsAppIcon}/>
<TextField
name={"whatsapp"}
value={association.phone_number}
onChange={(event)=>handleAssociationChange("whatsapp",event.target.value)}
/>
</Wrapper>
<Wrapper>
<FontAwesomeIconHolder icon={["fab", "discord"]}/>
<TextField
name={"discord"}
value={association.phone_number}
onChange={(event)=>handleAssociationChange("discord",event.target.value)}
/>
</Wrapper>
<Typography variant={"h5"}>Visiting Location</Typography>
<Wrapper>
<IconHolder Icon={AccountTreeIcon}/>
<TextField
......@@ -130,25 +166,34 @@ export const AssociationForm = (props) => {
<Wrapper>
<IconHolder Icon={MarkunreadMailboxIcon}/>
<TextField
name={"postal_address"}
name={"address"}
value={association.address}
onChange={(event)=>handleAssociationChange("address",event.target.value)}
/>
</Wrapper>
<Typography variant={"h5"}>Postal</Typography>
<Wrapper>
<IconHolder Icon={PhoneIcon}/>
<IconHolder Icon={AccountTreeIcon}/>
<TextField
name={"phone_number"}
value={association.phone_number}
onChange={(event)=>handleAssociationChange("phone_number",event.target.value)}
name={"zip_code"}
value={association.postal_zipcode}
onChange={(event)=>handleAssociationChange("zip_code",event.target.value)}
/>
</Wrapper>
<Wrapper>
<IconHolder Icon={EmailIcon}/>
<IconHolder Icon={LocationCityIcon}/>
<TextField
name={"email"}
value={association.email}
onChange={(event)=>handleAssociationChange("email",event.target.value)}
name={"city"}
value={association.postal_city}
onChange={(event)=>handleAssociationChange("city",event.target.value)}
/>
</Wrapper>
<Wrapper>
<IconHolder Icon={MarkunreadMailboxIcon}/>
<TextField
name={"address"}
value={association.postal_address}
onChange={(event)=>handleAssociationChange("address",event.target.value)}
/>
</Wrapper>
......
src/App/Components/Forms/GroupForm.js
View file @ 1aa6a1c1
......@@ -22,9 +22,9 @@ import PropTypes from "prop-types";
import React, { useState } from "react";
import { ValidatorForm } from "react-material-ui-form-validator";
import {useAPI} from "../../Contexts/API";
import NumberField from "../Fields/NumberField";
import SelectField from "../Fields/SelectField";
import {useAPI} from "../../Contexts/API";
const useStyles = makeStyles(theme => ({
......@@ -34,12 +34,14 @@ export const GroupForm = ({ group, parentable_groups, handleGroupChange, update,
const theme = useTheme();
const classes = useStyles(theme);
console.log(onSucces);
const API = useAPI();
const alerthandler = useAlertHandler();
const handleSubmit = (event, values) => {
// make a copy of the group so that the null key operation don't accidentally change the group prop
let toBeSentGroup = {...group};
let toBeSentGroup = {...group, permissions: []};
// Drop all field with value null
let null_keys = [];
Object.entries(group).forEach(([key, value])=> {
......@@ -50,9 +52,9 @@ export const GroupForm = ({ group, parentable_groups, handleGroupChange, update,
null_keys.forEach(null_key=> delete toBeSentGroup[null_key]);
if (update) {
patchGroup(group);
patchGroup(toBeSentGroup);
} else {
postGroup(group);
postGroup(toBeSentGroup);
}
};
......@@ -126,6 +128,7 @@ export const GroupForm = ({ group, parentable_groups, handleGroupChange, update,
name={"Number"}
value={group.number}
onChange={(event)=>handleGroupChange("number",event.target.value)}
required
/>
</Wrapper>
<Wrapper>
......
src/App/Components/Info/AssociationInfo.js
View file @ 1aa6a1c1
......@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
import React from "react";
export const AssociationInfo = ({ association }) => {
const morphAssociationToData = (association) => {
let data = [];
......@@ -11,10 +10,18 @@ export const AssociationInfo = ({ association }) => {
"Description": association.description,
};
data["Contact"] = {
"Email": association.email,
"Phone number": association.phone_number,
"Whatsapp": association.whatsapp,
"Discord": association.discord,
};
data["Visiting Location"] = {
"Zip Code": association.zip_code + (" ") + association.city,
"Address": association.address,
"Phone number": association.phone_number,
"Email": association.email
};
data["Postal"] = {
"Zip Code": association.postal_zipcode + (" ") + association.postal_city,
"Address": association.postal_address,
};
data["Constitutional"] = {
"Articles of Association": <a href={association.articles_of_association}>Articles of Association</a>,
......
src/App/Components/InfoForms/Group.js
View file @ 1aa6a1c1
......@@ -8,6 +8,8 @@ import GroupInfo from "../Info/GroupInfo";
const Group = ({association, group: propGroup, parentable_groups, infoOrForm, ...props}) => {
const [group, setGroup] = useState(propGroup.association ? propGroup : {...propGroup, association: association.url});
console.log(props);
const handleGroupChange = (field, value) => {
setGroup(prevState => ({...prevState, [field]:value}));
};
......
src/App/Contexts/API.js
View file @ 1aa6a1c1
......@@ -87,6 +87,7 @@ const API = ({ children }) => {
const postAuthentication = () => {
api_callv4({
url: "/users/me",
queryParams: {expand: "preferred_profile.study,profiles.study"},
method: "GET",
on_succes: (sunmember)=>{
setSunmember(sunmember);
......
src/App/Pages/Association/AssociationInfo.js
View file @ 1aa6a1c1
......@@ -20,7 +20,7 @@ export class AssociationInfoScreen extends Component {
componentDidMount = () => {
Helper.api_call(
this.props.association.url+"?fields!=membership,board,committees",
this.props.association.url+"?fields!=board",
"GET",
undefined,
"json",
......
src/App/Pages/Association/AssociationMembertypes.js
View file @ 1aa6a1c1
......@@ -4,7 +4,6 @@ import { withStyles } from "@material-ui/core";
import Button from "@material-ui/core/Button";
import Container from "@material-ui/core/Container";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Create from "@material-ui/icons/Create";
import DescriptionIcon from "@material-ui/icons/Description";
......@@ -28,65 +27,12 @@ import {useAPI} from "../../Contexts/API";
const useStyles = theme => ({
container: {
width: theme.spacing(68),
padding: 0,
paddingBottom: theme.spacing(2),
},
margin: {
margin: theme.spacing(1),
},
content: {
padding: theme.spacing(2),
paddingTop: 0,
},
header: {
overflow: "hidden",
paddingTop: theme.spacing(0.5),
},
closeButton: {
float: "right",
},
buttonGroup: {
display: "flex",
justifyContent: "flex-end",
padding: theme.spacing(0, 2),
},
button: {
marginLeft: theme.spacing(2),
},
picker: {
marginRight: theme.spacing(2),
"&:last-child": {
marginRight: 0,
},
width: "100%",
},
wrapper: {
display: "flex",
justifyContent: "space-between",
padding: theme.spacing(1, 0),
},
icon: {
margin: theme.spacing(2, 0),
marginRight: theme.spacing(2),
},
textField: {
width: "100%",
},
modal: {
paddingTop: 50
},
addEnrollmentButton: {
display: "flex",
justifyContent: "space-around",
}
});
class Membertype extends Component {
constructor(props) {
super(props);
let {membertype, association} = this.props;
let { membertype, association } = this.props;
console.log(association);
const default_membertype = {
type: "",
......@@ -101,7 +47,7 @@ class Membertype extends Component {
if (membertype === undefined) {
membertype = default_membertype;
}
this.state = {membertype: {...default_membertype, ...membertype}};
this.state = { membertype: {...default_membertype, ...membertype} };
console.log(this.state);
}
......@@ -214,9 +160,9 @@ class Membertype extends Component {
<NumberField
name={"Ordering"}
helperText={"Memberships will be ordered according to this field"}
value={membertype.ordering}
value={membertype.order}
onChange={(event) => {
this.handleDataChange("ordering", event.target.value);
this.handleDataChange("order", event.target.value);
}}
required
/>
......@@ -226,12 +172,11 @@ class Membertype extends Component {
<TextField
name={"Description"}
helperText={""}
value={membertype.description}
value={membertype.helper_text}
onChange={(event) => {
this.handleDataChange("description", event.target.value);
this.handleDataChange("helper_text", event.target.value);
}}
multiline
required
/>
</Wrapper>
<Wrapper>
......
src/App/Pages/Calendar/Calendar.js
View file @ 1aa6a1c1
import "react-big-calendar/lib/sass/styles.scss";
import { Typography } from "@material-ui/core";
import DateRangeIcon from "@material-ui/icons/DateRange";
import ViewModuleIcon from "@material-ui/icons/ViewModule";
import Agenda from "App/Components/Calendar/Agenda";
import Event from "App/Components/Calendar/Event";
import { Helper } from "App/Helper";
import EventModalBoard from "App/Pages/Calendar/EventModalBoard";
import { EventModalMember } from "App/Pages/Calendar/EventModalMember";
......@@ -8,11 +12,14 @@ import moment from "moment";
import React, {Component, useEffect, useState} from "react";
import { Calendar as BigCalendar, momentLocalizer, Views } from "react-big-calendar";
import { withRouter } from "react-router-dom";
import {useGet} from "restful-react";
import Event from "App/Components/Calendar/Event";
import Agenda from "App/Components/Calendar/Agenda";
import Sushi from "../../../img/Sushi-11-me.jpg";
import CardGrid from "../../Components/Card/CardGrid";
import GroupCard from "../../Components/Card/GroupCardV2";
import Wrapper from "../../Components/Fields/Wrapper";
import Block from "../../Components/PageLayout/Content/Block";
import {useGet} from "restful-react";
import ToggleGroup from "../../Components/Toggle/ToggleGroup";
import {useAPI} from "../../Contexts/API";
const localizer = momentLocalizer(moment);
......@@ -22,6 +29,7 @@ export const Calendar = ({ association, board }) => {
const [events, setEvents] = useState([]);
const [selectedEvent, setSelectedEvent] = useState({});
const [calendarLayout, setCalendarLayout] = useState("calendar");
const { data: event_types } = useGet({
path: "/event_types",
......@@ -121,42 +129,74 @@ export const Calendar = ({ association, board }) => {
setSelectedEvent({});
};
const eventToGroupCard = (event) => ({
title: event.name,
photo: event.photo || Sushi,
path: "events/" + event.slug
});
const calendarLayoutButtons = [
{value: "calendar", ariaLabel: "calendar", Icon: DateRangeIcon},
{value: "blocks", ariaLabel: "Card Grid", Icon: ViewModuleIcon}
];
const cards = events.map(event=>eventToGroupCard(event));
console.log(eventData);
return (
<Block>
<EventModalBoard
association={association}
open={open}
create={createEvent}
event_types={event_types || []}
current_event={selectedEvent}
onDelete={modalOnDelete}
onSubmit={modalOnSubmit}
onCancel={modalOnCancel}
/>
<Typography variant={"h5"}>Calendar</Typography>
<hr className={"box-title-separator"}/>
<BigCalendar
selectable={board}
localizer={localizer}
events={morphEventsIntoCalendarFormat(events)}
defaultView={Views.WEEK}
startAccessor={"start_date"}
endAccessor={"end_date"}
eventPropGetter={(event)=>{
return {style: {backgroundColor: event.association.color || "rgb(49, 116, 173)"}};
}}
style={{ height: 700 }}
onSelectEvent={handleSelectEvent}
onSelectSlot={handleSelectSlot}
components={{
event: Event,
agenda: {
event: Agenda,
},
}}
/>
</Block>
<>
<Block>
<EventModalBoard
association={association}
open={open}
create={createEvent}
event_types={event_types || []}
current_event={selectedEvent}
onDelete={modalOnDelete}
onSubmit={modalOnSubmit}
onCancel={modalOnCancel}
/>
<Wrapper>
<Typography variant={"h5"}>Calendar</Typography>
<ToggleGroup
toggle={calendarLayout}
setToggle={setCalendarLayout}
toggleButtons={calendarLayoutButtons}
/>
</Wrapper>
<hr className={"box-title-separator"}/>
{ calendarLayout === "calendar" &&
<BigCalendar
selectable={board}
localizer={localizer}
events={morphEventsIntoCalendarFormat(events)}
defaultView={Views.WEEK}
startAccessor={"start_date"}
endAccessor={"end_date"}
eventPropGetter={(event) => {
return {style: {backgroundColor: event.association.color || "rgb(49, 116, 173)"}};
}}
style={{height: 700}}
onSelectEvent={handleSelectEvent}
onSelectSlot={handleSelectSlot}
views={["month", "week", "day"]}
components={{
event: Event,
agenda: {
event: Agenda,
},
}}
/>
}
</Block>
{ calendarLayout === "blocks" &&
<CardGrid
component={GroupCard}
card_grid={cards}
chunk_size={4}
/>
}
</>
);
};
......
src/App/Pages/Financial/DebtCollections.js
View file @ 1aa6a1c1
......@@ -229,7 +229,7 @@ const DebtCollections = (props) => {
<hr className={"box-title-separator"}/>
{ debtCollections && debtCollections.map((debtCollection,d)=>
<ListItem button key={d} onClick={()=>handleDebtCollectionSelection(debtCollection)}>
<ListItemText primary={debtCollection.debt_collection_date.format("LLLL")} secondary={"€ "+debtCollection.amount.toFixed(2)}/>
<ListItemText primary={debtCollection.debt_collection_date.format("LLLL")} secondary={"€ "+debtCollection.amount}/>
</ListItem>
) }
</List>
......
src/App/Pages/Groups/Board/GroupAdd.js
View file @ 1aa6a1c1
......@@ -13,6 +13,7 @@ const GroupAdd = ({ association, addGroup }) => {
const onAdd = (group) => {
addGroup(group);
console.log("Added!");
history.push("./" + group.slug);
};
......@@ -29,7 +30,7 @@ const GroupAdd = ({ association, addGroup }) => {
association={association}
infoOrForm={"form"}
parentable_groups={[]}
onSuccess={onAdd}
onSucces={onAdd}
onCancel={onCancel}
update={false}
/>
......
src/App/Pages/Groups/Board/GroupMemberManagement.js
View file @ 1aa6a1c1
......@@ -17,6 +17,10 @@ const GroupMemberManagement = ({ association }) => {
const { slug } = useParams();
const [group, setGroup] = useState({});
const [memberships, setMemberships] = useState([]);
const addMembership = (membership) => {};
const editMembership = (edited_memberships) => {};
// Get the full representation of propGroup on mount
useEffect(()=>{
......
src/App/Pages/Groups/Board/GroupMemberManagementAssociationMemberList.js
View file @ 1aa6a1c1
......@@ -90,7 +90,7 @@ export const GroupMemberManagementAssociationMemberList = ({ group, association,
selectedRows.forEach((row) => {
let group_membership = {
association: association.url,
membergroup: group.url,
group: group.url,
profile: row.url
};
......
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