parent
610720f164
commit
171f6f0894
@ -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
|
@ -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>
|
@ -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
|
@ -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>
|
@ -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
|
@ -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>
|
@ -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
|
@ -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>
|
@ -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
|
@ -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>
|
@ -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
|
@ -0,0 +1,10 @@
|
|||||||
|
<template>
|
||||||
|
<Timeline
|
||||||
|
title="list.name"
|
||||||
|
:timeline="timeline"
|
||||||
|
:list-id="listId"
|
||||||
|
timeline-name="list"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./lists_timeline.js"></script>
|
@ -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
|
@ -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>
|
@ -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
|
@ -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
|
@ -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