feat: labels ui

.nvmrc

@@ -1 +1 @@
-v14.15.5
+v14.15.4

packages/webapp/src/classes/client/index.ts

@@ -19,7 +19,6 @@ export type Label = {
     id: number;
     title: string;
     color: string;
-    iconName: string;
 };
 
 export type Role = 'owner' | 'editor' | 'viewer';
@@ -28,7 +27,7 @@ export type MapInfo = {
     id: number;
     starred: boolean;
     title: string;
-    labels: number[];
+    labels: Label[];
     createdBy: string;
     creationTime: string;
     lastModificationBy: string;

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

@@ -10,6 +10,24 @@ import Client, {
 } from '..';
 import { LocaleCode, localeFromStr } from '../../app-i18n';
 
+const label1: Label = {
+  id: 1,
+  title: 'label 1',
+  color: 'black',
+}
+
+const label2: Label = {
+  id: 2,
+  title: 'label 2',
+  color: 'green',
+}
+
+const label3: Label = {
+  id: 3,
+  title: 'label 3',
+  color: 'red',
+}
+
 class MockClient implements Client {
     private maps: MapInfo[] = [];
     private labels: Label[] = [];
@@ -21,7 +39,7 @@ class MockClient implements Client {
             id: number,
             starred: boolean,
             title: string,
-            labels: number[],
+            labels: Label[],
             creator: string,
             creationTime: string,
             modifiedByUser: string,
@@ -63,7 +81,7 @@ class MockClient implements Client {
                 11,
                 false,
                 'El Mapa3',
-                [1, 2, 3],
+              [label1, label2],
                 'Paulo3',
                 '2008-06-02T00:00:00Z',
                 'Berna',
@@ -76,7 +94,7 @@ class MockClient implements Client {
                 12,
                 false,
                 'El Mapa3',
-                [1, 2, 3],
+                [label2, label3],
                 'Paulo3',
                 '2008-06-02T00:00:00Z',
                 'Berna',
@@ -87,10 +105,7 @@ class MockClient implements Client {
             ),
         ];
 
-        this.labels = [
+        this.labels = [label1, label2, label3];
-            { id: 1, title: 'Red Label', iconName: '', color: 'red' },
-            { id: 2, title: 'Blue Label', iconName: '', color: 'blue' },
-        ];
     }
     deleteMapPermission(id: number, email: string): Promise<void> {
         let perm = this.permissionsByMap.get(id) || [];

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

@@ -219,20 +219,18 @@ const MapsPage = (): ReactElement => {
                     </div>
 
                     <List component="nav">
-                        {filterButtons.map((buttonInfo) => {
+                        {filterButtons.map(buttonInfo => {
-                            return (
+                            return (<StyleListItem
-                                <StyleListItem
                                 icon={buttonInfo.icon}
                                 label={buttonInfo.label}
                                 filter={buttonInfo.filter}
                                 active={filter}
                                 onClick={handleMenuClick}
                                 onDelete={handleLabelDelete}
-                                    key={`${buttonInfo.filter.type}:${(buttonInfo.filter as LabelFilter).label
+                                key={`${buttonInfo.filter.type}:${buttonInfo.label}`}
-                                        }`}
+                            />)
-                                />
+                        }
-                            );
+                        )}
-                        })}
                     </List>
 
                     <div

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import Popover from '@material-ui/core/Popover';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+import LabelTwoTone from '@material-ui/icons/LabelTwoTone';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Label } from '../../../../classes/client';
+import { LabelSelector } from '../label-selector';
+
+type AddLabelButtonTypes = {
+    onChange?: (label: Label) => void;
+};
+
+export function AddLabelButton({ onChange }: AddLabelButtonTypes): React.ReactElement {
+    console.log(onChange);
+    const intl = useIntl();
+
+    const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const open = Boolean(anchorEl);
+    const id = open ? 'add-label-popover' : undefined;
+
+    return (
+        <Tooltip
+            arrow={true}
+            title={intl.formatMessage({
+                id: 'map.tooltip-add',
+                defaultMessage: 'Add label to selected',
+            })}
+        >
+            <>
+                <Button
+                    color="primary"
+                    size="medium"
+                    variant="outlined"
+                    type="button"
+                    style={{ marginLeft: '10px' }}
+                    disableElevation={true}
+                    startIcon={<LabelTwoTone />}
+                    onClick={handleClick}
+                >
+                    <FormattedMessage id="action.label" defaultMessage="Add Label" />
+                </Button>
+                <Popover
+                    id={id}
+                    open={open}
+                    anchorEl={anchorEl}
+                    onClose={handleClose}
+                    anchorOrigin={{
+                        vertical: 'bottom',
+                        horizontal: 'center',
+                    }}
+                    transformOrigin={{
+                        vertical: 'top',
+                        horizontal: 'center',
+                    }}
+                >
+                    <LabelSelector />
+                </Popover>
+            </>
+        </Tooltip>
+    );
+}

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

@@ -4,7 +4,7 @@ import { useStyles } from './styled';
 import { useSelector } from 'react-redux';
 import { activeInstance, fetchAccount } from '../../../redux/clientSlice';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import Client, { ErrorInfo, MapInfo } from '../../../classes/client';
+import Client, {ErrorInfo, Label, MapInfo} from '../../../classes/client';
 import ActionChooser, { ActionType } from '../action-chooser';
 import ActionDispatcher from '../action-dispatcher';
 import dayjs from 'dayjs';
@@ -28,14 +28,15 @@ import Button from '@material-ui/core/Button';
 import InputBase from '@material-ui/core/InputBase';
 import Link from '@material-ui/core/Link';
 
-import LabelTwoTone from '@material-ui/icons/LabelTwoTone';
 import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import StarRateRoundedIcon from '@material-ui/icons/StarRateRounded';
 import SearchIcon from '@material-ui/icons/Search';
 
+import { AddLabelButton } from './add-label-button';
 // Load fromNow pluggin
 import relativeTime from 'dayjs/plugin/relativeTime';
+import {LabelsCell} from './labels-cell';
 dayjs.extend(relativeTime);
 
 function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
@@ -55,8 +56,8 @@ function getComparator<Key extends keyof any>(
     order: Order,
     orderBy: Key
 ): (
-        a: { [key in Key]: number | string | boolean | number[] | undefined },
+        a: { [key in Key]: number | string | boolean | Label[] | undefined },
-        b: { [key in Key]: number | string | number[] | boolean }
+        b: { [key in Key]: number | string | Label[] | boolean }
     ) => number {
     return order === 'desc'
         ? (a, b) => descendingComparator(a, b, orderBy)
@@ -220,7 +221,7 @@ const mapsFilter = (filter: Filter, search: string): ((mapInfo: MapInfo) => bool
                 break;
             case 'label':
                 result =
-                    !mapInfo.labels || mapInfo.labels.includes((filter as LabelFilter).label.id);
+                    !mapInfo.labels || mapInfo.labels.some((label) => label.id === (filter as LabelFilter).label.id)
                 break;
             case 'public':
                 result = mapInfo.isPublic;
@@ -412,24 +413,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                             </Tooltip>
                         )}
 
-                        {selected.length > 0 && (
+                      {selected.length > 0 && <AddLabelButton/>}
-                            <Tooltip arrow={true} title={intl.formatMessage({ id: 'map.tooltip-add', defaultMessage: 'Add label to selected' })}>
-                                <Button
-                                    color="primary"
-                                    size="medium"
-                                    variant="outlined"
-                                    type="button"
-                                    style={{ marginLeft: '10px' }}
-                                    disableElevation={true}
-                                    startIcon={<LabelTwoTone />}
-                                >
-                                    <FormattedMessage
-                                        id="action.label"
-                                        defaultMessage="Add Label"
-                                    />
-                                </Button>
-                            </Tooltip>
-                        )}
                     </div>
 
                     <div className={classes.toolbarListActions}>
@@ -558,7 +542,9 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                                                             </Tooltip>
                                                         </TableCell>
 
-                                                        <TableCell className={classes.bodyCell}></TableCell>
+                                                        <TableCell className={classes.bodyCell}>
+                                                          <LabelsCell labels={row.labels} />
+                                                        </TableCell>
 
                                                         <TableCell className={classes.bodyCell}>
                                                             {row.createdBy}

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Divider from '@material-ui/core/Divider';
+import AddIcon from '@material-ui/icons/Add';
+import Checkbox from '@material-ui/core/Checkbox';
+import Container from '@material-ui/core/Container';
+import { Label as LabelComponent } from '../label';
+import Client, { Label, ErrorInfo } from '../../../../classes/client';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { activeInstance } from '../../../../redux/clientSlice';
+import { StyledButton } from './styled';
+
+export function LabelSelector(): React.ReactElement {
+  const client: Client = useSelector(activeInstance);
+
+  const { data: labels = [] } = useQuery<unknown, ErrorInfo, Label[]>('labels', async () => client.fetchLabels());
+
+  const [state, setState] = React.useState(labels.reduce((acc, label) => {
+    acc[label.id] = false //label.checked;
+    return acc;
+  }, {}),);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [event.target.id]: event.target.checked });
+  };
+
+  return (
+    <Container>
+      <FormGroup>
+        {labels.map(({ id, title, color}) => (
+          <FormControlLabel
+            key={id}
+            control={
+              <Checkbox
+                id={`${id}`}
+                checked={state[id]}
+                onChange={handleChange}
+                name={title}
+                color="primary"
+              />
+            }
+            label={<LabelComponent name={title} color={color} />}
+          />
+        ))}
+        <Divider />
+        <StyledButton
+          color="primary"
+          startIcon={<AddIcon />}
+        >
+          {/* i18n */}
+          Add new label
+        </StyledButton>
+      </FormGroup>
+    </Container>
+  );
+}

packages/webapp/src/components/maps-page/maps-list/label-selector/styled.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+
+export const StyledButton = styled(Button)`
+  margin: 4px;
+`;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Color, StyledLabel, Name } from './styled';
+
+type Props = { name: string, color: string };
+
+export function Label({ name, color }: Props): React.ReactElement<Props> {
+  return (
+    <StyledLabel>
+      <Color color={color} />
+      <Name>{name}</Name>
+    </StyledLabel>
+  );
+}

packages/webapp/src/components/maps-page/maps-list/label/styled.ts

@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components';
+
+const SIZE = 20;
+
+export const Color = styled.div`
+  width: ${SIZE}px;
+  height: ${SIZE}px;
+  border-radius: ${SIZE * 0.25}px;
+  border: 1px solid black;
+  margin: 1px ${SIZE * 0.5}px 1px 0px;
+  ${props => props.color && css`
+    background-color: ${props.color};
+  `}
+`;
+
+export const StyledLabel = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const Name = styled.div`
+  flex: 1;
+`;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import Chip from '@material-ui/core/Chip';
+import LabelIcon from '@material-ui/icons/Label';
+
+import {Label} from '../../../../classes/client';
+type Props = {
+  labels: Label[],
+};
+
+export function LabelsCell({ labels }: Props): React.ReactElement<Props> {
+  return (
+    <>
+      {labels.map(label => (
+        <Chip
+          key={label.id}
+          size="small"
+          icon={<LabelIcon />}
+          label={label.title}
+          clickable
+          color="primary"
+          style={{ backgroundColor: label.color }}
+          onDelete={() => {return 1;}}
+        />
+      ))}
+    </>
+  );
+}

packages/webapp/src/theme/index.ts

@@ -69,9 +69,9 @@ const theme = createMuiTheme({
             contrastText: '#FFFFFF',
         },
         secondary: {
-            light: '#FFFFFF',
+            light: '#a19f9f',
-            main: '#FFFFFF',
+            main: '#5a5a5a',
-            dark: '#FFFFFF',
+            dark: '#000000',
             contrastText: '#FFFFFF',
         },
     },