ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #919 from Human-Connection/778-categories-for-posts

Browse Source 
Post with categories
This commit is contained in:
mattwr18 2019-07-02 12:20:43 -03:00 committed by GitHub
commit 7fa3cc7709
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 578 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
backend/src/middleware/notifications/spec.js
View File

@ -88,21 +88,26 @@ describe('currentUser { notifications }', () => {
describe('who mentions me again', () => {
beforeEach(async () => {
const updatedContent = `${post.content} One more mention to <a href="/profile/you" class="mention">@al-capone</a>`
const updatedTitle = 'this post has been updated'
// The response `post.content` contains a link but the XSSmiddleware
// should have the `mention` CSS class removed. I discovered this
// during development and thought: A feature not a bug! This way we
// can encode a re-mentioning of users when you edit your post or
// comment.
const createPostMutation = `
mutation($id: ID!, $content: String!) {
UpdatePost(id: $id, content: $content) {
const updatePostMutation = `
mutation($id: ID!, $title: String!, $content: String!) {
UpdatePost(id: $id, title: $title, content: $content) {
title
content
}
}
`
authorClient = new GraphQLClient(host, { headers: authorHeaders })
await authorClient.request(createPostMutation, { id: post.id, content: updatedContent })
await authorClient.request(updatePostMutation, {
id: post.id,
content: updatedContent,
title: updatedTitle,
})
})
it('creates exactly one more notification', async () => {

2
backend/src/middleware/permissionsMiddleware.js
View File

@ -105,7 +105,7 @@ const permissions = shield(
Query: {
'*': deny,
findPosts: allow,
Category: isAdmin,
Category: allow,
Tag: isAdmin,
Report: isModerator,
Notification: isAdmin,

4
backend/src/middleware/sluggifyMiddleware.js
View File

@ -17,6 +17,10 @@ export default {
args.slug = args.slug || (await uniqueSlug(args.title, isUniqueFor(context, 'Post')))
return resolve(root, args, context, info)
},
UpdatePost: async (resolve, root, args, context, info) => {
args.slug = args.slug || (await uniqueSlug(args.title, isUniqueFor(context, 'Post')))
return resolve(root, args, context, info)
},
CreateUser: async (resolve, root, args, context, info) => {
args.slug = args.slug || (await uniqueSlug(args.name, isUniqueFor(context, 'User')))
return resolve(root, args, context, info)

3
backend/src/schema/resolvers/comments.js
View File

@ -18,9 +18,6 @@ export default {
if (!params.content || content.length < COMMENT_MIN_LENGTH) {
throw new UserInputError(`Comment must be at least ${COMMENT_MIN_LENGTH} character long!`)
}
if (!postId.trim()) {
throw new UserInputError(NO_POST_ERR_MESSAGE)
}
const session = context.driver.session()
const postQueryRes = await session.run(

26
backend/src/schema/resolvers/comments.spec.js
View File

@ -23,7 +23,7 @@ afterEach(async () => {
describe('CreateComment', () => {
const createCommentMutation = gql`
mutation($postId: ID, $content: String!) {
mutation($postId: ID!, $content: String!) {
CreateComment(postId: $postId, content: $content) {
id
content
@ -37,13 +37,6 @@ describe('CreateComment', () => {
}
}
`
const commentQueryForPostId = gql`
query($content: String) {
Comment(content: $content) {
postId
}
}
`
describe('unauthenticated', () => {
it('throws authorization error', async () => {
createCommentVariables = {
@ -191,23 +184,6 @@ describe('CreateComment', () => {
client.request(createCommentMutation, createCommentVariablesWithNonExistentPost),
).rejects.toThrow('Comment cannot be created without a post!')
})
it('does not create the comment with the postId as an attribute', async () => {
const commentQueryVariablesByContent = {
content: "I'm authorised to comment",
}
await client.request(createCommentMutation, createCommentVariables)
const { Comment } = await client.request(
commentQueryForPostId,
commentQueryVariablesByContent,
)
expect(Comment).toEqual([
{
postId: null,
},
])
})
})
})

70
backend/src/schema/resolvers/posts.js
View File

@ -1,30 +1,74 @@
import { neo4jgraphql } from 'neo4j-graphql-js'
import uuid from 'uuid/v4'
import fileUpload from './fileUpload'
export default {
Mutation: {
UpdatePost: async (object, params, context, resolveInfo) => {
const { categoryIds } = params
delete params.categoryIds
params = await fileUpload(params, { file: 'imageUpload', url: 'image' })
return neo4jgraphql(object, params, context, resolveInfo, false)
const session = context.driver.session()
const cypherDeletePreviousRelations = `
MATCH (post:Post { id: $params.id })-[previousRelations:CATEGORIZED]->(category:Category)
DELETE previousRelations
RETURN post, category
`
await session.run(cypherDeletePreviousRelations, { params })
let updatePostCypher = `MATCH (post:Post {id: $params.id})
SET post = $params
`
if (categoryIds && categoryIds.length) {
updatePostCypher += `WITH post
UNWIND $categoryIds AS categoryId
MATCH (category:Category {id: categoryId})
MERGE (post)-[:CATEGORIZED]->(category)
`
}
updatePostCypher += `RETURN post`
const updatePostVariables = { categoryIds, params }
const transactionRes = await session.run(updatePostCypher, updatePostVariables)
const [post] = transactionRes.records.map(record => {
return record.get('post')
})
session.close()
return post.properties
},
CreatePost: async (object, params, context, resolveInfo) => {
const { categoryIds } = params
delete params.categoryIds
params = await fileUpload(params, { file: 'imageUpload', url: 'image' })
const result = await neo4jgraphql(object, params, context, resolveInfo, false)
params.id = params.id || uuid()
let createPostCypher = `CREATE (post:Post {params})
WITH post
MATCH (author:User {id: $userId})
MERGE (post)<-[:WROTE]-(author)
`
if (categoryIds) {
createPostCypher += `WITH post
UNWIND $categoryIds AS categoryId
MATCH (category:Category {id: categoryId})
MERGE (post)-[:CATEGORIZED]->(category)
`
}
createPostCypher += `RETURN post`
const createPostVariables = { userId: context.user.id, categoryIds, params }
const session = context.driver.session()
await session.run(
'MATCH (author:User {id: $userId}), (post:Post {id: $postId}) ' +
'MERGE (post)<-[:WROTE]-(author) ' +
'RETURN author',
{
userId: context.user.id,
postId: result.id,
},
)
const transactionRes = await session.run(createPostCypher, createPostVariables)
const [post] = transactionRes.records.map(record => {
return record.get('post')
})
session.close()
return result
return post.properties
},
},
}

190
backend/src/schema/resolvers/posts.spec.js
View File

@ -4,7 +4,34 @@ import { host, login } from '../../jest/helpers'
const factory = Factory()
let client
const postTitle = 'I am a title'
const postContent = 'Some content'
const oldTitle = 'Old title'
const oldContent = 'Old content'
const newTitle = 'New title'
const newContent = 'New content'
const createPostVariables = { title: postTitle, content: postContent }
const createPostWithCategoriesMutation = `
mutation($title: String!, $content: String!, $categoryIds: [ID]) {
CreatePost(title: $title, content: $content, categoryIds: $categoryIds) {
id
}
}
`
const creatPostWithCategoriesVariables = {
title: postTitle,
content: postContent,
categoryIds: ['cat9', 'cat4', 'cat15'],
}
const postQueryWithCategories = `
query($id: ID) {
Post(id: $id) {
categories {
id
}
}
}
`
beforeEach(async () => {
await factory.create('User', {
email: 'test@example.org',
@ -18,8 +45,8 @@ afterEach(async () => {
describe('CreatePost', () => {
const mutation = `
mutation {
CreatePost(title: "I am a title", content: "Some content") {
mutation($title: String!, $content: String!) {
CreatePost(title: $title, content: $content) {
title
content
slug
@ -32,7 +59,7 @@ describe('CreatePost', () => {
describe('unauthenticated', () => {
it('throws authorization error', async () => {
client = new GraphQLClient(host)
await expect(client.request(mutation)).rejects.toThrow('Not Authorised')
await expect(client.request(mutation, createPostVariables)).rejects.toThrow('Not Authorised')
})
})
@ -46,15 +73,15 @@ describe('CreatePost', () => {
it('creates a post', async () => {
const expected = {
CreatePost: {
title: 'I am a title',
content: 'Some content',
title: postTitle,
content: postContent,
},
}
await expect(client.request(mutation)).resolves.toMatchObject(expected)
await expect(client.request(mutation, createPostVariables)).resolves.toMatchObject(expected)
})
it('assigns the authenticated user as author', async () => {
await client.request(mutation)
await client.request(mutation, createPostVariables)
const { User } = await client.request(
`{
User(email:"test@example.org") {
@ -65,49 +92,75 @@ describe('CreatePost', () => {
}`,
{ headers },
)
expect(User).toEqual([{ contributions: [{ title: 'I am a title' }] }])
expect(User).toEqual([{ contributions: [{ title: postTitle }] }])
})
describe('disabled and deleted', () => {
it('initially false', async () => {
const expected = { CreatePost: { disabled: false, deleted: false } }
await expect(client.request(mutation)).resolves.toMatchObject(expected)
await expect(client.request(mutation, createPostVariables)).resolves.toMatchObject(expected)
})
})
describe('language', () => {
it('allows a user to set the language of the post', async () => {
const createPostWithLanguageMutation = `
mutation {
CreatePost(title: "I am a title", content: "Some content", language: "en") {
mutation($title: String!, $content: String!, $language: String) {
CreatePost(title: $title, content: $content, language: $language) {
language
}
}
`
const createPostWithLanguageVariables = {
title: postTitle,
content: postContent,
language: 'en',
}
const expected = { CreatePost: { language: 'en' } }
await expect(client.request(createPostWithLanguageMutation)).resolves.toEqual(
expect.objectContaining(expected),
await expect(
client.request(createPostWithLanguageMutation, createPostWithLanguageVariables),
).resolves.toEqual(expect.objectContaining(expected))
})
})
describe('categories', () => {
it('allows a user to set the categories of the post', async () => {
await Promise.all([
factory.create('Category', {
id: 'cat9',
name: 'Democracy & Politics',
icon: 'university',
}),
factory.create('Category', {
id: 'cat4',
name: 'Environment & Nature',
icon: 'tree',
}),
factory.create('Category', {
id: 'cat15',
name: 'Consumption & Sustainability',
icon: 'shopping-cart',
}),
])
const expected = [{ id: 'cat9' }, { id: 'cat4' }, { id: 'cat15' }]
const postWithCategories = await client.request(
createPostWithCategoriesMutation,
creatPostWithCategoriesVariables,
)
const postQueryWithCategoriesVariables = {
id: postWithCategories.CreatePost.id,
}
await expect(
client.request(postQueryWithCategories, postQueryWithCategoriesVariables),
).resolves.toEqual({ Post: [{ categories: expect.arrayContaining(expected) }] })
})
})
})
})
describe('UpdatePost', () => {
const mutation = `
mutation($id: ID!, $content: String) {
UpdatePost(id: $id, content: $content) {
id
content
}
}
`
let variables = {
id: 'p1',
content: 'New content',
}
let updatePostMutation
let updatePostVariables
beforeEach(async () => {
const asAuthor = Factory()
await asAuthor.create('User', {
@ -120,14 +173,32 @@ describe('UpdatePost', () => {
})
await asAuthor.create('Post', {
id: 'p1',
content: 'Old content',
title: oldTitle,
content: oldContent,
})
updatePostMutation = `
mutation($id: ID!, $title: String!, $content: String!, $categoryIds: [ID]) {
UpdatePost(id: $id, title: $title, content: $content, categoryIds: $categoryIds) {
id
content
}
}
`
updatePostVariables = {
id: 'p1',
title: newTitle,
content: newContent,
categoryIds: null,
}
})
describe('unauthenticated', () => {
it('throws authorization error', async () => {
client = new GraphQLClient(host)
await expect(client.request(mutation, variables)).rejects.toThrow('Not Authorised')
await expect(client.request(updatePostMutation, updatePostVariables)).rejects.toThrow(
'Not Authorised',
)
})
})
@ -139,7 +210,9 @@ describe('UpdatePost', () => {
})
it('throws authorization error', async () => {
await expect(client.request(mutation, variables)).rejects.toThrow('Not Authorised')
await expect(client.request(updatePostMutation, updatePostVariables)).rejects.toThrow(
'Not Authorised',
)
})
})
@ -151,8 +224,59 @@ describe('UpdatePost', () => {
})
it('updates a post', async () => {
const expected = { UpdatePost: { id: 'p1', content: 'New content' } }
await expect(client.request(mutation, variables)).resolves.toEqual(expected)
const expected = { UpdatePost: { id: 'p1', content: newContent } }
await expect(client.request(updatePostMutation, updatePostVariables)).resolves.toEqual(
expected,
)
})
describe('categories', () => {
let postWithCategories
beforeEach(async () => {
await Promise.all([
factory.create('Category', {
id: 'cat9',
name: 'Democracy & Politics',
icon: 'university',
}),
factory.create('Category', {
id: 'cat4',
name: 'Environment & Nature',
icon: 'tree',
}),
factory.create('Category', {
id: 'cat15',
name: 'Consumption & Sustainability',
icon: 'shopping-cart',
}),
factory.create('Category', {
id: 'cat27',
name: 'Animal Protection',
icon: 'paw',
}),
])
postWithCategories = await client.request(
createPostWithCategoriesMutation,
creatPostWithCategoriesVariables,
)
updatePostVariables = {
id: postWithCategories.CreatePost.id,
title: newTitle,
content: newContent,
categoryIds: ['cat27'],
}
})
it('allows a user to update the categories of a post', async () => {
await client.request(updatePostMutation, updatePostVariables)
const expected = [{ id: 'cat27' }]
const postQueryWithCategoriesVariables = {
id: postWithCategories.CreatePost.id,
}
await expect(
client.request(postQueryWithCategories, postQueryWithCategoriesVariables),
).resolves.toEqual({ Post: [{ categories: expect.arrayContaining(expected) }] })
})
})
})
})

21
backend/src/schema/types/type/Comment.gql
View File

@ -1,7 +1,6 @@
type Comment {
id: ID!
activityId: String
postId: ID
author: User @relation(name: "WROTE", direction: "IN")
content: String!
contentExcerpt: String
@ -12,3 +11,23 @@ type Comment {
disabled: Boolean
disabledBy: User @relation(name: "DISABLED", direction: "IN")
}
type Mutation {
CreateComment(
id: ID
postId: ID!
content: String!
contentExcerpt: String
deleted: Boolean
disabled: Boolean
createdAt: String
): Comment
UpdateComment(
id: ID!
content: String
contentExcerpt: String
deleted: Boolean
disabled: Boolean
): Comment
DeleteComment(id: ID!): Comment
}

39
backend/src/schema/types/type/Post.gql
View File

@ -49,3 +49,42 @@ type Post {
"""
)
}
type Mutation {
CreatePost(
id: ID
activityId: String
objectId: String
title: String!
slug: String
content: String!
image: String
imageUpload: Upload
visibility: Visibility
deleted: Boolean
disabled: Boolean
createdAt: String
updatedAt: String
language: String
categoryIds: [ID]
contentExcerpt: String
): Post
UpdatePost(
id: ID!
activityId: String
objectId: String
title: String!
slug: String
content: String!
contentExcerpt: String
image: String
imageUpload: Upload
visibility: Visibility
deleted: Boolean
disabled: Boolean
createdAt: String
updatedAt: String
language: String
categoryIds: [ID]
): Post
}

2
backend/src/seed/factories/comments.js
View File

@ -10,7 +10,7 @@ export default function(params) {
return {
mutation: `
mutation($id: ID!, $postId: ID, $content: String!) {
mutation($id: ID!, $postId: ID!, $content: String!) {
CreateComment(id: $id, postId: $postId, content: $content) {
id
}

108
webapp/components/CategoriesSelect/CategoriesSelect.spec.js Normal file
View File

@ -0,0 +1,108 @@
import { mount, createLocalVue } from '@vue/test-utils'
import CategoriesSelect from './CategoriesSelect'
import Styleguide from '@human-connection/styleguide'
const localVue = createLocalVue()
localVue.use(Styleguide)
describe('CategoriesSelect.vue', () => {
let wrapper
let mocks
let democracyAndPolitics
let environmentAndNature
let consumptionAndSustainablity
const categories = [
{
id: 'cat9',
name: 'Democracy & Politics',
icon: 'university',
},
{
id: 'cat4',
name: 'Environment & Nature',
icon: 'tree',
},
{
id: 'cat15',
name: 'Consumption & Sustainability',
icon: 'shopping-cart',
},
{
name: 'Cooperation & Development',
icon: 'users',
id: 'cat8',
},
]
beforeEach(() => {
mocks = {
$t: jest.fn(),
}
})
describe('shallowMount', () => {
const Wrapper = () => {
return mount(CategoriesSelect, { mocks, localVue })
}
beforeEach(() => {
wrapper = Wrapper()
})
describe('toggleCategory', () => {
beforeEach(() => {
wrapper.vm.categories = categories
democracyAndPolitics = wrapper.findAll('button').at(0)
democracyAndPolitics.trigger('click')
})
it('adds categories to selectedCategoryIds when clicked', () => {
expect(wrapper.vm.selectedCategoryIds).toEqual([categories[0].id])
})
it('emits an updateCategories event when the selectedCategoryIds changes', () => {
expect(wrapper.emitted().updateCategories[0][0]).toEqual([categories[0].id])
})
it('removes categories when clicked a second time', () => {
democracyAndPolitics.trigger('click')
expect(wrapper.vm.selectedCategoryIds).toEqual([])
})
it('changes the selectedCount when selectedCategoryIds is updated', () => {
expect(wrapper.vm.selectedCount).toEqual(1)
democracyAndPolitics.trigger('click')
expect(wrapper.vm.selectedCount).toEqual(0)
})
it('sets a category to active when it has been selected', () => {
expect(wrapper.vm.isActive(categories[0].id)).toEqual(true)
})
describe('maximum', () => {
beforeEach(() => {
environmentAndNature = wrapper.findAll('button').at(1)
consumptionAndSustainablity = wrapper.findAll('button').at(2)
environmentAndNature.trigger('click')
consumptionAndSustainablity.trigger('click')
})
it('allows three categories to be selected', () => {
expect(wrapper.vm.selectedCategoryIds).toEqual([
categories[0].id,
categories[1].id,
categories[2].id,
])
})
it('sets reachedMaximum to true after three', () => {
expect(wrapper.vm.reachedMaximum).toEqual(true)
})
it('sets other categories to disabled after three', () => {
expect(wrapper.vm.isDisabled(categories[3].id)).toEqual(true)
})
})
})
})
})

102
webapp/components/CategoriesSelect/CategoriesSelect.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<div>
<ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'xx-small' }">
<div v-for="category in categories" :key="category.id">
<ds-flex-item>
<ds-button
size="small"
@click.prevent="toggleCategory(category.id)"
:primary="isActive(category.id)"
:disabled="isDisabled(category.id)"
>
<ds-icon :name="category.icon" />
{{ category.name }}
</ds-button>
</ds-flex-item>
</div>
</ds-flex>
<p class="small-info">
{{
$t('contribution.categories.infoSelectedNoOfMaxCategories', {
chosen: selectedCount,
max: selectedMax,
})
}}
</p>
</div>
</template>
<script>
import gql from 'graphql-tag'
export default {
props: {
existingCategoryIds: { type: Array, default: () => [] },
},
data() {
return {
categories: null,
selectedMax: 3,
selectedCategoryIds: [],
}
},
computed: {
selectedCount() {
return this.selectedCategoryIds.length
},
reachedMaximum() {
return this.selectedCount >= this.selectedMax
},
},
watch: {
selectedCategoryIds(categoryIds) {
this.$emit('updateCategories', categoryIds)
},
existingCategoryIds: {
immediate: true,
handler: function(existingCategoryIds) {
if (!existingCategoryIds || !existingCategoryIds.length) {
return
}
this.selectedCategoryIds = existingCategoryIds
},
},
},
methods: {
toggleCategory(id) {
const index = this.selectedCategoryIds.indexOf(id)
if (index > -1) {
this.selectedCategoryIds.splice(index, 1)
} else {
this.selectedCategoryIds.push(id)
}
},
isActive(id) {
const index = this.selectedCategoryIds.indexOf(id)
if (index > -1) {
return true
}
return false
},
isDisabled(id) {
return !!(this.reachedMaximum && !this.isActive(id))
},
},
apollo: {
Category: {
query() {
return gql(`{
Category {
id
name
icon
}
}`)
},
result(result) {
this.categories = result.data.Category
},
},
},
}
</script>

33
webapp/components/ContributionForm/ContributionForm.spec.js
View File

@ -1,8 +1,9 @@
import { config, mount, createLocalVue } from '@vue/test-utils'
import ContributionForm from './index.vue'
import ContributionForm from './ContributionForm.vue'
import Styleguide from '@human-connection/styleguide'
import Vuex from 'vuex'
import PostMutations from '~/graphql/PostMutations.js'
import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
import Filters from '~/plugins/vue-filters'
import TeaserImage from '~/components/TeaserImage/TeaserImage'
@ -28,7 +29,7 @@ describe('ContributionForm.vue', () => {
file: { filename: 'avataar.svg', previewElement: '' },
url: 'someUrlToImage',
}
const image = '/uploads/1562010976466-avataaars'
beforeEach(() => {
mocks = {
$t: jest.fn(),
@ -112,7 +113,9 @@ describe('ContributionForm.vue', () => {
content: postContent,
language: 'en',
id: null,
categoryIds: null,
imageUpload: null,
image: null,
},
}
postTitleInput = wrapper.find('.ds-input')
@ -137,6 +140,14 @@ describe('ContributionForm.vue', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
})
it('supports adding categories', async () => {
const categoryIds = ['cat12', 'cat15', 'cat37']
expectedParams.variables.categoryIds = categoryIds
wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
})
it('supports adding a teaser image', async () => {
expectedParams.variables.imageUpload = imageUpload
wrapper.find(TeaserImage).vm.$emit('addTeaserImage', imageUpload)
@ -189,7 +200,8 @@ describe('ContributionForm.vue', () => {
title: 'dies ist ein Post',
content: 'auf Deutsch geschrieben',
language: 'de',
imageUpload,
image,
categories: [{ id: 'cat12', name: 'Democracy & Politics' }],
},
}
wrapper = Wrapper()
@ -219,7 +231,9 @@ describe('ContributionForm.vue', () => {
content: postContent,
language: propsData.contribution.language,
id: propsData.contribution.id,
imageUpload,
categoryIds: ['cat12'],
image,
imageUpload: null,
},
}
postTitleInput = wrapper.find('.ds-input')
@ -228,6 +242,17 @@ describe('ContributionForm.vue', () => {
await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
})
it('supports updating categories', async () => {
const categoryIds = ['cat3', 'cat51', 'cat37']
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitle)
wrapper.vm.updateEditorContent(postContent)
expectedParams.variables.categoryIds = categoryIds
wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
})
})
})
})

29
webapp/components/ContributionForm/index.vue → webapp/components/ContributionForm/ContributionForm.vue
View File

@ -14,6 +14,11 @@
<hc-editor :users="users" :value="form.content" @input="updateEditorContent" />
</no-ssr>
<ds-space margin-bottom="xxx-large" />
<hc-categories-select
model="categoryIds"
@updateCategories="updateCategories"
:existingCategoryIds="form.categoryIds"
/>
<ds-flex class="contribution-form-footer">
<ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
<ds-flex-item :width="{ base: '80%', sm: '30%', md: '30%', lg: '20%' }">
@ -32,7 +37,7 @@
:disabled="loading || disabled"
ghost
class="cancel-button"
@click="$router.back()"
@click.prevent="$router.back()"
>
{{ $t('actions.cancel') }}
</ds-button>
@ -58,11 +63,13 @@ import HcEditor from '~/components/Editor'
import orderBy from 'lodash/orderBy'
import locales from '~/locales'
import PostMutations from '~/graphql/PostMutations.js'
import HcCategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
import HcTeaserImage from '~/components/TeaserImage/TeaserImage'
export default {
components: {
HcEditor,
HcCategoriesSelect,
HcTeaserImage,
},
props: {
@ -74,8 +81,10 @@ export default {
title: '',
content: '',
teaserImage: null,
image: null,
language: null,
languageOptions: [],
categoryIds: null,
},
formSchema: {
title: { required: true, min: 3, max: 64 },
@ -99,7 +108,8 @@ export default {
this.slug = contribution.slug
this.form.content = contribution.content
this.form.title = contribution.title
this.form.teaserImage = contribution.imageUpload
this.form.image = contribution.image
this.form.categoryIds = this.categoryIds(contribution.categories)
},
},
},
@ -117,7 +127,7 @@ export default {
},
methods: {
submit() {
const { title, content, teaserImage } = this.form
const { title, content, image, teaserImage, categoryIds } = this.form
let language
if (this.form.language) {
language = this.form.language.value
@ -134,7 +144,9 @@ export default {
id: this.id,
title,
content,
categoryIds,
language,
image,
imageUpload: teaserImage,
},
})
@ -142,7 +154,6 @@ export default {
this.loading = false
this.$toast.success(this.$t('contribution.success'))
this.disabled = true
const result = res.data[this.id ? 'UpdatePost' : 'CreatePost']
this.$router.push({
@ -165,9 +176,19 @@ export default {
this.form.languageOptions.push({ label: locale.name, value: locale.code })
})
},
updateCategories(ids) {
this.form.categoryIds = ids
},
addTeaserImage(file) {
this.form.teaserImage = file
},
categoryIds(categories) {
let categoryIds = []
categories.map(categoryId => {
categoryIds.push(categoryId.id)
})
return categoryIds
},
},
apollo: {
User: {

2
webapp/graphql/CommentMutations.js
View File

@ -3,7 +3,7 @@ import gql from 'graphql-tag'
export default () => {
return {
CreateComment: gql`
mutation($postId: ID, $content: String!) {
mutation($postId: ID!, $content: String!) {
CreateComment(postId: $postId, content: $content) {
id
contentExcerpt

17
webapp/graphql/PostMutations.js
View File

@ -3,20 +3,25 @@ import gql from 'graphql-tag'
export default () => {
return {
CreatePost: gql`
mutation($title: String!, $content: String!, $language: String, $imageUpload: Upload) {
mutation(
$title: String!
$content: String!
$language: String
$categoryIds: [ID]
$imageUpload: Upload
) {
CreatePost(
title: $title
content: $content
language: $language
categoryIds: $categoryIds
imageUpload: $imageUpload
) {
id
title
slug
content
contentExcerpt
language
imageUpload
}
}
`,
@ -27,6 +32,8 @@ export default () => {
$content: String!
$language: String
$imageUpload: Upload
$categoryIds: [ID]
$image: String
) {
UpdatePost(
id: $id
@ -34,6 +41,8 @@ export default () => {
content: $content
language: $language
imageUpload: $imageUpload
categoryIds: $categoryIds
image: $image
) {
id
title
@ -41,7 +50,7 @@ export default () => {
content
contentExcerpt
language
imageUpload
image
}
}
`,

5
webapp/locales/de.json
View File

@ -332,7 +332,10 @@
"filterFollow": "Beiträge filtern von Usern denen ich folge",
"filterALL": "Alle Beiträge anzeigen",
"success": "Gespeichert!",
"languageSelectLabel": "Sprache"
"languageSelectLabel": "Sprache",
"categories": {
"infoSelectedNoOfMaxCategories": "{chosen} von {max} Kategorien ausgewählt"
}
}
}

5
webapp/locales/en.json
View File

@ -331,6 +331,9 @@
"filterFollow": "Filter contributions from users I follow",
"filterALL": "View all contributions",
"success": "Saved!",
"languageSelectLabel": "Language"
"languageSelectLabel": "Language",
"categories": {
"infoSelectedNoOfMaxCategories": "{chosen} of {max} categories selected"
}
}
}

2
webapp/pages/post/create.vue
View File

@ -8,7 +8,7 @@
</template>
<script>
import HcContributionForm from '~/components/ContributionForm'
import HcContributionForm from '~/components/ContributionForm/ContributionForm'
export default {
components: {

2
webapp/pages/post/edit/_id.vue
View File

@ -9,7 +9,7 @@
<script>
import gql from 'graphql-tag'
import HcContributionForm from '~/components/ContributionForm'
import HcContributionForm from '~/components/ContributionForm/ContributionForm'
export default {
components: {