import _ from 'lodash' ; import { createContainerModule , EffectsParams } from 'redux-with-domain' ; import chartDomain , { Attr , Chart } from '../../../domain/chart' ; import datasetDomain , { DatasetItem } from '../../../domain/dataset' ; import { Action } from 'redux' ; export const kDatasetIdChangeEmitName = 'setDatasetId' ; export interface State { selectedChartId : string ; loading : boolean ; } interface InjectActions { setLoading : ( flag : boolean ) => Action ; queryChart : ( id : string ) => Action ; saveSelectedChartId : ( id : string ) => Action ; } type Selector = typeof selectors ; type Effects = ReturnType < typeof effects > ; const initialState = { selectedChartId : '' , loading : false } ; const selectors = { getLoading : ( state ) => { return state . loading ; } , getCharts : ( state , { payload : reportId } ) => { const chart = chartDomain . entities . chart . select ( { reportId } ) ; return chart . map ( ( chart ) => { let attributes = _ . get ( chart , 'attribute' ) ; if ( attributes && attributes . length > 0 ) { attributes = attributes . map ( item => { const fields = item . fields || [ ] ; const dataset = datasetDomain . entities . datasetList . get ( chart . datasetId ) ; const fieldsName = ! dataset ? [ ] : dataset . fields . filter ( field => fields . includes ( field . id ) ) . map ( field => field . name ) ; return { ... item , fieldsName : fieldsName } ; } ) ; } return { ... chart , attribute : attributes } ; } ) ; } , getSelectedChartId : ( state ) => { return state . selectedChartId ; } } ; const reducers = { setLoading : ( state , { payload } ) => { return { ... state , loading : payload } ; } , saveSelectedChartId : ( state , { payload } ) => { return { ... state , selectedChartId : payload } ; } } ; const effects = ( { actions , selectors , sagaEffects : { call , put , select } , enhancer : { emit , syncPut } } ) => ( { * reloadChart ( { payload : reportId } ) { yield syncPut ( actions . setLoading ( true ) ) ; const charts = chartDomain . entities . chart . select ( { reportId } ) || [ ] ; if ( charts . length === 0 ) { yield syncPut ( actions . queryChart ( reportId ) ) ; } yield syncPut ( actions . setLoading ( false ) ) ; } , * queryChart ( { payload } ) { yield syncPut ( chartDomain . services . fetchCharts ( payload ) ) ; const charts = chartDomain . entities . chart . select ( ) ; const datasetIdList = [ ] ; charts . forEach ( element => { const datasetId = element . datasetId ; if ( ! datasetIdList . includes ( datasetId ) ) { datasetIdList . push ( element . datasetId ) ; } } ) ; yield syncPut ( datasetDomain . services . fetchDatasets ( datasetIdList ) ) ; } , * setSelectedChart ( { payload } ) { yield syncPut ( actions . saveSelectedChartId ( payload ) ) ; const chart = chartDomain . entities . chart . get ( payload ) ; const { datasetId } = chart ; yield emit ( { name : kDatasetIdChangeEmitName , payload : datasetId } ) ; } } ) ; export default createContainerModule < State , Selector , typeof reducers , Effects > ( 'workbook/reportCanvas' , { initialState , selectors , effects , reducers } ) ;