80 lines
1.9 KiB
JavaScript
80 lines
1.9 KiB
JavaScript
import { mapGetters, mapState } from 'vuex'
|
|
|
|
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
|
|
import UserAvatar from '../user_avatar/user_avatar.vue'
|
|
|
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
import { faChevronLeft, faSearch } from '@fortawesome/free-solid-svg-icons'
|
|
|
|
library.add(faSearch, faChevronLeft)
|
|
|
|
const chatNew = {
|
|
components: {
|
|
BasicUserCard,
|
|
UserAvatar,
|
|
},
|
|
data() {
|
|
return {
|
|
suggestions: [],
|
|
userIds: [],
|
|
loading: false,
|
|
query: '',
|
|
}
|
|
},
|
|
async created() {
|
|
const { chats } = await this.backendInteractor.chats()
|
|
chats.forEach((chat) => this.suggestions.push(chat.account))
|
|
},
|
|
computed: {
|
|
users() {
|
|
return this.userIds.map((userId) => this.findUser(userId))
|
|
},
|
|
availableUsers() {
|
|
if (this.query.length !== 0) {
|
|
return this.users
|
|
} else {
|
|
return this.suggestions
|
|
}
|
|
},
|
|
...mapState({
|
|
currentUser: (state) => state.users.currentUser,
|
|
backendInteractor: (state) => state.api.backendInteractor,
|
|
}),
|
|
...mapGetters(['findUser']),
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
this.$emit('cancel')
|
|
},
|
|
goToChat(user) {
|
|
this.$router.push({ name: 'chat', params: { recipient_id: user.id } })
|
|
},
|
|
onInput() {
|
|
this.search(this.query)
|
|
},
|
|
addUser(user) {
|
|
this.selectedUserIds.push(user.id)
|
|
this.query = ''
|
|
},
|
|
removeUser(userId) {
|
|
this.selectedUserIds = this.selectedUserIds.filter((id) => id !== userId)
|
|
},
|
|
search(query) {
|
|
if (!query) {
|
|
this.loading = false
|
|
return
|
|
}
|
|
|
|
this.loading = true
|
|
this.userIds = []
|
|
this.$store
|
|
.dispatch('search', { q: query, resolve: true, type: 'accounts' })
|
|
.then((data) => {
|
|
this.loading = false
|
|
this.userIds = data.accounts.map((a) => a.id)
|
|
})
|
|
},
|
|
},
|
|
}
|
|
|
|
export default chatNew
|