From fe9f40b73b3fcc4a0bedda1bcf72e4d27a5f4e48 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sat, 6 Feb 2021 17:47:34 -0800 Subject: [PATCH] Complete info dialog. --- packages/webapp/src/client/index.ts | 10 +- .../webapp/src/client/mock-client/index.ts | 59 ++++---- .../webapp/src/client/rest-client/index.ts | 6 +- .../history-dialog/index.tsx | 9 +- .../maps-page/action-dispatcher/index.tsx | 2 + .../action-dispatcher/info-dialog/index.tsx | 142 ++++++++++++++++++ .../action-dispatcher/info-dialog/style.ts | 14 ++ .../publish-dialog/index.tsx | 6 +- .../components/maps-page/maps-list/index.tsx | 18 ++- 9 files changed, 213 insertions(+), 53 deletions(-) create mode 100644 packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx create mode 100644 packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts diff --git a/packages/webapp/src/client/index.ts b/packages/webapp/src/client/index.ts index 0c8909fd..f35f1b85 100644 --- a/packages/webapp/src/client/index.ts +++ b/packages/webapp/src/client/index.ts @@ -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 = { diff --git a/packages/webapp/src/client/mock-client/index.ts b/packages/webapp/src/client/mock-client/index.ts index 93d6b991..fd25ffa1 100644 --- a/packages/webapp/src/client/mock-client/index.ts +++ b/packages/webapp/src/client/mock-client/index.ts @@ -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 { 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 { 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 { + fetchAllMaps(): Promise { console.log("Fetching maps from server") return Promise.resolve(this.maps); } diff --git a/packages/webapp/src/client/rest-client/index.ts b/packages/webapp/src/client/rest-client/index.ts index fb752259..b387e9d2 100644 --- a/packages/webapp/src/client/rest-client/index.ts +++ b/packages/webapp/src/client/rest-client/index.ts @@ -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 diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx index f170402a..92a3680c 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/history-dialog/index.tsx @@ -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." })} > - + + @@ -59,10 +60,10 @@ const HistoryDialog = (props: DialogProps) => { ) : changeHistory.map((row) => ( - {row.creator} + {row.lastModificationBy} - - {moment(row.modified).fromNow()} + + {moment(row.lastModificationTime).fromNow()} diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/index.tsx index 2a982bbc..0bc540ac 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/index.tsx @@ -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' && } {action === 'import' && } {action === 'publish' && } + {action === 'info' && } ); diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx new file mode 100644 index 00000000..1e26494c --- /dev/null +++ b/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/index.tsx @@ -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(map ? map.isPublic : false); + const [error, setError] = React.useState(); + const [] = React.useState('1'); + const queryClient = useQueryClient(); + const intl = useIntl(); + + const classes = useStyles(); + + const handleOnClose = (): void => { + props.onClose(); + setError(undefined); + }; + + return ( + + + + + + + + + + + + + + : + + + {map?.title} + + + + + + : + + + {map?.description} + + + + + + : + + + {map?.createdBy} + + + + + + : + + + {moment(map?.creationTime).format("lll")} + + + + + + + : + + + {map?.lastModificationBy} + + + + + + : + + + {moment(map?.lastModificationTime).format("lll")} + + + + + + : + + + {Boolean(map?.starred).toString()} + + + + + + + + + + + + + + + + : + + + {Boolean(map?.isPublic).toString()} + + + + + + + ) +} + +export default InfoDialog; \ No newline at end of file diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts b/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts new file mode 100644 index 00000000..b02a44c4 --- /dev/null +++ b/packages/webapp/src/components/maps-page/action-dispatcher/info-dialog/style.ts @@ -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' + } + }), +); \ No newline at end of file diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx index 11f95062..c8d88a06 100644 --- a/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx +++ b/packages/webapp/src/components/maps-page/action-dispatcher/publish-dialog/index.tsx @@ -24,7 +24,7 @@ const PublishDialog = (props: PublishProps) => { const client: Client = useSelector(activeInstance); const [model, setModel] = React.useState(map ? map.isPublic : false); const [error, setError] = React.useState(); - 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) => {
- + diff --git a/packages/webapp/src/components/maps-page/maps-list/index.tsx b/packages/webapp/src/components/maps-page/maps-list/index.tsx index 4cbf5cf3..365bed20 100644 --- a/packages/webapp/src/components/maps-page/maps-list/index.tsx +++ b/packages/webapp/src/components/maps-page/maps-list/index.tsx @@ -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('asc'); const [filter, setFilter] = React.useState({ type: 'all' }); - const [orderBy, setOrderBy] = React.useState('modified'); + const [orderBy, setOrderBy] = React.useState('lastModificationTime'); const [selected, setSelected] = React.useState([]); const [searchCondition, setSearchCondition] = React.useState(''); @@ -311,7 +311,7 @@ export const MapsList = (props: MapsListProps) => { } setActiveRowAction(undefined); }; - + const handleOnSearchChange = (e: React.ChangeEvent) => { setSearchCondition(e.target.value); } @@ -319,7 +319,7 @@ export const MapsList = (props: MapsListProps) => { const isSelected = (id: number) => selected.indexOf(id) !== -1; return (
- + @@ -454,12 +454,14 @@ export const MapsList = (props: MapsListProps) => { - {row.creator} + {row.createdBy} - - {moment(row.modified).fromNow()} + + {moment(row.lastModificationTime).fromNow()}