diff options
| -rw-r--r-- | package-lock.json | 5 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/App.vue | 12 | ||||
| -rw-r--r-- | src/components/ConversationsList/ConversationsList.vue | 3 | ||||
| -rw-r--r-- | src/components/MessageList/MessageList.vue | 194 | ||||
| -rw-r--r-- | src/components/MessagesList/Message/Message.vue (renamed from src/components/Message/Message.vue) | 0 | ||||
| -rw-r--r-- | src/components/MessagesList/Message/MessageBody.vue (renamed from src/components/Message/MessageBody.vue) | 0 | ||||
| -rw-r--r-- | src/components/MessagesList/MessagesList.vue | 84 | ||||
| -rw-r--r-- | src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue (renamed from src/components/AdvancedInput/AdvancedInput.vue) | 0 | ||||
| -rw-r--r-- | src/components/NewMessageForm/NewMessageForm.vue | 2 | ||||
| -rw-r--r-- | src/main.js | 4 | ||||
| -rw-r--r-- | src/router/router.js | 51 | ||||
| -rw-r--r-- | src/services/messagesService.js | 4 | ||||
| -rw-r--r-- | src/store/messages.js | 3 | ||||
| -rw-r--r-- | src/views/ChatView.vue | 32 | ||||
| -rw-r--r-- | src/views/WelcomeView.vue | 22 |
16 files changed, 208 insertions, 209 deletions
diff --git a/package-lock.json b/package-lock.json index 85834191c..9c568683b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10394,6 +10394,11 @@ "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz", "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==" }, + "vue-router": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz", + "integrity": "sha512-8iSa4mGNXBjyuSZFCCO4fiKfvzqk+mhL0lnKuGcQtO1eoj8nq3CmbEG8FwK5QqoqwDgsjsf1GDuisDX4cdb/aQ==" + }, "vue-style-loader": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", diff --git a/package.json b/package.json index a987fbded..f4e04e4b1 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "nextcloud-vue": "^0.12.3", "vue": "^2.6.10", "vue-contenteditable-directive": "^1.2.0", + "vue-router": "^3.1.3", "vue-virtual-scroller": "^1.0.0-rc.2", "vuex": "^3.1.1" }, diff --git a/src/App.vue b/src/App.vue index f681d4d8a..01700c668 100644 --- a/src/App.vue +++ b/src/App.vue @@ -35,11 +35,7 @@ </AppNavigationSettings> </AppNavigation> <AppContent> - <!--<button @click="show = !show"> - Toggle sidebar - </button>--> - <MessageList /> - <NewMessageForm /> + <router-view /> </AppContent> <AppSidebar v-show="show" title="christmas-image-2018-12-25-00:01:12.jpg" subtitle="4,3 MB, last edited 41 days ago" :actions="menu" :starred.sync="starred" @@ -70,8 +66,6 @@ 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 MessageList from './components/MessageList/MessageList' -import NewMessageForm from './components/NewMessageForm/NewMessageForm' import ConversationsList from './components/ConversationsList/ConversationsList' import { fetchConversations } from './services/conversationsService' @@ -85,9 +79,7 @@ export default { AppNavigationSettings, AppSidebar, AppSidebarTab, - ConversationsList, - MessageList, - NewMessageForm + ConversationsList }, data: function() { return { diff --git a/src/components/ConversationsList/ConversationsList.vue b/src/components/ConversationsList/ConversationsList.vue index c9e93fe6b..c6420247c 100644 --- a/src/components/ConversationsList/ConversationsList.vue +++ b/src/components/ConversationsList/ConversationsList.vue @@ -1,7 +1,7 @@ <!-- - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me> - - - @author Marco Ambrosini <marcoambrosini@pm.me> + - @author Marco Ambrosini <marcoambrosini@pm.me - - @license GNU AGPL version 3 or any later version - @@ -24,6 +24,7 @@ <AppNavigationItem v-for="item of conversationsList" :key="item.id" + :to="{ name: 'conversation', params: { token: item.token }}" :title="item.displayName"> <Avatar slot="icon" :user="item.displayName" :display-name="item.displayName" /> <AppNavigationCounter slot="counter" :highlighted="true"> diff --git a/src/components/MessageList/MessageList.vue b/src/components/MessageList/MessageList.vue deleted file mode 100644 index 0c340e009..000000000 --- a/src/components/MessageList/MessageList.vue +++ /dev/null @@ -1,194 +0,0 @@ -<!-- - - @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> - <DynamicScroller - :items="messageList" - :min-item-size="60" - class="scroller"> - <template v-slot="{ item, index, active }"> - <DynamicScrollerItem - :item="item" - :active="active" - :size-dependencies="[ - item.messageText, - ]" - :data-index="item.id"> - <Message v-bind="item"> - <MessageBody v-bind="item"> - <MessageBody v-if="item.parent" v-bind="messagesOld[item.parent]" /> - </MessageBody> - </Message> - </DynamicScrollerItem> - </template> - </DynamicScroller> -</template> - -<script> -import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller/dist/vue-virtual-scroller.umd.js' -import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' -import Message from '../Message/Message' -import MessageBody from '../Message/MessageBody' - -export default { - name: 'MessageList', - components: { - DynamicScroller, - DynamicScrollerItem, - Message, - MessageBody - }, - data: function() { - return { - messagesOld: { - 1: { - 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 - } - } - } - }, - computed: { - messagesArray() { - return new Array(200).fill(0).map((x, id) => { - return { - messageText: 'Whatever', - messageTime: '14:30', - id, - userName: 'Skjnldsv', - isFirstMessage: true - } - }) - }, - - messageList() { - return this.$store.getters.messagesList - }, - - messages() { - const messages = {} - this.messagesArray.forEach(message => { - messages[message.id] = message - }) - return messages - }, - messagesOldArray() { - return Object.values(this.messagesOld) - } - } -} -</script> - -<style lang="scss" scoped> -.scroller { - flex: 1 0; -} -</style> diff --git a/src/components/Message/Message.vue b/src/components/MessagesList/Message/Message.vue index ea3d0146c..ea3d0146c 100644 --- a/src/components/Message/Message.vue +++ b/src/components/MessagesList/Message/Message.vue diff --git a/src/components/Message/MessageBody.vue b/src/components/MessagesList/Message/MessageBody.vue index 3a85158b8..3a85158b8 100644 --- a/src/components/Message/MessageBody.vue +++ b/src/components/MessagesList/Message/MessageBody.vue diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue new file mode 100644 index 000000000..7b08c4ec4 --- /dev/null +++ b/src/components/MessagesList/MessagesList.vue @@ -0,0 +1,84 @@ +<!-- + - @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> + <DynamicScroller + :items="messagesList" + :min-item-size="60" + class="scroller"> + <template v-slot="{ item, index, active }"> + <DynamicScrollerItem + :item="item" + :active="active" + :size-dependencies="[ + item.messageText, + ]" + :data-index="item.id"> + <Message v-bind="item"> + <MessageBody v-bind="item"> + <MessageBody v-if="item.parent" v-bind="messages[item.parent]" /> + </MessageBody> + </Message> + </DynamicScrollerItem> + </template> + </DynamicScroller> +</template> + +<script> +import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller/dist/vue-virtual-scroller.umd.js' +import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' +import Message from './Message/Message' +import MessageBody from './Message/MessageBody' + +export default { + name: 'MessagesList', + components: { + DynamicScroller, + DynamicScrollerItem, + Message, + MessageBody + }, + props: { + token: { + type: String, + required: true + } + }, + data: function() { + return { + } + }, + computed: { + messagesList() { + return this.$store.getters.messagesList + }, + messages() { + return this.$store.getters.messages + } + } +} +</script> + +<style lang="scss" scoped> +.scroller { + flex: 1 0; +} +</style> diff --git a/src/components/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue index 8f127023d..8f127023d 100644 --- a/src/components/AdvancedInput/AdvancedInput.vue +++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index adb4c35ed..7a65d3f14 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -32,7 +32,7 @@ </template> <script> -import AdvancedInput from '../AdvancedInput/AdvancedInput' +import AdvancedInput from './AdvancedInput/AdvancedInput' export default { name: 'NewMessageForm', diff --git a/src/main.js b/src/main.js index aebca25ed..6ba649a73 100644 --- a/src/main.js +++ b/src/main.js @@ -24,6 +24,8 @@ import App from './App' import Vuex from 'vuex' import contenteditableDirective from 'vue-contenteditable-directive' import store from './store' +import VueRouter from 'vue-router' +import router from './router/router' import { generateFilePath } from 'nextcloud-router' import { getRequestToken } from 'nextcloud-auth' @@ -45,9 +47,11 @@ Vue.prototype.OCA = OCA Vue.use(contenteditableDirective) Vue.use(Vuex) +Vue.use(VueRouter) export default new Vue({ el: '#content', store, + router, render: h => h(App) }) diff --git a/src/router/router.js b/src/router/router.js new file mode 100644 index 000000000..c8717b176 --- /dev/null +++ b/src/router/router.js @@ -0,0 +1,51 @@ +/** + * @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 Vue from 'vue' +import Router from 'vue-router' +import { generateUrl } from 'nextcloud-router' +import WelcomeView from '../views/WelcomeView.vue' +import ChatView from '../views/ChatView.vue' + +Vue.use(Router) + +export default new Router({ + mode: 'history', + // if index.php is in the url AND we got this far, then it's working: + // let's keep using index.php in the url + base: generateUrl('/', ''), + linkActiveClass: 'active', + routes: [ + { + path: '/apps/spreed', + name: 'root', + component: WelcomeView, + props: true + }, + { + path: '/call/:token', + name: 'conversation', + component: ChatView, + props: true + } + ] +}) diff --git a/src/services/messagesService.js b/src/services/messagesService.js index 5807d1089..054e1773d 100644 --- a/src/services/messagesService.js +++ b/src/services/messagesService.js @@ -23,7 +23,7 @@ import axios from 'nextcloud-axios' import { generateOcsUrl } from 'nextcloud-router' -const fetchConversations = async function() { +const fetchMessages = async function() { try { const response = await axios.get(generateOcsUrl('apps/spreed/api/v1', 2) + `/room/{${token}}`) return response @@ -32,4 +32,4 @@ const fetchConversations = async function() { } } -export { fetchConversations } +export { fetchMessages } diff --git a/src/store/messages.js b/src/store/messages.js index 8c4e79bf6..54db8144e 100644 --- a/src/store/messages.js +++ b/src/store/messages.js @@ -120,7 +120,8 @@ const state = { } const getters = { - messagesList: state => Object.values(state.messages) + messagesList: state => Object.values(state.messages), + messages: state => state.messages } const mutations = { diff --git a/src/views/ChatView.vue b/src/views/ChatView.vue new file mode 100644 index 000000000..0f04fde0e --- /dev/null +++ b/src/views/ChatView.vue @@ -0,0 +1,32 @@ +<template> + <div class="chatview"> + <MessagesList :token="token" /> + <NewMessageForm /> + </div> +</template> + +<script> +import MessagesList from '../components/MessagesList/MessagesList' +import NewMessageForm from '../components/NewMessageForm/NewMessageForm' + +export default { + name: 'ChatView', + components: { + MessagesList, + NewMessageForm + }, + props: { + token: { + type: String, + required: true + } + } +} +</script> + +<style lang="scss" scoped> +.chatview { + display: flex; + flex-direction: column; +} +</style> diff --git a/src/views/WelcomeView.vue b/src/views/WelcomeView.vue new file mode 100644 index 000000000..d705384d7 --- /dev/null +++ b/src/views/WelcomeView.vue @@ -0,0 +1,22 @@ +<template> + <div id="emptycontent"> + <div id="emptycontent-icon" class="icon-talk" /> + <h2>{{ t('spreed', 'Join a conversation or start a new one') }}</h2> + <p class="emptycontent-additional"> + {{ t('spreed','Say hi to your friends and colleagues!') }} + </p> + <div id="shareRoomContainer"> + <!-- <input id="shareRoomInput" class="share-room-input hidden" readonly="readonly" type="text"/> + <div id="shareRoomClipboardButton" class="shareRoomClipboard icon-clippy hidden" data-clipboard-target="#shareRoomInput"></div> --> + </div> + </div> +</template> + +<script> +export default { + name: 'WelcomeView' +} +</script> + +<style lang="scss" scoped> +</style> |