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

Merged in migration (pull request #4)

Browse Source 
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 2021-10-02 16:16:20 +00:00 committed by Paulo Veiga
parent 5599ea2659
commit 6c5bff906a
10 changed files with 189 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/mindplot/package.json
View File

@ -21,7 +21,7 @@
}, },
"scripts": { "scripts": {
"build": "webpack --config webpack.prod.js", "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" "start": "webpack serve --config webpack.dev.js"
}, },
"dependencies": { "dependencies": {

2
packages/web2d/package.json
View File

@ -22,7 +22,7 @@
"scripts": { "scripts": {
"start": "nodemon --watch lib", "start": "nodemon --watch lib",
"build": "webpack --config webpack.prod.js", "build": "webpack --config webpack.prod.js",
"test": "webpack serve --config webpack.test.js" "tests": "webpack serve --config webpack.test.js"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.14.6", "@babel/core": "^7.14.6",

4
packages/webapp/src/app.tsx
View File

@ -72,8 +72,8 @@ const App = (): ReactElement => {
</QueryClientProvider> </QueryClientProvider>
</Provider> </Provider>
) : ( ) : (
<div>Loading ... </div> <div>Loading ... </div>
); );
}; };
export default App; export default App;

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

@ -66,7 +66,7 @@ const CreateDialog = ({ onClose }: CreateProps): React.ReactElement => {
error={error} error={error}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'create.title', id: 'create.title',
defaultMessage: 'Create a new mindmap.', defaultMessage: 'Create a new mindmap',
})} })}
description={intl.formatMessage({ description={intl.formatMessage({
id: 'create.description', id: 'create.description',

40
packages/webapp/src/components/maps-page/index.tsx
View File

@ -67,7 +67,10 @@ const MapsPage = (): ReactElement => {
const intl = useIntl(); const intl = useIntl();
useEffect(() => { 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), { const mutation = useMutation((id: number) => client.deleteLabel(id), {
@ -94,27 +97,27 @@ const MapsPage = (): ReactElement => {
const filterButtons: ToolbarButtonInfo[] = [ const filterButtons: ToolbarButtonInfo[] = [
{ {
filter: { type: 'all' }, 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" />, icon: <ScatterPlotTwoTone color="secondary" />,
}, },
{ {
filter: { type: 'owned' }, 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" />, icon: <PersonOutlineTwoTone color="secondary" />,
}, },
{ {
filter: { type: 'starred' }, 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" />, icon: <StarTwoTone color="secondary" />,
}, },
{ {
filter: { type: 'shared' }, 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" />, icon: <ShareTwoTone color="secondary" />,
}, },
{ {
filter: { type: 'public' }, 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" />, icon: <PublicTwoTone color="secondary" />,
}, },
]; ];
@ -219,18 +222,19 @@ const MapsPage = (): ReactElement => {
</div> </div>
<List component="nav"> <List component="nav">
{filterButtons.map(buttonInfo => { {filterButtons.map((buttonInfo) => {
return (<StyleListItem return (
icon={buttonInfo.icon} <StyleListItem
label={buttonInfo.label} icon={buttonInfo.icon}
filter={buttonInfo.filter} label={buttonInfo.label}
active={filter} filter={buttonInfo.filter}
onClick={handleMenuClick} active={filter}
onDelete={handleLabelDelete} onClick={handleMenuClick}
key={`${buttonInfo.filter.type}:${buttonInfo.label}`} onDelete={handleLabelDelete}
/>) key={`${buttonInfo.filter.type}:${buttonInfo.label}`}
} />
)} );
})}
</List> </List>
<div <div

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

@ -57,9 +57,9 @@ function getComparator<Key extends keyof any>(
order: Order, order: Order,
orderBy: Key orderBy: Key
): ( ): (
a: { [key in Key]: number | string | boolean | Label[] | undefined }, a: { [key in Key]: number | string | boolean | Label[] | undefined },
b: { [key in Key]: number | string | Label[] | boolean } b: { [key in Key]: number | string | Label[] | boolean }
) => number { ) => number {
return order === 'desc' return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy) ? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy); : (a, b) => -descendingComparator(a, b, orderBy);
@ -95,15 +95,8 @@ interface EnhancedTableProps {
function EnhancedTableHead(props: EnhancedTableProps) { function EnhancedTableHead(props: EnhancedTableProps) {
const intl = useIntl(); const intl = useIntl();
const { const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
classes, props;
onSelectAllClick,
order,
orderBy,
numSelected,
rowCount,
onRequestSort,
} = props;
const createSortHandler = (property: keyof MapInfo) => (event: React.MouseEvent<unknown>) => { const createSortHandler = (property: keyof MapInfo) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property); onRequestSort(event, property);
@ -117,7 +110,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
}, },
{ {
id: 'labels', id: 'labels',
numeric: false numeric: false,
}, },
{ {
id: 'createdBy', id: 'createdBy',
@ -222,7 +215,8 @@ const mapsFilter = (filter: Filter, search: string): ((mapInfo: MapInfo) => bool
break; break;
case 'label': case 'label':
result = 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; break;
case 'public': case 'public':
result = mapInfo.isPublic; result = mapInfo.isPublic;
@ -336,19 +330,18 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
event.stopPropagation(); event.stopPropagation();
}; };
}; };
9 9;
const starredMultation = useMutation<void, ErrorInfo, number>( const starredMultation = useMutation<void, ErrorInfo, number>(
(id: number) => { (id: number) => {
const map = mapsInfo.find((m) => m.id == id); const map = mapsInfo.find((m) => m.id == id);
const starred = !(map?.starred); const starred = !map?.starred;
// Follow a optimistic update approach ... // Follow a optimistic update approach ...
queryClient.setQueryData<MapInfo[]>('maps', mapsInfo => { queryClient.setQueryData<MapInfo[]>('maps', (mapsInfo) => {
if (map) { if (map) {
map.starred = starred; map.starred = starred;
} }
return mapsInfo || []; return mapsInfo || [];
}); });
return client.updateStarred(id, starred); return client.updateStarred(id, starred);
}, },
@ -404,7 +397,13 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
<Toolbar className={classes.toolbar} variant="dense"> <Toolbar className={classes.toolbar} variant="dense">
<div className={classes.toolbarActions}> <div className={classes.toolbarActions}>
{selected.length > 0 && ( {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 <Button
color="primary" color="primary"
size="medium" size="medium"
@ -429,8 +428,8 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
rowsPerPageOptions={[]} rowsPerPageOptions={[]}
rowsPerPage={rowsPerPage} rowsPerPage={rowsPerPage}
page={page} page={page}
onChangePage={handleChangePage} onPageChange={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage} onRowsPerPageChange={handleChangeRowsPerPage}
component="div" component="div"
/> />
@ -439,7 +438,10 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
<SearchIcon /> <SearchIcon />
</div> </div>
<InputBase <InputBase
placeholder={intl.formatMessage({ id: 'maps.search-action', defaultMessage: 'Search ...' })} placeholder={intl.formatMessage({
id: 'maps.search-action',
defaultMessage: 'Search ...',
})}
classes={{ classes={{
root: classes.searchInputRoot, root: classes.searchInputRoot,
input: classes.searchInputInput, input: classes.searchInputInput,
@ -478,119 +480,140 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
</TableCell> </TableCell>
</TableRow> </TableRow>
) : ( ) : (
stableSort(mapsInfo, getComparator(order, orderBy)) stableSort(mapsInfo, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row: MapInfo) => { .map((row: MapInfo) => {
const isItemSelected = isSelected(row.id); const isItemSelected = isSelected(row.id);
const labelId = row.id; const labelId = row.id;
return ( return (
<TableRow <TableRow
hover hover
onClick={(event) => handleRowClick(event, row.id)} onClick={(event) => handleRowClick(event, row.id)}
role="checkbox" role="checkbox"
aria-checked={isItemSelected} aria-checked={isItemSelected}
tabIndex={-1} tabIndex={-1}
key={row.id} key={row.id}
selected={isItemSelected} selected={isItemSelected}
style={{ border: '0' }} 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 <IconButton
padding="checkbox" size="small"
className={classes.bodyCell} onClick={(e) =>
handleStarred(e, row.id)
}
> >
<Checkbox <StarRateRoundedIcon
checked={isItemSelected} color="action"
inputProps={{ style={{
'aria-labelledby': String(labelId), color: row.starred
? 'yellow'
: 'gray',
}} }}
size="small"
/> />
</TableCell> </IconButton>
</Tooltip>
</TableCell>
<TableCell <TableCell className={classes.bodyCell}>
padding="checkbox" <Tooltip
className={classes.bodyCell} 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' })}> {row.title}
<IconButton </Link>
size="small" </Tooltip>
onClick={(e) => </TableCell>
handleStarred(e, row.id)
}
>
<StarRateRoundedIcon
color="action"
style={{
color: row.starred
? 'yellow'
: 'gray',
}}
/>
</IconButton>
</Tooltip>
</TableCell>
<TableCell className={classes.bodyCell}> <TableCell className={classes.bodyCell}>
<Tooltip <LabelsCell labels={row.labels} />
arrow={true} </TableCell>
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}> <TableCell className={classes.bodyCell}>
<LabelsCell labels={row.labels} /> {row.createdBy}
</TableCell> </TableCell>
<TableCell className={classes.bodyCell}> <TableCell className={classes.bodyCell}>
{row.createdBy} <Tooltip
</TableCell> 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}> <TableCell className={classes.bodyCell}>
<Tooltip <Tooltip
arrow={true} 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') })} title={intl.formatMessage({
placement="bottom-start" id: 'map.more-actions',
> defaultMessage: 'More Actions',
<span> })}
{dayjs( >
row.lastModificationTime <IconButton
).fromNow()} aria-label="Others"
</span> size="small"
</Tooltip> onClick={handleActionClick(row.id)}
</TableCell> >
<MoreHorizIcon color="action" />
<TableCell className={classes.bodyCell}> </IconButton>
<Tooltip </Tooltip>
arrow={true} </TableCell>
title={intl.formatMessage({ </TableRow>
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> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
@ -601,6 +624,6 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
onClose={() => setActiveDialog(undefined)} onClose={() => setActiveDialog(undefined)}
mapsId={activeDialog ? activeDialog.mapsId : []} mapsId={activeDialog ? activeDialog.mapsId : []}
/> />
</div > </div>
); );
}; };

2
packages/webapp/src/components/maps-page/maps-list/styled.ts
View File

@ -1,5 +1,5 @@
import { fade } from '@material-ui/core/styles'; 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 createStyles from '@material-ui/core/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles'; import makeStyles from '@material-ui/core/styles/makeStyles';

6
packages/webapp/src/components/maps-page/style.ts
View File

@ -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 createStyles from '@material-ui/core/styles/createStyles';
import makeStyles from '@material-ui/core/styles/makeStyles'; import makeStyles from '@material-ui/core/styles/makeStyles';
@ -27,11 +27,11 @@ export const useStyles = makeStyles((theme: Theme) =>
}, },
newMapButton: { newMapButton: {
marginRight: 10, marginRight: 10,
minWidth: '130px' minWidth: '130px',
}, },
importButton: { importButton: {
marginRight: 10, marginRight: 10,
minWidth: '130px' minWidth: '130px',
}, },
rightButtonGroup: { rightButtonGroup: {
marginRight: 10, marginRight: 10,

14
packages/webapp/src/theme/index.ts
View File

@ -1,4 +1,4 @@
import createMuiTheme from '@material-ui/core/styles/createMuiTheme'; import createMuiTheme from '@material-ui/core/styles/createTheme';
const theme = createMuiTheme({ const theme = createMuiTheme({
overrides: { overrides: {
@ -6,8 +6,8 @@ const theme = createMuiTheme({
'@global': { '@global': {
body: { body: {
backgroundColor: 'white', backgroundColor: 'white',
// Important: This size is the min to diplay all pages except maps list. // 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: { root: {
color: '#f9a826', color: '#f9a826',
}, },
outlined:{ outlined: {
zIndex: 'inherit' zIndex: 'inherit',
} },
}, },
MuiButton: { MuiButton: {
root: { root: {
@ -47,7 +47,7 @@ const theme = createMuiTheme({
'&:hover': { '&:hover': {
backgroundColor: 'rgba(249, 168, 38, 0.91)', backgroundColor: 'rgba(249, 168, 38, 0.91)',
}, },
} },
}, },
}, },
typography: { typography: {

3
packages/webcomponent/.gitignore vendored
View File

@ -0,0 +1,3 @@
lib/
node_module/