make poll form state local instead of vuex
This commit is contained in:
parent
70ba232ce3
commit
88c3103755
4 changed files with 27 additions and 39 deletions
|
@ -7,24 +7,24 @@
|
||||||
class="poll-option-input"
|
class="poll-option-input"
|
||||||
type="text"
|
type="text"
|
||||||
:placeholder="$t('polls.option')"
|
:placeholder="$t('polls.option')"
|
||||||
@input="onUpdateOption($event, index)"
|
|
||||||
:value="option"
|
|
||||||
:maxlength="maxLength"
|
:maxlength="maxLength"
|
||||||
|
v-model="options[index]"
|
||||||
|
@change="updatePollToParent"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="icon-container">
|
<div class="icon-container" v-if="options.length > 2">
|
||||||
<i class="icon-cancel" @click="onDeleteOption(index)"></i>
|
<i class="icon-cancel" @click="deleteOption(index)"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
class="btn btn-default add-option"
|
class="btn btn-default add-option"
|
||||||
type="button"
|
type="button"
|
||||||
@click="onAddOption"
|
@click="addOption"
|
||||||
>{{ $t("polls.add_option") }}</button>
|
>{{ $t("polls.add_option") }}</button>
|
||||||
<div class="poll-type-expiry">
|
<div class="poll-type-expiry">
|
||||||
<div class="poll-type">
|
<div class="poll-type">
|
||||||
<label for="poll-type-selector" class="select">
|
<label for="poll-type-selector" class="select">
|
||||||
<select id="poll-type-selector" v-model="pollType" @change="onTypeChange">
|
<select id="poll-type-selector" v-model="pollType" @change="updatePollToParent">
|
||||||
<option value="single">{{$t('polls.single_choice')}}</option>
|
<option value="single">{{$t('polls.single_choice')}}</option>
|
||||||
<option value="multiple">{{$t('polls.multiple_choices')}}</option>
|
<option value="multiple">{{$t('polls.multiple_choices')}}</option>
|
||||||
</select>
|
</select>
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="poll-expiry">
|
<div class="poll-expiry">
|
||||||
<label for="poll-expiry-selector" class="select">
|
<label for="poll-expiry-selector" class="select">
|
||||||
<select id="poll-expiry-selector" v-model="pollExpiry" @change="onExpiryChange">
|
<select id="poll-expiry-selector" v-model="pollExpiry" @change="updatePollToParent">
|
||||||
<option v-for="(value, key) in expiryOptions" :value="key" v-bind:key="key">
|
<option v-for="(value, key) in expiryOptions" :value="key" v-bind:key="key">
|
||||||
{{ value }}
|
{{ value }}
|
||||||
</option>
|
</option>
|
||||||
|
@ -53,15 +53,10 @@ export default {
|
||||||
props: ['visible'],
|
props: ['visible'],
|
||||||
data: () => ({
|
data: () => ({
|
||||||
pollType: 'single',
|
pollType: 'single',
|
||||||
pollExpiry: '86400'
|
pollExpiry: '86400',
|
||||||
|
options: ['', '']
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
optionsLength () {
|
|
||||||
return this.$store.state.poll.options.length
|
|
||||||
},
|
|
||||||
options () {
|
|
||||||
return this.$store.state.poll.options
|
|
||||||
},
|
|
||||||
pollLimits () {
|
pollLimits () {
|
||||||
return this.$store.state.instance.pollLimits
|
return this.$store.state.instance.pollLimits
|
||||||
},
|
},
|
||||||
|
@ -88,29 +83,22 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onAddOption () {
|
addOption () {
|
||||||
if (this.optionsLength < this.maxOptions) {
|
if (this.options.length < this.maxOptions) {
|
||||||
this.$store.dispatch('addPollOption', { option: '' })
|
this.options.push('')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onDeleteOption (index) {
|
deleteOption (index, event) {
|
||||||
if (this.optionsLength > 1) {
|
if (this.options.length > 2) {
|
||||||
this.$store.dispatch('deletePollOption', { index })
|
this.options.splice(index, 1)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onUpdateOption (e, index) {
|
updatePollToParent () {
|
||||||
this.$store.dispatch('updatePollOption', {
|
this.$emit('update-poll', {
|
||||||
index,
|
options: this.options,
|
||||||
option: e.target.value
|
expiresIn: this.pollExpiry,
|
||||||
|
multiple: this.pollType === 'multiple'
|
||||||
})
|
})
|
||||||
},
|
|
||||||
onTypeChange (e) {
|
|
||||||
const multiple = e.target.value === 'multiple'
|
|
||||||
|
|
||||||
this.$store.dispatch('setMultiple', { multiple })
|
|
||||||
},
|
|
||||||
onExpiryChange (e) {
|
|
||||||
this.$store.dispatch('setExpiresIn', { expiresIn: e.target.value })
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -66,8 +66,6 @@ const PostStatusForm = {
|
||||||
? this.$store.state.instance.postContentType
|
? this.$store.state.instance.postContentType
|
||||||
: this.$store.state.config.postContentType
|
: this.$store.state.config.postContentType
|
||||||
|
|
||||||
const poll = this.$store.state.poll || {}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
dropFiles: [],
|
dropFiles: [],
|
||||||
submitDisabled: false,
|
submitDisabled: false,
|
||||||
|
@ -79,7 +77,7 @@ const PostStatusForm = {
|
||||||
status: statusText,
|
status: statusText,
|
||||||
nsfw: false,
|
nsfw: false,
|
||||||
files: [],
|
files: [],
|
||||||
poll,
|
poll: {},
|
||||||
visibility: scope,
|
visibility: scope,
|
||||||
contentType
|
contentType
|
||||||
},
|
},
|
||||||
|
@ -280,9 +278,8 @@ const PostStatusForm = {
|
||||||
files: [],
|
files: [],
|
||||||
visibility: newStatus.visibility,
|
visibility: newStatus.visibility,
|
||||||
contentType: newStatus.contentType,
|
contentType: newStatus.contentType,
|
||||||
poll: this.$store.state.poll
|
poll: {}
|
||||||
}
|
}
|
||||||
this.$store.dispatch('swapPollOptions', { options: ['', ''] })
|
|
||||||
this.pollFormVisible = false
|
this.pollFormVisible = false
|
||||||
this.$refs.mediaUpload.clearFile()
|
this.$refs.mediaUpload.clearFile()
|
||||||
this.$emit('posted')
|
this.$emit('posted')
|
||||||
|
@ -358,6 +355,9 @@ const PostStatusForm = {
|
||||||
togglePollForm () {
|
togglePollForm () {
|
||||||
this.pollFormVisible = !this.pollFormVisible
|
this.pollFormVisible = !this.pollFormVisible
|
||||||
},
|
},
|
||||||
|
setPoll (poll) {
|
||||||
|
this.newStatus.poll = poll
|
||||||
|
},
|
||||||
dismissScopeNotice () {
|
dismissScopeNotice () {
|
||||||
this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
|
this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
|
||||||
}
|
}
|
||||||
|
|
|
@ -92,7 +92,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<poll-form v-if="pollsAvailable" :visible="pollFormVisible" />
|
<poll-form v-if="pollsAvailable" :visible="pollFormVisible" @update-poll="setPoll" />
|
||||||
<div class='form-bottom'>
|
<div class='form-bottom'>
|
||||||
<media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
|
<media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
|
||||||
<div v-if="pollsAvailable" class="poll-icon">
|
<div v-if="pollsAvailable" class="poll-icon">
|
||||||
|
|
Loading…
Reference in a new issue