Merge pull request #141 from Codeminer42/story_links

Local story links

Author: andrerpbts

CHANGELOG.md

@@ -13,6 +13,7 @@
 - Redirect automatically to project#index after the user authentication, when there is only one team on enrollments
 - **Increase decimal precision from Stories position**
 - Change story controls to react component
+- Links to stories within the same project can be added to a story description.
 
 ## [1.1.3] - 2017-03-30
 ### Changed

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import hoverTemplate from 'templates/story_hover.ejs';
+import noteTemplate from 'templates/note.ejs';
+
+const STORY_STATE_ICONS = {
+  unstarted: 'access_time',
+  started:   'check_box_outline_blank',
+  finished:  'check_box',
+  delivered: 'hourglass_empty',
+  rejected:  'close',
+  accepted:  'done'
+};
+
+export default class StoryLink extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    const { story } = this.props;
+    document.getElementById(`story-${story.get('id')}`).scrollIntoView();
+    story && _.each(story.views, view => view.highlight());
+  }
+
+  renderIcon(storyState) {
+    return (
+      <i className={`mi story-link-icon ${storyState}`}>
+        {STORY_STATE_ICONS[storyState]}
+      </i>
+    );
+  }
+
+  render() {
+    const { story } = this.props;
+    const storyState = story.get('state');
+    const id = story.get('id');
+    const popoverContent = hoverTemplate({
+      story: story,
+      noteTemplate: noteTemplate
+    });
+
+    return (
+      <a className={`story-link popover-activate ${storyState}`}
+         data-content={popoverContent}
+         data-original-title={story.get('title')}
+         id={`story-link-${id}`}
+         onClick={this.handleClick}>
+        { `#${id}` }
+        { (storyState !== 'unscheduled') && this.renderIcon(storyState) }
+      </a>
+    );
+  }
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import Parser from 'html-react-parser'
+import memoize from 'memoizee';
+
+import StoryLink from 'components/stories/StoryLink';
+
+const editButton = isReadonly =>
+  <input
+    className={!isReadonly && 'edit-description'}
+    disabled={isReadonly}
+    value={I18n.t('edit')}
+    type="button" />
+
+const replaceStoryLink = (domNode, linkedStories) => {
+  if (!domNode.attribs || !domNode.attribs['data-story-id']) return;
+  const id = domNode.attribs['data-story-id'];
+  const story = linkedStories[id];
+  return ( <StoryLink story={story} key={id} /> );
+}
+
+const StoryDescription = ({ description, isReadonly, linkedStories }) => {
+  const isEmpty = (!description || !description.length);
+  description = Parser(description, { replace: domNode =>
+    replaceStoryLink(domNode, linkedStories)
+  });
+
+  return (isEmpty)
+    ? editButton(isReadonly)
+    : <div className='description'>
+        { description }
+      </div>
+}
+
+export default memoize(StoryDescription);

app/assets/javascripts/views/form_view.js

@@ -21,8 +21,8 @@ module.exports = Backbone.View.extend({
   },
 
   textArea: function(name) {
-    var el = this.make('textarea', {name: name, class: 'form-control' }, this.model.get(name));
-    $(el).attr('style', 'height:100px;overflow-y:hidden;');
+    var el = this.make('textarea', {name: name, class: `form-control ${name}-textarea` }, this.model.get(name));
+    $(el).attr('style', 'min-height:100px;');
     $(el).on('input', function () {
       this.style.height = 'auto';
       this.style.height = (this.scrollHeight) + 'px';
@@ -116,21 +116,6 @@ module.exports = Backbone.View.extend({
     return el;
   },
 
-  submit: function() {
-    var el = this.make('input', {class: "submit", type: "button", value: I18n.t('save')});
-    return el;
-  },
-
-  destroy: function() {
-    var el = this.make('input', {class: "destroy", type: "button", value: I18n.t('delete')});
-    return el;
-  },
-
-  cancel: function() {
-    var el = this.make('input', {class: "cancel", type: "button", value: I18n.t('cancel')});
-    return el;
-  },
-
   bindElementToAttribute: function(el, name, eventType) {
     var that = this;
     eventType = typeof(eventType) != 'undefined' ? eventType : "change";

app/assets/javascripts/views/story_view.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import StoryControls from 'components/story/StoryControls';
+import StoryDescription from 'components/story/StoryDescription';
 
 var Clipboard = require('clipboard');
 
@@ -13,12 +14,15 @@ var NoteView = require('./note_view');
 var TaskForm = require('./task_form');
 var TaskView = require('./task_view');
 
+const LOCAL_STORY_REGEXP = /(?!\s|\b)(#\d+)(?!\w)/g;
+
 module.exports = FormView.extend({
 
   template: require('templates/story.ejs'),
   alert: require('templates/alert.ejs'),
 
   tagName: 'div',
+  linkedStories: {},
 
   initialize: function(options) {
     _.extend(this, _.pick(options, "isSearchResult"));
@@ -326,7 +330,11 @@ module.exports = FormView.extend({
       this.model.clear();
   },
 
-  editDescription: function() {
+  editDescription: function(ev) {
+    const $target = $(ev.target);
+    if ($target.hasClass('story-link') || $target.hasClass('story-link-icon'))
+      return;
+
     this.model.set({editingDescription: true});
     this.render();
   },
@@ -358,7 +366,7 @@ module.exports = FormView.extend({
 
       if (this.id != undefined) {
         var $wrapper = $(this.make('div', {class: 'col-xs-12 form-group input-group input-group-sm', id: inputId}));
-        var inputId = 'story-link-' + this.id;
+        var inputId = 'story-uri-' + this.id;
 
         $wrapper.append(this.make('input', {
           id: inputId,
@@ -378,6 +386,13 @@ module.exports = FormView.extend({
         $(btn).html('<img src="/clippy.svg" alt="Copy to clipboard" width="14px">');
         $btnWrapper.append(btn);
 
+        btn = this.make('button', {
+          class: 'btn btn-default btn-clipboard-id btn-clipboard',
+          'data-clipboard-text': '#'+this.id,
+          type: 'button'
+        }, 'ID');
+        $btnWrapper.append(btn);
+
         // Story history button
         btn = this.make('button', {class: 'btn btn-default toggle-history'})
         $(btn).html('<i class="mi md-18">history</i>');
@@ -490,7 +505,7 @@ module.exports = FormView.extend({
       this.$el.append(
         this.makeFormControl(function(div) {
           $(div).append(this.label("description", I18n.t('activerecord.attributes.story.description')));
-          $(div).append('<br/>');
+
           if(this.model.isNew() || this.model.get('editingDescription')) {
             var textarea = this.textArea("description");
             $(textarea).atwho({
@@ -499,21 +514,8 @@ module.exports = FormView.extend({
             });
             $(div).append(textarea);
           } else {
-            var description = this.make('div');
-            $(description).addClass('description');
-            $(description).html(
-              window.md.makeHtml(this.model.escape('description'))
-            );
-            $(div).append(description);
-            if (!this.model.get('description') || 0 === this.model.get('description').length) {
-              $(description).after(
-                this.make('input', {
-                  class: this.isReadonly() ? '' : 'edit-description',
-                  type: 'button',
-                  value: I18n.t('edit')
-                })
-              );
-            }
+            var $description = $('<div class="description-wrapper"><div>');
+            $(div).append($description);
           }
         })
       );
@@ -564,6 +566,28 @@ module.exports = FormView.extend({
       />,
       this.$('[data-story-controls]').get(0)
     );
+
+    const descriptionContainer = this.$('.description-wrapper')[0];
+    if (descriptionContainer) {
+      ReactDOM.render(
+        <StoryDescription
+          linkedStories={this.linkedStories}
+          isReadonly={this.isReadonly()}
+          description={this.parseDescription()} />,
+          descriptionContainer
+        );
+    }
+  },
+
+  parseDescription: function() {
+    const description = window.md.makeHtml(this.model.escape('description')) || '';
+    var id, story;
+    return description.replace(LOCAL_STORY_REGEXP, story_id => {
+      id = story_id.substring(1);
+      story = this.model.collection.get(id);
+      this.linkedStories[id] = story;
+      return (story) ? `<a data-story-id='${id}'></a>` : story_id;
+    });
   },
 
   setClassName: function() {
@@ -697,22 +721,18 @@ module.exports = FormView.extend({
 
   // FIXME Move to separate view
   hoverBox: function() {
-    var view = this;
-    this.$el.find('.popover-activate').popover({
-      title: function() {
-        return view.model.get("title");
-      },
-      content: function() {
-        return require('templates/story_hover.ejs')({
-          story: view.model,
+    if (!this.model.isNew()) {
+      this.$el.find('.popover-activate').popover({
+        delay: 200, // A small delay to stop the popovers triggering whenever the mouse is moving around
+        html: true,
+        trigger: 'hover',
+        title: () => this.model.get("title"),
+        content: () => require('templates/story_hover.ejs')({
+          story: this.model,
           noteTemplate: require('templates/note.ejs')
-        });
-      },
-      // A small delay to stop the popovers triggering whenever the mouse is moving around
-      delay: 200,
-      html: true,
-      trigger: 'hover'
-    });
+        })
+      });
+    }
   },
 
   removeHoverbox: function() {