135 lines
3.7 KiB
TypeScript
135 lines
3.7 KiB
TypeScript
import React, { useCallback, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Namespaces } from "../../../i18n/i18n";
|
|
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";
|
|
|
|
const initialPagedData: Paginated<GetDomain> = {
|
|
page: 1,
|
|
pageSize: 10,
|
|
count: 0,
|
|
totalPages: 1,
|
|
data: [],
|
|
};
|
|
|
|
const Domains: React.FC = () => {
|
|
const { t } = useTranslation(Namespaces.Common);
|
|
const [loaded, setLoaded] = useState(false);
|
|
const [pagedData, setPagedData] =
|
|
useState<Paginated<GetDomain>>(initialPagedData);
|
|
const [sortColumn, setSortColumn] = useState<Column<GetDomain>>({
|
|
key: "name",
|
|
label: t("Name"),
|
|
order: "asc",
|
|
});
|
|
const [filters, setFilters] = useState<Map<string, string>>(
|
|
() => new Map<string, string>(),
|
|
);
|
|
|
|
const changePage = useCallback(
|
|
async (page: number, pageSize: number) => {
|
|
const pagedDataResult = await domainsService.getDomains(
|
|
page,
|
|
pageSize,
|
|
sortColumn.key,
|
|
sortColumn.order === "asc",
|
|
filters,
|
|
);
|
|
if (pagedDataResult) {
|
|
setLoaded(true);
|
|
setPagedData(pagedDataResult);
|
|
} else {
|
|
setLoaded(false);
|
|
}
|
|
},
|
|
[filters, sortColumn.key, sortColumn.order],
|
|
);
|
|
|
|
useEffect(() => {
|
|
const loadInitial = async () => {
|
|
await changePage(initialPagedData.page, initialPagedData.pageSize);
|
|
};
|
|
|
|
void loadInitial();
|
|
}, [changePage]);
|
|
|
|
const onSort = async (nextSortColumn: Column<GetDomain>) => {
|
|
const { page, pageSize } = pagedData;
|
|
const pagedDataResult = await domainsService.getDomains(
|
|
page,
|
|
pageSize,
|
|
nextSortColumn.key,
|
|
nextSortColumn.order === "asc",
|
|
filters,
|
|
);
|
|
if (pagedDataResult) {
|
|
setLoaded(true);
|
|
setPagedData(pagedDataResult);
|
|
setSortColumn(nextSortColumn);
|
|
} else {
|
|
setLoaded(false);
|
|
}
|
|
};
|
|
|
|
const onSearch = async (name: string, value: string) => {
|
|
const { page, pageSize } = pagedData;
|
|
const nextFilters = new Map(filters);
|
|
nextFilters.set(name, value);
|
|
|
|
const pagedDataResult = await domainsService.getDomains(
|
|
page,
|
|
pageSize,
|
|
sortColumn.key,
|
|
sortColumn.order === "asc",
|
|
nextFilters,
|
|
);
|
|
if (pagedDataResult) {
|
|
setLoaded(true);
|
|
setFilters(nextFilters);
|
|
setPagedData(pagedDataResult);
|
|
} else {
|
|
setLoaded(false);
|
|
}
|
|
};
|
|
|
|
const onDelete = async (keyValue?: GetDomain) => {
|
|
const response = await domainsService.deleteDomain(
|
|
keyValue?.id,
|
|
keyValue?.guid,
|
|
);
|
|
if (response) {
|
|
await changePage(pagedData.page, pagedData.pageSize);
|
|
}
|
|
};
|
|
|
|
const translatedSortColumn = { ...sortColumn, label: t("Name") };
|
|
|
|
return (
|
|
<Loading loaded={loaded}>
|
|
<Permission privilegeKey="AddDomain">
|
|
<div>
|
|
<Button buttonType={ButtonType.primary} to="add">
|
|
{t("Add")}
|
|
</Button>
|
|
</div>
|
|
</Permission>
|
|
<hr />
|
|
<DomainsTable
|
|
data={pagedData}
|
|
sortColumn={translatedSortColumn}
|
|
onChangePage={changePage}
|
|
onSort={onSort}
|
|
onSearch={onSearch}
|
|
onDelete={onDelete}
|
|
/>
|
|
</Loading>
|
|
);
|
|
};
|
|
|
|
export default Domains;
|