mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-22 14:47:56 +01:00
Merged in migration (pull request #4)
Migration * README.md was updated and the webpack was modified in package web2d * README.md was updated and the webpack was modified in package mindplot * Merge branch 'develop' of https://bitbucket.org/lilabyus/wisemapping-frontend into develop * Mindplot module script correction * Pull branch develop remote * Webcomponent module webpack correction * Pull branch develop * Material-ui library correction and cypress test correction * Script correction * Cypress test correction
This commit is contained in:
Ezequiel Vega
Paulo Veiga
parent
5599ea2659
commit
6c5bff906a
@ -21,7 +21,7 @@
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack --config webpack.prod.js",
|
||||
"test": "webpack serve --config webpack.test.js",
|
||||
"tests": "webpack serve --config webpack.test.js",
|
||||
"start": "webpack serve --config webpack.dev.js"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
"scripts": {
|
||||
"start": "nodemon --watch lib",
|
||||
"build": "webpack --config webpack.prod.js",
|
||||
"test": "webpack serve --config webpack.test.js"
|
||||
"tests": "webpack serve --config webpack.test.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.14.6",
|
||||
|
||||
@ -72,8 +72,8 @@ const App = (): ReactElement => {
|
||||
</QueryClientProvider>
|
||||
</Provider>
|
||||
) : (
|
||||
<div>Loading ... </div>
|
||||
);
|
||||
<div>Loading ... </div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -66,7 +66,7 @@ const CreateDialog = ({ onClose }: CreateProps): React.ReactElement => {
|
||||
error={error}
|
||||
title={intl.formatMessage({
|
||||
id: 'create.title',
|
||||
defaultMessage: 'Create a new mindmap.',
|
||||
defaultMessage: 'Create a new mindmap',
|
||||
})}
|
||||
description={intl.formatMessage({
|
||||
id: 'create.description',
|
||||
|
||||
@ -67,7 +67,10 @@ const MapsPage = (): ReactElement => {
|
||||
const intl = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
document.title = intl.formatMessage({ id: 'maps.page-title', defaultMessage: 'My Maps | WiseMapping' });
|
||||
document.title = intl.formatMessage({
|
||||
id: 'maps.page-title',
|
||||
defaultMessage: 'My Maps | WiseMapping',
|
||||
});
|
||||
}, []);
|
||||
|
||||
const mutation = useMutation((id: number) => client.deleteLabel(id), {
|
||||
@ -94,27 +97,27 @@ const MapsPage = (): ReactElement => {
|
||||
const filterButtons: ToolbarButtonInfo[] = [
|
||||
{
|
||||
filter: { type: 'all' },
|
||||
label: intl.formatMessage({ id: 'maps.nav-all', defaultMessage:'All' }),
|
||||
label: intl.formatMessage({ id: 'maps.nav-all', defaultMessage: 'All' }),
|
||||
icon: <ScatterPlotTwoTone color="secondary" />,
|
||||
},
|
||||
{
|
||||
filter: { type: 'owned' },
|
||||
label: intl.formatMessage({ id: 'maps.nav-onwned', defaultMessage:'Owned' }),
|
||||
label: intl.formatMessage({ id: 'maps.nav-onwned', defaultMessage: 'Owned' }),
|
||||
icon: <PersonOutlineTwoTone color="secondary" />,
|
||||
},
|
||||
{
|
||||
filter: { type: 'starred' },
|
||||
label: intl.formatMessage({ id: 'maps.nav-starred', defaultMessage:'Starred' }),
|
||||
label: intl.formatMessage({ id: 'maps.nav-starred', defaultMessage: 'Starred' }),
|
||||
icon: <StarTwoTone color="secondary" />,
|
||||
},
|
||||
{
|
||||
filter: { type: 'shared' },
|
||||
label: intl.formatMessage({ id: 'maps.nav-shared', defaultMessage:'Shared with me' }),
|
||||
label: intl.formatMessage({ id: 'maps.nav-shared', defaultMessage: 'Shared with me' }),
|
||||
icon: <ShareTwoTone color="secondary" />,
|
||||
},
|
||||
{
|
||||
filter: { type: 'public' },
|
||||
label: intl.formatMessage({ id: 'maps.nav-public', defaultMessage:'Public' }),
|
||||
label: intl.formatMessage({ id: 'maps.nav-public', defaultMessage: 'Public' }),
|
||||
icon: <PublicTwoTone color="secondary" />,
|
||||
},
|
||||
];
|
||||
@ -219,18 +222,19 @@ const MapsPage = (): ReactElement => {
|
||||
</div>
|
||||
|
||||
<List component="nav">
|
||||
{filterButtons.map(buttonInfo => {
|
||||
return (<StyleListItem
|
||||
icon={buttonInfo.icon}
|
||||
label={buttonInfo.label}
|
||||
filter={buttonInfo.filter}
|
||||
active={filter}
|
||||
onClick={handleMenuClick}
|
||||
onDelete={handleLabelDelete}
|
||||
key={`${buttonInfo.filter.type}:${buttonInfo.label}`}
|
||||
/>)
|
||||
}
|
||||
)}
|
||||
{filterButtons.map((buttonInfo) => {
|
||||
return (
|
||||
<StyleListItem
|
||||
icon={buttonInfo.icon}
|
||||
label={buttonInfo.label}
|
||||
filter={buttonInfo.filter}
|
||||
active={filter}
|
||||
onClick={handleMenuClick}
|
||||
onDelete={handleLabelDelete}
|
||||
key={`${buttonInfo.filter.type}:${buttonInfo.label}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
|
||||
<div
|
||||
|
||||
@ -57,9 +57,9 @@ function getComparator<Key extends keyof any>(
|
||||
order: Order,
|
||||
orderBy: Key
|
||||
): (
|
||||
a: { [key in Key]: number | string | boolean | Label[] | undefined },
|
||||
b: { [key in Key]: number | string | Label[] | boolean }
|
||||
) => number {
|
||||
a: { [key in Key]: number | string | boolean | Label[] | undefined },
|
||||
b: { [key in Key]: number | string | Label[] | boolean }
|
||||
) => number {
|
||||
return order === 'desc'
|
||||
? (a, b) => descendingComparator(a, b, orderBy)
|
||||
: (a, b) => -descendingComparator(a, b, orderBy);
|
||||
@ -95,15 +95,8 @@ interface EnhancedTableProps {
|
||||
function EnhancedTableHead(props: EnhancedTableProps) {
|
||||
const intl = useIntl();
|
||||
|
||||
const {
|
||||
classes,
|
||||
onSelectAllClick,
|
||||
order,
|
||||
orderBy,
|
||||
numSelected,
|
||||
rowCount,
|
||||
onRequestSort,
|
||||
} = props;
|
||||
const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
|
||||
props;
|
||||
|
||||
const createSortHandler = (property: keyof MapInfo) => (event: React.MouseEvent<unknown>) => {
|
||||
onRequestSort(event, property);
|
||||
@ -117,7 +110,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
|
||||
},
|
||||
{
|
||||
id: 'labels',
|
||||
numeric: false
|
||||
numeric: false,
|
||||
},
|
||||
{
|
||||
id: 'createdBy',
|
||||
@ -222,7 +215,8 @@ const mapsFilter = (filter: Filter, search: string): ((mapInfo: MapInfo) => bool
|
||||
break;
|
||||
case 'label':
|
||||
result =
|
||||
!mapInfo.labels || mapInfo.labels.some((label) => label.id === (filter as LabelFilter).label.id)
|
||||
!mapInfo.labels ||
|
||||
mapInfo.labels.some((label) => label.id === (filter as LabelFilter).label.id);
|
||||
break;
|
||||
case 'public':
|
||||
result = mapInfo.isPublic;
|
||||
@ -336,19 +330,18 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
|
||||
event.stopPropagation();
|
||||
};
|
||||
};
|
||||
9
|
||||
9;
|
||||
const starredMultation = useMutation<void, ErrorInfo, number>(
|
||||
(id: number) => {
|
||||
const map = mapsInfo.find((m) => m.id == id);
|
||||
const starred = !(map?.starred);
|
||||
const starred = !map?.starred;
|
||||
|
||||
// Follow a optimistic update approach ...
|
||||
queryClient.setQueryData<MapInfo[]>('maps', mapsInfo => {
|
||||
queryClient.setQueryData<MapInfo[]>('maps', (mapsInfo) => {
|
||||
if (map) {
|
||||
map.starred = starred;
|
||||
}
|
||||
return mapsInfo || [];
|
||||
|
||||
});
|
||||
return client.updateStarred(id, starred);
|
||||
},
|
||||
@ -404,7 +397,13 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
|
||||
<Toolbar className={classes.toolbar} variant="dense">
|
||||
<div className={classes.toolbarActions}>
|
||||
{selected.length > 0 && (
|
||||
<Tooltip arrow={true} title={intl.formatMessage({ id: 'map.delete-selected', defaultMessage: 'Delete selected' })}>
|
||||
<Tooltip
|
||||
arrow={true}
|
||||
title={intl.formatMessage({
|
||||
id: 'map.delete-selected',
|
||||
defaultMessage: 'Delete selected',
|
||||
})}
|
||||
>
|
||||
<Button
|
||||
color="primary"
|
||||
size="medium"
|
||||
@ -429,8 +428,8 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
|
||||
rowsPerPageOptions={[]}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onChangePage={handleChangePage}
|
||||
onChangeRowsPerPage={handleChangeRowsPerPage}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
component="div"
|
||||
/>
|
||||
|
||||
@ -439,7 +438,10 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
|
||||
<SearchIcon />
|
||||
</div>
|
||||
<InputBase
|
||||
placeholder={intl.formatMessage({ id: 'maps.search-action', defaultMessage: 'Search ...' })}
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'maps.search-action',
|
||||
defaultMessage: 'Search ...',
|
||||
})}
|
||||
classes={{
|
||||
root: classes.searchInputRoot,
|
||||
input: classes.searchInputInput,
|
||||
@ -478,119 +480,140 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
stableSort(mapsInfo, getComparator(order, orderBy))
|
||||
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
||||
.map((row: MapInfo) => {
|
||||
const isItemSelected = isSelected(row.id);
|
||||
const labelId = row.id;
|
||||
stableSort(mapsInfo, getComparator(order, orderBy))
|
||||
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
||||
.map((row: MapInfo) => {
|
||||
const isItemSelected = isSelected(row.id);
|
||||
const labelId = row.id;
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
hover
|
||||
onClick={(event) => handleRowClick(event, row.id)}
|
||||
role="checkbox"
|
||||
aria-checked={isItemSelected}
|
||||
tabIndex={-1}
|
||||
key={row.id}
|
||||
selected={isItemSelected}
|
||||
style={{ border: '0' }}
|
||||
return (
|
||||
<TableRow
|
||||
hover
|
||||
onClick={(event) => handleRowClick(event, row.id)}
|
||||
role="checkbox"
|
||||
aria-checked={isItemSelected}
|
||||
tabIndex={-1}
|
||||
key={row.id}
|
||||
selected={isItemSelected}
|
||||
style={{ border: '0' }}
|
||||
>
|
||||
<TableCell
|
||||
padding="checkbox"
|
||||
className={classes.bodyCell}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isItemSelected}
|
||||
inputProps={{
|
||||
'aria-labelledby': String(labelId),
|
||||
}}
|
||||
size="small"
|
||||
/>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
padding="checkbox"
|
||||
className={classes.bodyCell}
|
||||
>
|
||||
<Tooltip
|
||||
arrow={true}
|
||||
title={intl.formatMessage({
|
||||
id: 'maps.tooltip-starred',
|
||||
defaultMessage: 'Starred',
|
||||
})}
|
||||
>
|
||||
<TableCell
|
||||
padding="checkbox"
|
||||
className={classes.bodyCell}
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) =>
|
||||
handleStarred(e, row.id)
|
||||
}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isItemSelected}
|
||||
inputProps={{
|
||||
'aria-labelledby': String(labelId),
|
||||
<StarRateRoundedIcon
|
||||
color="action"
|
||||
style={{
|
||||
color: row.starred
|
||||
? 'yellow'
|
||||
: 'gray',
|
||||
}}
|
||||
size="small"
|
||||
/>
|
||||
</TableCell>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
padding="checkbox"
|
||||
className={classes.bodyCell}
|
||||
<TableCell className={classes.bodyCell}>
|
||||
<Tooltip
|
||||
arrow={true}
|
||||
title={intl.formatMessage({
|
||||
id: 'maps.tooltip-open',
|
||||
defaultMessage: 'Open for edition',
|
||||
})}
|
||||
placement="bottom-start"
|
||||
>
|
||||
<Link
|
||||
href={`/c/maps/${row.id}/edit`}
|
||||
color="textPrimary"
|
||||
underline="always"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Tooltip arrow={true} title={intl.formatMessage({ id: 'maps.tooltip-starred', defaultMessage: 'Starred' })}>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={(e) =>
|
||||
handleStarred(e, row.id)
|
||||
}
|
||||
>
|
||||
<StarRateRoundedIcon
|
||||
color="action"
|
||||
style={{
|
||||
color: row.starred
|
||||
? 'yellow'
|
||||
: 'gray',
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
{row.title}
|
||||
</Link>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className={classes.bodyCell}>
|
||||
<Tooltip
|
||||
arrow={true}
|
||||
title={intl.formatMessage({ id: 'maps.tooltip-open', defaultMessage: 'Open for edition' })}
|
||||
placement="bottom-start"
|
||||
>
|
||||
<Link
|
||||
href={`/c/maps/${row.id}/edit`}
|
||||
color="textPrimary"
|
||||
underline="always"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{row.title}
|
||||
</Link>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
<TableCell className={classes.bodyCell}>
|
||||
<LabelsCell labels={row.labels} />
|
||||
</TableCell>
|
||||
|
||||
<TableCell className={classes.bodyCell}>
|
||||
<LabelsCell labels={row.labels} />
|
||||
</TableCell>
|
||||
<TableCell className={classes.bodyCell}>
|
||||
{row.createdBy}
|
||||
</TableCell>
|
||||
|
||||
<TableCell className={classes.bodyCell}>
|
||||
{row.createdBy}
|
||||
</TableCell>
|
||||
<TableCell className={classes.bodyCell}>
|
||||
<Tooltip
|
||||
arrow={true}
|
||||
title={intl.formatMessage(
|
||||
{
|
||||
id: 'maps.modified-by-desc',
|
||||
defaultMessage:
|
||||
'Modified by {by} on {on}',
|
||||
},
|
||||
{
|
||||
by: row.lastModificationBy,
|
||||
on: dayjs(
|
||||
row.lastModificationTime
|
||||
).format('lll'),
|
||||
}
|
||||
)}
|
||||
placement="bottom-start"
|
||||
>
|
||||
<span>
|
||||
{dayjs(
|
||||
row.lastModificationTime
|
||||
).fromNow()}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className={classes.bodyCell}>
|
||||
<Tooltip
|
||||
arrow={true}
|
||||
title={intl.formatMessage({ id: 'maps.modified-by-desc', defaultMessage: 'Modified by {by} on {on}' }, { by: row.lastModificationBy, on: dayjs(row.lastModificationTime).format('lll') })}
|
||||
placement="bottom-start"
|
||||
>
|
||||
<span>
|
||||
{dayjs(
|
||||
row.lastModificationTime
|
||||
).fromNow()}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className={classes.bodyCell}>
|
||||
<Tooltip
|
||||
arrow={true}
|
||||
title={intl.formatMessage({
|
||||
id: 'map.more-actions',
|
||||
defaultMessage: 'More Actions',
|
||||
})}
|
||||
>
|
||||
<IconButton
|
||||
aria-label="Others"
|
||||
size="small"
|
||||
onClick={handleActionClick(row.id)}
|
||||
>
|
||||
<MoreHorizIcon color="action" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
<TableCell className={classes.bodyCell}>
|
||||
<Tooltip
|
||||
arrow={true}
|
||||
title={intl.formatMessage({
|
||||
id: 'map.more-actions',
|
||||
defaultMessage: 'More Actions',
|
||||
})}
|
||||
>
|
||||
<IconButton
|
||||
aria-label="Others"
|
||||
size="small"
|
||||
onClick={handleActionClick(row.id)}
|
||||
>
|
||||
<MoreHorizIcon color="action" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
@ -601,6 +624,6 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
|
||||
onClose={() => setActiveDialog(undefined)}
|
||||
mapsId={activeDialog ? activeDialog.mapsId : []}
|
||||
/>
|
||||
</div >
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { fade } from '@material-ui/core/styles';
|
||||
import { Theme } from '@material-ui/core/styles/createMuiTheme';
|
||||
import { Theme } from '@material-ui/core/styles/createTheme';
|
||||
import createStyles from '@material-ui/core/styles/createStyles';
|
||||
import makeStyles from '@material-ui/core/styles/makeStyles';
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Theme } from '@material-ui/core/styles/createMuiTheme';
|
||||
import { Theme } from '@material-ui/core/styles/createTheme';
|
||||
import createStyles from '@material-ui/core/styles/createStyles';
|
||||
import makeStyles from '@material-ui/core/styles/makeStyles';
|
||||
|
||||
@ -27,11 +27,11 @@ export const useStyles = makeStyles((theme: Theme) =>
|
||||
},
|
||||
newMapButton: {
|
||||
marginRight: 10,
|
||||
minWidth: '130px'
|
||||
minWidth: '130px',
|
||||
},
|
||||
importButton: {
|
||||
marginRight: 10,
|
||||
minWidth: '130px'
|
||||
minWidth: '130px',
|
||||
},
|
||||
rightButtonGroup: {
|
||||
marginRight: 10,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
|
||||
import createMuiTheme from '@material-ui/core/styles/createTheme';
|
||||
|
||||
const theme = createMuiTheme({
|
||||
overrides: {
|
||||
@ -7,7 +7,7 @@ const theme = createMuiTheme({
|
||||
body: {
|
||||
backgroundColor: 'white',
|
||||
// Important: This size is the min to diplay all pages except maps list.
|
||||
minWidth: '450px'
|
||||
minWidth: '450px',
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -28,9 +28,9 @@ const theme = createMuiTheme({
|
||||
root: {
|
||||
color: '#f9a826',
|
||||
},
|
||||
outlined:{
|
||||
zIndex: 'inherit'
|
||||
}
|
||||
outlined: {
|
||||
zIndex: 'inherit',
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
root: {
|
||||
@ -47,7 +47,7 @@ const theme = createMuiTheme({
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(249, 168, 38, 0.91)',
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
|
||||
3
packages/webcomponent/.gitignore
vendored
3
packages/webcomponent/.gitignore
vendored
@ -0,0 +1,3 @@
|
||||
lib/
|
||||
node_module/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user