Commit 23f24384 authored by TJHeeringa's avatar TJHeeringa

Update AssociationInfo(Form)

parent 24421d30
import React, { Component } from 'react'
import { Button, FormGroup } from 'reactstrap'
import React, { Component, useState } from 'react';
import { FormGroup } from 'reactstrap'
import { AvField, AvForm, AvInput } from 'availity-reactstrap-validation'
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import 'App/Components/DatePicker.css'
import { Helper } from "App/Helper";
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
import {Authorized} from "../../Routing/Authenticated/Authorized";
export class AssociationInfoForm extends Component {
constructor(props) {
super(props);
this.photo = undefined;
this.logo = undefined;
this.state = {
photo: null,
logo: null,
}
import { AlertHandlerContext, useAlertHandler } from "../../Contexts/AlertHandler";
import { SelectValidator, TextValidator, ValidatorForm } from "react-material-ui-form-validator";
import Create from '@material-ui/icons/Create';
import {v4 as uuidv4} from "uuid";
import { withStyles, makeStyles, useTheme } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import { KeyboardDateTimePicker, KeyboardDatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
import moment from 'moment';
import MenuItem from '@material-ui/core/MenuItem';
import Button from '@material-ui/core/Button';
import EventAvailableIcon from '@material-ui/icons/EventAvailable';
import EventBusyIcon from '@material-ui/icons/EventBusy';
import {padStart} from 'lodash';
import CalendarToday from '@material-ui/icons/CalendarToday';
import DescriptionIcon from '@material-ui/icons/Description';
import PhoneIcon from '@material-ui/icons/Phone';
import LocationCityIcon from '@material-ui/icons/LocationCity';
import MarkunreadMailboxIcon from '@material-ui/icons/MarkunreadMailbox';
import ContactsIcon from '@material-ui/icons/Contacts';
import GavelIcon from '@material-ui/icons/Gavel';
import RoomServiceIcon from '@material-ui/icons/RoomService';
import AssignmentLateIcon from '@material-ui/icons/AssignmentLate';
import AccountTreeIcon from '@material-ui/icons/AccountTree';
import EmailIcon from '@material-ui/icons/Email';
import PhotoSizeSelectLargeIcon from '@material-ui/icons/PhotoSizeSelectLarge';
import PhotoIcon from '@material-ui/icons/Photo';
import LineStyleIcon from '@material-ui/icons/LineStyle';
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',
}
}));
handleAssociationChange = (field, value) => {
if (field === 'default_leave_date' || field === 'default_join_date') {
value = this.dateObjectToDateString(value);
}
this.props.handleAssociationChange(field, value);
};
export const AssociationInfoForm = (props) => {
const classes = useStyles();
const alertHandler = useAlertHandler();
dateStringToDateObject = (date_string) => {
if (date_string !== undefined && date_string !== null) {
return new Date(Date.parse(date_string))
} else {
return date_string;
}
};
let [association, setAssociation] = useState({...props.association});
dateObjectToDateString = (date) => {
if (date !== null) {
return date.toISOString().slice(0, 10);
} else {
return date
}
const resetAssociation = () => setAssociation({...props.association});
const handleAssociationChange = (field, value) => {setAssociation(prevState=>({...prevState, [field]: value}))};
const handleValidSubmit = (event, values) => {
let to_be_patched_association = {...association};
(props.association.photo === association.photo) && delete to_be_patched_association.photo;
(props.association.logo === association.logo) && delete to_be_patched_association.logo;
(props.association.bylaws === association.bylaws) && delete to_be_patched_association.bylaws;
(props.association.articles_of_association === association.articles_of_association) && delete to_be_patched_association.articles_of_association;
(props.association.privacy_statement === association.privacy_statement) && delete to_be_patched_association.privacy_statement;
(props.association.terms_of_service === association.terms_of_service) && delete to_be_patched_association.terms_of_service;
Helper.api_call(props.association.url, "PATCH", to_be_patched_association, 'form-data',
(patched_association)=>{
delete patched_association.membership;
delete patched_association.board;
delete patched_association.committees;
props.handleAssociationChange(patched_association);
alertHandler.handleAlertHandler('green', 'Save successful')
},
()=>{alertHandler.handleAlertHandler('red', 'Save failed')},
)
};
handleValidSubmit = (event, values) => {
let association = this.props.association;
this.state.photo !== null ? (association.photo = this.state.photo) : (delete association.photo);
this.state.logo !== null ? (association.logo = this.state.logo) : (delete association.logo);
Helper.api_call(this.props.association.url, "PATCH", association, 'form-data',
()=>{this.context.handleAlertHandler('green', 'Save successful')},
()=>{this.context.handleAlertHandler('red', 'Save failed')},
)
const textEditorProps = field => ({
variant: 'outlined',
label: field[0].toUpperCase() + field.slice(1).replace("_", " "),
className: classes.textField,
});
const pickerEditorProps = field => ({
className: classes.picker,
ampm: false,
inputVariant: 'outlined',
format: 'YYYY/MM/DD HH:mm',
label: field[0].toUpperCase() + field.slice(1).replace("_", " "),
});
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,
};
render() {
console.log(this.context);
return (
<AvForm id="associationsettingsform" onValidSubmit={this.handleValidSubmit} ref={c => (this.form = c)}>
<h5>General</h5>
<label>Name</label>
<FormGroup className="FormGroup">
<AvInput
type="text"
name="name"
value={this.props.association.name}
onChange={(event)=>this.handleAssociationChange('name',event.target.value)}
/>
</FormGroup>
<label>Short Name</label>
<FormGroup className="FormGroup">
<AvInput
type="text"
name="short_name"
value={this.props.association.short_name}
onChange={(event)=>this.handleAssociationChange('short_name',event.target.value)}
/>
</FormGroup>
<label>Description</label>
<FormGroup className="FormGroup">
<AvInput
type="text"
name="description"
value={this.props.association.description}
onChange={(event)=>this.handleAssociationChange('description',event.target.value)}
/>
</FormGroup>
<label>Photo</label>
<AvField
type="file"
name="photo"
onChange={(event)=>this.setState({photo: event.target.files[0]})}
return (
<ValidatorForm
onSubmit={handleValidSubmit}
onError={errors => console.log(errors)}
>
<Typography variant={'h5'}>General</Typography>
<div className={classes.wrapper}>
<ContactsIcon className={classes.icon} color="action"/>
<TextValidator
{...textEditorProps('name')}
value={association.name}
onChange={(event)=>handleAssociationChange('name',event.target.value)}
/>
<label>Logo</label>
<AvField
type="file"
name="logo"
onChange={(event)=>this.setState({logo: event.target.files[0]})}
</div>
<div className={classes.wrapper}>
<Create className={classes.icon} color="action"/>
<TextValidator
{...textEditorProps('short_name')}
value={association.short_name}
onChange={(event)=>handleAssociationChange('short_name',event.target.value)}
/>
<h5>Contact</h5>
<label>Zip code</label>
<FormGroup className="FormGroup">
<AvInput
type="text"
name="zip_code"
value={this.props.association.zip_code}
onChange={(event)=>this.handleAssociationChange('zip_code',event.target.value)}
/>
</FormGroup>
<label>City</label>
<FormGroup className="FormGroup">
<AvInput
type="text"
name="city"
value={this.props.association.city}
onChange={(event)=>this.handleAssociationChange('city',event.target.value)}
/>
</FormGroup>
<label>Postal Address</label>
<AvInput
type="text"
name="postal_address"
value={this.props.association.postal_address}
onChange={(event)=>this.handleAssociationChange('postal_address',event.target.value)}
</div>
<div className={classes.wrapper}>
<DescriptionIcon className={classes.icon} color="action"/>
<TextValidator
{...textEditorProps('description')}
value={association.description}
onChange={(event)=>handleAssociationChange('description',event.target.value)}
multiline
/>
</div>
<div className={classes.wrapper}>
<PhotoIcon className={classes.icon} color="action"/>
<TextField
variant={'outlined'}
className={classes.textField}
// value={association.email}
onChange={(event)=>handleAssociationChange('photo',event.target.files[0])}
label={"Photo"}
InputLabelProps={{ shrink: true }}
type={'file'}
/>
</div>
<div className={classes.wrapper}>
<PhotoSizeSelectLargeIcon className={classes.icon} color="action"/>
<TextField
variant={'outlined'}
className={classes.textField}
label={"Logo"}
InputLabelProps={{ shrink: true }}
type={'file'}
onChange={(event)=>handleAssociationChange('logo',event.target.files[0])}
/>
<label>Phone number</label>
<FormGroup className="FormGroup">
<AvInput
type="text"
name="phone_number"
value={this.props.association.phone_number}
onChange={(event)=>this.handleAssociationChange('phone_number',event.target.value)}
</div>
<Typography variant={'h5'}>Contact</Typography>
<div className={classes.wrapper}>
<AccountTreeIcon className={classes.icon} color="action"/>
<TextValidator
{...textEditorProps('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"/>
<TextValidator
{...textEditorProps('city')}
value={association.city}
onChange={(event)=>handleAssociationChange('city',event.target.value)}
/>
</div>
<div className={classes.wrapper}>
<MarkunreadMailboxIcon className={classes.icon} color="action"/>
<TextValidator
{...textEditorProps('postal_address')}
value={association.address}
onChange={(event)=>handleAssociationChange('address',event.target.value)}
/>
</div>
<div className={classes.wrapper}>
<PhoneIcon className={classes.icon} color="action"/>
<TextValidator
{...textEditorProps('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"/>
<TextValidator
{...textEditorProps('email')}
value={association.email}
onChange={(event)=>handleAssociationChange('email',event.target.value)}
/>
</div>
<Typography variant={'h5'}>Constitutional</Typography>
<div className={classes.wrapper}>
<GavelIcon className={classes.icon} color="action"/>
<TextField
variant={'outlined'}
className={classes.textField}
onChange={(event)=>handleAssociationChange('articles_of_association',event.target.files[0])}
label={"Articles of Association"}
InputLabelProps={{ shrink: true }}
type={'file'}
/>
</div>
<div className={classes.wrapper}>
<LineStyleIcon className={classes.icon} color="action"/>
<TextField
variant={'outlined'}
className={classes.textField}
onChange={(event)=>handleAssociationChange('bylaws',event.target.files[0])}
label={"Bylaws"}
InputLabelProps={{ shrink: true }}
type={'file'}
/>
</div>
<div className={classes.wrapper}>
<EventAvailableIcon className={classes.icon} color="action" />
<MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
<KeyboardDatePicker
value={association.founding_date}
onChange={datetime_util_object => handleAssociationChange(datetime_util_object.toDate())}
{...pickerEditorProps('founding_date')}
helperText={"This is the date you are planning on collection the debt collection."}
/>
</FormGroup>
<label>Email</label>
<FormGroup className="FormGroup">
<AvInput
type="text"
name="email"
value={this.props.association.email}
onChange={(event)=>this.handleAssociationChange('email',event.target.value)}
// helpMessage="Year doesn't matter."
</MuiPickersUtilsProvider>
</div>
<div className={classes.wrapper}>
<EventBusyIcon className={classes.icon} color="action" />
<MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
<KeyboardDatePicker
value={association.dissolution_date}
onChange={datetime_util_object => handleAssociationChange(datetime_util_object.toDate())}
{...pickerEditorProps('dissolution_date')}
disabled
helperText={"Connect the SU if you want to dissolve your association."}
/>
</FormGroup>
<h5>Constitutional</h5>
<label>Founding Date</label>
<AvInput
type="date"
name="founding_date"
value={this.props.association.founding_date}
onChange={(event)=>this.handleAssociationChange('founding_date',event.target.value)}
</MuiPickersUtilsProvider>
</div>
<Typography variant={'h5'}>Legal</Typography>
<div className={classes.wrapper}>
<AssignmentLateIcon className={classes.icon} color="action"/>
<TextField
variant={'outlined'}
className={classes.textField}
onChange={(event)=>handleAssociationChange('privacy_statement',event.target.files[0])}
label={"Privacy Statement"}
InputLabelProps={{ shrink: true }}
type={'file'}
/>
<label>Member Join Date</label>
<DatePicker
className="form-control input"
dateFormat='MM/dd'
selected={this.dateStringToDateObject(this.props.association.default_join_date)}
onChange={(value)=>this.handleAssociationChange('default_join_date',this.dateStringToDateObject(value))}
</div>
<div className={classes.wrapper}>
<RoomServiceIcon className={classes.icon} color="action"/>
<TextField
variant={'outlined'}
className={classes.textField}
label={"Terms of Service"}
InputLabelProps={{ shrink: true }}
type={'file'}
onChange={(event)=>handleAssociationChange('terms_of_service',event.target.files[0])}
/>
<label>Member Leave Date</label>
<DatePicker
className="form-control input"
dateFormat='MM/dd'
selected={this.dateStringToDateObject(this.props.association.default_leave_date)}
onChange={(value)=>this.handleAssociationChange('default_leave_date',this.dateStringToDateObject(value))}
required
</div>
<Typography variant={'h5'}>Members</Typography>
<MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
<div className={classes.wrapper}>
<CalendarToday className={classes.icon} color="action"/>
<SelectValidator
{...textEditorProps('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>
</SelectValidator>
<SelectValidator
{...textEditorProps('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>
)}
</SelectValidator>
</div>
</MuiPickersUtilsProvider>
<div className={classes.wrapper}>
<DescriptionIcon className={classes.icon} color="action"/>
<TextValidator
{...textEditorProps('new_member_text')}
value={association.new_member_text}
onChange={(event)=>handleAssociationChange('new_member_text',event.target.value)}
multiline
/>
<label>New Member Text</label>
<FormGroup className="FormGroup">
<AvInput
type="text"
name="new_member_text"
value={this.props.association.new_member_text}
onChange={(event)=>this.handleAssociationChange('new_member_text',event.target.value)}
/>
</FormGroup>
<Button color="primary" outline block type="submit">Update settings</Button>
</AvForm>
);
}
}
AssociationInfoForm.contextType = AlertHandlerContext;
\ No newline at end of file
</div>
<div className={classes.wrapper} style={{'justifyContent': 'space-between'}}>
<div>
<Button variant="outlined" disabled color='secondary'>
Delete
</Button>
</div>
<div>
<Button type='submit' variant="contained" color='primary'>Save</Button>
&nbsp;
<Button variant="contained" onClick={resetAssociation}>Cancel</Button>
</div>
</div>
</ValidatorForm>
)
};
......@@ -18,12 +18,14 @@ export class AssociationInfo extends Component {
"Phone number": association.phone_number,