98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
import React, { Component } from 'react';
|
|
import Column from '../../../components/common/columns';
|
|
import { Paginated } from '../../../services/Paginated';
|
|
import DomainsTable from './components/domainsTable';
|
|
import domainsService, { GetDomain } from './serrvices/domainsService';
|
|
import Button, { ButtonType } from '../../../components/common/Button';
|
|
import Loading from '../../../components/common/Loading';
|
|
import Permission from '../../../components/common/Permission';
|
|
|
|
interface DomainsState{
|
|
loaded: boolean;
|
|
pagedData : Paginated<GetDomain>,
|
|
sortColumn : Column<GetDomain>,
|
|
filters: Map<string, string>;
|
|
}
|
|
|
|
class Domains extends Component< any, any, DomainsState> {
|
|
state = {
|
|
loaded : false,
|
|
pagedData : { page: 1,
|
|
pageSize : 10,
|
|
count: 0,
|
|
totalPages: 1,
|
|
data: [] },
|
|
sortColumn: { key: "name", label: "Name", order: "asc" },
|
|
filters: new Map<string, string>()
|
|
}
|
|
|
|
componentDidMount = async () => {
|
|
const { page, pageSize } = this.state.pagedData;
|
|
|
|
await this.changePage(page, pageSize);
|
|
}
|
|
|
|
changePage = async(page: number, pageSize : number) =>{
|
|
const { sortColumn, filters } = this.state;
|
|
|
|
const pagedData = await domainsService.getDomains(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
|
|
if (pagedData) {
|
|
this.setState({ loaded: true, pagedData });
|
|
}
|
|
else {
|
|
this.setState({ loaded: false });
|
|
}
|
|
}
|
|
|
|
onSort = async(sortColumn : Column<GetDomain>) => {
|
|
const {page, pageSize } = this.state.pagedData;
|
|
const { filters } = this.state;
|
|
const pagedData = await domainsService.getDomains(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
|
|
if (pagedData) {
|
|
this.setState({ loaded: true, pagedData, sortColumn });
|
|
}
|
|
else {
|
|
this.setState({ loaded: false });
|
|
}
|
|
}
|
|
|
|
onSearch = async ( name: string, value: string) => {
|
|
const {page, pageSize } = this.state.pagedData;
|
|
const {sortColumn, filters } = this.state;
|
|
filters.set(name, value);
|
|
|
|
const pagedData = await domainsService.getDomains(page, pageSize, sortColumn.key, sortColumn.order === "asc", filters);
|
|
if (pagedData) {
|
|
this.setState({ loaded: true, filters, pagedData });
|
|
}
|
|
else {
|
|
this.setState({ loaded: false });
|
|
}
|
|
};
|
|
|
|
onDelete = async ( keyValue? : GetDomain) => {
|
|
const response = await domainsService.deleteDomain( keyValue?.id, keyValue?.guid);
|
|
if (response) {
|
|
this.componentDidMount();
|
|
}
|
|
}
|
|
|
|
render(): JSX.Element {
|
|
const { loaded, pagedData, sortColumn } = this.state;
|
|
|
|
return (
|
|
<Loading loaded={loaded}>
|
|
<Permission privilegeKey="AddDomain">
|
|
<div>
|
|
<Button buttonType={ButtonType.primary} to="add">Add</Button>
|
|
</div>
|
|
</Permission>
|
|
<hr/>
|
|
<DomainsTable data={pagedData} sortColumn={sortColumn} onChangePage={this.changePage} onSort={this.onSort} onSearch={this.onSearch} onDelete={this.onDelete}/>
|
|
</Loading>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default Domains;
|