Add create dialog

packages/webapp/lang/en.json

@@ -56,6 +56,15 @@
   "common.wait": {
     "defaultMessage": "Please wait ..."
   },
+  "create.button": {
+    "defaultMessage": "Create"
+  },
+  "create.description": {
+    "defaultMessage": "Please, fill the new map name and description."
+  },
+  "create.title": {
+    "defaultMessage": "Create a new mindmap"
+  },
   "duplicate.title": {
     "defaultMessage": "Duplicate"
   },

packages/webapp/src/client/index.ts

@@ -33,6 +33,7 @@ export type ErrorInfo = {
 }
 
 interface Client {
+    createMap(rest: { name: string; description?: string | undefined }) 
     deleteLabel(label: string): Promise<unknown>;
     registerNewUser(user: NewUser): Promise<void>;
     resetPassword(email: string): Promise<void>;

packages/webapp/src/client/mock-client/index.ts

@@ -43,7 +43,10 @@ class MockClient implements Client {
 
     }
 
-
+    createMap(rest: { name: string; description?: string | undefined; }) {
+        throw new Error("Method not implemented.");
+    }
+s
     fetchLabels(): Promise<string[]> {
         console.log("Fetching  labels from server")
         return Promise.resolve(this.labels);

packages/webapp/src/compiled-lang/en.json

@@ -113,6 +113,24 @@
       "value": "Please wait ..."
     }
   ],
+  "create.button": [
+    {
+      "type": 0,
+      "value": "Create"
+    }
+  ],
+  "create.description": [
+    {
+      "type": 0,
+      "value": "Please, fill the new map name and description."
+    }
+  ],
+  "create.title": [
+    {
+      "type": 0,
+      "value": "Create a new mindmap"
+    }
+  ],
   "duplicate.title": [
     {
       "type": 0,

packages/webapp/src/components/maps-page/action-chooser/index.tsx

@@ -12,7 +12,7 @@ import ShareOutlinedIcon from '@material-ui/icons/ShareOutlined';
 import { FormattedMessage } from 'react-intl';
 import { LabelOutlined } from '@material-ui/icons';
 
-export type ActionType = 'open' | 'share' | 'delete' | 'info' | 'duplicate' | 'export' | 'label' | 'rename' | 'print' | 'info' | 'publish' | 'history' | undefined;
+export type ActionType = 'open' | 'share' | 'delete' | 'info' | 'create'| 'duplicate' | 'export' | 'label' | 'rename' | 'print' | 'info' | 'publish' | 'history' | undefined;
 
 interface ActionProps {
   onClose: (action: ActionType) => void;

packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/index.tsx

@@ -68,7 +68,7 @@ const BaseDialog = (props: DialogProps) => {
                                 variant="contained"
                                 type="submit"
                                 disableElevation={true}>
-                                {props.title}
+                                {props.submitButton}
                             </Button>) : null
                         }
                     </StyledDialogActions>

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

@@ -0,0 +1,85 @@
+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 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";
+
+export type CreateModel = {
+    name: string;
+    description?: string;
+}
+
+export type CreateProps = {
+    open: boolean,
+    onClose: () => void
+  }
+  
+const defaultModel: CreateModel = { name: '', 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);
+    },
+        {
+            onSuccess: () => {
+                handleOnMutationSuccess(props.onClose, queryClient);
+            },
+            onError: (error) => {
+                setError(error);
+            }
+        }
+    );
+
+    const handleOnClose = (): void => {
+        props.onClose();
+        setModel(defaultModel);
+        setError(undefined);
+    };
+
+    const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+        event.preventDefault();
+        mutation.mutate(model);
+    };
+
+    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        event.preventDefault();
+
+        const name = event.target.name;
+        const value = event.target.value;
+        setModel({ ...model, [name as keyof BasicMapInfo]: value });
+    }
+
+    return (
+        <div>
+            <BaseDialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
+                title={intl.formatMessage({ id: 'create.title', defaultMessage: 'Create a new mindmap' })}
+                description={intl.formatMessage({ id: 'create.description', defaultMessage: 'Please, fill the new map name and description.' })}
+                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="description" type="text" label={{ id: "action.rename-description-placeholder", defaultMessage: "Description" }}
+                        value={model.description} onChange={handleOnChange} required={false} fullWidth={true} />
+                </FormControl>
+            </BaseDialog>
+        </div>
+    );
+}
+
+export default CreateDialog;

packages/webapp/src/components/maps-page/action-dispatcher/index.tsx

@@ -10,6 +10,7 @@ import { activeInstance } from '../../../reducers/serviceSlice';
 import DuplicateDialog from './duplicate';
 import { useHistory } from 'react-router-dom';
 import InfoDialog from './info';
+import CreateDialog from './create';
 
 
 export type BasicMapInfo = {
@@ -43,6 +44,7 @@ const ActionDispatcher = (props: ActionDialogProps) => {
 
   return (
     <span>
+      <CreateDialog open={action === 'create'} onClose={handleOnClose}/>
       <DeleteDialog open={action === 'delete'} onClose={handleOnClose} mapId={mapId} />
       <RenameDialog open={action === 'rename'} onClose={handleOnClose} mapId={mapId} />
       <DuplicateDialog open={action === 'duplicate'} onClose={handleOnClose} mapId={mapId} />

packages/webapp/src/components/maps-page/index.tsx

@@ -16,11 +16,12 @@ import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { activeInstance } from '../../reducers/serviceSlice';
 import { useSelector } from 'react-redux';
 import Client from '../../client';
+import ActionDispatcher from './action-dispatcher';
+import { ActionType } from './action-chooser';
 
 const logoIcon = require('../../images/logo-small.svg');
 const poweredByIcon = require('../../images/pwrdby-white.svg');
 
-
 export type Filter = GenericFilter | LabelFilter;
 
 export interface GenericFilter {
@@ -42,6 +43,7 @@ const MapsPage = () => {
     const [filter, setFilter] = React.useState<Filter>({ type: 'all' });
     const client: Client = useSelector(activeInstance);
     const queryClient = useQueryClient();
+    const [activeDialog, setActiveDialog] = React.useState<ActionType | undefined>(undefined);
 
 
     useEffect(() => {
@@ -103,8 +105,14 @@ const MapsPage = () => {
 
                 <Toolbar>
                     <Tooltip title="Create a New Map">
-                        <Button color="primary" size="medium" variant="contained" type="button"
+                        <Button color="primary"
-                            disableElevation={true} startIcon={<AddCircleTwoTone />} className={classes.newMapButton}>
+                            size="medium"
+                            variant="contained"
+                            type="button"
+                            disableElevation={true}
+                            startIcon={<AddCircleTwoTone />}
+                            className={classes.newMapButton}
+                            onClick={e => setActiveDialog('create')}>
                             <FormattedMessage id="action.new" defaultMessage="New Map" />
                         </Button>
                     </Tooltip>
@@ -115,6 +123,7 @@ const MapsPage = () => {
                             <FormattedMessage id="action.import" defaultMessage="Import" />
                         </Button>
                     </Tooltip>
+                    <ActionDispatcher action={activeDialog} onClose={() => setActiveDialog(undefined)} mapId={-1} />
 
                     <div className={classes.rightButtonGroup}>
                         <HelpToobarButton />

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

@@ -392,7 +392,11 @@ export const MapsList = (props: MapsListProps) => {
             />
 
             <TableBody>
-              {isLoading ? (<TableRow></TableRow>) : stableSort(mapsInfo, getComparator(order, orderBy))
+              {isLoading ? (
+                <TableRow><TableCell rowSpan={6}>Loading ...</TableCell></TableRow>) :
+                (mapsInfo.length == 0 ?
+                  (<TableRow><TableCell rowSpan={6}>No matching records found</TableCell></TableRow>) :
+                  stableSort(mapsInfo, getComparator(order, orderBy))
                     .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                     .map((row: MapInfo) => {
                       const isItemSelected = isSelected(row.id);
@@ -460,7 +464,7 @@ export const MapsList = (props: MapsListProps) => {
                           </TableCell>
                         </TableRow>
                       );
-                })}
+                    }))}
             </TableBody>
           </Table>
         </TableContainer>