vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-10 17:33:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Complete info dialog.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-02-06 17:47:34 -08:00
parent 16c2d1baaf
commit fe9f40b73b
9 changed files with 213 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/webapp/src/client/index.ts
View File

@ -18,8 +18,10 @@ export type MapInfo = {
starred: boolean;
title: string;
labels: number[];
creator: string;
modified: string;
createdBy: string;
creationTime: string;
lastModificationBy: string;
lastModificationTime: string;
description: string;
isPublic: boolean;
role: 'owner' | 'editor' | 'viewer'
@ -27,8 +29,8 @@ export type MapInfo = {
export type ChangeHistory = {
id: number;
creator: string;
modified: string;
lastModificationBy: string;
lastModificationTime: string;
}
export type BasicMapInfo = {

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

@ -13,26 +13,19 @@ class MockClient implements Client {
title: string,
labels: number[],
creator: string,
modified: string,
creationTime: string,
modifiedByUser: string,
modifiedTime: string,
description: string,
isPublic: boolean,
role: 'owner' | 'viewer' | 'editor'
): MapInfo {
return { id, title, labels, creator, modified, starred, description, isPublic, role };
return { id, title, labels, createdBy: creator, creationTime, lastModificationBy: modifiedByUser, lastModificationTime: modifiedTime, starred, description, isPublic, role };
}
this.maps = [
createMapInfo(1, true, "El Mapa", [], "Paulo", "2008-06-02T00:00:00Z", "", true, 'owner'),
createMapInfo(2, false, "El Mapa2", [], "Paulo2", "2008-06-02T00:00:00Z", "", false, 'editor'),
createMapInfo(3, false, "El Mapa3", [], "Paulo3", "2008-06-02T00:00:00Z", "", false, 'editor'),
createMapInfo(4, false, "El Mapa3", [], "Paulo3", "2008-06-02T00:00:00Z", "", false, 'editor'),
createMapInfo(5, false, "El Mapa3", [], "Paulo3", "2008-06-02T00:00:00Z", "", false, 'editor'),
createMapInfo(6, false, "/El Mapa3", [], "Paulo3", "2008-06-02T00:00:00Z", "", false, 'editor'),
createMapInfo(7, false, "El Mapa3", [], "Paulo3", "2008-06-02T00:00:00Z", "", false, 'editor'),
createMapInfo(8, false, "El Mapa3", [], "Paulo3", "2008-06-02T00:00:00Z", "", false, 'editor'),
createMapInfo(9, false, "El Mapa3", [], "Paulo3", "2008-06-02T00:00:00Z", "", false, 'editor'),
createMapInfo(10, false, "El Mapa3", [], "Paulo3", "2008-06-02T00:00:00Z", "", false, 'editor'),
createMapInfo(11, false, "El Mapa3", [1, 2, 3], "Paulo3", "2008-06-02T00:00:00Z", "", false, 'editor'),
createMapInfo(12, false, "El Mapa3", [1, 2, 3], "Paulo3", "2008-06-02T00:00:00Z", "", false, 'editor')
createMapInfo(1, true, "El Mapa", [], "Paulo", "2008-06-02T00:00:00Z", "Berna", "2008-06-02T00:00:00Z", "", true, 'owner'),
createMapInfo(11, false, "El Mapa3", [1, 2, 3], "Paulo3", "2008-06-02T00:00:00Z", "Berna", "2008-06-02T00:00:00Z", "", false, 'editor'),
createMapInfo(12, false, "El Mapa3", [1, 2, 3], "Paulo3", "2008-06-02T00:00:00Z", "Berna", "2008-06-02T00:00:00Z","", false, 'editor')
];
this.labels = [
@ -103,39 +96,39 @@ class MockClient implements Client {
fetchHistory(id: number): Promise<ChangeHistory[]> {
const result = [{
id: 1,
creator: 'Paulo',
modified: '2008-06-02T00:00:00Z'
lastModificationBy: 'Paulo',
lastModificationTime: '2008-06-02T00:00:00Z'
},
{
id: 2,
creator: 'Paulo',
modified: '2008-06-02T00:00:00Z'
lastModificationBy: 'Paulo',
lastModificationTime: '2008-06-02T00:00:00Z'
}
,
{
id: 3,
creator: 'Paulo',
modified: '2008-06-02T00:00:00Z'
lastModificationBy: 'Paulo',
lastModificationTime: '2008-06-02T00:00:00Z'
},
{
id: 4,
creator: 'Paulo',
modified: '2008-06-02T00:00:00Z'
lastModificationBy: 'Paulo',
lastModificationTime: '2008-06-02T00:00:00Z'
},
{
id: 5,
creator: 'Paulo',
modified: '2008-06-02T00:00:00Z'
lastModificationBy: 'Paulo',
lastModificationTime: '2008-06-02T00:00:00Z'
},
{
id: 6,
creator: 'Paulo',
modified: '2008-06-02T00:00:00Z'
lastModificationBy: 'Paulo',
lastModificationTime: '2008-06-02T00:00:00Z'
},
{
id: 7,
creator: 'Paulo',
modified: '2008-06-02T00:00:00Z'
lastModificationBy: 'Paulo',
lastModificationTime: '2008-06-02T00:00:00Z'
}
]
return Promise.resolve(result);
@ -151,9 +144,11 @@ class MockClient implements Client {
description: String(basicInfo.description),
title: basicInfo.title,
starred: false,
creator: "current user",
createdBy: "current user",
labels: [],
modified: "2008-06-02T00:00:00Z",
lastModificationTime: "2008-06-02T00:00:00Z",
lastModificationBy: "Berna",
creationTime: "2008-06-02T00:00:00Z",
isPublic: false,
role: 'owner'
};
@ -176,7 +171,7 @@ class MockClient implements Client {
console.log("Label delete:" + this.labels);
return Promise.resolve();
}
deleteMap(id: number): Promise<void> {
this.maps = this.maps.filter(m => m.id != id);
return Promise.resolve();
@ -186,7 +181,7 @@ class MockClient implements Client {
return Promise.resolve();
}
fetchAllMaps(): Promise<MapInfo[]> {
fetchAllMaps(): Promise<MapInfo[]> {
console.log("Fetching maps from server")
return Promise.resolve(this.maps);
}

6
packages/webapp/src/client/rest-client/index.ts
View File

@ -136,8 +136,10 @@ export default class RestClient implements Client {
starred: Boolean(m.starred),
title: m.title,
labels: m.labels,
creator: m.creator,
modified: m.lastModificationTime,
createdBy: m.creator,
creationTime: m.creationTime,
lastModificationBy: m.lastModifierUser,
lastModificationTime: m.lastModificationTime,
description: m.description,
isPublic: m['public'],
role: m.role

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

@ -39,7 +39,8 @@ const HistoryDialog = (props: DialogProps) => {
onClose={handleOnClose}
title={intl.formatMessage({ id: "action.history-title", defaultMessage: "Version history" })}
description={intl.formatMessage({ id: "action.history-description", defaultMessage: "List of changes introduced in the last 90 days." })} >
<TableContainer component={Paper} style={{ maxHeight: '200px' }}>
<TableContainer component={Paper} style={{ maxHeight: '200px' }} variant="outlined">
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
@ -59,10 +60,10 @@ const HistoryDialog = (props: DialogProps) => {
) :
changeHistory.map((row) => (
<TableRow key={row.id}>
<TableCell align="left">{row.creator}</TableCell>
<TableCell align="left">{row.lastModificationBy}</TableCell>
<TableCell align="left">
<Tooltip title={moment(row.modified).format("lll")} placement="bottom-start">
<span>{moment(row.modified).fromNow()}</span>
<Tooltip title={moment(row.lastModificationTime).format("lll")} placement="bottom-start">
<span>{moment(row.lastModificationTime).fromNow()}</span>
</Tooltip>
</TableCell>
<TableCell align="left"><Link href={`c/maps/${mapId}/${row.id}/view`} target="history"><FormattedMessage id="maps.view" defaultMessage="View" /></Link></TableCell>

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

@ -13,6 +13,7 @@ import CreateDialog from './create-dialog';
import HistoryDialog from './history-dialog';
import ImportDialog from './import-dialog';
import PublishDialog from './publish-dialog';
import InfoDialog from './info-dialog';
export type BasicMapInfo = {
name: string;
@ -53,6 +54,7 @@ const ActionDispatcher = (props: ActionDialogProps) => {
{action === 'history' && <HistoryDialog open={true} onClose={handleOnClose} mapId={mapId} />}
{action === 'import' && <ImportDialog open={true} onClose={handleOnClose} />}
{action === 'publish' && <PublishDialog onClose={handleOnClose} mapId={mapId}/>}
{action === 'info' && <InfoDialog onClose={handleOnClose} mapId={mapId}/>}
</span >
);

142
packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx Normal file
View File

@ -0,0 +1,142 @@
import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { useMutation, useQueryClient } from 'react-query';
import { useSelector } from 'react-redux';
import { Card, List, ListItem, Paper, Typography } from '@material-ui/core';
import Client, { ErrorInfo } from '../../../../client';
import { activeInstance } from '../../../../redux/clientSlice';
import BaseDialog from '../base-dialog';
import { fetchMapById, handleOnMutationSuccess } from '..';
import { useStyles } from './style';
import moment from 'moment';
export type InfoProps = {
mapId: number,
onClose: () => void
}
const InfoDialog = (props: InfoProps) => {
const { mapId, onClose } = props;
const { map } = fetchMapById(mapId);
const client: Client = useSelector(activeInstance);
const [model, setModel] = React.useState<boolean>(map ? map.isPublic : false);
const [error, setError] = React.useState<ErrorInfo>();
const [] = React.useState('1');
const queryClient = useQueryClient();
const intl = useIntl();
const classes = useStyles();
const handleOnClose = (): void => {
props.onClose();
setError(undefined);
};
return (
<BaseDialog onClose={handleOnClose} error={error}
title={intl.formatMessage({ id: 'info.title', defaultMessage: 'Info' })}
description={intl.formatMessage({ id: 'info.description', defaultMessage: 'By publishing the map you make it visible to everyone on the Internet.' })}
submitButton={intl.formatMessage({ id: 'info.button', defaultMessage: 'Accept' })}>
<Paper style={{ maxHeight: '200px' }}>
<Card variant="outlined">
<List dense={true}>
<ListItem>
<Typography variant="body1" style={{ fontWeight: 'bold' }}>
<FormattedMessage id="info.basic-info" defaultMessage="Basic Info" />
</Typography>
</ListItem>
<ListItem>
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.name" defaultMessage="Name" />:
</Typography>
<Typography variant="body2">
{map?.title}
</Typography>
</ListItem>
<ListItem>
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.description" defaultMessage="Description" />:
</Typography>
<Typography variant="body2">
{map?.description}
</Typography>
</ListItem>
<ListItem>
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.creator" defaultMessage="Creator" />:
</Typography>
<Typography variant="body2">
{map?.createdBy}
</Typography>
</ListItem>
<ListItem>
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.creation-time" defaultMessage="Creation Date" />:
</Typography>
<Typography variant="body2">
{moment(map?.creationTime).format("lll")}
</Typography>
</ListItem>
<ListItem>
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.modified-tny" defaultMessage="Last Modified By" />:
</Typography>
<Typography variant="body2">
{map?.lastModificationBy}
</Typography>
</ListItem>
<ListItem>
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.modified-time" defaultMessage="Last Modified Date" />:
</Typography>
<Typography variant="body2">
{moment(map?.lastModificationTime).format("lll")}
</Typography>
</ListItem>
<ListItem>
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.starred" defaultMessage="Starred" />:
</Typography>
<Typography variant="body2">
{Boolean(map?.starred).toString()}
</Typography>
</ListItem>
</List>
</Card>
<Card variant="outlined" style={{ marginTop: "10px" }}>
<List dense={true}>
<ListItem>
<Typography variant="body1" style={{ fontWeight: 'bold' }}>
<FormattedMessage id="info.sharing" defaultMessage="Sharing" />
</Typography>
</ListItem>
</List>
<ListItem>
<Typography variant="caption" color="textPrimary" className={classes.textDesc}>
<FormattedMessage id="info.public-visibility" defaultMessage="Publicly Visible" />:
</Typography>
<Typography variant="body2">
{Boolean(map?.isPublic).toString()}
</Typography>
</ListItem>
</Card>
</Paper>
</BaseDialog>
)
}
export default InfoDialog;

14
packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts Normal file
View File

@ -0,0 +1,14 @@
import { createStyles, makeStyles, Theme } from "@material-ui/core";
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
textarea: {
width: '100%',
padding: '15px 15px',
marging: '0px 10px'
},
textDesc: {
width: '150px'
}
}),
);

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

@ -24,7 +24,7 @@ const PublishDialog = (props: PublishProps) => {
const client: Client = useSelector(activeInstance);
const [model, setModel] = React.useState<boolean>(map ? map.isPublic : false);
const [error, setError] = React.useState<ErrorInfo>();
const [value, setValue] = React.useState('1');
const [activeTab, setActiveTab] = React.useState('1');
const queryClient = useQueryClient();
const intl = useIntl();
@ -59,7 +59,7 @@ const PublishDialog = (props: PublishProps) => {
}
const handleTabChange = (event, newValue) => {
setValue(newValue);
setActiveTab(newValue);
};
return (
@ -84,7 +84,7 @@ const PublishDialog = (props: PublishProps) => {
</FormControl>
<div style={!model ? { visibility: 'hidden' } : {}}>
<TabContext value={value}>
<TabContext value={activeTab}>
<AppBar position="static">
<TabList onChange={handleTabChange}>
<Tab label={intl.formatMessage({ id: 'publish.embedded', defaultMessage: 'Embedded' })} value="1" />

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

@ -94,8 +94,8 @@ function EnhancedTableHead(props: EnhancedTableProps) {
const headCells: HeadCell[] = [
{ id: 'title', numeric: false, label: intl.formatMessage({ id: 'map.name', defaultMessage: 'Name' }) },
{ id: 'labels', numeric: false },
{ id: 'creator', numeric: false, label: intl.formatMessage({ id: 'map.creator', defaultMessage: 'Creator' }), style: { width: '70px', whiteSpace: 'nowrap' } },
{ id: 'modified', numeric: true, label: intl.formatMessage({ id: 'map.last-update', defaultMessage: 'Last Update' }), style: { width: '70px', whiteSpace: 'nowrap' } }
{ id: 'createdBy', numeric: false, label: intl.formatMessage({ id: 'map.creator', defaultMessage: 'Creator' }), style: { width: '70px', whiteSpace: 'nowrap' } },
{ id: 'lastModificationTime', numeric: true, label: intl.formatMessage({ id: 'map.last-update', defaultMessage: 'Last Update' }), style: { width: '70px', whiteSpace: 'nowrap' } }
];
return (
@ -194,7 +194,7 @@ export const MapsList = (props: MapsListProps) => {
const [order, setOrder] = React.useState<Order>('asc');
const [filter, setFilter] = React.useState<Filter>({ type: 'all' });
const [orderBy, setOrderBy] = React.useState<keyof MapInfo>('modified');
const [orderBy, setOrderBy] = React.useState<keyof MapInfo>('lastModificationTime');
const [selected, setSelected] = React.useState<number[]>([]);
const [searchCondition, setSearchCondition] = React.useState<string>('');
@ -311,7 +311,7 @@ export const MapsList = (props: MapsListProps) => {
}
setActiveRowAction(undefined);
};
const handleOnSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchCondition(e.target.value);
}
@ -319,7 +319,7 @@ export const MapsList = (props: MapsListProps) => {
const isSelected = (id: number) => selected.indexOf(id) !== -1;
return (
<div className={classes.root}>
<ActionChooser anchor={activeRowAction?.el} onClose={handleActionMenuClose} mapId={activeRowAction?.mapId} />
<ActionChooser anchor={activeRowAction?.el} onClose={handleActionMenuClose} mapId={activeRowAction?.mapId} />
<Paper className={classes.paper} elevation={0}>
<Toolbar className={classes.toolbar} variant="dense">
@ -454,12 +454,14 @@ export const MapsList = (props: MapsListProps) => {
</TableCell>
<TableCell className={classes.bodyCell}>
{row.creator}
{row.createdBy}
</TableCell>
<TableCell className={classes.bodyCell}>
<Tooltip title={moment(row.modified).format("lll")} placement="bottom-start">
<span>{moment(row.modified).fromNow()}</span>
<Tooltip title={
`Modified by ${row.lastModificationBy} on ${moment(row.lastModificationTime).format("lll")}`
} placement="bottom-start">
<span>{moment(row.lastModificationTime).fromNow()}</span>
</Tooltip>
</TableCell>