filter and sorting options, fix status width in admin_dash

This commit is contained in:
luce 2025-09-12 15:20:27 +02:00
commit 53537e194f
9 changed files with 135 additions and 12 deletions

View file

@ -6,6 +6,9 @@ export default {
title: { title: {
type: String type: String
}, },
message: {
type: String
},
cancelText: { cancelText: {
type: String type: String
}, },

View file

@ -6,7 +6,11 @@
:confirm-text="confirmText" :confirm-text="confirmText"
@accepted="doGeneric" @accepted="doGeneric"
@cancelled="hide" @cancelled="hide"
/> >
<template #default>
<span v-text="message" />
</template>
</ConfirmModal>
</template> </template>
<script src="./generic_confirm.js" /> <script src="./generic_confirm.js" />

View file

@ -20,6 +20,7 @@
class="list-empty-content faint" class="list-empty-content faint"
> >
<slot name="empty" /> <slot name="empty" />
<slot name="load" />
</div> </div>
</div> </div>
</template> </template>

View file

@ -59,6 +59,7 @@ const PageList = {
loadMore () { loadMore () {
if (!this.isLoading && this.canLoadMore) { if (!this.isLoading && this.canLoadMore) {
this.isLoading = true this.isLoading = true
console.log("is loading = true")
this.fetchPage(this.$store, { this.fetchPage(this.$store, {
page: this.pageIndex++, page: this.pageIndex++,
pageSize: this.pageSize pageSize: this.pageSize

View file

@ -68,6 +68,9 @@
<template #empty> <template #empty>
<slot name="empty" /> <slot name="empty" />
</template> </template>
<template #load>
<slot name="load" />
</template>
</List> </List>
</div> </div>
</template> </template>

View file

@ -5,6 +5,7 @@ import AdminStatusCard from 'src/components/settings_modal/admin_tabs/admin_stat
import Modal from 'src/components/modal/modal.vue' import Modal from 'src/components/modal/modal.vue'
import Popover from 'src/components/popover/popover.vue' import Popover from 'src/components/popover/popover.vue'
import GenericConfirm from 'src/components/confirm_modal/generic_confirm.vue' import GenericConfirm from 'src/components/confirm_modal/generic_confirm.vue'
import Select from 'src/components/select/select.vue'
const AdminCard = { const AdminCard = {
props: { props: {
@ -45,6 +46,9 @@ const AdminCard = {
justApproved: false, justApproved: false,
justConfirmed: false, justConfirmed: false,
justDeleted: false, justDeleted: false,
showDirect: false,
showReblogs: false,
timelineSorting: "des"
} }
}, },
computed: { computed: {
@ -128,7 +132,8 @@ const AdminCard = {
AdminStatusCard, AdminStatusCard,
Modal, Modal,
Popover, Popover,
GenericConfirm GenericConfirm,
Select
}, },
methods: { methods: {
/** /**
@ -219,8 +224,16 @@ const AdminCard = {
*/ */
async fetchStatuses (store, opts) { async fetchStatuses (store, opts) {
const u = this.$store.getters.findUser(this.userDetails.id) const u = this.$store.getters.findUser(this.userDetails.id)
const res = store.dispatch('adminListStatuses', { user: u, opts: { pageSize: opts.pageSize, godmode: true, withReblogs: true}}) const res = store.dispatch('adminListStatuses', { user: u, opts: { pageSize: opts.pageSize, godmode: this.showDirect, withReblogs: this.showReblogs}})
return res.then(r => r.activities) return res.then(r => {
const a = r.activities
console.log(this.timelineSorting)
if (this.timelineSorting === 'des') {
return [...a].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
} else if (this.timelineSorting === 'asc') {
return [...a].sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
} else return []
})
}, },
confirmAction (box) { confirmAction (box) {
this.$refs[box].show() this.$refs[box].show()

View file

@ -211,6 +211,48 @@
@backdrop-clicked="() => { detailsExpanded = false }" @backdrop-clicked="() => { detailsExpanded = false }"
> >
<div style="background-color: rgb(80 80 80 / 100%); width: 80%; height: 60%; overflow-y: auto;"> <div style="background-color: rgb(80 80 80 / 100%); width: 80%; height: 60%; overflow-y: auto;">
<ul class="setting-list" style="columns: 2;">
<li>
{{ $t('admin_dash.users.details.id') }}
</li>
<li>
{{ $t('admin_dash.users.details.actor_type') }}
</li>
<li>
{{ $t('admin_dash.users.details.tags') }}
</li>
<li>
{{ $t('admin_dash.users.details.roles') }}
</li>
<li>
{{ $t('admin_dash.users.details.account_type') }}
</li>
<li>
{{ $t('admin_dash.users.details.status') }}
</li>
<li>
{{ user.id }}
</li>
<li>
{{ $t('admin_dash.users.details.actor_types.' + user.actor_type.toLowerCase()) }}
</li>
<li>
{{ user.tags }}
</li>
<li>
<span v-if="user.rights.admin === true"> {{ $t('admin_dash.users.details.admin') }} </span>
<span v-if="user.rights.admin === true && user.rights.moderator === true"> ,&nbsp; </span>
<span v-if="user.rights.moderator === true"> {{ $t('admin_dash.users.details.moderator') }} </span>
</li>
<li>
<span v-if="user.is_local"> {{ $t('admin_dash.users.details.local') }} </span>
<span v-else> {{ $t('admin_dash.users.details.remote') }} </span>
</li>
<li>
<span v-if="user.deactivated === false"> {{ $t('admin_dash.users.details.active') }} </span>
<span v-else> {{ $t('admin_dash.users.details.inactive') }} </span>
</li>
</ul>
<PageList <PageList
ref="timelineList" ref="timelineList"
:refresh="true" :refresh="true"
@ -221,7 +263,29 @@
:fetch-page="(store, opts) => fetchStatuses(store, opts)" :fetch-page="(store, opts) => fetchStatuses(store, opts)"
> >
<template #header> <template #header>
<p> add options to sort statuses </p> <Checkbox
v-model="showDirect"
@update:model-value="() => this.$refs.timelineList.reset()"
>
{{ $t('admin_dash.users.filters.show_direct') }}
</Checkbox>
<Checkbox
v-model="showReblogs"
@update:model-value="() => this.$refs.timelineList.reset()"
>
{{ $t('admin_dash.users.filters.show_reblogs') }}
</Checkbox>
<Select
v-model="timelineSorting"
@update:model-value="() => this.$refs.timelineList.reset()"
>
<option value="asc">
{{ $t('admin_dash.users.filters.ascending') }}
</option>
<option value="des">
{{ $t('admin_dash.users.filters.descending') }}
</option>
</Select>
<Popover <Popover
ref="dropdownstatus" ref="dropdownstatus"
trigger="click" trigger="click"
@ -231,9 +295,10 @@
<button <button
class="button button-default btn" class="button button-default btn"
> >
{{ $t('admin_dash.user.title_actions') }} {{ $t('admin_dash.users.actions.button.title') }}
</button> </button>
</template> </template>
<p> wrap </p>
<template #content> <template #content>
<div class="dropdown-menu"> <div class="dropdown-menu">
<div class="menu-item dropdown-item"> <div class="menu-item dropdown-item">
@ -255,13 +320,17 @@
</Popover> </Popover>
</template> </template>
<template #item="{item}"> <template #item="{item}">
<AdminStatusCard :status-details="item" /> <AdminStatusCard :status-details="item" style="width: 100%"/>
</template> </template>
<template #empty> <template #empty>
<p> {{ $t('admin_dash.users.user_has_no_posts') }} </p> <p> {{ $t('admin_dash.users.user_has_no_posts') }} </p>
</template> </template>
<template #load> <template #load>
<p> {{ $t('admin_dash.users.loading') }} </p> <FAIcon
icon="circle-notch"
spin
size="lg"
/>
</template> </template>
</PageList> </PageList>
</div> </div>

View file

@ -236,6 +236,12 @@
<template #item="{item}"> <template #item="{item}">
<AdminCard :user-details="item" /> <AdminCard :user-details="item" />
</template> </template>
<template #load>
<span> loading </span>
</template>
<template #empty>
<span> no users </span>
</template>
</PageList> </PageList>
</div> </div>
<GenericConfirm <GenericConfirm
@ -317,7 +323,8 @@
/> />
<GenericConfirm <GenericConfirm
ref="confirmDisableMFA" ref="confirmDisableMFA"
:title="$t('admin_dash.users.bulk_actions.disable_mfa')" :title="$t('admin_dash.users.title_confirm')"
:message="$t('admin_dash.users.bulk_actions.disable_mfa')"
:cancel-text="$t('admin_dash.users.bulk_actions.no')" :cancel-text="$t('admin_dash.users.bulk_actions.no')"
:confirm-text="$t('admin_dash.users.bulk_actions.yes')" :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
@action="selectionConfirmed('adminDisableMFA')" @action="selectionConfirmed('adminDisableMFA')"

View file

@ -1154,7 +1154,6 @@
"users": { "users": {
"management": "Management", "management": "Management",
"search_users": "Search for users...", "search_users": "Search for users...",
"loading": "Loading...",
"label_query": "Query", "label_query": "Query",
"label_name": "Name", "label_name": "Name",
"label_email": "Email", "label_email": "Email",
@ -1172,7 +1171,12 @@
"only_unapproved": "Unapproved Only", "only_unapproved": "Unapproved Only",
"only_unconfirmed": "Unconfirmed Only", "only_unconfirmed": "Unconfirmed Only",
"refresh": "Refresh", "refresh": "Refresh",
"filters": {
"show_direct": "Show Direct Posts",
"show_reblogs": "Show Reblogs",
"ascending": "Oldest First",
"descending": "Newest First"
},
"actions": { "actions": {
"button": { "button": {
"title": "Actions", "title": "Actions",
@ -1224,7 +1228,25 @@
} }
}, },
"details": {
"id": "ID",
"actor_type": "Actor Type",
"actor_types": {
"person": "Person",
"service": "Service",
"application": "Application"
},
"admin": "Admin",
"moderator": "Moderator",
"local": "Local",
"active": "Active",
"inactive": "Inactive",
"tags": "Tags",
"roles": "Roles",
"status": "Status",
"remote": "Remote",
"account_type": "Account Type"
},
"bulk_actions": { "bulk_actions": {
"title": "Bulk Actions", "title": "Bulk Actions",
"yes": "Yes", "yes": "Yes",