From 7a9de5d68d87128c4545542015966812149c0d4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?= Date: Mon, 26 Sep 2022 11:21:12 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EC=9D=B4=EB=A0=A5=20?= =?UTF-8?q?=ED=98=84=ED=99=A9=20=EB=AA=A9=EB=A1=9D=20pagination=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/spinner/Loading-spinner.js | 6 +- .../analysis/history/AnalysisHistoryGrid.js | 66 ++++++++++--------- src/components/crud/grid/GridDatatable.js | 20 +++++- .../history/AnalysisHistoryContainer.js | 10 ++- .../history/actions/analysisHistoryAction.ts | 2 +- .../history/apis/annalysisHistoryApi.ts | 5 +- .../history/models/analysisHitoryModel.ts | 6 +- .../history/reducers/analysisHitoryReducer.ts | 6 +- .../history/sagas/analysisHistorySaga.ts | 15 +++-- src/modules/utils/customAxiosUtil.ts | 12 +++- src/redux/reducers/loading/index.js | 23 +++++++ src/redux/reducers/rootReducer.ts | 2 + 12 files changed, 118 insertions(+), 55 deletions(-) create mode 100644 src/redux/reducers/loading/index.js diff --git a/src/@core/components/spinner/Loading-spinner.js b/src/@core/components/spinner/Loading-spinner.js index 08da3c3..a2c0851 100644 --- a/src/@core/components/spinner/Loading-spinner.js +++ b/src/@core/components/spinner/Loading-spinner.js @@ -7,7 +7,7 @@ const ComponentSpinner = () => {
- ) -} + ); +}; -export default ComponentSpinner +export default ComponentSpinner; diff --git a/src/components/analysis/history/AnalysisHistoryGrid.js b/src/components/analysis/history/AnalysisHistoryGrid.js index f311323..ff8545f 100644 --- a/src/components/analysis/history/AnalysisHistoryGrid.js +++ b/src/components/analysis/history/AnalysisHistoryGrid.js @@ -24,41 +24,43 @@ import { ExcelExportButton } from '../../crud/excel/ExcelExportButton'; export const AnalysisHistoryGrid = props => { return ( //
- // - // - <> -
-
-

{props.title} 목록

- 검색결과 총 {props.count}건 -
-
- -
-
-
- -
- {/*
+ // + // + <> +
+
+

{props.title} 목록

+ 검색결과 총 {props.total}건 +
+
+ +
+
+
+ +
+ {/*
표시할 데이터가 없습니다.
*/} - -
- +
- - // - // + +
+ + // + // //
); }; diff --git a/src/components/crud/grid/GridDatatable.js b/src/components/crud/grid/GridDatatable.js index a51c067..8c895ba 100644 --- a/src/components/crud/grid/GridDatatable.js +++ b/src/components/crud/grid/GridDatatable.js @@ -7,14 +7,17 @@ import { File, ChevronDown } from 'react-feather'; +import { useSelector } from 'react-redux'; +import LoadingSpinner from '../../../@core/components/spinner/Loading-spinner'; export const GridDatabase = props => { - return props.count <= 0 ? ( + const { loading } = useSelector(state => state.loadingReducer); + return props.total <= 0 ? (
표시할 데이터가 없습니다.
) : ( { // paginationDefaultPage={currentPage} // paginationComponent={CustomPagination} data={props.data} - onSelectedRowsChange={props.onSelectedRowsChange ? props.onSelectedRowsChange : null} + paginationServer={ + props.pagination && props.handlerPageChange ? true : false + } + onSelectedRowsChange={ + props.onSelectedRowsChange ? props.onSelectedRowsChange : null + } selectableRows={props.selectableRows} + onChangePage={props.pagination ? props.handlerPageChange : null} + paginationComponentOptions={{ + noRowsPerPage: props.handlerPageChange ? true : false + }} + // progressPending={props.handlerPageChange ? loading : false} + // progressComponent={} /> ); }; diff --git a/src/containers/analysis/history/AnalysisHistoryContainer.js b/src/containers/analysis/history/AnalysisHistoryContainer.js index 43a6a58..5bfd9fc 100644 --- a/src/containers/analysis/history/AnalysisHistoryContainer.js +++ b/src/containers/analysis/history/AnalysisHistoryContainer.js @@ -22,7 +22,7 @@ import { useHistory } from 'react-router-dom'; import { MessageErrorModal } from '../../../components/message/MessageErrorModal'; export const AnalysisHistoryContainer = props => { - const { data, count, searchParams } = useSelector( + const { data, count, searchParams, total } = useSelector( state => state.analysisHistoryState ); const initSearchData = { @@ -256,7 +256,7 @@ export const AnalysisHistoryContainer = props => { desc: '그룹 선택 해주세요.', color: 'modal-danger' }); - } else dispatch(Actions.list.request({ searchParams: params })); + } else dispatch(Actions.list.request({ searchParams: params, page: 1 })); }; const handlerInput = (type, val) => { @@ -278,6 +278,10 @@ export const AnalysisHistoryContainer = props => { setDateType(val); setIsClick(val); }; + + const handlerPageChange = page => { + dispatch(Actions.list.request({ searchParams: params, page })); + }; return (
@@ -322,6 +326,8 @@ export const AnalysisHistoryContainer = props => { excelHeaders={excelHeaders} count={count} pagination={true} + total={total} + handlerPageChange={handlerPageChange} /> ) : ( diff --git a/src/modules/analysis/history/actions/analysisHistoryAction.ts b/src/modules/analysis/history/actions/analysisHistoryAction.ts index 66532f2..144a9b7 100644 --- a/src/modules/analysis/history/actions/analysisHistoryAction.ts +++ b/src/modules/analysis/history/actions/analysisHistoryAction.ts @@ -27,7 +27,7 @@ export const dispatchSearch = export const list = createAsyncAction(LIST_REQUEST, LIST_SUCCESS, LIST_FAILURE)< AnalysisHistoryState, - { data: AnalysisHistoryData[]; count: number }, + { data: AnalysisHistoryData[]; count: number; total: number }, AxiosError >(); diff --git a/src/modules/analysis/history/apis/annalysisHistoryApi.ts b/src/modules/analysis/history/apis/annalysisHistoryApi.ts index 197e989..e75df1f 100644 --- a/src/modules/analysis/history/apis/annalysisHistoryApi.ts +++ b/src/modules/analysis/history/apis/annalysisHistoryApi.ts @@ -5,14 +5,13 @@ import { AnalysisHistoryState } from '../models/analysisHitoryModel'; // import { ReponseControlGpHistory } from '../models/controlGpModel'; export const analysisHistory = { - list: async (data: string) => { - + list: async (data: string, page: number) => { const queryString = qs.stringify(data, { addQueryPrefix: true, arrayFormat: 'repeat' }); - return await axios.get(`/api/anls/hstry/list` + queryString); + return await axios.get(`/api/anls/hstry/list${queryString}&page=${page}`); }, detail: async (id: string) => { return await axios.get(`/api/anls/hstry/detail/${id}`); diff --git a/src/modules/analysis/history/models/analysisHitoryModel.ts b/src/modules/analysis/history/models/analysisHitoryModel.ts index c3f1ba9..c5256e5 100644 --- a/src/modules/analysis/history/models/analysisHitoryModel.ts +++ b/src/modules/analysis/history/models/analysisHitoryModel.ts @@ -6,6 +6,8 @@ export interface AnalysisHistoryState { searchParams: string; arrSpeed: number[] | undefined; arrElev: number[] | undefined; + page: number | 1; + total: number | 0; } export interface AnalysisHistoryDetailState { @@ -73,5 +75,7 @@ export const initResponseAnalysisHistoryData = { count: 0, searchParams: '', arrSpeed: undefined, - arrElev: undefined + arrElev: undefined, + page: 1, + total: 0 }; diff --git a/src/modules/analysis/history/reducers/analysisHitoryReducer.ts b/src/modules/analysis/history/reducers/analysisHitoryReducer.ts index f71d0e8..3ec741a 100644 --- a/src/modules/analysis/history/reducers/analysisHitoryReducer.ts +++ b/src/modules/analysis/history/reducers/analysisHitoryReducer.ts @@ -20,15 +20,17 @@ export const analysisHistoryReducer = createReducer< ) .handleAction(Actions.list.request, (state, action) => produce(state, draft => { - const { searchParams } = action.payload; + const { searchParams, page } = action.payload; draft.searchParams = searchParams; + draft.page = page; }) ) .handleAction(Actions.list.success, (state, action) => produce(state, draft => { - const { data, count } = action.payload; + const { data, count, total } = action.payload; draft.data = data; draft.count = count; + draft.total = total; }) ) .handleAction(Actions.detail.success, (state, action) => diff --git a/src/modules/analysis/history/sagas/analysisHistorySaga.ts b/src/modules/analysis/history/sagas/analysisHistorySaga.ts index 24dc987..43a2257 100644 --- a/src/modules/analysis/history/sagas/analysisHistorySaga.ts +++ b/src/modules/analysis/history/sagas/analysisHistorySaga.ts @@ -13,14 +13,19 @@ import * as Models from '../models/analysisHitoryModel'; function* listSaga(action: ActionType) { try { - const { searchParams } = action.payload; - const res = yield call(Apis.analysisHistory.list, searchParams); - const { data, count } = res; + const { searchParams, page } = action.payload; + + const res = yield call(Apis.analysisHistory.list, searchParams, page); + const { + data: { items, total }, + count + } = res; yield put( Actions.list.success({ - data: data, - count: count + data: items, + count, + total }) ); } catch (error) { diff --git a/src/modules/utils/customAxiosUtil.ts b/src/modules/utils/customAxiosUtil.ts index b4b326b..c05c1ad 100644 --- a/src/modules/utils/customAxiosUtil.ts +++ b/src/modules/utils/customAxiosUtil.ts @@ -3,6 +3,7 @@ import { HOST } from '../../configs/constants'; import * as Actions from '../../modules/account/login/actions/authAction'; import { getAccessToken } from '../account/login/service/jwtTokenUtil'; import { store } from './../../redux/storeConfig/store'; +import { GLOBAL_LOADED, GLOBAL_LOADING } from '../../redux/reducers/loading'; // import { createJWTToken, getToken } from './authenticationUtils'; // import { logout } from '../utils/authenticationUtils'; @@ -18,10 +19,13 @@ clientInstance.interceptors.request.use( config.headers['Authorization'] = accessToken; // alert(JSON.stringify(config.headers)); + store.dispatch({ + type: GLOBAL_LOADING + }); return config; }, error => { - // console.log(error); + // console.log(error); return Promise.reject(error); } ); @@ -32,7 +36,9 @@ clientInstance.interceptors.response.use( // if (response.data.errCode < 0) { // alert('서버 처리중 오류가 발생하였습니다.'); // } - + store.dispatch({ + type: GLOBAL_LOADED + }); return response.data; }, error => { @@ -49,7 +55,7 @@ clientInstance.interceptors.response.use( // window.location.href = '/account/login'; store.dispatch(Actions.logout.request()); } else { - // console.log('서버 응답에 실패하였습니다.'); + // console.log('서버 응답에 실패하였습니다.'); } return Promise.reject(error); diff --git a/src/redux/reducers/loading/index.js b/src/redux/reducers/loading/index.js new file mode 100644 index 0000000..8162f27 --- /dev/null +++ b/src/redux/reducers/loading/index.js @@ -0,0 +1,23 @@ +import produce from 'immer'; + +export const initialState = { + loading: false +}; + +export const GLOBAL_LOADING = 'LOADING'; +export const GLOBAL_LOADED = 'LOADED'; + +export const loadingReducer = (state = initialState, action) => { + return produce(state, draft => { + switch (action.type) { + case GLOBAL_LOADING: { + draft.loading = true; + break; + } + case GLOBAL_LOADED: { + draft.loading = false; + break; + } + } + }); +}; diff --git a/src/redux/reducers/rootReducer.ts b/src/redux/reducers/rootReducer.ts index f8dc5c2..381433d 100644 --- a/src/redux/reducers/rootReducer.ts +++ b/src/redux/reducers/rootReducer.ts @@ -39,6 +39,7 @@ import { menuReducer } from '../../modules/menu/reducers/menuReducer'; import auth from './auth'; import layout from './layout'; import navbar from './navbar'; +import { loadingReducer } from './loading'; import { flightReducer } from '../../modules/basis/flight/reducers/basisFlightReducer'; import { flightSaga } from '../../modules/basis/flight/sagas/basisFlightSaga'; @@ -65,6 +66,7 @@ const rootReducer = combineReducers({ navbar, layout, controlMapReducer, + loadingReducer, mainDashState: mainDahReducer, messageState: messageReducer, groupState: groupReducer,