groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add header with id, name, date in Execution

Browse Source
This commit is contained in:
Ali BARIN
2022-08-10 20:59:29 +02:00
parent 5d7daa8886
commit a5b6e66e22
4 changed files with 89 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/web/src/pages/Execution/index.tsx
View File

@@ -4,15 +4,17 @@ import { useQuery } from '@apollo/client';
import Grid from '@mui/material/Grid';
import type { IExecutionStep } from '@automatisch/types';
import ExecutionHeader from 'components/ExecutionHeader';
import ExecutionStep from 'components/ExecutionStep';
import Container from 'components/Container';
import { GET_EXECUTION } from 'graphql/queries/get-execution';
import { GET_EXECUTION_STEPS } from 'graphql/queries/get-execution-steps';
type ExecutionParams = {
executionId: string;
};
const EXECUTION_PER_PAGE = 5;
const EXECUTION_PER_PAGE = 100;
const getLimitAndOffset = (page: number) => ({
limit: EXECUTION_PER_PAGE,
@@ -21,25 +23,19 @@ const getLimitAndOffset = (page: number) => ({
export default function Execution(): React.ReactElement {
const { executionId } = useParams() as ExecutionParams;
const { data, fetchMore } = useQuery(GET_EXECUTION_STEPS, { variables: { executionId, ...getLimitAndOffset(1) } });
const { data: execution } = useQuery(GET_EXECUTION, { variables: { executionId } });
const { data } = useQuery(GET_EXECUTION_STEPS, { variables: { executionId, ...getLimitAndOffset(1) } });
const { edges, pageInfo } = data?.getExecutionSteps || {};
const { edges } = data?.getExecutionSteps || {};
const executionSteps: IExecutionStep[] = edges?.map((edge: { node: IExecutionStep }) => edge.node);
React.useEffect(() => {
if (pageInfo?.currentPage < pageInfo?.totalPages) {
fetchMore({
variables: {
executionId,
...getLimitAndOffset(pageInfo.currentPage + 1),
}
});
}
}, [executionId, fetchMore, pageInfo]);
return (
<Container sx={{ py: 3 }}>
<Grid container item sx={{ mb: [2, 5] }} rowGap={3}>
<ExecutionHeader
execution={execution?.getExecution}
/>
<Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
{executionSteps?.map((executionStep) => (
<ExecutionStep key={executionStep.id} executionStep={executionStep} step={executionStep.step} />
))}