Purpose

This component is for displaying the users transaction history in a table that can be filtered. The component also show the summary and the total 'netDeposit'. The component has an 'export' button that export the last 3 months in an csv file


Props

prop name prop type description required default value
wplServerUtil module wpl server util required -
tableDisplayDateFormat string using momentjs determine how the date on the table 'date' column will be shown. example: 'DD/MM/YYYY hh:mm A' see format options
here 		not required -
filterDateFormat string using momentjs determine how the date on the filters will be shown. example: 'DD/MM/YYYY hh:mm A'
see format options here 		not required DD/MM/YYYY
maxDateRangeInMonths number set the maximum filter limit in months. not required 3
pageSize number in a table page. how much rows will be shown not required 15
startDate Date the initial start date that will be chosen on the date picker not required yesterday
endDate Date the initial end date that will be chosen on the date picker not required today
transactionTypeIcons object object containing the icons for the filters. see Icon.
{ all: {iconProps: Icon}, game: {iconProps: Icon}, general: {iconProps Icon}} 		not required -
prevIcon object on the table pagination the prev icon.
see Icon.
not required -
nextIcon object on the table pagination the next icon.
see Icon.
not required -
noTransactionsIcon object on the table. when there are no transaction to show this icon will be displayed next to the message
see Icon.
not required -
netDepositIcon object on the 'summary' part. next to the 'Net Deposit' text. configure tooltip text on component translations. see {@tutorial developerFullImplementation}
see Tooltip Icon.
not required -
summaryIcon object on the 'summary' part. next to the 'Profit / Loss' text. configure tooltip text on component translations. see {@tutorial developerFullImplementation}
see Tooltip Icon.
not required -
dateInfoIcon object on the 'summary' part. next to the 'filters.date.info.text' text. configure tooltip text on component translations. see {@tutorial developerFullImplementation}
see Tooltip Icon.
not required -
dateInfoIconProps object above the date filters when an info message is set through this ('filters.date.info.text') translation key this icon will be displayed next to the message
see Icon.
not required -

Examples:

Wpl Environment
        
            var server = require('util/server.util');

            var Icon = {
              path: '/library/images/sprite-home.svg',
              name: 'INFORMATION',
              isSvgIcon: true };

            var props = {
                wplServerUtil: server,
                tableDisplayDateFormat: 'DD/MM/YYYY hh:mm A',
                filterDateFormat: 'DD/MM/YYYY hh:mm A',
                transactionTypeIcons: {
                    all: {iconProps: Icon},
                    game: {iconProps: Icon},
                    general: {iconProps Icon}
                  },
                prevIcon: Icon,
                nextIcon: Icon,
                noTransactionsIcon: Icon,
                netDepositIcon: Icon,
                summaryIcon: Icon
                dateInfoIconProps: Icon
                },
            };
            var componentToMount = document.createElement('TransactionHistoryDriver');
            var transactionHistoryDriverPlaceHolder = this.$el.find('.lci-transaction-history-container')[0];

            this.directMount(componentToMount, transactionHistoryDriverPlaceHolder, props);