diff --git a/packages/web/package.json b/packages/web/package.json index d689ef6b..885ff143 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -12,6 +12,7 @@ "@mui/icons-material": "^5.11.9", "@mui/lab": "^5.0.0-alpha.120", "@mui/material": "^5.11.10", + "@mui/x-date-pickers": "^6.5.0", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", diff --git a/packages/web/src/components/ExecutionsFilter/index.tsx b/packages/web/src/components/ExecutionsFilter/index.tsx new file mode 100644 index 00000000..6ea891d7 --- /dev/null +++ b/packages/web/src/components/ExecutionsFilter/index.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import InputAdornment from '@mui/material/InputAdornment'; +import TextField from '@mui/material/TextField'; +import Grid from '@mui/material/Grid'; +import ConditionalIconButton from 'components/ConditionalIconButton'; +import SearchIcon from '@mui/icons-material/Search'; + +export default function ExecutionFilters() { + return ( + + + + + + + + ), + }} + variant="outlined" + /> + + + } + data-test="create-flow-button" + > + Search + + + + + ); +} diff --git a/packages/web/src/pages/Executions/index.tsx b/packages/web/src/pages/Executions/index.tsx index f14999b3..3e280bd9 100644 --- a/packages/web/src/pages/Executions/index.tsx +++ b/packages/web/src/pages/Executions/index.tsx @@ -10,6 +10,7 @@ import PaginationItem from '@mui/material/PaginationItem'; import type { IExecution } from '@automatisch/types'; import NoResultFound from 'components/NoResultFound'; +import ExecutionsFilter from 'components/ExecutionsFilter'; import ExecutionRow from 'components/ExecutionRow'; import Container from 'components/Container'; import PageTitle from 'components/PageTitle'; @@ -60,25 +61,22 @@ export default function Executions(): React.ReactElement { {formatMessage('executions.title')} - - + + {loading && ( )} - {!loading && !hasExecutions && ( )} - {!loading && executions?.map((execution) => ( ))} - {pageInfo && pageInfo.totalPages > 1 && (