feat(leaves): added table and calendar compoenents to leaves view

client/package.json

@@ -34,15 +34,15 @@
   ],
   "proxy": "http://localhost:9000",
   "devDependencies": {
-    "prop-types": "^15.7.2",
+    "@semantic-release/commit-analyzer": "^6.1.0",
+    "@semantic-release/github": "^5.2.10",
+    "@semantic-release/release-notes-generator": "^7.1.4",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.5",
     "prettier": "^1.16.4",
+    "prop-types": "^15.7.2",
     "redux-devtools": "^3.5.0",
-    "semantic-release": "^15.13.3",
-    "@semantic-release/commit-analyzer": "^6.1.0",
-    "@semantic-release/github": "^5.2.10",
-    "@semantic-release/release-notes-generator": "^7.1.4"
+    "semantic-release": "^15.13.3"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,json,css}": [

client/src/application/Holidays/Holidays.js

@@ -1,10 +1,9 @@
 import BigCalendar from 'react-big-calendar';
-import moment from 'moment';
 import React from 'react';
 import {connect} from 'react-redux';
 import '../../helpers/styles/react-big-calendar.css';
+import {localize} from '../../helpers/Constants/Constants';
 
-const localize = BigCalendar.momentLocalizer(moment);
 const Holidays = props => {
   const handleEventClick = event => {
     console.log(event);

client/src/application/Leaves/Leaves.js

@@ -1,26 +1,81 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import {Button} from '@material-ui/core';
-import {toggleCalendar} from '../../redux/actions/leaves-actions';
+import {changeLeavesState} from '../../redux/actions/leaves-actions';
+import PaginationTable from '../../components/PaginationTable/PaginationTable';
+import BigCalendar from 'react-big-calendar';
+import {localize} from '../../helpers/Constants/Constants';
 
 const Leaves = props => {
-  const {showCalendar, leaves} = props;
+  const {showCalendar, leaves, rows, rowsPerPage, page, order, orderBy} = props;
+
+  const handleChangePage = (event, page) => {
+    props.changeLeavesState({page});
+  };
+
+  const handleChangeRowsPerPage = event => {
+    props.changeLeavesState({page: 0, rowsPerPage: event.target.value});
+  };
+  const handleRequestSort = (event, property) => {
+    const localOrderBy = property;
+    let localOrder = 'desc';
+
+    if (orderBy === property && order === 'desc') {
+      localOrder = 'asc';
+    }
+
+    props.changeLeavesState({order: localOrder, orderBy: localOrderBy});
+  };
+
+  const handleEventClick = event => {
+    console.log(event);
+  };
 
   return (
     <>
-      <Button onClick={() => props.toggleCalendar(showCalendar)}>{showCalendar ? 'View as Table' : 'View in Calendar'}</Button>
+      <Button onClick={() => props.changeLeavesState({showCalendar: !showCalendar})}>{showCalendar ? 'View as Table' : 'View in Calendar'}</Button>
+      {showCalendar || (
+        <PaginationTable
+          rows={rows}
+          handleChangePage={handleChangePage}
+          handleChangeRowsPerPage={handleChangeRowsPerPage}
+          rowsPerPage={rowsPerPage}
+          handleRequestSort={handleRequestSort}
+          order={order}
+          orderBy={orderBy}
+          page={page}
+        />
+      )}
+      {showCalendar && (
+        <BigCalendar
+          popup
+          localizer={localize}
+          events={leaves}
+          startAccessor="start"
+          endAccessor="end"
+          defaultView={'month'}
+          views={['month', 'work_week']}
+          onSelectEvent={handleEventClick}
+        />
+      )}
+      />
     </>
   );
 };
 
 const mapStateToProps = state => {
   return {
     leaves: state.leaves.leaves,
-    showCalendar: state.leaves.showCalendar
+    showCalendar: state.leaves.showCalendar,
+    rows: state.leaves.rows,
+    rowsPerPage: state.leaves.rowsPerPage,
+    page: state.leaves.page,
+    order: state.leaves.order,
+    orderBy: state.leaves.orderBy
   };
 };
 
-const mapDispatchToProps = dispatch => ({toggleCalendar: dispatch(toggleCalendar())});
+const mapDispatchToProps = {changeLeavesState};
 
 export default connect(
   mapStateToProps,

client/src/helpers/Constants/Constants.js

@@ -1,4 +1,9 @@
+import BigCalendar from 'react-big-calendar';
+import moment from 'moment';
+
 export const apiUrls = {
   login: '/user/login/',
   user: '/user/'
 };
+
+export const localize = BigCalendar.momentLocalizer(moment);

client/src/redux/action-types.js

@@ -9,9 +9,11 @@ export const holidayActions = {
   DELETE_HOLIDAYS: 'DELETE_HOLIDAYS'
 };
 
+const LEAVES = '@leavesView/';
 export const leavesActions = {
-  ADD_LEAVES: 'ADD_LEAVES',
-  FETCH_LEAVES: 'FETCH_LEAVES',
-  DELETE_LEAVES: 'DELETE_LEAVES',
-  TOGGLE_CALENDAR: 'TOGGLE_CALENDAR'
+  ADD_LEAVES: LEAVES + 'ADD_LEAVES',
+  FETCH_LEAVES: LEAVES + 'FETCH_LEAVES',
+  DELETE_LEAVES: LEAVES + 'DELETE_LEAVES',
+  TOGGLE_CALENDAR: LEAVES + 'TOGGLE_CALENDAR',
+  UPDATE_STATE: LEAVES + 'UPDATE_STATE'
 };

client/src/redux/actions/leaves-actions.js

@@ -20,3 +20,8 @@ export const toggleCalendar = value => {
     payload: !value
   };
 };
+
+export const changeLeavesState = props => ({
+  type: leavesActions.UPDATE_STATE,
+  payload: props
+});

client/src/redux/reducers/index.js

@@ -1,6 +1,6 @@
 import {combineReducers} from 'redux';
-import login from './login';
-import holidays from './holidays';
-import leaves from './leaves';
+import login from './login-reducers';
+import holidays from './holidays-reducers';
+import leaves from './leaves-reducers';
 
 export default combineReducers({login, holidays, leaves});

client/src/redux/reducers/leaves-reducers.js

@@ -0,0 +1,69 @@
+import {leavesActions} from '../action-types';
+import moment from 'moment';
+
+const initialState = {
+  leaves: [
+    {
+      title: 'Name of item',
+      start: moment()
+        .add(1, 'days')
+        .toDate(),
+      end: moment()
+        .add(3, 'days')
+        .toDate()
+    },
+    {
+      title: 'Second Item',
+      start: moment().toDate(),
+      end: moment()
+        .add(3, 'hours')
+        .toDate()
+    },
+    {
+      title: 'Additional Item',
+      start: moment()
+        .add(3, 'hours')
+        .toDate(),
+      end: moment()
+        .add(5, 'hours')
+        .toDate()
+    }
+  ],
+  rows: [
+    {label: 'Name', loggedHours: 'Logged Hours', leaves: 'Leaves', leavesLeft: 'Leaves Left', overtime: 'Overtime'},
+    {label: 'A', loggedHours: 305, leaves: 0, leavesLeft: 30, overtime: 3.7},
+    {label: 'B', loggedHours: 452, leaves: 0, leavesLeft: 30, overtime: 25.0},
+    {label: 'C', loggedHours: 262, leaves: 0, leavesLeft: 30, overtime: 16.0},
+    {label: 'D', loggedHours: 159, leaves: 0, leavesLeft: 30, overtime: 6.0},
+    {label: 'E', loggedHours: 356, leaves: 0, leavesLeft: 30, overtime: 16.0},
+    {label: 'F', loggedHours: 408, leaves: 0, leavesLeft: 30, overtime: 3.2},
+    {label: 'G', loggedHours: 237, leaves: 0, leavesLeft: 30, overtime: 9.0},
+    {label: 'H', loggedHours: 375, leaves: 0, leavesLeft: 30, overtime: 0.0},
+    {label: 'I', loggedHours: 518, leaves: 0, leavesLeft: 30, overtime: 26.0},
+    {label: 'J', loggedHours: 392, leaves: 0, leavesLeft: 30, overtime: 0.2}
+  ],
+  page: 0,
+  rowsPerPage: 10,
+  order: 'asc',
+  orderBy: 'label',
+  showCalendar: false
+};
+
+export default function(state = initialState, action) {
+  switch (action.type) {
+    case leavesActions.FETCH_LEAVES:
+      return {
+        ...state,
+        leaves: action.payload.holidays
+      };
+    case leavesActions.TOGGLE_CALENDAR:
+      return {
+        ...state,
+        showCalendar: action.payload
+      };
+    case leavesActions.UPDATE_STATE:
+      return {...state, ...action.payload};
+    default:
+      return state;
+  }
+}