pinafore/routes/_components/dialog/components/AccountProfileOptionsDialog.html

<ModalDialog
  :id
  :label
  :title
  background="var(--main-bg)"
>
  <GenericDialogList :items on:click="onClick(event)"/>
</ModalDialog>
<script>
import ModalDialog from './ModalDialog.html'
import { store } from '../../../_store/store'
import GenericDialogList from './GenericDialogList.html'
import { importDialogs } from '../../../_utils/asyncModules'
import { createDialogId } from '../helpers/createDialogId'
import { show } from '../helpers/showDialog'
import { close } from '../helpers/closeDialog'
import { oncreate } from '../helpers/onCreateDialog'
import { setAccountBlocked } from '../../../_actions/block'
import { setAccountMuted } from '../../../_actions/mute'
import { setAccountFollowed } from '../../../_actions/follow'

export default {
  oncreate,
  store: () => store,
  data: () => ({
    id: createDialogId()
  }),
  computed: {
    // begin account data copypasta
    verifyCredentialsId: (verifyCredentials) => verifyCredentials.id,
    following: (relationship) => relationship && relationship.following,
    followRequested: (relationship) => relationship && relationship.requested,
    accountId: (account) => account && account.id,
    acct: (account) => account.acct,
    muting: (relationship) => relationship.muting,
    blocking: (relationship) => relationship.blocking,
    followLabel: (following, followRequested, account, acct) => {
      if (typeof following === 'undefined' || !account) {
        return ''
      }
      return (following || followRequested)
        ? `Unfollow @${acct}`
        : `Follow @${acct}`
    },
    followIcon: (following, followRequested) => {
      return following ? '#fa-user-times' : followRequested ? '#fa-hourglass' : '#fa-user-plus'
    },
    blockLabel: (blocking, acct) => {
      return blocking ? `Unblock @${acct}` : `Block @${acct}`
    },
    blockIcon: (blocking) => blocking ? '#fa-unlock' : '#fa-ban',
    muteLabel: (muting, acct) => {
      return muting ? `Unmute @${acct}` : `Mute @${acct}`
    },
    muteIcon: (muting) => muting ? '#fa-volume-up' : '#fa-volume-off',
    // end account data copypasta
    items: (blockLabel, blocking, blockIcon, muteLabel, muteIcon,
      followLabel, followIcon, following, followRequested,
      accountId, verifyCredentialsId, acct) => {
      let isUser = accountId === verifyCredentialsId
      return [
        !isUser && {
          key: 'mention',
          label: `Mention @${acct}`,
          icon: '#fa-comments'
        },
        !isUser && !blocking && {
          key: 'follow',
          label: followLabel,
          icon: followIcon
        },
        !isUser && {
          key: 'block',
          label: blockLabel,
          icon: blockIcon
        },
        !isUser && !blocking && {
          key: 'mute',
          label: muteLabel,
          icon: muteIcon
        }

      ].filter(Boolean)
    }
  },
  methods: {
    show,
    close,
    onClick (item) {
      switch (item.key) {
        case 'mention':
          return this.onMentionClicked()
        case 'follow':
          return this.onFollowClicked()
        case 'block':
          return this.onBlockClicked()
        case 'mute':
          return this.onMuteClicked()
      }
    },
    async onMentionClicked () {
      let { acct } = this.get()
      this.store.setComposeData('dialog', {
        text: `@${acct} `
      })
      let dialogs = await importDialogs()
      dialogs.showComposeDialog()
      this.close()
    },
    async onFollowClicked () {
      let { accountId, following } = this.get()
      this.close()
      await setAccountFollowed(accountId, !following, true)
    },
    async onBlockClicked () {
      let { accountId, blocking } = this.get()
      this.close()
      await setAccountBlocked(accountId, !blocking, true)
    },
    async onMuteClicked () {
      let { accountId, muting } = this.get()
      this.close()
      await setAccountMuted(accountId, !muting, true)
    }
  },
  components: {
    ModalDialog,
    GenericDialogList
  }
}
</script>