diff --git a/api/database/datamodel.graphql b/api/database/datamodel.graphql index ddc89814c..b5627825e 100644 --- a/api/database/datamodel.graphql +++ b/api/database/datamodel.graphql @@ -41,6 +41,7 @@ type TeamProfile { description: String motto: String avatar: String + banner: String updatedAt: DateTime! createdAt: DateTime! } diff --git a/api/src/generated/prisma.graphql b/api/src/generated/prisma.graphql index 6d118e29a..99d9f7562 100644 --- a/api/src/generated/prisma.graphql +++ b/api/src/generated/prisma.graphql @@ -1,5 +1,5 @@ # source: http://localhost:4466 -# timestamp: Wed Sep 12 2018 08:41:57 GMT-0700 (Pacific Daylight Time) +# timestamp: Thu Sep 20 2018 16:52:44 GMT-0700 (Pacific Daylight Time) type AggregateFBStatus { count: Int! @@ -1400,7 +1400,9 @@ type TeamProfile { description: String motto: String avatar: String + banner: String updatedAt: DateTime! + createdAt: DateTime! } """A connection to a list of items.""" @@ -1417,6 +1419,7 @@ input TeamProfileCreateInput { description: String motto: String avatar: String + banner: String } input TeamProfileCreateOneInput { @@ -1439,19 +1442,23 @@ enum TeamProfileOrderByInput { motto_DESC avatar_ASC avatar_DESC + banner_ASC + banner_DESC updatedAt_ASC updatedAt_DESC - id_ASC - id_DESC createdAt_ASC createdAt_DESC + id_ASC + id_DESC } type TeamProfilePreviousValues { description: String motto: String avatar: String + banner: String updatedAt: DateTime! + createdAt: DateTime! } type TeamProfileSubscriptionPayload { @@ -1497,12 +1504,14 @@ input TeamProfileUpdateDataInput { description: String motto: String avatar: String + banner: String } input TeamProfileUpdateInput { description: String motto: String avatar: String + banner: String } input TeamProfileUpdateOneInput { @@ -1647,6 +1656,46 @@ input TeamProfileWhereInput { """All values not ending with the given string.""" avatar_not_ends_with: String + banner: String + + """All values that are not equal to given value.""" + banner_not: String + + """All values that are contained in given list.""" + banner_in: [String!] + + """All values that are not contained in given list.""" + banner_not_in: [String!] + + """All values less than the given value.""" + banner_lt: String + + """All values less than or equal the given value.""" + banner_lte: String + + """All values greater than the given value.""" + banner_gt: String + + """All values greater than or equal the given value.""" + banner_gte: String + + """All values containing the given string.""" + banner_contains: String + + """All values not containing the given string.""" + banner_not_contains: String + + """All values starting with the given string.""" + banner_starts_with: String + + """All values not starting with the given string.""" + banner_not_starts_with: String + + """All values ending with the given string.""" + banner_ends_with: String + + """All values not ending with the given string.""" + banner_not_ends_with: String updatedAt: DateTime """All values that are not equal to given value.""" @@ -1669,6 +1718,28 @@ input TeamProfileWhereInput { """All values greater than or equal the given value.""" updatedAt_gte: DateTime + createdAt: DateTime + + """All values that are not equal to given value.""" + createdAt_not: DateTime + + """All values that are contained in given list.""" + createdAt_in: [DateTime!] + + """All values that are not contained in given list.""" + createdAt_not_in: [DateTime!] + + """All values less than the given value.""" + createdAt_lt: DateTime + + """All values less than or equal the given value.""" + createdAt_lte: DateTime + + """All values greater than the given value.""" + createdAt_gt: DateTime + + """All values greater than or equal the given value.""" + createdAt_gte: DateTime } type TeamStatus { diff --git a/api/src/graphql/TeamsFragment.js b/api/src/graphql/TeamsFragment.js index e75ce8382..f243480f2 100644 --- a/api/src/graphql/TeamsFragment.js +++ b/api/src/graphql/TeamsFragment.js @@ -13,6 +13,7 @@ const TEAMS_FRAGMENT = gql`{ createdAt profile { avatar + banner description motto updatedAt diff --git a/api/src/index.js b/api/src/index.js index 792f8505e..04eab61d7 100644 --- a/api/src/index.js +++ b/api/src/index.js @@ -121,8 +121,8 @@ const resolvers = { return err }) }, - async updateTeamProfile(parent, { slug, owner, description, motto, avatar }, ctx, info) { - return ctx.db.mutation.updateTeam({data:{profile: {update: {description: description, motto: motto, avatar: avatar}}}, where:{slug: slug}}, TEAMS_FRAGMENT) + async updateTeamProfile(parent, { slug, owner, description, motto, avatar, banner }, ctx, info) { + return ctx.db.mutation.updateTeam({data:{profile: {update: {description: description, motto: motto, avatar: avatar, banner: banner}}}, where:{slug: slug}}, TEAMS_FRAGMENT) .catch((err) => { console.log('createTeam error: ', err) return err @@ -140,8 +140,8 @@ const resolvers = { async getAzureSAS(parent, { teamSlug }, ctx, info) { // Create start and expiry times let today = new Date() - let tomorrow = new Date() - tomorrow.setDate(today.getDate() + 7) + let week = new Date() + week.setDate(today.getDate() + 7) // Create SharedKeyCredential and attach to pipline const SKC = new Azure.SharedKeyCredential(azureAccount, azureKey) const pipeline = Azure.StorageURL.newPipeline(SKC) @@ -179,10 +179,11 @@ const resolvers = { // Generate SAS url const SASQueryParameters = Azure.generateAccountSASQueryParameters( { - containerName, + version: '2017-11-09', permissions: SASContainerPerms, startTime: today, - expiryTime: tomorrow, + expiryTime: week, + protocol: 'https', services: SASServicePerms, resourceTypes: SASResourceTypes }, SKC ) diff --git a/api/src/schema.graphql b/api/src/schema.graphql index 731948163..f27657ccb 100644 --- a/api/src/schema.graphql +++ b/api/src/schema.graphql @@ -19,16 +19,11 @@ type Query { type Mutation { authenticate(idToken: String!): Member createTeam(name: String!, slug: String!, owner: String!): Team @isAuthenticated - updateTeamProfile(slug: String!, owner: String!, description: String, motto: String, avatar: String): Team @isAuthenticated + updateTeamProfile(slug: String!, owner: String!, description: String, motto: String, avatar: String, banner: String): Team @isAuthenticated deleteTeam(slug: String!): Team @isAuthenticated @isOwner(type: "Team") getAzureSAS(teamSlug: String!):String } -input MemberProfileInput { - authId: String! - alias: String! -} - fragment MemberInfo on Member { id authId diff --git a/client/package-lock.json b/client/package-lock.json index 52252110b..c0fbda736 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -4847,6 +4847,11 @@ "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=", "dev": true }, + "browser-image-resizer": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/browser-image-resizer/-/browser-image-resizer-1.2.0.tgz", + "integrity": "sha512-xMiB6BnRsD6RWmkD6Av90qXY7uaAOXJPaS5D8cSazyao/bx6ENCm67XGl6BIhn1ETjK52yEs8A/atmMPp74M4A==" + }, "browserify-aes": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", diff --git a/client/package.json b/client/package.json index f40fe138f..34a09ec19 100644 --- a/client/package.json +++ b/client/package.json @@ -82,6 +82,7 @@ "azure-storage": "^2.10.1", "babel-polyfill": "^6.26.0", "blob-util": "^2.0.2", + "browser-image-resizer": "^1.2.0", "classnames": "^2.2.6", "cross-fetch": "^2.2.2", "dotenv-webpack": "^1.5.7", diff --git a/client/src/graphql/teams/GetAllTeamsQuery.js b/client/src/graphql/teams/GetAllTeamsQuery.js index a2aab251a..0bd9ed522 100644 --- a/client/src/graphql/teams/GetAllTeamsQuery.js +++ b/client/src/graphql/teams/GetAllTeamsQuery.js @@ -18,6 +18,7 @@ export const GET_ALL_TEAMS_QUERY = gql` createdAt profile { avatar + banner description motto updatedAt diff --git a/client/src/graphql/teams/GetTeamsByOwnerQuery.js b/client/src/graphql/teams/GetTeamsByOwnerQuery.js index d2f60c882..d15834b34 100644 --- a/client/src/graphql/teams/GetTeamsByOwnerQuery.js +++ b/client/src/graphql/teams/GetTeamsByOwnerQuery.js @@ -16,6 +16,7 @@ export const GET_TEAMS_BY_OWNER = gql` createdAt profile { avatar + banner description motto updatedAt diff --git a/client/src/graphql/teams/Teams.js b/client/src/graphql/teams/Teams.js index 76c60bbb8..ce0a6f36b 100644 --- a/client/src/graphql/teams/Teams.js +++ b/client/src/graphql/teams/Teams.js @@ -15,6 +15,7 @@ export const TEAMS_FRAGMENT = gql` createdAt profile { avatar + banner description motto updatedAt diff --git a/client/src/graphql/teams/UpdateTeamProfileMutation.js b/client/src/graphql/teams/UpdateTeamProfileMutation.js index 4a63adffe..cd5e26256 100644 --- a/client/src/graphql/teams/UpdateTeamProfileMutation.js +++ b/client/src/graphql/teams/UpdateTeamProfileMutation.js @@ -3,16 +3,20 @@ import gql from 'graphql-tag' const UPDATE_TEAM_PROFILE = gql` mutation UpdateTeamProfileMutation( - $slug: String! - $owner: String! - $description: String - $motto: String + $slug: String!, + $owner: String!, + $description: String, + $motto: String, + $avatar: String, + $banner: String ) { updateTeamProfile( - slug: $slug - owner: $owner - description: $description + slug: $slug, + owner: $owner, + description: $description, motto: $motto + avatar: $avatar, + banner: $banner ) { id name @@ -26,6 +30,7 @@ const UPDATE_TEAM_PROFILE = gql` createdAt profile { avatar + banner description motto updatedAt diff --git a/client/src/views/common/UploadImage.js b/client/src/views/common/UploadImage.js index e9662db08..94a9c9643 100644 --- a/client/src/views/common/UploadImage.js +++ b/client/src/views/common/UploadImage.js @@ -4,6 +4,7 @@ import { Mutation } from 'react-apollo' import Dropzone from 'react-dropzone' import { Cropper } from 'react-image-cropper' import * as Azure from '@azure/storage-blob' +import readAndCompressImage from 'browser-image-resizer' import { imgSrcToBlob } from 'blob-util' import { withStyles } from '@material-ui/core/styles' @@ -12,6 +13,8 @@ import DialogActions from '@material-ui/core/DialogActions' import DialogContent from '@material-ui/core/DialogContent' import Button from '@material-ui/core/Button' +import MessageCard from './MessageCard' + import GET_AZURE_SAS from '../../graphql/teams/GetAzureSASMutation' const styles = theme => ({ @@ -45,16 +48,21 @@ const styles = theme => ({ } }) +const imageConfig = { + quality: 0.5, + maxWidth: 200, + maxHeight: 200, + autoRotate: true, + debug: true, + mimeType: 'image/jpeg' +} + class UploadImage extends Component { constructor (props) { super(props) - // this.saveToStorage = this.saveToStorage.bind(this) this.onDrop = this.onDrop.bind(this) this.handleCrop = this.handleCrop.bind(this) - this.onCropComplete = this.onCropComplete.bind(this) - this.onCropChange = this.onCropChange.bind(this) - this.getCroppedImg = this.getCroppedImg.bind(this) this.handleClickOpen = this.handleClickOpen.bind(this) this.handleClose = this.handleClose.bind(this) this.handleSubmit = this.handleSubmit.bind(this) @@ -70,17 +78,27 @@ class UploadImage extends Component { width: 200, height: 200 }, + cropping: false, cropped: null, - rejected: null + rejected: null, + uploaded: false, + image: '' } } render () { - const { classes, team, authId } = this.props - console.log('UploadImage', team, authId, this.state) + const { classes, team, authId, handleAvatar } = this.props + let avatar = null + if (team.profile !== null && team.profile.avatar !== undefined && team.profile.avatar !== null && team.profile.avatar !== 'a') { + avatar = team.profile.avatar + } else { + if (this.state.image !== '') avatar = this.state.image + } + + console.log('UploadImage', team, avatar, authId, this.state) return (
- {this.state.src === null && ( + {avatar === null && this.state.src === null && ( Drag-and-drop team avater here or click to select files.
Only *.jpeg and *.png images

 )} - {this.state.cropped !== null && ( + {(avatar !== null || this.state.src !== null) && ( {(getAzureSAS, { loading, error, data }) => { console.log('getAzureSAS: ', error, data) - console.log('getAzureSAS keys: ', process.env.AZURE_STORAGE_URL, process.env.AZURE_SAS) - if (data !== undefined && data.getAzureSAS !== null) { - this.saveAvatar(data.getAzureSAS, team.slug) + if (!this.state.uploaded) { + if (data !== undefined && data.getAzureSAS !== null) { + this.saveAvatar(data.getAzureSAS, team.slug, handleAvatar) + } + // this.handleSubmit(getAzureSAS, team.slug) + } + if (this.state.cropping) { + return ( +
+ +
+ ) + } else { + return ( + +
+ Crop Preview +
+ +
+ +
+ { this.cropper = ref }} + onImgLoad={this.onImageLoaded} + /> +
+ + + + + +
+ + + ) } - return ( -
- Crop Preview - -
- ) }} )} - {this.state.src !== null && ( - -
- -
- { this.cropper = ref }} - onImgLoad={this.onImageLoaded} - /> -
- - - - - -
- - )}
) } @@ -167,29 +194,30 @@ class UploadImage extends Component { } } - handleCrop () { - console.log('handleCrop', this.cropper) - this.setState({ cropped: this.cropper.crop(), open: false }) + async handleCrop (e, getAzureSAS, teamSlug, handleAvatar) { + e.preventDefault() + const data = await getAzureSAS({ variables: { teamSlug } }) + console.log('handleCrop', this.cropper, data) + const cropped = this.cropper.crop() + const croppedBlob = await imgSrcToBlob(cropped, 'image/png', 'Anonymous') + let resizedBlob = await readAndCompressImage(croppedBlob, imageConfig) + + return this.setState({ cropped: resizedBlob, cropping: true, open: false }, () => { + this.saveAvatar(data.getAzureSAS, teamSlug, handleAvatar) + }) } async handleSubmit (e, getAzureSAS, teamSlug) { e.preventDefault() - await getAzureSAS({ variables: { teamSlug } }) } - async saveAvatar (SASQueryParameters, teamSlug) { - const blob = await imgSrcToBlob(this.state.cropped, 'image/png', 'Anonymous') - console.log('handleSubmit0:', await blob, await blob.type) - const type = blob.type - let ext - if (type === 'image/jpeg') ext = 'jpg' - if (type === 'image/png') ext = 'png' - const fileName = `${teamSlug}-avatar.${ext}` + async saveAvatar (SASQueryParameters, teamSlug, handleAvatar) { + const fileName = `${teamSlug}-avatar.jpg` console.log('saveAvatar SASurl', process.env.AZURE_SAS_URL) - // const SASurl = `${process.env.AZURE_STORAGE_URL}?${SASQueryParameters}` + const SASurl2 = `${process.env.AZURE_STORAGE_URL}?${SASQueryParameters}` const SASurl = process.env.AZURE_SAS_URL - + console.log('getAzureSAS2 SASurl: ', SASurl2, SASurl) const pipeline = Azure.StorageURL.newPipeline(new Azure.AnonymousCredential()) const serviceURL = new Azure.ServiceURL(SASurl, pipeline) console.log('getAzureSAS2: ', serviceURL) @@ -198,54 +226,15 @@ class UploadImage extends Component { console.log('getAzureSAS3: ', containerURL) const blockBlobURL = Azure.BlockBlobURL.fromContainerURL(containerURL, fileName) - console.log(Azure.Aborter.None, await blob, blockBlobURL) - const avatar = await Azure.uploadBrowserDataToBlockBlob(Azure.Aborter.None, blob, blockBlobURL) + console.log('getAzureSAS34: ', blockBlobURL) + const avatar = await Azure.uploadBrowserDataToBlockBlob(Azure.Aborter.None, this.state.cropped, blockBlobURL) console.log('saveAvatar: ', avatar) + const image = `${process.env.AZURE_STORAGE_URL}${teamSlug}/${fileName}` + handleAvatar(image) + this.setState({ cropping: false, uploaded: true, image: image }) return avatar } - onCropComplete (crop, pixelCrop) { - console.log('onCropComplete', crop, pixelCrop, this.state) - const cropped = this.getCroppedImg(crop, pixelCrop, this.state.src) - this.setState({ cropped }) - } - - onCropChange (crop) { - this.setState({ crop }) - } - - getCroppedImg (image, pixelCrop, fileName) { - const canvas = document.createElement('canvas') - canvas.width = pixelCrop.width - canvas.height = pixelCrop.height - const ctx = canvas.getContext('2d') - - ctx.drawImage( - image, - pixelCrop.x, - pixelCrop.y, - pixelCrop.width, - pixelCrop.height, - 0, - 0, - pixelCrop.width, - pixelCrop.height - ) - - // As Base64 string - return canvas.toDataURL('image/jpeg') - - // As a blob - /* - return new Promise((resolve, reject) => { - canvas.toBlob(file => { - file.name = fileName - resolve(file) - }, 'image/jpeg') - }); - */ - } - handleClickOpen () { this.setState({ open: true }) } @@ -253,36 +242,13 @@ class UploadImage extends Component { handleClose () { this.setState({ open: false, src: null }) } - /* - async saveToStorage (file) { - const blobService = Azure.createBlobService() - const container = '' - - await uploadBrowserDataToBlockBlob(Aborter.None, file, blockBlobURL, { - blockSize: 4 * 1024 * 1024, // 4MB block size - parallelism: 20, // 20 concurrency - progress: ev => console.log(ev) - }); - } - */ } UploadImage.propTypes = { classes: PropTypes.object.isRequired, team: PropTypes.object, - authId: PropTypes.string.isRequired + authId: PropTypes.string.isRequired, + handleAvatar: PropTypes.func.isRequired } export default withStyles(styles)(UploadImage) - -/* - -*/ diff --git a/client/src/views/dashboard/components/ManageTeamEdit.js b/client/src/views/dashboard/components/ManageTeamEdit.js index 9630c04be..5a257cb4a 100644 --- a/client/src/views/dashboard/components/ManageTeamEdit.js +++ b/client/src/views/dashboard/components/ManageTeamEdit.js @@ -41,13 +41,18 @@ export class ManageTeamEdit extends Component { this.handleClose = this.handleClose.bind(this) this.handleChange = this.handleChange.bind(this) this.handleSubmit = this.handleSubmit.bind(this) + this.handleAvatar = this.handleAvatar.bind(this) console.log('ManageTeamEdit', props.team) const motto = props.team.profile.motto || '' const description = props.team.profile.description || '' + const avatar = props.team.profile.avatar || '' + const banner = props.team.profile.banner || '' this.state = { open: false, motto: motto, - description: description + description: description, + avatar: avatar, + banner: banner } } @@ -103,7 +108,7 @@ export class ManageTeamEdit extends Component { Edit Team Details - + ( - - -
- - - - {team.name} - - - {team.createdAt} | Members: {team.members.length} - - - - - - - -
- - -) +export const ManageTeamsItem = ({ classes, team, authId }) => { + console.log('ManageTeamsItem', team, team.profile, team.profile.avatar) + let avatar + if (team.profile.avatar !== undefined && team.profile.avatar !== 'a') { + avatar = team.profile.avatar + } else { + avatar = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E' + } + return ( + + +
+ + + + {team.name} + + + {team.createdAt} | Members: {team.members.length} + + + + + + + +
+ + + ) +} ManageTeamsItem.propTypes = { classes: PropTypes.object.isRequired,