Przeglądaj źródła

# Improve/168 Selective batch deletion in search result page
* Add full selection function to select delete.

Tatsuya Ise 8 lat temu
rodzic
commit
9293e6737a
1 zmienionych plików z 38 dodań i 0 usunięć
  1. 38 0
      resource/js/components/SearchPage/SearchResult.js

+ 38 - 0
resource/js/components/SearchPage/SearchResult.js

@@ -52,6 +52,33 @@ export default class SearchResult extends React.Component {
     this.setState({selectedPages: this.state.selectedPages});
     this.setState({selectedPages: this.state.selectedPages});
   }
   }
 
 
+  /**
+   * check and return is all pages selected for delete?
+   *
+   * @returns all pages selected (or not)
+   * @memberof SearchResult
+   */
+  isAllSelected() {
+    return this.state.selectedPages.size == this.props.pages.length;
+  }
+
+  /**
+   * handle checkbox clicking that all pages select for delete
+   *
+   * @memberof SearchResult
+   */
+  handleAllSelect() {
+    if (this.isAllSelected()) {
+      this.state.selectedPages.clear();
+    }
+    else {
+      this.state.selectedPages.clear();
+      this.props.pages.map((page) => {
+        this.state.selectedPages.add(page);
+      });
+    }
+    this.setState({selectedPages: this.state.selectedPages});
+  }
   /**
   /**
    * change deletion mode
    * change deletion mode
    *
    *
@@ -156,6 +183,7 @@ export default class SearchResult extends React.Component {
     }
     }
 
 
     let deletionModeButtons = '';
     let deletionModeButtons = '';
+    let allSelectCheck = '';
 
 
     if (this.state.deletionMode) {
     if (this.state.deletionMode) {
       deletionModeButtons =
       deletionModeButtons =
@@ -163,6 +191,15 @@ export default class SearchResult extends React.Component {
         <button type="button" className="btn btn-danger btn-xs" onClick={() => this.showDeleteConfirmModal()} disabled={this.state.selectedPages.size == 0}><i className="fa fa-trash-o"/> Delete</button>
         <button type="button" className="btn btn-danger btn-xs" onClick={() => this.showDeleteConfirmModal()} disabled={this.state.selectedPages.size == 0}><i className="fa fa-trash-o"/> Delete</button>
         <button type="button" className="btn btn-default btn-xs" onClick={() => this.handleDeletionModeChange()}><i className="fa fa-undo"/> Cancel</button>
         <button type="button" className="btn btn-default btn-xs" onClick={() => this.handleDeletionModeChange()}><i className="fa fa-undo"/> Cancel</button>
       </div>
       </div>
+      allSelectCheck =
+      <div className="">
+        <input
+         type="checkbox"
+         onClick={() => this.handleAllSelect()}
+         checked={this.isAllSelected()}
+         label="Check All"/>
+        Check All
+      </div>
     }
     }
     else {
     else {
       deletionModeButtons =
       deletionModeButtons =
@@ -212,6 +249,7 @@ export default class SearchResult extends React.Component {
               <div className="search-result-meta">
               <div className="search-result-meta">
                 <i className="fa fa-lightbulb-o" /> Found {this.props.searchResultMeta.total} pages with "{this.props.searchingKeyword}"
                 <i className="fa fa-lightbulb-o" /> Found {this.props.searchResultMeta.total} pages with "{this.props.searchingKeyword}"
               </div>
               </div>
+              <div className="pull-left">{allSelectCheck}</div>
               <div className="clearfix"></div>
               <div className="clearfix"></div>
               <ul className="page-list-ul page-list-ul-flat nav">
               <ul className="page-list-ul page-list-ul-flat nav">
                 {listView}
                 {listView}