Skip to content

Commit

Permalink
Merge pull request #36 from FedeMadoery/master
Browse files Browse the repository at this point in the history
[WIP] Issue #22
  • Loading branch information
otech47 authored Jan 14, 2019
2 parents 5bd787b + 28cfb60 commit 4fc50a8
Show file tree
Hide file tree
Showing 12 changed files with 164 additions and 138 deletions.
4 changes: 2 additions & 2 deletions config/paths.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
var path = require('path')
var fs = require('fs')
const path = require('path')
const fs = require('fs')

const projectDirectory = fs.realpathSync(process.cwd())
const resolve = relativePath => path.resolve(projectDirectory, relativePath)
Expand Down
87 changes: 81 additions & 6 deletions web/components/BlockList.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,87 @@
import React from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import { cloneDeep } from 'lodash';

import SetBlock from './SetBlock';
import Text from './Text';
import { DEFAULT_SETBLOCKS } from '../constants';

import {
setEnableSubmit, updateUnsavedSetblocks,
} from '../reducers/environment';

class BlockList extends React.Component {

completeWithEmptySetBlocks(setBlocks) {
const defaultSetBlocks = cloneDeep(DEFAULT_SETBLOCKS);
let replacedBlocks = 0;
setBlocks = _.orderBy(setBlocks, ['blockTime'], ['asc']); // Use Lodash to sort array by 'name'
setBlocks = _.uniqBy(setBlocks, 'blockTime'); // Use Lodash to delete repeated blockTimes
if (setBlocks && setBlocks.length > 0) { // To avoid iterate if the array is empty, return default
defaultSetBlocks.forEach((setBlock, index, theArray) => {
if (setBlocks && replacedBlocks < setBlocks.length && setBlock.blockTime === setBlocks[replacedBlocks].blockTime) {
theArray[index] = setBlocks[replacedBlocks];
replacedBlocks++;
}
});
}
return defaultSetBlocks
}

updateUnsavedSetBlock(selectedDay, index, editedSetBlock ) {
const { unsavedSetBlocks } = this.props
let dayEdited = unsavedSetBlocks[selectedDay];
dayEdited[index] = editedSetBlock; // index 0 = SetBlock with blockTime 1
this.props.updateUnsavedSetblocks({
...unsavedSetBlocks,
[selectedDay]: dayEdited
})
this.props.setEnableSubmit(true)
}

export default class BlockList extends React.Component {
render() {
return (
<div className='BlockList'>
<h6>BlockList</h6>
</div>
);
const {
editModeSchedule, currentWeeklySetblocks, unsavedSetBlocks, selectedDay
} = this.props;
const selectedDayFormatted = moment(selectedDay).format('YYYY-MM-DD')
let setBlocksByDate = _.groupBy(currentWeeklySetblocks, 'date');
let setBlocks = setBlocksByDate[selectedDayFormatted];

if (editModeSchedule && unsavedSetBlocks ) {
// As it is your schedule, you can see the empty blocks, to complete then, that's why it is completed with the missing ones
return this.completeWithEmptySetBlocks(setBlocks).map((setBlock, index) => {
return (
<SetBlock
data={setBlock}
key={setBlock.id || (index + selectedDayFormatted)}
editMode={editModeSchedule}
updateSetBlock={(editedSetBlock) => this.updateUnsavedSetBlock(selectedDayFormatted, index, editedSetBlock )}
/>
)
})
} else if (!editModeSchedule && setBlocks) {
return setBlocks.map((setBlock, index) => {
return <SetBlock data={setBlock} key={setBlock.id || index} />
})
} else {
return (
<Text weight='600' align='center'> This user hasn't committed any Setblocks for this day </Text>
)
}
}
}

const mapStateToProps = ({ environment }) => {
return {
...environment
};
};

const mapDispatchToProps = (dispatch) => {
return {
setEnableSubmit: (enableSubmit) => dispatch(setEnableSubmit(enableSubmit)),
updateUnsavedSetblocks: (unsavedSetBlocks) => dispatch(updateUnsavedSetblocks(unsavedSetBlocks))
};
};
export default connect(mapStateToProps, mapDispatchToProps)(BlockList);
4 changes: 2 additions & 2 deletions web/components/CommitBlock.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import moment from 'moment';
import { connect } from 'react-redux';
import { Check } from 'styled-icons/feather/Check.cjs'

import Text from './Text';
import Card from './Card';
import Flex from './Flex';
import Text from './Text';

import { createSetBlock, setEditModeSchedule, updateSetBlock } from '../reducers/environment';

Expand Down Expand Up @@ -82,7 +82,7 @@ class CommitBlock extends React.Component {
size='10px'
ml='-10rem'
>
{' Hours Counter: ' + this.countHours()}
{this.countHours() + ' work hours scheduled'}
</Text>

<Flex row center>
Expand Down
11 changes: 6 additions & 5 deletions web/components/DayBlock.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import React from 'react';


import Card from './Card';
import Flex from './Flex';
import Text from './Text';
import Card from './Card';

class DayBlock extends React.Component {

Expand All @@ -17,7 +18,7 @@ class DayBlock extends React.Component {
<Card
key={setBlock.id}
height='8px'
width='5px'
width='8px'
borderBottom={setBlock.blockFraction === 1.0 ? '4px #F93B6A solid' : (setBlock.blockFraction === 0.5 ? '4px #F93B6A solid' : '')}
borderTop={setBlock.blockFraction === 1.0 ? '4px #F93B6A solid' : (setBlock.blockFraction === -0.5 ? '4px #F93B6A solid' : '')}
bg='lightGrey'
Expand Down Expand Up @@ -47,12 +48,12 @@ class DayBlock extends React.Component {
onClick={() => onClick(day)}
>
<Flex row center>
<Flex column>
<Flex column mx='auto'>
{ // If you are waiting for the API to respond, it does not render
!fetchingData && this.renderTinySetBlocks(currentWeeklySetblocks, day)
}
</Flex>
<Flex column>
<Flex column mr='auto'>
<Text align='center' mb='0rem' color={selected ? 'red' : 'textSecondary'}>
{day.getDate()}
</Text>
Expand Down
2 changes: 1 addition & 1 deletion web/components/NavigationBar.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
var _ = require('lodash');
import _ from 'lodash'

import NavLinkItem from './NavLinkItem';

Expand Down
76 changes: 19 additions & 57 deletions web/components/SchedulePage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,20 @@ import moment from 'moment';
import { connect } from 'react-redux';
import { cloneDeep } from 'lodash';

import BlockList from './BlockList';
import CommitBlock from './CommitBlock';
import Flex from './Flex';
import LoadingDots from './Loading';
import ScheduleHeader from './ScheduleHeader';
import SideBar from './SideBar';
import Flex from './Flex';
import SetBlock from './SetBlock';
import Text from './Text';
import LoadingDots from './Loading';
import CommitBlock from './CommitBlock';
import { DEFAULT_SETBLOCKS } from '../constants/index';

import { DEFAULT_SETBLOCKS } from '../constants';

import {
fetchCurrentTeamMemberById,
setEditModeSchedule,
setEnableSubmit,
setSelectedDay,
updateUnsavedSetblocks
} from '../reducers/environment';
Expand All @@ -23,7 +25,6 @@ import {
class SchedulePage extends React.Component {
state = {
daysOfWeek: [],
enableSubmit: false,
}

componentDidMount() {
Expand Down Expand Up @@ -72,7 +73,7 @@ class SchedulePage extends React.Component {
}
if ((editModeSchedule && currentTeamMember !== nextProps.currentTeamMember) || selectedDay !== nextProps.selectedDay) {
this.makeSetBlocksForEdit(nextProps.currentWeeklySetblocks);
this.setState({ enableSubmit: false })
this.props.setEnableSubmit(false)
}
}

Expand All @@ -89,61 +90,21 @@ class SchedulePage extends React.Component {
let replacedBlocks = 0;
setBlocks = _.orderBy(setBlocks, ['blockTime'], ['asc']); // Use Lodash to sort array by 'name'
setBlocks = _.uniqBy(setBlocks, 'blockTime'); // Use Lodash to delete repeated blockTimes
defaultSetBlocks.forEach((setBlock, index, theArray) => {
if (setBlocks && replacedBlocks < setBlocks.length && setBlock.blockTime === setBlocks[replacedBlocks].blockTime) {
theArray[index] = setBlocks[replacedBlocks];
replacedBlocks++;
}
});
return defaultSetBlocks
}

updateUnsavedSetBlock(selectedDay, index, editedSetBlock ) {
const { unsavedSetBlocks } = this.props
let dayEdited = unsavedSetBlocks[selectedDay];
dayEdited[index] = editedSetBlock; // index 0 = SetBlock with blockTime 1
this.props.updateUnsavedSetblocks({
...unsavedSetBlocks,
[selectedDay]: dayEdited
})
this.setState({ enableSubmit: true })
}

renderSetBlocks = (selectedDay) => {
const { editModeSchedule, currentWeeklySetblocks, unsavedSetBlocks } = this.props;
selectedDay = moment(selectedDay).format('YYYY-MM-DD')
const setBlocksByDate = _.groupBy(currentWeeklySetblocks, 'date')
let setBlocks = setBlocksByDate[selectedDay];

if (editModeSchedule && unsavedSetBlocks) {
// If the match.params don't have a teamMemberId are u seeing your schedule
// As it is your schedule, you can see the empty blocks, to complete then, that's why it is completed with the missing ones
return this.completeWithEmptySetBlocks(setBlocks).map((setBlock, index) => {
return (
<SetBlock
data={setBlock}
key={setBlock.id || (index + selectedDay)}
editMode={editModeSchedule}
updateSetBlock={(editedSetBlock) => this.updateUnsavedSetBlock(selectedDay, index, editedSetBlock )}
/>
)
})
} else if (!editModeSchedule && setBlocks) {
return setBlocks.map((setBlock, index) => {
return <SetBlock data={setBlock} key={setBlock.id || index} />
})
} else {
return (
<Text weight='600' align='center'> This user hasn't committed any Setblocks for this day </Text>
)
if (setBlocks && setBlocks.length > 0) { // To avoid iterate if the array is empty, return default
defaultSetBlocks.forEach((setBlock, index, theArray) => {
if (setBlocks && replacedBlocks < setBlocks.length && setBlock.blockTime === setBlocks[replacedBlocks].blockTime) {
theArray[index] = setBlocks[replacedBlocks];
replacedBlocks++;
}
});
}
return defaultSetBlocks
}

renderIfItReady() {
const {
match, currentTeamMember, fetchingData, selectedDay, editModeSchedule
match, currentTeamMember, fetchingData, editModeSchedule, enableSubmit
} = this.props
const { enableSubmit } = this.state

if (fetchingData) {
return ( // If you are waiting for the API to respond, render a loading
Expand All @@ -164,7 +125,7 @@ class SchedulePage extends React.Component {
{match.params.teamMemberId ? currentTeamMember.name : 'Your'}
{' Schedule\'s Page'}
</Text>
{this.renderSetBlocks(selectedDay)}
<BlockList />
{editModeSchedule && (<CommitBlock enableSubmit={enableSubmit} />)}
</Flex>
)
Expand Down Expand Up @@ -215,6 +176,7 @@ const mapDispatchToProps = (dispatch) => {
fetchCurrentTeamMemberById: (params) => dispatch(fetchCurrentTeamMemberById(params)),
setSelectedDay: (selectedDay) => dispatch(setSelectedDay(selectedDay)),
setEditModeSchedule: (editMode) => dispatch(setEditModeSchedule(editMode)),
setEnableSubmit: (enableSubmit) => dispatch(setEnableSubmit(enableSubmit)),
updateUnsavedSetblocks: (unsavedSetBlocks) => dispatch(updateUnsavedSetblocks(unsavedSetBlocks))
};
};
Expand Down
10 changes: 5 additions & 5 deletions web/components/SetBlock.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React from 'react';
import { connect } from 'react-redux';
import { Edit3 } from 'styled-icons/feather/Edit3.cjs'

import Flex from './Flex';
import Text from './Text';
import Box from './Box';
import Card from './Card';
import Flex from './Flex';
import Modal from './Modal';
import Box from './Box';
import Input from './Input';
import Text from './Text';


class SetBlock extends React.Component {
Expand Down Expand Up @@ -283,8 +283,8 @@ class SetBlock extends React.Component {
<Card
height='16px'
width='16px'
borderRight={data.blockFraction === 1.0 ? '8px #F93B6A solid' : (data.blockFraction === 0.5 ? '8px #F93B6A solid' : '')}
borderLeft={data.blockFraction === 1.0 ? '8px #F93B6A solid' : (data.blockFraction === -0.5 ? '8px #F93B6A solid' : '')}
borderBottom={data.blockFraction === 1.0 ? '8px #F93B6A solid' : (data.blockFraction === 0.5 ? '8px #F93B6A solid' : '')}
borderTop={data.blockFraction === 1.0 ? '8px #F93B6A solid' : (data.blockFraction === -0.5 ? '8px #F93B6A solid' : '')}
bg='lightGrey'
mx='1rem'
>
Expand Down
2 changes: 1 addition & 1 deletion web/components/SideBar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import React from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import Flex from './Flex';
import DayBlock from './DayBlock';
import Flex from './Flex';

import { setEditModeSchedule, setSelectedDay } from '../reducers/environment';

Expand Down
24 changes: 0 additions & 24 deletions web/components/TeamLogo.jsx

This file was deleted.

Loading

0 comments on commit 4fc50a8

Please sign in to comment.