80678 delete selected pages

packages/app/src/components/SearchPage.jsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import toastr from 'toastr';
 
 import { withUnstatedContainers } from './UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
@@ -12,6 +13,7 @@ import SearchPageLayout from './SearchPage/SearchPageLayout';
 import SearchResultContent from './SearchPage/SearchResultContent';
 import SearchResultList from './SearchPage/SearchResultList';
 import SearchControl from './SearchPage/SearchControl';
+import DeletePageListModal from './SearchPage/DeletePageListModal';
 
 import { CheckboxType } from '../interfaces/search';
 
@@ -20,6 +22,15 @@ export const specificPathNames = {
   trash: '/trash',
 };
 
+const toastrOption = {
+  closeButton: true,
+  progressBar: true,
+  newestOnTop: false,
+  showDuration: '100',
+  hideDuration: '100',
+  timeOut: '3000',
+};
+
 class SearchPage extends React.Component {
 
   constructor(props) {
@@ -50,6 +61,10 @@ class SearchPage extends React.Component {
     this.onExcludeUsersHome = this.onExcludeUsersHome.bind(this);
     this.onExcludeTrash = this.onExcludeTrash.bind(this);
     this.onPagingNumberChanged = this.onPagingNumberChanged.bind(this);
+    this.deleteSelectedPages = this.deleteSelectedPages.bind(this);
+    this.onClickDeleteAllButton = this.onClickDeleteAllButton.bind(this);
+    this.onCloseDeleteConfirmModal = this.onCloseDeleteConfirmModal.bind(this);
+    this.onChangeDeleteCompletely = this.onChangeDeleteCompletely.bind(this);
   }
 
   componentDidMount() {
@@ -220,6 +235,48 @@ class SearchPage extends React.Component {
     });
   };
 
+  getSelectedPages() {
+    return this.state.searchedPages.filter((page) => {
+      return Array.from(this.state.selectedPagesIdList).find(id => id === page.id);
+    });
+  }
+
+  onClickDeleteAllButton() {
+    if (this.state.selectedPagesIdList.size === 0) { return }
+
+    this.setState({ isDeleteConfirmModalShown: true });
+  }
+
+  onCloseDeleteConfirmModal() {
+    this.setState({ isDeleteConfirmModalShown: false });
+  }
+
+  onChangeDeleteCompletely() {
+    this.setState({ isDeleteCompletely: !this.state.isDeleteCompletely });
+  }
+
+  async deleteSelectedPages() {
+    const deleteCompletely = this.state.isDeleteCompletely || null;
+    try {
+      const selectedPages = this.getSelectedPages();
+      await Promise.all(selectedPages.map(async(page) => {
+        const removePageParams = { page_id: page._id, revision_id: page.revision, completely: deleteCompletely };
+        try {
+          const res = await this.props.appContainer.apiPost('/pages.remove', removePageParams);
+          if (res.ok) { this.state.selectedPagesIdList.delete(page) }
+        }
+        catch (err) {
+          this.setState({ errorMessageForDeleting: err.message });
+          throw new Error(err.message);
+        }
+      }));
+      window.location.reload();
+    }
+    catch (err) {
+      toastr.error(err, 'Error occured', { toastrOption });
+    }
+  }
+
   renderSearchResultContent = () => {
     return (
       <SearchResultContent
@@ -258,6 +315,7 @@ class SearchPage extends React.Component {
         onExcludeTrash={this.onExcludeTrash}
         onClickSelectAllCheckbox={this.toggleAllCheckBox}
         selectAllCheckboxType={this.state.selectAllCheckboxType}
+        onClickDeleteAllButton={this.onClickDeleteAllButton}
       >
       </SearchControl>
     );
@@ -274,6 +332,15 @@ class SearchPage extends React.Component {
           searchingKeyword={this.state.searchedKeyword}
         >
         </SearchPageLayout>
+        <DeletePageListModal
+          isShown={this.state.isDeleteConfirmModalShown}
+          pages={this.getSelectedPages()}
+          errorMessage={this.state.errorMessageForDeleting}
+          cancel={this.onCloseDeleteConfirmModal}
+          confirmedToDelete={this.deleteSelectedPages}
+          isDeleteCompletely={this.state.isDeleteCompletely}
+          onChangeDeleteCompletely={this.onChangeDeleteCompletely}
+        />
       </div>
     );
   }

packages/app/src/components/SearchPage/DeletePageListModal.jsx

@@ -50,7 +50,7 @@ class DeletePageListModal extends React.Component {
                   className="custom-control-input"
                   id="customCheck-delete-completely"
                   checked={this.props.isDeleteCompletely}
-                  onChange={this.props.toggleDeleteCompletely}
+                  onChange={this.props.onChangeDeleteCompletely}
                 />
                 <label
                   className="custom-control-label text-danger"
@@ -85,7 +85,7 @@ DeletePageListModal.propTypes = {
   cancel: PropTypes.func.isRequired, //                 for cancel evnet handling
   isDeleteCompletely: PropTypes.bool,
   confirmedToDelete: PropTypes.func.isRequired, //      for confirmed event handling
-  toggleDeleteCompletely: PropTypes.func.isRequired, // for delete completely check event handling
+  onChangeDeleteCompletely: PropTypes.func.isRequired, // for delete completely check event handling
 };
 
 export default withTranslation()(DeletePageListModal);

packages/app/src/components/SearchPage/SearchControl.tsx

@@ -13,6 +13,7 @@ type Props = {
   onSearchInvoked: (data : any[]) => boolean,
   onExcludeUsersHome?: () => void,
   onExcludeTrash?: () => void,
+  onClickDeleteAllButton?: () => void
   onClickSelectAllCheckbox?: (nextSelectAllCheckboxType: CheckboxType) => void,
 }
 
@@ -35,12 +36,6 @@ const SearchControl: FC <Props> = (props: Props) => {
     }
   };
 
-  const onDeleteSelectedPageHandler = () => {
-    console.log('onDeleteSelectedPageHandler is called');
-    // TODO: implement this function to delete selected pages.
-    // https://estoc.weseek.co.jp/redmine/issues/77525
-  };
-
   return (
     <div className="">
       <div className="search-page-input sps sps--abv">
@@ -56,7 +51,7 @@ const SearchControl: FC <Props> = (props: Props) => {
         <DeleteSelectedPageGroup
           isSelectAllCheckboxDisabled={searchResultCount === 0}
           selectAllCheckboxType={props.selectAllCheckboxType}
-          onClickDeleteButton={onDeleteSelectedPageHandler}
+          onClickDeleteButton={props.onClickDeleteAllButton}
           onClickSelectAllCheckbox={props.onClickSelectAllCheckbox}
         />
         <div className="d-flex align-items-center border rounded border-gray px-2 py-1 mr-2 ml-auto">