mirror of
https://git.pleroma.social/sjw/pleroma-fe.git
synced 2024-12-23 06:05:44 +01:00
Lists implementation
This commit is contained in:
parent
610720f164
commit
171f6f0894
@ -20,6 +20,9 @@ import ShoutPanel from 'components/shout_panel/shout_panel.vue'
|
||||
import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
|
||||
import About from 'components/about/about.vue'
|
||||
import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
|
||||
import Lists from 'components/lists/lists.vue'
|
||||
import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
|
||||
import ListsEdit from 'components/lists_edit/lists_edit.vue'
|
||||
|
||||
export default (store) => {
|
||||
const validateAuthenticatedRoute = (to, from, next) => {
|
||||
@ -72,7 +75,10 @@ export default (store) => {
|
||||
{ name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
|
||||
{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
|
||||
{ name: 'about', path: '/about', component: About },
|
||||
{ name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }
|
||||
{ name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile },
|
||||
{ name: 'lists', path: '/lists', component: Lists },
|
||||
{ name: 'list-timeline', path: '/lists/:id', component: ListsTimeline },
|
||||
{ name: 'list-edit', path: '/lists/:id/edit', component: ListsEdit }
|
||||
]
|
||||
|
||||
if (store.state.instance.pleromaChatMessagesAvailable) {
|
||||
|
32
src/components/lists/lists.js
Normal file
32
src/components/lists/lists.js
Normal file
@ -0,0 +1,32 @@
|
||||
import ListsCard from '../lists_card/lists_card.vue'
|
||||
import ListsNew from '../lists_new/lists_new.vue'
|
||||
|
||||
const Lists = {
|
||||
data () {
|
||||
return {
|
||||
isNew: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ListsCard,
|
||||
ListsNew
|
||||
},
|
||||
created () {
|
||||
this.$store.dispatch('startFetchingLists')
|
||||
},
|
||||
computed: {
|
||||
lists () {
|
||||
return this.$store.state.lists.allLists
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancelNewList () {
|
||||
this.isNew = false
|
||||
},
|
||||
newList () {
|
||||
this.isNew = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Lists
|
31
src/components/lists/lists.vue
Normal file
31
src/components/lists/lists.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div v-if="isNew">
|
||||
<ListsNew @cancel="cancelNewList" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="settings panel panel-default"
|
||||
>
|
||||
<div class="panel-heading">
|
||||
<div class="title">
|
||||
{{ $t('lists.lists') }}
|
||||
</div>
|
||||
<button
|
||||
class="button-default"
|
||||
@click="newList"
|
||||
>
|
||||
{{ $t("lists.new") }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ListsCard
|
||||
v-for="list in lists.slice().reverse()"
|
||||
:key="list"
|
||||
:list="list"
|
||||
class="list-item"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./lists.js"></script>
|
16
src/components/lists_card/lists_card.js
Normal file
16
src/components/lists_card/lists_card.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faEllipsisH
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faEllipsisH
|
||||
)
|
||||
|
||||
const ListsCard = {
|
||||
props: [
|
||||
'list'
|
||||
]
|
||||
}
|
||||
|
||||
export default ListsCard
|
51
src/components/lists_card/lists_card.vue
Normal file
51
src/components/lists_card/lists_card.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="list-card">
|
||||
<router-link
|
||||
:to="{ name: 'list-timeline', params: { id: list.id } }"
|
||||
class="list-name"
|
||||
>
|
||||
{{ list.title }}
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'list-edit', params: { id: list.id } }"
|
||||
class="button-list-edit"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="ellipsis-h"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./lists_card.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.list-card {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.list-name,
|
||||
.button-list-edit {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
color: $fallback--link;
|
||||
color: var(--link, $fallback--link);
|
||||
|
||||
&:hover {
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||
color: $fallback--link;
|
||||
color: var(--selectedMenuText, $fallback--link);
|
||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||
}
|
||||
}
|
||||
|
||||
.list-name {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
91
src/components/lists_edit/lists_edit.js
Normal file
91
src/components/lists_edit/lists_edit.js
Normal file
@ -0,0 +1,91 @@
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
|
||||
import ListsUserSearch from '../lists_user_search/lists_user_search.vue'
|
||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
)
|
||||
|
||||
const ListsNew = {
|
||||
components: {
|
||||
BasicUserCard,
|
||||
UserAvatar,
|
||||
ListsUserSearch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '',
|
||||
userIds: [],
|
||||
selectedUserIds: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$store.dispatch('fetchList', { id: this.id })
|
||||
.then(() => { this.title = this.findListTitle(this.id) })
|
||||
this.$store.dispatch('fetchListAccounts', { id: this.id })
|
||||
.then(() => {
|
||||
this.selectedUserIds = this.findListAccounts(this.id)
|
||||
this.selectedUserIds.forEach(userId => {
|
||||
this.$store.dispatch('fetchUserIfMissing', userId)
|
||||
})
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
id () {
|
||||
return this.$route.params.id
|
||||
},
|
||||
users () {
|
||||
return this.userIds.map(userId => this.findUser(userId))
|
||||
},
|
||||
selectedUsers () {
|
||||
return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user)
|
||||
},
|
||||
...mapState({
|
||||
currentUser: state => state.users.currentUser
|
||||
}),
|
||||
...mapGetters(['findUser', 'findListTitle', 'findListAccounts'])
|
||||
},
|
||||
methods: {
|
||||
onInput () {
|
||||
this.search(this.query)
|
||||
},
|
||||
selectUser (user) {
|
||||
if (this.selectedUserIds.includes(user.id)) {
|
||||
this.removeUser(user.id)
|
||||
} else {
|
||||
this.addUser(user)
|
||||
}
|
||||
},
|
||||
isSelected (user) {
|
||||
return this.selectedUserIds.includes(user.id)
|
||||
},
|
||||
addUser (user) {
|
||||
this.selectedUserIds.push(user.id)
|
||||
},
|
||||
removeUser (userId) {
|
||||
this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
|
||||
},
|
||||
onResults (results) {
|
||||
this.userIds = results
|
||||
},
|
||||
updateList () {
|
||||
this.$store.dispatch('setList', { id: this.id, title: this.title })
|
||||
this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds })
|
||||
|
||||
this.$router.push({ name: 'list-timeline', params: { id: this.id } })
|
||||
},
|
||||
deleteList () {
|
||||
this.$store.dispatch('deleteList', { id: this.id })
|
||||
this.$router.push({ name: 'lists' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ListsNew
|
108
src/components/lists_edit/lists_edit.vue
Normal file
108
src/components/lists_edit/lists_edit.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="panel-default panel list-edit">
|
||||
<div
|
||||
ref="header"
|
||||
class="panel-heading"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled go-back-button"
|
||||
@click="$router.back"
|
||||
>
|
||||
<FAIcon
|
||||
size="lg"
|
||||
icon="chevron-left"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input
|
||||
ref="title"
|
||||
v-model="title"
|
||||
:placeholder="$t('lists.title')"
|
||||
>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div
|
||||
v-for="user in selectedUsers"
|
||||
:key="user.id"
|
||||
class="member"
|
||||
>
|
||||
<BasicUserCard
|
||||
:user="user"
|
||||
:class="isSelected(user) ? 'selected' : ''"
|
||||
@click.capture.prevent="selectUser(user)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ListsUserSearch @results="onResults" />
|
||||
<div class="member-list">
|
||||
<div
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
class="member"
|
||||
>
|
||||
<BasicUserCard
|
||||
:user="user"
|
||||
:class="isSelected(user) ? 'selected' : ''"
|
||||
@click.capture.prevent="selectUser(user)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
:disabled="title && title.length === 0"
|
||||
class="btn button-default"
|
||||
@click="updateList"
|
||||
>
|
||||
{{ $t('lists.save') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn button-default"
|
||||
@click="deleteList"
|
||||
>
|
||||
{{ $t('lists.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./lists_edit.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.list-edit {
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
margin: 0.7em 0.5em 0.7em 0.5em;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
.member-list {
|
||||
padding-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.basic-user-card:hover,
|
||||
.basic-user-card.selected {
|
||||
cursor: pointer;
|
||||
background-color: var(--selectedPost, $fallback--lightBg);
|
||||
}
|
||||
|
||||
.go-back-button {
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
height: 100%;
|
||||
align-self: start;
|
||||
width: var(--__panel-heading-height-inner);
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
33
src/components/lists_menu/lists_menu_content.js
Normal file
33
src/components/lists_menu/lists_menu_content.js
Normal file
@ -0,0 +1,33 @@
|
||||
import { mapState } from 'vuex'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faUsers,
|
||||
faGlobe,
|
||||
faBookmark,
|
||||
faEnvelope,
|
||||
faHome
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faUsers,
|
||||
faGlobe,
|
||||
faBookmark,
|
||||
faEnvelope,
|
||||
faHome
|
||||
)
|
||||
|
||||
const ListsMenuContent = {
|
||||
created () {
|
||||
this.$store.dispatch('startFetchingLists')
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
lists: state => state.lists.allLists,
|
||||
currentUser: state => state.users.currentUser,
|
||||
privateMode: state => state.instance.private,
|
||||
federating: state => state.instance.federating
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default ListsMenuContent
|
17
src/components/lists_menu/lists_menu_content.vue
Normal file
17
src/components/lists_menu/lists_menu_content.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li
|
||||
v-for="list in lists.slice().reverse()"
|
||||
:key="list.id"
|
||||
>
|
||||
<router-link
|
||||
class="menu-item"
|
||||
:to="{ name: 'list-timeline', params: { id: list.id } }"
|
||||
>
|
||||
{{ list.title }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script src="./lists_menu_content.js"></script>
|
79
src/components/lists_new/lists_new.js
Normal file
79
src/components/lists_new/lists_new.js
Normal file
@ -0,0 +1,79 @@
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
|
||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
import ListsUserSearch from '../lists_user_search/lists_user_search.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
)
|
||||
|
||||
const ListsNew = {
|
||||
components: {
|
||||
BasicUserCard,
|
||||
UserAvatar,
|
||||
ListsUserSearch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '',
|
||||
userIds: [],
|
||||
selectedUserIds: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
users () {
|
||||
return this.userIds.map(userId => this.findUser(userId))
|
||||
},
|
||||
selectedUsers () {
|
||||
return this.selectedUserIds.map(userId => this.findUser(userId))
|
||||
},
|
||||
...mapState({
|
||||
currentUser: state => state.users.currentUser
|
||||
}),
|
||||
...mapGetters(['findUser'])
|
||||
},
|
||||
methods: {
|
||||
goBack () {
|
||||
this.$emit('cancel')
|
||||
},
|
||||
onInput () {
|
||||
this.search(this.query)
|
||||
},
|
||||
selectUser (user) {
|
||||
if (this.selectedUserIds.includes(user.id)) {
|
||||
this.removeUser(user.id)
|
||||
} else {
|
||||
this.addUser(user)
|
||||
}
|
||||
},
|
||||
isSelected (user) {
|
||||
return this.selectedUserIds.includes(user.id)
|
||||
},
|
||||
addUser (user) {
|
||||
this.selectedUserIds.push(user.id)
|
||||
},
|
||||
removeUser (userId) {
|
||||
this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
|
||||
},
|
||||
onResults (results) {
|
||||
this.userIds = results
|
||||
},
|
||||
createList () {
|
||||
// the API has two different endpoints for "creating a list with a name"
|
||||
// and "updating the accounts on the list".
|
||||
this.$store.dispatch('createList', { title: this.title })
|
||||
.then((list) => {
|
||||
this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
|
||||
this.$router.push({ name: 'list-timeline', params: { id: list.id } })
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ListsNew
|
95
src/components/lists_new/lists_new.vue
Normal file
95
src/components/lists_new/lists_new.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="panel-default panel list-new">
|
||||
<div
|
||||
ref="header"
|
||||
class="panel-heading"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled go-back-button"
|
||||
@click="goBack"
|
||||
>
|
||||
<FAIcon
|
||||
size="lg"
|
||||
icon="chevron-left"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input
|
||||
ref="title"
|
||||
v-model="title"
|
||||
:placeholder="$t('lists.title')"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="member-list">
|
||||
<div
|
||||
v-for="user in selectedUsers"
|
||||
:key="user.id"
|
||||
class="member"
|
||||
>
|
||||
<BasicUserCard
|
||||
:user="user"
|
||||
:class="isSelected(user) ? 'selected' : ''"
|
||||
@click.capture.prevent="selectUser(user)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ListsUserSearch
|
||||
@results="onResults"
|
||||
/>
|
||||
<div
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
class="member"
|
||||
>
|
||||
<BasicUserCard
|
||||
:user="user"
|
||||
:class="isSelected(user) ? 'selected' : ''"
|
||||
@click.capture.prevent="selectUser(user)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
:disabled="title && title.length === 0"
|
||||
class="btn button-default"
|
||||
@click="createList"
|
||||
>
|
||||
{{ $t('lists.create') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./lists_new.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.list-new {
|
||||
.search-icon {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
.member-list {
|
||||
padding-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.basic-user-card:hover,
|
||||
.basic-user-card.selected {
|
||||
cursor: pointer;
|
||||
background-color: var(--selectedPost, $fallback--lightBg);
|
||||
}
|
||||
|
||||
.go-back-button {
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
height: 100%;
|
||||
align-self: start;
|
||||
width: var(--__panel-heading-height-inner);
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
36
src/components/lists_timeline/lists_timeline.js
Normal file
36
src/components/lists_timeline/lists_timeline.js
Normal file
@ -0,0 +1,36 @@
|
||||
import Timeline from '../timeline/timeline.vue'
|
||||
const ListsTimeline = {
|
||||
data () {
|
||||
return {
|
||||
listId: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Timeline
|
||||
},
|
||||
computed: {
|
||||
timeline () { return this.$store.state.statuses.timelines.list }
|
||||
},
|
||||
watch: {
|
||||
$route: function (route) {
|
||||
if (route.name === 'list-timeline' && route.params.id !== this.listId) {
|
||||
this.listId = route.params.id
|
||||
this.$store.dispatch('stopFetchingTimeline', 'list')
|
||||
this.$store.commit('clearTimeline', { timeline: 'list' })
|
||||
this.$store.dispatch('fetchList', { id: this.listId })
|
||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.listId = this.$route.params.id
|
||||
this.$store.dispatch('fetchList', { id: this.listId })
|
||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
|
||||
},
|
||||
unmounted () {
|
||||
this.$store.dispatch('stopFetchingTimeline', 'list')
|
||||
this.$store.commit('clearTimeline', { timeline: 'list' })
|
||||
}
|
||||
}
|
||||
|
||||
export default ListsTimeline
|
10
src/components/lists_timeline/lists_timeline.vue
Normal file
10
src/components/lists_timeline/lists_timeline.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<Timeline
|
||||
title="list.name"
|
||||
:timeline="timeline"
|
||||
:list-id="listId"
|
||||
timeline-name="list"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script src="./lists_timeline.js"></script>
|
46
src/components/lists_user_search/lists_user_search.js
Normal file
46
src/components/lists_user_search/lists_user_search.js
Normal file
@ -0,0 +1,46 @@
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { debounce } from 'lodash'
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
|
||||
library.add(
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
)
|
||||
|
||||
const ListsUserSearch = {
|
||||
components: {
|
||||
Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
query: '',
|
||||
followingOnly: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInput: debounce(function () {
|
||||
this.search(this.query)
|
||||
}, 2000),
|
||||
search (query) {
|
||||
if (!query) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
this.userIds = []
|
||||
this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: this.followingOnly })
|
||||
.then(data => {
|
||||
this.loading = false
|
||||
this.$emit('results', data.accounts.map(a => a.id))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ListsUserSearch
|
45
src/components/lists_user_search/lists_user_search.vue
Normal file
45
src/components/lists_user_search/lists_user_search.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="input-wrap">
|
||||
<div class="input-search">
|
||||
<FAIcon
|
||||
class="search-icon fa-scale-110 fa-old-padding"
|
||||
icon="search"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
ref="search"
|
||||
v-model="query"
|
||||
:placeholder="$t('lists.search')"
|
||||
@input="onInput"
|
||||
>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<Checkbox
|
||||
v-model="followingOnly"
|
||||
@change="onInput"
|
||||
>
|
||||
{{ $t('lists.following_only') }}
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./lists_user_search.js"></script>
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
margin: 0.7em 0.5em 0.7em 0.5em;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
</style>
|
@ -1,4 +1,5 @@
|
||||
import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
|
||||
import ListsMenuContent from '../lists_menu/lists_menu_content.vue'
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
@ -12,7 +13,8 @@ import {
|
||||
faComments,
|
||||
faBell,
|
||||
faInfoCircle,
|
||||
faStream
|
||||
faStream,
|
||||
faList
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
@ -25,7 +27,8 @@ library.add(
|
||||
faComments,
|
||||
faBell,
|
||||
faInfoCircle,
|
||||
faStream
|
||||
faStream,
|
||||
faList
|
||||
)
|
||||
|
||||
const NavPanel = {
|
||||
@ -35,19 +38,27 @@ const NavPanel = {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
TimelineMenuContent
|
||||
TimelineMenuContent,
|
||||
ListsMenuContent
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showTimelines: false
|
||||
showTimelines: false,
|
||||
showLists: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleTimelines () {
|
||||
this.showTimelines = !this.showTimelines
|
||||
},
|
||||
toggleLists () {
|
||||
this.showLists = !this.showLists
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
listsNavigation () {
|
||||
return this.$store.getters.mergedConfig.listsNavigation
|
||||
},
|
||||
...mapState({
|
||||
currentUser: state => state.users.currentUser,
|
||||
followRequestCount: state => state.api.followRequests.length,
|
||||
|
@ -25,6 +25,51 @@
|
||||
<TimelineMenuContent class="timelines" />
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="currentUser && listsNavigation">
|
||||
<button
|
||||
class="button-unstyled menu-item"
|
||||
@click="toggleLists"
|
||||
>
|
||||
<router-link
|
||||
:to="{ name: 'lists' }"
|
||||
@click.stop
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
icon="list"
|
||||
/>{{ $t("nav.lists") }}
|
||||
</router-link>
|
||||
<FAIcon
|
||||
class="timelines-chevron"
|
||||
fixed-width
|
||||
:icon="showLists ? 'chevron-up' : 'chevron-down'"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
v-show="showLists"
|
||||
class="timelines-background"
|
||||
>
|
||||
<ListsMenuContent class="timelines" />
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="currentUser && !listsNavigation">
|
||||
<router-link
|
||||
:to="{ name: 'lists' }"
|
||||
@click.stop
|
||||
>
|
||||
<button
|
||||
class="button-unstyled menu-item"
|
||||
@click="toggleLists"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
icon="list"
|
||||
/>{{ $t("nav.lists") }}
|
||||
</button>
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="currentUser">
|
||||
<router-link
|
||||
class="menu-item"
|
||||
|
@ -124,6 +124,53 @@
|
||||
{{ $t('settings.hide_shoutbox') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting path="listsNavigation">
|
||||
{{ $t('settings.lists_navigation') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<h3>{{ $t('settings.columns') }}</h3>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting path="disableStickyHeaders">
|
||||
{{ $t('settings.disable_sticky_headers') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting path="showScrollbars">
|
||||
{{ $t('settings.show_scrollbars') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting path="sidebarRight">
|
||||
{{ $t('settings.right_sidebar') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<ChoiceSetting
|
||||
v-if="user"
|
||||
id="thirdColumnMode"
|
||||
path="thirdColumnMode"
|
||||
:options="thirdColumnModeOptions"
|
||||
>
|
||||
{{ $t('settings.third_column_mode') }}
|
||||
</ChoiceSetting>
|
||||
</li>
|
||||
<li v-if="expertLevel > 0">
|
||||
{{ $t('settings.column_sizes') }}
|
||||
<div class="column-settings">
|
||||
<SizeSetting
|
||||
v-for="column in columns"
|
||||
:key="column"
|
||||
:path="column + 'ColumnWidth'"
|
||||
:units="horizontalUnits"
|
||||
expert="1"
|
||||
>
|
||||
{{ $t('settings.column_sizes_' + column) }}
|
||||
</SizeSetting>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
|
@ -14,7 +14,8 @@ import {
|
||||
faSearch,
|
||||
faTachometerAlt,
|
||||
faCog,
|
||||
faInfoCircle
|
||||
faInfoCircle,
|
||||
faList
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
@ -28,7 +29,8 @@ library.add(
|
||||
faSearch,
|
||||
faTachometerAlt,
|
||||
faCog,
|
||||
faInfoCircle
|
||||
faInfoCircle,
|
||||
faList
|
||||
)
|
||||
|
||||
const SideDrawer = {
|
||||
|
@ -55,6 +55,18 @@
|
||||
/> {{ $t("nav.timelines") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="currentUser"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'lists' }">
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="list"
|
||||
/> {{ $t("nav.lists") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="currentUser && pleromaChatMessagesAvailable"
|
||||
@click="toggleDrawer"
|
||||
|
@ -18,6 +18,7 @@ const Timeline = {
|
||||
'timelineName',
|
||||
'title',
|
||||
'userId',
|
||||
'listId',
|
||||
'tag',
|
||||
'embedded',
|
||||
'count',
|
||||
@ -101,6 +102,7 @@ const Timeline = {
|
||||
timeline: this.timelineName,
|
||||
showImmediately,
|
||||
userId: this.userId,
|
||||
listId: this.listId,
|
||||
tag: this.tag
|
||||
})
|
||||
},
|
||||
@ -156,6 +158,7 @@ const Timeline = {
|
||||
older: true,
|
||||
showImmediately: true,
|
||||
userId: this.userId,
|
||||
listId: this.listId,
|
||||
tag: this.tag
|
||||
}).then(({ statuses }) => {
|
||||
if (statuses && statuses.length === 0) {
|
||||
|
@ -58,6 +58,9 @@ const TimelineMenu = {
|
||||
if (route === 'tag-timeline') {
|
||||
return '#' + this.$route.params.tag
|
||||
}
|
||||
if (route === 'list-timeline') {
|
||||
return this.$store.getters.findListTitle(this.$route.params.id)
|
||||
}
|
||||
const i18nkey = timelineNames()[this.$route.name]
|
||||
return i18nkey ? this.$t(i18nkey) : route
|
||||
}
|
||||
|
@ -146,7 +146,8 @@
|
||||
"who_to_follow": "Who to follow",
|
||||
"preferences": "Preferences",
|
||||
"timelines": "Timelines",
|
||||
"chats": "Chats"
|
||||
"chats": "Chats",
|
||||
"lists": "Lists"
|
||||
},
|
||||
"notifications": {
|
||||
"broken_favorite": "Unknown status, searching for it…",
|
||||
@ -298,6 +299,7 @@
|
||||
"desc": "To enable two-factor authentication, enter the code from your two-factor app:"
|
||||
}
|
||||
},
|
||||
"lists_navigation": "Show lists in navigation",
|
||||
"allow_following_move": "Allow auto-follow when following account moves",
|
||||
"attachmentRadius": "Attachments",
|
||||
"attachments": "Attachments",
|
||||
@ -948,6 +950,16 @@
|
||||
"error_sending_message": "Something went wrong when sending the message.",
|
||||
"empty_chat_list_placeholder": "You don't have any chats yet. Start a new chat!"
|
||||
},
|
||||
"lists": {
|
||||
"lists": "Lists",
|
||||
"new": "New List",
|
||||
"title": "List title",
|
||||
"search": "Search users",
|
||||
"create": "Create",
|
||||
"save": "Save changes",
|
||||
"delete": "Delete list",
|
||||
"following_only": "Limit to Following"
|
||||
},
|
||||
"file_type": {
|
||||
"audio": "Audio",
|
||||
"video": "Video",
|
||||
|
@ -6,6 +6,7 @@ import './lib/event_target_polyfill.js'
|
||||
import interfaceModule from './modules/interface.js'
|
||||
import instanceModule from './modules/instance.js'
|
||||
import statusesModule from './modules/statuses.js'
|
||||
import listsModule from './modules/lists.js'
|
||||
import usersModule from './modules/users.js'
|
||||
import apiModule from './modules/api.js'
|
||||
import configModule from './modules/config.js'
|
||||
@ -70,6 +71,7 @@ const persistedStateOptions = {
|
||||
// TODO refactor users/statuses modules, they depend on each other
|
||||
users: usersModule,
|
||||
statuses: statusesModule,
|
||||
lists: listsModule,
|
||||
api: apiModule,
|
||||
config: configModule,
|
||||
serverSideConfig: serverSideConfigModule,
|
||||
|
@ -191,12 +191,13 @@ const api = {
|
||||
startFetchingTimeline (store, {
|
||||
timeline = 'friends',
|
||||
tag = false,
|
||||
userId = false
|
||||
userId = false,
|
||||
listId = false
|
||||
}) {
|
||||
if (store.state.fetchers[timeline]) return
|
||||
|
||||
const fetcher = store.state.backendInteractor.startFetchingTimeline({
|
||||
timeline, store, userId, tag
|
||||
timeline, store, userId, listId, tag
|
||||
})
|
||||
store.commit('addFetcher', { fetcherName: timeline, fetcher })
|
||||
},
|
||||
@ -248,6 +249,18 @@ const api = {
|
||||
store.commit('setFollowRequests', requests)
|
||||
},
|
||||
|
||||
// Lists
|
||||
startFetchingLists (store) {
|
||||
if (store.state.fetchers.lists) return
|
||||
const fetcher = store.state.backendInteractor.startFetchingLists({ store })
|
||||
store.commit('addFetcher', { fetcherName: 'lists', fetcher })
|
||||
},
|
||||
stopFetchingLists (store) {
|
||||
const fetcher = store.state.fetchers.lists
|
||||
if (!fetcher) return
|
||||
store.commit('removeFetcher', { fetcherName: 'lists', fetcher })
|
||||
},
|
||||
|
||||
// Pleroma websocket
|
||||
setWsToken (store, token) {
|
||||
store.commit('setWsToken', token)
|
||||
|
@ -83,6 +83,10 @@ export const defaultState = {
|
||||
showScrollbars: false,
|
||||
userPopoverZoom: false,
|
||||
userPopoverOverlay: true,
|
||||
sidebarColumnWidth: '25rem',
|
||||
contentColumnWidth: '45rem',
|
||||
notifsColumnWidth: '25rem',
|
||||
listsNavigation: false,
|
||||
greentext: undefined, // instance default
|
||||
useAtIcon: undefined, // instance default
|
||||
mentionLinkDisplay: undefined, // instance default
|
||||
|
94
src/modules/lists.js
Normal file
94
src/modules/lists.js
Normal file
@ -0,0 +1,94 @@
|
||||
import { remove, find } from 'lodash'
|
||||
|
||||
export const defaultState = {
|
||||
allLists: [],
|
||||
allListsObject: {}
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
setLists (state, value) {
|
||||
state.allLists = value
|
||||
},
|
||||
setList (state, { id, title }) {
|
||||
if (!state.allListsObject[id]) {
|
||||
state.allListsObject[id] = {}
|
||||
}
|
||||
state.allListsObject[id].title = title
|
||||
|
||||
if (!find(state.allLists, { id })) {
|
||||
state.allLists.push({ id, title })
|
||||
} else {
|
||||
find(state.allLists, { id }).title = title
|
||||
}
|
||||
},
|
||||
setListAccounts (state, { id, accountIds }) {
|
||||
if (!state.allListsObject[id]) {
|
||||
state.allListsObject[id] = {}
|
||||
}
|
||||
state.allListsObject[id].accountIds = accountIds
|
||||
},
|
||||
deleteList (state, { id }) {
|
||||
delete state.allListsObject[id]
|
||||
remove(state.allLists, list => list.id === id)
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
setLists ({ commit }, value) {
|
||||
commit('setLists', value)
|
||||
},
|
||||
createList ({ rootState, commit }, { title }) {
|
||||
return rootState.api.backendInteractor.createList({ title })
|
||||
.then((list) => {
|
||||
commit('setList', { id: list.id, title })
|
||||
return list
|
||||
})
|
||||
},
|
||||
fetchList ({ rootState, commit }, { id }) {
|
||||
return rootState.api.backendInteractor.getList({ id })
|
||||
.then((list) => commit('setList', { id: list.id, title: list.title }))
|
||||
},
|
||||
fetchListAccounts ({ rootState, commit }, { id }) {
|
||||
return rootState.api.backendInteractor.getListAccounts({ id })
|
||||
.then((accountIds) => commit('setListAccounts', { id, accountIds }))
|
||||
},
|
||||
setList ({ rootState, commit }, { id, title }) {
|
||||
rootState.api.backendInteractor.updateList({ id, title })
|
||||
commit('setList', { id, title })
|
||||
},
|
||||
setListAccounts ({ rootState, commit }, { id, accountIds }) {
|
||||
const saved = rootState.lists.allListsObject[id].accountIds
|
||||
const added = accountIds.filter(id => !saved.includes(id))
|
||||
const removed = saved.filter(id => !accountIds.includes(id))
|
||||
commit('setListAccounts', { id, accountIds })
|
||||
if (added.length > 0) {
|
||||
rootState.api.backendInteractor.addAccountsToList({ id, accountIds: added })
|
||||
}
|
||||
if (removed.length > 0) {
|
||||
rootState.api.backendInteractor.removeAccountsFromList({ id, accountIds: removed })
|
||||
}
|
||||
},
|
||||
deleteList ({ rootState, commit }, { id }) {
|
||||
rootState.api.backendInteractor.deleteList({ id })
|
||||
commit('deleteList', { id })
|
||||
}
|
||||
}
|
||||
|
||||
export const getters = {
|
||||
findListTitle: state => id => {
|
||||
if (!state.allListsObject[id]) return
|
||||
return state.allListsObject[id].title
|
||||
},
|
||||
findListAccounts: state => id => {
|
||||
return [...state.allListsObject[id].accountIds]
|
||||
}
|
||||
}
|
||||
|
||||
const lists = {
|
||||
state: defaultState,
|
||||
mutations,
|
||||
actions,
|
||||
getters
|
||||
}
|
||||
|
||||
export default lists
|
@ -62,7 +62,8 @@ export const defaultState = () => ({
|
||||
friends: emptyTl(),
|
||||
tag: emptyTl(),
|
||||
dms: emptyTl(),
|
||||
bookmarks: emptyTl()
|
||||
bookmarks: emptyTl(),
|
||||
list: emptyTl()
|
||||
}
|
||||
})
|
||||
|
||||
|
@ -52,6 +52,9 @@ const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
|
||||
const MASTODON_USER_URL = '/api/v1/accounts'
|
||||
const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
|
||||
const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
|
||||
const MASTODON_LIST_URL = id => `/api/v1/lists/${id}`
|
||||
const MASTODON_LIST_TIMELINE_URL = id => `/api/v1/timelines/list/${id}`
|
||||
const MASTODON_LIST_ACCOUNTS_URL = id => `/api/v1/lists/${id}/accounts`
|
||||
const MASTODON_TAG_TIMELINE_URL = tag => `/api/v1/timelines/tag/${tag}`
|
||||
const MASTODON_BOOKMARK_TIMELINE_URL = '/api/v1/bookmarks'
|
||||
const MASTODON_USER_BLOCKS_URL = '/api/v1/blocks/'
|
||||
@ -79,6 +82,7 @@ const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute`
|
||||
const MASTODON_SEARCH_2 = '/api/v2/search'
|
||||
const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
|
||||
const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
|
||||
const MASTODON_LISTS_URL = '/api/v1/lists'
|
||||
const MASTODON_STREAMING = '/api/v1/streaming'
|
||||
const MASTODON_KNOWN_DOMAIN_LIST_URL = '/api/v1/instance/peers'
|
||||
const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/reactions`
|
||||
@ -385,6 +389,81 @@ const fetchFollowRequests = ({ credentials }) => {
|
||||
.then((data) => data.map(parseUser))
|
||||
}
|
||||
|
||||
const fetchLists = ({ credentials }) => {
|
||||
const url = MASTODON_LISTS_URL
|
||||
return fetch(url, { headers: authHeaders(credentials) })
|
||||
.then((data) => data.json())
|
||||
}
|
||||
|
||||
const createList = ({ title, credentials }) => {
|
||||
const url = MASTODON_LISTS_URL
|
||||
const headers = authHeaders(credentials)
|
||||
headers['Content-Type'] = 'application/json'
|
||||
|
||||
return fetch(url, {
|
||||
headers,
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ title })
|
||||
}).then((data) => data.json())
|
||||
}
|
||||
|
||||
const getList = ({ id, credentials }) => {
|
||||
const url = MASTODON_LIST_URL(id)
|
||||
return fetch(url, { headers: authHeaders(credentials) })
|
||||
.then((data) => data.json())
|
||||
}
|
||||
|
||||
const updateList = ({ id, title, credentials }) => {
|
||||
const url = MASTODON_LIST_URL(id)
|
||||
const headers = authHeaders(credentials)
|
||||
headers['Content-Type'] = 'application/json'
|
||||
|
||||
return fetch(url, {
|
||||
headers,
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ title })
|
||||
})
|
||||
}
|
||||
|
||||
const getListAccounts = ({ id, credentials }) => {
|
||||
const url = MASTODON_LIST_ACCOUNTS_URL(id)
|
||||
return fetch(url, { headers: authHeaders(credentials) })
|
||||
.then((data) => data.json())
|
||||
.then((data) => data.map(({ id }) => id))
|
||||
}
|
||||
|
||||
const addAccountsToList = ({ id, accountIds, credentials }) => {
|
||||
const url = MASTODON_LIST_ACCOUNTS_URL(id)
|
||||
const headers = authHeaders(credentials)
|
||||
headers['Content-Type'] = 'application/json'
|
||||
|
||||
return fetch(url, {
|
||||
headers,
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ account_ids: accountIds })
|
||||
})
|
||||
}
|
||||
|
||||
const removeAccountsFromList = ({ id, accountIds, credentials }) => {
|
||||
const url = MASTODON_LIST_ACCOUNTS_URL(id)
|
||||
const headers = authHeaders(credentials)
|
||||
headers['Content-Type'] = 'application/json'
|
||||
|
||||
return fetch(url, {
|
||||
headers,
|
||||
method: 'DELETE',
|
||||
body: JSON.stringify({ account_ids: accountIds })
|
||||
})
|
||||
}
|
||||
|
||||
const deleteList = ({ id, credentials }) => {
|
||||
const url = MASTODON_LIST_URL(id)
|
||||
return fetch(url, {
|
||||
method: 'DELETE',
|
||||
headers: authHeaders(credentials)
|
||||
})
|
||||
}
|
||||
|
||||
const fetchConversation = ({ id, credentials }) => {
|
||||
const urlContext = MASTODON_STATUS_CONTEXT_URL(id)
|
||||
return fetch(urlContext, { headers: authHeaders(credentials) })
|
||||
@ -506,6 +585,7 @@ const fetchTimeline = ({
|
||||
since = false,
|
||||
until = false,
|
||||
userId = false,
|
||||
listId = false,
|
||||
tag = false,
|
||||
withMuted = false,
|
||||
replyVisibility = 'all'
|
||||
@ -518,6 +598,7 @@ const fetchTimeline = ({
|
||||
publicAndExternal: MASTODON_PUBLIC_TIMELINE,
|
||||
user: MASTODON_USER_TIMELINE_URL,
|
||||
media: MASTODON_USER_TIMELINE_URL,
|
||||
list: MASTODON_LIST_TIMELINE_URL,
|
||||
favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
|
||||
tag: MASTODON_TAG_TIMELINE_URL,
|
||||
bookmarks: MASTODON_BOOKMARK_TIMELINE_URL
|
||||
@ -531,6 +612,10 @@ const fetchTimeline = ({
|
||||
url = url(userId)
|
||||
}
|
||||
|
||||
if (timeline === 'list') {
|
||||
url = url(listId)
|
||||
}
|
||||
|
||||
if (since) {
|
||||
params.push(['since_id', since])
|
||||
}
|
||||
@ -1405,6 +1490,14 @@ const apiService = {
|
||||
addBackup,
|
||||
listBackups,
|
||||
fetchFollowRequests,
|
||||
fetchLists,
|
||||
createList,
|
||||
getList,
|
||||
updateList,
|
||||
getListAccounts,
|
||||
addAccountsToList,
|
||||
removeAccountsFromList,
|
||||
deleteList,
|
||||
approveUser,
|
||||
denyUser,
|
||||
suggestions,
|
||||
|
@ -2,10 +2,11 @@ import apiService, { getMastodonSocketURI, ProcessedWS } from '../api/api.servic
|
||||
import timelineFetcher from '../timeline_fetcher/timeline_fetcher.service.js'
|
||||
import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
|
||||
import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
|
||||
import listsFetcher from '../../services/lists_fetcher/lists_fetcher.service.js'
|
||||
|
||||
const backendInteractorService = credentials => ({
|
||||
startFetchingTimeline ({ timeline, store, userId = false, tag }) {
|
||||
return timelineFetcher.startFetching({ timeline, store, credentials, userId, tag })
|
||||
startFetchingTimeline ({ timeline, store, userId = false, listId = false, tag }) {
|
||||
return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, tag })
|
||||
},
|
||||
|
||||
fetchTimeline (args) {
|
||||
@ -24,6 +25,10 @@ const backendInteractorService = credentials => ({
|
||||
return followRequestFetcher.startFetching({ store, credentials })
|
||||
},
|
||||
|
||||
startFetchingLists ({ store }) {
|
||||
return listsFetcher.startFetching({ store, credentials })
|
||||
},
|
||||
|
||||
startUserSocket ({ store }) {
|
||||
const serv = store.rootState.instance.server.replace('http', 'ws')
|
||||
const url = serv + getMastodonSocketURI({ credentials, stream: 'user' })
|
||||
|
22
src/services/lists_fetcher/lists_fetcher.service.js
Normal file
22
src/services/lists_fetcher/lists_fetcher.service.js
Normal file
@ -0,0 +1,22 @@
|
||||
import apiService from '../api/api.service.js'
|
||||
import { promiseInterval } from '../promise_interval/promise_interval.js'
|
||||
|
||||
const fetchAndUpdate = ({ store, credentials }) => {
|
||||
return apiService.fetchLists({ credentials })
|
||||
.then(lists => {
|
||||
store.commit('setLists', lists)
|
||||
}, () => {})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const startFetching = ({ credentials, store }) => {
|
||||
const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
|
||||
boundFetchAndUpdate()
|
||||
return promiseInterval(boundFetchAndUpdate, 240000)
|
||||
}
|
||||
|
||||
const listsFetcher = {
|
||||
startFetching
|
||||
}
|
||||
|
||||
export default listsFetcher
|
@ -3,12 +3,13 @@ import { camelCase } from 'lodash'
|
||||
import apiService from '../api/api.service.js'
|
||||
import { promiseInterval } from '../promise_interval/promise_interval.js'
|
||||
|
||||
const update = ({ store, statuses, timeline, showImmediately, userId, pagination }) => {
|
||||
const update = ({ store, statuses, timeline, showImmediately, userId, listId, pagination }) => {
|
||||
const ccTimeline = camelCase(timeline)
|
||||
|
||||
store.dispatch('addNewStatuses', {
|
||||
timeline: ccTimeline,
|
||||
userId,
|
||||
listId,
|
||||
statuses,
|
||||
showImmediately,
|
||||
pagination
|
||||
@ -22,6 +23,7 @@ const fetchAndUpdate = ({
|
||||
older = false,
|
||||
showImmediately = false,
|
||||
userId = false,
|
||||
listId = false,
|
||||
tag = false,
|
||||
until,
|
||||
since
|
||||
@ -44,6 +46,7 @@ const fetchAndUpdate = ({
|
||||
}
|
||||
|
||||
args.userId = userId
|
||||
args.listId = listId
|
||||
args.tag = tag
|
||||
args.withMuted = !hideMutedPosts
|
||||
if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
|
||||
@ -62,7 +65,7 @@ const fetchAndUpdate = ({
|
||||
if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
|
||||
store.dispatch('queueFlush', { timeline, id: timelineData.maxId })
|
||||
}
|
||||
update({ store, statuses, timeline, showImmediately, userId, pagination })
|
||||
update({ store, statuses, timeline, showImmediately, userId, listId, pagination })
|
||||
return { statuses, pagination }
|
||||
})
|
||||
.catch((error) => {
|
||||
@ -75,14 +78,15 @@ const fetchAndUpdate = ({
|
||||
})
|
||||
}
|
||||
|
||||
const startFetching = ({ timeline = 'friends', credentials, store, userId = false, tag = false }) => {
|
||||
const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, tag = false }) => {
|
||||
const rootState = store.rootState || store.state
|
||||
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
|
||||
const showImmediately = timelineData.visibleStatuses.length === 0
|
||||
timelineData.userId = userId
|
||||
fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag })
|
||||
timelineData.listId = listId
|
||||
fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, tag })
|
||||
const boundFetchAndUpdate = () =>
|
||||
fetchAndUpdate({ timeline, credentials, store, userId, tag })
|
||||
fetchAndUpdate({ timeline, credentials, store, userId, listId, tag })
|
||||
return promiseInterval(boundFetchAndUpdate, 10000)
|
||||
}
|
||||
const timelineFetcher = {
|
||||
|
@ -40,4 +40,28 @@ describe('routes', () => {
|
||||
// eslint-disable-next-line no-prototype-builtins
|
||||
expect(matchedComponents[0].components.default.components.hasOwnProperty('UserCard')).to.eql(true)
|
||||
})
|
||||
|
||||
it('list view', async () => {
|
||||
await router.push('/lists')
|
||||
|
||||
const matchedComponents = router.currentRoute.value.matched
|
||||
|
||||
expect(matchedComponents[0].components.default.components.hasOwnProperty('ListsCard')).to.eql(true)
|
||||
})
|
||||
|
||||
it('list timeline', async () => {
|
||||
await router.push('/lists/1')
|
||||
|
||||
const matchedComponents = router.currentRoute.value.matched
|
||||
|
||||
expect(matchedComponents[0].components.default.components.hasOwnProperty('Timeline')).to.eql(true)
|
||||
})
|
||||
|
||||
it('list edit', async () => {
|
||||
await router.push('/lists/1/edit')
|
||||
|
||||
const matchedComponents = router.currentRoute.value.matched
|
||||
|
||||
expect(matchedComponents[0].components.default.components.hasOwnProperty('BasicUserCard')).to.eql(true)
|
||||
})
|
||||
})
|
||||
|
83
test/unit/specs/modules/lists.spec.js
Normal file
83
test/unit/specs/modules/lists.spec.js
Normal file
@ -0,0 +1,83 @@
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { defaultState, mutations, getters } from '../../../../src/modules/lists.js'
|
||||
|
||||
describe('The lists module', () => {
|
||||
describe('mutations', () => {
|
||||
it('updates array of all lists', () => {
|
||||
const state = cloneDeep(defaultState)
|
||||
const list = { id: '1', title: 'testList' }
|
||||
|
||||
mutations.setLists(state, [list])
|
||||
expect(state.allLists).to.have.length(1)
|
||||
expect(state.allLists).to.eql([list])
|
||||
})
|
||||
|
||||
it('adds a new list with a title, updating the title for existing lists', () => {
|
||||
const state = cloneDeep(defaultState)
|
||||
const list = { id: '1', title: 'testList' }
|
||||
const modList = { id: '1', title: 'anotherTestTitle' }
|
||||
|
||||
mutations.setList(state, list)
|
||||
expect(state.allListsObject[list.id]).to.eql({ title: list.title })
|
||||
expect(state.allLists).to.have.length(1)
|
||||
expect(state.allLists[0]).to.eql(list)
|
||||
|
||||
mutations.setList(state, modList)
|
||||
expect(state.allListsObject[modList.id]).to.eql({ title: modList.title })
|
||||
expect(state.allLists).to.have.length(1)
|
||||
expect(state.allLists[0]).to.eql(modList)
|
||||
})
|
||||
|
||||
it('adds a new list with an array of IDs, updating the IDs for existing lists', () => {
|
||||
const state = cloneDeep(defaultState)
|
||||
const list = { id: '1', accountIds: ['1', '2', '3'] }
|
||||
const modList = { id: '1', accountIds: ['3', '4', '5'] }
|
||||
|
||||
mutations.setListAccounts(state, list)
|
||||
expect(state.allListsObject[list.id]).to.eql({ accountIds: list.accountIds })
|
||||
|
||||
mutations.setListAccounts(state, modList)
|
||||
expect(state.allListsObject[modList.id]).to.eql({ accountIds: modList.accountIds })
|
||||
})
|
||||
|
||||
it('deletes a list', () => {
|
||||
const state = {
|
||||
allLists: [{ id: '1', title: 'testList' }],
|
||||
allListsObject: {
|
||||
1: { title: 'testList', accountIds: ['1', '2', '3'] }
|
||||
}
|
||||
}
|
||||
const id = '1'
|
||||
|
||||
mutations.deleteList(state, { id })
|
||||
expect(state.allLists).to.have.length(0)
|
||||
expect(state.allListsObject).to.eql({})
|
||||
})
|
||||
})
|
||||
|
||||
describe('getters', () => {
|
||||
it('returns list title', () => {
|
||||
const state = {
|
||||
allLists: [{ id: '1', title: 'testList' }],
|
||||
allListsObject: {
|
||||
1: { title: 'testList', accountIds: ['1', '2', '3'] }
|
||||
}
|
||||
}
|
||||
const id = '1'
|
||||
|
||||
expect(getters.findListTitle(state)(id)).to.eql('testList')
|
||||
})
|
||||
|
||||
it('returns list accounts', () => {
|
||||
const state = {
|
||||
allLists: [{ id: '1', title: 'testList' }],
|
||||
allListsObject: {
|
||||
1: { title: 'testList', accountIds: ['1', '2', '3'] }
|
||||
}
|
||||
}
|
||||
const id = '1'
|
||||
|
||||
expect(getters.findListAccounts(state)(id)).to.eql(['1', '2', '3'])
|
||||
})
|
||||
})
|
||||
})
|
Loading…
Reference in New Issue
Block a user