WIP Whiteboard Changes
This commit is contained in:
@@ -12,10 +12,12 @@
|
||||
"dotenv": "^8.2.0",
|
||||
"firebase": "^7.5.0",
|
||||
"graphql": "^14.5.8",
|
||||
"i18next": "^19.0.2",
|
||||
"node-sass": "^4.13.0",
|
||||
"react": "^16.12.0",
|
||||
"react-apollo": "^3.1.3",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-i18next": "^11.2.7",
|
||||
"react-number-format": "^4.3.1",
|
||||
"react-router-dom": "^5.1.2",
|
||||
"react-scripts": "3.2.0",
|
||||
|
||||
@@ -13,7 +13,7 @@ import ErrorBoundary from "../components/error-boundary/error-boundary.component
|
||||
import { auth } from "../firebase/firebase.utils";
|
||||
import { UPSERT_USER } from "../graphql/user.queries";
|
||||
import { GET_CURRENT_USER } from "../graphql/local.queries";
|
||||
import { QUERY_BODYSHOP } from "../graphql/bodyshop.queries";
|
||||
// import { QUERY_BODYSHOP } from "../graphql/bodyshop.queries";
|
||||
|
||||
import PrivateRoute from "../utils/private-route";
|
||||
|
||||
@@ -61,22 +61,22 @@ export default () => {
|
||||
console.log("User login upsert error.", error);
|
||||
});
|
||||
|
||||
apolloClient
|
||||
.query({
|
||||
query: QUERY_BODYSHOP,
|
||||
fetchPolicy: "network-only"
|
||||
})
|
||||
.then(r => {
|
||||
const bodyShopData = r.data.bodyshops[0];
|
||||
apolloClient.writeData({
|
||||
data: {
|
||||
bodyShopData: { ...bodyShopData, __typename: "bodyShopData" }
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("Error getting bodyshop data.", error);
|
||||
});
|
||||
// apolloClient
|
||||
// .query({
|
||||
// query: QUERY_BODYSHOP,
|
||||
// fetchPolicy: "network-only"
|
||||
// })
|
||||
// .then(r => {
|
||||
// const bodyShopData = r.data.bodyshops[0];
|
||||
// apolloClient.writeData({
|
||||
// data: {
|
||||
// bodyShopData: { ...bodyShopData, __typename: "bodyShopData" }
|
||||
// }
|
||||
// });
|
||||
// })
|
||||
// .catch(error => {
|
||||
// console.log("Error getting bodyshop data.", error);
|
||||
// });
|
||||
|
||||
apolloClient.writeData({
|
||||
data: {
|
||||
|
||||
@@ -22,7 +22,7 @@ class ErrorBoundary extends React.Component {
|
||||
|
||||
render() {
|
||||
if (this.state.hasErrored === true) {
|
||||
return <div>Uh oh, something went wrong. {this.state.error}</div>;
|
||||
return <div>Uh oh, something went wrong.</div>;
|
||||
} else {
|
||||
return this.props.children;
|
||||
}
|
||||
|
||||
@@ -25,18 +25,17 @@ function searchResult(query) {
|
||||
function renderOption(item) {
|
||||
return (
|
||||
<Option key={item.category} text={item.category}>
|
||||
<div className="global-search-item">
|
||||
<span className="global-search-item-desc">
|
||||
<div className='global-search-item'>
|
||||
<span className='global-search-item-desc'>
|
||||
Found {item.query} on
|
||||
<a
|
||||
href={`https://s.taobao.com/search?q=${item.query}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'>
|
||||
{item.category}
|
||||
</a>
|
||||
</span>
|
||||
<span className="global-search-item-count">{item.count} results</span>
|
||||
<span className='global-search-item-count'>{item.count} results</span>
|
||||
</div>
|
||||
</Option>
|
||||
);
|
||||
@@ -56,25 +55,26 @@ export default class GlobalSearch extends React.Component {
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
return (
|
||||
<div style={{ width: 300 }}>
|
||||
<AutoComplete
|
||||
size="large"
|
||||
style={{ width: "100%" }}
|
||||
dataSource={dataSource.map(renderOption)}
|
||||
onSelect={onSelect}
|
||||
onSearch={this.handleSearch}
|
||||
placeholder="input here"
|
||||
optionLabelProp="text"
|
||||
>
|
||||
<Input
|
||||
suffix={
|
||||
<Button style={{ marginRight: -12 }} size="large" type="primary">
|
||||
<Icon type="search" />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</AutoComplete>
|
||||
</div>
|
||||
<div />
|
||||
// <div style={{ width: 300 }}>
|
||||
// <AutoComplete
|
||||
// size="large"
|
||||
// style={{ width: "100%" }}
|
||||
// dataSource={dataSource.map(renderOption)}
|
||||
// onSelect={onSelect}
|
||||
// onSearch={this.handleSearch}
|
||||
// placeholder="input here"
|
||||
// optionLabelProp="text"
|
||||
// >
|
||||
// <Input
|
||||
// suffix={
|
||||
// <Button style={{ marginRight: -12 }} size="large" type="primary">
|
||||
// <Icon type="search" />
|
||||
// </Button>
|
||||
// }
|
||||
// />
|
||||
// </AutoComplete>
|
||||
// </div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,8 +33,8 @@ function JobTombstone({ job, ...otherProps }) {
|
||||
if (!job) {
|
||||
return (
|
||||
<AlertComponent
|
||||
message="This job does not exist or you do not have access to it."
|
||||
type="error"
|
||||
message='This job does not exist or you do not have access to it.'
|
||||
type='error'
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -70,20 +70,19 @@ function JobTombstone({ job, ...otherProps }) {
|
||||
+" " + jobContext.owner?.first_name
|
||||
: "No owner"
|
||||
}
|
||||
tags={<Tag color="blue">{jobContext?.status}</Tag>}
|
||||
tags={<Tag color='blue'>{jobContext?.job_status?.name}</Tag>}
|
||||
extra={[
|
||||
<Form.Item key="1">
|
||||
<Button type="primary" htmlType="submit">
|
||||
<Form.Item key='1'>
|
||||
<Button type='primary' htmlType='submit'>
|
||||
Save
|
||||
</Button>
|
||||
</Form.Item>
|
||||
]}
|
||||
>
|
||||
<Descriptions size="small" column={3}>
|
||||
<Descriptions.Item label="Claim Total">
|
||||
]}>
|
||||
<Descriptions size='small' column={3}>
|
||||
<Descriptions.Item label='Claim Total'>
|
||||
$ {jobContext.claim_total?.toFixed(2)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="Deductible">
|
||||
<Descriptions.Item label='Deductible'>
|
||||
$ {jobContext.deductible?.toFixed(2)}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
@@ -91,51 +90,51 @@ function JobTombstone({ job, ...otherProps }) {
|
||||
|
||||
<Row>
|
||||
<Typography.Title level={4}>Information</Typography.Title>
|
||||
<Form.Item label="RO #">
|
||||
<Form.Item label='RO #'>
|
||||
{getFieldDecorator("ro_number", {
|
||||
initialValue: jobContext.ro_number
|
||||
})(<Input name="ro_number" readOnly onChange={handleChange} />)}
|
||||
})(<Input name='ro_number' readOnly onChange={handleChange} />)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="Estimate #">
|
||||
<Form.Item label='Estimate #'>
|
||||
{getFieldDecorator("est_number", {
|
||||
initialValue: jobContext.est_number
|
||||
})(<Input name="est_number" readOnly onChange={handleChange} />)}
|
||||
})(<Input name='est_number' readOnly onChange={handleChange} />)}
|
||||
</Form.Item>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Typography.Title level={4}>Insurance Information</Typography.Title>
|
||||
<Form.Item label="Insurance Company">
|
||||
<Form.Item label='Insurance Company'>
|
||||
{getFieldDecorator("est_co_nm", {
|
||||
initialValue: jobContext.est_co_nm
|
||||
})(<Input name="est_co_nm" onChange={handleChange} />)}
|
||||
})(<Input name='est_co_nm' onChange={handleChange} />)}
|
||||
</Form.Item>
|
||||
<Col span={8}>
|
||||
<Form.Item label="Estimator Last Name">
|
||||
<Form.Item label='Estimator Last Name'>
|
||||
{getFieldDecorator("est_ct_ln", {
|
||||
initialValue: jobContext.est_ct_ln
|
||||
})(<Input name="est_ct_ln" onChange={handleChange} />)}
|
||||
})(<Input name='est_ct_ln' onChange={handleChange} />)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Estimator First Name">
|
||||
<Form.Item label='Estimator First Name'>
|
||||
{getFieldDecorator("est_ct_fn", {
|
||||
initialValue: jobContext.est_ct_fn
|
||||
})(<Input name="est_ct_fn" onChange={handleChange} />)}
|
||||
})(<Input name='est_ct_fn' onChange={handleChange} />)}
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item label="Estimator Phone #">
|
||||
<Form.Item label='Estimator Phone #'>
|
||||
{getFieldDecorator("est_ph1", {
|
||||
initialValue: jobContext.est_ph1
|
||||
})(
|
||||
<FormItemPhone
|
||||
customInput={Input}
|
||||
name="est_ph1"
|
||||
name='est_ph1'
|
||||
onValueChange={handleChange}
|
||||
/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Estimator Email">
|
||||
<Form.Item label='Estimator Email'>
|
||||
{getFieldDecorator("est_ea", {
|
||||
initialValue: jobContext.est_ea,
|
||||
rules: [
|
||||
@@ -144,7 +143,7 @@ function JobTombstone({ job, ...otherProps }) {
|
||||
message: "This is not a valid email address."
|
||||
}
|
||||
]
|
||||
})(<Input name="est_ea" onChange={handleChange} />)}
|
||||
})(<Input name='est_ea' onChange={handleChange} />)}
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@@ -38,7 +38,10 @@ export default function JobsPage({ loading, jobs }) {
|
||||
sorter: (a, b) => alphaSort(a, b),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
|
||||
ellipsis: true
|
||||
ellipsis: true,
|
||||
render: (text, record) => {
|
||||
return record.job_status?.name ?? "";
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Customer",
|
||||
@@ -75,9 +78,9 @@ export default function JobsPage({ loading, jobs }) {
|
||||
render: (text, record) => (
|
||||
<span>
|
||||
Action 一 {record.ro_number}
|
||||
<Divider type="vertical" />
|
||||
<Divider type="vertical" />
|
||||
More actions <Icon type="down" />
|
||||
<Divider type='vertical' />
|
||||
<Divider type='vertical' />
|
||||
More actions <Icon type='down' />
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -94,12 +97,12 @@ export default function JobsPage({ loading, jobs }) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Input name="searchCriteria" onChange={handleChange} />
|
||||
<Input name='searchCriteria' onChange={handleChange} />
|
||||
<Table
|
||||
loading={loading}
|
||||
pagination={{ position: "bottom" }}
|
||||
columns={columns.map(item => ({ ...item }))}
|
||||
rowKey="id"
|
||||
rowKey='id'
|
||||
dataSource={jobs}
|
||||
onChange={handleTableChange}
|
||||
/>
|
||||
|
||||
@@ -1,59 +1,75 @@
|
||||
import React from "react";
|
||||
import { Skeleton, Switch, Card, Icon, Avatar } from "antd";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Menu, Dropdown, Card, Icon, Avatar, Button } from "antd";
|
||||
|
||||
const { Meta } = Card;
|
||||
export default function WhiteBoardCard({ metadata }) {
|
||||
// const {
|
||||
// onClick,
|
||||
// className,
|
||||
// name,
|
||||
// cardStyle,
|
||||
// body,
|
||||
// dueOn,
|
||||
// cardColor,
|
||||
// subTitle,
|
||||
// tagStyle,
|
||||
// escalationText,
|
||||
// tags,
|
||||
// showDeleteButton,
|
||||
// onDelete
|
||||
// } = this.props;
|
||||
const menu = (
|
||||
<Menu>
|
||||
<Menu.Item key='images'>
|
||||
<Icon type='file-image' />
|
||||
View Job Images
|
||||
</Menu.Item>
|
||||
<Menu.Item key='printing'>
|
||||
<Icon type='printer' />
|
||||
Printing
|
||||
</Menu.Item>
|
||||
<Menu.Item key='notes'>
|
||||
<Icon type='edit' />
|
||||
Job Notes
|
||||
</Menu.Item>
|
||||
<Menu.Item key='postinvoices'>
|
||||
<Icon type='shopping-cart' />
|
||||
Post Invoices
|
||||
</Menu.Item>
|
||||
<Menu.Item key='receiveparts'>
|
||||
<Icon type='inbox' />
|
||||
Receive Parts
|
||||
</Menu.Item>
|
||||
<Menu.Item key='partstatus'>
|
||||
<Icon type='tool' />
|
||||
Parts Status
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
class WhiteBoardCard extends React.Component {
|
||||
state = {
|
||||
loading: true
|
||||
};
|
||||
|
||||
onChange = checked => {
|
||||
this.setState({ loading: !checked });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { loading } = this.state;
|
||||
// const {
|
||||
// onClick,
|
||||
// className,
|
||||
// name,
|
||||
// cardStyle,
|
||||
// body,
|
||||
// dueOn,
|
||||
// cardColor,
|
||||
// subTitle,
|
||||
// tagStyle,
|
||||
// escalationText,
|
||||
// tags,
|
||||
// showDeleteButton,
|
||||
// onDelete
|
||||
// } = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card
|
||||
style={{ width: 300, marginTop: 16 }}
|
||||
actions={[
|
||||
<Icon type="setting" key="setting" />,
|
||||
<Icon type="edit" key="edit" />,
|
||||
<Icon type="ellipsis" key="ellipsis" />,
|
||||
<Switch checked={!loading} onChange={this.onChange} />
|
||||
]}
|
||||
>
|
||||
<Skeleton loading={loading} avatar active>
|
||||
<Meta
|
||||
avatar={
|
||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
}
|
||||
title="Card title"
|
||||
description="This is the description"
|
||||
/>
|
||||
</Skeleton>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Card
|
||||
title={
|
||||
(metadata.ro_number ?? metadata.est_number) +
|
||||
" | " +
|
||||
(metadata.owner?.first_name ?? "") +
|
||||
" " +
|
||||
(metadata.owner?.last_name ?? "")
|
||||
}
|
||||
style={{ width: 300, marginTop: 10 }}
|
||||
actions={[
|
||||
<Link to={`/manage/jobs/${metadata.id}`}>
|
||||
<Icon type='eye' key='view' />
|
||||
</Link>,
|
||||
<Icon type='message' key='message' />,
|
||||
<Dropdown overlay={menu} trigger={["click"]}>
|
||||
<Icon type='ellipsis' />
|
||||
</Dropdown>
|
||||
]}>
|
||||
<Avatar alt='Job' />
|
||||
This is the card data.
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default WhiteBoardCard;
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function WhiteBoardKanBan({ data, eventBus }) {
|
||||
<Board
|
||||
tagStyle={{ fontSize: "80%" }}
|
||||
data={data}
|
||||
draggable
|
||||
laneDraggable={false}
|
||||
eventBusHandle={setEventBus}
|
||||
components={{ Card: WhiteBoardCard }}
|
||||
onCardClick={(cardId, metadata) =>
|
||||
|
||||
@@ -13,39 +13,34 @@ export default function WhiteBoardKanBanContainer() {
|
||||
}
|
||||
);
|
||||
|
||||
const static_data = {
|
||||
lanes: [
|
||||
{
|
||||
id: "lane1",
|
||||
title: "Planned Tasks",
|
||||
label: "2/2",
|
||||
cards: [
|
||||
{
|
||||
id: "Card1",
|
||||
title: "Write Blog",
|
||||
description: "Can AI make memes",
|
||||
label: "30 mins"
|
||||
},
|
||||
{
|
||||
id: "Card2",
|
||||
title: "Pay Rent",
|
||||
description: "Transfer via NEFT",
|
||||
label: "5 mins",
|
||||
metadata: { sha: "be312a1" }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "lane2",
|
||||
title: "Completed",
|
||||
label: "0/0",
|
||||
cards: []
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
if (loading) return <LoadingSpinner />;
|
||||
if (error) return <Alert message={error.message} />;
|
||||
let eventBus;
|
||||
return <WhiteBoardKanBan eventBus={eventBus} data={static_data} />;
|
||||
|
||||
let i = data.job_status.reduce((acc, value) => {
|
||||
//Create a lane object for each row.
|
||||
let newLane = {
|
||||
id: value.name,
|
||||
title: value.name,
|
||||
label: "0",
|
||||
cards: value.jobs.reduce((acc, value) => {
|
||||
acc.push({
|
||||
id: value.id,
|
||||
title: value.ro_number,
|
||||
description: value.est_number,
|
||||
label: value.id,
|
||||
metadata: value
|
||||
});
|
||||
return acc;
|
||||
}, [])
|
||||
};
|
||||
acc.push(newLane);
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
let laneData = {
|
||||
lanes: i
|
||||
};
|
||||
|
||||
return <WhiteBoardKanBan eventBus={eventBus} data={laneData} />;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,9 @@ export const GET_ALL_OPEN_JOBS = gql`
|
||||
id
|
||||
est_number
|
||||
ro_number
|
||||
status
|
||||
job_status {
|
||||
name
|
||||
}
|
||||
scheduled_completion
|
||||
scheduled_delivery
|
||||
vehicle {
|
||||
@@ -30,7 +32,9 @@ export const SUBSCRIPTION_ALL_OPEN_JOBS = gql`
|
||||
updated_at
|
||||
est_number
|
||||
ro_number
|
||||
status
|
||||
job_status {
|
||||
name
|
||||
}
|
||||
scheduled_completion
|
||||
scheduled_delivery
|
||||
vehicle {
|
||||
@@ -73,23 +77,30 @@ export const QUERY_JOBS_IN_PRODUCTION = gql`
|
||||
|
||||
export const SUBSCRIPTION_JOBS_IN_PRODUCTION = gql`
|
||||
subscription SUBSCRIPTION_JOBS_IN_PRODUCTION {
|
||||
jobs(limit: 1, order_by: {updated_at: desc }) {
|
||||
job_status(
|
||||
where: { isproductionstatus: { _eq: true } }
|
||||
order_by: { order: asc }
|
||||
) {
|
||||
name
|
||||
order
|
||||
isproductionstatus
|
||||
id
|
||||
updated_at
|
||||
est_number
|
||||
ro_number
|
||||
status
|
||||
scheduled_completion
|
||||
scheduled_delivery
|
||||
vehicle {
|
||||
v_model_yr
|
||||
v_make_desc
|
||||
v_model_desc
|
||||
plate_no
|
||||
}
|
||||
owner {
|
||||
first_name
|
||||
last_name
|
||||
jobs {
|
||||
id
|
||||
actual_completion
|
||||
actual_delivery
|
||||
actual_in
|
||||
est_number
|
||||
ro_number
|
||||
vehicle {
|
||||
v_model_yr
|
||||
v_model_desc
|
||||
v_make_desc
|
||||
}
|
||||
owner {
|
||||
first_name
|
||||
last_name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -120,7 +131,9 @@ export const GET_JOB_BY_PK = gql`
|
||||
scheduled_completion
|
||||
scheduled_in
|
||||
scheduled_delivery
|
||||
status
|
||||
job_status {
|
||||
name
|
||||
}
|
||||
updated_at
|
||||
claim_total
|
||||
deductible
|
||||
|
||||
@@ -10,6 +10,10 @@ export default function JobsPage() {
|
||||
const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
|
||||
fetchPolicy: "network-only"
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
document.title = "new title"
|
||||
}, []);
|
||||
|
||||
if (error) return <AlertComponent message={error.message} />;
|
||||
|
||||
|
||||
@@ -1,123 +0,0 @@
|
||||
import React from "react";
|
||||
import { Table, Button } from "antd";
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
address: "New York No. 1 Lake Park"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 42,
|
||||
address: "London No. 1 Lake Park"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Joe Black",
|
||||
age: 32,
|
||||
address: "Sidney No. 1 Lake Park"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Red",
|
||||
age: 32,
|
||||
address: "London No. 2 Lake Park"
|
||||
}
|
||||
];
|
||||
|
||||
export default class Test extends React.Component {
|
||||
state = {
|
||||
filteredInfo: null,
|
||||
sortedInfo: null
|
||||
};
|
||||
|
||||
handleChange = (pagination, filters, sorter) => {
|
||||
console.log("Various parameters", pagination, filters, sorter);
|
||||
this.setState({
|
||||
filteredInfo: filters,
|
||||
sortedInfo: sorter
|
||||
});
|
||||
};
|
||||
|
||||
clearFilters = () => {
|
||||
this.setState({ filteredInfo: null });
|
||||
};
|
||||
|
||||
clearAll = () => {
|
||||
this.setState({
|
||||
filteredInfo: null,
|
||||
sortedInfo: null
|
||||
});
|
||||
};
|
||||
|
||||
setAgeSort = () => {
|
||||
this.setState({
|
||||
sortedInfo: {
|
||||
order: "descend",
|
||||
columnKey: "age"
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
let { sortedInfo, filteredInfo } = this.state;
|
||||
sortedInfo = sortedInfo || {};
|
||||
filteredInfo = filteredInfo || {};
|
||||
console.log("filteredInfo", filteredInfo);
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
filters: [
|
||||
{ text: "Joe", value: "Joe" },
|
||||
{ text: "Jim", value: "Jim" }
|
||||
],
|
||||
filteredValue: filteredInfo.name || null,
|
||||
onFilter: (value, record) => record.name.includes(value),
|
||||
sorter: (a, b) => a.name.length - b.name.length,
|
||||
sortOrder: sortedInfo.columnKey === "name" && sortedInfo.order,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
sorter: (a, b) => a.age - b.age,
|
||||
sortOrder: sortedInfo.columnKey === "age" && sortedInfo.order,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
filters: [
|
||||
{ text: "London", value: "London" },
|
||||
{ text: "New York", value: "New York" }
|
||||
],
|
||||
filteredValue: filteredInfo.address || null,
|
||||
onFilter: (value, record) => record.address.includes(value),
|
||||
sorter: (a, b) => a.address.length - b.address.length,
|
||||
sortOrder: sortedInfo.columnKey === "address" && sortedInfo.order,
|
||||
ellipsis: true
|
||||
}
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<div className="table-operations">
|
||||
<Button onClick={this.setAgeSort}>Sort age</Button>
|
||||
<Button onClick={this.clearFilters}>Clear filters</Button>
|
||||
<Button onClick={this.clearAll}>Clear filters and sorters</Button>
|
||||
</div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
6
client/src/translations/en/common.json
Normal file
6
client/src/translations/en/common.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"welcome": {
|
||||
"title": "Welcome to {{framework}}",
|
||||
"intro": "To get started, edit <1><0></0></1> and save to reload."
|
||||
}
|
||||
}
|
||||
6
client/src/translations/es/common.json
Normal file
6
client/src/translations/es/common.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"welcome": {
|
||||
"title": "Welcome to {{framework}}",
|
||||
"intro": "To get started, edit <1><0></0></1> and save to reload."
|
||||
}
|
||||
}
|
||||
6
client/src/translations/fr/common.json
Normal file
6
client/src/translations/fr/common.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"welcome": {
|
||||
"title": "Welcome to {{framework}}",
|
||||
"intro": "To get started, edit <1><0></0></1> and save to reload."
|
||||
}
|
||||
}
|
||||
@@ -1010,7 +1010,7 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.2"
|
||||
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4":
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4":
|
||||
version "7.7.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
|
||||
integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
|
||||
@@ -5873,6 +5873,13 @@ html-minifier@^3.5.20:
|
||||
relateurl "0.2.x"
|
||||
uglify-js "3.4.x"
|
||||
|
||||
html-parse-stringify2@2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
|
||||
integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
|
||||
dependencies:
|
||||
void-elements "^2.0.1"
|
||||
|
||||
html-webpack-plugin@4.0.0-beta.5:
|
||||
version "4.0.0-beta.5"
|
||||
resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.5.tgz#2c53083c1151bfec20479b1f8aaf0039e77b5513"
|
||||
@@ -5972,6 +5979,13 @@ https-browserify@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
|
||||
integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
|
||||
|
||||
i18next@^19.0.2:
|
||||
version "19.0.2"
|
||||
resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.0.2.tgz#d72502ef031403572703f2e9f013cae005265444"
|
||||
integrity sha512-fBa43Ann2udP1CQAz3IQpOZ1dGAkmi3mMfzisOhH17igneSRbvZ7P2RNbL+L1iRYKMufBmVwnC7G3gqcyviZ9g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.3.1"
|
||||
|
||||
iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
|
||||
version "0.4.24"
|
||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
|
||||
@@ -8043,7 +8057,7 @@ node-notifier@^5.4.2:
|
||||
shellwords "^0.1.1"
|
||||
which "^1.3.0"
|
||||
|
||||
node-pre-gyp@*, node-pre-gyp@^0.14.0:
|
||||
node-pre-gyp@^0.14.0:
|
||||
version "0.14.0"
|
||||
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
|
||||
integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
|
||||
@@ -10224,7 +10238,7 @@ react-app-polyfill@^1.0.4:
|
||||
regenerator-runtime "^0.13.3"
|
||||
whatwg-fetch "^3.0.0"
|
||||
|
||||
"react-click-outside@github:tj/react-click-outside":
|
||||
react-click-outside@tj/react-click-outside:
|
||||
version "1.1.1"
|
||||
resolved "https://codeload.github.com/tj/react-click-outside/tar.gz/a833ddc5be47490307f9fcc6ed09d8c353108510"
|
||||
|
||||
@@ -10274,6 +10288,14 @@ react-error-overlay@^6.0.3:
|
||||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.4.tgz#0d165d6d27488e660bc08e57bdabaad741366f7a"
|
||||
integrity sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA==
|
||||
|
||||
react-i18next@^11.2.7:
|
||||
version "11.2.7"
|
||||
resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.2.7.tgz#d0dd61ae6127589e316c6293fc948fe413c63580"
|
||||
integrity sha512-BBm6/ch6jgvpIBwyitNd0G7Z49+wNeyJ6x0rZFcXX6NPrla2GuDGH+oKSjmYRg8IqtL6aG9CwWb06YJCrXbk6w==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.3.1"
|
||||
html-parse-stringify2 "2.0.1"
|
||||
|
||||
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
|
||||
version "16.12.0"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
|
||||
@@ -11276,9 +11298,9 @@ slice-ansi@^2.1.0:
|
||||
astral-regex "^1.0.0"
|
||||
is-fullwidth-code-point "^2.0.0"
|
||||
|
||||
"smooth-dnd@git+https://github.com/rcdexta/smooth-dnd.git":
|
||||
"smooth-dnd@https://github.com/rcdexta/smooth-dnd":
|
||||
version "0.6.3"
|
||||
resolved "git+https://github.com/rcdexta/smooth-dnd.git#f13924c67bf6ffe4613d97bb1ee83f11d364eb1e"
|
||||
resolved "https://github.com/rcdexta/smooth-dnd#f13924c67bf6ffe4613d97bb1ee83f11d364eb1e"
|
||||
|
||||
snapdragon-node@^2.0.1:
|
||||
version "2.1.1"
|
||||
@@ -12404,6 +12426,11 @@ vm-browserify@^1.0.1:
|
||||
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
|
||||
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
|
||||
|
||||
void-elements@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
|
||||
integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
|
||||
|
||||
w3c-hr-time@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
|
||||
|
||||
Reference in New Issue
Block a user