Commit 3e3e23c9 authored by TJHeeringa's avatar TJHeeringa

Updated ProfileForm

parent 099ac80c
......@@ -79,69 +79,5 @@ const SpecificDataField = (props) =>{
form
);
};
// case "Choice":
// form = <AvField
// type={"select"}
// helpMessage={field.helper_text}
// name={name}
// >
// { field.choices.split(",").map((choice, c) => {
// return <option key={c} value={choice}>{ choice }</option>;
// }) }
// </AvField>;
// break;
// case "String":
// form = <AvField
// type={"text"}
// name={name}
// helpMessage={field.helper_text}
// />;
// break;
// case "Boolean":
// console.log(field.mandatory);
// if (field.mandatory) {
// form =
// <AvCheckboxGroup
// inline
// name={name}
// validate={{
// required: {
// value: true,
// errorMessage: "This is required."
// }
// }}
// >
// <AvCheckbox
// value={true}
// label={field.helper_text}
// />
// </AvCheckboxGroup>;
// } else {
// form = <AvField
// helpMessage={field.helper_text}
// type={"select"}
// name={name}
// >
// <option>Yes</option>
// <option>No</option>
// </AvField>;
// }
// break;
// case "Number":
// form = <AvField
// helpMessage={field.helper_text}
// type={"number"}
// name={name}
// />;
// break;
//
// }
// return (
// <FormGroup className={"FormGroup"}>
// <label>{ field.name }</label>
// { form }
// </FormGroup>
// );
export default SpecificDataField;
\ No newline at end of file
import MenuItem from "@material-ui/core/MenuItem";
import Typography from "@material-ui/core/Typography";
import { Osiris } from "App/Components/Forms/Osiris";
import { Helper } from "App/Helper";
import { AvField, AvForm } from "availity-reactstrap-validation";
import PropTypes from "prop-types";
import React from "react";
import {Button, Col, Container, Row} from "reactstrap";
import { ValidatorForm } from "react-material-ui-form-validator";
import { Button, Col, Container, Row } from "reactstrap";
import { useGet } from "restful-react";
import { v4 as uuidv4 } from "uuid";
import { useAlertHandler} from "../../Contexts/AlertHandler";
import DateField from "../Fields/DateField";
import SelectField from "../Fields/SelectField";
import TextField from "../Fields/TextField";
import Wrapper from "../Fields/Wrapper";
import Block from "../PageLayout/Content/Block";
......@@ -62,7 +68,7 @@ const ProfileFormWithoutContainer = ({ update, profile, onSuccess, disabled, han
resolve: data => data && data.results
});
const handleValidSubmit = (event, values) => {
const handleSubmit = (event, values) => {
if (update) {
patchProfile(profile);
} else {
......@@ -90,169 +96,149 @@ const ProfileFormWithoutContainer = ({ update, profile, onSuccess, disabled, han
};
return (
<AvForm id={"noprofileyetform"} onValidSubmit={handleValidSubmit}>
<h5>General</h5>
<AvField
type={"text"}
name={"given_name"}
label={"Given name"}
value={profile.given_name}
onChange={(event) => handleProfileChange("given_name", event.target.value)}
disabled={disabled}
required
/>
<AvField
type={"text"}
name={"first_names"}
label={"First name"}
value={profile.first_names}
onChange={(event) => handleProfileChange("first_names", event.target.value)}
disabled={disabled}
/>
<AvField
type={"text"}
name={"surname"}
label={"Last name"}
value={profile.surname}
onChange={(event) => handleProfileChange("surname", event.target.value)}
disabled={disabled}
required
/>
<AvField type={"select"} name={"gender"} label={"Gender"}
value={profile.gender}
onChange={(event) => handleProfileChange("gender", event.target.value)}
disabled={disabled}
>
<option></option>
<option>Other</option>
<option>Female</option>
<option>Male</option>
</AvField>
<ValidatorForm
onSubmit={handleSubmit}
onError={errors => console.log(errors)}
>
<Typography variant={"h5"}>General</Typography>
<Wrapper>
<TextField
name={"Given name"}
value={profile.given_name}
onChange={(event) => handleProfileChange("given_name", event.target.value)}
disabled={disabled}
/>
</Wrapper>
<Wrapper>
<TextField
name={"First names"}
value={profile.first_names}
onChange={(event) => handleProfileChange("first_names", event.target.value)}
disabled={disabled}
/>
</Wrapper>
<Wrapper>
<TextField
name={"Last name"}
value={profile.surname}
onChange={(event) => handleProfileChange("surname", event.target.value)}
disabled={disabled}
required
/>
</Wrapper>
<Wrapper>
<SelectField
name={"Gender"}
value={profile.gender}
onChange={(event) => handleProfileChange("gender", event.target.value)}
disabled={disabled}
>
<MenuItem></MenuItem>
<MenuItem>Other</MenuItem>
<MenuItem>Female</MenuItem>
<MenuItem>Male</MenuItem>
</SelectField>
</Wrapper>
<Wrapper>
<DateField
name={"Date of birth"}
value={profile.date_of_birth}
onChange={(event) => handleProfileChange("date_of_birth", event.target.value)}
disabled={disabled}
required
/>
</Wrapper>
<Typography variant={"h5"}>Contact</Typography>
<Wrapper>
<TextField
name={"Phone number"}
value={profile.phone_number}
onChange={(event) => handleProfileChange("phone_number", event.target.value)}
disabled={disabled}
required
/>
</Wrapper>
<Wrapper>
<TextField
name={"Email"}
value={profile.email}
onChange={(event) => handleProfileChange("email", event.target.value)}
disabled={disabled}
required
/>
</Wrapper>
<Wrapper>
<TextField
name={"Address"}
value={profile.address}
onChange={(event) => handleProfileChange("address", event.target.value)}
disabled={disabled}
/>
</Wrapper>
<Wrapper>
<TextField
name={"Zip code"}
value={profile.zip_code}
onChange={(event) => handleProfileChange("zip_code", event.target.value)}
disabled={disabled}
/>
</Wrapper>
<Wrapper>
<TextField
name={"City"}
value={profile.city}
onChange={(event) => handleProfileChange("city", event.target.value)}
disabled={disabled}
/>
</Wrapper>
<Typography variant={"h5"}>Financial</Typography>
<Wrapper>
<TextField
name={"IBAN"}
value={profile.iban}
onChange={(event) => handleProfileChange("iban", event.target.value)}
helpMessage={"Enter the IBAN without spaces, so NL12RABO0123456789 instead of NL12 RABO 0123 4567 89."}
disabled={disabled}
required
/>
</Wrapper>
<Wrapper>
<TextField
name={"BIC"}
value={profile.bic_code}
helpMessage={"This will be derived from your IBAN. This will be entered automatically when the IBAN is valid."}
disabled
required
/>
</Wrapper>
<Typography variant={"h5"}>Education</Typography>
<Wrapper>
<SelectField
name={"Master Student"}
value={profile.is_master}
onChange={(event) => handleProfileChange("is_master", event.target.value)}
disabled={disabled}
>
<MenuItem value={true}>Yes</MenuItem>
<MenuItem value={false}>No</MenuItem>
</SelectField>
</Wrapper>
<Wrapper>
<SelectField
name={"Study"}
value={profile.study}
onChange={(event) => handleProfileChange("study", event.target.value)}
disabled={disabled}
>
<MenuItem value={undefined}>Not listed</MenuItem>
{ studies && studies.map(study =>
<MenuItem key={uuidv4()} value={study.url}>{ study.studycode } -- { study.name_en }</MenuItem>
) }
</SelectField>
</Wrapper>
<AvField
type={"date"}
name={"date_of_birth"}
label={"Date of birth"}
value={profile.date_of_birth}
onChange={(event) => handleProfileChange("date_of_birth", event.target.value)}
disabled={disabled}
required
/>
<h5>Contact</h5>
<AvField
type={"text"}
name={"phone_number"}
label={"Phone number"}
value={profile.phone_number}
onChange={(event) => handleProfileChange("phone_number", event.target.value)}
disabled={disabled}
required
/>
<AvField
type={"text"}
name={"email"}
label={"Email"}
value={profile.email}
onChange={(event) => handleProfileChange("email", event.target.value)}
disabled={disabled}
required
/>
<AvField
type={"text"}
name={"address"}
label={"Address"}
value={profile.address}
onChange={(event) => handleProfileChange("address", event.target.value)}
disabled={disabled}
/>
<AvField
type={"text"}
name={"zip_code"}
label={"Zip code"}
value={profile.zip_code}
onChange={(event) => handleProfileChange("zip_code", event.target.value)}
disabled={disabled}
required
/>
<AvField
type={"text"}
name={"city"}
label={"City"}
value={profile.city}
onChange={(event) => handleProfileChange("city", event.target.value)}
disabled={disabled}
required
/>
{ /*<FormGroup>*/ }
{ /*<label>Country</label>*/ }
{ /*<CountryDropdown*/ }
{ /*classes={'form-control'}*/ }
{ /*value={props.profile.country}*/ }
{ /*onChange={(country) => props.handleProfileChange('country', country)}*/ }
{ /*disabled={props.disabled}*/ }
{ /*required*/ }
{ /*/>*/ }
{ /*</FormGroup>*/ }
{ /*<FormGroup>*/ }
{ /*<label>Region</label>*/ }
{ /*<RegionDropdown*/ }
{ /*country={country}*/ }
{ /*value={region}*/ }
{ /*onChange={(val) => selectRegion(val)}*/ }
{ /*classes={'form-control'}*/ }
{ /*/>*/ }
{ /*</FormGroup>*/ }
{ /*<AvField*/ }
{ /*type="text"*/ }
{ /*name="country"*/ }
{ /*label="Country"*/ }
{ /*/>*/ }
<h5>Financial</h5>
<AvField
type={"text"}
name={"iban"}
label={"IBAN"}
value={profile.iban}
onChange={(event) => handleProfileChange("iban", event.target.value)}
helpMessage={"Enter the IBAN without spaces, so NL12RABO0123456789 instead of NL12 RABO 0123 4567 89."}
disabled={disabled}
required
/>
<AvField
type={"text"}
name={"bic_code"}
label={"BIC"}
value={profile.bic_code}
// onChange={(event) => props.handleProfileChange('bic_code', event.target.value)}
helpMessage={"This will be derived from your IBAN. This will be entered automatically when the IBAN is valid."}
disabled
required
/>
<h5>Education</h5>
<AvField type={"select"}
name={"is_master"}
label={"Master Student"}
value={profile.is_master}
onChange={(event) => handleProfileChange("is_master", event.target.value)}
disabled={disabled}
>
<option value={true}>Yes</option>
<option value={false}>No</option>
</AvField>
<AvField type={"select"} name={"study"} label={"Study"}
value={profile.study}
onChange={(event) => handleProfileChange("study", event.target.value)}
disabled={disabled}
>
<option value={undefined}>Not listed</option>
{ studies && studies.map(study =>
<option key={uuidv4()} value={study.url}>{ study.name_en }({ study.studycode })</option>
) }
</AvField>
{ !disabled &&
<Button color={"primary"} outline block type={"submit"}>Save profile</Button>
}
</AvForm>
{ !disabled && <Button color={"primary"} outline block type={"submit"}>Save profile</Button> }
</ValidatorForm>
);
};
ProfileFormWithoutContainer.propTypes = {
......
......@@ -2,7 +2,7 @@ import Info from "App/Components/Info/Info";
import PropTypes from "prop-types";
import React from "react";
export const ProfileInfo = (props) => {
const ProfileInfo = ({ profile }) => {
const morphProfileToData = (profile) => {
let data = [];
data["General"] = {
......@@ -32,8 +32,6 @@ export const ProfileInfo = (props) => {
return data;
};
const { profile } = props;
return (
<Info
headerless={false}
......
......@@ -104,11 +104,11 @@ const AssociationBoardDrawerList = (props) => {
icon: <EmailIcon />,
primary: "Emails",
items: [
{
icon: <AlternateEmailIcon />,
primary: "Send",
to: url + "/emails/send"
},
// {
// icon: <AlternateEmailIcon />,
// primary: "Send",
// to: url + "/emails/send"
// },
{
icon: <SubjectIcon />,
primary: "Lists",
......
......@@ -4,7 +4,7 @@ import { BackButton } from "App/Components/BackButton";
import { MembershipForm } from "App/Components/Forms/MembershipForm";
import { AssociationSpecificDataForm } from "App/Components/Forms/SpecificDataForm";
import Info from "App/Components/Info/Info";
import { ProfileInfo } from "App/Components/Info/ProfileInfo";
import ProfileInfo from "App/Components/Info/ProfileInfo";
import React, { Component } from "react";
import {Link,NavLink, withRouter} from "react-router-dom";
import { Button, Col, Row, Spinner } from "reactstrap";
......
import { Osiris } from "App/Components/Forms/Osiris";
import { ProfileInfo } from "App/Components/Info/ProfileInfo";
import { Profile } from "App/Components/InfoForms/Profile";
import {AvField, AvForm} from "availity-reactstrap-validation";
import React, {Component} from "react";
import {NavLink, Redirect,Route, withRouter} from "react-router-dom";
import {Button, Col, Container, Row} from "reactstrap";
import { v4 as uuidv4 } from "uuid";
import Block from "../../Components/PageLayout/Content/Block";
import {Helper} from "../../Helper";
......
import { BackButton } from "App/Components/BackButton";
import { ProfileInfo } from "App/Components/Info/ProfileInfo";
import ProfileInfo from "App/Components/Info/ProfileInfo";
import React, {Component} from "react";
import {NavLink, Redirect,Route, withRouter} from "react-router-dom";
import {Button, Col, Container, Row} from "reactstrap";
import { Redirect, withRouter} from "react-router-dom";
import { Col, Container, Row } from "reactstrap";
import Block from "../../Components/PageLayout/Content/Block";
......
......@@ -17,14 +17,14 @@ const useStyles = makeStyles(theme=>({
}
}));
const SharedProfile = (props) => {
const [formType, setFormType] = useState("info");
const SharedProfile = ({ preferred_profile }) => {
const theme = useTheme();
const classes = useStyles(theme);
const { preferred_profile } = props;
const [formType, setFormType] = useState("info");
const changeFormType = () => formType === "info" ? setFormType("form") : setFormType("info");
return (
<Container>
<Block className={"mt-20"}>
......@@ -46,6 +46,7 @@ const SharedProfile = (props) => {
profile={preferred_profile}
update={true}
disabled={false}
container={false}
/>
</Block>
</Container>
......
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