Merge pull request #396 from aspnetboilerplate/Ui-Filters-React

Added react ui filters to users, roles, tenants

Author: yekalkan

reactjs/src/scenes/Roles/index.tsx

@@ -1,4 +1,4 @@
-import { Card, Col, Row, Button, Table, Dropdown, Menu, Modal } from 'antd';
+import { Card, Col, Row, Button, Table, Dropdown, Menu, Modal, Input } from 'antd';
 import * as React from 'react';
 import { EntityDto } from 'src/services/dto/entityDto';
 import CreateOrUpdateRole from './components/createOrUpdateRole';
@@ -17,28 +17,32 @@ export interface IRoleState {
   modalVisible: boolean;
   maxResultCount: number;
   skipCount: number;
+  roleId: number;
+  filter: string;
 }
 
 const confirm = Modal.confirm;
+const Search = Input.Search;
 
 @inject(Stores.RoleStore)
 @observer
-class Role extends AppComponentBase<IRoleProps> {
+class Role extends AppComponentBase<IRoleProps, IRoleState> {
   formRef: any;
 
   state = {
     modalVisible: false,
     maxResultCount: 10,
     skipCount: 0,
     roleId: 0,
+    filter: '',
   };
 
   async componentDidMount() {
     await this.getAll();
   }
 
   async getAll() {
-    await this.props.roleStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount });
+    await this.props.roleStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
   }
 
   handleTableChange = (pagination: any) => {
@@ -103,6 +107,10 @@ class Role extends AppComponentBase<IRoleProps> {
     this.formRef = formRef;
   };
 
+  handleSearch = (value: string) => {
+    this.setState({ filter: value }, async () => await this.getAll());
+  };
+
   public render() {
     const { allPermissions, roles } = this.props.roleStore;
     const columns = [
@@ -160,6 +168,11 @@ class Role extends AppComponentBase<IRoleProps> {
             <Button type="primary" shape="circle" icon="plus" onClick={() => this.createOrUpdateModalOpen({ id: 0 })} />
           </Col>
         </Row>
+        <Row>
+          <Col sm={{ span: 10, offset: 0 }}>
+            <Search placeholder={this.L('Filter')} onSearch={this.handleSearch} />
+          </Col>
+        </Row>
         <Row style={{ marginTop: 20 }}>
           <Col
             xs={{ span: 24, offset: 0 }}

reactjs/src/scenes/Tenants/index.tsx

@@ -1,37 +1,47 @@
-import { Card, Col, Row, Button, Table, Tag, Dropdown, Menu, Modal } from 'antd';
+import { Card, Col, Row, Button, Table, Tag, Dropdown, Menu, Modal, Input } from 'antd';
 import * as React from 'react';
 import { EntityDto } from 'src/services/dto/entityDto';
 import CreateOrUpdateTenant from './components/createOrUpdateTenant';
 import { inject, observer } from 'mobx-react';
-import { __await } from 'tslib';
 import Stores from 'src/stores/storeIdentifier';
 import TenantStore from 'src/stores/tenantStore';
 import { L } from 'src/lib/abpUtility';
+import AppComponentBase from 'src/components/AppComponentBase';
 
 export interface ITenantProps {
   tenantStore: TenantStore;
 }
 
+export interface ITenantState {
+  modalVisible: boolean;
+  maxResultCount: number;
+  skipCount: number;
+  tenantId: number;
+  filter: string;
+}
+
 const confirm = Modal.confirm;
+const Search = Input.Search;
 
 @inject(Stores.TenantStore)
 @observer
-class Tenant extends React.Component<ITenantProps> {
+class Tenant extends AppComponentBase<ITenantProps, ITenantState> {
   formRef: any;
 
   state = {
     modalVisible: false,
     maxResultCount: 10,
     skipCount: 0,
     tenantId: 0,
+    filter: '',
   };
 
   async componentDidMount() {
     await this.getAll();
   }
 
   async getAll() {
-    await this.props.tenantStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount });
+    await this.props.tenantStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
   }
 
   handleTableChange = (pagination: any) => {
@@ -97,6 +107,10 @@ class Tenant extends React.Component<ITenantProps> {
     this.formRef = formRef;
   };
 
+  handleSearch = (value: string) => {
+    this.setState({ filter: value }, async () => await this.getAll());
+  };
+
   public render() {
     const { tenants } = this.props.tenantStore;
     const columns = [
@@ -161,6 +175,11 @@ class Tenant extends React.Component<ITenantProps> {
             <Button type="primary" shape="circle" icon="plus" onClick={() => this.createOrUpdateModalOpen({ id: 0 })} />
           </Col>
         </Row>
+        <Row>
+          <Col sm={{ span: 10, offset: 0 }}>
+            <Search placeholder={this.L('Filter')} onSearch={this.handleSearch} />
+          </Col>
+        </Row>
         <Row style={{ marginTop: 20 }}>
           <Col
             xs={{ span: 24, offset: 0 }}

reactjs/src/scenes/Users/index.tsx

@@ -1,40 +1,47 @@
-import { Card, Col, Row, Button, Table, Tag, Dropdown, Menu, Modal } from 'antd';
+import { Card, Col, Row, Button, Table, Tag, Dropdown, Menu, Modal, Input } from 'antd';
 import * as React from 'react';
 import CreateOrUpdateUser from './components/createOrUpdateUser';
 import { EntityDto } from 'src/services/dto/entityDto';
 import { observer, inject } from 'mobx-react';
 import Stores from 'src/stores/storeIdentifier';
 import UserStore from 'src/stores/userStore';
 import { L } from 'src/lib/abpUtility';
+import AppComponentBase from 'src/components/AppComponentBase';
 
 export interface IUserProps {
   userStore: UserStore;
 }
 
+export interface IUserState {
+  modalVisible: boolean;
+  maxResultCount: number;
+  skipCount: number;
+  userId: number;
+  filter: string;
+}
+
 const confirm = Modal.confirm;
+const Search = Input.Search;
 
 @inject(Stores.UserStore)
 @observer
-class User extends React.Component<IUserProps> {
+class User extends AppComponentBase<IUserProps, IUserState> {
   formRef: any;
 
-  constructor(props: any) {
-    super(props);
-  }
-
   state = {
     modalVisible: false,
     maxResultCount: 10,
     skipCount: 0,
     userId: 0,
+    filter: '',
   };
 
   async componentDidMount() {
     await this.getAll();
   }
 
   async getAll() {
-    await this.props.userStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount });
+    await this.props.userStore.getAll({ maxResultCount: this.state.maxResultCount, skipCount: this.state.skipCount, keyword: this.state.filter });
   }
 
   handleTableChange = (pagination: any) => {
@@ -99,6 +106,10 @@ class User extends React.Component<IUserProps> {
     this.formRef = formRef;
   };
 
+  handleSearch = (value: string) => {
+    this.setState({ filter: value }, async () => await this.getAll());
+  };
+
   public render() {
     const { users } = this.props.userStore;
     const columns = [
@@ -165,6 +176,11 @@ class User extends React.Component<IUserProps> {
             <Button type="primary" shape="circle" icon="plus" onClick={() => this.createOrUpdateModalOpen({ id: 0 })} />
           </Col>
         </Row>
+        <Row>
+          <Col sm={{ span: 10, offset: 0 }}>
+            <Search placeholder={this.L('Filter')} onSearch={this.handleSearch} />
+          </Col>
+        </Row>
         <Row style={{ marginTop: 20 }}>
           <Col
             xs={{ span: 24, offset: 0 }}

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

@@ -0,0 +1,3 @@
+export interface PagedRoleResultRequestDto extends PagedFilterAndSortedRequest  {
+    keyword: string
+}

reactjs/src/services/role/roleService.ts

@@ -8,6 +8,7 @@ import http from '../httpService';
 import { GetAllRoleOutput } from './dto/getAllRoleOutput';
 import { PagedResultDto } from '../dto/pagedResultDto';
 import { GetRoleForEditOutput } from './dto/getRoleForEditOutput';
+import { PagedRoleResultRequestDto } from './dto/PagedRoleResultRequestDto';
 
 class RoleService {
   public async create(createRoleInput: CreateRoleInput): Promise<PagedResultDto<CreateRoleOutput>> {
@@ -45,7 +46,7 @@ class RoleService {
     return result.data;
   }
 
-  public async getAll(pagedFilterAndSortedRequest: PagedFilterAndSortedRequest): Promise<PagedResultDto<GetAllRoleOutput>> {
+  public async getAll(pagedFilterAndSortedRequest: PagedRoleResultRequestDto): Promise<PagedResultDto<GetAllRoleOutput>> {
     let result = await http.get('api/services/app/Role/GetAll', { params: pagedFilterAndSortedRequest });
     return result.data.result;
   }

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

@@ -0,0 +1,3 @@
+export interface PagedTenantResultRequestDto extends PagedFilterAndSortedRequest  {
+    keyword: string
+}

reactjs/src/services/tenant/tenantService.ts

@@ -7,6 +7,7 @@ import { PagedResultDto } from 'src/services/dto/pagedResultDto';
 import http from '../httpService';
 import UpdateTenantInput from './dto/updateTenantInput';
 import CreateTenantOutput from './dto/createTenantOutput';
+import {PagedTenantResultRequestDto} from './dto/PagedTenantResultRequestDto';
 
 class TenantService {
   public async create(createTenantInput: CreateTenantInput): Promise<CreateTenantOutput> {
@@ -24,7 +25,7 @@ class TenantService {
     return result.data.result;
   }
 
-  public async getAll(pagedFilterAndSortedRequest: PagedFilterAndSortedRequest): Promise<PagedResultDto<GetAllTenantOutput>> {
+  public async getAll(pagedFilterAndSortedRequest: PagedTenantResultRequestDto): Promise<PagedResultDto<GetAllTenantOutput>> {
     let result = await http.get('api/services/app/Tenant/GetAll', { params: pagedFilterAndSortedRequest });
     return result.data.result;
   }

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

@@ -0,0 +1,3 @@
+export interface PagedUserResultRequestDto extends PagedFilterAndSortedRequest  {
+    keyword: string
+}

reactjs/src/services/user/userService.ts

@@ -5,6 +5,7 @@ import http from '../httpService';
 import { GetAllUserOutput } from './dto/getAllUserOutput';
 import { PagedResultDto } from 'src/services/dto/pagedResultDto';
 import { CreateOrUpdateUserInput } from './dto/createOrUpdateUserInput';
+import { PagedUserResultRequestDto } from "./dto/PagedUserResultRequestDto";
 
 class UserService {
   public async create(createUserInput: CreateOrUpdateUserInput) {
@@ -37,7 +38,7 @@ class UserService {
     return result.data.result;
   }
 
-  public async getAll(pagedFilterAndSortedRequest: PagedFilterAndSortedRequest): Promise<PagedResultDto<GetAllUserOutput>> {
+    public async getAll(pagedFilterAndSortedRequest: PagedUserResultRequestDto): Promise<PagedResultDto<GetAllUserOutput>> {
     let result = await http.get('api/services/app/User/GetAll', { params: pagedFilterAndSortedRequest });
     return result.data.result;
   }

reactjs/src/stores/roleStore.ts

@@ -6,6 +6,7 @@ import { EntityDto } from 'src/services/dto/entityDto';
 import { CreateRoleInput } from 'src/services/role/dto/createRoleInput';
 import { UpdateRoleInput } from 'src/services/role/dto/updateRoleInput';
 import { GetAllPermissionsOutput } from 'src/services/role/dto/getAllPermissionsOutput';
+import { PagedRoleResultRequestDto } from 'src/services/role/dto/PagedRoleResultRequestDto';
 import RoleEditModel from 'src/models/Roles/roleEditModel';
 
 class RoleStore {
@@ -75,7 +76,7 @@ class RoleStore {
   }
 
   @action
-  async getAll(pagedFilterAndSortedRequest: PagedFilterAndSortedRequest) {
+  async getAll(pagedFilterAndSortedRequest: PagedRoleResultRequestDto) {
     let result = await roleService.getAll(pagedFilterAndSortedRequest);
     this.roles = result;
   }