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>

82
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,37 +222,39 @@ const remove = async () => {
</label>
</div>
</div>
<div class="ui hidden divider" />
<button
class="ui basic left floated button"
@click.prevent="emit('cancel')"
>
{{ t('components.manage.moderation.InstancePolicyForm.button.cancel') }}
</button>
<button
:class="['ui', 'right', 'floated', 'success', {'disabled loading': isLoading}, 'button']"
:disabled="isLoading"
>
<span v-if="object">
{{ t('components.manage.moderation.InstancePolicyForm.button.update') }}
</span>
<span v-else>
{{ t('components.manage.moderation.InstancePolicyForm.button.create') }}
</span>
</button>
<dangerous-button
v-if="object"
style="float: right;"
:title="t('components.manage.moderation.InstancePolicyForm.modal.delete.header')"
@confirm="remove"
>
{{ t('components.manage.moderation.InstancePolicyForm.button.delete') }}
<template #modal-content>
{{ t('components.manage.moderation.InstancePolicyForm.modal.delete.content.warning') }}
</template>
<template #modal-confirm>
{{ t('components.manage.moderation.InstancePolicyForm.button.confirm') }}
</template>
</dangerous-button>
</form>
<Layout flex>
<Button
primary
@click.prevent="emit('cancel')"
>
{{ t('components.manage.moderation.InstancePolicyForm.button.cancel') }}
</Button>
<Button
primary
:class="{'disabled loading': isLoading}"
:disabled="isLoading"
>
<span v-if="object">
{{ t('components.manage.moderation.InstancePolicyForm.button.update') }}
</span>
<span v-else>
{{ t('components.manage.moderation.InstancePolicyForm.button.create') }}
</span>
</Button>
<dangerous-button
v-if="object"
style="float: right;"
:title="t('components.manage.moderation.InstancePolicyForm.modal.delete.header')"
@confirm="remove"
>
{{ t('components.manage.moderation.InstancePolicyForm.button.delete') }}
<template #modal-content>
{{ t('components.manage.moderation.InstancePolicyForm.modal.delete.content.warning') }}
</template>
<template #modal-confirm>
{{ t('components.manage.moderation.InstancePolicyForm.button.confirm') }}
</template>
</dangerous-button>
</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>

79
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,48 +44,53 @@ 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">
<actor-link
:admin="true"
:actor="note.author"
/>
<div class="date">
<human-date :date="note.creation_date" />
</div>
<Spacer :size="16" />
<Layout
flex
gap-16
class="summary"
>
<actor-link
:admin="true"
:actor="note.author"
/>
<div class="date">
<human-date :date="note.creation_date" />
</div>
<div class="extra text">
<expandable-div :content="note.summary">
<sanitized-html :html="useMarkdownRaw(note.summary ?? '')" />
</expandable-div>
</div>
<div class="meta">
<dangerous-button
:is-loading="isLoading"
low-height
icon="bi-trash"
:title="t('components.manage.moderation.NotesThread.modal.delete.header')"
@confirm="remove(note)"
>
{{ t('components.manage.moderation.NotesThread.button.delete') }}
</Layout>
<expandable-div :content="note.summary">
<sanitized-html :html="useMarkdownRaw(note.summary ?? '')" />
</expandable-div>
<template #actions>
<dangerous-button
:is-loading="isLoading"
low-height
icon="bi-trash"
:title="t('components.manage.moderation.NotesThread.modal.delete.header')"
@confirm="remove(note)"
>
{{ t('components.manage.moderation.NotesThread.button.delete') }}
<template #modal-content>
{{ t('components.manage.moderation.NotesThread.modal.delete.content.warning') }}
</template>
<template #modal-confirm>
{{ t('components.manage.moderation.NotesThread.button.delete') }}
</template>
</dangerous-button>
</div>
</div>
</div>
<template #modal-content>
{{ t('components.manage.moderation.NotesThread.modal.delete.content.warning') }}
</template>
<template #modal-confirm>
{{ t('components.manage.moderation.NotesThread.button.delete') }}
</template>
</dangerous-button>
</template>
</Alert>
</div>
</template>

416
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,136 +145,124 @@ 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>
<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">
<table class="ui very basic unstackable table">
<tbody>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.report.submittedBy') }}
</td>
<td>
<div v-if="obj.submitter">
<actor-link
:admin="true"
:actor="obj.submitter"
/>
</div>
<div v-else-if="obj.submitter_email">
{{ obj.submitter_email }}
</div>
</td>
</tr>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.report.category') }}
</td>
<td>
<report-category-dropdown
v-model="obj.type"
@update:model-value="update($event)"
>
&#32;
<action-feedback :is-loading="updating.type" />
</report-category-dropdown>
</td>
</tr>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.report.creationDate') }}
</td>
<td>
<human-date
:date="obj.creation_date"
:icon="true"
/>
</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') }}
</td>
<td v-if="obj.is_handled">
<span v-if="obj.is_handled">
<i class="success check icon" />
{{ t('components.manage.moderation.ReportCard.table.status.resolved') }}
</span>
</td>
<td v-else>
<i class="danger x icon" />
{{ t('components.manage.moderation.ReportCard.table.status.unresolved') }}
</td>
</tr>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.status.assignedTo') }}
</td>
<td>
<div v-if="obj.assigned_to">
<actor-link
:admin="true"
:actor="obj.assigned_to"
/>
</div>
<span v-else>
{{ t('components.manage.moderation.ReportCard.notApplicable') }}
</span>
</td>
</tr>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.status.resolutionDate') }}
</td>
<td>
<human-date
v-if="obj.handled_date"
:date="obj.handled_date"
:icon="true"
/>
<span v-else>
{{ t('components.manage.moderation.ReportCard.notApplicable') }}
</span>
</td>
</tr>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.status.internalNotes') }}
</td>
<td>
<i class="comment icon" />
{{ obj.notes.length }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div
<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"
/>
</template>
<table class="ui very basic unstackable table">
<tbody>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.report.submittedBy') }}
</td>
<td>
<div v-if="obj.submitter">
<actor-link
:admin="true"
:actor="obj.submitter"
/>
</div>
<div v-else-if="obj.submitter_email">
{{ obj.submitter_email }}
</div>
</td>
</tr>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.report.category') }}
</td>
<td>
<report-category-dropdown
v-model="obj.type"
@update:model-value="update($event)"
>
&#32;
<action-feedback :is-loading="updating.type" />
</report-category-dropdown>
</td>
</tr>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.report.creationDate') }}
</td>
<td>
<human-date
:date="obj.creation_date"
:icon="true"
/>
</td>
</tr>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.status.status') }}
</td>
<td v-if="obj.is_handled">
<span v-if="obj.is_handled">
<i class="success check icon" />
{{ t('components.manage.moderation.ReportCard.table.status.resolved') }}
</span>
</td>
<td v-else>
<i class="danger x icon" />
{{ t('components.manage.moderation.ReportCard.table.status.unresolved') }}
</td>
</tr>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.status.assignedTo') }}
</td>
<td>
<div v-if="obj.assigned_to">
<actor-link
:admin="true"
:actor="obj.assigned_to"
/>
</div>
<span v-else>
{{ t('components.manage.moderation.ReportCard.notApplicable') }}
</span>
</td>
</tr>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.status.resolutionDate') }}
</td>
<td>
<human-date
v-if="obj.handled_date"
:date="obj.handled_date"
:icon="true"
/>
<span v-else>
{{ t('components.manage.moderation.ReportCard.notApplicable') }}
</span>
</td>
</tr>
<tr>
<td>
{{ t('components.manage.moderation.ReportCard.table.status.internalNotes') }}
</td>
<td>
<i class="comment icon" />
{{ obj.notes.length }}
</td>
</tr>
</tbody>
</table>
<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
v-if="target && configs[target.type].urls.getDetail"
class="ui basic button"
:to="configs[target.type].urls.getDetail?.(obj.target_state) ?? '/'"
>
<i class="eye icon" />
{{ t('components.manage.moderation.ReportCard.link.publicPage') }}
</router-link>
<router-link
v-if="target && configs[target.type].urls.getAdminDetail"
class="ui basic button"
:to="configs[target.type].urls.getAdminDetail?.(obj.target_state) ?? '/'"
>
<i class="wrench icon" />
{{ t('components.manage.moderation.ReportCard.link.moderation') }}
</router-link>
</Alert>
<Layout flex>
<Link
v-if="target && configs[target.type].urls.getDetail"
solid
secondary
icon="bi-eye"
low-height
:to="configs[target.type].urls.getDetail?.(obj.target_state) ?? '/'"
>
{{ t('components.manage.moderation.ReportCard.link.publicPage') }}
</Link>
<Link
v-if="target && configs[target.type].urls.getAdminDetail"
solid
secondary
icon="bi-wrench"
low-height
:to="configs[target.type].urls.getAdminDetail?.(obj.target_state) ?? '/'"
>
{{ t('components.manage.moderation.ReportCard.link.moderation') }}
</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,65 +403,61 @@ const handleRemovedNote = (uuid: string) => {
</tbody>
</table>
</aside>
</div>
<div class="ui stackable two column grid">
<div class="column">
<h3>
{{ t('components.manage.moderation.ReportCard.header.notes') }}
</h3>
<notes-thread
:notes="obj.notes"
@deleted="handleRemovedNote($event)"
/>
<note-form
: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
v-if="obj.is_handled === false"
:class="['ui', {loading: isLoading}, 'button']"
@click="resolveReport(true)"
>
<i class="success check icon" />&nbsp;
{{ t('components.manage.moderation.ReportCard.button.resolve') }}
</button>
<button
v-if="obj.is_handled === true"
:class="['ui', {loading: isLoading}, 'button']"
@click="resolveReport(false)"
>
<i class="warning redo icon" />&nbsp;
{{ t('components.manage.moderation.ReportCard.button.unresolve') }}
</button>
<template
v-for="action in actions"
:key="action.label"
>
<dangerous-button
v-if="action.dangerous && action.show(obj)"
:is-loading="isLoading"
:action="action.handler"
:title="action.modalHeader"
:icon="`${action.iconColor} ${action.icon}`"
>
{{ action.label }}
<template #modal-content>
{{ action.modalContent }}
</template>
<template #modal-confirm>
{{ action.modalConfirmLabel }}
</template>
</dangerous-button>
</Layout>
<h3>
{{ t('components.manage.moderation.ReportCard.header.notes') }}
</h3>
<notes-thread
:notes="obj.notes"
@deleted="handleRemovedNote($event)"
/>
<note-form
:target="{type: 'report', uuid: obj.uuid}"
@created="obj.notes.push($event)"
/>
<h3>
{{ t('components.manage.moderation.ReportCard.header.actions') }}
</h3>
<Layout flex>
<Button
v-if="obj.is_handled === false"
:class="{loading: isLoading}"
primary
icon="bi-check"
@click="resolveReport(true)"
>
{{ t('components.manage.moderation.ReportCard.button.resolve') }}
</Button>
<Button
v-if="obj.is_handled === true"
:class="{loading: isLoading}"
secondary
icon="bi-arrow-counterclockwise"
@click="resolveReport(false)"
>
{{ t('components.manage.moderation.ReportCard.button.unresolve') }}
</Button>
<template
v-for="action in actions"
:key="action.label"
>
<dangerous-button
v-if="action.dangerous && action.show(obj)"
:is-loading="isLoading"
:action="action.handler"
:title="action.modalHeader"
:icon="`${action.iconColor} ${action.icon}`"
>
{{ action.label }}
<template #modal-content>
{{ action.modalContent }}
</template>
</div>
</div>
</div>
</div>
</div>
<template #modal-confirm>
{{ action.modalConfirmLabel }}
</template>
</dangerous-button>
</template>
</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>

896
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,466 +149,427 @@ 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>
<a
:href="object.url || object.fid"
target="_blank"
rel="noopener noreferrer"
>
{{ 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}`)"
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}`)"
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"
target="_blank"
rel="noopener noreferrer"
>
<i class="bi bi-box-arrow-up-right" />
{{ t('views.admin.moderation.AccountsDetail.link.remoteProfile') }}&nbsp;
</a>
</Layout>
<div class="ui column">
<div
v-if="!object.user"
class="ui compact clearing placeholder segment component-placeholder"
>
<template v-if="isLoadingPolicy">
<div class="paragraph">
<div class="line" />
<div class="line" />
<div class="line" />
<div class="line" />
<div class="line" />
</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>
<p>
{{ t('views.admin.moderation.AccountsDetail.description.policy') }}
</p>
<Button
primary
@click="showPolicyForm = true"
>
{{ t('views.admin.moderation.AccountsDetail.button.addPolicy') }}
</Button>
</template>
<instance-policy-card
v-else-if="policy && !showPolicyForm"
:object="policy"
@update="showPolicyForm = true"
>
<header class="ui header">
<h3>
{{ t('views.admin.moderation.AccountsDetail.header.activePolicy') }}
</h3>
</header>
</instance-policy-card>
<instance-policy-form
v-else-if="showPolicyForm"
:object="policy"
type="actor"
: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>
{{ 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 }}">
{{ t('views.admin.moderation.AccountsDetail.link.domain') }}
</router-link>
</td>
<td>
{{ object.domain }}
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.AccountsDetail.table.accountData.displayName') }}
</td>
<td>
{{ object.name }}
</td>
</tr>
<tr v-if="object.user">
<td>
{{ 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')"
/>
<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"
>
{{ 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>
{{ 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"
>
<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"
>
<tbody>
<tr v-if="!object.user">
<td>
{{ t('views.admin.moderation.AccountsDetail.table.activity.firstSeen') }}
</td>
<td>
<human-date :date="object.creation_date" />
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.AccountsDetail.table.activity.emittedMessages') }}
</td>
<td>
{{ stats.outbox_activities }}
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.AccountsDetail.table.activity.receivedFollows') }}
</td>
<td>
{{ stats.received_library_follows }}
</td>
</tr>
<tr>
<td>
{{ 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}`) }}">
{{ 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}`) }}">
{{ 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"
>
<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"
>
<tbody>
<tr v-if="!object.user">
<td>
{{ t('views.admin.moderation.AccountsDetail.table.audioContent.cachedSize') }}
</td>
<td>
{{ humanSize(stats.media_downloaded_size) }}
</td>
</tr>
<tr v-if="object.user">
<td>
{{ t('views.admin.moderation.AccountsDetail.table.audioContent.uploadQuota') }}
<span :data-tooltip="labels.uploadQuota"><i class="question circle icon" /></span>
</td>
<td>
<Input
v-model.number="object.user.upload_quota"
step="100"
name="quota"
type="number"
@change="updateUser('upload_quota', true)"
/>
<div class="ui basic label">
{{ t('views.admin.moderation.AccountsDetail.table.audioContent.megabyte') }}
</div>
<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 #image>
<i class="channel-image bi-person-circle" />
</template>
<Spacer />
<Layout
flex
class="header-buttons"
>
<Link
solid
primary
low-height
icon="bi-box-arrow-up-right"
:to="object?.url || object?.fid"
target="_blank"
>
{{ 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"
>
{{ 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"
>
{{ t('views.admin.moderation.AccountsDetail.link.django') }}
</Link>
</Layout>
</Header>
<Alert
v-if="!object?.user"
:blue="!policy"
red="policy"
>
<template v-if="isLoadingPolicy">
<div class="paragraph">
<div class="line" />
<div class="line" />
<div class="line" />
<div class="line" />
<div class="line" />
</div>
</template>
<template v-else-if="!policy && !showPolicyForm">
<Heading
:h3="t('views.admin.moderation.AccountsDetail.header.noPolicy')"
icon="bi-shield-fill"
/>
<p>
{{ t('views.admin.moderation.AccountsDetail.description.policy') }}
</p>
<Button
primary
@click="showPolicyForm = true"
>
{{ t('views.admin.moderation.AccountsDetail.button.addPolicy') }}
</Button>
</template>
<instance-policy-card
v-else-if="policy && !showPolicyForm"
:object="policy"
@update="showPolicyForm = true"
>
<header class="ui header">
<h3>
{{ t('views.admin.moderation.AccountsDetail.header.activePolicy') }}
</h3>
</header>
</instance-policy-card>
<instance-policy-form
v-else-if="showPolicyForm"
:object="policy"
type="actor"
:target="object?.full_username"
@cancel="showPolicyForm = false"
@save="updatePolicy"
@delete="policy = null; showPolicyForm = false"
/>
</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') }}
</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>
<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') }}
</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') }}
</span>
<Spacer
h
grow
/>
<span class="value">{{ object?.user?.email }}</span>
</Layout>
<Layout
v-if="object?.user"
flex
class="details"
>
<span class="label">
{{ t('views.admin.moderation.AccountsDetail.table.accountData.signupDate') }}
</span>
<Spacer
h
grow
/>
<HumanDate :date="object?.user?.date_joined" />
</Layout>
</Layout>
<Layout
stack
style="flex: 1; gap: 0;"
>
<Heading
:h3="t('views.admin.moderation.AccountsDetail.header.activity')"
class="category"
>
<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') }}
</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') }}
</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') }}
</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') }}
</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>
<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>
<Spacer
h
grow
/>
<span class="value">{{ stats?.requests }}</span>
</Layout>
</Layout>
<Layout
stack
style="flex: 1; gap: 0;"
>
<Heading
:h3="t('views.admin.moderation.AccountsDetail.header.audioContent')"
class="category"
>
<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') }}
</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>
<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)"
/>
<span class="ui basic label">
{{ t('views.admin.moderation.AccountsDetail.table.audioContent.megabyte') }}
</span>
<action-feedback
class="ui basic label"
size="tiny"
:is-loading="updating.has('upload_quota')"
/>
</Layout>
<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>

835
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,398 +122,442 @@ 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
>
<template #image>
<i class="channel-image bi bi-cloud-fill" />
</template>
<Spacer />
<Layout
flex
class="header-buttons"
>
<div :class="['ui', 'centered', 'active', 'inline', 'loader']" />
</div>
<template v-if="object">
<section
v-title="object.name"
:class="['ui', 'head', 'vertical', 'stripe', 'segment']"
<Link
solid
primary
low-height
icon="bi-box-arrow-up-right"
:to="externalUrl"
target="_blank"
>
<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"
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
v-if="store.state.auth.profile?.is_superuser"
class="ui labeled icon button"
:href="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"
>
<button
v-if="object.allowed"
:class="['ui', 'labeled', {loading: isLoadingAllowList}, 'icon', 'button']"
@click.prevent="setAllowList(false)"
>
<i class="x icon" />
{{ 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" />
{{ 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">
<template v-if="isLoadingPolicy">
<div class="paragraph">
<div class="line" />
<div class="line" />
<div class="line" />
<div class="line" />
<div class="line" />
</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>
<p>
{{ t('views.admin.moderation.DomainsDetail.description.policy') }}
</p>
<button
class="ui primary button"
@click="showPolicyForm = true"
>
{{ t('views.admin.moderation.DomainsDetail.button.addPolicy') }}
</button>
</template>
<instance-policy-card
v-else-if="policy && !showPolicyForm"
:object="policy"
@update="showPolicyForm = true"
>
<header class="ui header">
<h3>
{{ t('views.admin.moderation.DomainsDetail.header.activePolicy') }}
</h3>
</header>
</instance-policy-card>
<instance-policy-form
v-else-if="showPolicyForm"
:object="policy"
type="domain"
:target="object.name"
@cancel="showPolicyForm = false"
@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"
>
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.true') }}
</span>
<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
>
{{ t('views.admin.moderation.DomainsDetail.notApplicable') }}
</span>
</td>
</tr>
{{ t('views.admin.moderation.DomainsDetail.link.website') }}
</Link>
<Link
v-if="store.state.auth.profile?.is_superuser"
solid
primary
low-height
icon="bi-wrench"
:to="store.getters['instance/absoluteUrl'](`/api/admin/federation/domain/${object.name}`)"
target="_blank"
>
{{ 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)"
>
<span v-if="object.allowed">
{{ t('views.admin.moderation.DomainsDetail.button.removeFromAllowList') }}
</span>
<span v-else>
{{ t('views.admin.moderation.DomainsDetail.button.addToAllowList') }}
</span>
</PopoverItem>
</template>
</Popover>
</Layout>
</Header>
<template v-if="object.nodeinfo && object.nodeinfo.status === 'ok'">
<tr>
<td>
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.software.label') }}
</td>
<td>
{{ 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>
{{ 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>
<ajax-button
method="get"
: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"
>
<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"
>
<tbody>
<tr>
<td>
{{ 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 }}"
>
{{ 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"
>
<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"
>
<tbody>
<tr>
<td>
{{ t('views.admin.moderation.DomainsDetail.table.audioContent.cachedSize') }}
</td>
<td>
{{ humanSize(stats.media_downloaded_size) }}
</td>
</tr>
<tr>
<td>
{{ t('views.admin.moderation.DomainsDetail.table.audioContent.totalSize') }}
</td>
<td>
{{ humanSize(stats.media_total_size) }}
</td>
</tr>
<tr>
<td>
<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>
<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>
<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>
<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>
<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>
<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>
<Alert
blue
>
<template v-if="isLoadingPolicy">
<div class="paragraph">
<div class="line" />
<div class="line" />
<div class="line" />
<div class="line" />
<div class="line" />
</div>
</template>
</main>
<template v-else-if="!policy && !showPolicyForm">
<Heading
:h3="t('views.admin.moderation.DomainsDetail.header.noPolicy')"
icon="bi-shield-lock"
/>
<p>
{{ t('views.admin.moderation.DomainsDetail.description.policy') }}
</p>
<Button
primary
@click="showPolicyForm = true"
>
{{ t('views.admin.moderation.DomainsDetail.button.addPolicy') }}
</Button>
</template>
<instance-policy-card
v-else-if="policy && !showPolicyForm"
:object="policy"
@update="showPolicyForm = true"
>
<header class="ui header">
<h3>
{{ t('views.admin.moderation.DomainsDetail.header.activePolicy') }}
</h3>
</header>
</instance-policy-card>
<instance-policy-form
v-else-if="showPolicyForm"
:object="policy"
type="domain"
:target="object.name"
@cancel="showPolicyForm = false"
@save="updatePolicy"
@delete="policy = null; showPolicyForm = false"
/>
</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>
{{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.false') }}
</span>
</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>
</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') }}
</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'))}) }}
</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') }}
</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/'"
@action-done="refreshNodeInfo"
>
{{ t('views.admin.moderation.DomainsDetail.button.refreshNodeInfo') }}
</ajax-button>
</Layout>
<Layout
stack
style="flex: 1; gap: 0;"
>
<Heading
:h3="t('views.admin.moderation.DomainsDetail.header.activity')"
class="category"
>
<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') }}
</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') }}
</Link>
<Spacer
h
grow
/>
<span class="value">{{ stats?.actors }}</span>
</Layout>
</Layout>
<Layout
stack
style="flex: 1; gap: 0;"
>
<Heading
:h3="t('views.admin.moderation.DomainsDetail.header.audioContent')"
class="category"
>
<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') }}
</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') }}
</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>
</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>
</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>
</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>
</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>
</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>
</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"