feat: Page indicator

modules/CustomerService/Tickets.js

@@ -499,6 +499,7 @@ BatchOperationMenu.propTypes = {
  */
 export function useTickets() {
   const [tickets, setTickets] = useState([])
+  const [totalCount, setTotalCount] = useState()
   const { tagMetadatas } = useContext(AppContext)
   const { filters } = useTicketFilters()
 
@@ -577,52 +578,59 @@ export function useTickets() {
       query = query.where('objectId', 'in', searchMatchedTicketIds)
     }
 
-    const ticketObjects = await query
+    const [ticketObjects, count] = await query
       .include('author', 'assignee')
       .limit(PAGE_SIZE)
       .skip(parseInt(page) * PAGE_SIZE)
       .orderBy('latestReply.updatedAt', 'desc')
       .orderBy('updatedAt', 'desc')
-      .find()
+      .findAndCount()
     setTickets(ticketObjects.map((t) => t.toJSON()))
+    setTotalCount(count)
   }, [filters])
 
   useEffect(() => {
     findTickets()
   }, [filters])
 
-  return { tickets, reload: findTickets }
+  return { tickets, totalCount, reload: findTickets }
 }
 
-function TicketPager({ noMore }) {
+function TicketPager({ totalCount }) {
   const { t } = useTranslation()
   const { filters, updatePath } = useTicketFilters()
-  const { page = '0' } = filters
-  const isFirstPage = page === '0'
+  const { page: pageParam = '0' } = filters
+  const page = parseInt(pageParam)
+  const isFirstPage = page === 0
+  const noMore = totalCount <= (page + 1) * PAGE_SIZE
 
-  if (isFirstPage && noMore) {
-    return null
-  }
   return (
-    <div className="my-2 d-flex justify-content-between">
-      <Button
-        variant="light"
-        disabled={isFirstPage}
-        onClick={() => updatePath({ page: parseInt(page) - 1 })}
-      >
-        &larr; {t('previousPage')}
-      </Button>
-      <Button
-        variant="light"
-        disabled={noMore}
-        onClick={() => updatePath({ page: parseInt(page) + 1 })}
-      >
+    <div className="my-2 d-flex justify-content-between align-items-center">
+      <div>
+        <Button variant="light" disabled={isFirstPage} onClick={() => updatePath({ page: 0 })}>
+          {t('firstPage')}
+        </Button>{' '}
+        <Button
+          variant="light"
+          disabled={isFirstPage}
+          onClick={() => updatePath({ page: page - 1 })}
+        >
+          &larr; {t('previousPage')}
+        </Button>
+      </div>
+      {totalCount > 0 && (
+        <span>
+          {page * PAGE_SIZE + 1} - {Math.min(totalCount, (page + 1) * PAGE_SIZE)} / {totalCount}
+        </span>
+      )}
+      <Button variant="light" disabled={noMore} onClick={() => updatePath({ page: page + 1 })}>
         {t('nextPage')} &rarr;
       </Button>
     </div>
   )
 }
 TicketPager.propTypes = {
+  totalCount: PropTypes.number,
   noMore: PropTypes.bool,
 }
 
@@ -633,7 +641,7 @@ export default function CustomerServiceTickets() {
   const [checkedTickets, setCheckedTickets] = useState(new Set())
   const customerServices = useCustomerServices()
   const categories = useCategories()
-  const { tickets, reload } = useTickets()
+  const { tickets, totalCount, reload } = useTickets()
 
   const handleCheckAll = (e) => {
     if (e.target.checked) {
@@ -715,7 +723,7 @@ export default function CustomerServiceTickets() {
         checkedTicketIds={checkedTickets}
         onCheckTicket={handleCheckTicket}
       />
-      <TicketPager noMore={tickets.length < PAGE_SIZE} />
+      <TicketPager totalCount={totalCount} />
     </div>
   )
 }

modules/i18n/locales.js

@@ -223,6 +223,10 @@ const messages = {
     'Previous',
     '上一页'
   ],
+  'firstPage': [
+    'Page 1',
+    '第一页'
+  ],
   'private': [
     'Private',
     '非公开'

package.json

@@ -49,7 +49,7 @@
     "mailgun-js": "^0.18.0",
     "mini-css-extract-plugin": "^1.3.5",
     "moment": "^2.29.1",
-    "open-leancloud-storage": "0.0.24",
+    "open-leancloud-storage": "0.0.25",
     "query-string": "^6.14.0",
     "randomcolor": "^0.5.3",
     "randomstring": "^1.1.5",