vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 14:47:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix several bugs

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-02-02 00:20:35 -08:00
parent 973290d6dd
commit 67fec75d91
6 changed files with 85 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/webapp/package.json
View File

@ -52,7 +52,7 @@
"react-dom": "^17.0.0",
"react-google-recaptcha": "^2.1.0",
"react-intl": "^3.0.0",
"react-query": "^3.5.5",
"react-query": "^3.6.0",
"react-redux": "^7.2.2",
"react-router": "^5.1.8",
"react-router-dom": "^5.2.0",

12
packages/webapp/src/app.tsx
View File

@ -9,14 +9,12 @@ import RegistationPage from './components/registration-page';
import LoginPage from './components/login-page';
import MapsPage from './components/maps-page';
import store from "./store";
import { ForgotPasswordPage } from './components/forgot-password-page';
import { Provider } from 'react-redux';
import { QueryClient, QueryClientProvider } from 'react-query';
import { CssBaseline, ThemeProvider } from '@material-ui/core';
import { theme } from './theme'
function loadLocaleData(language: string) {
switch (language) {
case 'es':
@ -26,7 +24,15 @@ function loadLocaleData(language: string) {
}
}
const queryClient = new QueryClient();
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchIntervalInBackground: false,
staleTime: 5*1000*60 // 10 minutes
}
}
});
const App = () => {
const [messages, setMessages] = useState(undefined);
// Boostrap i18n ...

7
packages/webapp/src/client/mock-client/index.ts
View File

@ -35,8 +35,8 @@ class MockClient implements Client {
createMapInfo(8, false, "El Mapa3", [""], "Paulo3", 67, "", false),
createMapInfo(9, false, "El Mapa3", [""], "Paulo3", 67, "", false),
createMapInfo(10, false, "El Mapa3", [""], "Paulo3", 67, "", false),
createMapInfo(11, false, "El Mapa3", [""], "Paulo3", 67, "", false),
createMapInfo(12, false, "El Mapa3", [""], "Paulo3", 67, "", false)
createMapInfo(11, false, "El Mapa3", ["label 3", "label3"], "Paulo3", 67, "", false),
createMapInfo(12, false, "El Mapa3", ["label 2"], "Paulo3", 67, "", false)
];
this.labels = ["label 1,", "label 2", "label 3"];
@ -45,6 +45,7 @@ class MockClient implements Client {
fetchLabels(): Promise<string[]> {
console.log("Fetching labels from server")
return Promise.resolve(this.labels);
}
@ -151,7 +152,7 @@ class MockClient implements Client {
}
fetchAllMaps(): Promise<MapInfo[]> {
console.log("Fetch maps from server")
console.log("Fetching maps from server")
return Promise.resolve(this.maps);
}

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

@ -20,8 +20,16 @@ export type DialogProps = {
const BaseDialog = (props: DialogProps) => {
const intl = useIntl();
const handleOnClose = props.onClose;
const onSubmit = props.onSubmit;
const isOpen = props.open;
const handleOnSubmit = props.onSubmit;
const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (onSubmit) {
onSubmit(e);
}
}
const description = props.description ? (<DialogContentText>{props.description}</DialogContentText>) : null;
@ -44,11 +52,22 @@ const BaseDialog = (props: DialogProps) => {
</StyledDialogContent>
<StyledDialogActions>
<Button color="primary" size="medium" onClick={handleOnClose} >
{handleOnSubmit ? (<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />) : (<FormattedMessage id="action.close-button" defaultMessage="Close" />)}
<Button
type="button"
color="primary"
size="medium"
onClick={handleOnClose} >
{onSubmit ? (<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />) :
(<FormattedMessage id="action.close-button" defaultMessage="Close" />)
}
</Button>
{handleOnSubmit ? (
<Button color="primary" size="medium" variant="contained" type="submit" disableElevation={true}>
{onSubmit ? (
<Button
color="primary"
size="medium"
variant="contained"
type="submit"
disableElevation={true}>
{props.title}
</Button>) : null
}

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

@ -8,8 +8,7 @@ import IconButton from '@material-ui/core/IconButton';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import { useStyles } from './style';
import { AccountCircle, AddCircleTwoTone, BlurCircular, CloudUploadTwoTone, DeleteOutlineTwoTone, EmailOutlined, EmojiPeopleOutlined, ExitToAppOutlined, FeedbackOutlined, Help, PolicyOutlined, PublicTwoTone, SettingsApplicationsOutlined, ShareTwoTone, StarRateTwoTone, Translate, TranslateTwoTone } from '@material-ui/icons';
import InboxTwoToneIcon from '@material-ui/icons/InboxTwoTone';
import { AccountCircle, AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, EmailOutlined, EmojiPeopleOutlined, ExitToAppOutlined, FeedbackOutlined, Help, PolicyOutlined, PublicTwoTone, SettingsApplicationsOutlined } from '@material-ui/icons';
import { Button, Link, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Tooltip } from '@material-ui/core';
import { MapsList } from './maps-list';
import { FormattedMessage } from 'react-intl';
@ -24,23 +23,21 @@ const poweredByIcon = require('../../images/pwrdby-white.svg');
export type Filter = GenericFilter | LabelFilter;
interface GenericFilter {
export interface GenericFilter {
type: 'public' | 'all' | 'starred' | 'shared' | 'label' | 'owned';
}
interface LabelFilter {
export interface LabelFilter {
type: 'label',
label: string
}
interface ToolbarButtonInfo {
filter: GenericFilter | LabelFilter,
label: string
}
const MapsPage = (props: any) => {
const MapsPage = () => {
const classes = useStyles();
const [filter, setFilter] = React.useState<Filter>({ type: 'all' });
const client: Client = useSelector(activeInstance);
@ -60,6 +57,8 @@ const MapsPage = (props: any) => {
);
const handleMenuClick = (filter: Filter) => {
// Force reload ...
queryClient.invalidateQueries('maps');
setFilter(filter);
};
@ -67,7 +66,7 @@ const MapsPage = (props: any) => {
mutation.mutate(label);
};
const { isLoading, error, data } = useQuery<unknown, ErrorInfo, string[]>('labels', async () => {
const { data } = useQuery<unknown, ErrorInfo, string[]>('labels', async () => {
return await client.fetchLabels();
});
@ -102,7 +101,7 @@ const MapsPage = (props: any) => {
variant='outlined'
elevation={0}>
<Toolbar style={{ minWidth: '600px' }}>
<Toolbar>
<Tooltip title="Create a New Map">
<Button color="primary" size="medium" variant="contained" type="button"
disableElevation={true} startIcon={<AddCircleTwoTone />} className={classes.newMapButton}>
@ -178,9 +177,12 @@ const StyleListItem = (props: ListItemProps) => {
const icon = props.icon;
const label = props.label;
const filter = props.filter;
const activeType = props.active?.type;
const activeFilter = props.active;
const onClick = props.onClick;
const onDeleteLabel = props.onDelete;
const isSelected = activeFilter
&& (activeFilter.type == filter.type)
&& (activeFilter.type != 'label' || ((activeFilter as LabelFilter).label == (filter as LabelFilter).label));
const handleOnClick = (event: any, filter: Filter) => {
@ -198,7 +200,7 @@ const StyleListItem = (props: ListItemProps) => {
return (
<ListItem button
selected={activeType == filter.type}
selected={isSelected}
onClick={e => handleOnClick(e, filter)}>
<ListItemIcon>
{icon}

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

@ -27,7 +27,7 @@ import ActionDispatcher from '../action-dispatcher';
import { Button, InputBase, Link } from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import moment from 'moment'
import { Filter } from '..';
import { Filter, LabelFilter } from '..';
import { FormattedMessage } from 'react-intl';
import { DeleteOutlined, LabelTwoTone } from '@material-ui/icons';
@ -168,7 +168,10 @@ const mapsFilter = (filter: Filter, search: string): ((mapInfo: MapInfo) => bool
//@todo: complete ...
result = mapInfo.starred;
break;
case 'label':
//@todo: complete ...
result = !mapInfo.labels || mapInfo.labels.includes((filter as LabelFilter).label)
break;
default:
result = false;
}
@ -195,14 +198,11 @@ export const MapsList = (props: MapsListProps) => {
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const client: Client = useSelector(activeInstance);
console.log("MapsList refresh");
useEffect(() => {
console.log("Update maps state.")
setSelected([]);
setPage(0);
setFilter(props.filter)
}, [props.filter.type]);
}, [props.filter.type, (props.filter as LabelFilter).label]);
const { isLoading, error, data } = useQuery<unknown, ErrorInfo, MapInfo[]>('maps', async () => {