MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

NOCHANGELOG Refactor of moderation detail pages

This commit is contained in:
Arne Bollinger 2025-05-07 14:55:15 +00:00 committed by petitminion
parent cd18b88799
commit 36030c68ee
16 changed files with 1238 additions and 1194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/components/common/AjaxButton.vue
View File

@ -5,6 +5,8 @@ import { ref } from 'vue'
import axios from 'axios'
import Button from '~/components/ui/Button.vue'
interface Events {
(e: 'action-done', data: any): void
(e: 'action-error', error: BackendError): void
@ -34,10 +36,13 @@ const ajaxCall = async () => {
</script>
<template>
<button
:class="['ui', {loading: isLoading}, 'button']"
<Button
secondary
low-height
:class="{loading: isLoading}"
icon="bi-arrow-clockwise"
@click="ajaxCall"
>
<slot />
</button>
</Button>
</template>

11
front/src/components/common/CollapseLink.vue
View File

@ -2,6 +2,8 @@
import { useVModel } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import Button from '~/components/ui/Button.vue'
interface Events {
(e: 'update:modelValue', value: boolean): void
}
@ -18,8 +20,11 @@ const value = useVModel(props, 'modelValue', emit)
</script>
<template>
<a
role="button"
<Button
secondary
low-height
tiny
:icon="value ? 'bi-chevron-expand' : 'bi-chevron-contract'"
class="collapse link"
@click.prevent="value = !value"
>
@ -30,5 +35,5 @@ const value = useVModel(props, 'modelValue', emit)
{{ t('components.common.CollapseLink.button.collapse') }}
</span>
<i :class="[{ down: !value, right: value }, 'angle', 'icon']" />
</a>
</Button>
</template>

26
front/src/components/manage/moderation/InstancePolicyCard.vue
View File

@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n'
import useMarkdown from '~/composables/useMarkdown'
import Button from '~/components/ui/Button.vue'
interface Events {
(e: 'update'): void
}
@ -24,21 +26,21 @@ const summary = useMarkdown(() => props.object.summary)
<div>
<slot />
<p>
<i class="clock outline icon" /><human-date :date="object.creation_date" /> &nbsp;
<i class="user icon" />{{ object.actor }} &nbsp;
<i class="bi bi-clock" /><human-date :date="object.creation_date" /> &nbsp;
<i class="bi bi-person" />{{ object.actor }} &nbsp;
<template v-if="object.is_active">
<i class="play icon" />
<i class="bi bi-play" />
{{ t('components.manage.moderation.InstancePolicyCard.status.enabled') }}
</template>
<template v-if="!object.is_active">
<i class="pause icon" />
<i class="bi bi-pause" />
{{ t('components.manage.moderation.InstancePolicyCard.status.paused') }}
</template>
</p>
<div>
<p><strong>{{ t('components.manage.moderation.InstancePolicyCard.header.rule') }}</strong></p>
<p v-if="object.block_all">
<i class="ban icon" />
<i class="bi bi-ban" />
{{ t('components.manage.moderation.InstancePolicyCard.label.blockAll') }}
</p>
<div
@ -49,7 +51,7 @@ const summary = useMarkdown(() => props.object.summary)
v-if="object.silence_activity"
class="ui item"
>
<i class="feed icon" />
<i class="bi bi-rss-fill" />
<div class="content">
{{ t('components.manage.moderation.InstancePolicyCard.label.muteActivity') }}
</div>
@ -58,7 +60,7 @@ const summary = useMarkdown(() => props.object.summary)
v-if="object.silence_notifications"
class="ui item"
>
<i class="bell icon" />
<i class="bi bi-bell-fill" />
<div class="content">
{{ t('components.manage.moderation.InstancePolicyCard.label.muteNotifications') }}
</div>
@ -67,7 +69,7 @@ const summary = useMarkdown(() => props.object.summary)
v-if="object.reject_media"
class="ui item"
>
<i class="file icon" />
<i class="bi bi-file-earmark-fill" />
<div class="content">
{{ t('components.manage.moderation.InstancePolicyCard.label.rejectMedia') }}
</div>
@ -80,12 +82,12 @@ const summary = useMarkdown(() => props.object.summary)
<sanitized-html :html="summary" />
</div>
<div class="ui hidden divider" />
<button
class="ui right floated labeled icon button"
<Button
destructive
icon="bi-pencil"
@click="emit('update')"
>
<i class="edit icon" />
{{ t('components.manage.moderation.InstancePolicyCard.button.edit') }}
</button>
</Button>
</div>
</template>

32
front/src/components/manage/moderation/InstancePolicyForm.vue
View File

@ -9,6 +9,9 @@ import axios from 'axios'
import DangerousButton from '~/components/common/DangerousButton.vue'
import Layout from '~/components/ui/Layout.vue'
import Button from '~/components/ui/Button.vue'
interface Events {
(e: 'save', data: InstancePolicy): void
(e: 'delete'): void
@ -119,8 +122,8 @@ const remove = async () => {
</script>
<template>
<form
class="ui form"
<Layout
form
@submit.prevent="createOrUpdate"
>
<h3 class="ui header">
@ -135,10 +138,9 @@ const remove = async () => {
{{ t('components.manage.moderation.InstancePolicyForm.header.addRule') }}
</span>
</h3>
<div
<Alert
v-if="errors && errors.length > 0"
role="alert"
class="ui negative message"
red
>
<h4 class="header">
{{ t('components.manage.moderation.InstancePolicyForm.header.failure') }}
@ -151,7 +153,7 @@ const remove = async () => {
{{ error }}
</li>
</ul>
</div>
</Alert>
<div
v-if="object"
@ -220,15 +222,16 @@ const remove = async () => {
</label>
</div>
</div>
<div class="ui hidden divider" />
<button
class="ui basic left floated button"
<Layout flex>
<Button
primary
@click.prevent="emit('cancel')"
>
{{ t('components.manage.moderation.InstancePolicyForm.button.cancel') }}
</button>
<button
:class="['ui', 'right', 'floated', 'success', {'disabled loading': isLoading}, 'button']"
</Button>
<Button
primary
:class="{'disabled loading': isLoading}"
:disabled="isLoading"
>
<span v-if="object">
@ -237,7 +240,7 @@ const remove = async () => {
<span v-else>
{{ t('components.manage.moderation.InstancePolicyForm.button.create') }}
</span>
</button>
</Button>
<dangerous-button
v-if="object"
style="float: right;"
@ -252,5 +255,6 @@ const remove = async () => {
{{ t('components.manage.moderation.InstancePolicyForm.button.confirm') }}
</template>
</dangerous-button>
</form>
</Layout>
</Layout>
</template>

9
front/src/components/manage/moderation/NoteForm.vue
View File

@ -5,6 +5,8 @@ import axios from 'axios'
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import Button from '~/components/ui/Button.vue'
interface Events {
(e: 'created', note: Note): void
}
@ -76,12 +78,13 @@ const submit = async () => {
:placeholder="labels.summaryPlaceholder"
/>
</div>
<button
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
<Button
primary
:class="[{'loading': isLoading}, 'right', 'floated']"
type="submit"
:disabled="isLoading"
>
{{ t('components.manage.moderation.NoteForm.button.add') }}
</button>
</Button>
</form>
</template>

31
front/src/components/manage/moderation/NotesThread.vue
View File

@ -11,6 +11,10 @@ import useErrorHandler from '~/composables/useErrorHandler'
import DangerousButton from '~/components/common/DangerousButton.vue'
import Alert from '~/components/ui/Alert.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/Spacer.vue'
interface Events {
(e: 'deleted', uuid: string): void
}
@ -40,16 +44,24 @@ const remove = async (note: Note) => {
<template>
<div class="ui feed">
<div
<Alert
v-for="note in notes"
:key="note.uuid"
blue
class="event"
>
<div class="label">
<i class="comment outline icon" />
<i
class="bi bi-chat-dots-fill"
style="font-size: 22px;"
/>
</div>
<div class="content">
<div class="summary">
<Spacer :size="16" />
<Layout
flex
gap-16
class="summary"
>
<actor-link
:admin="true"
:actor="note.author"
@ -57,13 +69,11 @@ const remove = async (note: Note) => {
<div class="date">
<human-date :date="note.creation_date" />
</div>
</div>
<div class="extra text">
</Layout>
<expandable-div :content="note.summary">
<sanitized-html :html="useMarkdownRaw(note.summary ?? '')" />
</expandable-div>
</div>
<div class="meta">
<template #actions>
<dangerous-button
:is-loading="isLoading"
low-height
@ -80,8 +90,7 @@ const remove = async (note: Note) => {
{{ t('components.manage.moderation.NotesThread.button.delete') }}
</template>
</dangerous-button>
</div>
</div>
</div>
</template>
</Alert>
</div>
</template>

110
front/src/components/manage/moderation/ReportCard.vue
View File

@ -18,6 +18,11 @@ import useErrorHandler from '~/composables/useErrorHandler'
import useMarkdown from '~/composables/useMarkdown'
import useLogger from '~/composables/useLogger'
import Card from '~/components/ui/Card.vue'
import Layout from '~/components/ui/Layout.vue'
import Button from '~/components/ui/Button.vue'
import Link from '~/components/ui/Link.vue'
interface Events {
(e: 'updated', updating: { type: string }): void
(e: 'handled', isHandled: boolean): void
@ -110,7 +115,7 @@ const update = async (type: string) => {
}
const store = useStore()
const isCollapsed = ref(false)
const isCollapsed = ref(true)
const resolveReport = async (isHandled: boolean) => {
isLoading.value = true
@ -140,21 +145,20 @@ const handleRemovedNote = (uuid: string) => {
</script>
<template>
<div class="ui fluid report card">
<div class="content">
<h4 class="header">
<router-link :to="{name: 'manage.moderation.reports.detail', params: {id: obj.uuid}}">
{{ t('components.manage.moderation.ReportCard.link.report', {id: obj.uuid.substring(0, 8)}) }}
</router-link>
<Card
:title="t('components.manage.moderation.ReportCard.link.report', {id: obj.uuid.substring(0, 8)})"
:width="isCollapsed ? '350px' : ''"
:full="!isCollapsed"
solid
:red="!obj.is_handled && isCollapsed"
:green="obj.is_handled && isCollapsed"
>
<template #topright>
<collapse-link
v-model="isCollapsed"
class="right floated"
/>
</h4>
<div class="content">
<div class="ui hidden divider" />
<div class="ui stackable two column grid">
<div class="column">
</template>
<table class="ui very basic unstackable table">
<tbody>
<tr>
@ -198,12 +202,6 @@ const handleRemovedNote = (uuid: string) => {
/>
</td>
</tr>
</tbody>
</table>
</div>
<div class="column">
<table class="ui very basic unstackable table">
<tbody>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.status.status') }}
@ -261,15 +259,10 @@ const handleRemovedNote = (uuid: string) => {
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div
<template
v-if="!isCollapsed"
class="main content"
>
<div class="ui stackable two column grid">
<Layout flex>
<div class="column">
<h3>
{{ t('components.manage.moderation.ReportCard.header.message') }}
@ -286,29 +279,34 @@ const handleRemovedNote = (uuid: string) => {
<h3>
{{ t('components.manage.moderation.ReportCard.header.reportedObject') }}
</h3>
<div
<Alert
v-if="!obj.target"
role="alert"
class="ui warning message"
red
>
{{ t('components.manage.moderation.ReportCard.warning.objectDeleted') }}
</div>
<router-link
</Alert>
<Layout flex>
<Link
v-if="target && configs[target.type].urls.getDetail"
class="ui basic button"
solid
secondary
icon="bi-eye"
low-height
:to="configs[target.type].urls.getDetail?.(obj.target_state) ?? '/'"
>
<i class="eye icon" />
{{ t('components.manage.moderation.ReportCard.link.publicPage') }}
</router-link>
<router-link
</Link>
<Link
v-if="target && configs[target.type].urls.getAdminDetail"
class="ui basic button"
solid
secondary
icon="bi-wrench"
low-height
:to="configs[target.type].urls.getAdminDetail?.(obj.target_state) ?? '/'"
>
<i class="wrench icon" />
{{ t('components.manage.moderation.ReportCard.link.moderation') }}
</router-link>
</Link>
</Layout>
<table class="ui very basic unstackable table">
<tbody>
<tr v-if="target">
@ -369,9 +367,9 @@ const handleRemovedNote = (uuid: string) => {
</tr>
<tr v-else-if="obj.target_state.domain">
<td>
<router-link :to="{name: 'manage.moderation.domains.detail', params: { id: obj.target_state.domain }}">
<Link :to="{name: 'manage.moderation.domains.detail', params: { id: obj.target_state.domain }}">
{{ t('components.manage.moderation.ReportCard.table.object.domain') }}
</router-link>
</Link>
</td>
<td>
{{ obj.target_state.domain }}
@ -405,9 +403,7 @@ const handleRemovedNote = (uuid: string) => {
</tbody>
</table>
</aside>
</div>
<div class="ui stackable two column grid">
<div class="column">
</Layout>
<h3>
{{ t('components.manage.moderation.ReportCard.header.notes') }}
</h3>
@ -419,28 +415,28 @@ const handleRemovedNote = (uuid: string) => {
:target="{type: 'report', uuid: obj.uuid}"
@created="obj.notes.push($event)"
/>
</div>
<div class="column">
<h3>
{{ t('components.manage.moderation.ReportCard.header.actions') }}
</h3>
<div class="ui labelled icon basic buttons">
<button
<Layout flex>
<Button
v-if="obj.is_handled === false"
:class="['ui', {loading: isLoading}, 'button']"
:class="{loading: isLoading}"
primary
icon="bi-check"
@click="resolveReport(true)"
>
<i class="success check icon" />&nbsp;
{{ t('components.manage.moderation.ReportCard.button.resolve') }}
</button>
<button
</Button>
<Button
v-if="obj.is_handled === true"
:class="['ui', {loading: isLoading}, 'button']"
:class="{loading: isLoading}"
secondary
icon="bi-arrow-counterclockwise"
@click="resolveReport(false)"
>
<i class="warning redo icon" />&nbsp;
{{ t('components.manage.moderation.ReportCard.button.unresolve') }}
</button>
</Button>
<template
v-for="action in actions"
:key="action.label"
@ -461,9 +457,7 @@ const handleRemovedNote = (uuid: string) => {
</template>
</dangerous-button>
</template>
</div>
</div>
</div>
</div>
</div>
</Layout>
</template>
</Card>
</template>

13
front/src/components/moderation/FilterModal.vue
View File

@ -11,6 +11,7 @@ import useLogger from '~/composables/useLogger'
import Modal from '~/components/ui/Modal.vue'
import Alert from '~/components/ui/Alert.vue'
import Button from '~/components/ui/Button.vue'
const logger = useLogger()
const { t } = useI18n()
@ -62,6 +63,7 @@ const hide = async () => {
<template>
<Modal
v-model="show"
destructive
:title="type==='artist' ? t('components.moderation.FilterModal.header.modal', {name: target?.name}) : errors.length > 0 ? t('components.moderation.FilterModal.header.failure') : ''"
:cancel="t('components.moderation.FilterModal.button.cancel')"
>
@ -104,13 +106,14 @@ const hide = async () => {
</template>
</div>
</div>
<div class="actions">
<button
:class="['ui', 'success', {loading: isLoading}, 'button']"
<template #actions>
<Button
destructive
:class="[{loading: isLoading}]"
@click="hide"
>
{{ t('components.moderation.FilterModal.button.hide') }}
</button>
</div>
</Button>
</template>
</Modal>
</template>

4
front/src/components/moderation/ReportCategoryDropdown.vue
View File

@ -58,11 +58,11 @@ const allCategories = computed(() => {
</script>
<template>
<div>
<div class="ui form">
<label v-if="label">{{ t('components.moderation.ReportCategoryDropdown.label.category') }}</label>
<select
v-model="value"
class="ui dropdown"
class="dropdown"
:required="required || undefined"
>
<option

9
front/src/ui/components/Sidebar.vue
View File

@ -133,10 +133,17 @@ const moderationNotifications = computed(() =>
icon="bi-megaphone-fill"
>
{{ t('components.Sidebar.link.moderation') }}
<Spacer grow />
<div
v-if="store.state.ui.notifications.pendingReviewReports + store.state.ui.notifications.pendingReviewRequests > 0"
:title="t('components.Sidebar.label.reports')"
:class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
style="
background: var(--fw-gray-400);
color: var(--fw-gray-800);
padding: 2px 7px;
border-radius: 10px;
font-size: 12px;
"
>
{{ store.state.ui.notifications.pendingReviewReports + store.state.ui.notifications.pendingReviewRequests }}
</div>

1
front/src/ui/components/UserMenu.vue
View File

@ -97,6 +97,7 @@ const labels = computed(() => ({
color: var(--fw-gray-800);
padding: 2px 7px;
border-radius: 10px;
font-size: 12px;
"
>
{{ store.state.ui.notifications.inbox }}

9
front/src/views/admin/library/LibraryDetail.vue
View File

@ -36,31 +36,29 @@ const labels = computed(() => ({
const isLoading = ref(false)
const object = ref()
const fetchData = async () => {
isLoading.value = true
try {
const response = await axios.get(`manage/library/libraries/${props.id}/`)
object.value = response.data
} catch (error) {
useErrorHandler(error as Error)
}
isLoading.value = false
}
const isLoadingStats = ref(false)
const stats = ref()
const fetchStats = async () => {
isLoadingStats.value = true
try {
const response = await axios.get(`manage/library/libraries/${props.id}/stats/`)
stats.value = response.data
} catch (error) {
useErrorHandler(error as Error)
}
isLoadingStats.value = false
}
@ -69,14 +67,12 @@ fetchData()
const remove = async () => {
isLoading.value = true
try {
await axios.delete(`manage/library/libraries/${props.id}/`)
router.push({ name: 'manage.library.libraries' })
} catch (error) {
useErrorHandler(error as Error)
}
isLoading.value = false
}
@ -86,7 +82,6 @@ const updateObj = async (attr: string) => {
const params = {
[attr]: object.value[attr]
}
try {
await axios.patch(`manage/library/libraries/${props.id}/`, params)
logger.info(`${attr} was updated successfully to ${params[attr]}`)

23
front/src/views/admin/library/TrackDetail.vue
View File

@ -337,7 +337,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
</router-link>
</Layout>
<Layout
v-if="!track.is_local"
v-if="!track?.is_local"
flex
class="details"
>
@ -345,7 +345,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
class="label"
:to="{
name: 'manage.moderation.domains.detail',
params: { id: track.domain }
params: { id: track?.domain }
}"
>
{{ t('views.admin.library.TrackDetail.link.domain') }}
@ -354,7 +354,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
h
grow
/>
<span class="value">{{ track.domain }}</span>
<span class="value">{{ track?.domain }}</span>
</Layout>
<Layout
v-if="track?.description"
@ -428,7 +428,10 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
<span class="value">{{ stats?.track_favorites }}</span>
</Layout>
</Layout>
<Layout stack>
<Layout
stack
style="flex: 1; gap: 0;"
>
<Heading
:h3="t('views.admin.library.TrackDetail.header.trackData')"
class="category"
@ -444,7 +447,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
h
grow
/>
<span class="value">{{ humanSize(stats.media_downloaded_size) }}</span>
<span class="value">{{ humanSize(stats?.media_downloaded_size) }}</span>
</Layout>
<Layout
flex
@ -457,7 +460,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
h
grow
/>
<span class="value">{{ humanSize(stats.media_total_size) }}</span>
<span class="value">{{ humanSize(stats?.media_total_size) }}</span>
</Layout>
<Layout
flex
@ -465,7 +468,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
>
<Link
class="label"
:to="{ name: 'manage.library.libraries', query: { q: getQuery('track_id', track.id) } }"
:to="{ name: 'manage.library.libraries', query: { q: getQuery('track_id', track?.id) } }"
>
{{ t('views.admin.library.TrackDetail.link.libraries') }}
</Link>
@ -473,7 +476,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
h
grow
/>
<span class="value">{{ stats.libraries }}</span>
<span class="value">{{ stats?.libraries }}</span>
</Layout>
<Layout
flex
@ -481,7 +484,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
>
<Link
class="label"
:to="{ name: 'manage.library.uploads', query: { q: getQuery('track_id', track.id) } }"
:to="{ name: 'manage.library.uploads', query: { q: getQuery('track_id', track?.id) } }"
>
{{ t('views.admin.library.TrackDetail.link.uploads') }}
</Link>
@ -489,7 +492,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
h
grow
/>
<span class="value">{{ stats.uploads }}</span>
<span class="value">{{ stats?.uploads }}</span>
</Layout>
</Layout>
</Layout>

728
front/src/views/admin/moderation/AccountsDetail.vue
View File

@ -2,17 +2,21 @@
import type { InstancePolicy } from '~/types'
import { computed, ref, reactive } from 'vue'
// import { useCurrentElement } from '@vueuse/core'
import { humanSize } from '~/utils/filters'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
import axios from 'axios'
import Header from '~/components/ui/Header.vue'
import Layout from '~/components/ui/Layout.vue'
import Loader from '~/components/ui/Loader.vue'
import Button from '~/components/ui/Button.vue'
import Spacer from '~/components/ui/Spacer.vue'
import HumanDate from '~/components/common/HumanDate.vue'
import Link from '~/components/ui/Link.vue'
import Button from '~/components/ui/Button.vue'
import Heading from '~/components/ui/Heading.vue'
import Loader from '~/components/ui/Loader.vue'
import Alert from '~/components/ui/Alert.vue'
import Input from '~/components/ui/Input.vue'
import InstancePolicyForm from '~/components/manage/moderation/InstancePolicyForm.vue'
@ -104,13 +108,6 @@ const fetchStats = async () => {
fetchStats()
fetchData()
// TODO: Find out if the following removal causes any regression #2440
// const el = useCurrentElement()
// watch(object, async () => {
// await nextTick()
// $(el.value).find('select.dropdown').dropdown()
// })
const getQuery = (field: string, value: string) => `${field}:"${value}"`
const updating = reactive(new Set<string>())
@ -152,74 +149,60 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
</script>
<template>
<Layout
main
stack
class="page-admin-account-detail"
<Loader v-if="isLoading" />
<Header
v-if="object"
v-title="object?.full_username"
:h1="object?.full_username"
page-heading
>
<Loader
v-if="isLoading"
/>
<template v-if="object">
<section
v-title="object.full_username"
>
<Layout flex>
<h2 class="ui header">
<i class="bi-person-circle" />
{{ object.full_username }}
<div class="sub header">
<template v-if="object.user">
<span class="ui tiny accent label">
<i class="bi-house-fill" />
{{ t('views.admin.moderation.AccountsDetail.header.localAccount') }}
</span>
&nbsp;
<template #image>
<i class="channel-image bi-person-circle" />
</template>
<a
:href="object.url || object.fid"
target="_blank"
rel="noopener noreferrer"
<Spacer />
<Layout
flex
class="header-buttons"
>
{{ t('views.admin.moderation.AccountsDetail.link.openProfile') }}&nbsp;
<i class="bi bi-box-arrow-up-right" />
</a>
</div>
</h2>
<Spacer grow />
<Layout stack>
<a
v-if="object.user && store.state.auth.profile && store.state.auth.profile.is_superuser"
class="ui labeled icon button"
:href="store.getters['instance/absoluteUrl'](`/api/admin/users/user/${object.user.id}`)"
<Link
solid
primary
low-height
icon="bi-box-arrow-up-right"
:to="object?.url || object?.fid"
target="_blank"
rel="noopener noreferrer"
>
<i class="bi bi-wrench" />
{{ t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
</a>
<a
v-else-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
:href="store.getters['instance/absoluteUrl'](`/api/admin/federation/actor/${object.id}`)"
{{ t('views.admin.moderation.AccountsDetail.link.openProfile') }}
</Link>
<Link
v-if="object?.user && store.state.auth.profile?.is_superuser"
solid
primary
low-height
icon="bi-wrench"
:to="store.getters['instance/absoluteUrl'](`/api/admin/users/user/${object?.user?.id}`)"
target="_blank"
rel="noopener noreferrer"
>
<i class="bi bi-wrench" />
{{ t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
</a>
<a
:href="object.url || object.fid"
{{ t('views.admin.moderation.AccountsDetail.link.django') }}
</Link>
<Link
v-if="!object?.user"
solid
primary
low-height
:to="store.getters['instance/absoluteUrl'](`/api/admin/federation/actor/${object?.id}`)"
icon="bi-wrench"
target="_blank"
rel="noopener noreferrer"
>
<i class="bi bi-box-arrow-up-right" />
{{ t('views.admin.moderation.AccountsDetail.link.remoteProfile') }}&nbsp;
</a>
{{ t('views.admin.moderation.AccountsDetail.link.django') }}
</Link>
</Layout>
<div class="ui column">
<div
v-if="!object.user"
class="ui compact clearing placeholder segment component-placeholder"
</Header>
<Alert
v-if="!object?.user"
:blue="!policy"
red="policy"
>
<template v-if="isLoadingPolicy">
<div class="paragraph">
@ -231,12 +214,10 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
</div>
</template>
<template v-else-if="!policy && !showPolicyForm">
<header class="ui header">
<h3>
<i class="bi bi-shield-fill" />
{{ t('views.admin.moderation.AccountsDetail.header.noPolicy') }}
</h3>
</header>
<Heading
:h3="t('views.admin.moderation.AccountsDetail.header.noPolicy')"
icon="bi-shield-fill"
/>
<p>
{{ t('views.admin.moderation.AccountsDetail.description.policy') }}
</p>
@ -262,356 +243,333 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
v-else-if="showPolicyForm"
:object="policy"
type="actor"
:target="object.full_username"
:target="object?.full_username"
@cancel="showPolicyForm = false"
@save="updatePolicy"
@delete="policy = null; showPolicyForm = false"
/>
</div>
</div>
</Layout>
</section>
<Layout flex>
<div class="column">
<section>
<h3 class="ui header">
<i class="bi bi-info-circle-fill" />
{{ t('views.admin.moderation.AccountsDetail.header.accountData') }}
</h3>
<table class="ui very basic table">
<tbody>
<tr>
<td>
</Alert>
<Spacer />
<Layout
flex
gap-64
>
<Layout
stack
style="flex: 1; gap: 0;"
>
<Heading
:h3="t('views.admin.moderation.AccountsDetail.header.accountData')"
class="category"
/>
<Layout
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.AccountsDetail.table.accountData.username') }}
</td>
<td>
{{ object.preferred_username }}
</td>
</tr>
<tr v-if="!object.user">
<td>
<router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.domain }}">
</span>
<Spacer
h
grow
/>
<span class="value">{{ object?.preferred_username }}</span>
</Layout>
<Layout
v-if="!object?.user"
flex
class="details"
>
<router-link
class="label"
:to="{ name: 'manage.moderation.domains.detail', params: { id: object?.domain } }"
>
{{ t('views.admin.moderation.AccountsDetail.link.domain') }}
</router-link>
</td>
<td>
{{ object.domain }}
</td>
</tr>
<tr>
<td>
<Spacer
h
grow
/>
<span class="value">{{ object?.domain }}</span>
</Layout>
<Layout
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.AccountsDetail.table.accountData.displayName') }}
</td>
<td>
{{ object.name }}
</td>
</tr>
<tr v-if="object.user">
<td>
</span>
<Spacer
h
grow
/>
<span class="value">{{ object?.name }}</span>
</Layout>
<Layout
v-if="object?.user"
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.AccountsDetail.table.accountData.email') }}
</td>
<td>
{{ object.user.email }}
</td>
</tr>
<tr v-if="object.user">
<td>
{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.label') }}
</td>
<td>
<div
v-if="object.user.username != store.state.auth.profile?.username"
class="ui toggle checkbox"
>
<Input
id="is-active"
v-model="object.user.is_active"
type="checkbox"
@change="updateUser('is_active')"
</span>
<Spacer
h
grow
/>
<label for="is-active">
<span
v-if="object.user.is_active"
>{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.enabled') }}</span>
<span
v-else
>{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.disabled') }}</span>
</label>
</div>
<span
v-else-if="object.user.is_active"
<span class="value">{{ object?.user?.email }}</span>
</Layout>
<Layout
v-if="object?.user"
flex
class="details"
>
{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.enabled') }}
</span>
<span
v-else
>
{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.disabled') }}
</span>
</td>
</tr>
<tr v-if="object.user">
<td>
{{ t('views.admin.moderation.AccountsDetail.table.accountData.permissions') }}
</td>
<td>
<select
v-model="permissions"
multiple
class="ui search selection dropdown"
@change="updateUser('permissions')"
>
<option
v-for="(p, key) in allPermissions"
:key="key"
:value="p.code"
>
{{ p.label }}
</option>
</select>
<action-feedback :is-loading="updating.has('permissions')" />
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.AccountsDetail.table.accountData.userType') }}
</td>
<td>
{{ object.type }}
</td>
</tr>
<tr v-if="!object.user">
<td>
{{ t('views.admin.moderation.AccountsDetail.table.accountData.lastChecked') }}
</td>
<td>
<human-date
v-if="object.last_fetch_date"
:date="object.last_fetch_date"
/>
<span
v-else
>
{{ t('views.admin.moderation.AccountsDetail.notApplicable') }}
</span>
</td>
</tr>
<tr v-if="object.user">
<td>
<span class="label">
{{ t('views.admin.moderation.AccountsDetail.table.accountData.signupDate') }}
</td>
<td>
<human-date :date="object.user.date_joined" />
</td>
</tr>
<tr v-if="object.user">
<td>
{{ t('views.admin.moderation.AccountsDetail.table.accountData.lastActivity') }}
</td>
<td>
<human-date :date="object.user.last_activity" />
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="column">
<section>
<h3 class="ui header">
<i class="bi bi-rss-fill" />
{{ t('views.admin.moderation.AccountsDetail.header.activity') }}&nbsp;
<span :data-tooltip="labels.statsWarning"><i class=" bi bi-question-circle-fill" /></span>
</h3>
<div
v-if="isLoadingStats"
class="ui placeholder"
</span>
<Spacer
h
grow
/>
<HumanDate :date="object?.user?.date_joined" />
</Layout>
</Layout>
<Layout
stack
style="flex: 1; gap: 0;"
>
<div class="full line" />
<div class="short line" />
<div class="medium line" />
<div class="long line" />
</div>
<table
v-else
class="ui very basic table"
<Heading
:h3="t('views.admin.moderation.AccountsDetail.header.activity')"
class="category"
>
<tbody>
<tr v-if="!object.user">
<td>
<span
:data-tooltip="labels.statsWarning"
style="margin-left: 8px"
>
<i class=" bi bi-question-circle-fill" /></span>
</Heading>
<Layout
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.AccountsDetail.table.activity.firstSeen') }}
</td>
<td>
<human-date :date="object.creation_date" />
</td>
</tr>
<tr>
<td>
</span>
<Spacer
h
grow
/>
<HumanDate :date="object?.creation_date" />
</Layout>
<Layout
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.AccountsDetail.table.activity.emittedMessages') }}
</td>
<td>
{{ stats.outbox_activities }}
</td>
</tr>
<tr>
<td>
</span>
<Spacer
h
grow
/>
<span class="value">{{ stats?.outbox_activities }}</span>
</Layout>
<Layout
v-if="object?.user"
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.AccountsDetail.table.activity.receivedFollows') }}
</td>
<td>
{{ stats.received_library_follows }}
</td>
</tr>
<tr>
<td>
</span>
<Spacer
h
grow
/>
<span class="value">{{ stats?.received_library_follows }}</span>
</Layout>
<Layout
v-if="object?.user"
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.AccountsDetail.table.activity.emittedFollows') }}
</td>
<td>
{{ stats.emitted_library_follows }}
</td>
</tr>
<tr>
<td>
<router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `account:${object.full_username}`) }}">
</span>
<Spacer
h
grow
/>
<span class="value">{{ stats?.emitted_library_follows }}</span>
</Layout>
<Layout
v-if="object?.user"
flex
class="details"
>
<router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `account:${object?.full_username}`) }}">
{{ t('views.admin.moderation.AccountsDetail.link.linkedReports') }}
</router-link>
</td>
<td>
{{ stats.reports }}
</td>
</tr>
<tr>
<td>
<router-link :to="{name: 'manage.moderation.requests.list', query: {q: getQuery('submitter', `${object.full_username}`) }}">
<Spacer
h
grow
/>
<span class="value">{{ stats?.reports }}</span>
</Layout>
<Layout
v-if="object?.user"
flex
class="details"
>
<router-link :to="{name: 'manage.moderation.requests.list', query: {q: getQuery('submitter', `${object?.full_username}`) }}">
{{ t('views.admin.moderation.AccountsDetail.link.requests') }}
</router-link>
</td>
<td>
{{ stats.requests }}
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="column">
<section>
<h3 class="ui header">
<i class="bi bi-music-note-beamed" />
{{ t('views.admin.moderation.AccountsDetail.header.audioContent') }}&nbsp;
<span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
</h3>
<div
v-if="isLoadingStats"
class="ui placeholder"
<Spacer
h
grow
/>
<span class="value">{{ stats?.requests }}</span>
</Layout>
</Layout>
<Layout
stack
style="flex: 1; gap: 0;"
>
<div class="full line" />
<div class="short line" />
<div class="medium line" />
<div class="long line" />
</div>
<table
v-else
class="ui very basic table"
<Heading
:h3="t('views.admin.moderation.AccountsDetail.header.audioContent')"
class="category"
>
<tbody>
<tr v-if="!object.user">
<td>
<span
:data-tooltip="labels.statsWarning"
style="margin-left: 8px"
>
<i class=" bi bi-question-circle-fill" /></span>
</Heading>
<Layout
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.AccountsDetail.table.audioContent.cachedSize') }}
</td>
<td>
{{ humanSize(stats.media_downloaded_size) }}
</td>
</tr>
<tr v-if="object.user">
<td>
</span>
<Spacer
h
grow
/>
<span class="value">{{ humanSize(stats?.media_downloaded_size) }}</span>
</Layout>
<Layout
v-if="object?.user"
flex
no-gap
class="details"
>
<span class="label">
{{ t('views.admin.moderation.AccountsDetail.table.audioContent.uploadQuota') }}
<span :data-tooltip="labels.uploadQuota"><i class="question circle icon" /></span>
</td>
<td>
</span>
<span
:data-tooltip="labels.uploadQuota"
style="margin-left: 8px"
>
<i class="bi bi-question-circle" />
</span>
<Spacer
h
grow
/>
<Input
v-model.number="object.user.upload_quota"
step="100"
name="quota"
type="number"
style="width: 100px"
@change="updateUser('upload_quota', true)"
/>
<div class="ui basic label">
<span class="ui basic label">
{{ t('views.admin.moderation.AccountsDetail.table.audioContent.megabyte') }}
</div>
</span>
<action-feedback
class="ui basic label"
size="tiny"
:is-loading="updating.has('upload_quota')"
/>
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.AccountsDetail.table.audioContent.totalSize') }}
</td>
<td>
{{ humanSize(stats.media_total_size) }}
</td>
</tr>
<tr>
<td>
<router-link :to="{name: 'manage.channels', query: {q: getQuery('account', object.full_username) }}">
{{ t('views.admin.moderation.AccountsDetail.link.channels') }}
</router-link>
</td>
<td>
{{ stats.channels }}
</td>
</tr>
<tr>
<td>
<router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('account', object.full_username) }}">
{{ t('views.admin.moderation.AccountsDetail.link.libraries') }}
</router-link>
</td>
<td>
{{ stats.libraries }}
</td>
</tr>
<tr>
<td>
<router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('account', object.full_username) }}">
{{ t('views.admin.moderation.AccountsDetail.link.uploads') }}
</router-link>
</td>
<td>
{{ stats.uploads }}
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.AccountsDetail.link.artists') }}
</td>
<td>
{{ stats.artists }}
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.AccountsDetail.link.albums') }}
</td>
<td>
{{ stats.albums }}
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.AccountsDetail.link.tracks') }}
</td>
<td>
{{ stats.tracks }}
</td>
</tr>
</tbody>
</table>
</section>
</div>
</Layout>
</template>
<Layout
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.AccountsDetail.table.audioContent.totalSize') }}
</span>
<Spacer
h
grow
/>
<span class="value">{{ humanSize(stats?.media_total_size) }}</span>
</Layout>
</Layout>
</Layout>
</template>
<style scoped lang="scss">
.channel-image {
width: 200px;
height: 200px;
font-size: 160px;
border: none;
display: block;
text-align: center;
align-content: center;
border-radius: 50%;
@include light-theme {
background-color: var(--fw-gray-200);
}
@include dark-theme {
background-color: var(--fw-gray-800);
}
}
h3.category {
margin-bottom: 16px;
}
.details {
padding: 0 16px;
height: 72px;
align-items: center;
border-top: 1px solid;
min-width: 280px;
@include light-theme {
border-color: var(--fw-gray-300);
}
@include dark-theme {
border-color: var(--fw-gray-800);
}
.label {
font-weight: 800;
@include light-theme {
color: var(--fw-gray-600);
}
@include dark-theme {
color: var(--fw-gray-500);
}
}
a.label,
a.value {
text-decoration: underline;
}
&:last-child {
border-bottom: 1px solid;
}
}
</style>

663
front/src/views/admin/moderation/DomainsDetail.vue
View File

@ -14,6 +14,19 @@ import InstancePolicyCard from '~/components/manage/moderation/InstancePolicyCar
import useErrorHandler from '~/composables/useErrorHandler'
import Header from '~/components/ui/Header.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/Spacer.vue'
import HumanDate from '~/components/common/HumanDate.vue'
import Link from '~/components/ui/Link.vue'
import Button from '~/components/ui/Button.vue'
import Heading from '~/components/ui/Heading.vue'
import Loader from '~/components/ui/Loader.vue'
import Alert from '~/components/ui/Alert.vue'
import OptionsButton from '~/components/ui/button/Options.vue'
import Popover from '~/components/ui/Popover.vue'
import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
interface Props {
id: number
allowListEnabled: boolean
@ -109,77 +122,70 @@ const setAllowList = async (value: boolean) => {
</script>
<template>
<main class="page-admin-domain-detail">
<div
v-if="isLoading"
class="ui vertical segment"
<Loader v-if="isLoading" />
<Header
v-if="object"
v-title="object?.name"
:h1="object?.name"
page-heading
>
<div :class="['ui', 'centered', 'active', 'inline', 'loader']" />
</div>
<template v-if="object">
<section
v-title="object.name"
:class="['ui', 'head', 'vertical', 'stripe', 'segment']"
<template #image>
<i class="channel-image bi bi-cloud-fill" />
</template>
<Spacer />
<Layout
flex
class="header-buttons"
>
<div class="ui stackable two column grid">
<div class="ui column">
<div class="segment-content">
<h2 class="ui header">
<i class="circular inverted cloud icon" />
<div class="content">
{{ object.name }}
<div class="sub header">
<a
:href="externalUrl"
<Link
solid
primary
low-height
icon="bi-box-arrow-up-right"
:to="externalUrl"
target="_blank"
rel="noopener noreferrer"
class="logo-wrapper"
>
{{ t('views.admin.moderation.DomainsDetail.link.website') }}&nbsp;
<i class="external icon" />
</a>
</div>
</div>
</h2>
<div class="header-buttons">
<div class="ui icon buttons">
<a
{{ t('views.admin.moderation.DomainsDetail.link.website') }}
</Link>
<Link
v-if="store.state.auth.profile?.is_superuser"
class="ui labeled icon button"
:href="store.getters['instance/absoluteUrl'](`/api/admin/federation/domain/${object.name}`)"
solid
primary
low-height
icon="bi-wrench"
:to="store.getters['instance/absoluteUrl'](`/api/admin/federation/domain/${object.name}`)"
target="_blank"
rel="noopener noreferrer"
>
<i class="wrench icon" />
{{ t('views.admin.moderation.DomainsDetail.link.django') }}&nbsp;
</a>
</div>
<div
v-if="allowListEnabled"
class="ui icon buttons"
{{ t('views.admin.moderation.DomainsDetail.link.django') }}
</Link>
<Spacer grow />
<Popover v-if="allowListEnabled">
<template #default="{ toggleOpen }">
<OptionsButton
is-square-small
@click="toggleOpen()"
/>
</template>
<template #items>
<PopoverItem
icon="bi-list-check"
@click="setAllowList(!object.allowed)"
>
<button
v-if="object.allowed"
:class="['ui', 'labeled', {loading: isLoadingAllowList}, 'icon', 'button']"
@click.prevent="setAllowList(false)"
>
<i class="x icon" />
<span v-if="object.allowed">
{{ t('views.admin.moderation.DomainsDetail.button.removeFromAllowList') }}
</button>
<button
v-else
:class="['ui', 'labeled', {loading: isLoadingAllowList}, 'icon', 'button']"
@click.prevent="setAllowList(true)"
>
<i class="check icon" />
</span>
<span v-else>
{{ t('views.admin.moderation.DomainsDetail.button.addToAllowList') }}
</button>
</div>
</div>
</div>
</div>
<div class="ui column">
<div class="ui compact clearing placeholder segment component-placeholder">
</span>
</PopoverItem>
</template>
</Popover>
</Layout>
</Header>
<Alert
blue
>
<template v-if="isLoadingPolicy">
<div class="paragraph">
<div class="line" />
@ -190,21 +196,19 @@ const setAllowList = async (value: boolean) => {
</div>
</template>
<template v-else-if="!policy && !showPolicyForm">
<header class="ui header">
<h3>
<i class="shield icon" />
{{ t('views.admin.moderation.DomainsDetail.header.noPolicy') }}
</h3>
</header>
<Heading
:h3="t('views.admin.moderation.DomainsDetail.header.noPolicy')"
icon="bi-shield-lock"
/>
<p>
{{ t('views.admin.moderation.DomainsDetail.description.policy') }}
</p>
<button
class="ui primary button"
<Button
primary
@click="showPolicyForm = true"
>
{{ t('views.admin.moderation.DomainsDetail.button.addPolicy') }}
</button>
</Button>
</template>
<instance-policy-card
v-else-if="policy && !showPolicyForm"
@ -226,281 +230,334 @@ const setAllowList = async (value: boolean) => {
@save="updatePolicy"
@delete="policy = null; showPolicyForm = false"
/>
</div>
</div>
</div>
</section>
<div class="ui vertical stripe segment">
<div class="ui stackable three column grid">
<div class="column">
<section>
<h3 class="ui header">
<i class="info icon" />
<div class="content">
{{ t('views.admin.moderation.DomainsDetail.header.instanceData') }}
</div>
</h3>
<table class="ui very basic table">
<tbody>
<tr v-if="allowListEnabled">
<td>
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.label') }}
</td>
<td>
<span
v-if="object.allowed"
</Alert>
<Spacer />
<Layout
flex
gap-64
>
<Layout
stack
style="flex: 1; gap: 0;"
>
<Heading
:h3="t('views.admin.moderation.DomainsDetail.header.instanceData')"
class="category"
/>
<Layout
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.label') }}
</span>
<Spacer
h
grow
/>
<span class="value">
<span v-if="object?.allowed">
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.true') }}
</span>
<span
v-else
>
<span v-else>
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.false') }}
</span>
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.lastChecked') }}
</td>
<td>
<human-date
v-if="object.nodeinfo_fetch_date"
:date="object.nodeinfo_fetch_date"
/>
<span
v-else
</span>
</Layout>
<Layout
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.lastChecked') }}
</span>
<Spacer
h
grow
/>
<HumanDate
v-if="object?.nodeinfo_fetch_date"
:date="object?.nodeinfo_fetch_date"
/>
<span v-else>
{{ t('views.admin.moderation.DomainsDetail.notApplicable') }}
</span>
</td>
</tr>
<template v-if="object.nodeinfo && object.nodeinfo.status === 'ok'">
<tr>
<td>
</Layout>
<Layout
v-if="object?.nodeinfo && object?.nodeinfo.status === 'ok'"
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.software.label') }}
</td>
<td>
</span>
<Spacer
h
grow
/>
<span class="value">
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.software.value', {name: get(object, 'nodeinfo.payload.software.name', t('views.admin.moderation.DomainsDetail.notApplicable')), version: get(object, 'nodeinfo.payload.software.version', t('views.admin.moderation.DomainsDetail.notApplicable'))}) }}
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.domainName') }}
</td>
<td>
{{ get(object, 'nodeinfo.payload.metadata.nodeName', t('views.admin.moderation.DomainsDetail.notApplicable')) }}
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.totalUsers') }}
</td>
<td>
{{ get(object, 'nodeinfo.payload.usage.users.total', t('views.admin.moderation.DomainsDetail.notApplicable')) }}
</td>
</tr>
</template>
<template v-if="object.nodeinfo && object.nodeinfo.status === 'error'">
<tr>
<td>
</span>
</Layout>
<Layout
v-if="object?.nodeinfo && object?.nodeinfo.status === 'error'"
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.nodeInfoStatus.label') }}
</td>
<td>
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.nodeInfoStatus.value') }}&nbsp;
<span :data-tooltip="object.nodeinfo.error"><i class="question circle icon" /></span>
</td>
</tr>
</template>
</tbody>
</table>
</span>
<Spacer
h
grow
/>
<span class="value">
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.nodeInfoStatus.value', {name: get(object, 'nodeinfo.payload.software.name', t('views.admin.moderation.DomainsDetail.notApplicable')), version: get(object, 'nodeinfo.payload.software.version', t('views.admin.moderation.DomainsDetail.notApplicable'))}) }}
</span>
<span :data-tooltip="object.nodeinfo.error"><i class="bi bi-question-circle" /></span>
</Layout>
<ajax-button
method="get"
:url="'manage/federation/domains/' + object.name + '/nodeinfo/'"
:url="'manage/federation/domains/' + object?.name + '/nodeinfo/'"
@action-done="refreshNodeInfo"
>
{{ t('views.admin.moderation.DomainsDetail.button.refreshNodeInfo') }}
</ajax-button>
</section>
</div>
<div class="column">
<section>
<h3 class="ui header">
<i class="feed icon" />
<div class="content">
{{ t('views.admin.moderation.DomainsDetail.header.activity') }}&nbsp;
<span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
</div>
</h3>
<div
v-if="isLoadingStats"
class="ui placeholder"
</Layout>
<Layout
stack
style="flex: 1; gap: 0;"
>
<div class="full line" />
<div class="short line" />
<div class="medium line" />
<div class="long line" />
</div>
<table
v-else
class="ui very basic table"
<Heading
:h3="t('views.admin.moderation.DomainsDetail.header.activity')"
class="category"
>
<tbody>
<tr>
<td>
<span
:data-tooltip="labels.statsWarning"
style="margin-left: 8px;"
>
<i class="bi bi-question-circle" /></span>
</Heading>
<Layout
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.DomainsDetail.table.activity.firstSeen') }}
</td>
<td>
<human-date :date="object.creation_date" />
</td>
</tr>
<tr>
<td>
<router-link
:to="{name: 'manage.moderation.accounts.list', query: {q: 'domain:' + object.name }}"
</span>
<Spacer
h
grow
/>
<HumanDate :date="object?.creation_date" />
</Layout>
<Layout
flex
class="details"
>
<Link
class="label"
:to="{name: 'manage.moderation.accounts.list', query: {q: 'domain:' + object?.name }}"
>
{{ t('views.admin.moderation.DomainsDetail.link.knownAccounts') }}
</router-link>
</td>
<td>
{{ stats.actors }}
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.DomainsDetail.table.activity.emittedMessages') }}
</td>
<td>
{{ stats.outbox_activities }}
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.DomainsDetail.table.activity.receivedFollows') }}
</td>
<td>
{{ stats.received_library_follows }}
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.DomainsDetail.table.activity.emittedFollows') }}
</td>
<td>
{{ stats.emitted_library_follows }}
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="column">
<section>
<h3 class="ui header">
<i class="music icon" />
<div class="content">
{{ t('views.admin.moderation.DomainsDetail.header.audioContent') }}&nbsp;
<span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
</div>
</h3>
<div
v-if="isLoadingStats"
class="ui placeholder"
</Link>
<Spacer
h
grow
/>
<span class="value">{{ stats?.actors }}</span>
</Layout>
</Layout>
<Layout
stack
style="flex: 1; gap: 0;"
>
<div class="full line" />
<div class="short line" />
<div class="medium line" />
<div class="long line" />
</div>
<table
v-else
class="ui very basic table"
<Heading
:h3="t('views.admin.moderation.DomainsDetail.header.audioContent')"
class="category"
>
<tbody>
<tr>
<td>
<span
:data-tooltip="labels.statsWarning"
style="margin-left: 8px;"
>
<i class="bi bi-question-circle" /></span>
</Heading>
<Layout
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.DomainsDetail.table.audioContent.cachedSize') }}
</td>
<td>
{{ humanSize(stats.media_downloaded_size) }}
</td>
</tr>
<tr>
<td>
</span>
<Spacer
h
grow
/>
<span class="value">{{ humanSize(stats?.media_downloaded_size) }}</span>
</Layout>
<Layout
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.DomainsDetail.table.audioContent.totalSize') }}
</td>
<td>
{{ humanSize(stats.media_total_size) }}
</td>
</tr>
<tr>
<td>
</span>
<Spacer
h
grow
/>
<span class="value">{{ humanSize(stats?.media_total_size) }}</span>
</Layout>
<Layout
flex
class="details"
>
<span class="label">
<router-link :to="{name: 'manage.channels', query: {q: getQuery('domain', object.name) }}">
{{ t('views.admin.moderation.DomainsDetail.link.channels') }}
</router-link>
</td>
<td>
{{ stats.channels }}
</td>
</tr>
<tr>
<td>
</span>
<Spacer
h
grow
/>
<span class="value">{{ stats?.channels }}</span>
</Layout>
<Layout
flex
class="details"
>
<span class="label">
<router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('domain', object.name) }}">
{{ t('views.admin.moderation.DomainsDetail.link.libraries') }}
</router-link>
</td>
<td>
{{ stats.libraries }}
</td>
</tr>
<tr>
<td>
</span>
<Spacer
h
grow
/>
<span class="value">{{ stats?.libraries }}</span>
</Layout>
<Layout
flex
class="details"
>
<span class="label">
<router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('domain', object.name) }}">
{{ t('views.admin.moderation.DomainsDetail.link.uploads') }}
</router-link>
</td>
<td>
{{ stats.uploads }}
</td>
</tr>
<tr>
<td>
</span>
<Spacer
h
grow
/>
<span class="value">{{ stats?.uploads }}</span>
</Layout>
<Layout
flex
class="details"
>
<span class="label">
<router-link :to="{name: 'manage.library.artists', query: {q: getQuery('domain', object.name) }}">
{{ t('views.admin.moderation.DomainsDetail.link.artists') }}
</router-link>
</td>
<td>
{{ stats.artists }}
</td>
</tr>
<tr>
<td>
</span>
<Spacer
h
grow
/>
<span class="value">{{ stats?.artists }}</span>
</Layout>
<Layout
flex
class="details"
>
<span class="label">
<router-link :to="{name: 'manage.library.albums', query: {q: getQuery('domain', object.name) }}">
{{ t('views.admin.moderation.DomainsDetail.link.albums') }}
</router-link>
</td>
<td>
{{ stats.albums }}
</td>
</tr>
<tr>
<td>
</span>
<Spacer
h
grow
/>
<span class="value">{{ stats?.albums }}</span>
</Layout>
<Layout
flex
class="details"
>
<span class="label">
<router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('domain', object.name) }}">
{{ t('views.admin.moderation.DomainsDetail.link.tracks') }}
</router-link>
</td>
<td>
{{ stats.tracks }}
</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
</div>
</template>
</main>
</span>
<Spacer
h
grow
/>
<span class="value">{{ stats?.tracks }}</span>
</Layout>
</Layout>
</Layout>
</template>
<style scoped lang="scss">
.channel-image {
width: 200px;
height: 200px;
font-size: 160px;
border: none;
display: block;
text-align: center;
align-content: center;
@include light-theme {
background-color: var(--fw-gray-200);
}
@include dark-theme {
background-color: var(--fw-gray-800);
}
}
h3.category {
margin-bottom: 16px;
}
.details {
padding: 0 16px;
height: 72px;
align-items: center;
border-top: 1px solid;
min-width: 280px;
@include light-theme {
border-color: var(--fw-gray-300);
}
@include dark-theme {
border-color: var(--fw-gray-800);
}
.label {
font-weight: 800;
@include light-theme {
color: var(--fw-gray-600);
}
@include dark-theme {
color: var(--fw-gray-500);
}
}
a.label,
a.value {
text-decoration: underline;
}
&:last-child {
border-bottom: 1px solid;
}
}
</style>

8
front/src/views/admin/moderation/ReportsList.vue
View File

@ -26,6 +26,7 @@ import useOrdering from '~/composables/navigation/useOrdering'
import useErrorHandler from '~/composables/useErrorHandler'
import usePage from '~/composables/navigation/usePage'
import useLogger from '~/composables/useLogger'
import Loader from '~/components/ui/Loader.vue'
interface Props extends SmartSearchProps, OrderingProps {
mode?: 'card'
@ -194,12 +195,9 @@ const labels = computed(() => ({
</Layout>
</div>
</div>
<div
<Loader
v-if="isLoading"
class="ui active inverted dimmer"
>
<div class="ui loader" />
</div>
/>
<div v-else-if="!result || result.count === 0">
<empty-state
:refresh="true"