1- import { BillingReceipt as BillingReceiptType , BillingReceiptWhereInput , SortBillingReceiptsBy , TourStepTypeType , UserTypeType } from '@app/condo/schema'
1+ import { BillingReceipt as BillingReceiptType , BillingReceiptWhereInput , SortBillingReceiptsBy , TourStepTypeType } from '@app/condo/schema'
22import { Col , Row , Space , Typography , type RowProps } from 'antd'
33import dayjs , { Dayjs } from 'dayjs'
44import get from 'lodash/get'
@@ -9,7 +9,6 @@ import React, { CSSProperties, useCallback, useEffect, useMemo, useRef, useState
99
1010import bridge from '@open-condo/bridge'
1111import { useApolloClient } from '@open-condo/next/apollo'
12- import { useAuth } from '@open-condo/next/auth'
1312import { useIntl } from '@open-condo/next/intl'
1413import { useOrganization } from '@open-condo/next/organization'
1514import {
@@ -76,6 +75,7 @@ export const ReceiptsTable: React.FC = () => {
7675 const tableRef = useRef < TableRef | null > ( null )
7776 const [ search , handleSearchChange , setSearch ] = useTableSearch ( tableRef )
7877 const [ selectedRowsCount , setSelectedRowsCount ] = useState < number > ( 0 )
78+ const [ selectedRowIds , setSelectedRowIds ] = useState < string [ ] > ( [ ] )
7979 const [ loadingError , setLoadingError ] = useState < boolean > ( false )
8080 const [ period , setPeriod ] = useState < Dayjs | null > ( ( ) => reportPeriod ? dayjs ( reportPeriod , 'YYYY-MM-DD' ) : null )
8181
@@ -211,20 +211,20 @@ export const ReceiptsTable: React.FC = () => {
211211 } , [ apolloClient , contextIds , filtersToWhere , sortersToSortBy , updateStepIfNotCompleted ] )
212212
213213 const softDeleteSelectedReceipts = useCallback ( async ( ) => {
214- const selectedRows = tableRef . current ?. api ?. getRowSelection ( ) || [ ]
215- if ( ! selectedRows . length ) return
214+ if ( ! selectedRowIds . length ) return
216215
217216 const deletedAt = new Date ( ) . toISOString ( )
218217
219- for ( const id of selectedRows ) {
218+ for ( const id of selectedRowIds ) {
220219 await updateReceipt ( { deletedAt } , { id } )
221220 }
222221
223222 tableRef . current ?. api ?. resetRowSelection ( )
224223 setSelectedRowsCount ( 0 )
224+ setSelectedRowIds ( [ ] )
225225 tableRef . current ?. api ?. setPagination ( { startRow : 0 , endRow : DEFAULT_PAGE_SIZE } )
226226 await tableRef . current ?. api ?. refetchData ( )
227- } , [ updateReceipt ] )
227+ } , [ selectedRowIds , updateReceipt ] )
228228
229229 const selectedReceiptsActionBarButtons : ActionBarProps [ 'actions' ] = useMemo ( ( ) => [
230230 < DeleteButtonWithConfirmModal
@@ -244,6 +244,7 @@ export const ReceiptsTable: React.FC = () => {
244244 onClick = { ( ) => {
245245 tableRef . current ?. api ?. resetRowSelection ( )
246246 setSelectedRowsCount ( 0 )
247+ setSelectedRowIds ( [ ] )
247248 } }
248249 >
249250 { CancelSelectionMessage }
@@ -260,19 +261,21 @@ export const ReceiptsTable: React.FC = () => {
260261 enableRowSelection : canManageReceipts ,
261262 onRowSelectionChange : ( rowSelectionState : RowSelectionState ) => {
262263 setSelectedRowsCount ( rowSelectionState . length )
264+ setSelectedRowIds ( rowSelectionState )
263265 } ,
264266 } ) , [ canManageReceipts ] )
265267
266268 const getRowId = useCallback ( ( row : BillingReceiptType ) => row . id , [ ] )
267269 const onTableReady = useCallback ( ( nextTableRef : TableRef ) => {
268270 const tableSearch = nextTableRef . api . getGlobalFilter ( )
269271 setSearch ( String ( tableSearch || '' ) )
270- setSelectedRowsCount ( nextTableRef . api . getRowSelection ( ) . length )
272+ setSelectedRowsCount ( initialTableState . rowSelectionState . length )
273+ setSelectedRowIds ( initialTableState . rowSelectionState )
271274
272275 const tablePeriod = get ( nextTableRef . api . getFilterState ( ) , 'period' )
273276 const nextPeriod = tablePeriod ? dayjs ( String ( tablePeriod ) , 'YYYY-MM-DD' ) : ( reportPeriod ? dayjs ( reportPeriod , 'YYYY-MM-DD' ) : null )
274277 setPeriod ( nextPeriod )
275- } , [ reportPeriod , setSearch ] )
278+ } , [ initialTableState . rowSelectionState , reportPeriod , setSearch ] )
276279
277280 useEffect ( ( ) => {
278281 const handleRedirect = async ( event ) => {
@@ -304,19 +307,27 @@ export const ReceiptsTable: React.FC = () => {
304307 )
305308 } , [ onPeriodChange , period ] )
306309
307- if ( loadingError ) {
308- return (
309- < BasicEmptyListView >
310- < Typography . Title level = { 4 } >
311- { LoadingErrorMessage }
312- </ Typography . Title >
313- </ BasicEmptyListView >
314- )
315- }
316-
317310 return (
318311 < >
319312 < Row gutter = { ITEMS_GUTTER } >
313+ { loadingError && (
314+ < Col span = { 24 } >
315+ < BasicEmptyListView >
316+ < Typography . Title level = { 4 } >
317+ { LoadingErrorMessage }
318+ </ Typography . Title >
319+ < Button
320+ type = 'secondary'
321+ onClick = { async ( ) => {
322+ setLoadingError ( false )
323+ await tableRef . current ?. api ?. refetchData ( )
324+ } }
325+ >
326+ Retry
327+ </ Button >
328+ </ BasicEmptyListView >
329+ </ Col >
330+ ) }
320331 < Col span = { 24 } >
321332 < TableFiltersContainer >
322333 < Row gutter = { FILTERS_GUTTER } >
0 commit comments