Merge 685b997 into d53e1df

CHANGELOG.md

@@ -13,6 +13,7 @@
 - Imports/exports of stories 
   - Documents
   - Tasks
+- Added Popover when Story is collapsed in board V2
 
 ## [1.21.1] 2018-10-18
 ### Fixed

app/assets/javascripts/components/stories/Stories.js

@@ -9,7 +9,7 @@ const Stories = ({ stories }) => {
   return (
     <div>
       {stories.map(story => (
-        <StoryItem key={story.id} {...story} />
+        <StoryItem key={story.id} story={story} />
       ))}
     </div>
   );

app/assets/javascripts/components/story/CollapsedStory/CollapsedStoryEstimate.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const estimateRule = (estimate) => estimate > 0 ? estimate : '-';
+
+const CollapsedStoryEstimate = ({ estimate }) => (
+  <span className='Story__estimated'>{estimateRule(estimate)}</span>
+);
+
+CollapsedStoryEstimate.propTypes = {
+  estimate: PropTypes.number,
+};
+
+CollapsedStoryEstimate.defaultProp = {
+  estimate: '-',
+};
+
+export default CollapsedStoryEstimate;

app/assets/javascripts/components/story/CollapsedStory/CollapsedStoryInfo.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CollapsedStoryTitle from './CollapsedStoryTitle'
+import CollapsedStoryLabels from './CollapsedStoryLabels'
+
+const CollapsedStoryInfo = ({ story }) => (
+  <div className="Story__info">
+    <CollapsedStoryLabels story={story} />
+    <CollapsedStoryTitle story={story} />
+  </div>
+);
+
+CollapsedStoryInfo.propTypes = {
+  story: PropTypes.object.isRequired
+};
+
+export default CollapsedStoryInfo;

app/assets/javascripts/components/story/CollapsedStory/CollapsedStoryLabels.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const labelSplit = (labels) => labels.split(',');
+
+const StoryLabel = ( { label } ) => (
+  <a href="#" className="Story__label" title={label}>{label}</a>
+);
+
+StoryLabel.propTypes = {
+  label: PropTypes.string.isRequired,
+};
+
+const CollapsedStoryLabels = ({ story }) => {
+  if (!story.labels) {
+    return null
+  }
+
+  return (
+    <span className='Story__labels'>
+      {labelSplit(story.labels).map(label => (
+        <StoryLabel key={label} label={label} />
+      ))}
+    </span>
+  );
+};
+
+CollapsedStoryLabels.propTypes = {
+  story: PropTypes.object.isRequired,
+};
+
+export default CollapsedStoryLabels;

app/assets/javascripts/components/story/CollapsedStory/CollapsedStoryPoints.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const CollapsedStoryPoints = () => (
+  <div>
+    <span className="Story__estimate">1</span>
+    <span className="Story__estimate">2</span>
+    <span className="Story__estimate">3</span>
+    <span className="Story__estimate">5</span>
+    <span className="Story__estimate">8</span>
+  </div>
+);
+
+export default CollapsedStoryPoints;

app/assets/javascripts/components/story/CollapsedStory/CollapsedStoryStateActions.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CollapsedStoryPoints from './CollapsedStoryPoints';
+import CollapsedStoryStateButton from './CollapsedStoryStateButton';
+import { isStoryNotEstimated } from '../../../models/beta/story';
+
+const StoryActionFor = (state) => StateAction[state] || StateAction.unstarted;
+
+const StateAction = {
+  started: ["finish"],
+  finished: ["deliver"],
+  delivered: ["accept", "reject"],
+  rejected: ["restart"],
+  accepted: [],
+  unstarted: ["start"]
+};
+
+const CollapsedStoryStateActions = ({ story }) => (
+  <div className='Story__actions'>
+    {
+      isStoryNotEstimated(story.storyType, story.estimate) ?
+        <CollapsedStoryPoints />
+        : StoryActionFor(story.state).map((stateAction) =>
+          <CollapsedStoryStateButton action={stateAction} key={stateAction} />
+        )
+    }
+  </div>
+);
+
+CollapsedStoryStateActions.propTypes = {
+  story: PropTypes.object.isRequired,
+};
+
+
+export default CollapsedStoryStateActions;

app/assets/javascripts/components/story/CollapsedStory/CollapsedStoryStateButton.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+
+const CollapsedStoryStateButton = ({ action }) => (
+  <button type="button" className={`Story__btn Story__btn--${action}`}>
+    { I18n.translate(`story.events.${action}`) }
+  </button>
+);
+
+CollapsedStoryStateButton.propTypes = {
+  action: PropTypes.string.isRequired
+};
+
+export default CollapsedStoryStateButton;

app/assets/javascripts/components/story/CollapsedStory/CollapsedStoryTitle.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const CollapsedStoryTitle = ({ story }) => (
+  <div className="Story__title">
+    {story.title}
+    <abbr
+      className="Story__initials"
+      title={story.ownedByName}
+    >
+      {story.ownedByInitials}
+    </abbr>
+  </div>
+);
+
+CollapsedStoryTitle.propTypes = {
+  story: PropTypes.object.isRequired,
+};
+
+
+export default CollapsedStoryTitle

app/assets/javascripts/components/story/CollapsedStory/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import classname from 'classnames';
+import PropTypes from 'prop-types';
+import StoryPopover from '../StoryPopover';
+import StoryDescriptionIcon from '../StoryDescriptionIcon';
+import CollapsedStoryEstimate from './CollapsedStoryEstimate';
+import CollapsedStoryStateActions from './CollapsedStoryStateActions';
+import CollapsedStoryInfo from './CollapsedStoryInfo';
+import StoryIcon from '../StoryIcon';
+import * as StoryModel from '../../../models/beta/story';
+
+const classNameStory = (storyType, estimate) => {
+
+  const isStoryNotEstimated = StoryModel.isStoryNotEstimated(storyType, estimate);
+  const isRelease = StoryModel.isRelease(storyType);
+
+  return classname('Story', {
+    'Story--unestimated': isStoryNotEstimated,
+    'Story--estimated': !isStoryNotEstimated,
+    'Story--release': isRelease
+  });
+};
+
+const CollapsedStory = ({ story }) => (
+  <div className={classNameStory(story.storyType, story.estimate)}>
+    <StoryPopover story={story}>
+      <div className='Story__icons-block'>
+        <StoryIcon storyType={story.storyType} />
+        <CollapsedStoryEstimate estimate={story.estimate} />
+        <StoryDescriptionIcon description={story.description} />
+      </div>
+    </StoryPopover>
+
+    <CollapsedStoryInfo story={story}/>
+
+    <CollapsedStoryStateActions story={story}/>
+  </div>
+);
+
+CollapsedStory.propTypes = {
+  story: PropTypes.object.isRequired
+};
+
+export default CollapsedStory;

app/assets/javascripts/components/story/StoryIcon.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+
+const iconRules = {
+  feature: { icon: 'start', className: 'star' },
+  bug: { icon: 'bug_report', className: 'bug' },
+  chore: { icon: 'settings', className: 'dark' },
+  release: { icon: 'bookmark', className: 'bookmark' }
+};
+
+const iconRuleFor = _.propertyOf(iconRules);
+
+const iconRule = (storyType) => iconRuleFor([storyType, 'icon']);
+
+const classIconRule = (storyType) => iconRuleFor([storyType, 'className']);
+
+const CollapsedStoryIcon = ({ storyType }) => (
+  <span className='Story__icon'>
+    <i className={`mi md-${classIconRule(storyType)} md-16`}>{iconRule(storyType)}</i>
+  </span>
+);
+
+CollapsedStoryIcon.propTypes = {
+  storyType: PropTypes.string.isRequired,
+};
+
+export default CollapsedStoryIcon;