make poll form state local instead of vuex

This commit is contained in:
shpuld 2019-06-07 19:09:38 +03:00
parent 70ba232ce3
commit 88c3103755
4 changed files with 27 additions and 39 deletions

View file

@ -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 })
} }
} }
} }

View file

@ -41,7 +41,7 @@ export default {
methods: { methods: {
vote () { vote () {
this.loading = true this.loading = true
const choices = this.checks.map((entry, index) => index).filter(value => typeof value === 'number') const choices = this.checks.map((entry, index) => index).filter(value => typeof value === 'number')
this.$store.dispatch('votePoll', { id: this.statusId, pollId: this.poll.id, choices }).then(poll => { this.$store.dispatch('votePoll', { id: this.statusId, pollId: this.poll.id, choices }).then(poll => {
this.loading = false this.loading = false

View file

@ -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 })
} }

View file

@ -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">