mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
get it working
This commit is contained in:
Moriz Wahl
parent
3244f3f86d
commit
8df7d5d265
@ -10,9 +10,9 @@
|
||||
:icon="category.icon"
|
||||
size="small"
|
||||
v-tooltip="{
|
||||
content: $t(`contribution.category.description.${category.slug}`),
|
||||
placement: 'bottom-start',
|
||||
}"
|
||||
content: $t(`contribution.category.description.${category.slug}`),
|
||||
placement: 'bottom-start',
|
||||
}"
|
||||
>
|
||||
{{ $t(`contribution.category.name.${category.slug}`) }}
|
||||
</base-button>
|
||||
@ -20,82 +20,83 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CategoryQuery from '~/graphql/CategoryQuery'
|
||||
import { CATEGORIES_MAX } from '~/constants/categories.js'
|
||||
import xor from 'lodash/xor'
|
||||
import SortCategories from '~/mixins/sortCategoriesMixin.js'
|
||||
import CategoryQuery from '~/graphql/CategoryQuery'
|
||||
import { CATEGORIES_MAX } from '~/constants/categories.js'
|
||||
import xor from 'lodash/xor'
|
||||
import SortCategories from '~/mixins/sortCategoriesMixin.js'
|
||||
|
||||
export default {
|
||||
inject: {
|
||||
$parentForm: {
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
mixins: [SortCategories],
|
||||
props: {
|
||||
existingCategoryIds: { type: Array, default: () => [] },
|
||||
model: { type: String, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
categories: null,
|
||||
selectedMax: CATEGORIES_MAX,
|
||||
selectedCategoryIds: this.existingCategoryIds,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
existingCategoryIds() {
|
||||
console.log('existingCategoryIds', this.selectedCategoryIds)
|
||||
if (!this.selectedCategoryIds.length)
|
||||
this.selectedCategoryIds = this.existingCategoryIds
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
selectedCount() {
|
||||
return this.selectedCategoryIds.length
|
||||
},
|
||||
reachedMaximum() {
|
||||
return this.selectedCount >= this.selectedMax
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleCategory(id) {
|
||||
this.selectedCategoryIds = xor(this.selectedCategoryIds, [id])
|
||||
if (this.$parentForm) {
|
||||
this.$parentForm.update(this.model, this.selectedCategoryIds)
|
||||
}
|
||||
},
|
||||
isActive(id) {
|
||||
return this.selectedCategoryIds.includes(id)
|
||||
},
|
||||
isDisabled(id) {
|
||||
return !!(this.reachedMaximum && !this.isActive(id))
|
||||
},
|
||||
categoryButtonsId(categoryId) {
|
||||
return `category-buttons-${categoryId}`
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
Category: {
|
||||
query() {
|
||||
return CategoryQuery()
|
||||
},
|
||||
result({ data: { Category } }) {
|
||||
this.categories = this.sortCategories(Category)
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
export default {
|
||||
inject: {
|
||||
$parentForm: {
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
mixins: [SortCategories],
|
||||
props: {
|
||||
existingCategoryIds: { type: Array, default: () => [] },
|
||||
model: { type: String, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
categories: null,
|
||||
selectedMax: CATEGORIES_MAX,
|
||||
selectedCategoryIds: this.existingCategoryIds,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
existingCategoryIds() {
|
||||
if (!this.selectedCategoryIds.length && this.existingCategoryIds.length) {
|
||||
this.selectedCategoryIds = this.existingCategoryIds
|
||||
this.$forceUpdate()
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
selectedCount() {
|
||||
return this.selectedCategoryIds.length
|
||||
},
|
||||
reachedMaximum() {
|
||||
return this.selectedCount >= this.selectedMax
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleCategory(id) {
|
||||
this.selectedCategoryIds = xor(this.selectedCategoryIds, [id])
|
||||
if (this.$parentForm) {
|
||||
this.$parentForm.update(this.model, this.selectedCategoryIds)
|
||||
}
|
||||
},
|
||||
isActive(id) {
|
||||
return this.selectedCategoryIds.includes(id)
|
||||
},
|
||||
isDisabled(id) {
|
||||
return !!(this.reachedMaximum && !this.isActive(id))
|
||||
},
|
||||
categoryButtonsId(categoryId) {
|
||||
return `category-buttons-${categoryId}`
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
Category: {
|
||||
query() {
|
||||
return CategoryQuery()
|
||||
},
|
||||
result({ data: { Category } }) {
|
||||
this.categories = this.sortCategories(Category)
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.categories-select {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.categories-select {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .base-button {
|
||||
margin-right: $space-xx-small;
|
||||
margin-bottom: $space-xx-small;
|
||||
}
|
||||
}
|
||||
> .base-button {
|
||||
margin-right: $space-xx-small;
|
||||
margin-bottom: $space-xx-small;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -94,197 +94,197 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gql from 'graphql-tag'
|
||||
import { mapGetters } from 'vuex'
|
||||
import Editor from '~/components/Editor/Editor'
|
||||
import PostMutations from '~/graphql/PostMutations.js'
|
||||
import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
|
||||
import ImageUploader from '~/components/Uploader/ImageUploader'
|
||||
import links from '~/constants/links.js'
|
||||
import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
|
||||
import gql from 'graphql-tag'
|
||||
import { mapGetters } from 'vuex'
|
||||
import Editor from '~/components/Editor/Editor'
|
||||
import PostMutations from '~/graphql/PostMutations.js'
|
||||
import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
|
||||
import ImageUploader from '~/components/Uploader/ImageUploader'
|
||||
import links from '~/constants/links.js'
|
||||
import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
ImageUploader,
|
||||
PageParamsLink,
|
||||
CategoriesSelect,
|
||||
},
|
||||
props: {
|
||||
contribution: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
group: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
const { title, content, image, categories } = this.contribution
|
||||
const {
|
||||
sensitive: imageBlurred = false,
|
||||
aspectRatio: imageAspectRatio = null,
|
||||
type: imageType = null,
|
||||
} = image || {}
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
ImageUploader,
|
||||
PageParamsLink,
|
||||
CategoriesSelect,
|
||||
},
|
||||
props: {
|
||||
contribution: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
group: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
const { title, content, image, categories } = this.contribution
|
||||
const {
|
||||
sensitive: imageBlurred = false,
|
||||
aspectRatio: imageAspectRatio = null,
|
||||
type: imageType = null,
|
||||
} = image || {}
|
||||
|
||||
return {
|
||||
categoriesActive: this.$env.CATEGORIES_ACTIVE,
|
||||
links,
|
||||
formData: {
|
||||
title: title || '',
|
||||
content: content || '',
|
||||
image: image || null,
|
||||
imageAspectRatio,
|
||||
imageType,
|
||||
imageBlurred,
|
||||
categoryIds: categories ? categories.map((category) => category.id) : []
|
||||
},
|
||||
formSchema: {
|
||||
title: { required: true, min: 3, max: 100 },
|
||||
content: { required: true },
|
||||
imageBlurred: { required: false },
|
||||
categoryIds: {
|
||||
type: 'array',
|
||||
required: this.categoriesActive,
|
||||
validator: (_, value = []) => {
|
||||
if (this.categoriesActive && (value.length === 0 || value.length > 3)) {
|
||||
return [new Error(this.$t('common.validations.categories'))]
|
||||
}
|
||||
return []
|
||||
},
|
||||
},
|
||||
},
|
||||
loading: false,
|
||||
users: [],
|
||||
hashtags: [],
|
||||
imageUpload: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
currentUser: 'auth/user',
|
||||
}),
|
||||
contentLength() {
|
||||
return this.$filters.removeHtml(this.formData.content).length
|
||||
},
|
||||
groupId() {
|
||||
return this.group && this.group.id
|
||||
},
|
||||
showGroupHint() {
|
||||
return this.groupId && ['closed', 'hidden'].includes(this.group.groupType)
|
||||
},
|
||||
groupName() {
|
||||
return this.group && this.group.name
|
||||
},
|
||||
groupCategories() {
|
||||
return this.group && this.group.categories
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
groupCategories() {
|
||||
console.log('groupCategories', this.groupCategories)
|
||||
if (!this.formData.categoryIds && this.groupCategories) this.formData.categoryIds = this.groupCategories
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
let image = null
|
||||
const { title, content, categoryIds } = this.formData
|
||||
if (this.formData.image) {
|
||||
image = {
|
||||
sensitive: this.formData.imageBlurred,
|
||||
}
|
||||
if (this.imageUpload) {
|
||||
image.upload = this.imageUpload
|
||||
image.aspectRatio = this.formData.imageAspectRatio
|
||||
image.type = this.formData.imageType
|
||||
}
|
||||
}
|
||||
this.loading = true
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: this.contribution.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
|
||||
variables: {
|
||||
title,
|
||||
content,
|
||||
categoryIds,
|
||||
id: this.contribution.id || null,
|
||||
image,
|
||||
groupId: this.groupId,
|
||||
},
|
||||
})
|
||||
.then(({ data }) => {
|
||||
this.loading = false
|
||||
this.$toast.success(this.$t('contribution.success'))
|
||||
const result = data[this.contribution.id ? 'UpdatePost' : 'CreatePost']
|
||||
return {
|
||||
categoriesActive: this.$env.CATEGORIES_ACTIVE,
|
||||
links,
|
||||
formData: {
|
||||
title: title || '',
|
||||
content: content || '',
|
||||
image: image || null,
|
||||
imageAspectRatio,
|
||||
imageType,
|
||||
imageBlurred,
|
||||
categoryIds: categories ? categories.map((category) => category.id) : [], // : this.groupCategories.map((cat) => cat.id) || [],
|
||||
},
|
||||
formSchema: {
|
||||
title: { required: true, min: 3, max: 100 },
|
||||
content: { required: true },
|
||||
imageBlurred: { required: false },
|
||||
categoryIds: {
|
||||
type: 'array',
|
||||
required: this.categoriesActive,
|
||||
validator: (_, value = []) => {
|
||||
if (this.categoriesActive && (value.length === 0 || value.length > 3)) {
|
||||
return [new Error(this.$t('common.validations.categories'))]
|
||||
}
|
||||
return []
|
||||
},
|
||||
},
|
||||
},
|
||||
loading: false,
|
||||
users: [],
|
||||
hashtags: [],
|
||||
imageUpload: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
currentUser: 'auth/user',
|
||||
}),
|
||||
contentLength() {
|
||||
return this.$filters.removeHtml(this.formData.content).length
|
||||
},
|
||||
groupId() {
|
||||
return this.group && this.group.id
|
||||
},
|
||||
showGroupHint() {
|
||||
return this.groupId && ['closed', 'hidden'].includes(this.group.groupType)
|
||||
},
|
||||
groupName() {
|
||||
return this.group && this.group.name
|
||||
},
|
||||
groupCategories() {
|
||||
return this.group && this.group.categories // && group.categories.map((cat) => cat.id )
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
groupCategories() {
|
||||
if (!this.formData.categoryIds.length && this.groupCategories)
|
||||
this.formData.categoryIds = this.groupCategories.map((cat) => cat.id)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
let image = null
|
||||
const { title, content, categoryIds } = this.formData
|
||||
if (this.formData.image) {
|
||||
image = {
|
||||
sensitive: this.formData.imageBlurred,
|
||||
}
|
||||
if (this.imageUpload) {
|
||||
image.upload = this.imageUpload
|
||||
image.aspectRatio = this.formData.imageAspectRatio
|
||||
image.type = this.formData.imageType
|
||||
}
|
||||
}
|
||||
this.loading = true
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: this.contribution.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
|
||||
variables: {
|
||||
title,
|
||||
content,
|
||||
categoryIds,
|
||||
id: this.contribution.id || null,
|
||||
image,
|
||||
groupId: this.groupId,
|
||||
},
|
||||
})
|
||||
.then(({ data }) => {
|
||||
this.loading = false
|
||||
this.$toast.success(this.$t('contribution.success'))
|
||||
const result = data[this.contribution.id ? 'UpdatePost' : 'CreatePost']
|
||||
|
||||
this.$router.push({
|
||||
name: 'post-id-slug',
|
||||
params: { id: result.id, slug: result.slug },
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$toast.error(err.message)
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
updateEditorContent(value) {
|
||||
this.$refs.contributionForm.update('content', value)
|
||||
},
|
||||
addHeroImage(file) {
|
||||
this.formData.image = null
|
||||
if (file) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = ({ target }) => {
|
||||
this.formData.image = {
|
||||
...this.formData.image,
|
||||
url: target.result,
|
||||
}
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
this.imageUpload = file
|
||||
}
|
||||
},
|
||||
addImageAspectRatio(aspectRatio) {
|
||||
this.formData.imageAspectRatio = aspectRatio
|
||||
},
|
||||
addImageType(imageType) {
|
||||
this.formData.imageType = imageType
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
User: {
|
||||
query() {
|
||||
return gql`
|
||||
query {
|
||||
User(orderBy: slug_asc) {
|
||||
id
|
||||
slug
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
result({ data: { User } }) {
|
||||
this.users = User
|
||||
},
|
||||
},
|
||||
Tag: {
|
||||
query() {
|
||||
return gql`
|
||||
query {
|
||||
Tag(orderBy: id_asc) {
|
||||
id
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
result({ data: { Tag } }) {
|
||||
this.hashtags = Tag
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
this.$router.push({
|
||||
name: 'post-id-slug',
|
||||
params: { id: result.id, slug: result.slug },
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$toast.error(err.message)
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
updateEditorContent(value) {
|
||||
this.$refs.contributionForm.update('content', value)
|
||||
},
|
||||
addHeroImage(file) {
|
||||
this.formData.image = null
|
||||
if (file) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = ({ target }) => {
|
||||
this.formData.image = {
|
||||
...this.formData.image,
|
||||
url: target.result,
|
||||
}
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
this.imageUpload = file
|
||||
}
|
||||
},
|
||||
addImageAspectRatio(aspectRatio) {
|
||||
this.formData.imageAspectRatio = aspectRatio
|
||||
},
|
||||
addImageType(imageType) {
|
||||
this.formData.imageType = imageType
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
User: {
|
||||
query() {
|
||||
return gql`
|
||||
query {
|
||||
User(orderBy: slug_asc) {
|
||||
id
|
||||
slug
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
result({ data: { User } }) {
|
||||
this.users = User
|
||||
},
|
||||
},
|
||||
Tag: {
|
||||
query() {
|
||||
return gql`
|
||||
query {
|
||||
Tag(orderBy: id_asc) {
|
||||
id
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
result({ data: { Tag } }) {
|
||||
this.hashtags = Tag
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user