# Improve/168 Selective batch deletion in search result page

* Add delete-completely option in search result page for select deletion.

resource/js/components/SearchPage/DeletePageListModal.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button, Modal } from 'react-bootstrap';
+import { Button, Modal, Checkbox } from 'react-bootstrap';
 import moment from 'moment';
 
 import ReactUtils from '../ReactUtils';
@@ -43,6 +43,7 @@ export default class DeletePageListModal extends React.Component {
         </Modal.Body>
         <Modal.Footer>
           <span className="text-danger">{this.props.errorMessage}</span>&nbsp;
+          <Checkbox onClick={this.props.toggleDeleteCompletely}>Delete completely</Checkbox>
           <Button onClick={this.props.cancel}>Cancel</Button>
           <Button onClick={this.props.confirmedToDelete} className="btn-danger">Delete</Button>
         </Modal.Footer>
@@ -56,6 +57,7 @@ DeletePageListModal.propTypes = {
   isShown: PropTypes.bool.isRequired,
   pages: PropTypes.array,
   errorMessage: PropTypes.string,
-  cancel: PropTypes.func.isRequired,            // for cancel evnet handling
-  confirmedToDelete: PropTypes.func.isRequired, // for confirmed event handling
+  cancel: PropTypes.func.isRequired,                 // for cancel evnet handling
+  confirmedToDelete: PropTypes.func.isRequired,      // for confirmed event handling
+  toggleDeleteCompletely: PropTypes.func.isRequired, // for delete completely check event handling
 };

resource/js/components/SearchPage/SearchResult.js

@@ -12,9 +12,11 @@ export default class SearchResult extends React.Component {
     this.state = {
       deletionMode : false,
       selectedPages : new Set(),
+      isDeleteCompletely: undefined,
       isDeleteConfirmModalShown: false,
       errorMessageForDeleting: undefined,
     }
+    this.toggleDeleteCompletely = this.toggleDeleteCompletely.bind(this);
     this.deleteSelectedPages = this.deleteSelectedPages.bind(this);
     this.closeDeleteConfirmModal = this.closeDeleteConfirmModal.bind(this);
   }
@@ -60,33 +62,44 @@ export default class SearchResult extends React.Component {
     this.setState({deletionMode: !this.state.deletionMode});
   }
 
+  /**
+   * toggle check delete completely
+   *
+   * @memberof SearchResult
+   */
+  toggleDeleteCompletely() {
+    // request で completely が undefined でないと指定アリと見なされるため
+    this.setState({isDeleteCompletely: this.state.isDeleteCompletely? undefined : true});
+  }
+
   /**
    * delete selected pages
    *
    * @memberof SearchResult
    */
   deleteSelectedPages() {
-    let isDeleteComplete = true;
+    let isDeleted = true;
+    let deleteCompletely = this.state.isDeleteCompletely;
     Array.from(this.state.selectedPages).map((page) => {
       const pageId = page._id;
       const revisionId = page.revision._id;
       this.props.crowi.apiPost('/pages.remove',
-        {page_id: pageId, revision_id: revisionId})
+        {page_id: pageId, revision_id: revisionId, completely: deleteCompletely})
       .then(res => {
         if (res.ok) {
           this.state.selectedPages.delete(page);
         }
         else {
-          isDeleteComplete = false;
+          isDeleted = false;
         }
       }).catch(err => {
         console.log(err.message);
-        isDeleteComplete = false;
+        isDeleted = false;
         this.setState({errorMessageForDeleting: err.message});
       });
     });
 
-    if ( isDeleteComplete ) {
+    if ( isDeleted ) {
       window.location.reload();
     }
   }
@@ -218,6 +231,7 @@ export default class SearchResult extends React.Component {
           errorMessage={this.state.errorMessageForDeleting}
           cancel={this.closeDeleteConfirmModal}
           confirmedToDelete={this.deleteSelectedPages}
+          toggleDeleteCompletely={this.toggleDeleteCompletely}
         />
 
       </div>//content-main