Commit 579f7d44 authored by TJHeeringa's avatar TJHeeringa

Partial fix for committees

parent f6596764
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";
import AnnouncementIcon from "@material-ui/icons/Announcement";
import ContactsIcon from "@material-ui/icons/Contacts";
import Create from "@material-ui/icons/Create";
import DescriptionIcon from "@material-ui/icons/Description";
import DialpadIcon from "@material-ui/icons/Dialpad";
import EmailIcon from "@material-ui/icons/Email";
import EventAvailableIcon from "@material-ui/icons/EventAvailable";
import EventBusyIcon from "@material-ui/icons/EventBusy";
import PhotoIcon from "@material-ui/icons/Photo";
import DateField from "App/Components/Fields/DateField";
import FileField from "App/Components/Fields/FileField";
import IconHolder from "App/Components/Fields/IconHolder";
import TextField from "App/Components/Fields/TextField";
import Wrapper from "App/Components/Fields/Wrapper";
import { useAlertHandler } from "App/Contexts/AlertHandler";
import PropTypes from "prop-types";
import React, { useState } from "react";
import { ValidatorForm } from "react-material-ui-form-validator";
import NumberField from "../Fields/NumberField";
import SelectField from "../Fields/SelectField";
const useStyles = makeStyles(theme => ({
}));
export const GroupForm = ({ group, parentable_groups, handleGroupChange}) => {
const theme = useTheme();
const classes = useStyles(theme);
const alertHandler = useAlertHandler();
const handleValidSubmit = (event, values) => {
};
return (
<ValidatorForm
onSubmit={handleValidSubmit}
onError={errors => console.log(errors)}
>
<Typography variant={"h5"}>General</Typography>
<Wrapper>
<IconHolder Icon={ContactsIcon}/>
<TextField
name={"Full name"}
value={group.full_name}
onChange={(event)=>handleGroupChange("full_name",event.target.value)}
/>
</Wrapper>
<Wrapper>
<IconHolder Icon={Create}/>
<TextField
name={"Short name"}
value={group.short_name}
onChange={(event)=>handleGroupChange("short_name",event.target.value)}
/>
</Wrapper>
<Wrapper>
<IconHolder Icon={DescriptionIcon}/>
<TextField
name={"description"}
value={group.description}
onChange={(event)=>handleGroupChange("description",event.target.value)}
multiline
/>
</Wrapper>
<Wrapper>
<IconHolder Icon={DialpadIcon}/>
<NumberField
name={"Number"}
value={group.number}
onChange={(event)=>handleGroupChange("number",event.target.value)}
/>
</Wrapper>
<Wrapper>
<IconHolder Icon={AnnouncementIcon}/>
<TextField
name={"Creed"}
value={group.creed}
onChange={(event)=>handleGroupChange("creed",event.target.value)}
multiline
/>
</Wrapper>
<Wrapper>
<IconHolder Icon={PhotoIcon}/>
<FileField
onChange={(event)=>handleGroupChange("photo",event.target.files[0])}
name={"photo"}
/>
</Wrapper>
<Typography variant={"h5"}>Contact</Typography>
<Wrapper>
<IconHolder Icon={EmailIcon}/>
<TextField
name={"email"}
value={group.email}
onChange={(event)=>handleGroupChange("email",event.target.value)}
/>
</Wrapper>
<Typography variant={"h5"}>Organisational</Typography>
<Wrapper>
<IconHolder Icon={EventAvailableIcon}/>
<DateField
name={"founding_date"}
value={group.founding_date}
onChange={date => handleGroupChange("founding_date", date)}
helperText={""}
disableFuture
/>
</Wrapper>
<Wrapper>
<IconHolder Icon={EventBusyIcon}/>
<DateField
name={"dissolution_date"}
value={group.dissolution_date}
onChange={date => handleGroupChange("dissolution_date", date)}
/>
</Wrapper>
<Wrapper>
<IconHolder Icon={AccountTreeIcon}/>
<SelectField
name={"Parent group"}
value={group.parent_group}
onChange={date => handleGroupChange("parent_group", date)}
>
{ parentable_groups.map((parentable_group, g)=>(
<MenuItem key={g} value={parentable_group.slug}>{ parentable_group.full_name }</MenuItem>
)) }
</SelectField>
</Wrapper>
<Wrapper>
<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={()=>{}}>Cancel</Button>
</div>
</Wrapper>
</ValidatorForm>
);
};
GroupForm.propTypes = {
group: PropTypes.object.isRequired,
handleGroupChange: PropTypes.func.isRequired,
parentable_groups: PropTypes.arrayOf(PropTypes.object).isRequired
};
GroupForm.defaultProps = {
};
\ No newline at end of file
import PropTypes from "prop-types";
import React, {useState} from "react";
import {useAlertHandler} from "../../Contexts/AlertHandler";
import {useAPI} from "../../Contexts/API";
import {GroupForm} from "../Forms/GroupForm";
import GroupInfo from "../Info/GroupInfo";
const Group = ({group: propGroup, parentable_groups, infoOrForm, ...props}) => {
const alerthandler = useAlertHandler();
const API = useAPI();
const [group, setGroup] = useState(propGroup);
const handleGroupChange = (field, value) => {
setGroup(prevState => ({...prevState, [field]:value}));
};
if (infoOrForm === "info") {
return (
<GroupInfo
group={group}
/>
);
} else {
return (
<GroupForm
group={group}
handleGroupChange={handleGroupChange}
parentable_groups={parentable_groups}
{...props}
/>
);
}
};
Group.propTypes = {
infoOrForm: PropTypes.string.isRequired,
parentable_groups: PropTypes.arrayOf(PropTypes.object),
group: PropTypes.object
};
Group.defaultProps = {
group: {
full_name: null,
short_name: null,
description: null,
number: null,
creed: null,
email: null,
founding_date: null,
dissolution_date: null,
photo: null,
parent_group: null
}
};
export default Group;
......@@ -9,7 +9,11 @@ import { NavLink, withRouter } from "react-router-dom";
import TreeMenu from "react-simple-tree-menu";
import { Button } from "reactstrap";
import CardGrid from "../../../Components/Card/CardGrid";
import GroupCard from "../../../Components/Card/GroupCardV2";
import Block from "../../../Components/PageLayout/Content/Block";
import PageContent from "../../../Components/PageLayout/Content/Content";
import Sushi from "../../../../img/Sushi-11-me.jpg"; // Import using relative path
import { GroupRouter } from "./GroupRouter";
class Boards extends Component {
......@@ -55,6 +59,12 @@ class Boards extends Component {
return "";
}
boardToGroupCard = (board) => ({
title: board.full_name,
photo: board.photo || Sushi,
path: "boards/" + board.slug
});
render() {
const { association } = this.props;
let path = this.props.path+"/boards";
......@@ -91,6 +101,11 @@ class Boards extends Component {
</Button>
</NavLink>
</Block>
<CardGrid
component={GroupCard}
card_grid={this.state.boards.map(board=>this.boardToGroupCard(board))}
chunk_size={4}
/>
</Container>
};
</div>
......
import "react-simple-tree-menu/dist/main.css";
import "./Groups.css";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";
import { Helper } from "App/Helper";
import BootstrapSwitchButton from "bootstrap-switch-button-react";
import { orderBy } from "lodash";
import React, { Component } from "react";
import { NavLink, Redirect, withRouter } from "react-router-dom";
import { NavLink, withRouter } from "react-router-dom";
import TreeMenu from "react-simple-tree-menu";
import { Button, Col, Row } from "reactstrap";
......@@ -52,8 +53,8 @@ export class Committees extends Component {
}
componentDidMount() {
Helper.api_callv2({
url: this.props.association.url+"/committees?limit=1000",
Helper.api_callv3({
url: "/groups?limit=1000&board_group=false&association__slug="+this.props.association.slug,
method: "GET",
on_succes: (data) => {
let committees = data.results;
......@@ -94,7 +95,7 @@ export class Committees extends Component {
<Block className={"mt-20"}>
<Row>
<Col>
<h4>COMMITTEES</h4>
<Typography variant={"h5"}>Committees</Typography>
</Col>
<Col>
<div style={{float: "right"}}>
......
import { Helper } from "App/Helper";
import { AvField,AvForm } from "availity-reactstrap-validation";
import Container from "@material-ui/core/Container";
import Typography from "@material-ui/core/Typography";
import PropTypes from "prop-types";
import React from "react";
import { Button, Col, Container, FormGroup,Row } from "reactstrap";
import { Get } from "restful-react";
import { useHistory } from "react-router-dom";
import {BackButton} from "../../../Components/BackButton";
import { useAlertHandler} from "../../../Contexts/AlertHandler";
import GroupInfoForm from "../../../Components/InfoForms/Group";
import Block from "../../../Components/PageLayout/Content/Block";
import { useHistory } from "react-router-dom";
import PropTypes from "prop-types";
import { useAlertHandler} from "../../../Contexts/AlertHandler";
import {useAPI} from "../../../Contexts/API";
const GroupAdd = (props) => {
const API = useAPI();
const alerthandler = useAlertHandler();
const history = useHistory();
const { association, addGroup, } = props;
const { association, addGroup } = props;
const handleValidSubmit = (event, values) => {
let committee = {
......@@ -37,8 +37,8 @@ const GroupAdd = (props) => {
if (values.dissolution_date !== null && values.dissolution_date !== ""){
committee.dissolution_date = values.dissolution_date;
}
Helper.api_callv2({
url: process.env.REACT_APP_API_URL + "/groups",
API.callv4({
url: "/groups",
method: "POST",
object: committee,
on_succes: (data) => {
......@@ -52,79 +52,21 @@ const GroupAdd = (props) => {
return (
<Container>
<BackButton container={true}/>
<Col sm={{ size: 6, offset: 3 }}>
<Block className={"AddCommittee mt-20"}>
<h4>ADD NEW COMMITTEE</h4>
<hr className={"box-title-separator"}/>
<AvForm id={"addcommitteeform"} onValidSubmit={handleValidSubmit}>
<AvField name={"full_name"} label={"Full name*"} type={"text"} validate={{
required: {value: true, errorMessage: "Please enter a name"},
minLength: {value: 0, errorMessage: "Your name must be between 0 and 50 characters"},
maxLength: {value: 50, errorMessage: "Your name must be between 0 and 50 characters"}
}}
/>
<AvField name={"short_name"} label={"Short name"} type={"text"} validate={{
minLength: {value: 0, errorMessage: "Your name must be between 0 and 10 characters"},
maxLength: {value: 10, errorMessage: "Your name must be between 0 and 10 characters"}
}}
/>
<AvField name={"alternate_name"} label={"Alternative Name"} type={"text"} validate={{
minLength: {value: 0, errorMessage: "Your name must be between 0 and 50 characters"},
maxLength: {value: 50, errorMessage: "Your name must be between 0 and 50 characters"}
}}
/>
<AvField name={"email"} label={"Email"} type={"email"} />
<AvField name={"number"} label={"Number"} type={"number"} min={0} validate={{
required: {value: true, errorMessage: "Please enter a number"}
}}
/>
<AvField name={"motto"} label={"Creed"} type={"text"} />
<AvField name={"founding_date"} label={"Founding Date*"} type={"date"} validate={{
required: {value: true, errorMessage: "Please enter a founding date"}
}}
/>
<AvField name={"dissolution_date"} label={"Dissolution Date"} type={"date"} />
{ /*<label>Archived</label>*/ }
{ /*<FormGroup className="FormGroup">*/ }
{ /* <AvInput*/ }
{ /* type="checkbox"*/ }
{ /* name="archived"*/ }
{ /* />*/ }
{ /*</FormGroup>*/ }
<AvField name={"Description"} label={"Description"} type={"text"}/>
<label>Parent</label>
<FormGroup className={"FormGroup"}>
<AvField
type={"select"}
name={"parent_group"}
>
<option key={0} value={""}> --- </option>
<Get
base={association.url}
path={"committees"}
>
{ (data, { loading, error }) => (
! loading && data && data.results && data.results.map((committee, index) => {
return <option key={index} value={committee.url}>{ committee.full_name }</option>;
})
) }
</Get>
</AvField>
</FormGroup>
<Button color={"primary"} outline block type={"submit"}>Add</Button>
</AvForm>
</Block>
</Col>
<Block>
<Typography variant={"h5"}>New Committee</Typography>
<hr className={"box-title-separator"}/>
<GroupInfoForm
infoOrForm={"form"}
parentable_groups={[]}
/>
</Block>
</Container>
);
}
};
GroupAdd.propTypes = {
association: PropTypes.object.isRequired,
addGroup: PropTypes.func,
}
};
export default GroupAdd;
.CommitteeDetail{
}
.backbutton{
position: absolute;
}
.committeeMembersBtnLink{
color: white;
text-decoration: none;
}
.memberItem {
border: 0 !important;
padding: 0.05rem 1.25rem !important;
}
\ No newline at end of file
This diff is collapsed.
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