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

i changed my mind, fetch logic does belong in <List>

Browse source
This commit is contained in:
Henry Jameson 2026-06-08 14:24:18 +03:00
commit 4a0be19607
9 changed files with 77 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/components/list/list.js
View file

@ -1,3 +1,5 @@
import { isEmpty } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue'
const List = {
@ -6,21 +8,13 @@ const List = {
type: Boolean,
default: false,
},
items: {
type: Array,
default: [],
},
fetchFunction: {
type: Function,
default: null,
},
itemsFunction: {
type: Function,
default: null,
},
getKey: {
type: Function,
default: (item) => item.id,
default: (item) => item,
},
getClass: {
type: Function,
@ -38,16 +32,8 @@ const List = {
type: Boolean,
default: false,
},
loading: {
type: Boolean,
default: true,
},
bottomedOut: {
type: Boolean,
default: false,
},
error: {
type: String,
externalItems: {
type: Array,
default: null,
},
},
@ -57,25 +43,34 @@ const List = {
},
data() {
return {
selected: [],
items: [],
selected: new Set([]),
loading: false,
bottomedOut: true,
error: null,
page: 1,
total: null,
}
},
computed: {
allKeys() {
return this.items.map(this.getKey)
return new Set(this.finalItems.map(this.getKey))
},
filteredSelected() {
return this.allKeys.filter((key) => this.selected.indexOf(key) !== -1)
return [ ...this.allKeys.values().filter((key) => this.selected.has(key))]
},
allSelected() {
return this.filteredSelected.length === this.items.length
return this.selected.size === this.finalItems.length
},
noneSelected() {
return this.filteredSelected.length === 0
return this.selected.size === 0
},
someSelected() {
return !this.allSelected && !this.noneSelected
},
finalItems() {
return this.externalItems || this.items
}
},
created() {
window.addEventListener('scroll', this.scrollLoad)
@ -89,7 +84,32 @@ const List = {
},
methods: {
fetchEntries() {
this.$emit('fetchRequested')
if (this.loading) return
this.loading = true
this.error = null
this.fetchFunction(this.page)
.then((result) => {
this.loading = false
this.bottomedOut = isEmpty(result.items)
if (this.externalItems) return
this.page += 1
this.total = result.count
this.items.push(...result.items)
})
.catch((error) => {
this.loading = false
this.error = error
})
},
reset() {
this.items = []
this.page = 1
this.total = null
this.error = null
this.loading = false
this.fetchEntries()
},
scrollLoad(e) {
if (this.fetchFunction) {
@ -111,18 +131,18 @@ const List = {
const oldChecked = this.isSelected(key)
if (checked !== oldChecked) {
if (checked) {
this.selected.push(key)
this.selected.add(key)
} else {
this.selected.splice(this.selected.indexOf(key), 1)
this.selected.delete(key)
}
}
this.$emit('selected', this.selected)
},
toggleAll(value) {
if (value) {
this.selected = this.allKeys.slice(0)
this.selected = new Set([...this.allKeys])
} else {
this.selected = []
this.selected = new Set([])
}
this.$emit('selected', this.selected)
},

4
src/components/list/list.vue
View file

@ -28,7 +28,7 @@
role="list"
>
<div
v-for="item in items"
v-for="item in finalItems"
:key="getKey(item)"
class="list-item"
:class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
@ -50,7 +50,7 @@
/>
</div>
<div
v-if="items.length === 0 && !!$slots.empty"
v-if="finalItems.length === 0 && !!$slots.empty"
class="list-empty-content faint"
>
<slot name="empty" />

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

@ -2,7 +2,7 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
import GenericConfirm from 'src/components/confirm_modal/generic_confirm.vue'
import TextConfirm from 'src/components/confirm_modal/text_confirm.vue'
import Modal from 'src/components/modal/modal.vue'
import PageList from 'src/components/page_list/page_list.vue'
import List from 'src/components/list/list.vue'
import Popover from 'src/components/popover/popover.vue'
import Select from 'src/components/select/select.vue'
import AdminStatusCard from 'src/components/settings_modal/admin_tabs/admin_status_card.vue'
@ -132,7 +132,7 @@ const AdminCard = {
components: {
BasicUserCard,
Checkbox,
PageList,
List,
AdminStatusCard,
Modal,
Popover,

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

@ -28,12 +28,6 @@ const UsersTab = {
filtersName: '',
filtersEmail: '',
expandedUser: null,
loading: false,
error: null,
bottomedOut: false,
users: [],
page: 1,
total: null,
}
},
computed: {
@ -118,29 +112,14 @@ const UsersTab = {
GenericConfirm,
},
methods: {
fetchPage() {
if (this.loading) return
this.loading = true
this.error = null
this.$store
fetchUsers(page) {
console.log(page)
return this.$store
.dispatch('fetchAdminUsers', {
...this.fetchOptions,
page: this.page,
})
.then((result) => {
console.log('RESULT', result)
this.loading = false
this.bottomedOut = isEmpty(result.users)
this.page += 1
this.total = result.count
this.users.push(...result.users)
})
.catch((error) => {
this.loading = false
this.error = error
page,
})
.then(({ count, users }) => ({ count, items: users }))
},
/**
* show the confirmation box for bulk actions.
@ -170,9 +149,7 @@ const UsersTab = {
},
watch: {
fetchOptions () {
this.page = 1
this.users = []
this.fetchPage()
this.$refs.usersList.reset()
}
}
}

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

@ -121,12 +121,8 @@
</div>
</div>
<List
:get-key="i => i"
:items="users"
:loading="loading"
:error="error"
:bottomed-out="bottomedOut"
@fetch-requested="fetchPage"
ref="usersList"
:fetch-function="fetchUsers"
selectable
scrollable
>

20
src/components/settings_modal/tabs/mutes_and_blocks_tab.js
View file

@ -7,7 +7,6 @@ import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue
import List from 'src/components/list/list.vue'
import MuteCard from 'src/components/mute_card/mute_card.vue'
import ProgressButton from 'src/components/progress_button/progress_button.vue'
import SelectableList from 'src/components/selectable_list/selectable_list.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import { useInstanceStore } from 'src/stores/instance.js'
@ -61,24 +60,7 @@ const MutesAndBlocks = {
},
methods: {
fetchItems(group) {
if (this[group + 'Loading']) return
const capGroup = group[0].toUpperCase() + group.slice(1)
this[group + 'Loading'] = true
this[group + 'Error'] = null
this.$store
.dispatch('fetch' + capGroup, this.userId)
.then((newEntries) => {
this[group + 'Loading'] = false
this[group + 'BottomedOut'] = isEmpty(newEntries)
return newEntries
})
.catch((error) => {
this[group + 'Loading'] = false
this[group + 'Error'] = error
})
return () => this.$store.dispatch('fetch' + group, this.userId)
},
importFollows(file) {
return this.$store.state.api.backendInteractor

21
src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
View file

@ -22,11 +22,8 @@
</div>
<List
:get-key="i => i"
:items="blocks"
:loading="blocksLoading"
:error="blocksError"
:bottomed-out="blocksBottomedOut"
@fetch-requested="fetchItems('blocks')"
:external-items="blocks"
:fetch-function="fetchItems('Blocks')"
scrollable
selectable
>
@ -79,11 +76,8 @@
</div>
<List
:get-key="i => i"
:items="mutes"
:loading="mutesLoading"
:error="mutesError"
:bottomed-out="mutesBottomedOut"
@fetch-requested="fetchItems('mutes')"
:external-items="mutes"
:fetch-function="fetchItems('Mutes')"
scrollable
selectable
>
@ -136,11 +130,8 @@
</div>
<List
:get-key="i => i"
:items="domains"
:loading="domainsLoading"
:error="domainsError"
:bottomed-out="domainsBottomedOut"
@fetch-requested="fetchItems('domainMutes')"
:external-items="domains"
:fetch-function="fetchItems('DomainMutes')"
scrollable
selectable
>

30
src/components/user_profile/user_profile.js
View file

@ -1,4 +1,4 @@
import { get, isEmpty } from 'lodash'
import { get } from 'lodash'
import { mapState } from 'pinia'
import Conversation from 'src/components/conversation/conversation.vue'
@ -27,12 +27,6 @@ const UserProfile = {
userId: null,
tab: defaultTabKey,
footerRef: null,
friendsLoading: false,
friendsError: null,
friendsBottomedOut: false,
followersLoading: false,
followersError: null,
followersBottomedOut: false,
}
},
created() {
@ -109,24 +103,10 @@ const UserProfile = {
this.footerRef = el
},
fetchUsers(group) {
if (this[group + 'Loading']) return
const capGroup = group[0].toUpperCase() + group.slice(1)
this[group + 'Loading'] = true
this[group + 'Error'] = null
this.$store
.dispatch('fetch' + capGroup, this.userId)
.then((newEntries) => {
this[group + 'Loading'] = false
this[group + 'BottomedOut'] = isEmpty(newEntries)
return newEntries
})
.catch((error) => {
this[group + 'Loading'] = false
this[group + 'Error'] = error
})
return () => this
.$store
.dispatch('fetch' + group, this.userId)
.then((result) => ({ items: result }))
},
load(userNameOrId) {
const startFetchingTimeline = (timeline, userId) => {

14
src/components/user_profile/user_profile.vue
View file

@ -40,11 +40,8 @@
:disabled="!user.friends_count"
>
<List
:items="friends"
:loading="friendsLoading"
:error="friendsError"
:bottomed-out="friendsBottomedOut"
@fetch-requested="fetchUsers('friends')"
:fetch-function="fetchUsers('Friends')"
:external-items="friends"
>
<template #item="{item}">
<FollowCard :user="item" />
@ -59,11 +56,8 @@
:disabled="!user.followers_count"
>
<List
:items="followers"
:loading="followersLoading"
:error="followersError"
:bottomed-out="followersBottomedOut"
@fetch-requested="fetchUsers('followers')"
:fetch-function="fetchUsers('Followers')"
:external-items="followers"
>
<template #item="{item}">
<FollowCard