@evenicanpm/admin-integrate 1.1.0 → 1.2.2

package/src/pages/executions/executions-list/executions-list-table.tsx

@@ -8,7 +8,6 @@ import { Item } from "./executions-list";
 import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 
 // MUI
-import { Theme, useTheme } from "@mui/material";
 import { TableContainer, Table, TableBody } from "@mui/material";
 import { SxProps } from "@mui/material";
 
@@ -19,60 +18,53 @@ import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
 import ExecutionsListRow from "./executions-list-row";
 
 interface Props {
-  heading: Head[];
-  items: Item[];
-  input: ProcessExecutionInput;
-  setInput: (newInput: ProcessExecutionInput) => void;
-  rowSx?: SxProps;
+	heading: Head[];
+	items: Item[];
+	input: ProcessExecutionInput;
+	setInput: (newInput: ProcessExecutionInput) => void;
+	rowSx?: SxProps;
 }
 
 export default function ExecutionsListTable(props: Props) {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const handleRequestSort = (property: string) => {
+		const current = props.input.sort;
+		if (property === current) {
+			props.setInput({
+				...props.input,
+				sortDesc: !props.input.sortDesc,
+			});
+		} else {
+			props.setInput({
+				...props.input,
+				sort: property,
+				sortDesc: false,
+			});
+		}
+	};
 
-  const handleRequestSort = (property: string) => {
-    const current = props.input.sort;
-    if (property === current) {
-      props.setInput({
-        ...props.input,
-        sortDesc: !props.input.sortDesc,
-      });
-    } else {
-      props.setInput({
-        ...props.input,
-        sort: property,
-        sortDesc: false,
-      });
-    }
-  };
-
-  return (
-    <>
-      <TableContainer>
-        <Table>
-          <TableHeader
-            heading={props.heading}
-            orderBy={props.input.sort}
-            order={props.input.sortDesc ? "desc" : "asc"}
-            onRequestSort={handleRequestSort}
-            rowSx={props.rowSx}
-          />
-          <TableBody>
-            {props.items.map((item, index) => (
-              <ExecutionsListRow
-                key={index}
-                item={item}
-                heading={props.heading}
-                sx={props.rowSx}
-              />
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </>
-  );
+	return (
+		<>
+			<TableContainer>
+				<Table>
+					<TableHeader
+						heading={props.heading}
+						orderBy={props.input.sort || ""}
+						order={props.input.sortDesc ? "desc" : "asc"}
+						onRequestSort={handleRequestSort}
+						rowSx={props.rowSx}
+					/>
+					<TableBody>
+						{props.items.map((item, index) => (
+							<ExecutionsListRow
+								key={index}
+								item={item}
+								heading={props.heading}
+								sx={props.rowSx}
+							/>
+						))}
+					</TableBody>
+				</Table>
+			</TableContainer>
+		</>
+	);
 }
-
-const getStyles = (theme: Theme) => {
-  return {};
-};

package/src/pages/executions/executions-list/executions-list.tsx

@@ -7,20 +7,13 @@ import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequ
 
 // MUI
 import { Theme, useTheme } from "@mui/material";
-import {
-  Card,
-  Box,
-  Stack,
-  Typography,
-  Grid2 as Grid,
-  Skeleton,
-} from "@mui/material";
+import { Card, Box, Stack, Typography, Grid2 as Grid } from "@mui/material";
 
 // Custom components
 import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
 import {
-  TablePagination,
-  TableSkeleton,
+	TablePagination,
+	TableSkeleton,
 } from "@evenicanpm/admin-integrate/components/data-table";
 import { ListFilter } from "@evenicanpm/admin-integrate/components/list-filter";
 
@@ -31,235 +24,249 @@ import ExecutionsListTable from "./executions-list-table";
 import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 import { ListFilterOutput } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
 import {
-  ExecutionsListFilters,
-  executionListFilters,
+	ExecutionsListFilters,
+	executionListFilters,
 } from "@evenicanpm/admin-integrate/components/execution/execution-filter";
 
 // Returned from processExecutions query
 export interface Item {
-  id: string;
-  name: string;
-  startDate: string;
-  executionStatus: {
-    id: string;
-  };
-  process: {
-    id: string;
-  };
+	id: string;
+	name: string;
+	startDate: string;
+	executionStatus: {
+		id: string;
+	};
+	process: {
+		id: string;
+	};
 }
 
 // Row height in terms of multiples of theme.spacing(1) (e.g. theme.spacing(7.5 & rows per page))
 const rowHeight = 7.5;
 
 interface Props {
-  heading: Head[];
-  data: GetProcessExecutionsQuery;
-  loading: boolean;
-  input: ProcessExecutionInput;
-  setInput: (newInput: ProcessExecutionInput) => void;
+	heading: Head[];
+	data: GetProcessExecutionsQuery;
+	loading: boolean;
+	input: ProcessExecutionInput;
+	setInput: (newInput: ProcessExecutionInput) => void;
 }
 
 const ExecutionsList: React.FC<Props> = (props: Props) => {
-  const t = useTranslations("Integrate.Executions");
+	const t = useTranslations("Integrate.Executions");
 
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  const [items, setItems] = useState<Item[]>([]);
-  const [fetched, setFetched] = useState<boolean>(false); // prevents "empty list" msg from showing for split second
-  const [page, setPage] = useState(props.input.skip / props.input.top + 1);
-  const [perPage, setPerPage] = useState(props.input.top);
+	const [items, setItems] = useState<Item[]>([]);
+	const [fetched, setFetched] = useState<boolean>(false); // prevents "empty list" msg from showing for split second
+	// in practice skip and top are never undefined. this is to satisfy linting.
+	const [page, setPage] = useState(
+		(props.input.skip || 0) / (props.input.top || 10) + 1,
+	);
+	const [perPage, setPerPage] = useState<number>(props.input.top || 10);
 
-  const handleChangePage = (
-    event: React.ChangeEvent<unknown>,
-    value: number,
-  ) => {
-    if (page !== value) {
-      setPage(value);
-      props.setInput({
-        ...props.input,
-        skip: props.input.top * (value - 1),
-      });
-      setFetched(false);
-    }
-  };
+	const handleChangePage = (
+		event: React.ChangeEvent<unknown>,
+		value: number,
+	) => {
+		if (page !== value && event) {
+			setPage(value);
+			props.setInput({
+				...props.input,
+				skip: (props.input.top || 10) * (value - 1),
+			});
+			setFetched(false);
+		}
+	};
 
-  const handleSetFilters = (
-    filterUpdate: ListFilterOutput<ExecutionsListFilters>,
-  ) => {
-    const { itemsPerPage, search, filters } = filterUpdate;
-    props.setInput({
-      ...props.input,
-      top: itemsPerPage,
-      skip: 0,
-      search: search,
-      dateRange: {
-        startDate: filters.dateRange?.start,
-        endDate: filters.dateRange?.end,
-      },
-      executionStatusIds: filters.multiSelectFilter?.map(
-        (obj) => obj.id as number,
-      ),
-    });
-    setFetched(false);
-    setPerPage(itemsPerPage);
-    setPage(1);
-  };
+	const handleSetFilters = (
+		filterUpdate: ListFilterOutput<ExecutionsListFilters>,
+	) => {
+		const { itemsPerPage, search, filters } = filterUpdate;
+		props.setInput({
+			...props.input,
+			top: itemsPerPage,
+			skip: 0,
+			search: search,
+			dateRange: {
+				startDate: filters.dateRange?.start,
+				endDate: filters.dateRange?.end,
+			},
+			executionStatusIds: filters.multiSelectFilter?.map(
+				(obj) => obj.id as number,
+			),
+		});
+		setFetched(false);
+		setPerPage(itemsPerPage as number);
+		setPage(1);
+	};
 
-  const handleClearFilters = () => {
-    props.setInput({
-      ...props.input,
-      skip: 0,
-      dateRange: null,
-      executionStatusIds: null,
-    });
-    setFetched(false);
-  };
+	const handleClearFilters = () => {
+		props.setInput({
+			...props.input,
+			skip: 0,
+			dateRange: null,
+			executionStatusIds: null,
+		});
+		setFetched(false);
+	};
 
-  useEffect(() => {
-    if (props.data) {
-      setItems(props.data.processExecutions.nodes as Item[]);
-      setFetched(true);
-    }
-  }, [props.data]);
+	useEffect(() => {
+		if (props.data?.processExecutions?.nodes) {
+			setItems(props.data.processExecutions.nodes as Item[]);
+			setFetched(true);
+		}
+	}, [props.data]);
 
-  return (
-    <>
-      <Box sx={styles.list}>
-        <ListFilter<ExecutionsListFilters>
-          setFilters={handleSetFilters}
-          clearFilters={handleClearFilters}
-          filters={executionListFilters}
-          config={{
-            pagination: {
-              pageDefault: 10,
-              pageOptions: [10, 20, 50],
-            },
-          }}
-        />
-      </Box>
+	return (
+		<>
+			<Box sx={styles.list}>
+				<ListFilter<ExecutionsListFilters>
+					setFilters={handleSetFilters}
+					clearFilters={handleClearFilters}
+					filters={executionListFilters}
+					config={{
+						pagination: {
+							pageDefault: 10,
+							pageOptions: [10, 20, 50],
+						},
+					}}
+				/>
+			</Box>
 
-      {props.loading && !props.data && (
-        <Card>
-          <TableSkeleton
-            heading={props.heading}
-            perPage={perPage}
-            rowSx={styles.rowSx}
-          />
-        </Card>
-      )}
+			{props.loading && !props.data && (
+				<Card>
+					<TableSkeleton
+						heading={props.heading}
+						perPage={perPage}
+						rowSx={styles.rowSx}
+					/>
+				</Card>
+			)}
 
-      {!props.loading && props.data && fetched && items.length > 0 ? (
-        <Box
-          sx={{
-            minHeight:
-              props.data.processExecutions.pageInfo.resultsReturned < perPage &&
-              page === 1
-                ? theme.spacing(
-                    rowHeight *
-                      (props.data.processExecutions.pageInfo.resultsReturned +
-                        1),
-                  )
-                : theme.spacing(rowHeight * (perPage + 1)),
-          }}
-        >
-          <Card>
-            <ExecutionsListTable
-              heading={props.heading}
-              items={items}
-              input={props.input}
-              setInput={props.setInput}
-              rowSx={styles.rowSx}
-            />
-          </Card>
-        </Box>
-      ) : null}
+			{!props.loading &&
+			props.data?.processExecutions &&
+			fetched &&
+			items.length > 0 ? (
+				<Box
+					sx={{
+						minHeight:
+							props.data.processExecutions.pageInfo.resultsReturned < perPage &&
+							page === 1
+								? theme.spacing(
+										rowHeight *
+											(props.data.processExecutions.pageInfo.resultsReturned +
+												1),
+									)
+								: theme.spacing(rowHeight * (perPage + 1)),
+					}}
+				>
+					<Card>
+						<ExecutionsListTable
+							heading={props.heading}
+							items={items}
+							input={props.input}
+							setInput={props.setInput}
+							rowSx={styles.rowSx}
+						/>
+					</Card>
+				</Box>
+			) : null}
 
-      {!props.loading && fetched && items.length === 0 ? (
-        <Card>
-          <FlexBox
-            justifyContent="center"
-            alignItems="center"
-            sx={{
-              minHeight: "335px",
-              marginBottom: theme.spacing(2),
-            }}
-          >
-            <Stack spacing={1} justifyContent="center" alignItems="center">
-              <Typography variant="h6" color="info">
-                {t("ListEmpty.title")}
-              </Typography>
-              <Typography variant="body1">{t("ListEmpty.body")}</Typography>
-            </Stack>
-          </FlexBox>
-        </Card>
-      ) : null}
+			{!props.loading && fetched && items.length === 0 ? (
+				<Card>
+					<FlexBox
+						justifyContent="center"
+						alignItems="center"
+						sx={{
+							minHeight: "335px",
+							marginBottom: theme.spacing(2),
+						}}
+					>
+						<Stack spacing={1} justifyContent="center" alignItems="center">
+							<Typography variant="h6" color="info">
+								{t("ListEmpty.title")}
+							</Typography>
+							<Typography variant="body1">{t("ListEmpty.body")}</Typography>
+						</Stack>
+					</FlexBox>
+				</Card>
+			) : null}
 
-      {!props.loading && props.data && fetched && items.length > 0 ? (
-        <Grid container spacing={1} sx={styles.pagination}>
-          <Grid size={{ xs: 10.5 }}>
-            <FlexBox
-              justifyContent="center"
-              alignItems="center"
-              sx={styles.paginationBox}
-            >
-              <TablePagination
-                page={page}
-                onChange={handleChangePage}
-                count={Math.ceil(
-                  props.data.processExecutions.recordCount / props.input.top,
-                )}
-              />
-            </FlexBox>
-          </Grid>
-          <Grid size={{ xs: 1.5 }}>
-            <FlexBox
-              justifyContent="flex-end"
-              alignItems="center"
-              sx={{ height: "100%" }}
-            >
-              <Typography color="grey">
-                {`${props.data.processExecutions.pageInfo.resultsReturned}  ${t("Pagination.of")} ${props.data.processExecutions.recordCount} ${t("Pagination.items")}`}
-              </Typography>
-            </FlexBox>
-          </Grid>
-        </Grid>
-      ) : null}
-    </>
-  );
+			{!props.loading &&
+			props.data?.processExecutions &&
+			fetched &&
+			items.length > 0 ? (
+				<Grid container spacing={1} sx={styles.pagination}>
+					<Grid size={{ xs: 10.5 }}>
+						<FlexBox
+							justifyContent="center"
+							alignItems="center"
+							sx={styles.paginationBox}
+						>
+							<TablePagination
+								page={page}
+								onChange={handleChangePage}
+								count={Math.ceil(
+									(props.data.processExecutions.recordCount || 10) /
+										(props.input.top || 10),
+								)}
+							/>
+						</FlexBox>
+					</Grid>
+					<Grid size={{ xs: 1.5 }}>
+						<FlexBox
+							justifyContent="flex-end"
+							alignItems="center"
+							sx={{ height: "100%" }}
+						>
+							<Typography color="grey">
+								{`${props.data.processExecutions.pageInfo.resultsReturned}  ${t(
+									"Pagination.of",
+								)} ${props.data.processExecutions.recordCount} ${t(
+									"Pagination.items",
+								)}`}
+							</Typography>
+						</FlexBox>
+					</Grid>
+				</Grid>
+			) : null}
+		</>
+	);
 };
 
 const getStyles = (theme: Theme) => {
-  return {
-    title: {
-      display: "flex",
-      alignItems: "center",
-      height: "100%",
-    },
-    typography: {
-      fontWeight: "medium",
-    },
-    button: {
-      borderWidth: 2,
-      borderRadius: 1,
-      marginRight: theme.spacing(1),
-    },
-    iconButton: {
-      borderRadius: 1,
-    },
-    pagination: {
-      marginTop: theme.spacing(2),
-    },
-    list: {
-      margin: theme.spacing(2, 0),
-    },
-    paginationBox: {
-      paddingLeft: theme.spacing(15),
-    },
-    rowSx: {
-      height: theme.spacing(rowHeight),
-    },
-  };
+	return {
+		title: {
+			display: "flex",
+			alignItems: "center",
+			height: "100%",
+		},
+		typography: {
+			fontWeight: "medium",
+		},
+		button: {
+			borderWidth: 2,
+			borderRadius: 1,
+			marginRight: theme.spacing(1),
+		},
+		iconButton: {
+			borderRadius: 1,
+		},
+		pagination: {
+			marginTop: theme.spacing(2),
+		},
+		list: {
+			margin: theme.spacing(2, 0),
+		},
+		paginationBox: {
+			paddingLeft: theme.spacing(15),
+		},
+		rowSx: {
+			height: theme.spacing(rowHeight),
+		},
+	};
 };
 
 export default ExecutionsList;