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

Finish import

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-02-10 18:03:51 -08:00
parent 1c7dbb8af5
commit 1c5d6342e5
5 changed files with 81 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,13 @@ export type NewUser = {
recaptcha: string | null;
}
export type ImportMapInfo = {
title: string;
description?: string;
contentType?: string;
content?: ArrayBuffer | null | string;
}
export type Label = {
id: number;
title: string;
@ -55,6 +62,7 @@ export type AccountInfo = {
}
interface Client {
importMap(model: ImportMapInfo): Promise<number>
createMap(map: BasicMapInfo): Promise<number>;
deleteMaps(ids: number[]): Promise<void>;
deleteMap(id: number): Promise<void>;
@ -67,7 +75,7 @@ interface Client {
fetchLabels(): Promise<Label[]>;
deleteLabel(id: number): Promise<void>;
fetchAccountInfo():Promise<AccountInfo>;
fetchAccountInfo(): Promise<AccountInfo>;
registerNewUser(user: NewUser): Promise<void>;
resetPassword(email: string): Promise<void>;

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

@ -1,5 +1,4 @@
import Client, { AccountInfo, BasicMapInfo, ChangeHistory, Label, MapInfo, NewUser } from '..';
import Client, { AccountInfo, BasicMapInfo, ChangeHistory, ImportMapInfo, Label, MapInfo, NewUser} from '..';
class MockClient implements Client {
private maps: MapInfo[] = [];
private labels: Label[] = [];
@ -8,7 +7,7 @@ class MockClient implements Client {
// Remove, just for develop ....
function createMapInfo(
id: number,
id: number,
starred: boolean,
title: string,
labels: number[],
@ -34,6 +33,10 @@ class MockClient implements Client {
];
}
importMap(model: ImportMapInfo): Promise<number> {
return Promise.resolve(10);
}
fetchAccountInfo(): Promise<AccountInfo> {
return Promise.resolve({
firstName: 'Costme',

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

@ -1,5 +1,5 @@
import axios from 'axios';
import Client, { ErrorInfo, MapInfo, BasicMapInfo, NewUser, Label, ChangeHistory, AccountInfo } from '..';
import Client, { ErrorInfo, MapInfo, BasicMapInfo, NewUser, Label, ChangeHistory, AccountInfo, ImportMapInfo } from '..';
export default class RestClient implements Client {
private baseUrl: string;
@ -9,6 +9,20 @@ export default class RestClient implements Client {
this.baseUrl = baseUrl;
this.sessionExpired = sessionExpired;
}
importMap(model: ImportMapInfo): 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 : ''}`,
model.content,
{ headers: { 'Content-Type': model.contentType } }
).then(response => {
const mapId = response.headers.resourceid;
success(mapId);
}).catch(error => {
const errorInfo = this.parseResponseOnError(error.response);
reject(errorInfo);
});
}
return new Promise(handler); }
fetchAccountInfo(): Promise<AccountInfo> {
const handler = (success: (account: AccountInfo) => void, reject: (error: ErrorInfo) => void) => {

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

@ -13,12 +13,14 @@ export type DialogProps = {
title: string;
description?: string;
submitButton?: string;
actionUrl?: string;
}
const BaseDialog = (props: DialogProps) => {
const intl = useIntl();
const { onClose, onSubmit } = props;
const { onClose, onSubmit, actionUrl = "" } = props;
const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();

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

@ -13,13 +13,15 @@ import BaseDialog from '../base-dialog';
export type ImportModel = {
title: string;
description?: string;
contentType?: string;
content?: ArrayBuffer | null | string;
}
export type CreateProps = {
onClose: () => void
}
const defaultModel: ImportModel = { title: '', description: '' };
const defaultModel: ImportModel = { title: '' };
const ImportDialog = (props: CreateProps) => {
const client: Client = useSelector(activeInstance);
const [model, setModel] = React.useState<ImportModel>(defaultModel);
@ -27,7 +29,7 @@ const ImportDialog = (props: CreateProps) => {
const intl = useIntl();
const mutation = useMutation<number, ErrorInfo, ImportModel>((model: ImportModel) => {
return client.createMap(model);
return client.importMap(model);
},
{
onSuccess: (mapId: number) => {
@ -55,9 +57,41 @@ const ImportDialog = (props: CreateProps) => {
const name = event.target.name;
const value = event.target.value;
setModel({ ...model, [name as keyof BasicMapInfo]: value });
setModel({ ...model, [name as keyof ImportModel]: value });
}
const handleOnFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const files = event?.target?.files;
const reader = new FileReader();
if (files) {
const file = files[0];
var title = file.name;
title = title.substring(0, title.lastIndexOf("."));
// Closure to capture the file information.
reader.onload = (event) => {
const fileContent = event?.target?.result;
model.content = fileContent;
// Suggest file name ...
const fileName = file.name;
if (fileName) {
var title = fileName.split('.')[0]
if (!model.title || 0 === model.title.length) {
model.title = title;
}
}
model.contentType = file.name.lastIndexOf(".wxml") != -1 ? "application/xml" : "application/freemind";
setModel({...model});
};
// Read in the image file as a data URL.
reader.readAsText(file);
}
};
return (
<div>
<BaseDialog onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
@ -66,21 +100,24 @@ const ImportDialog = (props: CreateProps) => {
submitButton={intl.formatMessage({ id: 'import.button', defaultMessage: 'Create' })}>
<FormControl fullWidth={true}>
<input
accept=".wxml,.mm"
id="contained-button-file"
type="file"
required={true}
style={{ display: 'none' }}
onChange={handleOnFileChange}
/>
<Input name="title" type="text" label={intl.formatMessage({ id: "action.rename-name-placeholder", defaultMessage: "Name" })}
value={model.title} onChange={handleOnChange} error={error} fullWidth={true} />
<Input name="description" type="text" label={intl.formatMessage({ id: "action.rename-description-placeholder", defaultMessage: "Description" })}
value={model.description} onChange={handleOnChange} required={false} fullWidth={true} />
<input
accept="image/*"
id="contained-button-file"
type="file"
style={{display: 'none'}}
/>
<label htmlFor="contained-button-file">
<Button variant="outlined" color="primary" component="span" style={{margin: '10px 5px', width: '100%'}}>
<FormattedMessage id="maps.choose-file" defaultMessage="Choose a file"/>
<Button variant="outlined" color="primary" component="span" style={{ margin: '10px 5px', width: '100%' }}>
<FormattedMessage id="maps.choose-file" defaultMessage="Choose a file" />
</Button>
</label>
</FormControl>