Skip to content

Commit f42b5f9

Browse files
ryoldashryoldash
committed
Refactoring of react ui filter: users, roles, tenants
1 parent 2686e98 commit f42b5f9

File tree

3 files changed

+56
-70
lines changed

3 files changed

+56
-70
lines changed

‎reactjs/src/scenes/Roles/index.tsx‎

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Card, Col, Row, Button, Table, Dropdown, Menu, Modal } from 'antd';
1+
import { Card, Col, Row, Button, Table, Dropdown, Menu, Modal, Input } from 'antd';
22
import * as React from 'react';
33
import { EntityDto } from 'src/services/dto/entityDto';
44
import CreateOrUpdateRole from './components/createOrUpdateRole';
@@ -17,36 +17,32 @@ export interface IRoleState {
1717
modalVisible: boolean;
1818
maxResultCount: number;
1919
skipCount: number;
20+
roleId: number;
21+
filter: string;
2022
}
2123

2224
const confirm = Modal.confirm;
25+
const Search = Input.Search;
2326

2427
@inject(Stores.RoleStore)
2528
@observer
26-
class Role extends AppComponentBase<IRoleProps> {
27-
formRef: any;
28-
29-
constructor(props: any) {
30-
super(props);
31-
32-
this.getAll = this.getAll.bind(this);
33-
this.handleChange = this.handleChange.bind(this);
34-
}
29+
class Role extends AppComponentBase<IRoleProps, IRoleState> {
30+
formRef: any;
3531

3632
state = {
3733
modalVisible: false,
3834
maxResultCount: 10,
3935
skipCount: 0,
4036
roleId: 0,
41-
filter: ''
37+
filter: '',
4238
};
4339

4440
async componentDidMount() {
4541
await this.getAll();
4642
}
4743

4844
async getAll() {
49-
await this.props.roleStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
45+
await this.props.roleStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
5046
}
5147

5248
handleTableChange = (pagination: any) => {
@@ -109,12 +105,11 @@ class Role extends AppComponentBase<IRoleProps> {
109105

110106
saveFormRef = (formRef: any) => {
111107
this.formRef = formRef;
112-
};
108+
};
113109

114-
handleChange(event: any) {
115-
this.state.filter = event.target.value;
116-
this.setState({ value: event.target.value });
117-
}
110+
handleSearch = (value: string) => {
111+
this.setState({ filter: value }, async () => await this.getAll());
112+
};
118113

119114
public render() {
120115
const { allPermissions, roles } = this.props.roleStore;
@@ -172,14 +167,10 @@ class Role extends AppComponentBase<IRoleProps> {
172167
>
173168
<Button type="primary" shape="circle" icon="plus" onClick={() => this.createOrUpdateModalOpen({ id: 0 })} />
174169
</Col>
175-
</Row>
170+
</Row>
176171
<Row>
177-
<Col sm={{ span: 5, offset: 0 }}>
178-
<input className="ant-input" type="text" placeholder="filter" value={this.state.filter} onChange={this.handleChange.bind(this)} />
179-
</Col>
180-
181-
<Col sm={{ span: 4, offset: 1 }}>
182-
<Button type="primary" icon="search" value="Submit" onClick={this.getAll}>{L('Search')}</Button>
172+
<Col sm={{ span: 10, offset: 0 }}>
173+
<Search placeholder={this.L('Filter')} onSearch={this.handleSearch} />
183174
</Col>
184175
</Row>
185176
<Row style={{ marginTop: 20 }}>

‎reactjs/src/scenes/Tenants/index.tsx‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,47 @@
1-
import { Card, Col, Row, Button, Table, Tag, Dropdown, Menu, Modal } from 'antd';
1+
import { Card, Col, Row, Button, Table, Tag, Dropdown, Menu, Modal, Input } from 'antd';
22
import * as React from 'react';
33
import { EntityDto } from 'src/services/dto/entityDto';
44
import CreateOrUpdateTenant from './components/createOrUpdateTenant';
55
import { inject, observer } from 'mobx-react';
6-
import { __await } from 'tslib';
76
import Stores from 'src/stores/storeIdentifier';
87
import TenantStore from 'src/stores/tenantStore';
98
import { L } from 'src/lib/abpUtility';
9+
import AppComponentBase from 'src/components/AppComponentBase';
1010

1111
export interface ITenantProps {
1212
tenantStore: TenantStore;
1313
}
1414

15+
export interface ITenantState {
16+
modalVisible: boolean;
17+
maxResultCount: number;
18+
skipCount: number;
19+
tenantId: number;
20+
filter: string;
21+
}
22+
1523
const confirm = Modal.confirm;
24+
const Search = Input.Search;
1625

1726
@inject(Stores.TenantStore)
1827
@observer
19-
class Tenant extends React.Component<ITenantProps> {
28+
class Tenant extends AppComponentBase<ITenantProps, ITenantState> {
2029
formRef: any;
2130

22-
constructor(props: any) {
23-
super(props);
24-
25-
this.getAll = this.getAll.bind(this);
26-
this.handleChange = this.handleChange.bind(this);
27-
}
28-
2931
state = {
3032
modalVisible: false,
3133
maxResultCount: 10,
3234
skipCount: 0,
3335
tenantId: 0,
34-
filter: ''
36+
filter: '',
3537
};
3638

3739
async componentDidMount() {
3840
await this.getAll();
3941
}
4042

4143
async getAll() {
42-
await this.props.tenantStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
44+
await this.props.tenantStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
4345
}
4446

4547
handleTableChange = (pagination: any) => {
@@ -103,12 +105,11 @@ class Tenant extends React.Component<ITenantProps> {
103105

104106
saveFormRef = (formRef: any) => {
105107
this.formRef = formRef;
106-
};
108+
};
107109

108-
handleChange(event: any) {
109-
this.state.filter = event.target.value;
110-
this.setState({ value: event.target.value });
111-
}
110+
handleSearch = (value: string) => {
111+
this.setState({ filter: value }, async () => await this.getAll());
112+
};
112113

113114
public render() {
114115
const { tenants } = this.props.tenantStore;
@@ -173,14 +174,10 @@ class Tenant extends React.Component<ITenantProps> {
173174
>
174175
<Button type="primary" shape="circle" icon="plus" onClick={() => this.createOrUpdateModalOpen({ id: 0 })} />
175176
</Col>
176-
</Row>
177+
</Row>
177178
<Row>
178-
<Col sm={{ span: 5, offset: 0 }}>
179-
<input className="ant-input" type="text" placeholder="filter" value={this.state.filter} onChange={this.handleChange.bind(this)} />
180-
</Col>
181-
182-
<Col sm={{ span: 4, offset: 1 }}>
183-
<Button type="primary" icon="search" value="Submit" onClick={this.getAll}>{L('Search')}</Button>
179+
<Col sm={{ span: 10, offset: 0 }}>
180+
<Search placeholder={this.L('Filter')} onSearch={this.handleSearch} />
184181
</Col>
185182
</Row>
186183
<Row style={{ marginTop: 20 }}>

‎reactjs/src/scenes/Users/index.tsx‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,47 @@
1-
import { Card, Col, Row, Button, Table, Tag, Dropdown, Menu, Modal } from 'antd';
1+
import { Card, Col, Row, Button, Table, Tag, Dropdown, Menu, Modal, Input } from 'antd';
22
import * as React from 'react';
33
import CreateOrUpdateUser from './components/createOrUpdateUser';
44
import { EntityDto } from 'src/services/dto/entityDto';
55
import { observer, inject } from 'mobx-react';
66
import Stores from 'src/stores/storeIdentifier';
77
import UserStore from 'src/stores/userStore';
88
import { L } from 'src/lib/abpUtility';
9+
import AppComponentBase from 'src/components/AppComponentBase';
910

1011
export interface IUserProps {
1112
userStore: UserStore;
1213
}
1314

15+
export interface IUserState {
16+
modalVisible: boolean;
17+
maxResultCount: number;
18+
skipCount: number;
19+
userId: number;
20+
filter: string;
21+
}
22+
1423
const confirm = Modal.confirm;
24+
const Search = Input.Search;
1525

1626
@inject(Stores.UserStore)
1727
@observer
18-
class User extends React.Component<IUserProps> {
28+
class User extends AppComponentBase<IUserProps, IUserState> {
1929
formRef: any;
2030

21-
constructor(props: any) {
22-
super(props);
23-
24-
this.getAll = this.getAll.bind(this);
25-
this.handleChange = this.handleChange.bind(this);
26-
}
27-
2831
state = {
2932
modalVisible: false,
3033
maxResultCount: 10,
3134
skipCount: 0,
3235
userId: 0,
33-
filter: ''
36+
filter: '',
3437
};
3538

3639
async componentDidMount() {
3740
await this.getAll();
3841
}
3942

40-
async getAll() {
41-
await this.props.userStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter});
43+
async getAll() {
44+
await this.props.userStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
4245
}
4346

4447
handleTableChange = (pagination: any) => {
@@ -103,10 +106,9 @@ class User extends React.Component<IUserProps> {
103106
this.formRef = formRef;
104107
};
105108

106-
handleChange(event: any) {
107-
this.state.filter = event.target.value;
108-
this.setState({ value: event.target.value });
109-
}
109+
handleSearch = (value: string) => {
110+
this.setState({ filter: value }, async () => await this.getAll());
111+
};
110112

111113
public render() {
112114
const { users } = this.props.userStore;
@@ -175,12 +177,8 @@ class User extends React.Component<IUserProps> {
175177
</Col>
176178
</Row>
177179
<Row>
178-
<Col sm={{ span: 5, offset: 0 }}>
179-
<input className="ant-input" type="text" placeholder="filter" value={this.state.filter} onChange={this.handleChange.bind(this)} />
180-
</Col>
181-
182-
<Col sm={{ span: 4, offset: 1 }}>
183-
<Button type="primary" icon="search" value="Submit" onClick={this.getAll}>{L('Search')}</Button>
180+
<Col sm={{ span: 10, offset: 0 }}>
181+
<Search placeholder={this.L('Filter')} onSearch={this.handleSearch} />
184182
</Col>
185183
</Row>
186184
<Row style={{ marginTop: 20 }}>

0 commit comments

Comments
 (0)