improve SearchResultListHead

packages/app/src/components/SearchPage2.tsx

@@ -12,7 +12,7 @@ import SearchPageBase from './SearchPage2/SearchPageBase';
 type SearchResultListHeadProps = {
   searchResult: IFormattedSearchResult,
   searchingKeyword: string,
-  currentPage: number,
+  offset: number,
   pagingSize: number,
   onPagingSizeChanged: (size: number) => void,
 }
@@ -21,19 +21,21 @@ const SearchResultListHead = (props: SearchResultListHeadProps): JSX.Element =>
   const { t } = useTranslation();
 
   const {
-    searchResult, searchingKeyword, currentPage, pagingSize,
+    searchResult, searchingKeyword, offset, pagingSize,
     onPagingSizeChanged,
   } = props;
 
-  const leftNum = pagingSize * (currentPage - 1) + 1;
-  const rightNum = (leftNum - 1) + (searchResult.meta.count || 0);
+  const { took, total, hitsCount } = searchResult.meta;
+  const leftNum = offset + 1;
+  const rightNum = offset + hitsCount;
 
   return (
-    <div className="d-flex align-items-center justify-content-between my-3 ml-4">
-      <div className="search-result-meta text-nowrap">
-        <span className="font-weight-light">{t('search_result.result_meta')} </span>
-        <span className="h5">{`"${searchingKeyword}"`}</span>
-        <span className="ml-3">{`${leftNum}-${rightNum}`} / {searchResult.meta.total || 0}</span>
+    <div className="d-flex align-items-center justify-content-between">
+      <div className="text-nowrap">
+        {t('search_result.result_meta')}
+        <span className="search-result-keyword">{`"${searchingKeyword}"`}</span>
+        <span className="ml-3">{`${leftNum}-${rightNum}`} / {total}</span>
+        <span className="ml-3 text-muted">({took}ms)</span>
       </div>
       <div className="input-group search-result-select-group ml-4 d-lg-flex d-none">
         <div className="input-group-prepend">
@@ -46,7 +48,7 @@ const SearchResultListHead = (props: SearchResultListHeadProps): JSX.Element =>
           onChange={e => onPagingSizeChanged(Number(e.target.value))}
         >
           {[20, 50, 100, 200].map((limit) => {
-            return <option key={limit} value={limit}>{limit}{t('search_result.page_number_unit')}</option>;
+            return <option key={limit} value={limit}>{limit} {t('search_result.page_number_unit')}</option>;
           })}
         </select>
       </div>
@@ -84,8 +86,8 @@ export const SearchPage = (props: Props): JSX.Element => {
           <SearchResultListHead
             searchResult={data}
             searchingKeyword={conditions.keyword}
-            currentPage={}
-            pagingSize={}
+            offset={conditions.offset}
+            pagingSize={conditions.limit}
             onPagingSizeChanged={() => {}}
           />
         );

packages/app/src/components/SearchPage2/SearchPageBase.tsx

@@ -57,7 +57,7 @@ const SearchPageBase: FC<Props> = (props: Props) => {
               <SearchControl></SearchControl>
 
               <div className="search-result-list-scroll">
-                <div className="d-flex align-items-center justify-content-between my-3 ml-4">
+                <div className="my-3 px-md-4">
                   <SearchResultListHead />
                 </div>
                 <div className="page-list px-md-4">

packages/app/src/interfaces/search.ts

@@ -26,8 +26,8 @@ export type IFormattedSearchResult = {
 
   meta: {
     total: number
-    took?: number
-    count?: number
+    took: number
+    hitsCount: number
   }
 }
 

packages/app/src/server/service/search-delegator/elasticsearch.ts

@@ -634,7 +634,7 @@ class ElasticsearchDelegator implements SearchDelegator<Data> {
       meta: {
         took: result.took,
         total: totalValue,
-        results: result.hits.hits.length,
+        hitsCount: result.hits.hits.length,
       },
       data: result.hits.hits.map((elm) => {
         return {

packages/app/src/styles/_search.scss

@@ -162,7 +162,8 @@
       }
     }
 
-    .search-result-meta {
+    .search-result-keyword {
+      font-size: 17.5px;
       font-weight: bold;
     }
     .search-result-select-group {