Create edit story action for StoryType and StoryEstimate

Codeminer42 · Dec 10, 2018 · 028f8ab · 028f8ab
1 parent a65580f
commit 028f8ab
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 45 deletions.
diff --git a/app/assets/javascripts/actions/actionTypes.js b/app/assets/javascripts/actions/actionTypes.js
@@ -8,5 +8,6 @@ export default keyMirror({
   RECEIVE_USERS: null,
   RECEIVE_STORIES: null,
   RECEIVE_PAST_ITERATIONS: null,
-  TOGGLE_STORY: null
+  TOGGLE_STORY: null,
+  EDIT_STORY: null
 });
diff --git a/app/assets/javascripts/actions/story.js b/app/assets/javascripts/actions/story.js
@@ -9,3 +9,9 @@ export const toggleStory = (id) => ({
   type: actionTypes.TOGGLE_STORY,
   id
 });
+
+export const editStory = (id, newAttributes) => ({
+  type: actionTypes.EDIT_STORY,
+  id,
+  newAttributes
+});
diff --git a/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryEstimate.js b/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryEstimate.js
@@ -1,30 +1,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { isFeature } from '../../../models/beta/story';
 
-export const ExpandedStoryEstimate = (props) => {
-  const { project, story } = props;
+export class ExpandedStoryEstimate extends React.Component {
+  editStory(event) {
+    const newValue = event.target.value;
+
+    this.props.onEdit({ estimate: newValue });
+  };
 
-  return (
-    <div className="Story__section">
-      <div className="Story__section-title">
-        { I18n.translate('activerecord.attributes.story.estimate') }
-      </div>
+  render() {
+    const { project, story } = this.props;
+
+    return (
+      <div className="Story__section">
+        <div className="Story__section-title">
+          { I18n.translate('activerecord.attributes.story.estimate') }
+        </div>
 
-      <select defaultValue={story.estimate} className="form-control input-sm">
-        <option value=''>
-          { I18n.translate('story.no_estimate') }
-        </option>
-        {
-          project.pointValues.map((value) => (
-            <option value={value} key={value}>
-              { value }
-            </option>
-          ))
-        }
-      </select>
-    </div>
-  );
+        <select
+          defaultValue={story.estimate}
+          className="form-control input-sm"
+          onChange={(event) => this.editStory(event)}
+          disabled={!isFeature(story)}
+        >
+          <option value=''>
+            { I18n.translate('story.no_estimate') }
+          </option>
+          {
+            project.pointValues.map((value) => (
+              <option value={value} key={value}>
+                { value }
+              </option>
+            ))
+          }
+        </select>
+      </div>
+    );
+  };
 };
 
 ExpandedStoryEstimate.propTypes = {

diff --git a/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryType.js b/app/assets/javascripts/components/story/ExpandedStory/ExpandedStoryType.js
@@ -1,26 +1,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { types } from '../../../models/beta/story'; 
 
-const storyTypes = ['feature', 'bug', 'release', 'chore'];
+export class ExpandedStoryType extends React.Component {
+  editStory(event) {
+    const newValue = event.target.value;
 
-const ExpandedStoryType = ({ story }) => {
-  return (
-    <div className="Story__section">
-      <div className="Story__section-title">
-        { I18n.translate('activerecord.attributes.story.story_type') }
-      </div>
+    this.props.onEdit({ storyType: newValue });
+  };
+
+  render() {
+    const { story } = this.props;
 
-      <select defaultValue={story.storyType} className="form-control input-sm">
-        {
-          storyTypes.map((value) => (
-            <option value={value} key={value}>
-              { value }
-            </option>
-          ))
-        }
-      </select>
-    </div>
-  );
+    return (
+      <div className="Story__section">
+        <div className="Story__section-title">
+          { I18n.translate('activerecord.attributes.story.story_type') }
+        </div>
+
+        <select
+          defaultValue={story.storyType}
+          className="form-control input-sm"
+          onChange={(event) => this.editStory(event)}
+        >
+          {
+            types.map((value) => (
+              <option value={value} key={value}>
+                { value }
+              </option>
+            ))
+          }
+        </select>
+      </div>
+    );
+  };
 };
 
 ExpandedStoryType.propTypes = {

diff --git a/app/assets/javascripts/components/story/ExpandedStory/index.js b/app/assets/javascripts/components/story/ExpandedStory/index.js
@@ -4,17 +4,24 @@ import ExpandedStoryHistoryLocation from './ExpandedStoryHistoryLocation';
 import ExpandedStoryControls from './ExpandedStoryControls';
 import ExpandedStoryEstimate from './ExpandedStoryEstimate';
 import ExpandedStoryType from './ExpandedStoryType';
+import { editStory } from '../../../actions/story';
+import { connect } from 'react-redux';
 
 const ExpandedStory = (props) => {
-  const { story, onToggle } = props;
+  const { story, onToggle, editStory } = props;
 
   return (
     <div className="Story Story--expanded">
       <ExpandedStoryControls onCancel={onToggle} />
       <ExpandedStoryHistoryLocation story={story} />
       <div className="Story__inline-block">
-        <ExpandedStoryEstimate story={story} />
-        <ExpandedStoryType story={story} />
+        <ExpandedStoryEstimate story={story}
+          onEdit={(newAttributes) => editStory(story.id, newAttributes)}
+        />
+
+        <ExpandedStoryType story={story}
+          onEdit={(newAttributes) => editStory(story.id, newAttributes)}
+        />
       </div>
     </div>
   );
@@ -24,4 +31,7 @@ ExpandedStory.propTypes = {
   story: PropTypes.object.isRequired
 };
 
-export default ExpandedStory;
+export default connect(
+  null,
+  { editStory }
+)(ExpandedStory);
diff --git a/app/assets/javascripts/models/beta/story.js b/app/assets/javascripts/models/beta/story.js
@@ -58,3 +58,5 @@ export const getCompletedPoints = story => {
 export const isStoryNotEstimated = (storyType, estimate) => storyType === 'feature' && !estimate;
 
 export const isRelease = (storyType) => storyType === 'release';
+
+export const types = ['feature', 'bug', 'release', 'chore'];
diff --git a/app/assets/javascripts/reducers/stories.js b/app/assets/javascripts/reducers/stories.js
@@ -1,5 +1,5 @@
 import actionTypes from 'actions/actionTypes';
-import { toggleStories } from './story';
+import { toggleStories, editStory } from './story';
 
 const initialState = [];
 
@@ -9,6 +9,8 @@ const storiesReducer = (state = initialState, action) => {
       return action.data;
     case actionTypes.TOGGLE_STORY:
       return toggleStories(state, action.id);
+    case actionTypes.EDIT_STORY:
+      return editStory(state, action.id, action.newAttributes);
     default:
       return state;
   };

diff --git a/app/assets/javascripts/reducers/story.js b/app/assets/javascripts/reducers/story.js
@@ -13,3 +13,16 @@ export const toggleStories = (stories, id) => {
     };
   });
 };      
+
+export const editStory = (stories, id, newAttributes) => {
+  return stories.map((story) => {
+    if (story.id !== id) {
+      return story;
+    };
+
+    return {
+      ...story,
+      ...newAttributes 
+    };
+  });
+};