Merge branch 'feat/77525-80783-control-selected-pages' into feat/77525-81100-check-if-selected-pages-has-page

packages/app/src/components/SearchPage.jsx

@@ -203,6 +203,7 @@ class SearchPage extends React.Component {
   }
 
   renderSearchResultList = () => {
+    console.log(this.state.selectedPages);
     return (
       <SearchResultList
         pages={this.state.searchedPages || []}

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SearchResultListItem from './SearchResultListItem';
+import PaginationWrapper from '../PaginationWrapper';
+
+class SearchResultList extends React.Component {
+
+  render() {
+    const { focusedPage } = this.props;
+    const focusedPageId = focusedPage != null && focusedPage.id != null ? focusedPage.id : '';
+    return (
+      <>
+        {this.props.pages.map((page) => {
+        // TODO : send cetain length of body (revisionBody) from elastisearch by adding some settings to the query and
+        //         when keyword is not in page content, display revisionBody.
+        // TASK : https://estoc.weseek.co.jp/redmine/issues/79606
+          return (
+            <SearchResultListItem
+              key={page._id}
+              page={page}
+              onClickInvoked={this.props.onClickInvoked}
+              onChangedInvoked={this.props.onChangedInvoked}
+              isSelected={page._id === focusedPageId || false}
+              noLink
+            />
+          );
+        })}
+        {this.props.searchResultCount != null && this.props.searchResultCount > 0 && (
+          <div className="my-4 mx-auto">
+            <PaginationWrapper
+              activePage={this.props.activePage}
+              changePage={this.props.onPagingNumberChanged}
+              totalItemsCount={this.props.searchResultCount || 0}
+              pagingLimit={this.props.pagingLimit}
+            />
+          </div>
+        )}
+      </>
+    );
+  }
+
+}
+
+SearchResultList.propTypes = {
+  pages: PropTypes.array.isRequired,
+  deletionMode: PropTypes.bool.isRequired,
+  focusedPage: PropTypes.object,
+  selectedPages: PropTypes.array.isRequired,
+  searchResultCount: PropTypes.number,
+  activePage: PropTypes.number.isRequired,
+  pagingLimit: PropTypes.number,
+  onClickInvoked: PropTypes.func,
+  onChangedInvoked: PropTypes.func,
+  onPagingNumberChanged: PropTypes.func,
+};
+
+export default SearchResultList;

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

@@ -16,6 +16,7 @@ type Props = {
   pages: ISearchedPage[],
   selectedPages: ISearchedPage[],
   onClickInvoked?: (pageId: string) => void,
+  onChangedInvoked?: (page: ISearchedPage) => void,
   searchResultCount?: number,
   activePage?: number,
   pagingLimit?: number,
@@ -34,6 +35,7 @@ const SearchResultList: FC<Props> = (props:Props) => {
             key={page._id}
             page={page}
             onClickInvoked={props.onClickInvoked}
+            onChangedInvoked={props.onChangedInvoked}
             isSelected={page._id === focusedPageId || false}
           />
         );

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

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UserPicture, PageListMeta, PagePathLabel } from '@growi/ui';
 import { DevidedPagePath } from '@growi/core';
@@ -66,11 +66,15 @@ const PageItemControl: FC<PageItemControlProps> = (props: {page: ISearchedPage})
 type Props = {
   page: ISearchedPage,
   isSelected: boolean,
+  onChangedInvoked?: (page: ISearchedPage) => void,
   onClickInvoked?: (pageId: string) => void,
 }
 
 const SearchResultListItem: FC<Props> = (props:Props) => {
-  const { page, isSelected } = props;
+
+  const {
+    page, isSelected, onClickInvoked, onChangedInvoked,
+  } = props;
 
   // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
   const pageId = `#${page._id}`;
@@ -78,23 +82,38 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   const dPagePath = new DevidedPagePath(page.path, false, true);
   const pagePathElem = <PagePathLabel page={page} isFormerOnly />;
 
-  const onClickInvoked = (pageId) => {
-    if (props.onClickInvoked != null) {
-      props.onClickInvoked(pageId);
-    }
-  };
-
   return (
     <li key={page._id} className={`page-list-li w-100 border-bottom pr-4 list-group-item-action ${isSelected ? 'active' : ''}`}>
       <a
         className="d-block pt-3"
         href={pageId}
-        onClick={() => onClickInvoked(page._id)}
+        onClick={() => {
+          try {
+            if (onClickInvoked == null) { throw new Error('onClickInvoked is null') }
+            onClickInvoked(page._id);
+          }
+          catch (error) {
+            logger.error(error);
+          }
+        }}
       >
         <div className="d-flex">
           {/* checkbox */}
           <div className="form-check my-auto mr-3">
-            <input className="form-check-input my-auto" type="checkbox" value="" id="flexCheckDefault" />
+            <input
+              className="form-check-input my-auto"
+              type="checkbox"
+              id="flexCheckDefault"
+              onClick={() => {
+                try {
+                  if (onChangedInvoked == null) { throw new Error('onChangedInvoked is null') }
+                  onChangedInvoked(page);
+                }
+                catch (error) {
+                  logger.error(error);
+                }
+              }}
+            />
           </div>
           <div className="w-100">
             {/* page path */}

packages/app/src/interfaces/page.ts

@@ -1,4 +1,4 @@
-import { IUser } from './user';
+import { IUser } from './user';
 import { IRevision } from './revision';
 import { ITag } from './tag';