Commit 760bf979 authored by Caner Candan's avatar Caner Candan
Browse files

feat(datatable): add operationId and enabledColumns props and fetchData method

parent a1e25c4f

packages/rct-auth-store/src/rct-auth.store.js

+1 −2
Original line number Diff line number Diff line
@@ -63,8 +63,7 @@ class RctAuthStore { 
      runInAction(() => {

        this.inProgress = false

      })

    }

    catch (err) {

    } catch (err) {

      console.error(err)

      runInAction(() => {

        this.error = err.message

packages/rct-data-table-component/src/rct-data-table.component.js

+14 −2
Original line number Diff line number Diff line
@@ -18,9 +18,14 @@ import Typography from 'material-ui/Typography' 
@inject('dataTableStore')

@observer

class RctDataTableComponent extends Component {

  async componentWillMount() {

    const { operationId, enabledColumns } = this.props

    await this.props.dataTableStore.fetchData(operationId, enabledColumns)

  }

  componentWillUnmount() {

    this.props.dataTableStore.reset()

  }



  handleClick(event) {

    this.props.dataTableStore.setOpen(true)

    this.props.dataTableStore.setElement(event.currentTarget)
@@ -35,6 +40,11 @@ class RctDataTableComponent extends Component { 
  render() {

    const { open, element, columns, enabledColumns, data } = this.props.dataTableStore

    const { title } = this.props

    if (!this.props.dataTableStore.data.length) {

      return (

        <Typography>Loading datatable...</Typography>

      )

    }

    return (

      <div>

        <Paper>
@@ -94,12 +104,14 @@ class RctDataTableComponent extends Component { 


RctDataTableComponent.propTypes = {

  title: PropTypes.string.isRequired,



  operationId: PropTypes.string.isRequired,

  enabledColumns: PropTypes.object,

  // TBD

}



RctDataTableComponent.defaultProps = {

  title: 'Data Table'

  title: 'Data Table',

  enabledColumns: [],

}



export default RctDataTableComponent

packages/rct-data-table-store/src/rct-data-table.store.js

+24 −0
Original line number Diff line number Diff line 
import { observable, computed, action, runInAction, toJS } from 'mobx'

import { hashHistory } from 'react-router'



import swaggerClientStore from '@4geit/rct-swagger-client-store'



export class Column {

  @observable name

  @observable enabled = false
@@ -16,6 +18,7 @@ export class Column { 
}



class RctDataTableStore {

  @observable inProgress = false

  @observable open = false

  @observable element = undefined

  @observable columns = []
@@ -40,6 +43,27 @@ class RctDataTableStore { 
  @action setData(value) {

    this.data = value

  }

  @action async fetchData(operationId, enabledColumns) {

    this.inProgress = true

    this.error = undefined

    try {

      const { body } = await swaggerClientStore.client.apis.Account[operationId]()

      if (body.length) {

        runInAction(() => {

          this.setColumns(

            Object.keys( body[0] ).map(i => ( { name: i, enabled: !!~enabledColumns.indexOf(i) } ))

          )

          this.setData( body )

          this.inProgress = false

        })

      }

    } catch (err) {

      console.error(err)

      runInAction(() => {

        this.error = err.message

      })

    }

  }

}



export default new RctDataTableStore()

stories/index.js

+11 −334
Original line number Diff line number Diff line
@@ -68,338 +68,6 @@ const muiThemeDecorator = (story) => ( 
)

addDecorator(muiThemeDecorator)



const columns = [

  {

    name: 'Bloomber code',

    enabled: true

  },

  {

    name: 'PRODUCT_ID',

    enabled: true

  },

  {

    name: 'PRODUCT_TYPE',

    enabled: false

  },

  {

    name: 'PRODUCT_NAME',

    enabled: false

  },

  {

    name: 'PRODUCT_GROUP',

    enabled: true

  },

  {

    name: 'CURRENCY',

    enabled: false

  },

  {

    name: 'PRODUCT_ISIN',

    enabled: false

  },

  {

    name: 'UNDERLYING_ISIN',

    enabled: false

  },

  {

    name: 'SHARE_ISIN',

    enabled: false

  },

  {

    name: 'CONTRACT_SIZE',

    enabled: false

  },

  {

    name: 'CONTRACT_MONTHS',

    enabled: false

  },

  {

    name: 'MIN_PRICE_CHANGE',

    enabled: false

  },

  {

    name: 'COUNTRY_CODE',

    enabled: false

  },

  {

    name: 'GROUP_ID',

    enabled: false

  },

  {

    name: 'CASH_MARKET_ID',

    enabled: false

  },

  {

    name: 'SECTOR',

    enabled: false

  },

  {

    name: 'STOXX Europe 600',

    enabled: false

  },

  {

    name: 'EURO STOXX 50',

    enabled: false

  },

  {

    name: 'STOXX Europe 50',

    enabled: false

  },

  {

    name: 'DAX',

    enabled: false

  },

  {

    name: 'SMI',

    enabled: false

  },

  {

    name: 'MDAX',

    enabled: false

  },

  {

    name: 'SDAX',

    enabled: false

  },

  {

    name: 'TecDAX',

    enabled: false

  },

  {

    name: 'SMIM',

    enabled: false

  },

  {

    name: 'STOXX 200 Large',

    enabled: false

  },

  {

    name: 'STOXX 200 Mid',

    enabled: false

  },

  {

    name: 'STOXX 200 Small',

    enabled: false

  },

  {

    name: 'DJ Global Titans 50 (SM)',

    enabled: false

  },

  {

    name: 'AEX Index',

    enabled: false

  },

  {

    name: 'CAC 40',

    enabled: false

  },

  {

    name: 'SP 500',

    enabled: false

  },

  {

    name: 'RDXxt USD - RDX Extended',

    enabled: false

  },

  {

    name: 'FTSE 100',

    enabled: false

  },

  {

    name: 'ATX',

    enabled: false

  },

]

dataTableStore.setColumns(columns)

const data = [

  {

    'Bloomber code': 1,

    'PRODUCT_ID': 2,

    'PRODUCT_TYPE': 3,

    'PRODUCT_NAME': 2,

    'PRODUCT_GROUP': 7,

    'CURRENCY': 8,

    'PRODUCT_ISIN': 9,

    'UNDERLYING_ISIN': 12,

    'SHARE_ISIN': 78,

    'CONTRACT_SIZE': 41,

    'CONTRACT_MONTHS': 12,

    'MIN_PRICE_CHANGE': 78,

    'COUNTRY_CODE': 74100,

    'GROUP_ID': 75,

    'CASH_MARKET_ID': 859,

    'SECTOR': 74,

    'STOXX Europe 600': 52,

    'EURO STOXX 50': 24,

    'STOXX Europe 50': 85,

    'DAX': 12,

    'SMI': 5,

    'MDAX': 87,

    'SDAX': 96,

    'TecDAX': 32,

    'SMIM': 42,

    'STOXX 200 Large': 12,

    'STOXX 200 Mid': 4,

    'STOXX 200 Small': 53,

    'DJ Global Titans 50 (SM)': 56,

    'AEX Index': 7,

    'CAC 40': 432,

    'SP 500': 47,

    'RDXxt USD - RDX Extended': 12,

    'FTSE 100': 43,

    'ATX': 54

  },

  {

    'Bloomber code': 1,

    'PRODUCT_ID': 2,

    'PRODUCT_TYPE': 3,

    'PRODUCT_NAME': 2,

    'PRODUCT_GROUP': 7,

    'CURRENCY': 8,

    'PRODUCT_ISIN': 9,

    'UNDERLYING_ISIN': 12,

    'SHARE_ISIN': 78,

    'CONTRACT_SIZE': 41,

    'CONTRACT_MONTHS': 12,

    'MIN_PRICE_CHANGE': 78,

    'COUNTRY_CODE': 74100,

    'GROUP_ID': 75,

    'CASH_MARKET_ID': 859,

    'SECTOR': 74,

    'STOXX Europe 600': 52,

    'EURO STOXX 50': 24,

    'STOXX Europe 50': 85,

    'DAX': 12,

    'SMI': 5,

    'MDAX': 87,

    'SDAX': 96,

    'TecDAX': 32,

    'SMIM': 42,

    'STOXX 200 Large': 12,

    'STOXX 200 Mid': 4,

    'STOXX 200 Small': 53,

    'DJ Global Titans 50 (SM)': 56,

    'AEX Index': 7,

    'CAC 40': 432,

    'SP 500': 47,

    'RDXxt USD - RDX Extended': 12,

    'FTSE 100': 43,

    'ATX': 54

  },

  {

    'Bloomber code': 1,

    'PRODUCT_ID': 2,

    'PRODUCT_TYPE': 3,

    'PRODUCT_NAME': 2,

    'PRODUCT_GROUP': 7,

    'CURRENCY': 8,

    'PRODUCT_ISIN': 9,

    'UNDERLYING_ISIN': 12,

    'SHARE_ISIN': 78,

    'CONTRACT_SIZE': 41,

    'CONTRACT_MONTHS': 12,

    'MIN_PRICE_CHANGE': 78,

    'COUNTRY_CODE': 74100,

    'GROUP_ID': 75,

    'CASH_MARKET_ID': 859,

    'SECTOR': 74,

    'STOXX Europe 600': 52,

    'EURO STOXX 50': 24,

    'STOXX Europe 50': 85,

    'DAX': 12,

    'SMI': 5,

    'MDAX': 87,

    'SDAX': 96,

    'TecDAX': 32,

    'SMIM': 42,

    'STOXX 200 Large': 12,

    'STOXX 200 Mid': 4,

    'STOXX 200 Small': 53,

    'DJ Global Titans 50 (SM)': 56,

    'AEX Index': 7,

    'CAC 40': 432,

    'SP 500': 47,

    'RDXxt USD - RDX Extended': 12,

    'FTSE 100': 43,

    'ATX': 54

  },

  {

    'Bloomber code': 1,

    'PRODUCT_ID': 2,

    'PRODUCT_TYPE': 3,

    'PRODUCT_NAME': 2,

    'PRODUCT_GROUP': 7,

    'CURRENCY': 8,

    'PRODUCT_ISIN': 9,

    'UNDERLYING_ISIN': 12,

    'SHARE_ISIN': 78,

    'CONTRACT_SIZE': 41,

    'CONTRACT_MONTHS': 12,

    'MIN_PRICE_CHANGE': 78,

    'COUNTRY_CODE': 74100,

    'GROUP_ID': 75,

    'CASH_MARKET_ID': 859,

    'SECTOR': 74,

    'STOXX Europe 600': 52,

    'EURO STOXX 50': 24,

    'STOXX Europe 50': 85,

    'DAX': 12,

    'SMI': 5,

    'MDAX': 87,

    'SDAX': 96,

    'TecDAX': 32,

    'SMIM': 42,

    'STOXX 200 Large': 12,

    'STOXX 200 Mid': 4,

    'STOXX 200 Small': 53,

    'DJ Global Titans 50 (SM)': 56,

    'AEX Index': 7,

    'CAC 40': 432,

    'SP 500': 47,

    'RDXxt USD - RDX Extended': 12,

    'FTSE 100': 43,

    'ATX': 54

  },

  {

    'Bloomber code': 1,

    'PRODUCT_ID': 2,

    'PRODUCT_TYPE': 3,

    'PRODUCT_NAME': 2,

    'PRODUCT_GROUP': 7,

    'CURRENCY': 8,

    'PRODUCT_ISIN': 9,

    'UNDERLYING_ISIN': 12,

    'SHARE_ISIN': 78,

    'CONTRACT_SIZE': 41,

    'CONTRACT_MONTHS': 12,

    'MIN_PRICE_CHANGE': 78,

    'COUNTRY_CODE': 74100,

    'GROUP_ID': 75,

    'CASH_MARKET_ID': 859,

    'SECTOR': 74,

    'STOXX Europe 600': 52,

    'EURO STOXX 50': 24,

    'STOXX Europe 50': 85,

    'DAX': 12,

    'SMI': 5,

    'MDAX': 87,

    'SDAX': 96,

    'TecDAX': 32,

    'SMIM': 42,

    'STOXX 200 Large': 12,

    'STOXX 200 Mid': 4,

    'STOXX 200 Small': 53,

    'DJ Global Titans 50 (SM)': 56,

    'AEX Index': 7,

    'CAC 40': 432,

    'SP 500': 47,

    'RDXxt USD - RDX Extended': 12,

    'FTSE 100': 43,

    'ATX': 54

  },

]

dataTableStore.setData(data)



const stores = {

  commonStore,

  authStore,
@@ -565,11 +233,20 @@ storiesOf('RctRegisterComponent', module) 
  )

storiesOf('RctDataTableComponent', module)

  .addDecorator(centered)

  .add('simple usage',

  .add('contactList',

    withInfo('This is the basic usage of the component without any props provided')(() => (

      <Provider { ...stores }>

        <App>

          <RctDataTableComponent title="Contact List" operationId="contactList" enabledColumns={ [ 'firstname', 'lastname', 'company' ] } />

        </App>

      </Provider>

    ))

  )

  .add('productList',

    withInfo('This is the basic usage of the component without any props provided')(() => (

      <Provider { ...stores }>

        <App>

          <RctDataTableComponent title='My title'/>

          <RctDataTableComponent title="Product List" operationId="productList" enabledColumns={ [ 'bloomberCode', 'name', 'currency', 'countryCode', 'atx' ] } />

        </App>

      </Provider>

    ))