diff --git a/src/actions/statistics.js b/src/actions/statistics.js
index 53cc16119b0880a783a0a96aad457866fb165f25..1f92b1e2e54fe6001ef4d8722dc34e18136a9acb 100644
--- a/src/actions/statistics.js
+++ b/src/actions/statistics.js
@@ -12,6 +12,9 @@ import {
SET_STATUS,
ABSENT_CHANGE,
CHANGE_NO,
+ EDIT_EVENT,
+ WRITE_EDITED_EVENT,
+ SELECT_EVENT_FOR_EDIT,
} from './types';
export const getStaffEvents = () => (
@@ -104,10 +107,39 @@ export const writeEvent = ({ target: { name, value } }) => (
}
);
+export const selectEventForEdit = editEvent => (
+ (dispatch) => {
+ dispatch({ type: SELECT_EVENT_FOR_EDIT, payload: editEvent });
+ }
+);
-export const eventDate = (name, value) => (
+export const writeEditEvent = ({ target: { name, value } }) => (
(dispatch) => {
- dispatch({ type: WRITE_EVENT, payload: value, target: name });
+ dispatch({ type: WRITE_EDITED_EVENT, payload: value, target: name });
+ }
+);
+
+export const editEvent = ({ id, name, description, date }) => (
+ async (dispatch) => {
+ try {
+ const response = await axios.patch(`/api/v1/staff_events/${id}/`, {
+ name,
+ description,
+ date,
+ });
+ if (response.data.id) {
+ alert('Sikeres mentĂŠs!');
+ dispatch({
+ type: EDIT_EVENT,
+ payload: response.data,
+
+ });
+ } else {
+ alert('MentĂŠs nem sikerĂźlt!');
+ }
+ } catch (e) {
+ console.log(e);
+ }
}
);
diff --git a/src/actions/types.js b/src/actions/types.js
index 7624ef90f8ddf00a15ffd6bccffc7f2b9e3fc423..1922943890a4a208430bab2dd0de83e9c8e989e0 100644
--- a/src/actions/types.js
+++ b/src/actions/types.js
@@ -21,7 +21,10 @@ export const CHANGE_NO = 'change_no';
export const GET_NOTES_BY_EVENT = 'get_notes_by_event';
export const WRITE_EVENT = 'write_event';
+export const WRITE_EDITED_EVENT = 'write_selected_event';
export const ADD_EVENT = 'add_event';
+export const SELECT_EVENT_FOR_EDIT = 'select_event_for_edit';
+export const EDIT_EVENT = 'edit_event';
export const DELETE_EVENT = 'delete_event';
export const WRITE_NOTE = 'write_note';
diff --git a/src/components/forms/AddEventForm.js b/src/components/forms/AddEventForm.js
index e1d60e9bd4ddd74f0caee456ddfb077938320ec7..22b4016f42da3e2bdc3cc8609bf7f41939f83fe0 100644
--- a/src/components/forms/AddEventForm.js
+++ b/src/components/forms/AddEventForm.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { Modal, Button, Form, Input, Icon } from 'semantic-ui-react';
import { connect } from 'react-redux';
import { DateTimeInput } from 'semantic-ui-calendar-react';
-import { writeEvent, eventDate, addEvent } from '../../actions/statistics'
+import { writeEvent, addEvent } from '../../actions/statistics'
import { clearWrite } from '../../actions/news'
class AddEventForm extends Component {
@@ -21,7 +21,7 @@ class AddEventForm extends Component {
if (this.state.hasOwnProperty(name)) {
this.setState({ [name]: value });
}
- this.props.eventDate(name, value)
+ this.props.writeEvent({ target: {name, value} });
}
render() {
@@ -89,6 +89,7 @@ class AddEventForm extends Component {
onClick={() => {
this.props.addEvent(this.props.newEvent);
this.setState({ showModal: false, date: '' });
+ this.props.clearWrite();
}}
>
<Icon name='checkmark' /> HozzĂĄad
@@ -101,4 +102,4 @@ class AddEventForm extends Component {
const mapStateToProps = ({ events: { newEvent } }) => ({ newEvent });
-export default connect(mapStateToProps, { writeEvent, addEvent, eventDate, clearWrite })(AddEventForm);
+export default connect(mapStateToProps, { writeEvent, addEvent, clearWrite })(AddEventForm);
diff --git a/src/components/forms/EditEventForm.js b/src/components/forms/EditEventForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..59516b4995935bcb3b18c82ec1df4ba5db4b7abb
--- /dev/null
+++ b/src/components/forms/EditEventForm.js
@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import { Modal, Button, Form, Input, Icon } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { DateTimeInput } from 'semantic-ui-calendar-react';
+import {
+ writeEditEvent,
+ editEvent,
+} from '../../actions/statistics'
+import { clearWrite } from '../../actions/news'
+
+class EditEventForm extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ showModal: false,
+ date: '',
+ };
+ }
+
+ // Handling change in redux action creator throws an exception
+ // Temporal solotion using the components state to display, instead redux state
+ handleChange = (event, {name, value}) => {
+ if (this.state.hasOwnProperty(name)) {
+ this.setState({ [name]: value });
+ }
+ this.props.writeEditEvent({target: {name: name, value: value}})
+ }
+
+ render() {
+ const { name, date, description } = this.props.editedEvent;
+ return (
+ <Modal
+ open={this.state.showModal}
+ trigger={
+ <Button
+ compact
+ onClick={() => { this.props.onClick();
+ this.setState({ showModal: true }); }}
+ size='mini'
+ >
+ Szerkeszt
+ </Button>
+ }
+ >
+ <Modal.Header>Alkalom szerkesztĂŠse:</Modal.Header>
+ <Modal.Content
+ style={{
+ paddingTop: '20px',
+ }}
+ >
+ <Form>
+ <Form.Field
+ control={Input}
+ label='NĂŠv'
+ name='name'
+ onChange={e => this.props.writeEditEvent(e)}
+ value={name}
+ style={{
+ marginBottom: '20px',
+ }}
+ placeholder='NĂŠv'
+ />
+ <Form.TextArea
+ name='description'
+ label='LeĂrĂĄs:'
+ placeholder='RĂśvid leĂrĂĄs'
+ value={description}
+ onChange={e => this.props.writeEditEvent(e)}
+ />
+ <DateTimeInput
+ name="date"
+ label="DĂĄtum:"
+ dateFormat='YYYY-MM-DD'
+ placeholder="DĂĄtum"
+ value={date}
+ iconPosition="left"
+ onChange={this.handleChange}
+ />
+ </Form>
+ </Modal.Content>
+ <Modal.Actions>
+ <Button
+ inverted
+ color='red'
+ onClick={() => { this.setState({ showModal: false });
+ this.props.clearWrite();
+ }}
+ >
+ <Icon name='remove' />
+ MĂŠgse
+ </Button>
+ <Button
+ inverted
+ color='green'
+ onClick={() => {
+ this.props.editEvent(this.props.editedEvent);
+ this.setState({ showModal: false, date: '' });
+ this.props.clearWrite();
+ }}
+ >
+ <Icon name='checkmark' /> Szerkeszt
+ </Button>
+ </Modal.Actions>
+ </Modal>
+ );
+ }
+}
+
+const mapStateToProps = ({ events: { editedEvent } }) => ({ editedEvent });
+
+export default connect(mapStateToProps, { writeEditEvent, editEvent, clearWrite })(EditEventForm);
diff --git a/src/components/pages/Events.js b/src/components/pages/Events.js
index 2f1221c45d5863874cf0e254ef0770e6c25377fc..d5b6d30b8b3eb9f69ac2c3df9059accaa4feb5ee 100644
--- a/src/components/pages/Events.js
+++ b/src/components/pages/Events.js
@@ -3,8 +3,9 @@ import moment from 'moment';
import { Link } from 'react-router-dom';
import { Container, Table, Button } from 'semantic-ui-react';
import { connect } from 'react-redux';
-import { getStaffEvents, deleteEvent } from '../../actions/statistics';
+import { getStaffEvents, deleteEvent, selectEventForEdit } from '../../actions/statistics';
import AddEventForm from '../forms/AddEventForm';
+import EditEventForm from '../forms/EditEventForm';
import ConfirmModal from '../forms/ConfirmModal';
class Events extends Component {
@@ -37,6 +38,7 @@ class Events extends Component {
}
onAccept={() => this.props.deleteEvent(event)}
/>
+ <EditEventForm onClick={() => this.props.selectEventForEdit(event)} />
</Table.Cell>
</Table.Row>
);
@@ -68,4 +70,4 @@ class Events extends Component {
const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
-export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(Events);
+export default connect(mapStateToProps, { getStaffEvents, selectEventForEdit, deleteEvent })(Events);
diff --git a/src/reducers/EventReducer.js b/src/reducers/EventReducer.js
index 5dd067d018da28027a91239edfb17d9b7a41637c..72a976407b8a514e31953543163f3cb92b6a1665 100644
--- a/src/reducers/EventReducer.js
+++ b/src/reducers/EventReducer.js
@@ -8,9 +8,12 @@ import {
CLEAR_WRITE,
ABSENT_CHANGE,
CHANGE_NO,
+ SELECT_EVENT_FOR_EDIT,
+ EDIT_EVENT,
+ WRITE_EDITED_EVENT,
} from '../actions/types';
-const INITIAL_STATE = { events: [], newEvent: {} };
+const INITIAL_STATE = { events: [], newEvent: {}, editedEvent: {} };
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
@@ -75,8 +78,16 @@ export default (state = INITIAL_STATE, action) => {
case DELETE_EVENT:
state.events.splice(state.events.indexOf(action.payload), 1);
return { ...state, events: [...state.events] };
+ case SELECT_EVENT_FOR_EDIT:
+ return { ...state, editedEvent: action.payload }
+ case WRITE_EDITED_EVENT:
+ return { ...state, editedEvent: { ...state.editedEvent, [action.target]: action.payload } };
+ case EDIT_EVENT:
+ const index = state.events.findIndex(item => item.id === action.payload.id);
+ state.events.splice(index, 1, action.payload);
+ return { ...state, events: [...state.events] };
case CLEAR_WRITE:
- return { ...state, newEvent: {} };
+ return { ...state, newEvent: {}, editedEvent: {} };
default:
return state;
}