Merge pull request #4774 from weseek/feat/80324-82578-show-result-count-properly

82578 render showing page count infomation

packages/app/src/components/SearchPage.jsx

@@ -33,7 +33,7 @@ class SearchPage extends React.Component {
       selectedPages: new Set(),
       searchResultCount: 0,
       activePage: 1,
-      pagingLimit: this.props.appContainer.config.pageLimitationL,
+      pagingLimit: this.props.appContainer.config.pageLimitationL || 50,
       excludeUserPages: true,
       excludeTrashPages: true,
     };
@@ -248,7 +248,8 @@ class SearchPage extends React.Component {
           searchResultMeta={this.state.searchResultMeta}
           searchingKeyword={this.state.searchedKeyword}
           onPagingLimitChanged={this.onPagingLimitChanged}
-          initialPagingLimit={this.props.appContainer.config.pageLimitationL || 50}
+          pagingLimit={this.state.pagingLimit}
+          activePage={this.state.activePage}
         >
         </SearchPageLayout>
       </div>

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

@@ -2,9 +2,9 @@ import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type SearchResultMeta = {
-  took : number,
-  total : number,
-  results: number
+  took?: number,
+  total?: number,
+  results?: number
 }
 
 type Props = {
@@ -13,16 +13,24 @@ type Props = {
   SearchResultContent: React.FunctionComponent,
   searchResultMeta: SearchResultMeta,
   searchingKeyword: string,
-  initialPagingLimit: number,
+  pagingLimit: number,
+  activePage: number,
   onPagingLimitChanged: (limit: number) => void
 }
 
 const SearchPageLayout: FC<Props> = (props: Props) => {
   const { t } = useTranslation('');
   const {
-    SearchResultList, SearchControl, SearchResultContent, searchResultMeta, searchingKeyword,
+    SearchResultList, SearchControl, SearchResultContent, searchResultMeta, searchingKeyword, pagingLimit, activePage,
   } = props;
 
+  const renderShowingPageCountInfo = () => {
+    if (searchResultMeta.total == null || searchResultMeta.total === 0) return;
+    const leftNum = pagingLimit * (activePage - 1) + 1;
+    const rightNum = (leftNum - 1) + (searchResultMeta.results || 0);
+    return <span className="ml-3">{`${leftNum}-${rightNum}`} / {searchResultMeta.total || 0}</span>;
+  };
+
   return (
     <div className="content-main">
       <div className="search-result d-flex" id="search-result">
@@ -30,19 +38,19 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
 
           <SearchControl></SearchControl>
           <div className="d-flex align-items-center justify-content-between my-3 ml-4">
-            <div className="search-result-meta text-nowrap mr-3">
+            <div className="search-result-meta text-nowrap">
               <span className="font-weight-light">{t('search_result.result_meta')} </span>
               <span className="h5">{`"${searchingKeyword}"`}</span>
               {/* Todo: replace "1-10" to the appropriate value */}
-              <span className="ml-3">1-10 / {searchResultMeta.total || 0}</span>
+              {renderShowingPageCountInfo()}
             </div>
-            <div className="input-group search-result-select-group">
+            <div className="input-group search-result-select-group ml-4">
               <div className="input-group-prepend">
                 <label className="input-group-text text-secondary" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
               </div>
               <select className="custom-select" id="inputGroupSelect01" onChange={(e) => { props.onPagingLimitChanged(Number(e.target.value)) }}>
                 {[20, 50, 100, 200].map((limit) => {
-                  return <option selected={limit === props.initialPagingLimit} value={limit}>{limit}{t('search_result.page_number_unit')}</option>;
+                  return <option selected={limit === props.pagingLimit} value={limit}>{limit}{t('search_result.page_number_unit')}</option>;
                 })}
               </select>
             </div>