Commit 99b5416a authored by TJHeeringa's avatar TJHeeringa

Updated AssociationForm

parent 3e3e23c9
......@@ -10,12 +10,10 @@ const useStyles = makeStyles(theme=>({
},
}));
const IconHolder = (props) => {
const IconHolder = ({ Icon, ...rest_props }) => {
const theme = useTheme();
const classes = useStyles(theme);
const { Icon, ...rest_props } = props;
return (
<Icon className={classes.icon} color={"action"} {...rest_props} />
);
......
import MenuItem from "@material-ui/core/MenuItem";
import makeStyles from "@material-ui/core/styles/makeStyles";
import useTheme from "@material-ui/core/styles/useTheme";
import { padStart } from "lodash";
import PropTypes from "prop-types";
import React from "react";
import MenuItem from "@material-ui/core/MenuItem";
import SelectField from "./SelectField";
import Wrapper from "./Wrapper";
import makeStyles from "@material-ui/core/styles/makeStyles";
import useTheme from "@material-ui/core/styles/useTheme";
const useStyles = makeStyles(theme=>({
}));
const YearlessDateField = (props) => {
const { value, onChange } = props;
const YearlessDateField = ({ value, onChange, name }) => {
const theme = useTheme();
const classes = useStyles(theme);
......@@ -49,12 +47,12 @@ const YearlessDateField = (props) => {
return (
<>
<SelectField
name={"Start date - month"}
name={name + " - month"}
validators={["required"]}
errorMessages={["A type has to be set"]}
value={value.split("-")[0]}
onChange={(event) => {
onChange("start_date", event.target.value + "-" + value.split("-")[1]);
onChange(event.target.value + "-" + value.split("-")[1]);
}}
>
<MenuItem value={"01"}>January</MenuItem>
......@@ -71,12 +69,12 @@ const YearlessDateField = (props) => {
<MenuItem value={"12"}>December</MenuItem>
</SelectField>
<SelectField
name={"Start date - day"}
name={name + " - day"}
validators={["required"]}
errorMessages={["A type has to be set"]}
value={value.split("-")[1]}
onChange={(event) => {
onChange("start_date", value.split("-")[0] + "-" + event.target.value);
onChange(value.split("-")[0] + "-" + event.target.value);
}}
>
{ [...Array(monthToNumberOfDays[value.split("-")[0]]).keys()].map((day, id) =>
......@@ -88,6 +86,7 @@ const YearlessDateField = (props) => {
};
YearlessDateField.propTypes = {
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired
};
......
import "react-datepicker/dist/react-datepicker.css";
import "App/Components/DatePicker.css";
import Button from "@material-ui/core/Button";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import AccountTreeIcon from "@material-ui/icons/AccountTree";
......@@ -25,75 +21,24 @@ import RoomServiceIcon from "@material-ui/icons/RoomService";
import DateField from "App/Components/Fields/DateField";
import FileField from "App/Components/Fields/FileField";
import TextField from "App/Components/Fields/TextField";
import Wrapper from "App/Components/Fields/Wrapper";
import IconHolder from "App/Components/Fields/IconHolder";
import YearlessDateField from "App/Components/Fields/YearlessDateField";
import { useAlertHandler } from "App/Contexts/AlertHandler";
import { Helper } from "App/Helper";
import { padStart } from "lodash";
import PropTypes from "prop-types";
import React, { useState } from "react";
import { SelectValidator, TextValidator, ValidatorForm } from "react-material-ui-form-validator";
import { ValidatorForm } from "react-material-ui-form-validator";
import SelectField from "../Fields/SelectField";
const useStyles = makeStyles(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",
}
}));
export const AssociationInfoForm = (props) => {
export const AssociationForm = (props) => {
const theme = useTheme();
const classes = useStyles(theme);
const alertHandler = useAlertHandler();
let [association, setAssociation] = useState({...props.association});
......@@ -122,140 +67,111 @@ export const AssociationInfoForm = (props) => {
);
};
const monthToNumberOfDays = {
"01": 31,
"02": 28,
"03": 31,
"04": 30,
"05": 31,
"06": 30,
"07": 31,
"08": 31,
"09": 30,
"10": 31,
"11": 30,
"12": 31,
January: 31,
February: 28,
March: 31,
April: 30,
May: 31,
June: 30,
July: 31,
August: 31,
September: 30,
October: 31,
November: 30,
December: 31,
};
console.log(association.founding_date);
console.log(association.dissolution_date);
return (
<ValidatorForm
onSubmit={handleValidSubmit}
onError={errors => console.log(errors)}
>
<Typography variant={"h5"}>General</Typography>
<div className={classes.wrapper}>
<ContactsIcon className={classes.icon} color={"action"}/>
<Wrapper>
<IconHolder Icon={ContactsIcon}/>
<TextField
name={"name"}
value={association.name}
onChange={(event)=>handleAssociationChange("name",event.target.value)}
/>
</div>
<div className={classes.wrapper}>
<Create className={classes.icon} color={"action"}/>
</Wrapper>
<Wrapper>
<IconHolder Icon={Create}/>
<TextField
name={"short_name"}
value={association.short_name}
onChange={(event)=>handleAssociationChange("short_name",event.target.value)}
/>
</div>
<div className={classes.wrapper}>
<DescriptionIcon className={classes.icon} color={"action"}/>
</Wrapper>
<Wrapper>
<IconHolder Icon={DescriptionIcon}/>
<TextField
name={"description"}
value={association.description}
onChange={(event)=>handleAssociationChange("description",event.target.value)}
multiline
/>
</div>
<div className={classes.wrapper}>
<PhotoIcon className={classes.icon} color={"action"}/>
</Wrapper>
<Wrapper>
<IconHolder Icon={PhotoIcon}/>
<FileField
onChange={(event)=>handleAssociationChange("photo",event.target.files[0])}
name={"photo"}
/>
</div>
<div className={classes.wrapper}>
<PhotoSizeSelectLargeIcon className={classes.icon} color={"action"}/>
</Wrapper>
<Wrapper>
<IconHolder Icon={PhotoSizeSelectLargeIcon}/>
<FileField
name={"logo"}
onChange={(event)=>handleAssociationChange("logo",event.target.files[0])}
/>
</div>
</Wrapper>
<Typography variant={"h5"}>Contact</Typography>
<div className={classes.wrapper}>
<AccountTreeIcon className={classes.icon} color={"action"}/>
<Wrapper>
<IconHolder Icon={AccountTreeIcon}/>
<TextField
name={"zip_code"}
value={association.zip_code}
onChange={(event)=>handleAssociationChange("zip_code",event.target.value)}
/>
</div>
<div className={classes.wrapper}>
<LocationCityIcon className={classes.icon} color={"action"}/>
</Wrapper>
<Wrapper>
<IconHolder Icon={LocationCityIcon}/>
<TextField
name={"city"}
value={association.city}
onChange={(event)=>handleAssociationChange("city",event.target.value)}
/>
</div>
<div className={classes.wrapper}>
<MarkunreadMailboxIcon className={classes.icon} color={"action"}/>
</Wrapper>
<Wrapper>
<IconHolder Icon={MarkunreadMailboxIcon}/>
<TextField
name={"postal_address"}
value={association.address}
onChange={(event)=>handleAssociationChange("address",event.target.value)}
/>
</div>
<div className={classes.wrapper}>
<PhoneIcon className={classes.icon} color={"action"}/>
</Wrapper>
<Wrapper>
<IconHolder Icon={PhoneIcon}/>
<TextField
name={"phone_number"}
value={association.phone_number}
onChange={(event)=>handleAssociationChange("phone_number",event.target.value)}
/>
</div>
<div className={classes.wrapper}>
<EmailIcon className={classes.icon} color={"action"}/>
</Wrapper>
<Wrapper>
<IconHolder Icon={EmailIcon}/>
<TextField
name={"email"}
value={association.email}
onChange={(event)=>handleAssociationChange("email",event.target.value)}
/>
</div>
</Wrapper>
<Typography variant={"h5"}>Constitutional</Typography>
<div className={classes.wrapper}>
<GavelIcon className={classes.icon} color={"action"}/>
<Wrapper>
<IconHolder Icon={GavelIcon}/>
<FileField
onChange={(event)=>handleAssociationChange("articles_of_association",event.target.files[0])}
name={"Articles of Association"}
/>
</div>
<div className={classes.wrapper}>
<LineStyleIcon className={classes.icon} color={"action"}/>
</Wrapper>
<Wrapper>
<IconHolder Icon={LineStyleIcon}/>
<FileField
onChange={(event)=>handleAssociationChange("bylaws",event.target.files[0])}
name={"bylaws"}
/>
</div>
<div className={classes.wrapper}>
<EventAvailableIcon className={classes.icon} color={"action"} />
</Wrapper>
<Wrapper>
<IconHolder Icon={EventAvailableIcon}/>
<DateField
name={"founding_date"}
value={association.founding_date}
......@@ -263,9 +179,9 @@ export const AssociationInfoForm = (props) => {
helperText={"This is the date you are planning on collection the debt collection."}
disableFuture
/>
</div>
<div className={classes.wrapper}>
<EventBusyIcon className={classes.icon} color={"action"} />
</Wrapper>
<Wrapper>
<IconHolder Icon={EventBusyIcon}/>
<DateField
name={"dissolution_date"}
value={association.dissolution_date}
......@@ -273,75 +189,47 @@ export const AssociationInfoForm = (props) => {
disabled
helperText={"Connect the SU if you want to dissolve your association."}
/>
</div>
</Wrapper>
<Typography variant={"h5"}>Legal</Typography>
<div className={classes.wrapper}>
<AssignmentLateIcon className={classes.icon} color={"action"}/>
<Wrapper>
<IconHolder Icon={AssignmentLateIcon}/>
<FileField
onChange={(event)=>handleAssociationChange("privacy_statement",event.target.files[0])}
name={"Privacy Statement"}
/>
</div>
<div className={classes.wrapper}>
<RoomServiceIcon className={classes.icon} color={"action"}/>
</Wrapper>
<Wrapper>
<IconHolder Icon={RoomServiceIcon}/>
<FileField
name={"Terms of Service"}
onChange={(event)=>handleAssociationChange("terms_of_service",event.target.files[0])}
/>
</div>
</Wrapper>
<Typography variant={"h5"}>Members</Typography>
<div className={classes.wrapper}>
<CalendarToday className={classes.icon} color={"action"}/>
<SelectField
name={"full_year_membership_start_date - month"}
validators={["required"]}
errorMessages={["A type has to be set"]}
value={association.full_year_membership_start_date.split("-")[0]}
onChange={(event) => {
handleAssociationChange("full_year_membership_start_date", event.target.value + "-" + association.full_year_membership_start_date.split("-")[1]);
}}
>
<MenuItem value={"01"}>January</MenuItem>
<MenuItem value={"02"}>February</MenuItem>
<MenuItem value={"03"}>March</MenuItem>
<MenuItem value={"04"}>April</MenuItem>
<MenuItem value={"05"}>May</MenuItem>
<MenuItem value={"06"}>June</MenuItem>
<MenuItem value={"07"}>July</MenuItem>
<MenuItem value={"08"}>August</MenuItem>
<MenuItem value={"09"}>September</MenuItem>
<MenuItem value={"10"}>October</MenuItem>
<MenuItem value={"11"}>November</MenuItem>
<MenuItem value={"12"}>December</MenuItem>
</SelectField>
<SelectField
name={"full_year_membership_start_date - day"}
validators={["required"]}
errorMessages={["A type has to be set"]}
value={association.full_year_membership_start_date.split("-")[1]}
onChange={(event) => {
handleAssociationChange("full_year_membership_start_date", association.full_year_membership_start_date.split("-")[0] + "-" + event.target.value);
}}
>
{ [...Array(monthToNumberOfDays[association.full_year_membership_start_date.split("-")[0]]).keys()].map((day, id) =>
<MenuItem key={id} value={padStart(day + 1,2,"0")}>{ day + 1 }</MenuItem>
) }
</SelectField>
</div>
<div className={classes.wrapper}>
<DescriptionIcon className={classes.icon} color={"action"}/>
<Wrapper>
<IconHolder Icon={CalendarToday}/>
<YearlessDateField
name={"Full year membership start date"}
onChange={
(value)=>handleAssociationChange("full_year_membership_start_date", value)
}
value={association.full_year_membership_start_date}
/>
</Wrapper>
<Wrapper>
<IconHolder Icon={DescriptionIcon}/>
<TextField
name={"new_member_text"}
value={association.new_member_text}
onChange={(event)=>handleAssociationChange("new_member_text",event.target.value)}
multiline
/>
</div>
</Wrapper>
<div className={classes.wrapper} style={{"justifyContent": "space-between"}}>
<Wrapper>
<div>
<Button variant={"outlined"} disabled color={"secondary"}>
Delete
......@@ -352,12 +240,12 @@ export const AssociationInfoForm = (props) => {
&nbsp;
<Button variant={"contained"} onClick={resetAssociation}>Cancel</Button>
</div>
</div>
</Wrapper>
</ValidatorForm>
);
};
AssociationInfoForm.propTypes = {
AssociationForm.propTypes = {
association: PropTypes.object.isRequired,
handleAssociationChange: PropTypes.func.isRequired
};
\ No newline at end of file
import Container from "@material-ui/core/Container";
import Typography from "@material-ui/core/Typography";
import { AssociationInfoForm } from "App/Components/Forms/AssociationInfoForm";
import { AssociationForm } from "App/Components/Forms/AssociationForm";
import { AssociationInfo } from "App/Components/Info/AssociationInfo";
import { Helper } from "App/Helper";
import React, { Component } from "react";
......@@ -61,7 +61,7 @@ export class AssociationInfoScreen extends Component {
<hr className={"box-title-separator"}/>
{ this.state.form_type === "form"
?
<AssociationInfoForm
<AssociationForm
association={this.state.association}
handleAssociationChange={(association)=>this.setState({association: association})}
/>
......
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