mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-10 17:33:24 +01:00
Complete info dialog.
This commit is contained in:
parent
16c2d1baaf
commit
fe9f40b73b
@ -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 = {
|
||||
|
@ -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'
|
||||
};
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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 >
|
||||
);
|
||||
|
@ -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;
|
@ -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'
|
||||
}
|
||||
}),
|
||||
);
|
@ -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" />
|
||||
|
@ -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>('');
|
||||
|
||||
@ -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>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user