Merge branch 'master' of http://gitea.palntour.com/pav/pav-home

src/@core/components/spinner/Loading-spinner.js

@@ -7,7 +7,7 @@ const ComponentSpinner = () => {
         <div className='effect-3 effects'></div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ComponentSpinner
+export default ComponentSpinner;

src/components/analysis/history/AnalysisHistoryGrid.js

@@ -24,41 +24,43 @@ import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
 export const AnalysisHistoryGrid = props => {
   return (
     // <div className='pal-card-box'>
-      // <Row>
-        // <Col>
-        <>
-          <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
-            <div>
-              <h4>{props.title} 목록</h4>
-              <span className='search-case'>검색결과 총 {props.count}건</span>
-            </div>
-            <div className='d-flex align-items-center'>
-              <ExcelExportButton
-                filename={'비행이력.csv'}
-                data={props.data ? props.data : []}
-                headers={props.excelHeaders}
-              />
-            </div>
-          </div>
-          <div className='invoice-list-wrapper'>
-            <Card>
-              <div className='invoice-list-dataTable'>
-                {/* <div className='no-dataTable'>
+    // <Row>
+    // <Col>
+    <>
+      <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+        <div>
+          <h4>{props.title} 목록</h4>
+          <span className='search-case'>검색결과 총 {props.total}건</span>
+        </div>
+        <div className='d-flex align-items-center'>
+          <ExcelExportButton
+            filename={'비행이력.csv'}
+            data={props.data ? props.data : []}
+            headers={props.excelHeaders}
+          />
+        </div>
+      </div>
+      <div className='invoice-list-wrapper'>
+        <Card>
+          <div className='invoice-list-dataTable'>
+            {/* <div className='no-dataTable'>
                  표시할 데이터가 없습니다.
                 </div> */}
-                <GridDatabase
-                  title={'비행이력'}
-                  data={props.data}
-                  count={props.count}
-                  columns={props.columns}
-                  pagination={props.pagination}
-                />
-              </div>
-            </Card>
+            <GridDatabase
+              title={'비행이력'}
+              data={props.data}
+              count={props.count}
+              total={props.total}
+              columns={props.columns}
+              pagination={props.pagination}
+              handlerPageChange={props.handlerPageChange}
+            />
           </div>
-          </>
-        // </Col>
-      // </Row>
+        </Card>
+      </div>
+    </>
+    // </Col>
+    // </Row>
     // </div>
   );
 };

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 ? (
     <div className='no-dataTable'>표시할 데이터가 없습니다.</div>
   ) : (
     <DataTable
       noHeader
       pagination={props.pagination}
-      paginationTotalRows={props.count}
+      paginationTotalRows={props.total}
       // paginationServer
       subHeader={false}
       columns={props.columns}
@@ -25,8 +28,19 @@ export const GridDatabase = props => {
       // 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={<LoadingSpinner />}
     />
   );
 };

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 (
     <CustomMainLayout title={titleName}>
       <div className='pal-card-box'>
@@ -322,6 +326,8 @@ export const AnalysisHistoryContainer = props => {
                   excelHeaders={excelHeaders}
                   count={count}
                   pagination={true}
+                  total={total}
+                  handlerPageChange={handlerPageChange}
                 />
               </>
             ) : (

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
 >();
 

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}`);

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
 };

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) =>

src/modules/analysis/history/sagas/analysisHistorySaga.ts

@@ -13,14 +13,19 @@ import * as Models from '../models/analysisHitoryModel';
 
 function* listSaga(action: ActionType<typeof Actions.list.request>) {
   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) {

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);

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;
+      }
+    }
+  });
+};

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,