Merge pull request #557 from BoostIO/feature-todo-percentage

display percentage of achievement of todo in markdown

browser/components/TodoListPercentage.styl

@@ -0,0 +1,13 @@
+.percentageBar
+  position absolute
+  background-color #bcbcbc
+  height 20px
+  width 100%
+
+.progressBar
+  background-color #52d8a5
+  height 20px
+  text-align center
+
+.progressBar p
+  color white

browser/components/TodolistPercentage.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview Percentage of todo achievement.
+ */
+
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TodoListPercentage.styl'
+
+/**
+ * @param {number} percentageOfTodo
+ */
+
+const TodoListPercentage = ({
+  percentageOfTodo
+}) => (
+  <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
+    <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
+      <p styleName='percentageText'>{percentageOfTodo}%</p>
+    </div>
+  </div>
+)
+
+TodoListPercentage.propTypes = {
+  percentageOfTodo: PropTypes.number.isRequired
+}
+
+export default CSSModules(TodoListPercentage, styles)

browser/main/Detail/MarkdownNoteDetail.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
+import TodoListPercentage from 'browser/components/TodoListPercentage'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
@@ -95,6 +96,24 @@ class MarkdownNoteDetail extends React.Component {
     return title
   }
 
+  getPercentageOfCompleteTodo (noteContent) {
+    let splitted = noteContent.split('\n')
+    let numberOfTodo = 0
+    let numberOfCompletedTodo = 0
+
+    splitted.forEach((line) => {
+      let trimmedLine = line.trim()
+      if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
+        numberOfTodo++
+      }
+      if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
+        numberOfCompletedTodo++
+      }
+    })
+
+    return Math.floor(numberOfCompletedTodo / numberOfTodo * 100)
+  }
+
   handleChange (e) {
     let { note } = this.state
 
@@ -263,6 +282,9 @@ class MarkdownNoteDetail extends React.Component {
               value={this.state.note.tags}
               onChange={(e) => this.handleChange(e)}
             />
+            <TodoListPercentage
+              percentageOfTodo={this.getPercentageOfCompleteTodo(note.content)}
+            />
           </div>
           <div styleName='info-right'>
             {(() => {