mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-22 06:37:56 +01:00
Complete deleat all
This commit is contained in:
parent
fe9f40b73b
commit
7df6f3744b
@ -74,6 +74,9 @@
|
||||
"create.title": {
|
||||
"defaultMessage": "Create a new mindmap"
|
||||
},
|
||||
"deletem.title": {
|
||||
"defaultMessage": "All selected maps will be deleted"
|
||||
},
|
||||
"duplicate.title": {
|
||||
"defaultMessage": "Duplicate"
|
||||
},
|
||||
@ -143,6 +146,45 @@
|
||||
"import.title": {
|
||||
"defaultMessage": "Import existing mindmap"
|
||||
},
|
||||
"info.basic-info": {
|
||||
"defaultMessage": "Basic Info"
|
||||
},
|
||||
"info.button": {
|
||||
"defaultMessage": "Accept"
|
||||
},
|
||||
"info.creation-time": {
|
||||
"defaultMessage": "Creation Date"
|
||||
},
|
||||
"info.creator": {
|
||||
"defaultMessage": "Creator"
|
||||
},
|
||||
"info.description": {
|
||||
"defaultMessage": "Description"
|
||||
},
|
||||
"info.description-msg": {
|
||||
"defaultMessage": "By publishing the map you make it visible to everyone on the Internet."
|
||||
},
|
||||
"info.modified-time": {
|
||||
"defaultMessage": "Last Modified Date"
|
||||
},
|
||||
"info.modified-tny": {
|
||||
"defaultMessage": "Last Modified By"
|
||||
},
|
||||
"info.name": {
|
||||
"defaultMessage": "Name"
|
||||
},
|
||||
"info.public-visibility": {
|
||||
"defaultMessage": "Publicly Visible"
|
||||
},
|
||||
"info.sharing": {
|
||||
"defaultMessage": "Sharing"
|
||||
},
|
||||
"info.starred": {
|
||||
"defaultMessage": "Starred"
|
||||
},
|
||||
"info.title": {
|
||||
"defaultMessage": "Info"
|
||||
},
|
||||
"login.desc": {
|
||||
"defaultMessage": "Log into your account"
|
||||
},
|
||||
@ -189,6 +231,9 @@
|
||||
"map.name": {
|
||||
"defaultMessage": "Name"
|
||||
},
|
||||
"maps.create-tooltip": {
|
||||
"defaultMessage": "Create a New Map"
|
||||
},
|
||||
"maps.empty-result": {
|
||||
"defaultMessage": "No matching record found with the current filter criteria."
|
||||
},
|
||||
|
@ -51,11 +51,12 @@ export type ErrorInfo = {
|
||||
|
||||
interface Client {
|
||||
createMap(map: BasicMapInfo): Promise<number>;
|
||||
deleteMaps(ids: number[]): Promise<void>;
|
||||
deleteMap(id: number): Promise<void>;
|
||||
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
|
||||
fetchAllMaps(): Promise<MapInfo[]>;
|
||||
duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<number>;
|
||||
fetchMapInfo(id: number): Promise<BasicMapInfo>;
|
||||
|
||||
changeStarred(id: number, starred: boolean): Promise<void>;
|
||||
updateMapToPublic(id: number, starred: boolean): Promise<void>;
|
||||
|
||||
|
@ -25,7 +25,7 @@ class MockClient implements Client {
|
||||
this.maps = [
|
||||
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')
|
||||
createMapInfo(12, false, "El Mapa3", [1, 2, 3], "Paulo3", "2008-06-02T00:00:00Z", "Berna", "2008-06-02T00:00:00Z", "", false, 'editor')
|
||||
];
|
||||
|
||||
this.labels = [
|
||||
@ -34,6 +34,10 @@ class MockClient implements Client {
|
||||
];
|
||||
|
||||
}
|
||||
deleteMaps(ids: number[]): Promise<void> {
|
||||
ids.forEach(id => this.deleteMap(id));
|
||||
return Promise.resolve();
|
||||
}
|
||||
revertHistory(id: number, cid: number): Promise<void> {
|
||||
return Promise.resolve();
|
||||
}
|
||||
@ -65,10 +69,6 @@ class MockClient implements Client {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
fetchMapInfo(id: number): Promise<BasicMapInfo> {
|
||||
return Promise.resolve({ title: 'My Map', description: 'My Description' });
|
||||
}
|
||||
|
||||
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
|
||||
|
||||
const exists = this.maps.find(m => m.title == basicInfo.title) != undefined;
|
||||
@ -171,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();
|
||||
@ -181,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,30 +6,32 @@ export default class RestClient implements Client {
|
||||
private baseUrl: string;
|
||||
private sessionExpired: () => void
|
||||
|
||||
|
||||
constructor(baseUrl: string, sessionExpired: () => void) {
|
||||
this.baseUrl = baseUrl;
|
||||
this.sessionExpired = sessionExpired;
|
||||
}
|
||||
|
||||
updateMapToPublic(id: number, isPublic: boolean): Promise<void> {
|
||||
/*
|
||||
jQuery.ajax("c/restful/maps/${mindmap.id}/publish", {
|
||||
async:false,
|
||||
dataType:'json',
|
||||
data:$('#dialogMainForm #enablePublicView')[0].checked ? 'true' : 'false',
|
||||
type:'PUT',
|
||||
contentType:"text/plain",
|
||||
success:function (data, textStatus, jqXHR) {
|
||||
$('#publish-dialog-modal').modal('hide');
|
||||
},
|
||||
*/
|
||||
deleteMaps(ids: number[]): Promise<void> {
|
||||
const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
|
||||
axios.delete(this.baseUrl + `/c/restful/maps/batch?ids=${ids.join()}`,
|
||||
{ headers: { 'Content-Type': 'text/plain' } }
|
||||
).then(() => {
|
||||
success();
|
||||
}).catch(error => {
|
||||
const response = error.response;
|
||||
const errorInfo = this.parseResponseOnError(response);
|
||||
reject(errorInfo);
|
||||
});
|
||||
}
|
||||
return new Promise(handler);
|
||||
}
|
||||
|
||||
updateMapToPublic(id: number, isPublic: boolean): Promise<void> {
|
||||
const handler = (success: () => void, reject: (error: ErrorInfo) => void) => {
|
||||
axios.put(`${this.baseUrl}/c/restful/maps/${id}/publish`,
|
||||
isPublic,
|
||||
{ headers: { 'Content-Type': 'text/plain' } }
|
||||
).then(response => {
|
||||
).then(() => {
|
||||
// All was ok, let's sent to success page ...;
|
||||
success();
|
||||
}).catch(error => {
|
||||
@ -45,60 +47,11 @@ export default class RestClient implements Client {
|
||||
|
||||
throw new Error('Method not implemented.');
|
||||
}
|
||||
|
||||
fetchHistory(id: number): Promise<ChangeHistory[]> {
|
||||
throw new Error('Method not implemented.');
|
||||
}
|
||||
|
||||
fetchMapInfo(id: number): Promise<BasicMapInfo> {
|
||||
throw new Error('Method not implemented.');
|
||||
}
|
||||
|
||||
private parseResponseOnError = (response: any): ErrorInfo => {
|
||||
const intl = useIntl();
|
||||
|
||||
let result: ErrorInfo | undefined;
|
||||
if (response) {
|
||||
const status: number = response.status;
|
||||
const data = response.data;
|
||||
console.log(data);
|
||||
|
||||
switch (status) {
|
||||
case 401:
|
||||
case 302:
|
||||
this.sessionExpired();
|
||||
result = { msg: intl.formatMessage({ id: "expired.description", defaultMessage: "Your current session has expired. Please, sign in and try again." }) }
|
||||
break;
|
||||
default:
|
||||
if (data) {
|
||||
// Set global errors ...
|
||||
result = {};
|
||||
let globalErrors = data.globalErrors;
|
||||
if (globalErrors && globalErrors.length > 0) {
|
||||
result.msg = globalErrors[0];
|
||||
}
|
||||
|
||||
// Set field errors ...
|
||||
if (data.fieldErrors && Object.keys(data.fieldErrors).length > 0) {
|
||||
result.fields = data.fieldErrors;
|
||||
if (!result.msg) {
|
||||
const key = Object.keys(data.fieldErrors)[0];
|
||||
result.msg = data.fieldErrors[key];
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
result = { msg: response.statusText };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Network related problem ...
|
||||
if (!result) {
|
||||
result = { msg: 'Unexpected error. Please, try latter' };
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
|
||||
throw "Method not implemented yet";
|
||||
@ -283,5 +236,53 @@ export default class RestClient implements Client {
|
||||
}
|
||||
return new Promise(handler);
|
||||
}
|
||||
|
||||
private parseResponseOnError = (response: any): ErrorInfo => {
|
||||
const intl = useIntl();
|
||||
|
||||
let result: ErrorInfo | undefined;
|
||||
if (response) {
|
||||
const status: number = response.status;
|
||||
const data = response.data;
|
||||
console.log(data);
|
||||
|
||||
switch (status) {
|
||||
case 401:
|
||||
case 302:
|
||||
this.sessionExpired();
|
||||
result = { msg: intl.formatMessage({ id: "expired.description", defaultMessage: "Your current session has expired. Please, sign in and try again." }) }
|
||||
break;
|
||||
default:
|
||||
if (data) {
|
||||
// Set global errors ...
|
||||
result = {};
|
||||
let globalErrors = data.globalErrors;
|
||||
if (globalErrors && globalErrors.length > 0) {
|
||||
result.msg = globalErrors[0];
|
||||
}
|
||||
|
||||
// Set field errors ...
|
||||
if (data.fieldErrors && Object.keys(data.fieldErrors).length > 0) {
|
||||
result.fields = data.fieldErrors;
|
||||
if (!result.msg) {
|
||||
const key = Object.keys(data.fieldErrors)[0];
|
||||
result.msg = data.fieldErrors[key];
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
result = { msg: response.statusText };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Network related problem ...
|
||||
if (!result) {
|
||||
result = { msg: 'Unexpected error. Please, try latter' };
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
@ -149,6 +149,12 @@
|
||||
"value": "Create a new mindmap"
|
||||
}
|
||||
],
|
||||
"deletem.title": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "All selected maps will be deleted"
|
||||
}
|
||||
],
|
||||
"duplicate.title": [
|
||||
{
|
||||
"type": 0,
|
||||
@ -287,6 +293,84 @@
|
||||
"value": "Import existing mindmap"
|
||||
}
|
||||
],
|
||||
"info.basic-info": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Basic Info"
|
||||
}
|
||||
],
|
||||
"info.button": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Accept"
|
||||
}
|
||||
],
|
||||
"info.creation-time": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Creation Date"
|
||||
}
|
||||
],
|
||||
"info.creator": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Creator"
|
||||
}
|
||||
],
|
||||
"info.description": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Description"
|
||||
}
|
||||
],
|
||||
"info.description-msg": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "By publishing the map you make it visible to everyone on the Internet."
|
||||
}
|
||||
],
|
||||
"info.modified-time": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Last Modified Date"
|
||||
}
|
||||
],
|
||||
"info.modified-tny": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Last Modified By"
|
||||
}
|
||||
],
|
||||
"info.name": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Name"
|
||||
}
|
||||
],
|
||||
"info.public-visibility": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Publicly Visible"
|
||||
}
|
||||
],
|
||||
"info.sharing": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Sharing"
|
||||
}
|
||||
],
|
||||
"info.starred": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Starred"
|
||||
}
|
||||
],
|
||||
"info.title": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Info"
|
||||
}
|
||||
],
|
||||
"login.desc": [
|
||||
{
|
||||
"type": 0,
|
||||
@ -377,6 +461,12 @@
|
||||
"value": "Name"
|
||||
}
|
||||
],
|
||||
"maps.create-tooltip": [
|
||||
{
|
||||
"type": 0,
|
||||
"value": "Create a New Map"
|
||||
}
|
||||
],
|
||||
"maps.empty-result": [
|
||||
{
|
||||
"type": 0,
|
||||
|
@ -16,7 +16,6 @@ export type CreateModel = {
|
||||
}
|
||||
|
||||
export type CreateProps = {
|
||||
open: boolean,
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
|
@ -5,24 +5,24 @@ import { useMutation, useQueryClient } from "react-query";
|
||||
import { useSelector } from "react-redux";
|
||||
import Client from "../../../../client";
|
||||
import { activeInstance } from '../../../../redux/clientSlice';
|
||||
import { DialogProps, fetchMapById, handleOnMutationSuccess } from "..";
|
||||
import { SimpleDialogProps, fetchMapById, handleOnMutationSuccess } from "..";
|
||||
import BaseDialog from "../base-dialog";
|
||||
|
||||
|
||||
const DeleteDialog = (props: DialogProps) => {
|
||||
const DeleteDialog = (props: SimpleDialogProps) => {
|
||||
const intl = useIntl();
|
||||
const { mapId, onClose } = props;
|
||||
|
||||
const service: Client = useSelector(activeInstance);
|
||||
const client: Client = useSelector(activeInstance);
|
||||
const queryClient = useQueryClient();
|
||||
const mutation = useMutation((id: number) => service.deleteMap(id),
|
||||
const mutation = useMutation((id: number) => client.deleteMap(id),
|
||||
{
|
||||
onSuccess: () => handleOnMutationSuccess(props.onClose, queryClient)
|
||||
onSuccess: () => handleOnMutationSuccess(onClose, queryClient)
|
||||
}
|
||||
);
|
||||
|
||||
const mapId = props.mapId;
|
||||
const handleOnClose = (): void => {
|
||||
props.onClose();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleOnSubmit = (): void => {
|
||||
@ -37,10 +37,12 @@ const DeleteDialog = (props: DialogProps) => {
|
||||
onClose={handleOnClose} onSubmit={handleOnSubmit}
|
||||
title={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })}
|
||||
submitButton={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })} >
|
||||
|
||||
<Alert severity="warning">
|
||||
<AlertTitle>Delete '{map?.title}'</AlertTitle>
|
||||
<FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
|
||||
</Alert>
|
||||
|
||||
</BaseDialog>
|
||||
</div>
|
||||
);
|
||||
|
@ -0,0 +1,52 @@
|
||||
import { Alert, AlertTitle } from "@material-ui/lab";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { useSelector } from "react-redux";
|
||||
import Client from "../../../../client";
|
||||
import { activeInstance } from '../../../../redux/clientSlice';
|
||||
import { handleOnMutationSuccess } from "..";
|
||||
import BaseDialog from "../base-dialog";
|
||||
|
||||
export type DeleteMultiselectDialogProps = {
|
||||
mapsId: number[],
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const DeleteMultiselectDialog = (props: DeleteMultiselectDialogProps) => {
|
||||
const { onClose, mapsId } = props;
|
||||
const intl = useIntl();
|
||||
const client: Client = useSelector(activeInstance);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const mutation = useMutation((ids: number[]) => client.deleteMaps(ids),
|
||||
{
|
||||
onSuccess: () => handleOnMutationSuccess(props.onClose, queryClient)
|
||||
}
|
||||
);
|
||||
|
||||
const handleOnClose = (): void => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleOnSubmit = (): void => {
|
||||
mutation.mutate(mapsId);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BaseDialog
|
||||
onClose={handleOnClose} onSubmit={handleOnSubmit}
|
||||
title={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })}
|
||||
submitButton={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })} >
|
||||
<Alert severity="warning">
|
||||
<AlertTitle><FormattedMessage id="deletem.title" defaultMessage="All selected maps will be deleted" /></AlertTitle>
|
||||
<FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
|
||||
</Alert>
|
||||
</BaseDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default DeleteMultiselectDialog;
|
@ -7,7 +7,7 @@ import { useSelector } from "react-redux";
|
||||
import Client, { BasicMapInfo, ErrorInfo } from "../../../../client";
|
||||
import { activeInstance } from '../../../../redux/clientSlice';
|
||||
import Input from "../../../form/input";
|
||||
import { DialogProps, fetchMapById } from "..";
|
||||
import { SimpleDialogProps, fetchMapById } from "..";
|
||||
import BaseDialog from "../base-dialog";
|
||||
|
||||
export type DuplicateModel = {
|
||||
@ -17,14 +17,13 @@ export type DuplicateModel = {
|
||||
}
|
||||
|
||||
const defaultModel: DuplicateModel = { title: '', description: '', id: -1 };
|
||||
const DuplicateDialog = (props: DialogProps) => {
|
||||
const DuplicateDialog = (props: SimpleDialogProps) => {
|
||||
const service: Client = useSelector(activeInstance);
|
||||
const [model, setModel] = React.useState<DuplicateModel>(defaultModel);
|
||||
const [error, setError] = React.useState<ErrorInfo>();
|
||||
const { mapId, open } = props;
|
||||
const { mapId, onClose } = props;
|
||||
|
||||
const intl = useIntl();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const mutation = useMutation<number, ErrorInfo, DuplicateModel>((model: DuplicateModel) => {
|
||||
const { id, ...rest } = model;
|
||||
@ -41,9 +40,7 @@ const DuplicateDialog = (props: DialogProps) => {
|
||||
);
|
||||
|
||||
const handleOnClose = (): void => {
|
||||
props.onClose();
|
||||
setModel(defaultModel);
|
||||
setError(undefined);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
|
||||
|
@ -4,13 +4,13 @@ import { useQuery } from "react-query";
|
||||
import { useSelector } from "react-redux";
|
||||
import Client, { ChangeHistory } from "../../../../client";
|
||||
import { activeInstance } from '../../../../redux/clientSlice';
|
||||
import { DialogProps } from "..";
|
||||
import { SimpleDialogProps } from "..";
|
||||
import BaseDialog from "../base-dialog";
|
||||
import { Link, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip } from "@material-ui/core";
|
||||
import moment from "moment";
|
||||
|
||||
|
||||
const HistoryDialog = (props: DialogProps) => {
|
||||
const HistoryDialog = (props: SimpleDialogProps) => {
|
||||
const intl = useIntl();
|
||||
const mapId = props.mapId;
|
||||
|
||||
|
@ -16,7 +16,6 @@ export type ImportModel = {
|
||||
}
|
||||
|
||||
export type CreateProps = {
|
||||
open: boolean,
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
|
@ -8,12 +8,12 @@ import { useSelector } from "react-redux";
|
||||
import { QueryClient, useQuery } from 'react-query';
|
||||
import { activeInstance } from '../../../redux/clientSlice';
|
||||
import DuplicateDialog from './duplicate-dialog';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
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';
|
||||
import DeleteMultiselectDialog from './delete-multiselect-dialog';
|
||||
|
||||
export type BasicMapInfo = {
|
||||
name: string;
|
||||
@ -22,13 +22,12 @@ export type BasicMapInfo = {
|
||||
|
||||
type ActionDialogProps = {
|
||||
action?: ActionType,
|
||||
mapId: number,
|
||||
mapsId: number[],
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const ActionDispatcher = (props: ActionDialogProps) => {
|
||||
const history = useHistory();
|
||||
const mapId = props.mapId;
|
||||
const mapsId = props.mapsId;
|
||||
const action = props.action;
|
||||
|
||||
const handleOnClose = (): void => {
|
||||
@ -37,24 +36,26 @@ const ActionDispatcher = (props: ActionDialogProps) => {
|
||||
|
||||
switch (action) {
|
||||
case 'open':
|
||||
window.location.href = `/c/maps/${mapId}/edit`;
|
||||
window.location.href = `/c/maps/${mapsId}/edit`;
|
||||
break;
|
||||
case 'print':
|
||||
window.open(`/c/maps/${mapId}/print`, 'print');
|
||||
window.open(`/c/maps/${mapsId}/print`, 'print');
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<span>
|
||||
|
||||
{action === 'create' && <CreateDialog open={true} onClose={handleOnClose} /> }
|
||||
{action === 'delete' &&<DeleteDialog open={true} onClose={handleOnClose} mapId={mapId} />}
|
||||
{action === 'rename' && <RenameDialog open={true} onClose={handleOnClose} mapId={mapId} />}
|
||||
{action === 'duplicate' && <DuplicateDialog open={true} onClose={handleOnClose} mapId={mapId} />}
|
||||
{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}/>}
|
||||
{action === 'create' && <CreateDialog onClose={handleOnClose} />}
|
||||
{(action === 'delete' && mapsId.length == 1) && <DeleteDialog onClose={handleOnClose} mapId={mapsId[0]} />}
|
||||
{(action === 'delete' && mapsId.length > 1) && <DeleteMultiselectDialog onClose={handleOnClose} mapsId={mapsId} />}
|
||||
{action === 'rename' && <RenameDialog onClose={handleOnClose} mapId={mapsId[0]} />}
|
||||
{action === 'duplicate' && <DuplicateDialog onClose={handleOnClose} mapId={mapsId[0]} />}
|
||||
{action === 'history' && <HistoryDialog onClose={handleOnClose} mapId={mapsId[0]} />}
|
||||
{action === 'import' && <ImportDialog onClose={handleOnClose} />}
|
||||
{action === 'publish' && <PublishDialog onClose={handleOnClose} mapId={mapsId[0]} />}
|
||||
{action === 'info' && <InfoDialog onClose={handleOnClose} mapId={mapsId[0]} />}
|
||||
{action === 'create' && <CreateDialog onClose={handleOnClose} />}
|
||||
|
||||
</span >
|
||||
);
|
||||
@ -83,8 +84,7 @@ export const handleOnMutationSuccess = (onClose: () => void, queryClient: QueryC
|
||||
onClose();
|
||||
}
|
||||
|
||||
export type DialogProps = {
|
||||
open: boolean,
|
||||
export type SimpleDialogProps = {
|
||||
mapId: number,
|
||||
onClose: () => void
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage, useIntl } from 'react-intl';
|
||||
import { useMutation, useQueryClient } from 'react-query';
|
||||
import { useQueryClient } from 'react-query';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Card, List, ListItem, Paper, Typography } from '@material-ui/core';
|
||||
|
||||
@ -8,37 +8,28 @@ 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 { fetchMapById, SimpleDialogProps } from '..';
|
||||
import { useStyles } from './style';
|
||||
import moment from 'moment';
|
||||
|
||||
export type InfoProps = {
|
||||
mapId: number,
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const InfoDialog = (props: InfoProps) => {
|
||||
const InfoDialog = (props: SimpleDialogProps) => {
|
||||
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 intl = useIntl();
|
||||
const classes = useStyles();
|
||||
|
||||
const handleOnClose = (): void => {
|
||||
props.onClose();
|
||||
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.' })}
|
||||
description={intl.formatMessage({ id: 'info.description-msg', 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' }}>
|
||||
|
@ -9,15 +9,11 @@ import Client, { ErrorInfo } from '../../../../client';
|
||||
import { activeInstance } from '../../../../redux/clientSlice';
|
||||
import BaseDialog from '../base-dialog';
|
||||
import { TabContext, TabList, TabPanel } from '@material-ui/lab';
|
||||
import { fetchMapById, handleOnMutationSuccess } from '..';
|
||||
import { fetchMapById, handleOnMutationSuccess, SimpleDialogProps } from '..';
|
||||
import { useStyles } from './style';
|
||||
|
||||
export type PublishProps = {
|
||||
mapId: number,
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const PublishDialog = (props: PublishProps) => {
|
||||
const PublishDialog = (props: SimpleDialogProps) => {
|
||||
const { mapId, onClose } = props;
|
||||
const { map } = fetchMapById(mapId);
|
||||
|
||||
|
@ -4,7 +4,7 @@ import { useMutation, useQueryClient } from "react-query";
|
||||
import { useSelector } from "react-redux";
|
||||
import Client, { BasicMapInfo, ErrorInfo } from "../../../../client";
|
||||
import { activeInstance } from '../../../../redux/clientSlice';
|
||||
import { DialogProps, fetchMapById, handleOnMutationSuccess } from "..";
|
||||
import { SimpleDialogProps, fetchMapById, handleOnMutationSuccess } from "..";
|
||||
import Input from "../../../form/input";
|
||||
import { FormControl } from "@material-ui/core";
|
||||
import BaseDialog from "../base-dialog";
|
||||
@ -16,11 +16,11 @@ export type RenameModel = {
|
||||
}
|
||||
|
||||
const defaultModel: RenameModel = { title: '', description: '', id: -1 };
|
||||
const RenameDialog = (props: DialogProps) => {
|
||||
const RenameDialog = (props: SimpleDialogProps) => {
|
||||
const service: Client = useSelector(activeInstance);
|
||||
const [model, setModel] = React.useState<RenameModel>(defaultModel);
|
||||
const [error, setError] = React.useState<ErrorInfo>();
|
||||
const { mapId, open } = props;
|
||||
const { mapId } = props;
|
||||
|
||||
const intl = useIntl();
|
||||
const queryClient = useQueryClient();
|
||||
|
@ -11,7 +11,7 @@ import { useStyles } from './style';
|
||||
import { AccountCircle, AcUnitTwoTone, AddCircleTwoTone, CloudUploadTwoTone, DeleteOutlineTwoTone, EmailOutlined, EmojiPeopleOutlined, ExitToAppOutlined, FeedbackOutlined, Help, LabelTwoTone, PeopleAltTwoTone, PersonAddTwoTone, PersonOutlineTwoTone, PersonTwoTone, PolicyOutlined, PublicTwoTone, SettingsApplicationsOutlined, ShareTwoTone, StarTwoTone } from '@material-ui/icons';
|
||||
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Link, ListItemSecondaryAction, ListItemText, Menu, MenuItem, Tooltip } from '@material-ui/core';
|
||||
import { MapsList } from './maps-list';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { FormattedMessage, useIntl } from 'react-intl';
|
||||
import { useQuery, useMutation, useQueryClient } from 'react-query';
|
||||
import { activeInstance, activeInstanceStatus, ClientStatus } from '../../redux/clientSlice';
|
||||
import { useSelector } from 'react-redux';
|
||||
@ -46,6 +46,7 @@ const MapsPage = () => {
|
||||
const client: Client = useSelector(activeInstance);
|
||||
const queryClient = useQueryClient();
|
||||
const [activeDialog, setActiveDialog] = React.useState<ActionType | undefined>(undefined);
|
||||
const intl = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
document.title = 'Maps | WiseMapping';
|
||||
@ -59,7 +60,6 @@ const MapsPage = () => {
|
||||
);
|
||||
|
||||
const handleMenuClick = (filter: Filter) => {
|
||||
// Force reload ...
|
||||
queryClient.invalidateQueries('maps');
|
||||
setFilter(filter);
|
||||
};
|
||||
@ -115,7 +115,7 @@ const MapsPage = () => {
|
||||
elevation={0}>
|
||||
|
||||
<Toolbar>
|
||||
<Tooltip title="Create a New Map">
|
||||
<Tooltip title={intl.formatMessage({id:'maps.create-tooltip',defaultMessage:'Create a New Map'})}>
|
||||
<Button color="primary"
|
||||
size="medium"
|
||||
variant="contained"
|
||||
@ -141,7 +141,7 @@ const MapsPage = () => {
|
||||
<FormattedMessage id="action.import" defaultMessage="Import" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<ActionDispatcher action={activeDialog} onClose={() => setActiveDialog(undefined)} mapId={-1} />
|
||||
<ActionDispatcher action={activeDialog} onClose={() => setActiveDialog(undefined)} mapsId={[]} />
|
||||
|
||||
<div className={classes.rightButtonGroup}>
|
||||
<HelpToobarButton />
|
||||
|
@ -203,6 +203,9 @@ export const MapsList = (props: MapsListProps) => {
|
||||
const client: Client = useSelector(activeInstance);
|
||||
const intl = useIntl();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setSelected([]);
|
||||
setPage(0);
|
||||
@ -218,7 +221,7 @@ export const MapsList = (props: MapsListProps) => {
|
||||
const [activeRowAction, setActiveRowAction] = React.useState<ActionPanelState | undefined>(undefined);
|
||||
type ActiveDialog = {
|
||||
actionType: ActionType;
|
||||
mapId: number
|
||||
mapsId: number[];
|
||||
};
|
||||
|
||||
const [activeDialog, setActiveDialog] = React.useState<ActiveDialog | undefined>(undefined);
|
||||
@ -278,7 +281,6 @@ export const MapsList = (props: MapsListProps) => {
|
||||
};
|
||||
};
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const starredMultation = useMutation<void, ErrorInfo, number>((id: number) => {
|
||||
const map = mapsInfo.find(m => m.id == id);
|
||||
@ -289,7 +291,6 @@ export const MapsList = (props: MapsListProps) => {
|
||||
queryClient.invalidateQueries('maps');
|
||||
},
|
||||
onError: (error) => {
|
||||
// @todo ...
|
||||
// setError(error);
|
||||
}
|
||||
}
|
||||
@ -306,7 +307,7 @@ export const MapsList = (props: MapsListProps) => {
|
||||
|
||||
setActiveDialog({
|
||||
actionType: action as ActionType,
|
||||
mapId: mapId as number
|
||||
mapsId: [mapId] as number[]
|
||||
});
|
||||
}
|
||||
setActiveRowAction(undefined);
|
||||
@ -316,6 +317,13 @@ export const MapsList = (props: MapsListProps) => {
|
||||
setSearchCondition(e.target.value);
|
||||
}
|
||||
|
||||
const handleDeleteClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setActiveDialog({
|
||||
actionType: 'delete',
|
||||
mapsId: selected
|
||||
});
|
||||
}
|
||||
|
||||
const isSelected = (id: number) => selected.indexOf(id) !== -1;
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
@ -333,7 +341,9 @@ export const MapsList = (props: MapsListProps) => {
|
||||
variant="outlined"
|
||||
type="button"
|
||||
disableElevation={true}
|
||||
startIcon={<DeleteOutlined />}>
|
||||
onClick={handleDeleteClick}
|
||||
startIcon={<DeleteOutlined
|
||||
/>}>
|
||||
<FormattedMessage id="action.delete" defaultMessage="Delete" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@ -481,7 +491,7 @@ export const MapsList = (props: MapsListProps) => {
|
||||
|
||||
</Paper>
|
||||
|
||||
<ActionDispatcher action={activeDialog?.actionType} onClose={() => setActiveDialog(undefined)} mapId={activeDialog ? activeDialog.mapId : -1} />
|
||||
<ActionDispatcher action={activeDialog?.actionType} onClose={() => setActiveDialog(undefined)} mapsId={activeDialog ? activeDialog.mapsId : []} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user