gancio/components/admin/Moderation.vue

<template lang='pug'>
v-container
  v-card-title {{$t('common.moderation')}}
  v-card-text
    v-row
      v-col(:span='12')
        span {{$t('common.instances')}}
        v-text-field(v-model='instancesFilter' :placeholder="$t('admin.filter_instances')")
        v-data-table(:items='instances'
          :items-per-page='5'
          :search='instancesFilter'
          :hide-default-footer='instances.length<5'
          :header-props='{ sortIcon: mdiChevronDown }'
          :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
          dense :headers='instancesHeader'
          @click:row='instanceSelected')
          template(v-slot:item.blocked="{ item }")
            v-icon(@click='toggleBlock(item)' v-text='item.blocked ? mdiCheckboxIntermediate : mdiCheckboxBlankOutline')

      v-col(:span='11')
        span {{$t('common.users')}}
        v-text-field(v-model='usersFilter' :placeholder="$t('admin.filter_users')")
        v-data-table(:items='users'
          :items-per-page='5'
          :search='usersFilter'
          :hide-default-footer='users.length<5'
          :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
          :header-props='{ sortIcon: mdiChevronDown }'
          dense :headers='usersHeader')
          template(v-slot:item.blocked="{ item }")
            v-icon(@click='toggleUserBlock(item)' v-text='item.blocked ? mdiCheckboxIntermediate : mdiCheckboxBlankOutline')

    div
      v-card-title {{$t('common.resources')}}
      v-data-table(:items='resources' dense
        :headers='resourcesHeader'
        :hide-default-footer='resources.length<10'
        :items-per-page='10'
        :header-props='{ sortIcon: mdiChevronDown }'
        :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }')
        template(v-slot:item.content='{ item }')
          span(v-html='item.data.content')
        template(v-slot:item.created='{ item }')
          span {{$time.format(item.created, 'ff')}}
        template(v-slot:item.user='{ item }')
          a(:href='item.ap_user.url || item.ap_user.ap_id' target='_blank') {{item.ap_user.preferredUsername}}
        template(v-slot:item.event='{ item }')
          nuxt-link(:to='`/event/${item.event.slug || item.event.id}`') {{item.event.title}}
        template(v-slot:item.actions='{ item }')
          v-menu(offset-y)
            template(v-slot:activator="{ on }")
              v-btn.mr-2(v-on='on' color='primary' small icon)
                v-icon(v-text='mdiDotsVertical')
            v-list
              v-list-item(v-if='!item.hidden' @click='hideResource(item, true)')
                v-list-item-title <v-icon left v-text='mdiEyeOff'></v-icon> {{$t('admin.hide_resource')}}
              v-list-item(v-else @click='hideResource(item, false)')
                v-list-item-title <v-icon left v-text='mdiEye'></v-icon> {{$t('admin.show_resource')}}
              v-list-item(@click='deleteResource(item)')
                v-list-item-title <v-icon left v-text='mdiDelete'></v-icon> {{$t('admin.delete_resource')}}
              //- v-list-item(@click='toggleUserBlock(item.ap_user)')
              //-   v-list-item-title <v-icon left>mdi-lock</v-icon> {{$t('admin.block_user')}}
</template>
<script>
import { mapState, mapActions } from 'vuex'
import get from 'lodash/get'
import { mdiDelete, mdiEye, mdiEyeOff, mdiDotsVertical, mdiCheckboxIntermediate,
mdiCheckboxBlankOutline, mdiChevronLeft, mdiChevronRight, mdiChevronDown } from '@mdi/js'

export default {
  name: 'Moderation',
  data () {
    return {
      mdiDelete, mdiEye, mdiEyeOff, mdiDotsVertical, mdiCheckboxIntermediate,
      mdiCheckboxBlankOutline, mdiChevronLeft, mdiChevronRight, mdiChevronDown,
      instances: [],
      resources: [],
      users: [],
      usersHeader: [
        { value: 'object.preferredUsername', text: this.$t('common.name') },
        { value: 'blocked', text: this.$t('admin.blocked') }
      ],
      instancesHeader: [
        { value: 'domain', text: this.$t('admin.domain') },
        { value: 'name', text: this.$t('common.name') },
        { value: 'blocked', text: this.$t('admin.blocked') },
        { value: 'users', text: this.$t('admin.known_users') }
      ],
      resourcesHeader: [
        { value: 'created', text: this.$t('admin.created_at') },
        { value: 'event', text: this.$t('common.event') },
        { value: 'user', text: this.$t('common.user') },
        { value: 'content', text: this.$t('common.content') },
        { value: 'actions', text: this.$t('common.actions') }
      ],
      usersFilter: '',
      instancesFilter: ''
    }
  },
  computed: mapState(['settings']),
  async mounted () {
    this.instances = await this.$axios.$get('/instances')
    if (!this.instances.length) {
      return
    }
    this.users = await this.$axios.$get(`/instances/${this.instances[0].domain}`)
    this.resources = await this.$axios.$get('/resources')
  },
  methods: {
    ...mapActions(['setSetting']),
    resourceStyle ({ row }) {
      if (row.hidden) {
        return { opacity: 0.5 }
      }
    },
    async instanceSelected (instance) {
      this.users = await this.$axios.$get(`/instances/${instance.domain}`)
      this.resources = await this.$axios.$get('/resources', { filters: { instance: instance.domain } })
    },
    async hideResource (resource, hidden) {
      await this.$axios.$put(`/resources/${resource.id}`, { hidden })
      resource.hidden = hidden
    },
    async toggleUserBlock (ap_user) {
      if (!ap_user.blocked) {
        const ret = await this.$root.$confirm('admin.user_block_confirm', { user: get(ap_user, 'object.preferredUsername', ap_user.preferredUsername) })
        if (!ret) { return }
      }
      await this.$axios.post('/instances/toggle_user_block', { ap_id: ap_user.ap_id })
      ap_user.blocked = !ap_user.blocked
    },
    async deleteResource (resource) {
      const ret = await this.$root.$confirm('admin.delete_resource_confirm')
      if (!ret) { return }
      await this.$axios.delete(`/resources/${resource.id}`)
      this.resources = this.resources.filter(r => r.id !== resource.id)
    },
    async toggleBlock (instance) {
      if (!instance.blocked) {
        const ret = await this.$root.$confirm('admin.instance_block_confirm', { instance: instance.domain })
        if (!ret) { return }
      }
      await this.$axios.post('/instances/toggle_block', { instance: instance.domain, blocked: !instance.blocked })
      instance.blocked = !instance.blocked
    }
  }
}
</script>