Skip to content

Commit fb61afe

Browse files
yekalkanyekalkan
authored
Merge pull request #396 from aspnetboilerplate/Ui-Filters-React
Added react ui filters to users, roles, tenants
2 parents 84ba1f2 + 7a46614 commit fb61afe

File tree

12 files changed

+83
-20
lines changed

12 files changed

+83
-20
lines changed

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

Lines changed: 16 additions & 3 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,28 +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> {
29+
class Role extends AppComponentBase<IRoleProps, IRoleState> {
2730
formRef: any;
2831

2932
state = {
3033
modalVisible: false,
3134
maxResultCount: 10,
3235
skipCount: 0,
3336
roleId: 0,
37+
filter: '',
3438
};
3539

3640
async componentDidMount() {
3741
await this.getAll();
3842
}
3943

4044
async getAll() {
41-
await this.props.roleStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount });
45+
await this.props.roleStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
4246
}
4347

4448
handleTableChange = (pagination: any) => {
@@ -103,6 +107,10 @@ class Role extends AppComponentBase<IRoleProps> {
103107
this.formRef = formRef;
104108
};
105109

110+
handleSearch = (value: string) => {
111+
this.setState({ filter: value }, async () => await this.getAll());
112+
};
113+
106114
public render() {
107115
const { allPermissions, roles } = this.props.roleStore;
108116
const columns = [
@@ -160,6 +168,11 @@ class Role extends AppComponentBase<IRoleProps> {
160168
<Button type="primary" shape="circle" icon="plus" onClick={() => this.createOrUpdateModalOpen({ id: 0 })} />
161169
</Col>
162170
</Row>
171+
<Row>
172+
<Col sm={{ span: 10, offset: 0 }}>
173+
<Search placeholder={this.L('Filter')} onSearch={this.handleSearch} />
174+
</Col>
175+
</Row>
163176
<Row style={{ marginTop: 20 }}>
164177
<Col
165178
xs={{ span: 24, offset: 0 }}

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

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +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

2231
state = {
2332
modalVisible: false,
2433
maxResultCount: 10,
2534
skipCount: 0,
2635
tenantId: 0,
36+
filter: '',
2737
};
2838

2939
async componentDidMount() {
3040
await this.getAll();
3141
}
3242

3343
async getAll() {
34-
await this.props.tenantStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount });
44+
await this.props.tenantStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
3545
}
3646

3747
handleTableChange = (pagination: any) => {
@@ -97,6 +107,10 @@ class Tenant extends React.Component<ITenantProps> {
97107
this.formRef = formRef;
98108
};
99109

110+
handleSearch = (value: string) => {
111+
this.setState({ filter: value }, async () => await this.getAll());
112+
};
113+
100114
public render() {
101115
const { tenants } = this.props.tenantStore;
102116
const columns = [
@@ -161,6 +175,11 @@ class Tenant extends React.Component<ITenantProps> {
161175
<Button type="primary" shape="circle" icon="plus" onClick={() => this.createOrUpdateModalOpen({ id: 0 })} />
162176
</Col>
163177
</Row>
178+
<Row>
179+
<Col sm={{ span: 10, offset: 0 }}>
180+
<Search placeholder={this.L('Filter')} onSearch={this.handleSearch} />
181+
</Col>
182+
</Row>
164183
<Row style={{ marginTop: 20 }}>
165184
<Col
166185
xs={{ span: 24, offset: 0 }}

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

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +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-
2531
state = {
2632
modalVisible: false,
2733
maxResultCount: 10,
2834
skipCount: 0,
2935
userId: 0,
36+
filter: '',
3037
};
3138

3239
async componentDidMount() {
3340
await this.getAll();
3441
}
3542

3643
async getAll() {
37-
await this.props.userStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount });
44+
await this.props.userStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
3845
}
3946

4047
handleTableChange = (pagination: any) => {
@@ -99,6 +106,10 @@ class User extends React.Component<IUserProps> {
99106
this.formRef = formRef;
100107
};
101108

109+
handleSearch = (value: string) => {
110+
this.setState({ filter: value }, async () => await this.getAll());
111+
};
112+
102113
public render() {
103114
const { users } = this.props.userStore;
104115
const columns = [
@@ -165,6 +176,11 @@ class User extends React.Component<IUserProps> {
165176
<Button type="primary" shape="circle" icon="plus" onClick={() => this.createOrUpdateModalOpen({ id: 0 })} />
166177
</Col>
167178
</Row>
179+
<Row>
180+
<Col sm={{ span: 10, offset: 0 }}>
181+
<Search placeholder={this.L('Filter')} onSearch={this.handleSearch} />
182+
</Col>
183+
</Row>
168184
<Row style={{ marginTop: 20 }}>
169185
<Col
170186
xs={{ span: 24, offset: 0 }}

‎reactjs/src/services/role/dto/PagedRoleResultRequestDto.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export interface PagedRoleResultRequestDto extends PagedFilterAndSortedRequest {
2+
keyword: string
3+
}

‎reactjs/src/services/role/roleService.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import http from '../httpService';
88
import { GetAllRoleOutput } from './dto/getAllRoleOutput';
99
import { PagedResultDto } from '../dto/pagedResultDto';
1010
import { GetRoleForEditOutput } from './dto/getRoleForEditOutput';
11+
import { PagedRoleResultRequestDto } from './dto/PagedRoleResultRequestDto';
1112

1213
class RoleService {
1314
public async create(createRoleInput: CreateRoleInput): Promise<PagedResultDto<CreateRoleOutput>> {
@@ -45,7 +46,7 @@ class RoleService {
4546
return result.data;
4647
}
4748

48-
public async getAll(pagedFilterAndSortedRequest: PagedFilterAndSortedRequest): Promise<PagedResultDto<GetAllRoleOutput>> {
49+
public async getAll(pagedFilterAndSortedRequest: PagedRoleResultRequestDto): Promise<PagedResultDto<GetAllRoleOutput>> {
4950
let result = await http.get('api/services/app/Role/GetAll', { params: pagedFilterAndSortedRequest });
5051
return result.data.result;
5152
}

‎reactjs/src/services/tenant/dto/PagedTenantResultRequestDto.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export interface PagedTenantResultRequestDto extends PagedFilterAndSortedRequest {
2+
keyword: string
3+
}

‎reactjs/src/services/tenant/tenantService.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { PagedResultDto } from 'src/services/dto/pagedResultDto';
77
import http from '../httpService';
88
import UpdateTenantInput from './dto/updateTenantInput';
99
import CreateTenantOutput from './dto/createTenantOutput';
10+
import {PagedTenantResultRequestDto} from './dto/PagedTenantResultRequestDto';
1011

1112
class TenantService {
1213
public async create(createTenantInput: CreateTenantInput): Promise<CreateTenantOutput> {
@@ -24,7 +25,7 @@ class TenantService {
2425
return result.data.result;
2526
}
2627

27-
public async getAll(pagedFilterAndSortedRequest: PagedFilterAndSortedRequest): Promise<PagedResultDto<GetAllTenantOutput>> {
28+
public async getAll(pagedFilterAndSortedRequest: PagedTenantResultRequestDto): Promise<PagedResultDto<GetAllTenantOutput>> {
2829
let result = await http.get('api/services/app/Tenant/GetAll', { params: pagedFilterAndSortedRequest });
2930
return result.data.result;
3031
}

‎reactjs/src/services/user/dto/PagedUserResultRequestDto.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export interface PagedUserResultRequestDto extends PagedFilterAndSortedRequest {
2+
keyword: string
3+
}

‎reactjs/src/services/user/userService.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import http from '../httpService';
55
import { GetAllUserOutput } from './dto/getAllUserOutput';
66
import { PagedResultDto } from 'src/services/dto/pagedResultDto';
77
import { CreateOrUpdateUserInput } from './dto/createOrUpdateUserInput';
8+
import { PagedUserResultRequestDto } from "./dto/PagedUserResultRequestDto";
89

910
class UserService {
1011
public async create(createUserInput: CreateOrUpdateUserInput) {
@@ -37,7 +38,7 @@ class UserService {
3738
return result.data.result;
3839
}
3940

40-
public async getAll(pagedFilterAndSortedRequest: PagedFilterAndSortedRequest): Promise<PagedResultDto<GetAllUserOutput>> {
41+
public async getAll(pagedFilterAndSortedRequest: PagedUserResultRequestDto): Promise<PagedResultDto<GetAllUserOutput>> {
4142
let result = await http.get('api/services/app/User/GetAll', { params: pagedFilterAndSortedRequest });
4243
return result.data.result;
4344
}

‎reactjs/src/stores/roleStore.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { EntityDto } from 'src/services/dto/entityDto';
66
import { CreateRoleInput } from 'src/services/role/dto/createRoleInput';
77
import { UpdateRoleInput } from 'src/services/role/dto/updateRoleInput';
88
import { GetAllPermissionsOutput } from 'src/services/role/dto/getAllPermissionsOutput';
9+
import { PagedRoleResultRequestDto } from 'src/services/role/dto/PagedRoleResultRequestDto';
910
import RoleEditModel from 'src/models/Roles/roleEditModel';
1011

1112
class RoleStore {
@@ -75,7 +76,7 @@ class RoleStore {
7576
}
7677

7778
@action
78-
async getAll(pagedFilterAndSortedRequest: PagedFilterAndSortedRequest) {
79+
async getAll(pagedFilterAndSortedRequest: PagedRoleResultRequestDto) {
7980
let result = await roleService.getAll(pagedFilterAndSortedRequest);
8081
this.roles = result;
8182
}

0 commit comments

Comments
 (0)