better dialog, actually working dontAskAgain

src/components/user_timed_filter_modal/user_timed_filter_modal.js

@@ -1,89 +1,96 @@
-import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
+import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Select from 'src/components/select/select.vue'
+import { durationStrToMs } from 'src/services/date_utils/date_utils.js'
 
 const UserTimedFilterModal = {
   data () {
+    const action = this.isMute
+          ? this.$store.getters.mergedConfig.onMuteDefaultAction
+          : this.$store.getters.mergedConfig.onBlockDefaultAction
+    const doAsk = action === 'ask'
+    const defaultValues = {}
+
+    if (doAsk || action === 'forever') {
+      defaultValues.expiration = 14
+      defaultValues.expirationUnit = 'd'
+      if (action === 'forever') {
+        defaultValues.forever = true
+      }
+    } else {
+      const unit = action.replace(/[0-9,.]+/, '')
+      const value = action.replace(/[^0-9,.]+/, '')
+      defaultValues.expiration = value
+      defaultValues.expirationUnit = unit
+    }
+
     return {
       showing: false,
+      forever: false,
       dontAskAgain: false,
-      expiration: (() => {
+      ...defaultValues
-        const date = new Date()
-        const fmt = new Intl.NumberFormat("en-US", {minimumIntegerDigits: 2})
-        return [
-          date.getFullYear(),
-          '-',
-          fmt.format(date.getMonth() + 1),
-          '-',
-          fmt.format(date.getDate()),
-          'T',
-          fmt.format(date.getHours()),
-          ':',
-          fmt.format(date.getMinutes())
-        ].join('')
-      })()
     }
   },
   components: {
-    DialogModal,
+    ConfirmModal,
+    Select,
     Checkbox
   },
   props: {
     isMute: Boolean,
     user: Object
   },
-  emits: [
-    'timed',
-    'forever',
-    'user'
-  ],
   computed: {
-    dateValid () {
-      return (new Date(this.expiration).toJSON() != null) &&
-        new Date(this.expiration) > new Date()
-    },
-    expiryTime () {
-      return Math.floor((new Date(this.expiration).valueOf() - Date.now())  / 1000)
-    },
     shouldConfirm () {
       if (this.isMute) {
-        return this.mergedConfig.onMuteDefaultAction === 'ask'
+        return this.$store.getters.mergedConfig.onMuteDefaultAction === 'ask'
       } else {
-        return this.mergedConfig.onBlockDefaultAction === 'ask'
+        return this.$store.getters.mergedConfig.onBlockDefaultAction === 'ask'
+      }
+    },
+    expiryString () {
+      return this.expiration.toString() + this.expirationUnit
+    },
+    expirySeconds () {
+      return Math.floor(durationStrToMs(this.expiryString) / 1000)
+    },
+    requestBody () {
+      const object = { id: this.user.id }
+      if (!this.forever) {
+        object.expiresIn = this.expirySeconds
+      }
+      return object
+    }
+  },
+  watch: {
+    expiration (newVal) {
+      if (newVal <= 0) {
+        this.expiration = 1
       }
     }
   },
   methods: {
     optionallyPrompt () {
+      if (this.shouldConfirm) {
         this.showing = true
-    },
-    temporarily () {
-      if (this.isMute) {
-        this.muteUserTemporarily()
       } else {
-        this.blockUserTemporarily()
+        this.accept()
+      }
+    },
+    accept () {
+      if (this.isMute) {
+        this.$store.dispatch('muteUser', this.requestBody)
+        if (this.dontAskAgain) {
+          this.$store.dispatch('setOption', { name: 'onMuteDefaultAction', value: this.expiryString })
+        }
+      } else {
+        this.$store.dispatch('blockUser', this.requestBody)
+        if (this.dontAskAgain) {
+          this.$store.dispatch('setOption', { name: 'onBlockDefaultAction', value: this.expiryString })
+        }
       }
       this.showing = false
     },
-    forever () {
-      if (this.isMute) {
-        this.muteUserForever()
-      } else {
-        this.blockUserForever()
-      }
-      this.showing = false
-    },
-    blockUserForever () {
-      this.$store.dispatch('blockUser', { id: this.user.id })
-    },
-    blockUserTemporarily () {
-      this.$store.dispatch('blockUser', { id: this.user.id, expiresIn: this.expiryTime })
-    },
-    muteUserForever () {
-      this.$store.dispatch('muteUser', { id: this.user.id })
-    },
-    muteUserTemporarily () {
-      this.$store.dispatch('muteUser', { id: this.user.id, expiresIn: this.expiryTime })
-    },
     cancel () {
       this.showing = false
     }

src/components/user_timed_filter_modal/user_timed_filter_modal.vue

@@ -1,24 +1,49 @@
 <template>
-  <dialog-modal
+  <confirm-modal
     v-if="showing"
-    v-body-scroll-lock="true"
+    :title="$t(isMute ? $t('user_card.mute') : $t('user_card.block'))"
-    class="confirm-modal UserTimedFilterModal"
+    :confirm-text="$t(isMute ? 'user_card.mute_confirm_accept_button' : 'user_card.block_confirm_accept_button')"
-    :on-cancel="cancel"
+    :cancel-text="$t(isMute ? 'user_card.mute_confirm_cancel_button' : 'user_card.block_confirm_cancel_button')"
+    @accepted="accept"
+    @cancelled="cancel"
   >
-    <template #header>
-      <span>
-        {{ isMute ? $t('user_card.mute') : $t('user_card.block') }}
-      </span>
-    </template>
-
-    {{ $t('user_card.expire_at') }}
 
+    <p>
+      {{ $t(isMute ? 'user_card.expire_mute_message' : 'user_card.expire_block_message', [user.screen_name]) }}
+    </p>
+    <p>
+    {{ $t('user_card.expire_in') }}
       <input
         id="userFilterExpires"
-      class="input input-expire-at"
+        class="input input-expire-in"
-      type="datetime-local"
+        :class="{ disabled: forever }"
         v-model="expiration"
+        :disabled="forever"
+        min="1"
+        type="number"
       >
+      <Select
+        id="userFilterExpiresUnit"
+        v-model="expirationUnit"
+        class="input unit-input unstyled"
+        :disabled="forever"
+      >
+        <option key="s" value="s"> {{ $t('time.unit.seconds_suffix') }} </option>
+        <option key="m" value="m"> {{ $t('time.unit.minutes_suffix') }} </option>
+        <option key="h" value="h"> {{ $t('time.unit.hours_suffix') }} </option>
+        <option key="d" value="d"> {{ $t('time.unit.days_suffix') }} </option>
+      </Select>
+
+      <br />
+      <Checkbox
+        id="forever"
+        v-model="forever"
+        name="forever"
+        class="input-forever"
+      >
+        {{ $t('user_card.mute_block_forever') }}
+      </Checkbox>
+    </p>
 
     <Checkbox
       id="dontAskAgain"
@@ -26,34 +51,9 @@
       name="dontAskAgain"
       class="input-dont-ask-again"
     >
-      {{ $t('user_card.dont_ask_again') }}
+      {{ $t(isMute ? 'user_card.dont_ask_again_mute' : 'user_card.dont_ask_again_block') }}
     </Checkbox>
-
+  </confirm-modal>
-    <template #footer>
-      <button
-        class="btn button-default"
-        :disabled="!dateValid"
-        :class="{ disabled: !dateValid  }"
-        @click.prevent="temporarily"
-      >
-        {{ $t('user_card.mute_block_temporarily') }}
-      </button>
-
-      <button
-        class="btn button-default"
-        @click.prevent="forever"
-      >
-        {{ $t('user_card.mute_block_forever') }}
-      </button>
-
-      <button
-        class="btn button-default"
-        @click.prevent="cancel"
-      >
-        {{ $t('general.cancel') }}
-      </button>
-    </template>
-  </dialog-modal>
 </template>
 
 <script src="./user_timed_filter_modal.js"></script>

src/i18n/en.json

@@ -1227,18 +1227,25 @@
     "unit": {
       "days": "{0} day | {0} days",
       "days_short": "{0}d",
+      "days_suffix": "day(s)",
       "hours": "{0} hour | {0} hours",
       "hours_short": "{0}h",
+      "hours_suffix": "hour(s)",
       "minutes": "{0} minute | {0} minutes",
       "minutes_short": "{0}min",
+      "minutes_suffix": "minute(s)",
       "months": "{0} month | {0} months",
       "months_short": "{0}mo",
+      "months_suffix": "month(s)",
       "seconds": "{0} second | {0} seconds",
       "seconds_short": "{0}s",
+      "seconds_suffix": "second(s)",
       "weeks": "{0} week | {0} weeks",
       "weeks_short": "{0}w",
+      "weeks_suffix": "week(s)",
       "years": "{0} year | {0} years",
-      "years_short": "{0}y"
+      "years_short": "{0}y",
+      "years": "year(s)"
     },
     "in_future": "in {0}",
     "in_past": "{0} ago",
@@ -1392,8 +1399,11 @@
     "mute_confirm": "Do you really want to mute {user}?",
     "mute_confirm_accept_button": "Mute",
     "mute_confirm_cancel_button": "Do not mute",
-    "expire_at": "Expire at",
+    "expire_in": "Expire in",
-    "dont_ask_again": "Do not ask again",
+    "expire_mute_message": "Are you sure you want to mute {0}?",
+    "expire_block_message": "Are you sure you want to block {0}?",
+    "dont_ask_again_mute": "Always mute users this way",
+    "dont_ask_again_block": "Always block users this way",
     "mute_block_temporarily": "Temporarily",
     "mute_block_forever": "Forever",
     "mute_duration_prompt": "Mute this user for (0 for indefinite time):",

src/services/api/api.service.js

@@ -325,7 +325,6 @@ const blockUser = ({ id, expiresIn, credentials }) => {
     payload.expires_in = expiresIn
   }
 
-  console.log(payload)
   return promisedRequest({
     url: MASTODON_BLOCK_USER_URL(id),
     credentials,