diff options
| -rw-r--r-- | src/App.vue | 169 | ||||
| -rw-r--r-- | src/components/ConversationsList/ConversationsList.vue | 75 | ||||
| -rw-r--r-- | src/components/Message/MessageBody.vue | 22 | ||||
| -rw-r--r-- | src/main.js | 1 | ||||
| -rw-r--r-- | src/services/conversations.js | 13 | ||||
| -rw-r--r-- | src/services/conversationsService.js | 35 | ||||
| -rw-r--r-- | src/services/messagesService.js | 35 | ||||
| -rw-r--r-- | src/store/conversations.js | 10 | ||||
| -rw-r--r-- | src/store/index.js | 4 | ||||
| -rw-r--r-- | src/store/messages.js | 97 |
10 files changed, 297 insertions, 164 deletions
diff --git a/src/App.vue b/src/App.vue index 6d19b6074..f681d4d8a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,3 +1,24 @@ +<!-- + - @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> <Content :class="{'icon-loading': loading}" app-name="vueexample"> <AppNavigation> @@ -8,53 +29,7 @@ button-id="new-conversation-button" button-class="icon-add" @click="newButtonAction" /> - <NewConversationForm /> - <ul id="app-vueexample-navigation"> - <AppNavigationItem title="Billie Holiday"> - <Avatar slot="icon" user="Billie Holiday" display-name="Billie Holiday" /> - <AppNavigationCounter slot="counter" :highlighted="true"> - 99+ - </AppNavigationCounter> - <template slot="actions"> - <ActionButton icon="icon-edit" @click="alert('Edit')"> - Edit - </ActionButton> - <ActionButton icon="icon-delete" @click="alert('Delete')"> - Delete - </ActionButton> - <ActionLink icon="icon-external" title="Link" href="https://nextcloud.com" /> - </template> - </AppNavigationItem> - <AppNavigationItem title="Charles Mingus"> - <Avatar slot="icon" user="Charles Mingus" display-name="Charles Mingus" /> - <AppNavigationCounter slot="counter" :highlighted="true"> - 3 - </AppNavigationCounter> - <template slot="actions"> - <ActionButton icon="icon-edit" @click="alert('Edit')"> - Edit - </ActionButton> - <ActionButton icon="icon-delete" @click="alert('Delete')"> - Delete - </ActionButton> - <ActionLink icon="icon-external" title="Link" href="https://nextcloud.com" /> - </template> - </AppNavigationItem> - <AppNavigationItem title="The fellas" icon="icon-group"> - <AppNavigationCounter slot="counter" :highlighted="true"> - 12 - </AppNavigationCounter> - <template slot="actions"> - <ActionButton icon="icon-edit" @click="alert('Edit')"> - Edit - </ActionButton> - <ActionButton icon="icon-delete" @click="alert('Delete')"> - Delete - </ActionButton> - <ActionLink icon="icon-external" title="Link" href="https://nextcloud.com" /> - </template> - </AppNavigationItem> - </ul> + <ConversationsList /> <AppNavigationSettings> Example settings </AppNavigationSettings> @@ -91,37 +66,28 @@ import Content from 'nextcloud-vue/dist/Components/Content' import AppContent from 'nextcloud-vue/dist/Components/AppContent' import AppNavigation from 'nextcloud-vue/dist/Components/AppNavigation' -import AppNavigationItem from 'nextcloud-vue/dist/Components/AppNavigationItem' import AppNavigationNew from 'nextcloud-vue/dist/Components/AppNavigationNew' import AppNavigationSettings from 'nextcloud-vue/dist/Components/AppNavigationSettings' import AppSidebar from 'nextcloud-vue/dist/Components/AppSidebar' import AppSidebarTab from 'nextcloud-vue/dist/Components/AppSidebarTab' -import AppNavigationCounter from 'nextcloud-vue/dist/Components/AppNavigationCounter' -import ActionButton from 'nextcloud-vue/dist/Components/ActionButton' -import Avatar from 'nextcloud-vue/dist/Components/Avatar' import MessageList from './components/MessageList/MessageList' import NewMessageForm from './components/NewMessageForm/NewMessageForm' -import NewConversationForm from './components/NewConversationForm/NewConversationForm' -import { fetchConversations } from './services/conversations' +import ConversationsList from './components/ConversationsList/ConversationsList' +import { fetchConversations } from './services/conversationsService' -console.log(fetchConversations) export default { name: 'App', components: { Content, AppContent, AppNavigation, - AppNavigationItem, AppNavigationNew, AppNavigationSettings, AppSidebar, AppSidebarTab, - AppNavigationCounter, - ActionButton, - Avatar, + ConversationsList, MessageList, - NewMessageForm, - NewConversationForm + NewMessageForm }, data: function() { return { @@ -133,75 +99,7 @@ export default { windowHeight: 0 } }, - computed: { - // App navigation - menu: function() { - return [ - { - id: 'app-category-your-apps', - classes: [], - href: '#1', - // action: this.log, - icon: 'icon-category-installed', - text: t('settings', 'Your apps') - }, - { - caption: true, - text: t('vueexample', 'Section') - }, - { - id: 'app-category-enabled', - classes: [], - icon: 'icon-category-enabled', - href: '#2', - utils: { - actions: [{ - icon: 'icon-delete', - text: t('settings', 'Remove group'), - action: function() { - alert('remove') - } - }] - }, - text: t('settings', 'Active apps') - }, - { - id: 'app-category-enabled', - classes: [], - icon: 'icon-category-enabled', - href: '#3', - utils: { - counter: 123, - actions: [ - { - icon: 'icon-delete', - text: t('settings', 'Remove group'), - action: function() { - alert('remove') - } - }, - { - icon: 'icon-delete', - text: t('settings', 'Remove group'), - action: function() { - alert('remove') - } - } - ] - }, - text: t('settings', 'Active apps') - }, - { - id: 'app-category-disabled', - classes: [], - icon: 'icon-category-disabled', - href: '#4', - undo: true, - text: t('settings', 'Disabled apps') - } - ] - } - }, + async beforeMount() { window.addEventListener('resize', this.onResize) this.onResize() @@ -216,19 +114,6 @@ export default { onResize() { this.windowHeight = window.innerHeight - document.getElementById('header').clientHeight }, - addOption(val) { - this.options.push(val) - this.select.push(val) - }, - previous(data) { - console.debug(data) - }, - next(data) { - console.debug(data) - }, - close(data) { - console.debug(data) - }, newButtonAction(e) { console.debug(e) }, diff --git a/src/components/ConversationsList/ConversationsList.vue b/src/components/ConversationsList/ConversationsList.vue new file mode 100644 index 000000000..c9e93fe6b --- /dev/null +++ b/src/components/ConversationsList/ConversationsList.vue @@ -0,0 +1,75 @@ +<!-- + - @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 class="app-navigation"> + <AppNavigationItem + v-for="item of conversationsList" + :key="item.id" + :title="item.displayName"> + <Avatar slot="icon" :user="item.displayName" :display-name="item.displayName" /> + <AppNavigationCounter slot="counter" :highlighted="true"> + 3 + </AppNavigationCounter> + <template slot="actions"> + <ActionButton icon="icon-edit" @click="alert('Edit')"> + Edit + </ActionButton> + <ActionButton icon="icon-delete" @click="alert('Delete')"> + Delete + </ActionButton> + <ActionLink icon="icon-external" title="Link" href="https://nextcloud.com" /> + </template> + </AppNavigationItem> + </ul> +</template> + +<script> +import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' +import AppNavigationItem from 'nextcloud-vue/dist/Components/AppNavigationItem' +import Avatar from 'nextcloud-vue/dist/Components/Avatar' +import AppNavigationCounter from 'nextcloud-vue/dist/Components/AppNavigationCounter' +import ActionButton from 'nextcloud-vue/dist/Components/ActionButton' + +export default { + name: 'ConversationsList', + components: { + AppNavigationItem, + Avatar, + AppNavigationCounter, + ActionButton + }, + computed: { + conversationsList() { + return this.$store.getters.conversationsList + }, + conversations() { + return this.$store.getters.conversations + } + } +} +</script> + +<style lang="scss" scoped> +.scroller { + flex: 1 0; +} +</style> diff --git a/src/components/Message/MessageBody.vue b/src/components/Message/MessageBody.vue index b24956322..3a85158b8 100644 --- a/src/components/Message/MessageBody.vue +++ b/src/components/Message/MessageBody.vue @@ -1,3 +1,24 @@ +<!-- + - @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> <div v-show="messageText" :class="{ 'message-main--quote' : isQuote }" @@ -14,6 +35,7 @@ <script> export default { + inheritAttrs: false, props: { userName: { type: String, diff --git a/src/main.js b/src/main.js index 5aab72807..aebca25ed 100644 --- a/src/main.js +++ b/src/main.js @@ -42,6 +42,7 @@ Vue.prototype.t = t Vue.prototype.n = n Vue.prototype.OC = OC Vue.prototype.OCA = OCA + Vue.use(contenteditableDirective) Vue.use(Vuex) diff --git a/src/services/conversations.js b/src/services/conversations.js deleted file mode 100644 index 10248861e..000000000 --- a/src/services/conversations.js +++ /dev/null @@ -1,13 +0,0 @@ -import axios from 'nextcloud-axios' -import { generateOcsUrl } from 'nextcloud-router' - -const fetchConversations = async function() { - try { - const response = await axios.get(generateOcsUrl('apps/spreed/api/v1', 2) + 'room') - return response - } catch (error) { - console.debug(error) - } -} - -export { fetchConversations } diff --git a/src/services/conversationsService.js b/src/services/conversationsService.js new file mode 100644 index 000000000..589a4af83 --- /dev/null +++ b/src/services/conversationsService.js @@ -0,0 +1,35 @@ +/** + * @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/>. + * + */ + +import axios from 'nextcloud-axios' +import { generateOcsUrl } from 'nextcloud-router' + +const fetchConversations = async function() { + try { + const response = await axios.get(generateOcsUrl('apps/spreed/api/v1', 2) + 'room') + return response + } catch (error) { + console.debug(error) + } +} + +export { fetchConversations } diff --git a/src/services/messagesService.js b/src/services/messagesService.js new file mode 100644 index 000000000..5807d1089 --- /dev/null +++ b/src/services/messagesService.js @@ -0,0 +1,35 @@ +/** + * @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/>. + * + */ + +import axios from 'nextcloud-axios' +import { generateOcsUrl } from 'nextcloud-router' + +const fetchConversations = async function() { + try { + const response = await axios.get(generateOcsUrl('apps/spreed/api/v1', 2) + `/room/{${token}}`) + return response + } catch (error) { + console.debug(error) + } +} + +export { fetchConversations } diff --git a/src/store/conversations.js b/src/store/conversations.js index 32c066970..a423d7670 100644 --- a/src/store/conversations.js +++ b/src/store/conversations.js @@ -1,7 +1,7 @@ /** - * @copyright Copyright (c) 2018 Team Popcorn <teampopcornberlin@gmail.com> + * @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me> * - * @author Team Popcorn <teampopcornberlin@gmail.com> + * @author Marco Ambrosini <marcoambrosini@pm.me> * * @license GNU AGPL version 3 or any later version * @@ -19,6 +19,7 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * */ +import Vue from 'vue' const state = { conversations: { @@ -28,6 +29,7 @@ const state = { } const getters = { + conversations: state => state.conversations, conversationsList: state => Object.values(state.conversations) } @@ -38,7 +40,7 @@ const mutations = { * @param {Object} conversation the conversation api object */ addConversation(state, conversation) { - state.conversations[conversation.id] = conversation + Vue.set(state.conversations, conversation.id, conversation) }, /** * @@ -48,7 +50,7 @@ const mutations = { * @param {string} object.displayName conversation name */ indexConversationName(state, { id, displayName }) { - state.conversationsNames[id] = displayName + Vue.set(state.conversationsNames, id, displayName) } } diff --git a/src/store/index.js b/src/store/index.js index 94d48265f..2e66229d8 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,7 +1,7 @@ /** - * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me> * - * @author John Molakvoæ <skjnldsv@protonmail.com> + * @author Marco Ambrosini <marcoambrosini@pm.me> * * @license GNU AGPL version 3 or any later version * diff --git a/src/store/messages.js b/src/store/messages.js index 0ef0d57b8..8c4e79bf6 100644 --- a/src/store/messages.js +++ b/src/store/messages.js @@ -1,7 +1,7 @@ /** - * @copyright Copyright (c) 2018 Team Popcorn <teampopcornberlin@gmail.com> + * @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me> * - * @author Team Popcorn <teampopcornberlin@gmail.com> + * @author Marco Ambrosini <marcoambrosini@pm.me> * * @license GNU AGPL version 3 or any later version * @@ -23,7 +23,98 @@ const state = { messages: { 1: { - messageText: 'hello' + id: 1, + userName: 'Marco', + messageText: 'Hello everyone', + messageTime: '14:35', + isFirstMessage: true + }, + 2: { + id: 2, + userName: 'Joas', + messageText: 'Please anwser to this message!!!', + messageTime: '14:35', + isFirstMessage: true + }, + 3: { + id: 3, + userName: 'Barth', + messageText: 'Here\'s your answer!', + messageTime: '14:35', + isFirstMessage: true, + parent: 2 + }, + 4: { + id: 4, + userName: 'Marco', + messageText: 'Hayy buddaaayy', + messageTime: '14:35', + isFirstMessage: true + }, + 5: { + id: 5, + userName: 'Marco', + messageText: 'this is a second message from marco and it\'s going to be very very very very very very very very very very very very very very very very very very very very very veryvery very very very very very very very very very very very long very very very very very very very very very very very very very very very very very very very very very veryvery very very very very very very very very very very very long :)', + messageTime: '14:35', + isFirstMessage: false + + }, + 6: { + id: 6, + userName: 'Joas', + messageText: 'Please anwser to this message!!!', + messageTime: '14:35', + isFirstMessage: true + }, + 7: { + id: 7, + userName: 'Barth', + messageText: 'Here\'s your answer!', + messageTime: '14:35', + isFirstMessage: true + }, + 8: { + id: 8, + userName: 'sertdyu', + messageText: 'buddaaayy', + messageTime: '14:35', + isFirstMessage: true + }, + 9: { + id: 9, + userName: 'sertdyu', + messageText: 'buddaaayy', + messageTime: '14:35', + isFirstMessage: true + }, + 10: { + id: 10, + userName: 'Marco', + messageText: 'Hello everyone', + messageTime: '14:35', + isFirstMessage: true + + }, + 11: { + id: 11, + userName: 'Joas', + messageText: 'Please anwser to this message!!!', + messageTime: '14:35', + isFirstMessage: true + }, + 12: { + id: 12, + userName: 'Barth', + messageText: 'Here\'s your answer!', + messageTime: '14:35', + isFirstMessage: true + }, + 13: { + id: 13, + userName: 'sertdyu', + messageText: 'buddaaayy', + messageTime: '14:35', + isFirstMessage: true } } } |