poll form mini-refactor

src/components/poll/poll_form.js

@@ -16,42 +16,45 @@ export default {
   },
   name: 'PollForm',
   props: {
-    visible: {},
+    visible: Boolean,
-    params: {
+    modelValue: {
       type: Object,
-      required: true,
+      required: false,
+      default: null,
     },
   },
+  emits: ['update:modelValue'],
   computed: {
     pollType: {
       get() {
-        return pollFallback(this.params, 'pollType')
+        return pollFallback(this.modelValue, 'pollType')
       },
       set(newVal) {
-        this.params.pollType = newVal
+        this.$emit('update:modelValue', { ...this.modelValue, pollType: newVal })
       },
     },
-    options() {
+    options: {
-      const hasOptions = !!this.params.options
+      get() {
-      if (!hasOptions) {
+        return pollFallback(this.modelValue, 'options')
-        this.params.options = pollFallback(this.params, 'options')
+      },
+      set(newVal) {
+        this.$emit('update:modelValue', { ...this.modelValue, options: newVal })
       }
-      return this.params.options
     },
     expiryAmount: {
       get() {
-        return pollFallback(this.params, 'expiryAmount')
+        return pollFallback(this.modelValue, 'expiryAmount')
       },
       set(newVal) {
-        this.params.expiryAmount = newVal
+        this.$emit('update:modelValue', { ...this.modelValue, expiryAmount: newVal })
       },
     },
     expiryUnit: {
       get() {
-        return pollFallback(this.params, 'expiryUnit')
+        return pollFallback(this.modelValue, 'expiryUnit')
       },
       set(newVal) {
-        this.params.expiryUnit = newVal
+        this.$emit('update:modelValue', { ...this.modelValue, expiryUnit: newVal })
       },
     },
     pollLimits() {
@@ -88,12 +91,6 @@ export default {
     },
   },
   methods: {
-    clear() {
-      this.pollType = 'single'
-      this.options = ['', '']
-      this.expiryAmount = 10
-      this.expiryUnit = 'minutes'
-    },
     nextOption(index) {
       const element = this.$el.querySelector(`#poll-${index + 1}`)
       if (element) {
@@ -110,7 +107,7 @@ export default {
     },
     addOption() {
       if (this.options.length < this.maxOptions) {
-        this.options.push('')
+        this.options = [...this.options, '']
         return true
       }
       return false
@@ -118,8 +115,12 @@ export default {
     deleteOption(index) {
       if (this.options.length > 2) {
         this.options.splice(index, 1)
+        this.options = this.options
       }
     },
+    updateOption(index, value) {
+      this.options = this.options
+    },
     convertExpiryToUnit(unit, amount) {
       // Note: we want seconds and not milliseconds
       return DateUtils.secondsToUnit(unit, amount)

src/components/poll/poll_form.vue

@@ -18,6 +18,7 @@
           :placeholder="$t('polls.option')"
           :maxlength="maxLength"
           @keydown.enter.stop.prevent="nextOption(index)"
+          @change="updateOption"
         >
       </div>
       <button

src/components/post_status_form/post_status_form.js

@@ -306,11 +306,11 @@ const PostStatusForm = {
     },
     // -Poll
     hasPoll() {
-      this.newStatus.poll != null
+      return this.newStatus.poll != null
     },
     // -Quotes
     hasQuote() {
-      this.newStatus.quote !== null
+      return this.newStatus.quote !== null
     },
     quotable() {
       return this.quotingAvailable && this.replyTo
@@ -350,9 +350,13 @@ const PostStatusForm = {
         return this.newStatus.quote?.thread
       },
       set(value) {
-        this.newStatus.quote = {}
+        if (value) {
-        this.newStatus.quote.thread = value
+          this.newStatus.quote = {}
-        this.newStatus.quote.id = value ? this.replyTo : ''
+          this.newStatus.quote.thread = value
+          this.newStatus.quote.id = value ? this.replyTo : ''
+        } else {
+          this.newStatus.quote = null
+        }
       },
     },
 
@@ -567,19 +571,15 @@ const PostStatusForm = {
     clearStatus() {
       const newStatus = this.newStatus
       this.saveInhibited = true
-      this.newStatus = {
+      this.newStatus.status = ''
-        status: '',
+      this.newStatus.mentionsLine = '',
-        mentionsLine: '',
+      this.newStatus.spoilerText = '',
-        spoilerText: '',
+      this.newStatus.files = [],
-        files: [],
+      this.newStatus.poll = null,
-        visibility: newStatus.visibility,
+      this.newStatus.quote = null,
-        contentType: newStatus.contentType,
+      this.newStatus.mediaDescriptions = {},
-        poll: {},
+
-        quote: {},
-        mediaDescriptions: {},
-      }
       this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
-      this.clearPollForm()
       this.clearQuoteForm()
       if (this.preserveFocus) {
         this.$nextTick(() => {
@@ -920,11 +920,6 @@ const PostStatusForm = {
     setPoll(poll) {
       this.newStatus.poll = poll
     },
-    clearPollForm() {
-      if (this.$refs.pollForm) {
-        this.$refs.pollForm.clear()
-      }
-    },
     clearQuoteForm() {
       if (this.$refs.quoteForm) {
         this.$refs.quoteForm.clear()

src/components/post_status_form/post_status_form.vue

@@ -271,7 +271,7 @@
         v-if="pollsAvailable"
         ref="pollForm"
         :visible="pollFormVisible"
-        :params="newStatus.poll"
+        v-model="newStatus.poll"
       />
       <QuoteForm
         v-if="quotingAvailable"