Notes

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import { I18n } from 'react-i18next';
import PropTypes from 'prop-types';
import faker from 'faker';
import styled from 'styled-components';
import moment from 'moment';
import {Grid, Row, Col} from 'foundation-components-grid';
import DatePicker from 'react-datepicker';
import {Editors, Toolbar, Menu, Formatters, DraggableHeader} from 'react-data-grid-addons';
import {FakeObjectDataStore} from './FakeObjectDataStore';
import COLOR_NAMES from '../../../../utils/colors';
import {
Card,
Textfield,
Label,
PredictiveTextfield,
Blotter,
Button,
Heading,
Icon,
Select,
Switch
} from 'foundation-components-core';
import { graphql, compose, withApollo } from 'react-apollo';
import {quickInvoiceQuery} from './constants'
import './datagrid.css';
import 'react-datepicker/dist/react-datepicker.css';

const {DraggableContainer} = DraggableHeader;
const {ImageFormatter} = Formatters;
const {DropDownEditor, AutoCompleteEditor} = Editors;


const currencies = ['SGD', 'INR', 'HKD', 'GBP', 'USD'];

export class QuickInvoice extends Component {
constructor(props) {
super(props);
const companyData = [
{
label: "Apple",
value: 0
},
{
label: "samsung",
value: 1
},
{
label: "airtel",
value: 2
},
{
label: "honda",
value: 3
},
{
label: "Reliance",
value: 4
},
{
label: "scb",
value: 5
},
{
label: "sony",
value: 6
}
];
const productData = [
{
label: "Apple",
value: 0
},
{
label: "samsung",
value: 1
},
{
label: "airtel",
value: 2
}
];
const dealData = [
{
label: "Apple",
value: 0
},
{
label: "samsung",
value: 1
},
{
label: "airtel",
value: 2
}
];
const initiateSwitchData =[
{
id: '0',
label: 'BUYER'
},
{
id: '1',
label: 'SELLER',
selected: true,
iconName: '45-ticksmall'
}
]
const _columns = [
{
key: 'id',
name: 'ID',
width: 50,
resizable: true
}, {
key: 'seller',
name: 'SELLER',
width: 80,
editable: true,
resizable: true,
draggable: true
}, {
key: 'sellername',
name: 'SELLER NAME',
width: 60,
width: 80,
editable: true,
resizable: true,
draggable: true
}, {
key: 'invoiceno',
name: 'INVOICE NO.',
width: 80,
resizable: true,
editable: true,
draggable: true
}, {
key: 'issuedate',
name: 'ISSUE DATE',
editable: true,
editor: <DateEditor/>,
width: 200,
resizable: true
}, {
key: 'ccy',
name: 'CURRENCY',
editor: <DropDownEditor options={currencies}/>,
editable: true,
width: 200,
resizable: true,
draggable: true
}, {
key: 'amount',
name: 'AMOUNT',
editable: true,
width: 200,
resizable: true,
draggable: true
}, {
key: 'invoiceduedate',
name: 'INV. DUE DATE',
editable: true,
width: 200,
editor: <DateEditor/>,
resizable: true,
draggable: true
}, {
key: 'goodsdescription',
name: 'GOOD DESCRIPTION',
editable: true,
width: 200,
resizable: true,
draggable: true
}, {
key: 'portofloading',
name: 'PORT OF LOADING',
editable: true,
width: 200,
resizable: true,
draggable: true
}, {
key: 'portofdischarge',
name: 'PORT OF DISCHARGE',
editable: true,
width: 200,
resizable: true,
draggable: true
}
];


const fakeRows = this.createRows(20);
this.state = {
rows: fakeRows,
columns: _columns,
company:companyData,
initiateSwitchData:initiateSwitchData,
productData:productData,
dealData:dealData,
companyName:''
};
}


changeInvoiceDate = (dt) => {
console.log(dt)
}
createRows = (numberOfRows) => {
let rows = [];
for (let i = 0; i < numberOfRows; i++) {
rows[i] = this.createFakeRowObjectData(i);
}
return rows;
};

onHeaderDrop = (source, target) => {
const stateCopy = Object.assign({}, this.state);
const columnSourceIndex = this
.state
.columns
.findIndex(i => i.key === source);
const columnTargetIndex = this
.state
.columns
.findIndex(i => i.key === target);

stateCopy
.columns
.splice(columnTargetIndex, 0, stateCopy.columns.splice(columnSourceIndex, 1)[0]);

const emptyColumns = Object.assign({}, this.state, {columns: []});
this.setState(emptyColumns);

const reorderedColumns = Object.assign({}, this.state, {columns: stateCopy.columns});
this.setState(reorderedColumns);
};

onSelectCompany = (option) => {
this.setState({companyName:option.label})
};

switchOnChange = (id, isSelected, newOptions) => {
const switchOptions = newOptions.map((option) => ({
...option,
iconName: option.selected ? '45-ticksmall' : ''
}));

this.setState({ initiateSwitchData:switchOptions});
};
onSelectProduct = (option) => {
this.setState({product:option.label})
};
onSelectDeal = (option) => {
this.setState({deal:option.label})
};

createFakeRowObjectData = (index) => {
return {
id: index + 1,
seller: faker
.name
.lastName(),
sellername: faker
.name
.firstName(),
invoiceno: index,
issuedate: faker
.date
.past()
.toLocaleDateString(),
ccy: 'SGD',
amount: Math.ceil(Math.random(111, 999) * 1000),
invoiceduedate: faker
.date
.past()
.toLocaleDateString(),
goodsdescription: faker
.lorem
.sentence(),
portofloading: faker
.lorem
.sentence(),
portofdischarge: faker
.lorem
.sentence()
};
};

getColumns = () => {
let clonedColumns = this
.state
.columns
.slice();
// clonedColumns[2].events = { onClick: (ev, args) => { const idx =
// args.idx; const rowIdx = args.rowIdx; this .grid
// .openCellEditor(rowIdx, idx); } };

return clonedColumns;
};

handleGridRowsUpdated = ({fromRow, toRow, updated}) => {
console.log(updated);
const rows = this
.state
.rows
.map((row, index) => {
if (index >= fromRow && index <= toRow) {
return {
...row,
...updated
};
} else {
return {
...row
};
}
})
this.setState({rows});
};

handleAddRow = ({newRowIndex}) => {
const newRow = {
value: newRowIndex,
userStory: '',
developer: '',
epic: ''
};

let rows = this
.state
.rows
.slice();
rows = [
...rows,
newRow
];
this.setState({rows});
};

getRowAt = (index) => {
if (index < 0 || index > this.getSize()) {
return undefined;
}

return this.state.rows[index];
};

getSize = () => {
return this.state.rows.length;
};
render() {

return (
<I18n ns="trade/trade">
{(t) => (
<HeaderContainer fluid>
<Row>
<Col xs={6} sm={6}>
<Header>
<Heading
size="extraLarge"
weight="light"
color="primaryColor3"
>
{t('quickInvoice.invoiceHeader')}
</Heading>
</Header>
</Col>
</Row>
<StyledBorderLine />
<Row>
<Col xs={3} sm={3} md={3}>
<QuickInvoiceCard>
<Card>
<Initiate>
<Heading
color="greyScaleColor2"
size="medium"
weight="bold"
>
{t('quickInvoice.initiateAsLbl')}
</Heading>
</Initiate>

<Switch
name=""
single
onChange={this.switchOnChange}
options={this.state.initiateSwitchData}
/>
</Card>
</QuickInvoiceCard>
</Col>

<Col xs={3} sm={3} md={3}>
<QuickInvoiceCard>
<Card>
<Heading
color="greyScaleColor2"
size="medium"
weight="bold"
>
{t('quickInvoice.selectCompanyLbl')}
</Heading>

<Select
label=""
options={this.state.company}
onChange={this.onSelectCompany}
/>

</Card>
</QuickInvoiceCard>
</Col>


<Col xs={3} sm={3} md={3}>
<QuickInvoiceCard>
<Card>
<Heading
color="greyScaleColor2"
size="medium"
weight="bold"
>
{t('quickInvoice.selectProductLbl')}
</Heading>
<Select
label=""
options={this.state.productData}
onChange={this.onSelectProduct}
/>
</Card>
</QuickInvoiceCard>
</Col>

<Col xs={3} sm={3} md={3}>
<QuickInvoiceCard>
<Card>
<Heading
color="greyScaleColor2"
size="medium"
weight="bold"
>
{t('quickInvoice.selectDeal')}
</Heading>
<Select
label=""
options={this.state.dealData}
onChange={this.onSelectDeal}
/>

</Card>
</QuickInvoiceCard>
</Col>
</Row>
<Row>
<Col xs={12} sm={12} md={12}>
<Card>
<DraggableContainer onHeaderDrop={this.onHeaderDrop}>
<ReactDataGrid
ref={node => this.grid = node}
enableCellSelect={true}
cellNavigationMode="changeRow"
columns={this.getColumns()}
rowGetter={this.getRowAt}
rowsCount={this.getSize()}
onGridRowsUpdated={this.handleGridRowsUpdated}
toolbar={< Toolbar onAddRow = {
this.handleAddRow
} />}
enableRowSelect={true}
rowHeight={50}
minHeight={600}
rowScrollTimeout={200}/>
</DraggableContainer>
</Card>
</Col>
</Row>

</HeaderContainer>
)}
</I18n>

);
}
}

export class DateEditor extends Component {
constructor(props) {
super(props);

this.state = {
startDate: this.props.value.length > 0
? moment(this.props.value, "MM-DD-YYYY")
: moment()
};
}

getInputNode() {
return ReactDOM.findDOMNode(this);
}

onClick() {
this
.getInputNode()
.focus();
}

onDoubleClick() {
this
.getInputNode()
.focus();
}

getValue() {
var updated = {};
updated[this.props.column.key] = this
.state
.startDate
.format("MM/DD/YYYY");
return updated;
}

handleChange = (date) => {
this.setState({startDate: date});
}

render() {
return (
<div>
<DatePicker selected={this.state.startDate} onChange={this.handleChange}/>
</div>
);
}
}
export const HeaderContainer = styled(Grid)`
padding: 20px;
`;

export const Header = styled.div`
text-transform: uppercase;
padding-top: 20px;
align-items: center;
padding-bottom: 5px;

span {
padding-right: 10px;
}
`;
export const StyledBorderLine = styled.hr`
border: none;
border-top: 1px solid ${COLOR_NAMES.PrimaryColor3};
padding-bottom: 3px;
`;
export const QuickInvoiceCard =styled.div`
background-color: ${COLOR_NAMES.PrimaryColor3};
`;

export const Initiate = styled.div`
padding-bottom: 14px;
`;


export default compose(
graphql(quickInvoiceQuery, {
options: {
fetchPolicy: 'network-only',
variables: {
getInitiateRqst: {
startIndex: 1
}
}
}
})
)(withApollo(QuickInvoice));