Commit 60395ee8 authored by TJHeeringa's avatar TJHeeringa

Upgraded eventMemberModal

parent 52fdbc64
import React, { Component } from 'react'
import { Main } from './Main/Main'
import { AuthenticationContext} from "./Contexts/Authentication";
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'
......@@ -8,10 +9,25 @@ import '@icon/open-iconic/open-iconic.css'
library.add(faSignOutAlt, faUser, faIgloo, faBars, faCheck, faTimes, faHome, faPlus, faChevronLeft);
class App extends Component {
constructor(props){
super(props);
const login = () => this.setState({});
const logout = ()=> this.setState({});
this.state = {authentication: {
authenticated: false,
login: login,
logout: logout
}}
}
render() {
return (
<div className="App">
<Main/>
<AuthenticationContext.Provider value={this.state.authentication}>
<Main/>
</AuthenticationContext.Provider>
</div>
);
}
......
......@@ -5,7 +5,7 @@ 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 "../AlertHandler";
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
import {Authorized} from "../../Main/Authorized/Authorized";
......
......@@ -5,7 +5,7 @@ import { Row, Col } from 'reactstrap'
import { Helper } from "App/Helper";
import NumericInput from 'react-numeric-input';
import uuid from "uuid";
import {AlertHandlerContext} from "../AlertHandler";
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
export class AssociationMembertypeForm extends Component {
......
......@@ -4,7 +4,7 @@ import { AvForm, AvInput, AvField } from "availity-reactstrap-validation";
import { Row, Col } from 'reactstrap'
import uuid from "uuid";
import { Helper } from "App/Helper";
import {AlertHandlerContext} from "../AlertHandler";
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
import {Authorized} from "../../Main/Authorized/Authorized";
......
......@@ -4,7 +4,7 @@ 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 {AlertHandlerContext} from "../AlertHandler";
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
import {Authorized} from "../../Main/Authorized/Authorized";
......
......@@ -7,7 +7,7 @@ import { Grid, PagingPanel, Table, TableHeaderRow, TableSelection, TableFilterRo
import { CSVLink } from "react-csv";
import { Button } from 'reactstrap'
import { Helper } from "App/Helper";
import { AlertHandlerContext } from "../AlertHandler";
import { AlertHandlerContext } from "../../Contexts/AlertHandler";
export class MemberGrid extends Component {
......
......@@ -21,7 +21,7 @@ import { withStyles } from "@material-ui/core/styles";
import 'App/Components/Header/Header.css';
import Header from "App/Components/PageLayout/Header/Header";
import Sidebar from "App/Components/PageLayout/SideBar/SideBar";
import {AlertHandler, AlertHandlerContext} from "../AlertHandler";
import {AlertHandler, AlertHandlerContext} from "../../Contexts/AlertHandler";
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import AvatarMenu from "./Menu/AvatarMenu";
......
import React from "react";
import { Route, Redirect } from "react-router-dom";
import { useAuth } from "../Contexts/Authentication";
function PrivateRoute({ component: Component, ...rest }) {
const { authenticated } = useAuth();
return (
<Route
{...rest}
render={props =>
(authenticated || localStorage.getItem('authenticated') === "true") ? (
<Component {...props} />
) : (
<Redirect
to={{ pathname: "account/login", state: { referer: props.location } }}
/>
)
}
/>
);
}
export default PrivateRoute;
\ No newline at end of file
......@@ -8,7 +8,7 @@ import { Helper } from "App/Helper";
import { Osiris } from 'App/Components/Profile/Osiris'
import { Info } from "App/Components/Info";
import uuid from "uuid";
import {AlertHandlerContext} from "../AlertHandler";
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
import {Authorized} from "../../Main/Authorized/Authorized";
......
import { createContext, useContext } from 'react';
export const AuthenticationContext = createContext({
authenticated: false,
login: ()=>{},
logout: ()=>{},
});
export function useAuth() {
return useContext(AuthenticationContext);
}
\ No newline at end of file
......@@ -5,7 +5,7 @@ import { RequestMembership } from './RequestMembership'
import Get from "restful-react/lib/Get";
import { AvForm, AvField, AvCheckbox, AvCheckboxGroup } from "availity-reactstrap-validation";
import { Helper } from "App/Helper";
import {AlertHandlerContext} from "../../../Components/AlertHandler";
import {AlertHandlerContext} from "../../../Contexts/AlertHandler";
import {Authorized} from "../Authorized";
......
......@@ -12,8 +12,7 @@ import { MergeProfilesViewWithRouter } from 'App/Screens/Profile/MergeProfilesVi
import { ResolveMembershipWithRouter } from "App/Screens/Profile/ResolveMembership";
import SimplePageLayout from "../../Components/PageLayout/SimplePageLayout";
import AssociationPageLayout from "../../Components/PageLayout/AssociationPageLayout";
import { Helper } from 'App/Helper';
import { AlertHandlerContext } from "../../Components/AlertHandler";
import { AlertHandlerContext } from "../../Contexts/AlertHandler";
export class Authorized extends Component {
......
......@@ -12,7 +12,7 @@ import { MembershipEndWithRouter } from "App/Screens/Profile/MembershipEnd";
class MemberRoutes extends Component {
render() {
const {show_board_view_button, committees, association, association_membership, path} = this.props;
const {show_board_view_button, committees, association, association_membership, path, sunmember} = this.props;
return (
<x-fragment>
{/*ROUTES*/}
......@@ -73,6 +73,7 @@ class MemberRoutes extends Component {
<CalendarWithRouter
association={association}
board={false}
association_membership={association_membership}
/>}
/>
{/*Committee archive*/}
......
......@@ -2,18 +2,7 @@ import React, { Component } from 'react'
import { Authorized } from './Authorized/Authorized'
import { NotAuthorized } from './NotAuthorized/NotAuthorized'
import { BrowserRouter as Router, Redirect, Route, } from "react-router-dom"
const PrivateRoute = ({ component: Component, path, ...rest }) => (
<Route path={path} render={(props) => (
localStorage.getItem('authenticated') === "true"
? <Component {...rest} {...props} />
: <Redirect to={{
pathname: '/',
state: { from: props.location }
}} />
)} />
);
import PrivateRoute from 'App/Components/PrivateRoute'
export class Main extends Component {
render() {
......
......@@ -4,7 +4,7 @@ import { AvForm, AvInput } from 'availity-reactstrap-validation'
import { withRouter } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Helper } from "App/Helper";
import {AlertHandlerContext} from "../../Components/AlertHandler";
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
import {Authorized} from "../Authorized/Authorized";
......
......@@ -3,7 +3,7 @@ import { Button, Col, Container, FormText, Row } from 'reactstrap'
import { AvForm, AvField } from 'availity-reactstrap-validation'
import { Link, Redirect, withRouter } from "react-router-dom"
import { Helper } from "../../Helper";
import {AlertHandlerContext} from "../../Components/AlertHandler";
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
import {Authorized} from "../Authorized/Authorized";
class Login extends Component {
......
......@@ -39,7 +39,8 @@ class AssociationCalendar extends Component {
};
componentDidMount() {
Helper.api_call(this.props.association.url + "/events", "GET", undefined, "json",
Helper.api_call(process.env.REACT_APP_API_URL + "/events?association__slug="+this.props.association.slug, "GET", undefined, "json",
// Helper.api_call(this.props.association.url + "/events", "GET", undefined, "json",
(data)=>this.setState({events: data.results.map(event_data=>this.morphDataToEvent(event_data))})
);
Helper.api_call(process.env.REACT_APP_API_URL + "/event_types?association__slug="+this.props.association.slug, "GET", undefined, "json",
......@@ -148,8 +149,13 @@ class AssociationCalendar extends Component {
};
handleEventSelect(event){
Helper.api_call(this.props.association.url + "/events/" + event.slug, "GET", undefined, "json",
console.log(this.state);
Helper.api_call(process.env.REACT_APP_API_URL +"/associations/student-union/events/ebbf1381-5bf3-428d-a6cf-96039911a170", "GET", undefined, "json",
// Helper.api_call(this.props.association.url + "/events/" + event.slug, "GET", undefined, "json",
(data)=>this.setState(prevState=> {
console.log(prevState.enrollments);
console.log(event);
console.log(prevState.enrollments.find(enrollment => enrollment.event.slug === event.slug));
return {
current_event: this.morphDataToEvent(data),
current_enrollment: prevState.enrollments.find(enrollment => enrollment.event.slug === event.slug) || {},
......@@ -197,9 +203,15 @@ class AssociationCalendar extends Component {
});
};
handleEventEnroll(enrollment_option){
handleEventEnroll(){
console.log(this.state.current_enrollment);
Helper.api_call(process.env.REACT_APP_API_URL + "/enrollments", "POST",
{enrollment_option: enrollment_option, event: this.state.current_event},
{
...this.state.current_enrollment,
event: this.state.current_event.url,
association: this.state.current_event.association,
profile: this.props.association_membership.profile.url,
},
"json",
(enrollment)=>this.setState(prevState=>{return {
current_enrollment: enrollment,
......@@ -234,6 +246,7 @@ class AssociationCalendar extends Component {
}
handleEnrollmentChange = (field, value) => {
console.log(value);
this.setState(prevState => {
let current_enrollment = prevState.current_enrollment;
current_enrollment[field] = value;
......@@ -244,11 +257,9 @@ class AssociationCalendar extends Component {
render() {
return (
<>
{/*<BackButton history={this.props.history} container={true}/>*/}
{this.props.board ?
<EventModalBoard
modal={this.state.modal}
open={this.state.modal}
create={this.state.create}
event_types={this.state.event_types}
current_event={this.state.current_event}
......@@ -262,8 +273,7 @@ class AssociationCalendar extends Component {
/>
:
<EventModalMember
modal={this.state.modal}
enrolled={false}
open={this.state.modal}
current_event={this.state.current_event}
current_enrollment={this.state.current_enrollment}
handleEventUnenroll={()=>this.handleEventUnenroll()}
......@@ -271,31 +281,30 @@ class AssociationCalendar extends Component {
handleEventEnrollChange={()=>this.handleEventEnrollChange()}
handleEnrollmentChange={(field, value)=>this.handleEnrollmentChange(field, value)}
cancelModal={()=>this.cancelModal()}
association_membership={this.props.association_membership}
/>
}
<>
<div className="box">
<h3>Calendar</h3>
<hr className="box-title-separator"/>
<Calendar
selectable={this.props.board}
localizer={localizer}
events={this.state.events}
defaultView={Views.WEEK}
startAccessor="start_date"
endAccessor="end_date"
style={{ height: 700 }}
onSelectEvent={event => this.handleEventSelect(event)}
onSelectSlot={this.handleSelect}
components={{
agenda: {
event: (event)=>this.EventAgenda(event),
},
}}
/>
</div>
</>
<div className="box">
<h3>Calendar</h3>
<hr className="box-title-separator"/>
<Calendar
selectable={this.props.board}
localizer={localizer}
events={this.state.events}
defaultView={Views.WEEK}
startAccessor="start_date"
endAccessor="end_date"
style={{ height: 700 }}
onSelectEvent={event => this.handleEventSelect(event)}
onSelectSlot={this.handleSelect}
components={{
agenda: {
event: (event)=>this.EventAgenda(event),
},
}}
/>
</div>
</>
)
}
......
......@@ -116,7 +116,7 @@ class EventModalBoard extends Component {
return (
<Modal
show={this.props.modal}
show={this.props.open}
size={'lg'}
aria-labelledby="contained-modal-title-vcenter"
centered={true}
......
......@@ -2,21 +2,36 @@ import React, {Component} from "react";
import { AvField, AvForm, AvCheckbox, AvGroup, AvInput, AvFeedback, AvRadioGroup, AvRadio } from "availity-reactstrap-validation";
import Modal from 'react-bootstrap/Modal';
import {Button, Col, Container, Row} from "reactstrap";
import Typography from '@material-ui/core/Typography';
import { isEmpty } from 'lodash';
export class EventModalMember extends Component {
handleValidSubmit = (event, values) => {
if (this.props.create) {
this.props.handleEventEnroll();
} else {
console.log(this.props.current_enrollment.slug);
if (this.props.current_enrollment.slug) {
this.props.handleEventEnrollChange();
} else {
this.props.handleEventEnroll();
}
};
// isEnrolled = (enrollments) => {enrollments.find(enrollment=>enrollment.profile === this.props.association_membership.profile.url)};
render() {
const { open, current_event, current_enrollment } = this.props;
// console.log(current_event);
// console.log(current_event.enrollments);
// console.log(this.props.sunmember);
// console.log(association_membership);
// console.log(association_membership.profile.url);
// const enrolled = this.isEnrolled(current_event.enrollments || []);
const enrolled = !isEmpty(current_enrollment);
console.log(enrolled);
console.log(current_enrollment);
return (
<Modal
show={this.props.modal}
show={open}
size={'m'}
aria-labelledby="contained-modal-title-vcenter"
centered={true}
......@@ -24,36 +39,47 @@ export class EventModalMember extends Component {
<AvForm id="modal-event-form" onValidSubmit={this.handleValidSubmit} ref={c => (this.form = c)}>
<Modal.Header>
<Modal.Title id="contained-modal-title-vcenter">
{this.props.current_event.title}
{current_event.name}
</Modal.Title>
<Typography variant={'caption'}>
{current_event.start_date.toLocaleString()} till {current_event.end_date.toLocaleString()}
</Typography>
</Modal.Header>
<Modal.Body>
<p>{this.props.current_event.description}</p>
<AvRadioGroup name="enroll" label="" required value={this.props.current_enrollment.slug}
onChange={(event) => this.props.handleEnrollmentChange('enrollment_option', event.target.event)}
<p>{current_event.description}</p>
<AvRadioGroup
name="enroll"
label=""
required
>
{this.props.current_event.enrollment_options.map((option, id)=>
<AvRadio key={option+id} label={'' + option.price + ": " + option.title} value={option.slug || ""} />
{current_event.enrollment_options.map((option, id)=>
<AvRadio
key={option+id}
label={'' + option.participation_fee + ": " + option.name}
value={option.url}
checked={current_enrollment.enrollment_option && option.url === current_enrollment.enrollment_option.url}
onChange={(event) => this.props.handleEnrollmentChange('enrollment_option', event.target.value)}
/>
)}
</AvRadioGroup>
</Modal.Body>
<Modal.Footer style={{'justifyContent': 'space-between'}}>
<div>
{this.props.current_event.enrollable === 'true' && this.props.enrolled &&
{current_event.unenrollable && enrolled &&
<Button color='primary' onClick={()=>{this.props.handleEventUnenroll()}}>Unenroll</Button>
}
</div>
<div>
{this.props.enrolled
? (this.props.current_event.enrollable === 'true' &&
{enrolled
? (current_event.enrollable &&
<Button color='primary' type="submit">Save</Button>
)
: (this.props.current_event.enrollable === 'true' &&
: (current_event.enrollable &&
<Button color='primary' type="submit">Enroll</Button>
)
}
&nbsp;
<Button onClick={()=>{this.props.cancelModal()}}>{this.props.current_event.enrollable === 'true' ? 'Cancel' : 'Close'}</Button>
<Button onClick={()=>{this.props.cancelModal()}}>{current_event.enrollable ? 'Cancel' : 'Close'}</Button>
</div>
</Modal.Footer>
</AvForm>
......
......@@ -6,7 +6,7 @@ import { withRouter, Redirect } from 'react-router-dom'
import { Get } from "restful-react";
import { Helper } from "App/Helper";
import {BackButton} from "../../Components/BackButton";
import {AlertHandlerContext} from "../../Components/AlertHandler";
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
import {Authorized} from "../../Main/Authorized/Authorized";
......
......@@ -4,7 +4,7 @@ import React from 'react'
import { Button } from 'reactstrap'
import {AvForm, AvField, AvInput} from 'availity-reactstrap-validation'
import { Helper } from "App/Helper";
import {AlertHandlerContext} from "../../Components/AlertHandler";
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
import {Authorized} from "../../Main/Authorized/Authorized";
......
......@@ -6,7 +6,7 @@ import './GroupMemberManagementGroupMemberList.css';
import { FilteringState, SortingState,IntegratedSorting, EditingState } from '@devexpress/dx-react-grid';
import { Grid, Table, TableHeaderRow, TableEditRow, TableEditColumn } from '@devexpress/dx-react-grid-bootstrap4';
import { Helper } from "App/Helper";
import { AlertHandlerContext } from "../../Components/AlertHandler";
import { AlertHandlerContext } from "../../Contexts/AlertHandler";
export class GroupMemberManagementGroupMemberList extends Component {
......
......@@ -4,7 +4,7 @@ import {Button, Container} from "reactstrap";
import {AvForm} from "availity-reactstrap-validation";
import {BackButton} from "App/Components/BackButton";
import {Helper} from "App/Helper";
import {AlertHandlerContext} from "../../Components/AlertHandler";
import {AlertHandlerContext} from "../../Contexts/AlertHandler";
export class MembershipEnd extends Component {
......
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