|
|
|
|
@ -1,7 +1,9 @@ |
|
|
|
|
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 PanelLoading from 'src/components/panel_loading/panel_loading.vue' |
|
|
|
|
import UserAvatar from '../user_avatar/user_avatar.vue' |
|
|
|
|
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' |
|
|
|
|
import { library } from '@fortawesome/fontawesome-svg-core' |
|
|
|
|
import { |
|
|
|
|
faSearch, |
|
|
|
|
@ -17,22 +19,33 @@ const ListsNew = { |
|
|
|
|
components: { |
|
|
|
|
BasicUserCard, |
|
|
|
|
UserAvatar, |
|
|
|
|
ListsUserSearch |
|
|
|
|
ListsUserSearch, |
|
|
|
|
TabSwitcher, |
|
|
|
|
PanelLoading |
|
|
|
|
}, |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
title: '', |
|
|
|
|
userIds: [], |
|
|
|
|
selectedUserIds: [] |
|
|
|
|
titleDraft: '', |
|
|
|
|
membersUserIds: [], |
|
|
|
|
removedUserIds: new Set([]), // users we added for members, to undo
|
|
|
|
|
searchUserIds: [], |
|
|
|
|
addedUserIds: new Set([]), // users we added from search, to undo
|
|
|
|
|
searchLoading: false, |
|
|
|
|
reallyDelete: false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
created () { |
|
|
|
|
this.$store.dispatch('fetchList', { id: this.id }) |
|
|
|
|
.then(() => { this.title = this.findListTitle(this.id) }) |
|
|
|
|
this.$store.dispatch('fetchListAccounts', { id: this.id }) |
|
|
|
|
if (!this.id) return |
|
|
|
|
this.$store.dispatch('fetchList', { listId: this.id }) |
|
|
|
|
.then(() => { |
|
|
|
|
this.selectedUserIds = this.findListAccounts(this.id) |
|
|
|
|
this.selectedUserIds.forEach(userId => { |
|
|
|
|
this.title = this.findListTitle(this.id) |
|
|
|
|
this.titleDraft = this.title |
|
|
|
|
}) |
|
|
|
|
this.$store.dispatch('fetchListAccounts', { listId: this.id }) |
|
|
|
|
.then(() => { |
|
|
|
|
this.membersUserIds = this.findListAccounts(this.id) |
|
|
|
|
this.membersUserIds.forEach(userId => { |
|
|
|
|
this.$store.dispatch('fetchUserIfMissing', userId) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
@ -41,11 +54,12 @@ const ListsNew = { |
|
|
|
|
id () { |
|
|
|
|
return this.$route.params.id |
|
|
|
|
}, |
|
|
|
|
users () { |
|
|
|
|
return this.userIds.map(userId => this.findUser(userId)) |
|
|
|
|
membersUsers () { |
|
|
|
|
return [...this.membersUserIds, ...this.addedUserIds] |
|
|
|
|
.map(userId => this.findUser(userId)).filter(user => user) |
|
|
|
|
}, |
|
|
|
|
selectedUsers () { |
|
|
|
|
return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user) |
|
|
|
|
searchUsers () { |
|
|
|
|
return this.searchUserIds.map(userId => this.findUser(userId)).filter(user => user) |
|
|
|
|
}, |
|
|
|
|
...mapState({ |
|
|
|
|
currentUser: state => state.users.currentUser |
|
|
|
|
@ -56,33 +70,73 @@ const ListsNew = { |
|
|
|
|
onInput () { |
|
|
|
|
this.search(this.query) |
|
|
|
|
}, |
|
|
|
|
selectUser (user) { |
|
|
|
|
if (this.selectedUserIds.includes(user.id)) { |
|
|
|
|
this.removeUser(user.id) |
|
|
|
|
toggleRemoveMember (user) { |
|
|
|
|
if (this.removedUserIds.has(user.id)) { |
|
|
|
|
this.id && this.addUser(user) |
|
|
|
|
this.removedUserIds.delete(user.id) |
|
|
|
|
} else { |
|
|
|
|
this.addUser(user) |
|
|
|
|
this.id && this.removeUser(user.id) |
|
|
|
|
this.removedUserIds.add(user.id) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
isSelected (user) { |
|
|
|
|
return this.selectedUserIds.includes(user.id) |
|
|
|
|
toggleAddFromSearch (user) { |
|
|
|
|
if (this.addedUserIds.has(user.id)) { |
|
|
|
|
this.id && this.removeUser(user.id) |
|
|
|
|
this.addedUserIds.delete(user.id) |
|
|
|
|
} else { |
|
|
|
|
this.id && this.addUser(user) |
|
|
|
|
this.addedUserIds.add(user.id) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
isRemoved (user) { |
|
|
|
|
return this.removedUserIds.has(user.id) |
|
|
|
|
}, |
|
|
|
|
isAdded (user) { |
|
|
|
|
return this.addedUserIds.has(user.id) |
|
|
|
|
}, |
|
|
|
|
addUser (user) { |
|
|
|
|
this.selectedUserIds.push(user.id) |
|
|
|
|
this.$store.dispatch('addListAccount', { accountId: this.user.id, listId: this.id }) |
|
|
|
|
}, |
|
|
|
|
removeUser (userId) { |
|
|
|
|
this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId) |
|
|
|
|
this.$store.dispatch('removeListAccount', { accountId: this.user.id, listId: this.id }) |
|
|
|
|
}, |
|
|
|
|
onResults (results) { |
|
|
|
|
this.userIds = results |
|
|
|
|
onSearchLoading (results) { |
|
|
|
|
this.searchLoading = true |
|
|
|
|
}, |
|
|
|
|
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: 'lists-timeline', params: { id: this.id } }) |
|
|
|
|
onSearchLoadingDone (results) { |
|
|
|
|
this.searchLoading = false |
|
|
|
|
}, |
|
|
|
|
onSearchResults (results) { |
|
|
|
|
this.searchLoading = false |
|
|
|
|
this.searchUserIds = results |
|
|
|
|
}, |
|
|
|
|
updateListTitle () { |
|
|
|
|
this.$store.dispatch('setList', { listId: this.id, title: this.titleDraft }) |
|
|
|
|
.then(() => { |
|
|
|
|
this.title = this.findListTitle(this.id) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
createList () { |
|
|
|
|
this.$store.dispatch('createList', { title: this.titleDraft }) |
|
|
|
|
.then((list) => { |
|
|
|
|
return this |
|
|
|
|
.$store |
|
|
|
|
.dispatch('setListAccounts', { listId: list.id, accountIds: [...this.addedUserIds] }) |
|
|
|
|
.then(() => list.id) |
|
|
|
|
}) |
|
|
|
|
.then((listId) => { |
|
|
|
|
this.$router.push({ name: 'lists-timeline', params: { id: listId } }) |
|
|
|
|
}) |
|
|
|
|
.catch((e) => { |
|
|
|
|
this.$store.dispatch('pushGlobalNotice', { |
|
|
|
|
messageKey: 'lists.error', |
|
|
|
|
messageArgs: [e.message], |
|
|
|
|
level: 'error' |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
deleteList () { |
|
|
|
|
this.$store.dispatch('deleteList', { id: this.id }) |
|
|
|
|
this.$store.dispatch('deleteList', { listId: this.id }) |
|
|
|
|
this.$router.push({ name: 'lists' }) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
tusooa
1 year ago