tmp

lib/views/page.html

@@ -168,36 +168,11 @@
     {% endif %}
 
     {# raw revision history #}
+    {% if not page %}
+    {% else %}
     <div class="tab-pane revision-history" id="revision-history">
-      <h1><i class="fa fa-history"></i> History</h1>
-      {% if not page %}
-      {% else %}
-      <div class="revision-history-list">
-        {% for tt in tree %}
-        <div class="revision-hisory-outer">
-          <img src="{{ tt.author|picture }}" class="picture picture-rounded">
-          <div class="revision-history-main">
-            <div class="revision-history-author">
-              <strong>{% if tt.author %}{{ tt.author.username }}{% else %}-{% endif %}</strong>
-            </div>
-            <div class="revision-history-comment">
-            </div>
-            <div class="revision-history-meta">
-              {{ tt.createdAt|datetz('Y-m-d H:i:s') }}
-              <br>
-              <a href="?revision={{ tt._id.toString() }}"><i class="fa fa-history"></i> {{ t('View this version') }}</a>
-              <a class="diff-view" data-revision-id="{{ tt._id.toString() }}">
-                <i id="diff-icon-{{ tt._id.toString() }}" class="fa fa-arrow-circle-right"></i> {{ t('View diff') }}
-              </a>
-              <div class="" id="diff-display-{{ tt._id.toString()}}" style="display: none"></div>
-            </div>
-          </div>
-        </div>
-        {% endfor %}
-      </div>
-      {% endif %}
-
     </div>
+    {% endif %}
 
   </div>
   {% endif %}

resource/js/app.js

@@ -5,10 +5,11 @@ import Crowi from './util/Crowi';
 import CrowiRenderer from './util/CrowiRenderer';
 
 import HeaderSearchBox  from './components/HeaderSearchBox';
-import SearchPage  from './components/SearchPage';
-import PageListSearch  from './components/PageListSearch';
+import SearchPage       from './components/SearchPage';
+import PageListSearch   from './components/PageListSearch';
+import PageHistory      from './components/PageHistory';
+import SeenUserList     from './components/SeenUserList';
 //import PageComment  from './components/PageComment';
-import SeenUserList from './components/SeenUserList';
 
 if (!window) {
   window = {};
@@ -21,10 +22,13 @@ crowi.fetchUsers();
 const crowiRenderer = new CrowiRenderer();
 window.crowiRenderer = crowiRenderer;
 
+const pageId = $('#content-main').data('page-id');
+
 const componentMappings = {
   'search-top': <HeaderSearchBox />,
   'search-page': <SearchPage />,
   'page-list-search': <PageListSearch />,
+  'revision-history': <PageHistory pageId={pageId} />,
   //'page-comment': <PageComment />,
   'seen-user-list': <SeenUserList />,
 };

resource/js/components/PageHistory.js

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import Icon from './Common/Icon';
+import PageRevisionList from './PageHistory/PageRevisionList';
+
+export default class PageHistory extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.crowi = window.crowi; // FIXME
+
+    this.state = {
+      revisions: [],
+    };
+  }
+
+  componentDidMount() {
+    const pageId = this.props.pageId;
+
+    if (!pageId) {
+      return ;
+    }
+
+    this.crowi.apiGet('/revisions.ids', {page_id: pageId})
+    .then(res => {
+
+      const rev = res.revisions;
+      res.revisions.map((revision, i) => {
+        const user = this.crowi.findUserById(revision.author);
+        if (user) {
+          rev[i].author = user;
+        }
+      });
+
+      this.setState({revisions: rev});
+    }).catch(err => {
+      // do nothing
+    });
+  }
+
+  fetchPageRevisionBody()
+  {
+  }
+
+  render() {
+    return (
+      <div>
+        <h1><Icon name="history" /> History</h1>
+        <PageRevisionList revisions={this.state.revisions} />
+      </div>
+    );
+  }
+}
+
+PageHistory.propTypes = {
+  pageId: React.PropTypes.string,
+};
+
+/*
+    <div class="tab-pane revision-history" id="revision-history">
+      <div class="revision-history-list">
+        {% for tt in tree %}
+        <div class="revision-hisory-outer">
+          <img src="{{ tt.author|picture }}" class="picture picture-rounded">
+          <div class="revision-history-main">
+            <div class="revision-history-author">
+              <strong>{% if tt.author %}{{ tt.author.username }}{% else %}-{% endif %}</strong>
+            </div>
+            <div class="revision-history-comment">
+            </div>
+            <div class="revision-history-meta">
+              {{ tt.createdAt|datetz('Y-m-d H:i:s') }}
+              <br>
+              <a href="?revision={{ tt._id.toString() }}"><i class="fa fa-history"></i> {{ t('View this version') }}</a>
+              <a class="diff-view" data-revision-id="{{ tt._id.toString() }}">
+                <i id="diff-icon-{{ tt._id.toString() }}" class="fa fa-arrow-circle-right"></i> {{ t('View diff') }}
+              </a>
+              <div class="" id="diff-display-{{ tt._id.toString()}}" style="display: none"></div>
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+      */

resource/js/components/PageHistory/PageRevisionList.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import Revision from './Revision';
+
+export default class PageRevisionList extends React.Component {
+
+  fetchPreviousRevision(currentRevision) {
+
+    let cursor = null;
+    for (let revision of this.props.revisions) {
+      if (cursor && cursor._id == currentRevision._id) {
+        cursor = revision;
+        break;
+      }
+
+      cursor = revision;
+    }
+
+    console.log('previous is', cursor);
+  }
+
+  render() {
+    const revisionList = this.props.revisions.map((revision) =>
+      <Revision key={revision._id} revision={revision} fetchPreviousRevision={this.fetchPreviousRevision.bind(this)} />
+    );
+
+    return (
+      <div className="revision-history-list">
+        {revisionList}
+      </div>
+    );
+  }
+}
+
+PageRevisionList.propTypes = {
+  revisions: React.PropTypes.array,
+}
+

resource/js/components/PageHistory/Revision.js

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import UserDate     from '../Common/UserDate';
+import Icon         from '../Common/Icon';
+import UserPicture  from '../User/UserPicture';
+import RevisionDiff from './RevisionDiff';
+
+export default class Revision extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.openRevisionDiff = this.openRevisionDiff.bind(this);
+  }
+
+  componentDidMount() {
+  }
+
+  openRevisionDiff() {
+    this.props.fetchPreviousRevision(this.props.revision);
+  }
+
+  render() {
+    const revision = this.props.revision;
+    const author = revision.author;
+
+    let pic = '';
+    if (typeof author === 'object') {
+      pic = <UserPicture user={author} />;
+    }
+
+    //<a href={"?revision=" + revision._id }><Icon name="history" /> {{ t('View this version') }}</a>
+    return (
+      <div className="revision-hisory-outer">
+        {pic}
+        <div className="revision-history-main">
+          <div className="revision-history-author">
+            <strong>{author.username}</strong>
+          </div>
+          <div className="revision-history-meta">
+            <UserDate dateTime={revision.createdAt} />
+            <br />
+            <a href={"?revision=" + revision._id }>
+              <Icon name="history" /> View this version
+            </a>
+            <a className="diff-view" onClick={this.openRevisionDiff}>
+              <Icon name="arrow-circle-right" /> View diff
+            </a>
+
+            <RevisionDiff
+              current={revision}
+              previous={this.props.previousRevisionText}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+    /*
+        <img src="{{ tt.author|picture }}" class="picture picture-rounded">
+        <div class="revision-history-main">
+          <div class="revision-history-author">
+            <strong>{% if tt.author %}{{ tt.author.username }}{% else %}-{% endif %}</strong>
+          </div>
+          <div class="revision-history-comment">
+          </div>
+          <div class="revision-history-meta">
+            {{ tt.createdAt|datetz('Y-m-d H:i:s') }}
+            <br>
+            <a href="?revision={{ tt._id.toString() }}"><i class="fa fa-history"></i> {{ t('View this version') }}</a>
+            <a class="diff-view" data-revision-id="{{ tt._id.toString() }}">
+              <i id="diff-icon-{{ tt._id.toString() }}" class="fa fa-arrow-circle-right"></i> {{ t('View diff') }}
+            </a>
+            <div class="" id="diff-display-{{ tt._id.toString()}}" style="display: none"></div>
+          </div>
+        </div>
+        */
+}
+
+Revision.propTypes = {
+  revision: React.PropTypes.object,
+  previousRevisionText: React.PropTypes.string,
+}
+

resource/js/components/PageHistory/RevisionDiff.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export default class RevisionDiff extends React.Component {
+
+  render() {
+    return (
+      <div className="revision-hisory-outer">
+        diff
+      </div>
+    );
+  }
+    /*
+        <img src="{{ tt.author|picture }}" class="picture picture-rounded">
+        <div class="revision-history-main">
+          <div class="revision-history-author">
+            <strong>{% if tt.author %}{{ tt.author.username }}{% else %}-{% endif %}</strong>
+          </div>
+          <div class="revision-history-comment">
+          </div>
+          <div class="revision-history-meta">
+            {{ tt.createdAt|datetz('Y-m-d H:i:s') }}
+            <br>
+            <a href="?revision={{ tt._id.toString() }}"><i class="fa fa-history"></i> {{ t('View this version') }}</a>
+            <a class="diff-view" data-revision-id="{{ tt._id.toString() }}">
+              <i id="diff-icon-{{ tt._id.toString() }}" class="fa fa-arrow-circle-right"></i> {{ t('View diff') }}
+            </a>
+            <div class="" id="diff-display-{{ tt._id.toString()}}" style="display: none"></div>
+          </div>
+        </div>
+        */
+}
+
+

resource/js/util/Crowi.js

@@ -22,6 +22,7 @@ export default class Crowi {
 
     this.users = [];
     this.userByName = {};
+    this.userById   = {};
     this.draft = {};
 
     this.recoverData();
@@ -34,6 +35,7 @@ export default class Crowi {
   recoverData() {
     const keys = [
       'userByName',
+      'userById',
       'users',
       'draft',
     ];
@@ -50,7 +52,7 @@ export default class Crowi {
   }
 
   fetchUsers () {
-    const interval = 1000*60*10; // 5min
+    const interval = 1000*60*15; // 15min
     const currentTime = new Date();
     if (!this.localStorage.lastFetched && interval > currentTime - new Date(this.localStorage.lastFetched)) {
       return ;
@@ -62,13 +64,18 @@ export default class Crowi {
       this.localStorage.users = JSON.stringify(data.users);
 
       let userByName = {};
+      let userById = {};
       for (let i = 0; i < data.users.length; i++) {
         const user = data.users[i];
         userByName[user.username] = user;
+        userById[user._id] = user;
       }
       this.userByName = userByName;
       this.localStorage.userByName = JSON.stringify(userByName);
 
+      this.userById = userById;
+      this.localStorage.userById = JSON.stringify(userById);
+
       this.localStorage.lastFetched = new Date();
     }).catch(err => {
       this.localStorage.removeItem('lastFetched');
@@ -94,6 +101,14 @@ export default class Crowi {
     return null;
   }
 
+  findUserById(userId) {
+    if (this.userById && this.userById[userId]) {
+      return this.userById[userId];
+    }
+
+    return null;
+  }
+
   findUser(username) {
     if (this.userByName && this.userByName[username]) {
       return this.userByName[username];