143 lines
3.8 KiB
TypeScript
143 lines
3.8 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Namespaces } from "../../../i18n/i18n";
|
|
import Button, { ButtonType } from "../../../components/common/Button";
|
|
import Column from "../../../components/common/columns";
|
|
import Permission from "../../../components/common/Permission";
|
|
import { Paginated } from "../../../services/Paginated";
|
|
import Loading from "../../../components/common/Loading";
|
|
import workflowTemplatesService, {
|
|
ReadWorkflowTemplate,
|
|
} from "./services/WorkflowTemplateService";
|
|
import WorkflowTemplateManagerTable from "./components/WorkflowTemplateTable";
|
|
|
|
const WotkflowTemplateManager: React.FC = () => {
|
|
const { t } = useTranslation(Namespaces.Common);
|
|
const [loaded, setLoaded] = useState(false);
|
|
const [pagedData, setPagedData] = useState<Paginated<ReadWorkflowTemplate>>({
|
|
page: 1,
|
|
pageSize: 10,
|
|
count: 0,
|
|
totalPages: 1,
|
|
data: [],
|
|
});
|
|
const [sortColumn, setSortColumn] = useState<Column<ReadWorkflowTemplate>>({
|
|
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 data = await workflowTemplatesService.getTemplates(
|
|
page,
|
|
pageSize,
|
|
sortColumn.key,
|
|
sortColumn.order === "asc",
|
|
filters,
|
|
);
|
|
if (data) {
|
|
setLoaded(true);
|
|
setPagedData(data);
|
|
} else {
|
|
setLoaded(false);
|
|
}
|
|
},
|
|
[filters, sortColumn.key, sortColumn.order],
|
|
);
|
|
|
|
const onSort = async (newSortColumn: Column<ReadWorkflowTemplate>) => {
|
|
const { page, pageSize } = pagedData;
|
|
const data = await workflowTemplatesService.getTemplates(
|
|
page,
|
|
pageSize,
|
|
newSortColumn.key,
|
|
newSortColumn.order === "asc",
|
|
filters,
|
|
);
|
|
|
|
if (data) {
|
|
setLoaded(true);
|
|
setPagedData(data);
|
|
setSortColumn(newSortColumn);
|
|
} else {
|
|
setLoaded(false);
|
|
}
|
|
};
|
|
|
|
const onSearch = async (name: string, value: string) => {
|
|
const { page, pageSize } = pagedData;
|
|
const newFilters = new Map(filters);
|
|
newFilters.set(name, value);
|
|
|
|
const data = await workflowTemplatesService.getTemplates(
|
|
page,
|
|
pageSize,
|
|
sortColumn.key,
|
|
sortColumn.order === "asc",
|
|
newFilters,
|
|
);
|
|
if (data) {
|
|
setLoaded(true);
|
|
setFilters(newFilters);
|
|
setPagedData(data);
|
|
} else {
|
|
setLoaded(false);
|
|
}
|
|
};
|
|
|
|
const onDelete = async (item?: ReadWorkflowTemplate) => {
|
|
const response = await workflowTemplatesService.deleteTemplateVersion(
|
|
item?.id,
|
|
item?.guid,
|
|
);
|
|
if (response) {
|
|
await changePage(pagedData.page, pagedData.pageSize);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const loadInitial = async () => {
|
|
const data = await workflowTemplatesService.getTemplates(
|
|
1,
|
|
10,
|
|
"name",
|
|
true,
|
|
filters,
|
|
);
|
|
if (data) {
|
|
setLoaded(true);
|
|
setPagedData(data);
|
|
} else {
|
|
setLoaded(false);
|
|
}
|
|
};
|
|
|
|
void loadInitial();
|
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
return (
|
|
<Loading loaded={loaded}>
|
|
<Permission privilegeKey="AddOrganisation">
|
|
<Button buttonType={ButtonType.primary} to="add">
|
|
{t("Add")}
|
|
</Button>
|
|
</Permission>
|
|
<hr />
|
|
<WorkflowTemplateManagerTable
|
|
data={pagedData}
|
|
sortColumn={sortColumn}
|
|
onChangePage={changePage}
|
|
onSort={onSort}
|
|
onSearch={onSearch}
|
|
onDelete={onDelete}
|
|
/>
|
|
</Loading>
|
|
);
|
|
};
|
|
|
|
export default WotkflowTemplateManager;
|