Implv/125 Selective batch deletion in search result page

* Fix the modal window what displays deletion-selected-page list.

lib/views/modal/delete_pages.html

@@ -1,40 +0,0 @@
-  <div class="modal" id="deletePages">
-    <div class="modal-dialog">
-      <div class="modal-content">
-
-      <form role="form" id="delete-page-form" onsubmit="return false;">
-
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <h4 class="modal-title"><i class="fa fa-trash-o"></i> Delete Page</h4>
-        </div>
-        <div class="modal-body">
-          <div class="form-group">
-            <label for="">Deleting page:</label><br>
-            <code>{{ page.path }}</code>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <p><small class="pull-left" id="delete-errors"></small></p>
-          <input type="hidden" name="_csrf" value="{{ csrf() }}">
-          <input type="hidden" name="path" value="{{ page.path }}">
-          <input type="hidden" name="page_id" value="{{ page._id.toString() }}">
-          <input type="hidden" name="revision_id" value="{{ page.revision._id.toString() }}">
-          <label class="checkbox-inline text-danger">
-            <input type="checkbox" name="recursively" checked>recursively
-          </label>
-          {% if page.isDeleted() %}
-            <input type="hidden" name="completely" value="true">
-            <button type="submit" class="btn btn-danger delete-button"><i class="fa fa-times-circle" aria-hidden="true"></i> Delete Completely</button>
-          {% else %}
-            <label class="checkbox-inline text-danger">
-              <input type="checkbox" name="completely">completely
-            </label>
-            <button type="submit" class="btn btn-danger delete-button">Delete</button>
-          {% endif %}
-        </div>
-
-      </form>
-      </div><!-- /.modal-content -->
-    </div><!-- /.modal-dialog -->
-  </div><!-- /.modal -->

lib/views/search.html

@@ -13,7 +13,4 @@
 <div class="" id="search-page">
 </div>
 
-<div id="crowi-modals">
-  {% include 'modal/delete_pages.html' %}
-</div>
 {% endblock %}

resource/js/components/SearchPage/SearchResult.js

@@ -37,12 +37,35 @@ export default class SearchResult extends React.Component {
     } else {
       this.state.selectedPages.add(page);
     }
+    this.setState({selectedPages: this.state.selectedPages});
   }
 
   handleDeletionModeChange() {
     this.setState({deletionMode: !this.state.deletionMode});
   }
 
+  handleFormSubmit() {
+      // delete
+      $('#delete-pages-form').submit(function(e) {
+        $.ajax({
+          type: 'POST',
+          url: '/_api/pages.remove',
+          data: $('#delete-pages-form').serialize(),
+          dataType: 'json'
+        }).done(function(res) {
+          if (!res.ok) {
+            $('#delete-errors').html('<i class="fa fa-times-circle"></i> ' + res.error);
+            $('#delete-errors').addClass('alert-danger');
+          } else {
+            var page = res.page;
+            top.location.href = page.path;
+          }
+        });
+
+        return false;
+      });
+  }
+
   render() {
     const excludePathString = this.props.tree;
 
@@ -108,6 +131,12 @@ export default class SearchResult extends React.Component {
       );
     });
 
+    const selectedListView = Array.from(this.state.selectedPages).map((page) => {
+        return (
+          <li key={page._id}>{page.path}</li>
+        );
+    });
+
     // TODO あとでなんとかする
     setTimeout(() => {
       $('#search-result-list > nav').affix({ offset: { top: 120 }});
@@ -136,7 +165,39 @@ export default class SearchResult extends React.Component {
               />
           </div>
         </div>
-      </div>
+        <div id="crowi-modals">
+          <div className="modal" id="deletePages">
+            <div className="modal-dialog">
+              <div className="modal-content">
+              <form role="form" id="delete-pages-form" onSubmit="return false;">
+                <div className="modal-header">
+                  <button type="button" className="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                  <h4 className="modal-title"><i className="fa fa-trash-o"></i> Delete Pages</h4>
+                </div>
+                <div className="modal-body">
+                  <div className="form-group">
+                    <label htmlFor="">Deleting pages:</label>
+                    <ul>
+                      {selectedListView}
+                    </ul>
+                  </div>
+                </div>
+                <div className="modal-footer">
+                  <p><small className="pull-left" id="delete-errors"></small></p>
+                  <input type="hidden" name="_csrf" value="{{ csrf() }}"/>
+                  <input type="hidden" name="path" value="{{ page.path }}"/>
+                  <input type="hidden" name="page_id" value="{{ page._id.toString() }}"/>
+                  <input type="hidden" name="revision_id" value="{{ page.revision._id.toString() }}"/>
+                  <button type="submit" className="btn btn-danger delete-button" onClick={this.handleFormSubmit}>Delete</button>
+                </div>
+
+              </form>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>//content-main
     );
   }
 }