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

Compleate create new map.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-02-04 10:01:35 -08:00
parent a6951b850e
commit 56c843970b
8 changed files with 77 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@ export type NewUser = {
export type MapInfo = {
id: number;
starred: boolean;
name: string;
title: string;
labels: string[];
creator: string;
modified: string;
@ -18,7 +18,7 @@ export type MapInfo = {
}
export type BasicMapInfo = {
name: string;
title: string;
description?: string;
}
@ -77,15 +77,15 @@ export const parseResponseOnError = (response: any): ErrorInfo => {
}
interface Client {
createMap(rest: { name: string; description?: string | undefined })
deleteLabel(label: string): Promise<unknown>;
createMap(map: BasicMapInfo): Promise<number>;
deleteLabel(label: string): Promise<void>;
registerNewUser(user: NewUser): Promise<void>;
resetPassword(email: string): Promise<void>;
fetchAllMaps(): Promise<MapInfo[]>;
fetchLabels(): Promise<string[]>;
deleteMap(id: number): Promise<void>;
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<number>;
loadMapInfo(id: number): Promise<BasicMapInfo>;
changeStarred(id: number): Promise<void>;

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

@ -1,5 +1,4 @@
import Client, { BasicMapInfo, ErrorInfo, MapInfo, NewUser, parseResponseOnError } from '..';
import axios from "axios";
import Client, { BasicMapInfo, MapInfo, NewUser } from '..';
class MockClient implements Client {
private maps: MapInfo[] = [];
@ -11,14 +10,14 @@ class MockClient implements Client {
function createMapInfo(
id: number,
starred: boolean,
name: string,
title: string,
labels: string[],
creator: string,
modified: string,
description: string,
isPublic: boolean
): MapInfo {
return { id, name, labels, creator, modified, starred, description, isPublic };
return { id, title, labels, creator, modified, starred, description, isPublic };
}
this.maps = [
createMapInfo(1, true, "El Mapa", [""], "Paulo", "2008-06-02T00:00:00Z", "", true),
@ -39,10 +38,10 @@ class MockClient implements Client {
}
createMap(rest: { name: string; description?: string | undefined; }) {
createMap(map: BasicMapInfo): Promise<number> {
throw new Error("Method not implemented.");
}
s
fetchLabels(): Promise<string[]> {
console.log("Fetching labels from server")
return Promise.resolve(this.labels);
@ -61,22 +60,22 @@ class MockClient implements Client {
}
loadMapInfo(id: number): Promise<BasicMapInfo> {
return Promise.resolve({ name: 'My Map', description: 'My Description' });
return Promise.resolve({ title: 'My Map', description: 'My Description' });
}
fetchLabes(id: number): Promise<BasicMapInfo> {
return Promise.resolve({ name: 'My Map', description: 'My Description' });
return Promise.resolve({ title: 'My Map', description: 'My Description' });
}
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
const exists = this.maps.find(m => m.name == basicInfo.name) != undefined;
const exists = this.maps.find(m => m.title == basicInfo.title) != undefined;
if (!exists) {
this.maps = this.maps.map(m => {
const result = m;
if (m.id == id) {
result.description = basicInfo.description ? basicInfo.description : '';
result.name = basicInfo.name;
result.title = basicInfo.title;
}
return result;
})
@ -86,22 +85,22 @@ class MockClient implements Client {
fieldErrors.set('name', 'name already exists ')
return Promise.reject({
msg: 'Map already exists ...' + basicInfo.name,
msg: 'Map already exists ...' + basicInfo.title,
fields: fieldErrors
})
};
}
duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<number> {
const exists = this.maps.find(m => m.name == basicInfo.name) != undefined;
const exists = this.maps.find(m => m.title == basicInfo.title) != undefined;
if (!exists) {
const newMap: MapInfo = {
id: Math.random() * 1000,
description: String(basicInfo.description),
name: basicInfo.name,
title: basicInfo.title,
starred: false,
creator: "current user",
labels: [],
@ -109,13 +108,13 @@ class MockClient implements Client {
isPublic: false
};
this.maps.push(newMap);
return Promise.resolve();
return Promise.resolve(newMap.id);
} else {
const fieldErrors: Map<string, string> = new Map<string, string>();
fieldErrors.set('name', 'name already exists ')
return Promise.reject({
msg: 'Maps name must be unique:' + basicInfo.name,
msg: 'Maps name must be unique:' + basicInfo.title,
fields: fieldErrors
})

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

@ -1,5 +1,5 @@
import axios from 'axios';
import { ErrorInfo, MapInfo, NewUser, parseResponseOnError } from '..';
import { ErrorInfo, MapInfo, BasicMapInfo, NewUser, parseResponseOnError } from '..';
import MockClient from '../mock-client/';
//@Remove inheritance once is it completed.
@ -12,22 +12,38 @@ export default class RestClient extends MockClient {
this.baseUrl = baseUrl;
}
createMap(model: BasicMapInfo): Promise<number> {
const handler = (success: (mapId:number) => void, reject: (error: ErrorInfo) => void) => {
axios.post(this.baseUrl + `/c/restful/maps?title=${model.title}&description=${model.description ? model.description : ''}`,
null,
{ headers: { 'Content-Type': 'application/json' } }
).then(response => {
const mapId = response.headers.resourceid;
success(mapId);
}).catch(error => {
const response = error.response;
const errorInfo = parseResponseOnError(response);
reject(errorInfo);
});
}
return new Promise(handler);
}
fetchAllMaps(): Promise<MapInfo[]> {
const handler = (success: (mapsInfo: MapInfo[]) => void, reject: (error: ErrorInfo) => void) => {
axios.get(
this.baseUrl + '/c/restful/maps/',
{ headers: { 'Content-Type': 'application/json' }
}
{
headers: { 'Content-Type': 'application/json' }
}
).then(response => {
console.log("Maps List Response=>")
console.log(response.data)
const data = response.data;
const maps: MapInfo[] = (data.mindmapsInfo as any[]).map(m => {
return {
id: m.id,
starred: Boolean(m.starred),
name: m.title,
title: m.title,
labels: [],
creator: m.creator,
modified: m.lastModificationTime,

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

@ -1,42 +1,39 @@
import React, { useEffect } from "react";
import { useIntl } from "react-intl";
import { useMutation, useQueryClient } from "react-query";
import { useSelector } from "react-redux";
import { FormControl } from "@material-ui/core";
import React from 'react';
import { useIntl } from 'react-intl';
import { useMutation } from 'react-query';
import { useSelector } from 'react-redux';
import { FormControl } from '@material-ui/core';
import Client, { BasicMapInfo, ErrorInfo } from "../../../../client";
import Client, { BasicMapInfo, ErrorInfo } from '../../../../client';
import { activeInstance } from '../../../../reducers/serviceSlice';
import Input from "../../../form/input";
import { DialogProps, fetchMapById, handleOnMutationSuccess } from "..";
import BaseDialog from "../action-dialog";
import Input from '../../../form/input';
import BaseDialog from '../action-dialog';
export type CreateModel = {
name: string;
title: string;
description?: string;
}
export type CreateProps = {
open: boolean,
onClose: () => void
}
const defaultModel: CreateModel = { name: '', description: ''};
}
const defaultModel: CreateModel = { title: '', description: '' };
const CreateDialog = (props: CreateProps) => {
const client: Client = useSelector(activeInstance);
const [model, setModel] = React.useState<CreateModel>(defaultModel);
const [error, setError] = React.useState<ErrorInfo>();
const { open } = props;
const intl = useIntl();
const queryClient = useQueryClient();
const mutation = useMutation<CreateModel, ErrorInfo, CreateModel>((model: CreateModel) => {
const { ...rest } = model;
return client.createMap(rest).then(() => model);
const mutation = useMutation<number, ErrorInfo, CreateModel>((model: CreateModel) => {
return client.createMap(model);
},
{
onSuccess: () => {
handleOnMutationSuccess(props.onClose, queryClient);
onSuccess: (mapId: number) => {
window.location.href = `/c/maps/${mapId}/edit`;
},
onError: (error) => {
setError(error);
@ -71,8 +68,8 @@ const CreateDialog = (props: CreateProps) => {
submitButton={intl.formatMessage({ id: 'create.button', defaultMessage: 'Create' })}>
<FormControl fullWidth={true}>
<Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
value={model.name} onChange={handleOnChange} error={error} fullWidth={true} />
<Input name="title" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
value={model.title} onChange={handleOnChange} error={error} fullWidth={true} />
<Input name="description" type="text" label={{ id: "action.rename-description-placeholder", defaultMessage: "Description" }}
value={model.description} onChange={handleOnChange} required={false} fullWidth={true} />

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

@ -38,7 +38,7 @@ const DeleteDialog = (props: DialogProps) => {
title={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })}
submitButton={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })} >
<Alert severity="warning">
<AlertTitle>Delete '{map?.name}'</AlertTitle>
<AlertTitle>Delete '{map?.title}'</AlertTitle>
<FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
</Alert>
</BaseDialog>

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

@ -12,11 +12,11 @@ import BaseDialog from "../action-dialog";
export type DuplicateModel = {
id: number;
name: string;
title: string;
description?: string;
}
const defaultModel: DuplicateModel = { name: '', description: '', id: -1 };
const defaultModel: DuplicateModel = { title: '', description: '', id: -1 };
const DuplicateDialog = (props: DialogProps) => {
const service: Client = useSelector(activeInstance);
const [model, setModel] = React.useState<DuplicateModel>(defaultModel);
@ -26,9 +26,9 @@ const DuplicateDialog = (props: DialogProps) => {
const intl = useIntl();
const queryClient = useQueryClient();
const mutation = useMutation<DuplicateModel, ErrorInfo, DuplicateModel>((model: DuplicateModel) => {
const mutation = useMutation<number, ErrorInfo, DuplicateModel>((model: DuplicateModel) => {
const { id, ...rest } = model;
return service.duplicateMap(id, rest).then(() => model);
return service.duplicateMap(id, rest);
},
{
onSuccess: () => {
@ -77,8 +77,8 @@ const DuplicateDialog = (props: DialogProps) => {
submitButton={intl.formatMessage({ id: 'duplicate.title', defaultMessage: 'Duplicate' })}>
<FormControl fullWidth={true}>
<Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
value={model.name} onChange={handleOnChange} error={error} fullWidth={true} />
<Input name="title" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
value={model.title} onChange={handleOnChange} error={error} fullWidth={true} />
<Input name="description" type="text" label={{ id: "action.rename-description-placeholder", defaultMessage: "Description" }}
value={model.description} onChange={handleOnChange} required={false} fullWidth={true} />

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

@ -11,11 +11,11 @@ import BaseDialog from "../action-dialog";
export type RenameModel = {
id: number;
name: string;
title: string;
description?: string;
}
const defaultModel: RenameModel = { name: '', description: '', id: -1 };
const defaultModel: RenameModel = { title: '', description: '', id: -1 };
const RenameDialog = (props: DialogProps) => {
const service: Client = useSelector(activeInstance);
const [model, setModel] = React.useState<RenameModel>(defaultModel);
@ -76,8 +76,8 @@ const RenameDialog = (props: DialogProps) => {
submitButton={intl.formatMessage({ id: 'rename.title', defaultMessage: 'Rename' })}>
<FormControl fullWidth={true}>
<Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
value={model.name} onChange={handleOnChange} error={error} fullWidth={true} />
<Input name="title" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
value={model.title} onChange={handleOnChange} error={error} fullWidth={true} />
<Input name="description" type="text" label={{ id: "action.rename-description-placeholder", defaultMessage: "Description" }}
value={model.description} onChange={handleOnChange} required={false} fullWidth={true} />

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

@ -71,7 +71,7 @@ interface HeadCell {
}
const headCells: HeadCell[] = [
{ id: 'name', numeric: false, label: 'Name' },
{ id: 'title', numeric: false, label: 'Name' },
{ id: 'labels', numeric: false },
{ id: 'creator', numeric: false, label: 'Creator', style: { width: '60px' } },
{ id: 'modified', numeric: true, label: 'Modified', style: { width: '30px' } }
@ -178,7 +178,7 @@ const mapsFilter = (filter: Filter, search: string): ((mapInfo: MapInfo) => bool
// Does it match search filter criteria...
if (search && result) {
result = mapInfo.name.toLowerCase().indexOf(search.toLowerCase()) != -1;
result = mapInfo.title.toLowerCase().indexOf(search.toLowerCase()) != -1;
}
return result;
@ -434,8 +434,8 @@ export const MapsList = (props: MapsListProps) => {
<TableCell className={classes.bodyCell}>
<Tooltip title="Open for edition" placement="bottom-start">
<Link href={`c/maps/${row.id}/edit`} color="textPrimary" underline="always">
{row.name}
<Link href={`/c/maps/${row.id}/edit`} color="textPrimary" underline="always" onClick={(e)=>e.stopPropagation()}>
{row.title}
</Link>
</Tooltip>
</TableCell>