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

Fix styling of hc-editor, localize toast message

Browse Source 
- validations are not working for hc-editor, neither in this PR nor in ContributionForm
This commit is contained in:
Matt Rider 2019-04-19 12:53:59 -03:00
parent 9ff194f3d6
commit 4d8148297e
2 changed files with 58 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webapp/locales/en.json
View File

@ -112,7 +112,8 @@
"takeAction": { "takeAction": {
"name": "Take action" "name": "Take action"
}, },
"submitComment": "Submit Comment" "submitComment": "Submit Comment",
"commentSubmitted": "Comment Submitted"
}, },
"quotes": { "quotes": {
"african": { "african": {

90
webapp/pages/post/_id/_slug/index.vue
View File

@ -112,33 +112,46 @@
</h3> </h3>
</ds-flex-item> </ds-flex-item>
<ds-flex-item width="70%"> <ds-flex-item width="70%">
<no-ssr> <ds-form
<hc-editor ref="contributionForm"
v-model="value" v-model="form"
/> :schema="formSchema"
</no-ssr> @submit="handleSubmit"
<ds-space /> >
<ds-flex> <template slot-scope="{ errors }">
<ds-flex-item width="50%"> <ds-card>
<ds-button <no-ssr>
:disabled="loading || disabled" <hc-editor
@click.prevent="$router.back()" :value="form.content"
> @input="updateEditorContent"
{{ $t('actions.cancel') }} />
</ds-button> </no-ssr>
</ds-flex-item> <ds-space />
<ds-flex-item> <ds-flex>
<ds-button <ds-flex-item width="50%" />
type="submit" <ds-flex-item width="20%">
:loading="loading" <ds-button
:disabled="disabled" :disabled="loading || disabled"
primary ghost
@click="handleSubmit" @click.prevent="$router.back()"
> >
{{ $t('post.submitComment') }} {{ $t('actions.cancel') }}
</ds-button> </ds-button>
</ds-flex-item> </ds-flex-item>
</ds-flex> <ds-flex-item width="20%">
<ds-button
type="submit"
:loading="loading"
:disabled="disabled || errors"
primary
>
{{ $t('post.submitComment') }}
</ds-button>
</ds-flex-item>
</ds-flex>
</ds-card>
</template>
</ds-form>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
<ds-space margin-bottom="large" /> <ds-space margin-bottom="large" />
@ -201,7 +214,13 @@ export default {
ready: false, ready: false,
title: 'loading', title: 'loading',
loading: false, loading: false,
disabled: false disabled: false,
form: {
content: ''
},
formSchema: {
content: { required: true, min: 3 }
}
} }
}, },
watch: { watch: {
@ -317,14 +336,17 @@ export default {
isAuthor(id) { isAuthor(id) {
return this.$store.getters['auth/user'].id === id return this.$store.getters['auth/user'].id === id
}, },
updateEditorContent(value) {
// this.form.content = value
this.$refs.contributionForm.update('content', value)
},
addComment(comment) { addComment(comment) {
this.$apollo.queries.Post.refetch() this.$apollo.queries.Post.refetch()
// this.post = { ...this.post, comments: [...this.post.comments, comment] } // this.post = { ...this.post, comments: [...this.post.comments, comment] }
}, },
handleSubmit() { handleSubmit() {
const value = this.value const content = this.form.content
this.value = '' this.form.content = ''
this.loading = true
this.$apollo this.$apollo
.mutate({ .mutate({
mutation: gql` mutation: gql`
@ -337,14 +359,14 @@ export default {
`, `,
variables: { variables: {
postId: this.post.id, postId: this.post.id,
content: value content: content
} }
}) })
.then(res => { .then(res => {
this.addComment(res.data.CreateComment) this.addComment(res.data.CreateComment)
this.disabled = true
this.loading = false this.loading = false
this.$toast.success('Saved!') this.disabled = false
this.$toast.success(this.$t('post.commentSubmitted'))
}) })
.catch(err => { .catch(err => {
this.$toast.error(err.message) this.$toast.error(err.message)