funkwhale/front/src/components/moderation/FilterModal.vue

146 wiersze
4.2 KiB
Vue

<script setup lang="ts">
import type { BackendError } from '~/types'
import axios from 'axios'
import { computed, ref } from 'vue'
import { useGettext } from 'vue3-gettext'
import { useStore } from '~/store'
import SemanticModal from '~/components/semantic/Modal.vue'
import useLogger from '~/composables/useLogger'
const logger = useLogger()
const { $pgettext } = useGettext()
const store = useStore()
const show = computed({
get: () => store.state.moderation.showFilterModal,
set: (value) => {
store.commit('moderation/showFilterModal', value)
errors.value = []
}
})
const type = computed(() => store.state.moderation.filterModalTarget.type)
const target = computed(() => store.state.moderation.filterModalTarget.target)
const errors = ref([] as string[])
const isLoading = ref(false)
const hide = async () => {
isLoading.value = true
const payload = {
target: {
type: type.value,
id: target.value?.id
}
}
try {
const response = await axios.post('moderation/content-filters/', payload)
logger.info(`Successfully hidden ${type.value} ${target.value?.id}`)
show.value = false
store.state.moderation.lastUpdate = new Date()
store.commit('moderation/contentFilter', response.data)
store.commit('ui/addMessage', {
content: $pgettext('*/Moderation/Message', 'Content filter successfully added'),
date: new Date()
})
} catch (error) {
logger.error(`Error while hiding ${type.value} ${target.value?.id}`)
errors.value = (error as BackendError).backendErrors
}
isLoading.value = false
}
</script>
<template>
<semantic-modal v-model:show="show">
<h4 class="header">
<translate
v-if="type === 'artist'"
translate-context="Popup/Moderation/Title/Verb"
:translate-params="{name: target?.name}"
>
Do you want to hide content from artist "%{ name }"?
</translate>
</h4>
<div class="scrolling content">
<div class="description">
<div
v-if="errors.length > 0"
role="alert"
class="ui negative message"
>
<h4 class="header">
<translate translate-context="Popup/Moderation/Error message">
Error while creating filter
</translate>
</h4>
<ul class="list">
<li
v-for="(error, key) in errors"
:key="key"
>
{{ error }}
</li>
</ul>
</div>
<template v-if="type === 'artist'">
<p>
<translate translate-context="Popup/Moderation/Paragraph">
You will not see tracks, albums and user activity linked to this artist any more:
</translate>
</p>
<ul>
<li>
<translate translate-context="Popup/Moderation/List item">
In other users favorites and listening history
</translate>
</li>
<li>
<translate translate-context="Popup/Moderation/List item">
In "Recently added" widget
</translate>
</li>
<li>
<translate translate-context="Popup/Moderation/List item">
In artists and album listings
</translate>
</li>
<li>
<translate translate-context="Popup/Moderation/List item">
In radio suggestions
</translate>
</li>
</ul>
<p>
<translate translate-context="Popup/Moderation/Paragraph">
You can manage and update your filters any time from your account settings.
</translate>
</p>
</template>
</div>
</div>
<div class="actions">
<button class="ui basic cancel button">
<translate translate-context="*/*/Button.Label/Verb">
Cancel
</translate>
</button>
<button
:class="['ui', 'success', {loading: isLoading}, 'button']"
@click="hide"
>
<translate translate-context="Popup/*/Button.Label">
Hide content
</translate>
</button>
</div>
</semantic-modal>
</template>