add default moderator preferences
Change-Id: I53ae8cf87753357b9b6f855005dfc3c7b190d2fa
diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index 5629ef0..ee09094 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -1,87 +1,44 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, Grid, Paper, CardContent, Card } from '@material-ui/core';
-import { PhoneCallbackRounded, GroupRounded } from '@material-ui/icons';
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import { List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, Grid, Paper, CardContent, Card, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Toolbar, IconButton, ListItemAvatar, Input, TextField } from '@material-ui/core'
+import { PhoneCallbackRounded, GroupRounded, DeleteRounded, AccountCircle, AddCircle } from '@material-ui/icons'
-import JamiIdCard from './JamiIdCard';
-import Account from '../../../model/Account';
-import ConversationsOverviewCard from './ConversationsOverviewCard';
+import Account from '../../../model/Account'
+import JamiIdCard from './JamiIdCard'
+import ConversationAvatar from './ConversationAvatar'
+import ConversationsOverviewCard from './ConversationsOverviewCard'
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
root: {
minWidth: 275,
},
- bullet: {
- display: 'inline-block',
- margin: '0 2px',
- transform: 'scale(0.8)',
- },
title: {
fontSize: 14,
+ flexGrow: 1
},
pos: {
marginBottom: 12,
},
-});
-
-const columns = [
- { id: 'name', label: 'Name', minWidth: 170 },
- { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
- {
- id: 'population',
- label: 'Population',
- minWidth: 170,
- align: 'right',
- format: (value) => value.toLocaleString('en-US'),
+ paper: {
+ marginTop: 24,
+ marginBottom: 24
},
- {
- id: 'size',
- label: 'Size\u00a0(km\u00b2)',
- minWidth: 170,
- align: 'right',
- format: (value) => value.toLocaleString('en-US'),
- },
- {
- id: 'density',
- label: 'Density',
- minWidth: 170,
- align: 'right',
- format: (value) => value.toFixed(2),
- },
-];
-
-function createData(name, code, population, size) {
- const density = population / size;
- return { name, code, population, size, density };
-}
-
-const rows = [
- createData('India', 'IN', 1324171354, 3287263),
- createData('China', 'CN', 1403500365, 9596961),
- createData('Italy', 'IT', 60483973, 301340),
- createData('United States', 'US', 327167434, 9833520),
- createData('Canada', 'CA', 37602103, 9984670),
- createData('Australia', 'AU', 25475400, 7692024),
- createData('Germany', 'DE', 83019200, 357578),
- createData('Ireland', 'IE', 4857000, 70273),
- createData('Mexico', 'MX', 126577691, 1972550),
- createData('Japan', 'JP', 126317000, 377973),
- createData('France', 'FR', 67022000, 640679),
- createData('United Kingdom', 'GB', 67545757, 242495),
- createData('Russia', 'RU', 146793744, 17098246),
- createData('Nigeria', 'NG', 200962417, 923768),
- createData('Brazil', 'BR', 210147125, 8515767),
-];
+ textField: {
+ //marginLeft: theme.spacing(1),
+ marginRight: theme.spacing(2),
+ }
+}))
export default function AccountPreferences(props) {
const classes = useStyles()
const account = props.account
const isJamiAccount = account.getType() === Account.TYPE_JAMI
const alias = isJamiAccount ? "Jami account" : "SIP account"
+ const moderators = account.getDefaultModerators()
return (
<React.Fragment>
<Typography variant="h2" component="h2" gutterBottom>{alias}</Typography>
- <Grid container spacing={3} style={{marginBottom: 16}}>
+ <Grid container spacing={3} style={{ marginBottom: 16 }}>
{isJamiAccount &&
<Grid item xs={12}><JamiIdCard account={account} /></Grid>}
@@ -114,7 +71,7 @@
edge="end"
/*onChange={handleToggle('wifi')}*/
checked={account.isRendezVous()}
- inputProps={{ 'aria-labelledby': 'switch-list-label-wifi' }}
+ inputProps={{ 'aria-labelledby': 'switch-list-label-rendezvous' }}
/>
</ListItemSecondaryAction>
</ListItem>
@@ -128,15 +85,41 @@
edge="end"
/*onChange={handleToggle('bluetooth')}*/
checked={account.isPublicIn()}
- inputProps={{ 'aria-labelledby': 'switch-list-label-bluetooth' }}
+ inputProps={{ 'aria-labelledby': 'switch-list-label-publicin' }}
/>
</ListItemSecondaryAction>
</ListItem>
+
+ <Paper className={classes.paper}>
+ <Toolbar>
+ <Typography className={classes.title} variant="h6">
+ Default moderators
+ </Typography>
+ </Toolbar>
+ <List>
+ <ListItem key="add">
+ <TextField variant="outlined" className={classes.textField} label="Add new default moderator" placeholder="Enter new moderator name or URI" fullWidth />
+ <ListItemSecondaryAction>
+ <IconButton><AddCircle /></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ {moderators.length === 0 ?
+ <ListItem key="placeholder">
+ <ListItemText primary="No default moderator" /></ListItem> :
+ moderators.map((moderator) => (
+ <ListItem key={moderator.name}>
+ <ListItemAvatar>
+ <ConversationAvatar name={moderator.name} />
+ </ListItemAvatar>
+ <ListItemText primary={moderator.name} />
+ <ListItemSecondaryAction>
+ <IconButton><DeleteRounded /></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ ))}
+ </List>
+ </Paper>
</List>
-
-
-
-
</React.Fragment>)
}
diff --git a/model/Account.js b/model/Account.js
index 46f96ed..669381e 100644
--- a/model/Account.js
+++ b/model/Account.js
@@ -12,7 +12,10 @@
}
static from(object) {
- return new Account(object.id, object.details, object.volatileDetails)
+ const account = new Account(object.id, object.details, object.volatileDetails)
+ if (object.defaultModerators)
+ account.defaultModerators = object.defaultModerators.map(m => Contact.from(m))
+ return account
}
update(data) {
@@ -24,6 +27,7 @@
return {
id: this.id,
details: this.details,
+ defaultModerators: this.defaultModerators ? this.defaultModerators.map(c => c.getObject()) : undefined,
volatileDetails: this.volatileDetails
}
}
@@ -87,6 +91,10 @@
getContacts() {
return this.contacts
}
+
+ getDefaultModerators() {
+ return this.defaultModerators
+ }
}
Account.TYPE_JAMI = "RING"