application/components/assignment.js
import React from 'react';
import Immutable from 'immutable';
import {browserHistory, Link} from 'react-router';
import {connect} from 'react-redux';
import moment from 'moment';
import {Row, Col} from './flexbox';
import SlidingPaginator from './common/sliding-paginator';
import CurrentUser from './../current-user';
import {
assignmentsFetch,
assignmentsMaybeFetchCache
} from './../redux/actions/assignment-actions';
import {
workflowsMaybeFetch,
workflowsFilterAssignmentOnly
} from './../redux/actions/workflow-actions';
import {
issuesFetch
} from './../redux/actions/issue-actions';
import {
assignmentViewUpdate,
assignmentViewReset
} from './../redux/actions/assignment-view-actions';
import AssignmentToolbar from './assignment/assignment-toolbar';
import AssignmentTable from './assignment/assignment-table';
import AssignmentIssues from './assignment/assignment-issues';
import AssignmentCalendar from './assignment/assignment-calendar';
import LoadingIndicator from './common/loading-indicator';
import Paginator from './common/paginator';
import AssignmentManager from '../managers/assignment-manager';
class Assignment extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
const page = (this.props.location && this.props.location.query.page)
? this.props.location.query.page
: 1;
const {dispatch} = this.props;
dispatch(workflowsMaybeFetch())
.then(() => dispatch(workflowsFilterAssignmentOnly()))
let type = ''
if (localStorage.getItem('assignmentCurrentView')) {
this.props.dispatch(assignmentViewUpdate({
'currentView': localStorage.getItem('assignmentCurrentView')
}));
}
// AssignmentManager.fetchFromView();
}
handlePagination(page, force = false) {
if (this.props.assignmentView && this.props.assignmentView.currentView == 'unassigned') {
if (this.props.assignments.pagination.current == page && !force) {
return;
}
const {dispatch} = this.props;
dispatch(assignmentViewUpdate({page: page}))
.then(() => AssignmentManager.fetchFromView());
} else {
if (this.props.issues.pagination.current == page && !force) {
return;
}
const {dispatch} = this.props;
dispatch(issuesFetch({page: page, per_page: 9}))
.then(() => {
let issues = [];
this.props.issues.items.map((issue) => {
issues.push(issue.get('uuid'));
});
dispatch(assignmentViewUpdate({issues: issues}))
.then(() => AssignmentManager.fetchFromView());
});
}
}
handleClearFilters() {
this.props.dispatch(assignmentViewReset())
.then(() => AssignmentManager.fetchFromView());
}
render() {
let view = '';
if (this.props.assignmentView.currentView == 'unassigned') {
view = (
<AssignmentTable
/>
);
} else if (this.props.assignmentView.currentView == 'by issue') {
view = (
<AssignmentIssues
/>
);
} else if (this.props.assignmentView.currentView == 'calendar') {
view = (
<AssignmentCalendar
/>
);
}
return (
<div className="assignment-root">
<Row>
<Col xs={12}>
<AssignmentToolbar
onPaginate={this.handlePagination.bind(this)}
onReset={this.handleClearFilters.bind(this)}
/>
{view}
</Col>
</Row>
</div>
);
// const token = (this.props.location && this.props.location.query.search)
// ? decodeURIComponent(this.props.location.query.search)
// : null;
// const sorter = (this.props.location && this.props.location.query.sorter)
// ? decodeURIComponent(this.props.location.query.sorter)
// : 'due_at';
// const workflow = (this.props.location && this.props.location.query.workflow)
// ? this.props.location.query.workflow
// : null;
// const flip = (this.props.location && this.props.location.query.flip)
// ? this.props.location.query.flip == "true"
// : false == "true";
// const hpd = (this.props.location && this.props.location.query.hpd)
// ? this.props.location.query.hpd == "true"
// : false == "true";
// let cal = (this.props.location && this.props.location.query.cal)
// ? this.props.location.query.cal == "true"
// : false == "true";
// // check if a view has already been saved into localStorage
// let calStored = localStorage.getItem('assignmentPageView') == 'true';
// if (calStored) { cal = true };
// let calView = (this.props.location && this.props.location.query.calView)
// ? decodeURIComponent(this.props.location.query.calView)
// : "issue";
// let calViewStored = localStorage.getItem("assignmentCalendarView");
// if (calViewStored) { calView = calViewStored};
// const assignee = (this.props.location && this.props.location.query.assignee)
// ? decodeURIComponent(this.props.location.query.assignee)
// : null;
// const per_page = 3;
// const page = (this.props.location && this.props.location.query.page)
// ? parseInt(this.props.location.query.page)
// : 1;
// const offset = (parseInt(page)-1) * per_page;
// const allIssues = this.props.issues.items
// .filter(item => parseInt(item.get('status')))
// .sort((a, b) => {
// const momentA = new Date(a.get('published_at')).getTime();
// const momentB = new Date(b.get('published_at')).getTime();
// if (momentA < momentB) {
// return 1;
// } else {
// return -1;
// }
// });
// let filteredAssignments = this.props.assignments.items.filter((item) => {
// if (workflow) {
// if (item.get('workflow_id') && item.get('workflow_id') == workflow) {
// return true;
// }
// return false;
// }
// return true;
// }).filter((item) => {
// if (token && token.length) {
// if (item.get('title') && item.get('title').toLowerCase().indexOf(token.toLowerCase()) !== -1) {
// return true;
// }
// return false;
// }
// return true;
// }).filter((item) => {
// if (assignee && assignee != 'unassigned') {
// let tmpUsers = item.get('users');
// let check = tmpUsers.filter((user) => {
// if (user.get('name') == assignee) {
// return true;
// }
// });
// if (check.size) {
// return true;
// }
// return false;
// } else if (assignee && assignee == 'unassigned') {
// let tmpUsers = item.get('users');
// if (!tmpUsers.size) {
// return true;
// }
// return false;
// }
// return true;
// }).sort((a, b) => {
// if (sorter) {
// if (sorter == 'due_at') {
// let momentA = new Date(a.get(sorter)).getTime();
// let momentB = new Date(b.get(sorter)).getTime();
// if (momentA < momentB) {
// return -1;
// } else {
// return 1;
// }
// }
// if (sorter == 'modified_at' || sorter == 'created_at' || sorter == 'published_at') {
// const momentA = new Date(a.get(sorter)).getTime();
// const momentB = new Date(b.get(sorter)).getTime();
// if (momentA < momentB) {
// return 1;
// } else {
// return -1;
// }
// }
// if (sorter == 'slug' || sorter == 'title') {
// const A = a.get(sorter).toUpperCase();
// const B = b.get(sorter).toUpperCase();
// if (!A && !B) {
// return 0;
// }
// if (!A) {
// return 1;
// }
// if (!B) {
// return -1;
// }
// if (A < B) {
// return -1;
// }
// if (A > B) {
// return 1;
// }
// return 0;
// }
// }
// }).filter((item) => {
// if (hpd) {
// let now = new Date();
// let isAfter = moment(now).isAfter(item.get('due_at'));
// return !isAfter;
// } else {
// return true;
// }
// });
// if (flip) {
// filteredAssignments = filteredAssignments.reverse();
// }
// const paginated = allIssues.skip(offset).take(per_page);
// let byIssue = [];
// paginated.map((issue, i) => {
// byIssue.push({
// issue: issue,
// assignments: filteredAssignments.filter((item) => {
// return item.get('issue_id') == issue.get('id')
// })
// });
// });
// let unbound = filteredAssignments.filter((item) => {
// return !parseInt(item.get('issue_id'));
// })
// let multiPage = allIssues.size/per_page > 1;
// //build events for the assignment-calendar
// let assignmentDueDates = [];
// let issueDueDates = [];
// //add issues
// this.props.issues.items.map((issue,i) => {
// let event = {};
// //event.allDay = true;
// event.title = issue.get('label') ? issue.get('label') : issue.get('slug');
// event.uuid = issue.get('uuid');
// event.type = 'issue';
// if (!CurrentUser.hasRole('Administrator')) {
// event.lock = true;
// } else {
// event.lock = false;
// }
// if (issue.get('published_at')) {
// event.start = moment.utc(issue.get('published_at')).local().toDate();
// event.end = moment.utc(issue.get('published_at')).local().toDate();
// } else {
// event.unscheduled = true;
// }
// issueDueDates.push(event);
// let issueId = issue.get('id');
// let issueAssignments = filteredAssignments.filter((assignment,i) => {
// if (assignment.get('issue_id') == issueId) {
// return true;
// }
// return false;
// })
// issueAssignments.map((assignment,i) => {
// let event = {};
// //event.allDay = true;
// event.title = assignment.get('title') ? assignment.get('title') : assignment.get('slug');
// event.type = assignment.get('type');
// event.slug = assignment.get('slug');
// event.uuid = assignment.get('uuid');
// event.srn = assignment.get('srn');
// // check if the assignment is locked
// if (assignment.get('lock') && assignment.get('lock').get('user_id') !== CurrentUser.getId()) {
// event.lock = assignment.get('lock').get('uuid');
// event.lockUser = assignment.get('lock').get('user_id');
// }
// event.start = moment.utc(issue.get('published_at')).local().toDate();
// event.end = moment.utc(issue.get('published_at')).local().toDate();
// issueDueDates.push(event);
// })
// });
// //add assignments to the calendar
// filteredAssignments.map((item,i) => {
// let event = {};
// //event.allDay = true;
// event.title = item.get('title') ? item.get('title') : item.get('slug');
// event.type = item.get('type');
// event.slug = item.get('slug');
// event.uuid = item.get('uuid');
// event.srn = item.get('srn');
// event.issue = item.get('issue_id') ? item.get('issue_id') : null;
// //need a way of differentiating viewmodes in backgroundWrapper
// event.flag = true;
// // check if the assignment is locked
// if (item.get('lock') && item.get('lock').get('user_id') !== CurrentUser.getId()) {
// event.lock = item.get('lock').get('uuid');
// event.lockUser = item.get('lock').get('user_id');
// }
// // set the event unscheduled if it has no due_at
// if (item.get('due_at')) {
// event.start = moment.utc(item.get('due_at')).local().toDate();
// event.end = moment.utc(item.get('due_at')).local().toDate();
// } else {
// event.unscheduled = true;
// }
// assignmentDueDates.push(event);
// });
// return (
// <div className="assignment-root">
// <Row>
// <Col xs={12}>
// <AssignmentToolbar
// items={allIssues}
// page={page}
// perPage={per_page}
// search={token}
// workflow={workflow}
// sorter={sorter}
// assignee={assignee}
// cal={cal}
// />
// {
// cal
// ? (
// <AssignmentCalendar
// assignmentDueDates={assignmentDueDates}
// issueDueDates={issueDueDates}
// unbound={unbound}
// byIssue={byIssue}
// page={page}
// perPage={per_page}
// calView={calView}
// />
// )
// : (
// <AssignmentTable
// unbound={unbound}
// byIssue={byIssue}
// page={page}
// perPage={per_page}
// hpd={hpd}
// />
// )
// }
// <div
// className='box toolbar right-align'
// style={{backgroundColor:'#f1f1f1', marginTop:'10px', paddingRight:'10px'}}
// >
// {
// multiPage && !cal
// ? (
// <SlidingPaginator
// totalItems={allIssues.size}
// currentPage={parseInt(page)}
// perPage={per_page}
// />
// )
// : ''
// }
// </div>
// </Col>
// </Row>
// </div>
// );
}
}
const mapStateToProps = (state) => {
return {
assignments: state.assignments,
issues: state.issues,
workflows: state.workflows,
assignmentView: state.assignmentView
};
}
export default connect(mapStateToProps)(Assignment);