hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix mess in pagelist, add more options to customize page lists, fix layout in files

Browse source
This commit is contained in:
luce 2025-07-29 13:31:11 +02:00
commit 628af77f5b
7 changed files with 217 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/page_list/page_list.js
View file

@ -27,7 +27,7 @@ const PageList = {
page_index: 1, page_index: 1,
items: [], items: [],
can_load_more: true, can_load_more: true,
gliter: 0, is_loading: false
} }
}, },
methods: { methods: {
@ -35,20 +35,20 @@ const PageList = {
this.can_load_more = true this.can_load_more = true
this.page_index = 1 this.page_index = 1
this.items = [] this.items = []
this.is_loading = false
this.load_more() // load one page this.load_more() // load one page
}, },
load_more () { load_more () {
this.gliter++ if (!this.is_loading && this.can_load_more) {
const iter = this.gliter this.is_loading = true
this.fetch_page(this.$store, { this.fetch_page(this.$store, {
page: this.page_index++, page: this.page_index++,
page_size: this.page_size page_size: this.page_size
}).then((items) => { }).then(items => {
// ignore if another request was already dispatched
if (iter == this.gliter) {
this.items = [...this.items, ...items] this.items = [...this.items, ...items]
} this.is_loading = false
}) })
}
}, },
selected () { selected () {
return this.$refs.list.selected return this.$refs.list.selected

15
src/components/page_list/page_list.vue
View file

@ -18,6 +18,20 @@
v-bind="slotProps" v-bind="slotProps"
/> />
</template> </template>
<template #load="slotProps">
<slot
v-if="is_loading"
name="load"
v-bind="slotProps"
/>
</template>
<template #empty="slotProps">
<slot
v-if="items.length == 0 && !is_loading"
name="empty"
v-bind="slotProps"
/>
</template>
</SelectableList> </SelectableList>
<div v-if="!single_page"> <div v-if="!single_page">
<button <button
@ -28,7 +42,6 @@
> >
{{ $t('page_list.load_more') }} {{ $t('page_list.load_more') }}
</button> </button>
<p> prev first next </p>
</div> </div>
</div> </div>
</template> </template>

55
src/components/settings_modal/admin_tabs/admin_card.vue
View file

@ -17,60 +17,79 @@
</div> </div>
<div <div
v-else v-else
class="setting-item"
> >
<ul class="setting-list">
<li>
<button <button
class="button button-default btn" class="button button-default btn"
type="button" type="button"
@click="top_level_expanded = false" @click="top_level_expanded = false"
> >
{{ $t('admin_dash.users.collapse_user') }} {{ $t('admin_dash.users.collapse_user') }}
</button><br> </button>
<div v-if="is_local"> </li>
<li
v-if="is_local"
>
<Checkbox <Checkbox
:model-value="is_admin" :model-value="is_admin"
@update:model-value="v => toggle_admin(v)" @update:model-value="v => toggle_admin(v)"
> >
{{ $t('admin_dash.users.is_admin') }} {{ $t('admin_dash.users.is_admin') }}
</Checkbox><br> </Checkbox>
</li>
<li
v-if="is_local"
>
<Checkbox <Checkbox
:model-value="is_moderator" :model-value="is_moderator"
@update:model-value="v => toggle_moderator(v)" @update:model-value="v => toggle_moderator(v)"
> >
{{ $t('admin_dash.users.is_moderator') }} {{ $t('admin_dash.users.is_moderator') }}
</Checkbox><br> </Checkbox>
<div v-if="!just_confirmed && !is_confirmed"> </li>
<li
v-if="is_local && !just_confirmed && !is_confirmed"
>
<button <button
class="button button-default btn" class="button button-default btn"
type="button" type="button"
@click="confirm_user()" @click="confirm_user()"
> >
{{ $t('admin_dash.users.is_confirmed') }} {{ $t('admin_dash.users.is_confirmed') }}
</button><br> </button>
</li>
<li
v-if="is_local && !just_confirmed && !is_confirmed"
>
<button <button
class="button button-default btn" class="button button-default btn"
type="button" type="button"
@click="resend_confirmation_email()" @click="resend_confirmation_email()"
> >
{{ $t('admin_dash.users.resend_confirmation_email') }} {{ $t('admin_dash.users.resend_confirmation_email') }}
</button><br> </button>
</div> </li>
<div v-if="!is_approved"> <li
v-if="is_local && !is_approved"
>
<button <button
class="button button-default btn" class="button button-default btn"
type="button" type="button"
@click="toggle_approval(true)" @click="toggle_approval(true)"
> >
{{ $t('admin_dash.users.approve') }} {{ $t('admin_dash.users.approve') }}
</button><br> </button>
</div> </li>
</div> <li>
<Checkbox <Checkbox
:model-value="is_activated" :model-value="is_activated"
@update:model-value="v => toggle_activation(v)" @update:model-value="v => toggle_activation(v)"
> >
{{ $t('admin_dash.users.is_active') }} {{ $t('admin_dash.users.is_active') }}
</Checkbox><br> </Checkbox>
</li>
<li>
<button <button
class="button button-default btn" class="button button-default btn"
type="button" type="button"
@ -78,6 +97,8 @@
> >
{{ $t('admin_dash.users.delete_user') }} {{ $t('admin_dash.users.delete_user') }}
</button> </button>
</li>
</ul>
</div> </div>
<div v-if="!timeline_expanded"> <div v-if="!timeline_expanded">
<button <button
@ -111,6 +132,12 @@
<template #item="{item}"> <template #item="{item}">
<AdminStatusCard :status_details="item" /> <AdminStatusCard :status_details="item" />
</template> </template>
<template #empty>
<p> {{ $t('admin_dash.users.user_has_no_posts') }} </p>
</template>
<template #load>
<p> {{ $t('admin_dash.users.loading') }} </p>
</template>
</PageList> </PageList>
</div> </div>
<div v-if="!json_expanded"> <div v-if="!json_expanded">

4
src/components/settings_modal/admin_tabs/admin_status_card.js
View file

@ -1,6 +1,6 @@
import Checkbox from 'src/components/checkbox/checkbox.vue' import Checkbox from 'src/components/checkbox/checkbox.vue'
import Select from 'src/components/select/select.vue' import Select from 'src/components/select/select.vue'
import StatusBody from 'src/components/status_body/status_body.vue' import Status from 'src/components/status/status.vue'
import { parseStatus } from 'src/services/entity_normalizer/entity_normalizer.service.js' import { parseStatus } from 'src/services/entity_normalizer/entity_normalizer.service.js'
const AdminStatusCard = { const AdminStatusCard = {
@ -30,7 +30,7 @@ const AdminStatusCard = {
components: { components: {
Checkbox, Checkbox,
Select, Select,
StatusBody, Status,
}, },
mounted () { mounted () {
this.$store.dispatch('adminChangeStatusScope', { opts: { id: this.status_details.id }}).then(res => parseStatus(res)).then(s => this.status_cache = s) this.$store.dispatch('adminChangeStatusScope', { opts: { id: this.status_details.id }}).then(res => parseStatus(res)).then(s => this.status_cache = s)

41
src/components/settings_modal/admin_tabs/admin_status_card.vue
View file

@ -1,29 +1,50 @@
<template> <template>
<div class="setting-item"> <div class="setting-item">
<h2> {{ $t('admin_dash.users.title_info') }}: </h2> <h2> {{ $t('admin_dash.users.title_info') }}: </h2>
<ul
class="setting-list"
>
<li>
<span> {{ $t('admin_dash.users.status_id') }}: {{ status_details.id }} </span> <span> {{ $t('admin_dash.users.status_id') }}: {{ status_details.id }} </span>
<span> {{ $t('admin_dash.users.created_at') }}: {{ status_details.created_at }} </span> </li>
<span v-if="typeof(status_details.edited_at) !== 'undefined'"> {{ $t('admin_dash.users.edited_at') }}: {{ status_details.edited_at }} </span> <li>
<span> {{ $t('admin_dash.users.created_at') }}: {{ new Date(status_details.created_at).toLocaleString() }} </span>
</li>
<li>
<span v-if="status_details.edited_at !== null"> {{ $t('admin_dash.users.edited_at') }}: {{ new Date(status_details.edited_at).toLocaleString() }} </span>
</li>
</ul>
<h2> {{ $t('admin_dash.users.title_content') }}: </h2> <h2> {{ $t('admin_dash.users.title_content') }}: </h2>
<div> <ul
<StatusBody class="setting-list"
>
<li>
<Status
v-if="typeof(status_cache) !== 'undefined'" v-if="typeof(status_cache) !== 'undefined'"
:status="status_cache" class="Notification"
:compact="true"
:statusoid="status_cache"
@interacted="false"
/> />
</div> </li>
<li>
<button <button
class="button button-default btn" class="button button-default btn"
type="button" type="button"
@click="delete_status(status.id)" @click="delete_status(status.id)"
> >
{{ $t('admin_dash.users.delete_status') }} {{ $t('admin_dash.users.delete_status') }}
</button><br> </button>
</li>
<li>
<Checkbox <Checkbox
:model-value="is_sensitive" :model-value="is_sensitive"
@update:model-value="v => change_sensitivity(v)" @update:model-value="v => change_sensitivity(v)"
> >
{{ $t('admin_dash.users.content_nsfw') }} {{ $t('admin_dash.users.content_nsfw') }}
</Checkbox> </Checkbox>
</li>
<li>
<Select <Select
:model-value="visibility" :model-value="visibility"
@update:model-value="v => change_visibility(v)" @update:model-value="v => change_visibility(v)"
@ -48,8 +69,12 @@
> >
{{ $t('admin_dash.users.scope_direct') }} {{ $t('admin_dash.users.scope_direct') }}
</option> </option>
</Select><br> </Select>
</li>
<li>
<a :href="status_details.url"> {{ $t('admin_dash.users.link_source') }} </a> <a :href="status_details.url"> {{ $t('admin_dash.users.link_source') }} </a>
</li>
</ul>
<div v-if="!json_expanded"> <div v-if="!json_expanded">
<button <button
class="button button-default btn" class="button button-default btn"

8
src/components/settings_modal/admin_tabs/users_tab.js
View file

@ -15,9 +15,8 @@ const UsersTab = {
}, },
data() { data() {
return { return {
/* filters must match the filter options below initially, or the ui is gonna have a computer moment init: false, /* avoid fetching before our filters got initialized */
* no, i won't fix this /* adjust filters_... options here, mounted() will adjust the other flags accordingly */
* */
filters_origin: 'local', filters_origin: 'local',
filters_activity: 'all', filters_activity: 'all',
filters_permission: 'all', filters_permission: 'all',
@ -104,6 +103,7 @@ const UsersTab = {
this.reset() this.reset()
}, },
fetch_page (store, opts) { fetch_page (store, opts) {
if(!this.init) return new Promise(() => [])
const users = store.dispatch('fetchAdminUsers', { ...opts, ...{ const users = store.dispatch('fetchAdminUsers', { ...opts, ...{
query: this.filters_query, query: this.filters_query,
filters: this.filters, filters: this.filters,
@ -134,6 +134,8 @@ const UsersTab = {
this.update_origin(this.filters_origin) this.update_origin(this.filters_origin)
this.update_activity(this.filters_activity) this.update_activity(this.filters_activity)
this.update_permission(this.filters_permission) this.update_permission(this.filters_permission)
this.init = true
this.reset()
} }
} }

3
src/i18n/en.json
View file

@ -1187,7 +1187,8 @@
"title_database": "Database", "title_database": "Database",
"title_details": "Details", "title_details": "Details",
"title_filter_user_search": "Filter User Search", "title_filter_user_search": "Filter User Search",
"title_users": "Users" "title_users": "Users",
"user_has_no_posts": "User has no posts"
}, },
"limits": { "limits": {
"arbitrary_limits": "Arbitrary limits", "arbitrary_limits": "Arbitrary limits",