Skip to content

Commit 2686e98

Browse files
yekalkanyekalkan
committed
Added react ui filters to users, roles, tenants
1 parent 73b3d6d commit 2686e98

File tree

12 files changed

+91
-14
lines changed

12 files changed

+91
-14
lines changed

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

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,29 @@ const confirm = Modal.confirm;
2424
@inject(Stores.RoleStore)
2525
@observer
2626
class Role extends AppComponentBase<IRoleProps> {
27-
formRef: any;
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+
}
2835

2936
state = {
3037
modalVisible: false,
3138
maxResultCount: 10,
3239
skipCount: 0,
3340
roleId: 0,
41+
filter: ''
3442
};
3543

3644
async componentDidMount() {
3745
await this.getAll();
3846
}
3947

4048
async getAll() {
41-
await this.props.roleStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount });
49+
await this.props.roleStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
4250
}
4351

4452
handleTableChange = (pagination: any) => {
@@ -101,7 +109,12 @@ class Role extends AppComponentBase<IRoleProps> {
101109

102110
saveFormRef = (formRef: any) => {
103111
this.formRef = formRef;
104-
};
112+
};
113+
114+
handleChange(event: any) {
115+
this.state.filter = event.target.value;
116+
this.setState({ value: event.target.value });
117+
}
105118

106119
public render() {
107120
const { allPermissions, roles } = this.props.roleStore;
@@ -159,6 +172,15 @@ class Role extends AppComponentBase<IRoleProps> {
159172
>
160173
<Button type="primary" shape="circle" icon="plus" onClick={() => this.createOrUpdateModalOpen({ id: 0 })} />
161174
</Col>
175+
</Row>
176+
<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>
183+
</Col>
162184
</Row>
163185
<Row style={{ marginTop: 20 }}>
164186
<Col

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

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,27 @@ const confirm = Modal.confirm;
1919
class Tenant extends React.Component<ITenantProps> {
2020
formRef: any;
2121

22+
constructor(props: any) {
23+
super(props);
24+
25+
this.getAll = this.getAll.bind(this);
26+
this.handleChange = this.handleChange.bind(this);
27+
}
28+
2229
state = {
2330
modalVisible: false,
2431
maxResultCount: 10,
2532
skipCount: 0,
2633
tenantId: 0,
34+
filter: ''
2735
};
2836

2937
async componentDidMount() {
3038
await this.getAll();
3139
}
3240

3341
async getAll() {
34-
await this.props.tenantStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount });
42+
await this.props.tenantStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
3543
}
3644

3745
handleTableChange = (pagination: any) => {
@@ -95,7 +103,12 @@ class Tenant extends React.Component<ITenantProps> {
95103

96104
saveFormRef = (formRef: any) => {
97105
this.formRef = formRef;
98-
};
106+
};
107+
108+
handleChange(event: any) {
109+
this.state.filter = event.target.value;
110+
this.setState({ value: event.target.value });
111+
}
99112

100113
public render() {
101114
const { tenants } = this.props.tenantStore;
@@ -160,6 +173,15 @@ class Tenant extends React.Component<ITenantProps> {
160173
>
161174
<Button type="primary" shape="circle" icon="plus" onClick={() => this.createOrUpdateModalOpen({ id: 0 })} />
162175
</Col>
176+
</Row>
177+
<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>
184+
</Col>
163185
</Row>
164186
<Row style={{ marginTop: 20 }}>
165187
<Col

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

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,26 @@ class User extends React.Component<IUserProps> {
1919
formRef: any;
2020

2121
constructor(props: any) {
22-
super(props);
22+
super(props);
23+
24+
this.getAll = this.getAll.bind(this);
25+
this.handleChange = this.handleChange.bind(this);
2326
}
2427

2528
state = {
2629
modalVisible: false,
2730
maxResultCount: 10,
2831
skipCount: 0,
2932
userId: 0,
33+
filter: ''
3034
};
3135

3236
async componentDidMount() {
3337
await this.getAll();
3438
}
3539

36-
async getAll() {
37-
await this.props.userStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount });
40+
async getAll() {
41+
await this.props.userStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter});
3842
}
3943

4044
handleTableChange = (pagination: any) => {
@@ -99,6 +103,11 @@ class User extends React.Component<IUserProps> {
99103
this.formRef = formRef;
100104
};
101105

106+
handleChange(event: any) {
107+
this.state.filter = event.target.value;
108+
this.setState({ value: event.target.value });
109+
}
110+
102111
public render() {
103112
const { users } = this.props.userStore;
104113
const columns = [
@@ -165,6 +174,15 @@ class User extends React.Component<IUserProps> {
165174
<Button type="primary" shape="circle" icon="plus" onClick={() => this.createOrUpdateModalOpen({ id: 0 })} />
166175
</Col>
167176
</Row>
177+
<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>
184+
</Col>
185+
</Row>
168186
<Row style={{ marginTop: 20 }}>
169187
<Col
170188
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)