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

WIP: share dialog

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-02-17 18:10:45 -08:00
parent a1e61c6208
commit c440e2426c
2 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,10 +17,11 @@ export type DialogProps = {
submitButton?: string; submitButton?: string;
actionUrl?: string; actionUrl?: string;
maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
} }
const BaseDialog = (props: DialogProps): React.ReactElement => { const BaseDialog = (props: DialogProps): React.ReactElement => {
const { onClose, onSubmit } = props; const { onClose, onSubmit, maxWidth = 'sm' } = props;
const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -36,7 +37,7 @@ const BaseDialog = (props: DialogProps): React.ReactElement => {
<StyledDialog <StyledDialog
open={true} open={true}
onClose={onClose} onClose={onClose}
maxWidth="sm" maxWidth={maxWidth}
fullWidth={true}> fullWidth={true}>
<form autoComplete="off" onSubmit={handleOnSubmit}> <form autoComplete="off" onSubmit={handleOnSubmit}>
<StyledDialogTitle> <StyledDialogTitle>

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

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import { useMutation, useQueryClient } from "react-query"; import { useMutation, useQueryClient } from "react-query";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import Client from "../../../../classes/client"; import Client from "../../../../classes/client";
@ -13,6 +13,12 @@ import IconButton from "@material-ui/core/IconButton";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction"; import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import DeleteIcon from '@material-ui/icons/Delete'; import DeleteIcon from '@material-ui/icons/Delete';
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => { const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
@ -39,13 +45,31 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
<div> <div>
<BaseDialog <BaseDialog
onClose={handleOnClose} onSubmit={handleOnSubmit} onClose={handleOnClose} onSubmit={handleOnSubmit}
title={intl.formatMessage({ id: "share.delete-title", defaultMessage: "Share with collaborators" })} title={intl.formatMessage({ id: "share.delete-title", defaultMessage: "Share with people" })}
description={intl.formatMessage({ id: "share.delete-description", defaultMessage: "Collaboration " })} description={intl.formatMessage({ id: "share.delete-description", defaultMessage: "Collaboration " })}
submitButton={intl.formatMessage({ id: "share.delete-title", defaultMessage: "Share" })} > submitButton={intl.formatMessage({ id: "share.delete-title", defaultMessage: "Share" })}
maxWidth="md">
<div style={{ padding: '10px 10px', background: '#f9f9f9' }}>
<TextField id="email" style={{ width: '300px' }} size="small" type="text" variant="outlined" placeholder="Add collaboratos's emails seperated by commas" label="Email" />
<Select
value='edit'
variant="outlined"
style={{ margin: '0px 10px' }}
>
<MenuItem value='edit'>Can Edit</MenuItem>
<MenuItem value='view'>Can View</MenuItem>
</Select>
<div style={{ margin: "10px 0px", padding:"30px 0px" ,background:"gray" }}> <FormControlLabel
<input type="text" placeholder="Enter collaboratior emails separated by comas" /> value="start"
control={<Checkbox color="primary" />}
label={<FormattedMessage id="share.add-message" defaultMessage="Add message" />}
labelPlacement="end"
/>
<Button
color="primary"
variant="contained" disableElevation={true}><FormattedMessage id="share.add-button" defaultMessage="Add " /></Button>
</div> </div>
<Paper elevation={1} style={{ maxHeight: 200, overflowY: 'scroll' }} variant="outlined"> <Paper elevation={1} style={{ maxHeight: 200, overflowY: 'scroll' }} variant="outlined">
@ -68,7 +92,7 @@ const ShareDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement
</Paper> </Paper>
</BaseDialog> </BaseDialog>
</div> </div >
); );
} }