зеркало из https://github.com/nextcloud/spreed.git
Create ContactsList component and display search results
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
This commit is contained in:
Родитель
6249cfa8ee
Коммит
a2b552af13
|
@ -0,0 +1,43 @@
|
||||||
|
<!--
|
||||||
|
- @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
|
||||||
|
-
|
||||||
|
- @author Marco Ambrosini <marcoambrosini@pm.me
|
||||||
|
-
|
||||||
|
- @license GNU AGPL version 3 or any later version
|
||||||
|
-
|
||||||
|
- This program is free software: you can redistribute it and/or modify
|
||||||
|
- it under the terms of the GNU Affero General Public License as
|
||||||
|
- published by the Free Software Foundation, either version 3 of the
|
||||||
|
- License, or (at your option) any later version.
|
||||||
|
-
|
||||||
|
- This program is distributed in the hope that it will be useful,
|
||||||
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
- GNU Affero General Public License for more details.
|
||||||
|
-
|
||||||
|
- You should have received a copy of the GNU Affero General Public License
|
||||||
|
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<li>
|
||||||
|
<h3>{{ title }}</h3>
|
||||||
|
<hr>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Caption',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,83 @@
|
||||||
|
<!--
|
||||||
|
- @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
|
||||||
|
-
|
||||||
|
- @author Marco Ambrosini <marcoambrosini@pm.me
|
||||||
|
-
|
||||||
|
- @license GNU AGPL version 3 or any later version
|
||||||
|
-
|
||||||
|
- This program is free software: you can redistribute it and/or modify
|
||||||
|
- it under the terms of the GNU Affero General Public License as
|
||||||
|
- published by the Free Software Foundation, either version 3 of the
|
||||||
|
- License, or (at your option) any later version.
|
||||||
|
-
|
||||||
|
- This program is distributed in the hope that it will be useful,
|
||||||
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
- GNU Affero General Public License for more details.
|
||||||
|
-
|
||||||
|
- You should have received a copy of the GNU Affero General Public License
|
||||||
|
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ul>
|
||||||
|
<AppContentListItem
|
||||||
|
v-for="item of contacts"
|
||||||
|
:key="item.id"
|
||||||
|
:to="{ name: 'conversation', params: { token: item.token }}"
|
||||||
|
:title="item.id">
|
||||||
|
<Avatar
|
||||||
|
slot="icon"
|
||||||
|
:size="44"
|
||||||
|
:user="item.id"
|
||||||
|
:display-name="item.id" />
|
||||||
|
</AppContentListItem>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
|
||||||
|
import Avatar from 'nextcloud-vue/dist/Components/Avatar'
|
||||||
|
import AppContentListItem from 'nextcloud-vue/dist/Components/AppContentListItem'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ContactsList',
|
||||||
|
components: {
|
||||||
|
Avatar,
|
||||||
|
AppContentListItem
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
contacts: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isLoading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* here I will have to create a new conversation
|
||||||
|
*/
|
||||||
|
// async joinConversation(token) {
|
||||||
|
// await joinConversation(token)
|
||||||
|
// },
|
||||||
|
// handleInput(payload) {
|
||||||
|
// const selectedConversationToken = payload.token
|
||||||
|
// this.joinConversation(selectedConversationToken)
|
||||||
|
// this.$router.push({ path: `/call/${selectedConversationToken}` })
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.scroller {
|
||||||
|
flex: 1 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ellipsis {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -20,7 +20,7 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ul class="app-navigation">
|
<ul class="conversations">
|
||||||
<AppContentListItem
|
<AppContentListItem
|
||||||
v-for="item of conversationsList"
|
v-for="item of conversationsList"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
|
@ -108,6 +108,10 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.conversations {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
.scroller {
|
.scroller {
|
||||||
flex: 1 0;
|
flex: 1 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,7 +25,10 @@
|
||||||
<AppNavigationSearch
|
<AppNavigationSearch
|
||||||
v-model="searchText"
|
v-model="searchText"
|
||||||
@input="debounceFetchSearchResults" />
|
@input="debounceFetchSearchResults" />
|
||||||
|
<Caption v-if="isSearching" title="Conversations" />
|
||||||
<ConversationsList />
|
<ConversationsList />
|
||||||
|
<Caption v-if="isSearching" title="Contacts" />
|
||||||
|
<ContactsList v-if="isSearching" :contacts="searchResults" />
|
||||||
</ul>
|
</ul>
|
||||||
<AppNavigationSettings>
|
<AppNavigationSettings>
|
||||||
Example settings
|
Example settings
|
||||||
|
@ -39,8 +42,9 @@ import AppNavigation from 'nextcloud-vue/dist/Components/AppNavigation'
|
||||||
import AppNavigationSearch from './AppNavigationSearch/AppNavigationSearch'
|
import AppNavigationSearch from './AppNavigationSearch/AppNavigationSearch'
|
||||||
import AppNavigationSettings from 'nextcloud-vue/dist/Components/AppNavigationSettings'
|
import AppNavigationSettings from 'nextcloud-vue/dist/Components/AppNavigationSettings'
|
||||||
import { searchPossibleConversations } from '../../services/conversationsService'
|
import { searchPossibleConversations } from '../../services/conversationsService'
|
||||||
|
import ContactsList from './ContactsList/ContactsList'
|
||||||
import debounce from 'debounce'
|
import debounce from 'debounce'
|
||||||
|
import Caption from './Caption/Caption'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
|
@ -50,7 +54,9 @@ export default {
|
||||||
ConversationsList,
|
ConversationsList,
|
||||||
AppNavigation,
|
AppNavigation,
|
||||||
AppNavigationSettings,
|
AppNavigationSettings,
|
||||||
AppNavigationSearch
|
AppNavigationSearch,
|
||||||
|
ContactsList,
|
||||||
|
Caption
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
@ -61,14 +67,23 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
isSearching() {
|
||||||
|
return this.searchText !== ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
debounceFetchSearchResults: debounce(function() {
|
debounceFetchSearchResults: debounce(function() {
|
||||||
this.fetchSearchResults()
|
if (this.isSearching) {
|
||||||
|
this.fetchSearchResults()
|
||||||
|
}
|
||||||
}, 250),
|
}, 250),
|
||||||
|
|
||||||
async fetchSearchResults() {
|
async fetchSearchResults() {
|
||||||
this.contactsLoading = true
|
this.contactsLoading = true
|
||||||
this.searchResults = await searchPossibleConversations(this.searchText)
|
const response = await searchPossibleConversations(this.searchText)
|
||||||
|
this.searchResults = response.data.ocs.data
|
||||||
this.contactsLoading = false
|
this.contactsLoading = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Загрузка…
Ссылка в новой задаче