[WIP] Beta: split backlog stories on sprints/iterations (#376)

* add .ruby-version to gitignore * refactored constants * divide stories by sprint and create fillers between overflown stories * put stories with no points on the last real sprint * refactored conditionals and overflow handling * fix filler sprints count * add basic tests to sprint, sprints and iteration. * adjust sprints to project story delivery instead of start. * refactor for sprints/iterations - replaced index for sprint.number on sprints.js - replaced string for constant on story.js - replaced potential global on iterations_spec * add feature to collapse sprints * - adds story to sprint when still have space - fix: sprints start in 1 * apply requested changes
Codeminer42 · Sep 25, 2018 · 365e970 · 365e970
1 parent 1a76fdb
commit 365e970
Show file tree

Hide file tree

Showing 17 changed files with 736 additions and 139 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ db/*.sqlite3
 *.log
 tmp/
 .rvmrc
+.ruby-version
 .sass-cache/
 *.DS_Store
 config/deploy.rb

diff --git a/app/assets/javascripts/actions/actionTypes.js b/app/assets/javascripts/actions/actionTypes.js
@@ -1,4 +1,4 @@
-import keyMirror from 'keymirror';
+import keyMirror from "keymirror";
 
 export default keyMirror({
   REQUEST_PROJECT_BOARD: null,
@@ -10,5 +10,5 @@ export default keyMirror({
   COLUMN_CHILLY_BIN: null,
   COLUMN_BACKLOG: null,
   COLUMN_IN_PROGRESS: null,
-  COLUMN_DONE: null,
+  COLUMN_DONE: null
 });
diff --git a/app/assets/javascripts/actions/column.js b/app/assets/javascripts/actions/column.js
@@ -1,41 +1,42 @@
-import actionTypes from './actionTypes';
-import * as iteration from '../models/beta/iteration';
+import actionTypes from "./actionTypes";
+import * as iteration from "../models/beta/iteration";
 
-const setStoryChillyBin = (payload) => ({
+const setStoryChillyBin = payload => ({
   type: actionTypes.COLUMN_CHILLY_BIN,
-  data: payload,
+  data: payload
 });
 
-const setStoryBacklog = (payload) => ({
+const setStoryBacklog = payload => ({
   type: actionTypes.COLUMN_BACKLOG,
-  data: payload,
+  data: payload
 });
 
-const setStoryDone = (payload) => ({
+const setStoryDone = payload => ({
   type: actionTypes.COLUMN_DONE,
-  data: payload,
+  data: payload
 });
 
 export const getColumnType = (story, project) => {
-  if(story.state === 'unscheduled') {
+  if (story.state === "unscheduled") {
     return setStoryChillyBin(story);
   }
-  if(isBacklog(story, project)) {
+  if (isBacklog(story, project)) {
     return setStoryBacklog(story);
   }
   return setStoryDone(story);
-}
+};
 
 const setColumn = (dispatch, project) => story => {
   var type = getColumnType(story, project);
   return dispatch(type);
-}
+};
 
 const isBacklog = (story, project) => {
   const currentIteration = iteration.getCurrentIteration(project);
   const storyIteration = iteration.getIterationForStory(story, project);
   const isFromCurrentSprint = currentIteration === storyIteration;
-  return story.state !== 'accepted' || isFromCurrentSprint;
-}
+  return story.state !== "accepted" || isFromCurrentSprint;
+};
 
-export const classifyStories = (dispatch, stories, project) => stories.map(setColumn(dispatch, project))
+export const classifyStories = (dispatch, stories, project) =>
+  stories.map(setColumn(dispatch, project));
diff --git a/app/assets/javascripts/actions/projectBoard.js b/app/assets/javascripts/actions/projectBoard.js
@@ -1,30 +1,30 @@
-import * as ProjectBoard from 'models/beta/projectBoard';
-import actionTypes from './actionTypes';
-import { classifyStories } from './column';
-import { receiveUsers } from './user';
-import { receiveStories } from './story';
+import * as ProjectBoard from "models/beta/projectBoard";
+import actionTypes from "./actionTypes";
+import { classifyStories } from "./column";
+import { receiveUsers } from "./user";
+import { receiveStories } from "./story";
 
 const requestProjectBoard = () => ({
   type: actionTypes.REQUEST_PROJECT_BOARD
 });
 
-const receiveProjectBoard = (projectId) => ({
+const receiveProjectBoard = projectId => ({
   type: actionTypes.RECEIVE_PROJECT_BOARD,
   data: projectId
 });
 
-const errorRequestProjectBoard = (error) => ({
+const errorRequestProjectBoard = error => ({
   type: actionTypes.ERROR_REQUEST_PROJECT_BOARD,
   error: error
 });
 
-const receiveProject = (project) => ({
+const receiveProject = project => ({
   type: actionTypes.RECEIVE_PROJECT,
   data: project
 });
 
-export const fetchProjectBoard = (projectId) => {
-  return (dispatch) => {
+export const fetchProjectBoard = projectId => {
+  return dispatch => {
     dispatch(requestProjectBoard());
 
     ProjectBoard.get(projectId)
@@ -35,8 +35,6 @@ export const fetchProjectBoard = (projectId) => {
         dispatch(receiveProjectBoard(projectId));
         classifyStories(dispatch, stories, project);
       })
-      .catch((error) =>
-        dispatch(errorRequestProjectBoard(error))
-      );
+      .catch(error => dispatch(errorRequestProjectBoard(error)));
   };
-}
+};
diff --git a/app/assets/javascripts/components/Columns/ColumnItem.js b/app/assets/javascripts/components/Columns/ColumnItem.js
@@ -1,14 +1,16 @@
-import React from 'react'
-import Stories from '../stories/Stories';
+import React from "react";
+import Stories from "../stories/Stories";
 
-const Column = ({ title, stories }) => (
+const Column = ({ title, children }) => (
   <div className="Column">
     <div className="Column__header">
       <h3 className="Column__name">{title}</h3>
-      <button type="button" className="Column__btn-close">x</button>
+      <button type="button" className="Column__btn-close">
+        x
+      </button>
     </div>
-    <Stories stories={stories} />
+    <div className="Column__body">{children}</div>
   </div>
 );
 
-export default Column
+export default Column;
diff --git a/app/assets/javascripts/components/projects/ProjectBoard.js b/app/assets/javascripts/components/projects/ProjectBoard.js
@@ -1,32 +1,37 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { fetchProjectBoard } from 'actions/projectBoard';
-import Column from '../Columns/ColumnItem';
+import React from "react";
+import { connect } from "react-redux";
+import { fetchProjectBoard } from "actions/projectBoard";
+import Column from "../Columns/ColumnItem";
+import Stories from "../stories/Stories";
+import Sprints from "../stories/Sprints";
 
 class ProjectBoard extends React.Component {
   componentWillMount() {
     this.props.fetchProjectBoard(this.props.projectId);
   }
 
   render() {
-    if(!this.props.projectBoard.isFetched) {
+    if (!this.props.projectBoard.isFetched) {
       return <b>Loading</b>;
     }
 
     return (
       <div className="ProjectBoard">
+        <Column title={I18n.t("projects.show.chilly_bin")}>
+          <Stories stories={this.props.columns.chillyBin.stories} />
+        </Column>
         <Column
-          title={I18n.t('projects.show.chilly_bin')}
-          stories={this.props.columns.chillyBin.stories}
-        />
-        <Column
-          title={`${I18n.t('projects.show.backlog')}/${I18n.t('projects.show.in_progress')}`}
-          stories={this.props.columns.backlog.stories}
-        />
-        <Column
-          title={I18n.t('projects.show.done')}
-          stories={this.props.columns.done.stories}
-        />
+          title={`${I18n.t("projects.show.backlog")} /
+          ${I18n.t("projects.show.in_progress")}`}>
+          <Sprints
+            stories={this.props.columns.backlog.stories}
+            project={this.props.project}
+          />
+        </Column>
+
+        <Column title={I18n.t("projects.show.done")}>
+          <Stories stories={this.props.columns.done.stories} />
+        </Column>
       </div>
     );
   }
@@ -43,11 +48,14 @@ const mapStateToProps = ({
   project,
   users,
   stories,
-  columns,
+  columns
 });
 
 const mapDispatchToProps = {
   fetchProjectBoard
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(ProjectBoard);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ProjectBoard);
diff --git a/app/assets/javascripts/components/stories/Sprint.js b/app/assets/javascripts/components/stories/Sprint.js
@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Stories from "./Stories";
+
+const propTypes = {
+  number: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  startDate: PropTypes.node,
+  points: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  completedPoints: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  stories: PropTypes.array
+};
+
+const defaultProps = {
+  number: 0,
+  startDate: 0,
+  points: 0,
+  stories: []
+};
+
+class Sprint extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { isClosed: false };
+    this.toggleSprint = this.toggleSprint.bind(this);
+  }
+
+  toggleSprint() {
+    this.setState(prevState => ({ isClosed: !prevState.isClosed }));
+  }
+
+  render() {
+    const { number, startDate, points, completedPoints, stories } = this.props;
+    const closedStyle = this.state.isClosed && "Sprint__body--is-collapsed";
+    return (
+      <div className="Sprint">
+        <div className="Sprint__header" onClick={this.toggleSprint}>
+          {number} - {startDate}
+          <span className="Sprint__points">
+            {completedPoints > 0 && `${completedPoints} / `}
+            {points}
+          </span>
+        </div>
+        <div className={`Sprint__body ${closedStyle}`}>
+          {stories && <Stories stories={stories} />}
+        </div>
+      </div>
+    );
+  }
+}
+
+Sprint.propTypes = propTypes;
+Sprint.defaultProps = defaultProps;
+
+export default Sprint;
diff --git a/app/assets/javascripts/components/stories/Sprints.js b/app/assets/javascripts/components/stories/Sprints.js
@@ -0,0 +1,48 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Sprint from "./Sprint";
+import * as Iteration from "models/beta/iteration";
+
+const propTypes = {
+  stories: PropTypes.array,
+  project: PropTypes.object
+};
+
+const defaultProps = {
+  stories: [],
+  project: {}
+};
+
+const renderSprints = sprints => {
+  return sprints.map(
+    (sprint, index) =>
+      sprint ? (
+        <Sprint
+          key={sprint.number}
+          number={sprint.number}
+          startDate={sprint.startDate}
+          stories={sprint.stories}
+          points={sprint.points}
+          completedPoints={sprint.completedPoints}
+        />
+      ) : null
+  );
+};
+
+const Sprints = ({ stories, project }) => {
+  const currentSprintNumber = Iteration.getCurrentIteration(project) || 0;
+  const sprints = Iteration.groupBySprints(
+    stories,
+    project,
+    currentSprintNumber
+  );
+
+  if (!stories.length) return null;
+
+  return <div className="Sprints">{renderSprints(sprints)}</div>;
+};
+
+Sprint.propTypes = propTypes;
+Sprint.defaultProps = defaultProps;
+
+export default Sprints;
diff --git a/app/assets/javascripts/components/stories/Stories.js b/app/assets/javascripts/components/stories/Stories.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import StoryItem from '../story/StoryItem'
+import React from "react";
+import StoryItem from "../story/StoryItem";
 
 const Stories = ({ stories }) => {
   if (!stories.length) {
@@ -9,10 +9,7 @@ const Stories = ({ stories }) => {
   return (
     <div>
       {stories.map(story => (
-        <StoryItem
-          key={story.id}
-          {...story}
-        />
+        <StoryItem key={story.id} {...story} />
       ))}
     </div>
   );

diff --git a/app/assets/javascripts/libs/beta/constants.js b/app/assets/javascripts/libs/beta/constants.js
@@ -0,0 +1,15 @@
+export const status = {
+  ACCEPTED: "accepted",
+  DELIVERED: "delivered",
+  STARTED: "started",
+  REJECTED: "rejected",
+  FINISHED: "finished",
+  UNSTARTED: "unstarted"
+};
+
+export const storyTypes = {
+  BUG: "bug",
+  CHORE: "chore",
+  FEATURE: "feature",
+  RELEASE: "release"
+};