fez5587/Superalgos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Condense Financial Being update with into profile management

Browse Source
This commit is contained in:
Barry Low committed 2018-11-16 15:42:12 -08:00
1 parent f44845f4ff
commit 4bc8be397f
10 files changed
+394 -59
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/package-lock.json
Generated
+1 -1
View File
@@ -2134,7 +2134,7 @@
"dependencies": {
"core-js": {
"version": "1.2.7",
"resolved": "http://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
},
"fbjs": {
client/src/index.js
+1 -7
View File
@@ -8,7 +8,6 @@ import {
AcceptTeamInvite,
ManageTeams,
TeamMembers,
FinancialBeings,
Settings,
Teams,
Landing,
@@ -57,12 +56,7 @@ class App extends Component {
/>
<Route
exact
path={`/teams/financial-beings`}
render={props => <FinancialBeings {...props} auth={this.props.auth} />}
/>
<Route
exact
path={`/teams/financial-beings`}
path={`/teams/settings`}
render={props => <Settings {...props} auth={this.props.auth} />}
/>
<Route
client/src/views/financial-beings/components/ManageFBList.js
+21 -14
View File
@@ -15,10 +15,13 @@ import log from '../../../utils/log'
import ManageFBItem from './ManageFBItem'
const styles = theme => ({
root: {
flexGrow: 1
},
heroContent: {
maxWidth: 600,
margin: '0 auto',
padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
maxWidth: 800,
margin: `${theme.spacing.unit * 4}px auto`,
padding: 0
},
cardGrid: {
padding: `${theme.spacing.unit * 8}px 0`
@@ -63,17 +66,21 @@ export const ManageFBList = ({ classes }) => (
if (!loading && !error) {
if (data.teams_TeamsByOwner.length > 0) {
return (
<Grid container spacing={0} direction='column' justify='center' alignItems='center'>
{!loading &&
data.teams_TeamsByOwner.map(team => (
<ManageFBItem
key={team.id}
team={team}
classes={classes}
/>
))}
{errors}
</Grid>
<div className={classes.root}>
<div className={classes.heroContent}>
<Grid container spacing={8} direction='column' alignItems='stretch'>
{!loading &&
data.teams_TeamsByOwner.map(team => (
<ManageFBItem
key={team.id}
team={team}
classes={classes}
/>
))}
{errors}
</Grid>
</div>
</div>
)
} else {
return (
client/src/views/manage-teams/components/ManageTeamProfile.js
+15 -5
View File
@@ -11,6 +11,8 @@ import { Link } from 'react-router-dom'
import ManageTeamProfileView from './ManageTeamProfileView'
import ManageTeamProfileEdit from './ManageTeamProfileEdit'
import log from '../../../utils/log'
const styles = theme => ({
root: {
flexGrow: 1
@@ -72,6 +74,7 @@ export class ManageTeamProfile extends Component {
this.toggleEdit = this.toggleEdit.bind(this)
this.handleSave = this.handleSave.bind(this)
this.handleUpdate = this.handleUpdate.bind(this)
this.state = {
edit: false,
@@ -81,7 +84,7 @@ export class ManageTeamProfile extends Component {
render () {
const { classes, team, slug, match } = this.props
log.debug('ManageTeamProfile render', this.state)
return (
<div className='container'>
<main className={classes.layout}>
@@ -94,7 +97,7 @@ export class ManageTeamProfile extends Component {
slug={slug}
match={match}
save={this.state.save}
handleUpdate={e => this.toggleEdit}
handleUpdate={this.handleUpdate}
/>
}
<Grid container justify='flex-end' direction='row' spacing={24} className={classes.profileButtons}>
@@ -134,7 +137,7 @@ export class ManageTeamProfile extends Component {
</Grid>
<Grid item>
<Button
onClick={e => this.handleSave()}
onClick={e => this.handleSave(e)}
variant='contained'
color='secondary'
>
@@ -155,8 +158,15 @@ export class ManageTeamProfile extends Component {
this.setState({ edit: !this.state.edit })
}
handleSave () {
this.setState({ save: !this.state.edit })
handleSave (e) {
e.preventDefault()
log.debug('handleSave')
this.setState({ save: true })
}
handleUpdate () {
log.debug('handleUpdate')
this.setState({ edit: false, save: false })
}
}
client/src/views/manage-teams/components/ManageTeamProfileEdit.js
+36 -26
View File
@@ -51,8 +51,12 @@ const styles = theme => ({
editContentContainer: {
marginBottom: `${theme.spacing.unit * 3}px`
},
metaContainer: {
marginTop: `${theme.spacing.unit * 1}px`,
alignSelf: 'stretch',
borderRight: '1px solid #CCCCCC'
},
teamMeta: {
borderRight: '1px solid #CCCCCC',
margin: `${theme.spacing.unit * 3}px 0 0`,
paddingLeft: `${theme.spacing.unit * 2}px`,
textAlign: 'center',
@@ -60,19 +64,20 @@ const styles = theme => ({
},
teamContent: {
'& h2': {
padding: `${theme.spacing.unit * 4}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`
padding: `${theme.spacing.unit * 4}px ${theme.spacing.unit * 3}px 0`
},
'& h4': {
padding: `0 ${theme.spacing.unit * 3}px 0`
},
'& h6': {
padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px 0`
padding: `0 ${theme.spacing.unit * 3}px 0`
}
},
editInput: {
padding: `0 ${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
'& label': {
padding: `0 ${theme.spacing.unit * 3}px 0`
display: 'none',
padding: `0 ${theme.spacing.unit * 4}px 0`
}
},
banner: {
@@ -89,7 +94,7 @@ const styles = theme => ({
}
})
export class ManageTeamEdit extends Component {
export class ManageTeamProfileEdit extends Component {
constructor (props) {
super(props)
@@ -99,8 +104,9 @@ export class ManageTeamEdit extends Component {
this.handleSubmit = this.handleSubmit.bind(this)
this.handleAvatar = this.handleAvatar.bind(this)
this.handleBanner = this.handleBanner.bind(this)
this.startSave = this.startSave.bind(this)
log.debug('ManageTeamEdit', props.team)
log.debug('ManageTeamProfileEdit constructor', props.team)
const motto = props.team.profile.motto || ''
const description = props.team.profile.description || ''
const avatar = props.team.profile.avatar || null
@@ -111,13 +117,14 @@ export class ManageTeamEdit extends Component {
motto: motto,
description: description,
avatar: avatar,
banner: banner
banner: banner,
save: false
}
}
render () {
const { classes, team, match, save, handleUpdate } = this.props
log.debug('ManageTeamEdit ', this.props, this.props.slug, this.props.team, match)
log.debug('ManageTeamProfileEdit render', this.props, this.props.slug, this.props.team, match)
const created = new Date(team.createdAt)
@@ -144,16 +151,17 @@ export class ManageTeamEdit extends Component {
if (team.profile !== null && team.profile.banner !== undefined && team.profile.banner !== null) banner = team.profile.banner
if (this.state.banner !== null) banner = this.state.banner
log.debug('team images: ', avatar, banner)
if (save) {
this.handleSubmit(updateTeamProfile, team.slug, handleUpdate)
log.debug('saving profile status: ', save)
if (save && !this.state.save) {
log.debug('saving profile: ', save)
this.startSave(updateTeamProfile, team.slug, handleUpdate)
}
let errors
let loader
if (loading) {
loader = (
<Typography variant='caption'>Submitting team...</Typography>
<Typography variant='caption'>Updating profile...</Typography>
)
}
if (error) {
@@ -200,10 +208,9 @@ export class ManageTeamEdit extends Component {
AzureStorageUrl={AzureStorageUrl}
AzureSASURL={AzureStorageSAS}
cropRatio={4}
debug
/>
<Grid container className={classes.editContentContainer}>
<Grid item md={3} >
<Grid item md={3} className={classes.metaContainer}>
<Grid container className={classes.teamMeta} direction='column' justify='flex-start'>
<Grid item>
<ImageUpload
@@ -234,10 +241,10 @@ export class ManageTeamEdit extends Component {
width: '125px',
overflow: 'visible'
}}
dropzoneStyle={{ height: '125px' }}
AzureStorageUrl={AzureStorageUrl}
AzureSASURL={AzureStorageSAS}
cropRatio={1}
debug
/>
</Grid>
<Typography variant='subtitle1' paragraph gutterBottom>
@@ -263,7 +270,6 @@ export class ManageTeamEdit extends Component {
<Typography
variant='h4'
color='textSecondary'
gutterBottom
>
Motto:
</Typography>
@@ -271,20 +277,18 @@ export class ManageTeamEdit extends Component {
autoFocus
margin='dense'
id='motto'
label='Team Motto'
type='text'
fullWidth
value={this.state.motto}
onChange={this.handleChange}
className={classes.editInput}
/>
<Typography variant='h6' color='textPrimary' gutterBottom>
<Typography variant='h6' color='textPrimary'>
Description:
</Typography>
<TextField
margin='dense'
id='description'
label='Team Description'
type='text'
rows={4}
multiline
@@ -293,10 +297,12 @@ export class ManageTeamEdit extends Component {
onChange={this.handleChange}
className={classes.editInput}
/>
<Typography variant='h6' color='secondary'>
{loader}
{errors}
</Typography>
</Grid>
</Grid>
{loader}
{errors}
</Grid>
</React.Fragment>
)
@@ -314,6 +320,7 @@ export class ManageTeamEdit extends Component {
}
handleChange (e) {
log.debug('handleChange: ', e.target.id, e.target.value)
switch (e.target.id) {
case 'motto':
this.setState({ motto: e.target.value })
@@ -335,9 +342,13 @@ export class ManageTeamEdit extends Component {
this.setState({ banner: `${bannerUrl}?${Math.random()}` })
}
async handleSubmit (updateTeamProfile, slug, handleUpdate) {
log.debug('handleSubmit: ', this.state)
startSave (updateTeamProfile, slug, handleUpdate) {
this.setState({ save: 'done' })
this.handleSubmit(updateTeamProfile, slug, handleUpdate)
}
async handleSubmit (updateTeamProfile, slug, handleUpdate) {
log.debug('updateTeamProfile, handleSubmit: ', this.state)
await updateTeamProfile({
variables: {
slug,
@@ -349,12 +360,11 @@ export class ManageTeamEdit extends Component {
}
})
window.canvasApp.eventHandler.raiseEvent('User Profile Changed')
this.setState({ description: '', motto: '', open: false })
handleUpdate()
}
}
ManageTeamEdit.propTypes = {
ManageTeamProfileEdit.propTypes = {
classes: PropTypes.object.isRequired,
slug: PropTypes.string.isRequired,
team: PropTypes.object,
@@ -363,4 +373,4 @@ ManageTeamEdit.propTypes = {
handleUpdate: PropTypes.func
}
export default withStyles(styles)(ManageTeamEdit)
export default withStyles(styles)(ManageTeamProfileEdit)
client/src/views/manage-teams/components/ManageTeamProfileFBEdit.js
+207
View File
@@ -0,0 +1,207 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Mutation } from 'react-apollo'
import { withStyles } from '@material-ui/core/styles'
import Grid from '@material-ui/core/Grid'
import Button from '@material-ui/core/Button'
import EditIcon from '@material-ui/icons/Edit'
import Dialog from '@material-ui/core/Dialog'
import DialogContent from '@material-ui/core/DialogContent'
import Typography from '@material-ui/core/Typography'
import { ImageUpload } from '@advancedalgos/web-components'
import UPDATE_FB from '../../../graphql/teams/UpdateFBMutation'
import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
import { checkGraphQLError } from '../../../utils/graphql-errors'
import log from '../../../utils/log'
const styles = theme => ({
dialogTitle: {
textAlign: 'center',
paddingBottom: `${theme.spacing.unit * 2}px`
},
buttonRight: {
justifyContent: 'flex-end'
}
})
export class ManageTeamProfileFBEdit extends Component {
constructor (props) {
super(props)
this.handleClickOpen = this.handleClickOpen.bind(this)
this.handleClose = this.handleClose.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.handleAvatar = this.handleAvatar.bind(this)
const avatar = props.fb.avatar || ''
this.state = {
open: false,
avatar: avatar
}
}
render () {
log.debug('ManageTeamProfileFBEdit ', this.props, this.props.slug, this.props.fb)
const { classes, fb, slug } = this.props
return (
<Mutation
mutation={UPDATE_FB}
refetchQueries={[
{
query: GET_TEAMS_BY_OWNER
}
]}
>
{(updateFB, { loading, error, data }) => {
const AzureStorageUrl = process.env.AZURE_STORAGE_URL_TEAMS
const AzureStorageSAS = process.env.AZURE_STORAGE_SAS_TEAMS
const containerName = slug
let avatar = null
if (this.state.avatar === null && fb.avatar === undefined) avatar = 'https://aadevelop.blob.core.windows.net/module-teams/module-default/aa-avatar-default.png'
if (fb.avatar !== undefined && fb.avatar !== null) avatar = fb.avatar
if (this.state.avatar !== null) avatar = this.state.avatar
let errors
let loader
if (loading) {
loader = (
<Typography variant='caption'>Updating avatar...</Typography>
)
}
if (error) {
errors = error.graphQLErrors.map(({ message }, i) => {
const displayMessage = checkGraphQLError(message)
log.debug('updateTeamProfile error:', displayMessage)
return (
<Typography key={i} variant='caption'>
{message}
</Typography>
)
})
}
log.debug('ManageTeamProfileFBEdit mutation:', classes)
return (
<div>
<Button
size='small'
color='primary'
className={classes.buttonRight}
onClick={this.handleClickOpen}
>
<EditIcon /> Edit
</Button>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby='form-dialog-title'
>
<DialogContent>
<Grid container justify='center' direction='column'>
<Grid item className={classes.dialogTitle}>
<Typography variant='h4'>
Edit Financial Being
</Typography>
</Grid>
<ImageUpload
key='avatar'
handleUrl={this.handleAvatar}
fileName={`${fb.slug}-fb-avatar.jpg`}
containerName={containerName}
existingImage={avatar}
imagePreviewConfig={{
width: '125px',
height: '125px',
title: 'Change FB Avatar',
fontSize: '1.5em'
}}
cropContainerConfig={{ x: 10, y: 10, width: 200, height: 200 }}
cropPreviewBox={{ width: 350, height: 350 }}
saveImageConfig={{
quality: 0.6,
maxWidth: 200,
maxHeight: 200,
autoRotate: true,
mimeType: 'image/jpeg'
}}
containerStyle={{
display: 'block',
margin: '0 auto 3em',
height: '125px',
width: '125px',
overflow: 'visible'
}}
dropzoneStyle={{ height: '125px' }}
AzureStorageUrl={AzureStorageUrl}
AzureSASURL={AzureStorageSAS}
cropRatio={1}
debug
/>
{loader}
{errors}
<Grid container justify='center' alignItems='center' direction='column'>
<Button
onClick={e => {
this.handleSubmit(e, updateFB, fb.id, slug)
}}
color='secondary'
variant='contained'
size='small'
>
Update Financial Being
</Button>
<Button onClick={this.handleClose} color='primary'>
Cancel
</Button>
</Grid>
</Grid>
</DialogContent>
</Dialog>
</div>
)
}}
</Mutation>
)
}
handleClickOpen () {
this.setState({ open: true })
}
handleClose () {
this.setState({ open: false })
}
handleAvatar (avatarUrl) {
log.debug('handleAvatar: ', avatarUrl)
this.setState({ avatar: `${avatarUrl}?${Math.random()}` })
}
async handleSubmit (e, updateFB, fbId, slug) {
log.debug('handleSubmit: ', this.state)
e.preventDefault()
await updateFB({
variables: {
fbId,
avatar: this.state.avatar
}
})
window.canvasApp.eventHandler.raiseEvent('User Profile Changed')
this.setState({ open: false })
}
}
ManageTeamProfileFBEdit.propTypes = {
classes: PropTypes.object.isRequired,
slug: PropTypes.string.isRequired,
fb: PropTypes.object
}
export default withStyles(styles)(ManageTeamProfileFBEdit)
client/src/views/manage-teams/components/ManageTeamProfileFBView.js
+76
View File
@@ -0,0 +1,76 @@
import React from 'react'
import PropTypes from 'prop-types'
import Grid from '@material-ui/core/Grid'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import CardActions from '@material-ui/core/CardActions'
import CardMedia from '@material-ui/core/CardMedia'
import Typography from '@material-ui/core/Typography'
import { withStyles } from '@material-ui/core/styles'
import ManageTeamProfileFBEdit from './ManageTeamProfileFBEdit'
import log from '../../../utils/log'
const styles = theme => ({
fbContainer: {
margin: `0 ${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`
},
card: {
display: 'flex',
width: '100%'
},
cardDetails: {
display: 'flex',
flex: 1
},
cardContent: {
flex: 1
},
cardMedia: {
flex: 1,
width: 100,
height: 100,
maxWidth: 100,
justifyContent: 'flex-start'
}
})
export const ManageTeamProvileFBView = ({ classes, team }) => {
log.debug('ManageTeamProvileFBView', team, team.fb[0], team.fb[0].avatar)
let avatar = (team.fb[0].avatar !== undefined && team.fb[0].avatar !== null) ? team.fb[0].avatar : 'https://aadevelop.blob.core.windows.net/module-teams/module-default/aa-avatar-default.png'
return (
<Grid item xs={12} className={classes.fbContainer}>
<Card className={classes.card}>
<div className={classes.cardDetails}>
<CardMedia
className={classes.cardMedia}
image={avatar}
title={team.name}
/>
<CardContent className={classes.cardContent}>
<Typography gutterBottom variant='h5' component='h2'>
{team.fb[0].name}
</Typography>
<Typography variant='caption' color='textSecondary'>
{team.fb[0].kind}
</Typography>
</CardContent>
<CardActions>
<ManageTeamProfileFBEdit slug={team.slug} fb={team.fb[0]} />
</CardActions>
</div>
</Card>
</Grid>
)
}
ManageTeamProvileFBView.propTypes = {
classes: PropTypes.object.isRequired,
team: PropTypes.object.isRequired
}
export default withStyles(styles)(ManageTeamProvileFBView)
client/src/views/manage-teams/components/ManageTeamProfileView.js
+29 -4
View File
@@ -5,6 +5,8 @@ import Typography from '@material-ui/core/Typography'
import Grid from '@material-ui/core/Grid'
import { withStyles } from '@material-ui/core/styles'
import ManageTeamProfileFBView from './ManageTeamProfileFBView'
const styles = theme => ({
root: {
flexGrow: 1
@@ -38,23 +40,36 @@ const styles = theme => ({
margin: '0 auto',
padding: `0 0 ${theme.spacing.unit * 2}px`
},
metaContainer: {
marginTop: `${theme.spacing.unit * 1}px`,
alignSelf: 'stretch',
borderRight: '1px solid #CCCCCC'
},
teamMeta: {
borderRight: '1px solid #CCCCCC',
margin: `${theme.spacing.unit * 3}px 0 0`,
paddingLeft: `${theme.spacing.unit * 2}px`,
textAlign: 'center'
},
teamContent: {
'& h2': {
padding: `${theme.spacing.unit * 4}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`
padding: `${theme.spacing.unit * 4}px ${theme.spacing.unit * 3}px 0`
},
'& h4': {
padding: `0 ${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`
padding: `0 ${theme.spacing.unit * 3}px ${theme.spacing.unit * 1}px`
},
'& h6': {
padding: `0 ${theme.spacing.unit * 3}px 0`
}
},
fbContent: {
borderTop: '1px solid #CCCCCC',
width: '90%',
margin: `${theme.spacing.unit * 3}px auto`,
paddingTop: `${theme.spacing.unit * 3}px`,
'& h4': {
padding: `0 ${theme.spacing.unit * 3}px ${theme.spacing.unit * 1}px`
}
},
banner: {
maxWidth: '100%',
height: 'auto',
@@ -85,7 +100,7 @@ const ManageTeamProfileView = ({ classes, team }) => {
<React.Fragment>
<img src={banner} alt={team.name} className={classes.banner} />
<Grid container>
<Grid item md={3}>
<Grid item md={3} className={classes.metaContainer}>
<Grid container className={classes.teamMeta} direction='column' justify='center'>
<img src={avatar} alt={team.name} className={classes.avatar} />
<Typography variant='subtitle1' paragraph gutterBottom>
@@ -119,6 +134,16 @@ const ManageTeamProfileView = ({ classes, team }) => {
Description: {team.profile.description}
</Typography>
</Grid>
<Grid container className={classes.fbContent} direction='column'>
<Typography
variant='h4'
color='textSecondary'
gutterBottom
>
Financial Beings
</Typography>
<ManageTeamProfileFBView team={team} />
</Grid>
</Grid>
</Grid>
</React.Fragment>
client/src/views/teams/components/TeamsItem.js
+3 -2
View File
@@ -30,7 +30,8 @@ const styles = theme => ({
height: 65,
margin: '0 0.875em 0 0',
borderRadius: '50%',
verticalAlign: 'middle'
verticalAlign: 'middle',
alignSelf: 'flex-start'
},
buttonRight: {
textDecoration: 'none'
@@ -61,7 +62,7 @@ export const TeamsItem = ({ classes, team }) => {
/>
<CardContent className={classes.cardContent}>
<Grid container>
<Grid item md={3} alignContent='flex-start' >
<Grid item md={3} >
<img src={avatar} alt={team.name} className={classes.avatar} />
</Grid>
<Grid item md={9}>
package-lock.json
Generated
+5
View File
@@ -0,0 +1,5 @@
{
"name": "AATeamModule",
"version": "2.0.1",
"lockfileVersion": 1
}