Commit 35f49f71 authored by TJHeeringa's avatar TJHeeringa

Many small fixes

parent 60395ee8
This diff is collapsed.
......@@ -12,8 +12,9 @@
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">-->
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>-->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!--
manifest.json provides metadata used when your web app is added to the
......
......@@ -5,6 +5,8 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import {faBars,faCheck,faHome,faIgloo,faPlus,faSignOutAlt,faTimes,faUser,faChevronLeft} from '@fortawesome/free-solid-svg-icons'
import '@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css'
import '@icon/open-iconic/open-iconic.css'
require('bootstrap');
library.add(faSignOutAlt, faUser, faIgloo, faBars, faCheck, faTimes, faHome, faPlus, faChevronLeft);
......
......@@ -4,7 +4,7 @@ import { AvForm, AvInput, AvField } from "availity-reactstrap-validation";
import { Row, Col } from 'reactstrap'
import { Helper } from "App/Helper";
import NumericInput from 'react-numeric-input';
import uuid from "uuid";
import { v4 as uuidv4 } from 'uuid';
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
......@@ -76,7 +76,7 @@ export class AssociationMembertypeForm extends Component {
return (
<AvForm id="associationsettingsform" onValidSubmit={this.handleValidSubmit} ref={c => (this.form = c)}>
<Row>
<Col xs="12" sm="3">
<Col lg="3">
<FormGroup className="FormGroup">
<AvInput
type="text"
......@@ -86,7 +86,7 @@ export class AssociationMembertypeForm extends Component {
/>
</FormGroup>
</Col>
<Col xs="12" sm="3">
<Col lg="3">
<FormGroup className="FormGroup">
<AvField
type="select"
......@@ -94,12 +94,12 @@ export class AssociationMembertypeForm extends Component {
value={this.state.membertype.only_chooseable_by_board.toString()}
onChange={(event)=>{this.handleDataChange('only_chooseable_by_board', event.target.value)}}
>
<option key={uuid.v4()} value="true">Yes</option>
<option key={uuid.v4()} value="false">No</option>
<option key={uuidv4()} value="true">Yes</option>
<option key={uuidv4()} value="false">No</option>
</AvField>
</FormGroup>
</Col>
<Col xs="12" sm="3">
<Col lg="3">
<NumericInput
precision={2}
step={0.01}
......@@ -107,14 +107,14 @@ export class AssociationMembertypeForm extends Component {
onChange={(fee)=>{this.handleDataChange('membership_fee', fee)}}
/>
</Col>
<Col xs="12" sm="1">
<Col lg="1">
{onAdd !== undefined ?
<Button className="acceptbutton" color='primary'>Add</Button>
:
<Button className="acceptbutton" color='success'>Save</Button>
}
</Col>
<Col xs="12" sm="1">
<Col lg="1">
{onAdd === undefined &&
<Button className="acceptbutton" onClick={()=>{}}>Delete</Button>
}
......
......@@ -2,7 +2,7 @@ import React, { Component } from 'react'
import { Button, FormGroup } from "reactstrap";
import { AvForm, AvInput, AvField } from "availity-reactstrap-validation";
import { Row, Col } from 'reactstrap'
import uuid from "uuid";
import { v4 as uuidv4 } from 'uuid';
import { Helper } from "App/Helper";
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
import {Authorized} from "../../Main/Authorized/Authorized";
......@@ -171,8 +171,8 @@ export class AssociationSpecificDataFieldForm extends Component {
}}
disabled={onAdd === undefined}
>
<option key={uuid.v4()} value="true">Yes</option>
<option key={uuid.v4()} value="false">No</option>
<option key={uuidv4()} value="true">Yes</option>
<option key={uuidv4()} value="false">No</option>
</AvField>
}
</Col>
......@@ -184,8 +184,8 @@ export class AssociationSpecificDataFieldForm extends Component {
value={this.state.association_specific_data_field.board_only.toString()}
onChange={(event) => this.handleDataChange('board_only', event.target.value)}
>
<option key={uuid.v4()} value="true">Yes</option>
<option key={uuid.v4()} value="false">No</option>
<option key={uuidv4()} value="true">Yes</option>
<option key={uuidv4()} value="false">No</option>
</AvField>
}
</Col>
......@@ -203,7 +203,7 @@ export class AssociationSpecificDataFieldForm extends Component {
>
{/*{this.state.association_specific_data_field.mandatory && <option key={uuid.v4()} value={null}></option>}*/}
{this.state.association_specific_data_field.choices.split(',').map((choice) => {
return <option key={uuid.v4()} value={choice}>{choice}</option>
return <option key={uuidv4()} value={choice}>{choice}</option>
})}
</AvField>
: this.state.association_specific_data_field.type === "Boolean"
......@@ -215,8 +215,8 @@ export class AssociationSpecificDataFieldForm extends Component {
value={this.state.association_specific_data_field.default}
onChange={(event) => this.handleDataChange('default', event.target.value)}
>
<option key={uuid.v4()} value="true">Yes</option>
<option key={uuid.v4()} value="false">No</option>
<option key={uuidv4()} value="true">Yes</option>
<option key={uuidv4()} value="false">No</option>
</AvField>
:
<AvField
......
......@@ -3,7 +3,7 @@ import React from 'react'
import {AvForm, AvInput, AvField} from "availity-reactstrap-validation";
import {Button, Col, FormGroup, Row} from "reactstrap";
import {Helper} from "App/Helper";
import uuid from "uuid";
import { v4 as uuidv4 } from 'uuid';
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
import {Authorized} from "../../Main/Authorized/Authorized";
......@@ -62,7 +62,7 @@ export class AssociationSpecificDataForm extends Component {
value={association_specific_data.value}
>
{choices.map((choice) => {
return <option key={uuid.v4()} value={choice}>{choice}</option>
return <option key={uuidv4()} value={choice}>{choice}</option>
})}
</AvField>
:
......@@ -71,8 +71,8 @@ export class AssociationSpecificDataForm extends Component {
name="value"
value={association_specific_data.value}
>
<option key={uuid.v4()} value="Yes">Yes</option>
<option key={uuid.v4()} value="No">No</option>
<option key={uuidv4()} value="Yes">Yes</option>
<option key={uuidv4()} value="No">No</option>
</AvField>
)
:
......
import React from 'react';
import cx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import TextInfoContent from '@mui-treasury/components/content/textInfo';
import { useBlogTextInfoContentStyles } from '@mui-treasury/styles/textInfoContent/blog';
import { useOverShadowStyles } from '@mui-treasury/styles/shadow/over';
import PeopleCardFooter from '@mui-treasury/components/cardFooter/people';
import Box from '@material-ui/core/Box';
import PropTypes from "prop-types";
import Divider from '@material-ui/core/Divider';
import { loremIpsum } from 'react-lorem-ipsum';
import { Link } from "react-router-dom";
// import { useHistory } from "react-router-dom";
import { useHistory } from "react-router";
const useStyles = makeStyles(theme => ({
root: {
margin: 'auto',
borderRadius: theme.spacing(2), // 16px
transition: '0.3s',
boxShadow: '0px 14px 80px rgba(34, 35, 58, 0.2)',
position: 'relative',
minWidth: 304,
maxWidth: 500,
marginLeft: 'auto',
overflow: 'initial',
background: '#ffffff',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
paddingBottom: theme.spacing(2),
},
media: {
width: '88%',
marginLeft: 10,
marginRight: 10,
height: 0,
paddingBottom: '48%',
borderRadius: theme.spacing(2),
backgroundColor: '#fff',
position: 'relative',
transform: 'translateY(8px)',
paddingLeft: 10,
paddingRight: 10,
'&:after': {
content: '" "',
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
borderRadius: theme.spacing(2), // 16
opacity: 0.5,
},
},
buttonSeparator : {
display: 'flex',
justifyContent: 'space-between',
marginTop: theme.spacing(1),
},
content: {
padding: 24,
},
cta: {
marginTop: 24,
textTransform: 'initial',
},
}));
const AssociationCard = (props) => {
const styles = useStyles();
let history = useHistory();
const {
button: buttonStyles,
...contentStyles
} = useBlogTextInfoContentStyles();
const shadowStyles = useOverShadowStyles();
console.log(props);
console.log(history);
const { name, description, photo, slug } = props;
return (
<Card className={cx(styles.root, shadowStyles.root)}>
<CardMedia
className={styles.media}
image={photo || 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3.bp.blogspot.com%2F-AJ9Cw3DdY48%2FUFCb1npjRHI%2FAAAAAAAAALs%2Fy1BaWpM2WfI%2Fs1600%2FNature-wallpaper%2B%25286%2529.jpg&f=1&nofb=1'}
/>
<CardContent style={{width: '100%'}}>
<TextInfoContent
classes={contentStyles}
heading={name}
body={description || loremIpsum()}
/>
<Divider/>
<div className={styles.buttonSeparator}>
<Button className={buttonStyles} onClick={()=>history.push('/protected/v/associations/' + slug)}>Read more</Button>
<Button className={buttonStyles}>Become Member</Button>
</div>
</CardContent>
</Card>
);
};
AssociationCard.propTypes = {
name: PropTypes.string.isRequired,
description: PropTypes.string,
slug: PropTypes.string,
photo: PropTypes.string
};
export default AssociationCard;
import React from "react";
import { Col, Row } from "reactstrap";
import { SUNCard } from "./Card";
import PropTypes from "prop-types";
export default function CardGrid(props){
function CardGrid(props){
const chunkArrayIntoListOfArrays = (ar, num) => {
return ar.reduce(function(r, v, i) {
if (i % num === 0) r.push(ar.slice(i, i + num));
return r;
}, []);
};
let card_grid = props.chunk_size > 0 ? chunkArrayIntoListOfArrays(props.card_grid, props.chunk_size) : props.card_grid;
return (
<Col className="mb-5">
{props.card_grid && props.card_grid.map((card_rows, r)=>{
{card_grid.map((card_rows, r)=>{
return(
<Row key={'card_row '+r} className="card-wrapper mb-2">
{card_rows.map((card, c)=>{
......@@ -22,3 +31,15 @@ export default function CardGrid(props){
</Col>
)
}
CardGrid.propTypes = {
card_grid: PropTypes.array.isRequired,
component: PropTypes.elementType,
chunk_size: PropTypes.number,
};
CardGrid.defaultProps = {
chunk_size: 0
};
export default CardGrid;
import React from 'react';
import red from '@material-ui/core/colors/red';
import Checkbox from '@material-ui/core/Checkbox';
import { ValidatorComponent } from 'react-material-ui-form-validator';
const red300 = red['500'];
const style = {
right: 0,
fontSize: '12px',
color: red300,
position: 'absolute',
marginTop: '-25px',
};
class CheckboxValidator extends ValidatorComponent {
render() {
const { errorMessages, validators, requiredError, value, ...rest } = this.props;
return (
<div>
<Checkbox
{...rest}
ref={(r) => { this.input = r; }}
/>
{this.errorText()}
</div>
);
}
errorText() {
const { isValid } = this.state;
if (isValid) {
return null;
}
return (
<div style={style}>
{this.getErrorMessage()}
</div>
);
}
}
export default CheckboxValidator;
\ No newline at end of file
import uuid from 'uuid';
import { v4 as uuidv4 } from 'uuid';
import { Component } from 'react'
import React from 'react'
......@@ -23,7 +23,7 @@ class InfoWithTableHeader extends Component {
<x-fragment>
{Object.entries(this.props.data).map(([table_header, table_content])=> {
return (
<table key={uuid.v4()}>
<table key={uuidv4()}>
<thead>
<tr>
<td><h4>{table_header}</h4></td>
......@@ -31,7 +31,7 @@ class InfoWithTableHeader extends Component {
</thead>
<tbody>
{Object.entries(table_content).map(([row_header, row_content])=>{
return <Row key={uuid.v4()} row_header={row_header} row_content={row_content} />
return <Row key={uuidv4()} row_header={row_header} row_content={row_content} />
})}
</tbody>
</table>
......@@ -49,7 +49,7 @@ class InfoWithoutTableHeader extends Component {
<tbody>
{Object.entries(this.props.data).map(([row_header, row_content])=>{
console.log(row_header, row_content);
return <Row key={uuid.v4()} row_header={row_header} row_content={row_content} />
return <Row key={uuidv4()} row_header={row_header} row_content={row_content} />
})}
</tbody>
</table>
......
......@@ -4,7 +4,7 @@ import {AvField, AvForm, AvCheckbox, AvGroup, AvInput, AvFeedback} from "availit
import {Row, Col, Label, Button} from 'reactstrap'
import "./MembershipForm.css"
import {Helper} from "../../Helper";
import uuid from "uuid";
import { v4 as uuidv4 } from 'uuid';
export class MembershipForm extends Component {
constructor(props){
......@@ -54,7 +54,7 @@ export class MembershipForm extends Component {
onChange={(event) => this.handleMembershipChange('type_url', event.target.value)}
disabled={true}
>
<option key={uuid.v4()} value={this.state.membership.type.url}>{this.state.membership.type.type}</option>
<option key={uuidv4()} value={this.state.membership.type.url}>{this.state.membership.type.type}</option>
</AvField>
<AvField
type="select"
......@@ -99,7 +99,7 @@ export class MembershipForm extends Component {
disabled={true}
>
{this.props.membertypes.map(membertype=>
<option key={uuid.v4()} value={membertype.url}>{membertype.type}</option>
<option key={uuidv4()} value={membertype.url}>{membertype.type}</option>
)}
</AvField>
</Col>
......
......@@ -4,6 +4,7 @@ import Header from './Header/AssociationHeader';
import AssociationMemberSideBar from './SideBar/AssociationMemberSideBar';
import AssociationBoardSideBar from './SideBar/AssociationBoardSideBar';
import PublicSideBar from './SideBar/PublicSideBar';
import EmptySideBar from './SideBar/EmptySideBar';
import PageLayout from './PageLayout';
......@@ -24,6 +25,7 @@ class AssociationPageLayout extends Component{
sidebar = PublicSideBar
} else {
sidebar = this.props.location.pathname.search("boardmember") < 0 ? AssociationMemberSideBar: AssociationBoardSideBar ;
sidebar = this.props.location.pathname.search("add") < 0 ? sidebar : EmptySideBar ;
}
return (
......
import React, {Component} from 'react';
import {NavTab} from 'react-router-tabs';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import uuid from 'uuid';
import { v4 as uuidv4 } from 'uuid';
import { Link } from 'react-router-dom'
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { FaCheck, FaTimes, FaPause, FaBolt, FaQuestion } from "react-icons/fa";
......@@ -9,6 +8,10 @@ import Badge from '@material-ui/core/Badge';
import Avatar from '@material-ui/core/Avatar';
import { withStyles } from '@material-ui/core/styles';
import sizeMe from 'react-sizeme';
import AddIcon from '@material-ui/icons/Add';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import { withRouter } from "react-router-dom";
import StarsIcon from '@material-ui/icons/Stars';
function AssociationsNavDropdown(props){
......@@ -25,7 +28,7 @@ function AssociationsNavDropdown(props){
{
let association = association_membership.association;
let path = url+"/associations/"+association.slug+(association.is_board ? "/boardmember" : "/member");
return <Link className='dropdown-link' to={path} key={uuid.v4()}>
return <Link className='dropdown-link' to={path} key={uuidv4()}>
<DropdownItem>
{association_membership.association.name}
</DropdownItem>
......@@ -45,31 +48,48 @@ const SmallAvatar = withStyles(theme => ({
}))(Avatar);
const AssociationsNavTabs = (props) => {
const status_to_icon_dict = {
'Accepted': <FaCheck/>,
const status_to_dict = {
'Accepted': <AccountCircleIcon/>,
'Disputed': <FaBolt/>,
'Pending': <FaQuestion/>,
'Rejected': <FaTimes/>
};
return props.association_memberships.map((association_membership, id) =>
{
const getIsActive = (match, location, substring) => {
console.log(match, location, substring);
return location.pathname.includes(substring);
};
return props.association_memberships.map((association_membership, id) => {
let association = association_membership.association;
let path = props.url+"/associations/"+association.slug+(association.is_board ? "/boardmember" : "/member");
return <NavTab to={path} key={uuid.v4()}>
let icon;
let subpath = props.url + "/associations/" + association.slug;
let path = subpath + "/member";
if (association.is_board) {
if (props.path.includes(association.slug + "/boardmember")){
path = subpath + "/member";
icon = <AccountCircleIcon/>;
} else {
path = subpath + "/boardmember";
icon = <StarsIcon/>;
}
} else {
icon = status_to_dict[association_membership.status]
}
return <NavTab to={path} key={uuidv4()} isActive={(match, location) => getIsActive(match, location, subpath)} allowClickOnActive={true}>
<Badge
overlap="circle"
anchorOrigin={{
vertical: 'bottom',