@evenicanpm/admin-integrate 1.1.0

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

@@ -0,0 +1,265 @@
+import React, { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+
+// API
+import { GetProcessExecutionsQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import {
+  Card,
+  Box,
+  Stack,
+  Typography,
+  Grid2 as Grid,
+  Skeleton,
+} from "@mui/material";
+
+// Custom components
+import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
+import {
+  TablePagination,
+  TableSkeleton,
+} from "@evenicanpm/admin-integrate/components/data-table";
+import { ListFilter } from "@evenicanpm/admin-integrate/components/list-filter";
+
+// Local components
+import ExecutionsListTable from "./executions-list-table";
+
+// Types
+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,
+} 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;
+  };
+}
+
+// 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;
+}
+
+const ExecutionsList: React.FC<Props> = (props: Props) => {
+  const t = useTranslations("Integrate.Executions");
+
+  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 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 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 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]);
+
+  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 && 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 && 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}
+    </>
+  );
+};
+
+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),
+    },
+  };
+};
+
+export default ExecutionsList;

package/src/pages/executions/executions-list/index.ts

@@ -0,0 +1 @@
+export { default } from "./executions-list";

package/src/pages/executions/executions.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import { useTranslations } from "next-intl";
+
+// API
+import { getProcessExecutions } from "@evenicanpm/admin-integrate/api/dashboard/queries";
+import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Box } from "@mui/material";
+
+// Custom components
+import {
+  IntegrateBreadcrumbs,
+  Crumb,
+} from "@evenicanpm/admin-integrate/components/breadcrumbs";
+
+// Local components
+import ExecutionsList from "./executions-list";
+
+// Types
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+
+export default function Executions() {
+  const t = useTranslations("Integrate");
+  const l = useTranslations("Integrate.Executions.ListHeader");
+
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const breadcrumbs: Crumb[] = [
+    {
+      name: t("Header.dashboard"),
+      url: "/e4integrate",
+    },
+    {
+      name: t("Header.executions"),
+    },
+  ];
+
+  const heading: Head[] = [
+    {
+      id: "name",
+      label: l("executionName"),
+      align: "left",
+      width: "30%",
+      sortable: true,
+    },
+    {
+      id: "executionStatus",
+      label: l("status"),
+      align: "center",
+      width: "50%",
+    },
+    {
+      id: "startDate",
+      label: l("time"),
+      align: "center",
+      width: "15%",
+      sortable: true,
+    },
+    {
+      id: "view",
+      label: l("actions"),
+      align: "center",
+      width: "5%",
+    },
+  ];
+
+  // TODO: initialize input based on url query params
+  const [input, setInput] = useState<ProcessExecutionInput>({
+    sort: "startDate",
+    sortDesc: true,
+    top: 10,
+    skip: 0,
+  });
+
+  const { data, isLoading } = getProcessExecutions.useData({
+    input: input,
+  });
+
+  return (
+    <Box>
+      <IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+      <ExecutionsList
+        heading={heading}
+        data={data}
+        loading={isLoading}
+        input={input}
+        setInput={setInput}
+      />
+    </Box>
+  );
+}
+
+const getStyles = (theme: Theme) => {
+  return {};
+};

package/src/pages/executions/index.ts

@@ -0,0 +1 @@
+export { default } from "./executions";

package/src/pages/integrations/index.ts

@@ -0,0 +1 @@
+export { default } from "./integrations";

package/src/pages/integrations/integrations.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useTranslations } from "next-intl";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Box } from "@mui/material";
+
+// Custom components
+import {
+  IntegrateBreadcrumbs,
+  Crumb,
+} from "@evenicanpm/admin-integrate/components/breadcrumbs";
+
+export default function Integrations() {
+  const t = useTranslations("Integrate");
+
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const breadcrumbs: Crumb[] = [
+    {
+      name: t("Header.dashboard"),
+      url: "/e4integrate",
+    },
+    {
+      name: t("Header.integrations"),
+    },
+  ];
+
+  return (
+    <Box>
+      <IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+    </Box>
+  );
+}
+
+const getStyles = (theme: Theme) => {
+  return {};
+};

package/src/pages/scheduler/index.ts

@@ -0,0 +1 @@
+export { default } from "./scheduler";

package/src/pages/scheduler/scheduler.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useTranslations } from "next-intl";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Box } from "@mui/material";
+
+// Custom components
+import {
+  IntegrateBreadcrumbs,
+  Crumb,
+} from "@evenicanpm/admin-integrate/components/breadcrumbs";
+
+export default function Scheduler() {
+  const t = useTranslations("Integrate");
+
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const breadcrumbs: Crumb[] = [
+    {
+      name: t("Header.dashboard"),
+      url: "/e4integrate",
+    },
+    {
+      name: t("Header.scheduler"),
+    },
+  ];
+
+  return (
+    <Box>
+      <IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+    </Box>
+  );
+}
+
+const getStyles = (theme: Theme) => {
+  return {};
+};

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "outDir": "./dist",
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/lib/*": ["src/lib/*"],
+      "@/auth/*": ["src/auth/*"],
+      "@/api/*": ["src/api/*"],
+      "@/components/*": ["src/components/*"],
+      "@evenicanpm/admin-core/*": [
+        "./node_modules/@evenicanpm/admin-core/src/*"
+      ],
+      "@evenicanpm/admin-integrate/*": [
+        "./node_modules/@evenicanpm/admin-integrate/src/*"
+      ]
+    }
+  }
+}