vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-25 23:54:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Extract components

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-02-07 08:38:50 -08:00
parent b67e88f3dc
commit 4b1c92757f
5 changed files with 203 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
packages/webapp/src/components/help-menu/index.tsx Normal file
View File

@ -0,0 +1,79 @@
import { IconButton, Link, ListItemIcon, Menu, MenuItem } from "@material-ui/core";
import { Help, PolicyOutlined, EmailOutlined, FeedbackOutlined, EmojiPeopleOutlined } from "@material-ui/icons";
import React from "react";
import { FormattedMessage } from "react-intl";
const HelpMenu = () => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<span>
<IconButton
aria-haspopup="true"
onClick={handleMenu}>
<Help />
</IconButton>
<Menu id="appbar-profile"
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="https://www.wisemapping.com/termsofuse.html" target="help">
<ListItemIcon>
<PolicyOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" />
</Link>
</MenuItem>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="mailto:team@wisemapping.com">
<ListItemIcon>
<EmailOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="footer.contactus" defaultMessage="Contact Us" />
</Link>
</MenuItem>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="mailto:feedback@wisemapping.com">
<ListItemIcon>
<FeedbackOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="footer.feedback" defaultMessage="Feedback" />
</Link>
</MenuItem>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="https://www.wisemapping.com/aboutus.html" target="help">
<ListItemIcon>
<EmojiPeopleOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="footer.aboutus" defaultMessage="About Us" />
</Link>
</MenuItem>
</Menu>
</span>);
}
export default HelpMenu;

61
packages/webapp/src/components/maps-page/account-menu/index.tsx Normal file
View File

@ -0,0 +1,61 @@
import { Button, Link, ListItemIcon, Menu, MenuItem, Tooltip } from "@material-ui/core";
import { AccountCircle, ExitToAppOutlined, SettingsApplicationsOutlined } from "@material-ui/icons";
import React from "react";
import { FormattedMessage } from "react-intl";
const AccountMenu = () => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<span>
<Tooltip title="Paulo Veiga <pveiga@gmail.com>">
<Button
aria-haspopup="true"
onClick={handleMenu}>
<AccountCircle fontSize="large" />
Paulo Veiga
</Button >
</Tooltip>
<Menu id="appbar-profile"
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
<MenuItem onClick={handleClose}>
<ListItemIcon>
<SettingsApplicationsOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="menu.account" defaultMessage="Account" />
</MenuItem>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="/c/logout">
<ListItemIcon>
<ExitToAppOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="menu.signout" defaultMessage="Sign Out" />
</Link>
</MenuItem>
</Menu>
</span>);
}
export default AccountMenu;

6
packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { useIntl } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
import { useMutation } from 'react-query'; import { useMutation } from 'react-query';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { Button, FormControl } from '@material-ui/core'; import { Button, FormControl } from '@material-ui/core';
@ -79,8 +79,8 @@ const ImportDialog = (props: CreateProps) => {
style={{display: 'none'}} style={{display: 'none'}}
/> />
<label htmlFor="contained-button-file"> <label htmlFor="contained-button-file">
<Button variant="contained" color="primary" component="span"> <Button variant="outlined" color="primary" component="span" style={{margin: '10px 5px', width: '100%'}}>
Upload <FormattedMessage id="maps.choose-file" defaultMessage="Choose a file"/>
</Button> </Button>
</label> </label>
</FormControl> </FormControl>

47
packages/webapp/src/components/maps-page/client-health-sentinel/index.tsx Normal file
View File

@ -0,0 +1,47 @@
import { useSelector } from 'react-redux';
import React from "react";
import { activeInstanceStatus, ClientStatus } from '../../../redux/clientSlice';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core';
import { FormattedMessage } from 'react-intl';
import { Alert, AlertTitle } from '@material-ui/lab';
const ClientHealthChecker = () => {
const status: ClientStatus = useSelector(activeInstanceStatus);
const handleOnClose = () => {
window.location.href = '/c/login';
}
return (
<div>
<Dialog
open={status.state != 'healthy'}
onClose={handleOnClose}
maxWidth="sm"
fullWidth={true}>
<DialogTitle>
<FormattedMessage id="expired.title" defaultMessage="Your session has expired" />
</DialogTitle>
<DialogContent>
<Alert severity="error">
<AlertTitle><FormattedMessage id="expired.description" defaultMessage="Your current session has expired. Please, sign in and try again." /></AlertTitle>
</Alert>
</DialogContent>
<DialogActions>
<Button
type="button"
color="primary"
size="medium"
onClick={handleOnClose} >
<FormattedMessage id="action.close-button" defaultMessage="Close" />
</Button>
</DialogActions>
</Dialog>
</div>
)
};
export default ClientHealthChecker;

193
packages/webapp/src/components/maps-page/index.tsx
View File

@ -8,17 +8,19 @@ import IconButton from '@material-ui/core/IconButton';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from '@material-ui/core/ListItemIcon';
import { useStyles } from './style'; import { useStyles } from './style';
import { AccountCircle, AcUnitTwoTone, AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, EmailOutlined, EmojiPeopleOutlined, ExitToAppOutlined, FeedbackOutlined, Help, LabelTwoTone, PeopleAltTwoTone, PersonAddTwoTone, PersonOutlineTwoTone, PersonTwoTone, PolicyOutlined, PublicTwoTone, SettingsApplicationsOutlined, ShareTwoTone, StarTwoTone } from '@material-ui/icons'; import { AcUnitTwoTone, AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, LabelTwoTone, PersonOutlineTwoTone, PublicTwoTone, ShareTwoTone, StarTwoTone } from '@material-ui/icons';
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Link, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Tooltip } from '@material-ui/core'; import { Button, Link, ListItemSecondaryAction, ListItemText, Tooltip } from '@material-ui/core';
import { MapsList } from './maps-list'; import { MapsList } from './maps-list';
import { FormattedMessage, useIntl } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
import { useQuery, useMutation, useQueryClient } from 'react-query'; import { useQuery, useMutation, useQueryClient } from 'react-query';
import { activeInstance, activeInstanceStatus, ClientStatus } from '../../redux/clientSlice'; import { activeInstance } from '../../redux/clientSlice';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import Client, { Label } from '../../client'; import Client, { Label } from '../../client';
import ActionDispatcher from './action-dispatcher'; import ActionDispatcher from './action-dispatcher';
import { ActionType } from './action-chooser'; import { ActionType } from './action-chooser';
import { Alert, AlertTitle } from '@material-ui/lab'; import AccountMenu from './account-menu';
import ClientHealthSentinel from './client-health-sentinel';
import HelpMenu from '../help-menu';
const logoIcon = require('../../images/logo-small.svg'); const logoIcon = require('../../images/logo-small.svg');
const poweredByIcon = require('../../images/pwrdby-white.svg'); const poweredByIcon = require('../../images/pwrdby-white.svg');
@ -105,7 +107,7 @@ const MapsPage = () => {
return ( return (
<div className={classes.root}> <div className={classes.root}>
<HandleClientStatus /> <ClientHealthSentinel />
<AppBar <AppBar
position="fixed" position="fixed"
className={clsx(classes.appBar, { className={clsx(classes.appBar, {
@ -115,7 +117,7 @@ const MapsPage = () => {
elevation={0}> elevation={0}>
<Toolbar> <Toolbar>
<Tooltip title={intl.formatMessage({id:'maps.create-tooltip',defaultMessage:'Create a New Map'})}> <Tooltip title={intl.formatMessage({ id: 'maps.create-tooltip', defaultMessage: 'Create a New Map' })}>
<Button color="primary" <Button color="primary"
size="medium" size="medium"
variant="contained" variant="contained"
@ -123,12 +125,12 @@ const MapsPage = () => {
disableElevation={true} disableElevation={true}
startIcon={<AddCircleTwoTone />} startIcon={<AddCircleTwoTone />}
className={classes.newMapButton} className={classes.newMapButton}
onClick={e => setActiveDialog('create')}> onClick={() => setActiveDialog('create')}>
<FormattedMessage id="action.new" defaultMessage="New Map" /> <FormattedMessage id="action.new" defaultMessage="New Map" />
</Button> </Button>
</Tooltip> </Tooltip>
<Tooltip title="Import from external tools"> <Tooltip title={intl.formatMessage({ id: 'maps.import-desc', defaultMessage: 'Import from other tools' })}>
<Button <Button
color="primary" color="primary"
size="medium" size="medium"
@ -137,15 +139,15 @@ const MapsPage = () => {
disableElevation={true} disableElevation={true}
startIcon={<CloudUploadTwoTone />} startIcon={<CloudUploadTwoTone />}
className={classes.importButton} className={classes.importButton}
onClick={e => setActiveDialog('import')}> onClick={() => setActiveDialog('import')}>
<FormattedMessage id="action.import" defaultMessage="Import" /> <FormattedMessage id="action.import" defaultMessage="Import" />
</Button> </Button>
</Tooltip> </Tooltip>
<ActionDispatcher action={activeDialog} onClose={() => setActiveDialog(undefined)} mapsId={[]} /> <ActionDispatcher action={activeDialog} onClose={() => setActiveDialog(undefined)} mapsId={[]} />
<div className={classes.rightButtonGroup}> <div className={classes.rightButtonGroup}>
<HelpToobarButton /> <HelpMenu />
<ProfileToobarButton /> <AccountMenu />
</div> </div>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
@ -246,173 +248,4 @@ const StyleListItem = (props: ListItemProps) => {
); );
} }
const HandleClientStatus = () => {
const status: ClientStatus = useSelector(activeInstanceStatus);
const handleOnClose = () => {
window.location.href = '/c/login';
}
return (
<div>
<Dialog
open={status.state != 'healthy'}
onClose={handleOnClose}
maxWidth="sm"
fullWidth={true}>
<DialogTitle>
<FormattedMessage id="expired.title" defaultMessage="Your session has expired" />
</DialogTitle>
<DialogContent>
<Alert severity="error">
<AlertTitle><FormattedMessage id="expired.description" defaultMessage="Your current session has expired. Please, sign in and try again." /></AlertTitle>
</Alert>
</DialogContent>
<DialogActions>
<Button
type="button"
color="primary"
size="medium"
onClick={handleOnClose} >
<FormattedMessage id="action.close-button" defaultMessage="Close" />
</Button>
</DialogActions>
</Dialog>
</div>
)
}
const ProfileToobarButton = () => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<span>
<Tooltip title="Paulo Veiga <pveiga@gmail.com>">
<Button
aria-haspopup="true"
onClick={handleMenu}>
<AccountCircle fontSize="large" />
Paulo Veiga
</Button >
</Tooltip>
<Menu id="appbar-profile"
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>
<MenuItem onClick={handleClose}>
<ListItemIcon>
<SettingsApplicationsOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="menu.account" defaultMessage="Account" />
</MenuItem>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="/c/logout">
<ListItemIcon>
<ExitToAppOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="menu.signout" defaultMessage="Sign Out" />
</Link>
</MenuItem>
</Menu>
</span>);
}
const HelpToobarButton = () => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<span>
<IconButton
aria-haspopup="true"
onClick={handleMenu}>
<Help />
</IconButton>
<Menu id="appbar-profile"
anchorEl={anchorEl}
keepMounted
open={open}
getContentAnchorEl={null}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="https://www.wisemapping.com/termsofuse.html" target="help">
<ListItemIcon>
<PolicyOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="footer.termsandconditions" defaultMessage="Term And Conditions" />
</Link>
</MenuItem>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="mailto:team@wisemapping.com">
<ListItemIcon>
<EmailOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="footer.contactus" defaultMessage="Contact Us" />
</Link>
</MenuItem>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="mailto:feedback@wisemapping.com">
<ListItemIcon>
<FeedbackOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="footer.feedback" defaultMessage="Feedback" />
</Link>
</MenuItem>
<MenuItem onClick={handleClose}>
<Link color="textSecondary" href="https://www.wisemapping.com/aboutus.html" target="help">
<ListItemIcon>
<EmojiPeopleOutlined fontSize="small" />
</ListItemIcon>
<FormattedMessage id="footer.aboutus" defaultMessage="About Us" />
</Link>
</MenuItem>
</Menu>
</span>);
}
export default MapsPage; export default MapsPage;