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

feat: add no result found UI on flows

Browse Source
This commit is contained in:
Ali BARIN
2022-08-12 18:03:52 +02:00
parent 782b2bafaa
commit 77d7260698
2 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/src/locales/en.json
View File

@@ -47,6 +47,7 @@
"flowStep.actionType": "Action", "flowStep.actionType": "Action",
"flows.create": "Create flow", "flows.create": "Create flow",
"flows.title": "Flows", "flows.title": "Flows",
"flows.noFlows": "You don't have any flows yet.",
"flowEditor.goBack": "Go back to flows", "flowEditor.goBack": "Go back to flows",
"executions.title": "Executions", "executions.title": "Executions",
"execution.executedAt": "executed {datetime}", "execution.executedAt": "executed {datetime}",

12
packages/web/src/pages/Flows/index.tsx
View File

@@ -7,11 +7,13 @@ import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid'; import Grid from '@mui/material/Grid';
import AddIcon from '@mui/icons-material/Add'; import AddIcon from '@mui/icons-material/Add';
import CircularProgress from '@mui/material/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress';
import Divider from '@mui/material/Divider';
import Pagination from '@mui/material/Pagination'; import Pagination from '@mui/material/Pagination';
import PaginationItem from '@mui/material/PaginationItem'; import PaginationItem from '@mui/material/PaginationItem';
import type { IFlow } from '@automatisch/types'; import type { IFlow } from '@automatisch/types';
import FlowRow from 'components/FlowRow'; import FlowRow from 'components/FlowRow';
import NoResultFound from 'components/NoResultFound';
import ConditionalIconButton from 'components/ConditionalIconButton'; import ConditionalIconButton from 'components/ConditionalIconButton';
import Container from 'components/Container'; import Container from 'components/Container';
import PageTitle from 'components/PageTitle'; import PageTitle from 'components/PageTitle';
@@ -70,6 +72,7 @@ export default function Flows(): React.ReactElement {
const { pageInfo, edges } = data?.getFlows || {}; const { pageInfo, edges } = data?.getFlows || {};
const flows: IFlow[] = edges?.map(({ node }: { node: IFlow }) => node); const flows: IFlow[] = edges?.map(({ node }: { node: IFlow }) => node);
const hasFlows = flows?.length;
const onSearchChange = React.useCallback((event) => { const onSearchChange = React.useCallback((event) => {
setFlowName(event.target.value); setFlowName(event.target.value);
@@ -89,7 +92,7 @@ export default function Flows(): React.ReactElement {
return ( return (
<Box sx={{ py: 3 }}> <Box sx={{ py: 3 }}>
<Container> <Container>
<Grid container sx={{ mb: [2, 5] }} columnSpacing={1.5} rowSpacing={3}> <Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
<Grid container item xs sm alignItems="center" order={{ xs: 0 }}> <Grid container item xs sm alignItems="center" order={{ xs: 0 }}>
<PageTitle>{formatMessage('flows.title')}</PageTitle> <PageTitle>{formatMessage('flows.title')}</PageTitle>
</Grid> </Grid>
@@ -113,10 +116,17 @@ export default function Flows(): React.ReactElement {
</Grid> </Grid>
</Grid> </Grid>
<Divider sx={{ mt: [2, 0], mb: 2 }} />
{loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />} {loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />}
{!loading && flows?.map((flow) => (<FlowRow key={flow.id} flow={flow} />))} {!loading && flows?.map((flow) => (<FlowRow key={flow.id} flow={flow} />))}
{!loading && !hasFlows && (<NoResultFound
text={formatMessage('flows.noFlows')}
to={URLS.CREATE_FLOW}
/>)}
{!loading && pageInfo && pageInfo.totalPages > 1 && <Pagination {!loading && pageInfo && pageInfo.totalPages > 1 && <Pagination
sx={{ display: 'flex', justifyContent: 'center', mt: 3 }} sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}
page={pageInfo?.currentPage} page={pageInfo?.currentPage}