Skip to content

Commit 1f86dd0

Browse files
ssarkisyssarkisy
committed
Add CatalogPage and styles.css
1 parent fdb2630 commit 1f86dd0

7 files changed

Lines changed: 207 additions & 3 deletions

File tree

src/components/api/catalogApi.js renamed to src/api/catalogApi.js

File renamed without changes.

src/components/api/config.js renamed to src/api/config.js

File renamed without changes.

‎src/components/App.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import Container from './common/Container';
4+
import CatalogPage from './catalog/CatalogPage';
45
import { Route, NavLink } from 'react-router-dom';
56
import { Layout, Menu, Breadcrumb, Icon, LocaleProvider } from 'antd';
67
import enUS from 'antd/lib/locale-provider/en_US';
@@ -27,7 +28,8 @@ class App extends Component {
2728
</Header>
2829
<Container>
2930
<Content style={{ minHeight: "calc(100vh - 130px)", padding: "20px" }}>
30-
<Route path={"/"} component={CatalogListPage}/>
31+
<Route exact path={"/"} component={CatalogListPage}/>
32+
<Route exact path={"/catalog/:name"} component={CatalogPage}/>
3133
</Content>
3234
<Footer style={{ textAlign: 'center' }}>
3335
Sergey Sarkisyan ©2017 Built with React and Ant Design

‎src/components/catalog/CatalogListPage.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
2+
import PropTypes from 'prop-types';
23
import { Breadcrumb, Table, notification } from 'antd';
3-
import CatalogApi from '../api/catalogApi';
4+
import CatalogApi from '../../api/catalogApi';
45

56
class CatalogListPage extends React.Component {
67

@@ -19,7 +20,7 @@ class CatalogListPage extends React.Component {
1920
sorter: sortByName,
2021
className: 'clickable-cell',
2122
onCellClick: (record) => {
22-
history.replace(`/catalog/${record.class}`);
23+
this.props.history.push(`/catalog/${record.class}`);
2324
}
2425
}
2526
];
@@ -75,4 +76,10 @@ function sortByName(a, b) {
7576
return 0;
7677
}
7778

79+
CatalogListPage.propTypes = {
80+
history: PropTypes.object,
81+
match: PropTypes.object,
82+
location: PropTypes.object
83+
};
84+
7885
export default CatalogListPage;

‎src/components/catalog/CatalogPage.js‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {Breadcrumb, Table, Button} from 'antd';
4+
import { NavLink } from 'react-router-dom';
5+
import CatalogApi from '../../api/catalogApi';
6+
7+
8+
function getBreadcrumbs(catalog = 'Catalog') {
9+
return (
10+
<Breadcrumb style={{margin: '12px 0'}}>
11+
<Breadcrumb.Item><NavLink to="/">Catalogs</NavLink></Breadcrumb.Item>
12+
<Breadcrumb.Item>{catalog}</Breadcrumb.Item>
13+
</Breadcrumb>
14+
);
15+
}
16+
17+
class CatalogPage extends React.Component {
18+
constructor(props) {
19+
super(props);
20+
21+
this.columns = [
22+
{
23+
dataIndex: 'displayName',
24+
key: '_id'
25+
},
26+
{
27+
key: 'action',
28+
width: "100px",
29+
onCellClick: (record, event) => {
30+
if (
31+
event.target.matches('.anticon-edit') ||
32+
(event.target.firstElementChild &&
33+
event.target.firstElementChild.matches('.anticon-edit'))
34+
) {
35+
this.edit(record);
36+
37+
} else if (
38+
event.target.matches('.anticon-delete') ||
39+
(event.target.firstElementChild &&
40+
event.target.firstElementChild.matches('.anticon-delete'))
41+
) {
42+
this.remove(record);
43+
}
44+
},
45+
render: (text, record) => (
46+
<span>
47+
<Button type="primary" icon="edit" style={{margin: "0 5px"}}/>
48+
<Button type="danger" icon="delete" style={{margin: "0 5px"}}/>
49+
</span>
50+
)
51+
}
52+
];
53+
54+
this.state = {
55+
catalog: {},
56+
extent: []
57+
};
58+
}
59+
60+
componentDidMount() {
61+
const name = this.props.match.params.name;
62+
63+
CatalogApi.getCatalogInfo(name)
64+
.then((response) => {
65+
this.setState({catalog: response.data});
66+
return CatalogApi.getCatalogExtent(name);
67+
})
68+
.then((response) => {
69+
this.setState({extent: response.data.children});
70+
});
71+
}
72+
73+
edit = (record) => {
74+
const path = this.props.location.pathname;
75+
this.props.history.replace(`${path}/object/${record._id}`);
76+
};
77+
78+
remove = (record) => {
79+
console.log('Remove item:' + record);
80+
};
81+
82+
render() {
83+
return (
84+
<div>
85+
{getBreadcrumbs(this.state.catalog.name)}
86+
87+
<div style={{background: '#fff', padding: 24, minHeight: 280}}>
88+
89+
<div className="clearfix" style={{width: "100%"}}>
90+
<h2 style={{display: "inline"}}>
91+
{this.state.catalog.name || '...'}
92+
</h2>
93+
<Button type="primary"
94+
style={{float: 'right', marginBottom: 8}}
95+
size="small"
96+
onClick={this.handleAdd}
97+
className="clearfix"
98+
>
99+
Add
100+
</Button>
101+
</div>
102+
103+
<Table
104+
rowKey="_id"
105+
dataSource={this.state.extent}
106+
columns={this.columns}
107+
showHeader={false}
108+
bordered
109+
size="middle"
110+
pagination={{showSizeChanger: true}}
111+
/>
112+
</div>
113+
</div>
114+
);
115+
}
116+
}
117+
118+
CatalogPage.propTypes = {
119+
history: PropTypes.object,
120+
match: PropTypes.object,
121+
location: PropTypes.object
122+
};
123+
124+
export default CatalogPage;

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
33
import { HashRouter } from 'react-router-dom';
44
import App from './components/App';
55
import './index.csp';
6+
import './styles/styles.css';
67

78
ReactDOM.render(
89
<HashRouter>

‎src/styles/styles.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/* Styles */
2+
.clearfix {
3+
content: "";
4+
display: table;
5+
clear: both;
6+
}
7+
8+
.ant-form-item {
9+
margin-bottom: 12px;
10+
}
11+
12+
td.clickable-cell {
13+
cursor: pointer;
14+
}
15+
16+
.logo {
17+
width: 62px;
18+
height: 62px;
19+
float: left;
20+
}
21+
22+
.logo img {
23+
width: 62px;
24+
}
25+
26+
.header {
27+
font-size: 26pt;
28+
}
29+
30+
.paragraph {
31+
margin-top: 5px;
32+
margin-bottom: 5px;
33+
font-size: 14pt;
34+
line-height: 24pt;
35+
}
36+
37+
.feature-list {
38+
padding-left: 10px;
39+
list-style-type: disc;
40+
margin-left: 30px;
41+
}
42+
43+
.feature-item {
44+
font-size: 12pt;
45+
line-height: 26pt;
46+
}
47+
48+
.feature-item__tag {
49+
vertical-align: text-bottom;
50+
}
51+
52+
.container {
53+
margin-right: auto;
54+
margin-left: auto;
55+
}
56+
@media (min-width: 768px) {
57+
.container {
58+
width: 750px;
59+
}
60+
}
61+
@media (min-width: 992px) {
62+
.container {
63+
width: 970px;
64+
}
65+
}
66+
@media (min-width: 1200px) {
67+
.container {
68+
width: 1170px;
69+
}
70+
}

0 commit comments

Comments
 (0)