Add new menu item

src/actions/statistics.js

@@ -7,7 +7,9 @@ import {
   WRITE_EVENT,
   ADD_EVENT,
   DELETE_EVENT,
-  GET_TRAINEE_BY_ID,
+  GET_PROFILES,
+  GET_SELECTED_PROFILE,
+  SET_STATUS,
 } from './types';
 
 export const getStaffEvents = () => (
@@ -38,20 +40,6 @@ export const getEventById = id => (
   }
 );
 
-export const getTraineeById = id => (
-  async (dispatch) => {
-    try {
-      const response = await axios.get(`/api/v1/profiles/${id}`);
-      dispatch({
-        type: GET_TRAINEE_BY_ID,
-        payload: response.data,
-      });
-    } catch (e) {
-      console.log(e);
-    }
-  }
-);
-
 export const getTrainees = () => (
   async (dispatch) => {
     try {
@@ -134,3 +122,49 @@ export const deleteEvent = event => (
       console.log(e);
     }
   });
+
+export const getProfiles = () => (
+  async (dispatch) => {
+    try {
+      const response = await axios.get('/api/v1/profiles/');
+      dispatch({
+        type: GET_PROFILES,
+        payload: response.data,
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  }
+);
+
+export const setStatus = (id, status) => (
+  async (dispatch) => {
+    try {
+      const response = await axios.patch(`/api/v1/profiles/${id}/`, {
+        role: status,
+      });
+      if (response.data.id) {
+        dispatch({
+          type: SET_STATUS,
+          payload: response.data,
+        });
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }
+);
+
+export const getSelectedProfile = id => (
+  async (dispatch) => {
+    try {
+      const response = await axios.get(`/api/v1/profiles/${id}/`);
+      dispatch({
+        type: GET_SELECTED_PROFILE,
+        payload: response.data,
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  }
+);

src/actions/types.js

@@ -15,7 +15,6 @@ export const GET_EVENTS = 'get_events';
 export const GET_EVENT_BY_ID = 'get_event_by_id';
 
 export const GET_TRAINEES = 'get_trainees';
-export const GET_TRAINEE_BY_ID = 'get_trainee_by_id';
 export const VISITOR_CHANGE = 'visitor_change';
 
 export const GET_NOTES_BY_EVENT = 'get_notes_by_event';
@@ -26,3 +25,7 @@ export const DELETE_EVENT = 'delete_event';
 export const WRITE_NOTE = 'write_note';
 export const CLEAR_NOTE = 'clear_note';
 export const ADD_EVENT_NOTE = 'add_note';
+
+export const GET_PROFILES = 'get_profiles';
+export const SET_STATUS = 'set_status';
+export const GET_SELECTED_PROFILE = 'get_selected_profile';

src/components/Header.js

@@ -43,7 +43,12 @@ const menuItems = [
     prefix: '',
     permissionLevel: 3,
   },
-];
+  {
+    text: 'Jelentkezések',
+    to: '/applications',
+    prefix: '',
+  },
+]
 
 const FixedMenu = ({ user }) => (
   <Menu fixed='top' size='large' pointing>

src/components/Main.js

@@ -9,7 +9,9 @@ import Profile from './pages/Profile';
 import Statistics from './pages/Statistics';
 import Groups from './pages/Groups';
 import News from './pages/News';
+import Applications from './pages/Applications';
 import EventDetail from './pages/EventDetail';
+import ApplicantProfile from './pages/ApplicantProfile';
 
 const Main = () => (
   <Switch>
@@ -22,6 +24,8 @@ const Main = () => (
     <Route path='/statistics' component={Statistics} />
     <Route path='/groups' component={Groups} />
     <Route path='/events/:id' component={EventDetail} />
+    <Route path='/applications' component={Applications} />
+    <Route path='/applicant/:id' component={ApplicantProfile} />
     <Route component={NotFound} />
   </Switch>
 );

src/components/forms/ConfirmModal.js

+import React, { Component } from 'react';
+import { Button, Header, Icon, Modal } from 'semantic-ui-react';
+
+class ConfirmModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
+   close = () => this.setState({ showModal: false })
+
+   open = () => this.setState({ showModal: true})
+
+  render() {
+    const { button, text, onAccept } = this.props;
+    const open = this.state.showModal;
+    return (
+      <Modal
+        open={open}
+        closeOnDimmerClick
+        trigger={button}
+        onOpen={this.open}
+        onClose={this.close}
+        size='small'
+        basic
+      >
+        <Header icon='question' content='Confirm' />
+        <Modal.Content>
+          <p>
+            Biztos hogy {text}?
+          </p>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            basic
+            color='red'
+            inverted
+            inverted
+            onClick={() => this.close()}
+          >
+            <Icon name='remove' /> No
+          </Button>
+          <Button
+            color='green'
+            inverted
+            onClick={() => { onAccept();
+                             this.close();
+                           }
+                    }
+          >
+            <Icon name='checkmark' /> Yes
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+export default ConfirmModal;

src/components/pages/Applications.js

+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import { Container, Table, Label, Button } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { getProfiles, setStatus } from '../../actions/statistics';
+import ConfirmModal from '../forms/ConfirmModal';
+
+class Applications extends Component {
+  componentWillMount() {
+    this.props.getProfiles();
+  }
+
+  renderApplicants() {
+    return this.props.profiles.map((profile) =>
+    { return (
+      <Table.Row>
+        <Table.Cell>
+          <Link to={`applicant/${profile.id}`}>
+            {profile.full_name}
+          </Link>
+        </Table.Cell>
+        { profile.signed ?
+          <Table.Cell textAlign='center'>
+            { profile.role === 'Student' ?
+              <Label color='green'>Elfogadva</Label>
+              :
+              null
+            }
+            { profile.role === 'Staff' ?
+              <Label color='blue'>Staff</Label>
+              :
+              null
+            }
+            { profile.role === 'Applicant' ?
+              <Label color='orange'>Jelentkezett</Label>
+              :
+              null
+            }
+            { profile.role === 'Denied' ?
+              <Label color='red'>Elutasítva</Label>
+              :
+              null
+            }
+          </Table.Cell>
+          :
+          <Table.Cell textAlign='center'>
+            <Label color='red'>Nem jelentkezett</Label>
+          </Table.Cell>
+        }
+        <Table.Cell>
+        <ConfirmModal
+          button = {<Button
+            color='blue'
+            size='tiny'
+          >
+          ADD STAFF STATUS
+        </Button>}
+        text='staff jogot adsz neki'
+        onAccept={() => this.props.setStatus(profile.id, 'Staff')}
+        />
+        </Table.Cell>
+      </Table.Row>
+    );
+    });
+  }
+
+  render() {
+    return (
+      <Container
+        textAlign='center'
+        style={{
+          padding: '80px'
+        }}
+      >
+        <Table color='blue' celled selectable compact>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Jelentkezettek</Table.HeaderCell>
+              <Table.HeaderCell textAlign='center'>Jelentkezés státusza:</Table.HeaderCell>
+              <Table.HeaderCell />
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.renderApplicants()}
+          </Table.Body>
+        </Table>
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({ trainees: { profiles }, user }) => ({ profiles, user });
+
+export default connect(mapStateToProps, { getProfiles, setStatus })(Applications);

src/reducers/TraineeReducer.js

-import { GET_TRAINEES, GET_TRAINEE_BY_ID } from '../actions/types';
+import { GET_TRAINEES, GET_PROFILES, GET_SELECTED_PROFILE, SET_STATUS } from '../actions/types';
 
-const INITIAL_STATE = {};
+const INITIAL_STATE = { profiles: [], selectedProfile: {} };
 
 export default (state = INITIAL_STATE, action) => {
   switch (action.type) {
     case GET_TRAINEES:
       return { ...state, trainees: [...action.payload] };
-    case GET_TRAINEE_BY_ID:
-      return { ...state, selectedTrainee: action.payload };
+    case GET_PROFILES:
+      return { ...state, profiles: [...action.payload] };
+    case GET_SELECTED_PROFILE:
+      return { ...state, selectedProfile: action.payload };
+    case SET_STATUS:
+      const index = state.profiles.findIndex(item => item.id === action.payload.id);
+      state.profiles.splice(index, 1, action.payload);
+      if (action.payload.id === state.selectedProfile.id) {
+        return { ...state, profiles: [...state.profiles], selectedProfile: action.payload };
+      }
+      return { ...state, profiles: [...state.profiles] }
     default:
       return state;
   }