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

feat: Extend Apps page with search and data

Browse Source
This commit is contained in:
Ali BARIN
2021-10-09 00:16:24 +02:00
parent e0ab059744
commit c9079db77a
13 changed files with 198 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/web/public/index.html
View File

@@ -25,6 +25,11 @@
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Automatisch</title> <title>Automatisch</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

19
packages/web/src/components/AppBar/index.tsx
View File

@@ -4,20 +4,16 @@ import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import MenuIcon from '@mui/icons-material/Menu'; import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import HideOnScroll from 'components/HideOnScroll'; import HideOnScroll from 'components/HideOnScroll';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import useFormatMessage from 'hooks/useFormatMessage'; import SearchInput from 'components/SearchInput';
import { Search, SearchIconWrapper, InputBase } from './style';
type AppBarProps = { type AppBarProps = {
onMenuClick: () => void; onMenuClick: () => void;
}; };
export default function AppBar({ onMenuClick }: AppBarProps) { export default function AppBar({ onMenuClick }: AppBarProps) {
const formatMessage = useFormatMessage();
return ( return (
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<HideOnScroll> <HideOnScroll>
@@ -41,19 +37,10 @@ export default function AppBar({ onMenuClick }: AppBarProps) {
component="div" component="div"
sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }} sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
> >
<FormattedMessage id="automatisch" /> <FormattedMessage id="brandText" />
</Typography> </Typography>
<Search> <SearchInput />
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<InputBase
placeholder={formatMessage('searchPlaceholder')}
inputProps={{ 'aria-label': 'search' }}
/>
</Search>
</Toolbar> </Toolbar>
</MuiAppBar> </MuiAppBar>
</HideOnScroll> </HideOnScroll>

62
packages/web/src/components/AppRow/index.tsx
View File

@@ -1,28 +1,64 @@
import { Link } from 'react-router-dom';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
import Box from '@mui/material/Box';
import Avatar from '@mui/material/Avatar';
import CardActionArea from '@mui/material/CardActionArea'; import CardActionArea from '@mui/material/CardActionArea';
import CardContent from '@mui/material/CardContent'; import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import Typography from '@mui/material/Typography';
import useFormatMessage from 'hooks/useFormatMessage';
import { CardContent, Typography, DesktopOnlyBreakline } from './style';
type AppRowProps = { type AppRowProps = {
icon?: React.ReactNode; icon?: React.ReactNode;
name: string; name: string;
connectionNumber?: number; connectionNumber?: number;
flowNumber?: number; flowNumber?: number;
to: string;
} }
export default function AppRow(props: AppRowProps) { const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong><DesktopOnlyBreakline /></>);
const { name } = props;
function AppRow(props: AppRowProps) {
const formatMessage = useFormatMessage();
const { name, to } = props;
return ( return (
<Card sx={{ my: 1 }}> <Link to={to}>
<CardActionArea> <Card sx={{ my: 2 }}>
<CardActionArea>
<CardContent>
<Box>
<Avatar variant="square">
{name[0].toUpperCase()}
</Avatar>
</Box>
<CardContent> <Box>
<Typography gutterBottom variant="h6" component="div"> <Typography variant="h6">
{name} {name}
</Typography> </Typography>
</CardContent> </Box>
</CardActionArea>
</Card> <Box sx={{ px: 2 }}>
<Typography variant="body2">
{formatMessage('app.connections', { count: countTranslation(Math.round(Math.random() * 100)) })}
</Typography>
</Box>
<Box sx={{ px: 2 }}>
<Typography variant="body2">
{formatMessage('app.flows', { count: countTranslation(Math.round(Math.random() * 100)) })}
</Typography>
</Box>
<Box>
<ChevronRightIcon />
</Box>
</CardContent>
</CardActionArea>
</Card>
</Link>
); );
} }
export default AppRow;

26
packages/web/src/components/AppRow/style.ts Normal file
View File

@@ -0,0 +1,26 @@
import { styled } from '@mui/material/styles';
import MuiCardContent from '@mui/material/CardContent';
import MuiTypography from '@mui/material/Typography';
export const CardContent = styled(MuiCardContent)(({ theme }) => ({
display: 'grid',
gridTemplateRows: 'auto',
gridTemplateColumns: 'auto 1fr auto auto auto',
gridColumnGap: theme.spacing(2),
alignItems: 'center',
}));
export const Typography = styled(MuiTypography)(({ theme }) => ({
'&.MuiTypography-h6': {
textTransform: 'capitalize',
},
textAlign: 'center',
display: 'inline-block',
}));
export const DesktopOnlyBreakline = styled('br')(({ theme }) => ({
[theme.breakpoints.down('md')]: {
display: 'none',
}
}));

26
packages/web/src/components/SearchInput/index.tsx Normal file
View File

@@ -0,0 +1,26 @@
import SearchIcon from '@mui/icons-material/Search';
import useFormatMessage from 'hooks/useFormatMessage';
import { Search, SearchIconWrapper, InputBase } from './style';
type SearchInputProps = {
onChange?: (event: React.ChangeEvent) => void;
};
export default function SearchInput({ onChange }: SearchInputProps) {
const formatMessage = useFormatMessage();
return (
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<InputBase
placeholder={formatMessage('searchPlaceholder')}
inputProps={{ 'aria-label': 'search' }}
onChange={onChange}
/>
</Search>
);
}

11
packages/web/src/components/AppBar/style.ts → packages/web/src/components/SearchInput/style.ts
View File

@@ -1,5 +1,5 @@
import { styled, alpha } from '@mui/material/styles'; import { styled, alpha } from '@mui/material/styles';
import MuiInputBase from '@mui/material/InputBase'; import MuiInput from '@mui/material/Input';
export const Search = styled('div')(({ theme }) => ({ export const Search = styled('div')(({ theme }) => ({
position: 'relative', position: 'relative',
@@ -10,6 +10,7 @@ export const Search = styled('div')(({ theme }) => ({
}, },
marginLeft: 0, marginLeft: 0,
width: '100%', width: '100%',
maxWidth: '100%',
[theme.breakpoints.up('sm')]: { [theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1), marginLeft: theme.spacing(1),
width: 'auto', width: 'auto',
@@ -26,14 +27,16 @@ export const SearchIconWrapper = styled('div')(({ theme }) => ({
justifyContent: 'center', justifyContent: 'center',
})); }));
export const InputBase = styled(MuiInputBase)(({ theme }) => ({ export const InputBase = styled(MuiInput)(({ theme }) => ({
color: 'inherit', color: 'inherit',
'& .MuiInputBase-input': { width: '100%',
maxWidth: '100%',
'& .MuiInput-input': {
padding: theme.spacing(1, 1, 1, 0), padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon // vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`, paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'), transition: theme.transitions.create('width'),
width: '100%', width: '200',
[theme.breakpoints.up('sm')]: { [theme.breakpoints.up('sm')]: {
width: '12ch', width: '12ch',
'&:focus': { '&:focus': {

4
packages/web/src/config/urls.ts
View File

@@ -1,4 +1,6 @@
export const DASHBOARD = '/dashboard'; export const DASHBOARD = '/dashboard';
export const APPS = '/apps'; export const APPS = '/apps';
export const FLOWS = '/flows'; export const FLOWS = '/flows';
export const EXPLORE = '/explore'; export const EXPLORE = '/explore';
export const APP_PATH = (appSlug: string) => `/app/${appSlug}`;
export const APP_PATH_PATTERN = '/app/:slug';

7
packages/web/src/graphql/queries/get-apps.ts Normal file
View File

@@ -0,0 +1,7 @@
import { gql } from '@apollo/client';
export const GET_APPS = gql`
query GetApps($name: String) {
getApps(name: $name)
}
`;

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

@@ -5,5 +5,7 @@
"drawer.dashboard": "Dashboard", "drawer.dashboard": "Dashboard",
"drawer.flows": "Flows", "drawer.flows": "Flows",
"drawer.apps": "My Apps", "drawer.apps": "My Apps",
"drawer.explore": "Explore" "drawer.explore": "Explore",
"app.connections": "{count} connections",
"app.flows": "{count} flows"
} }

26
packages/web/src/pages/Application/index.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { useCallback, useState } from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Container from 'components/Container';
import PageTitle from 'components/PageTitle';
import SearchInput from 'components/SearchInput';
export default function Applications() {
return (
<Box sx={{ py: 3 }}>
<Container>
<Grid container sx={{ mb: 3 }}>
<Grid item xs={6}>
<PageTitle>Application!</PageTitle>
</Grid>
<Grid container item xs={6} justifyContent="flex-end">
</Grid>
</Grid>
</Container>
</Box>
);
};

32
packages/web/src/pages/Applications/index.tsx
View File

@@ -1,18 +1,40 @@
import { useCallback, useState } from 'react';
import { useQuery } from '@apollo/client';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Container from 'components/Container'; import Container from 'components/Container';
import PageTitle from 'components/PageTitle'; import PageTitle from 'components/PageTitle';
import AppRow from 'components/AppRow'; import AppRow from 'components/AppRow';
import SearchInput from 'components/SearchInput';
import * as URLS from 'config/urls';
import { GET_APPS } from 'graphql/queries/get-apps';
export default function Applications() { export default function Applications() {
const [appName, setAppName] = useState(null);
const { data } = useQuery(GET_APPS, { variables: {name: appName } });
const onSearchChange = useCallback((event) => {
setAppName(event.target.value);
}, []);
return ( return (
<Box sx={{ py: 3 }}> <Box sx={{ py: 3 }}>
<Container> <Container>
<PageTitle>Applications</PageTitle> <Grid container sx={{ mb: 3 }}>
<Grid item xs={6}>
<PageTitle>Applications</PageTitle>
</Grid>
<AppRow name="Google Calendar" /> <Grid container item xs={6} justifyContent="flex-end">
<AppRow name="Slack" /> <SearchInput onChange={onSearchChange} />
<AppRow name="Twitch" /> </Grid>
<AppRow name="Twitter" /> </Grid>
{data?.getApps?.map((name: string) => (
<AppRow key={name} name={name} to={URLS.APP_PATH(name)} />
))}
</Container> </Container>
</Box> </Box>
); );

5
packages/web/src/routes.tsx
View File

@@ -1,6 +1,7 @@
import { Route, Switch, Redirect } from "react-router"; import { Route, Switch, Redirect } from "react-router";
import Dashboard from 'pages/Dashboard'; import Dashboard from 'pages/Dashboard';
import Applications from 'pages/Applications'; import Applications from 'pages/Applications';
import Application from 'pages/Application';
import Flows from 'pages/Flows'; import Flows from 'pages/Flows';
import Explore from 'pages/Explore'; import Explore from 'pages/Explore';
import * as URLS from 'config/urls'; import * as URLS from 'config/urls';
@@ -23,6 +24,10 @@ export default (
<Explore /> <Explore />
</Route> </Route>
<Route path={URLS.APP_PATH_PATTERN}>
<Application />
</Route>
<Route exact path="/"> <Route exact path="/">
<Redirect to={URLS.DASHBOARD} /> <Redirect to={URLS.DASHBOARD} />
</Route> </Route>

12
packages/web/src/styles/theme.ts
View File

@@ -1,5 +1,15 @@
import { createTheme } from '@mui/material/styles'; import { createTheme } from '@mui/material/styles';
const theme = createTheme(); const theme = createTheme({
components: {
MuiCssBaseline: {
styleOverrides: {
a: {
textDecoration: 'none',
},
},
},
}
});
export default theme; export default theme;