UI done

Signed-off-by: Jakob <jakob.roehrl@web.de>

lib/Collaboration/Resources/ResourceProviderCard.php

@@ -74,7 +74,8 @@ class ResourceProviderCard implements IProvider {
 	 */
 	public function getResourceRichObject(IResource $resource): array {
 		$board = $this->getBoard($resource);
-		$link = \OC::$server->getURLGenerator()->linkToRoute('deck.page.index') . '#!/board/' . $resource->getId();
+		//$link = \OC::$server->getURLGenerator()->linkToRoute('deck.page.index') . '#/board/' . $resource->getId();
+		$link = \OC::$server->getURLGenerator()->linkToRoute('deck.page.index') ;
 
 		return [
 			'type' => self::RESOURCE_TYPE,

src/CardSelector.vue

@@ -21,50 +21,51 @@
   -->
 
 <template>
-	<Modal @close="close">
+	<Modal @close="close" :title="t('deck', 'Select the card to link to a project')">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
-			<h1>{{ t('deck', 'Select the card to link to a project') }}</h1>
+			<Multiselect :placeholder="t('deck', 'Select a board')" v-model="selectedBoard" :options="boards"
-			<ul v-if="!loading">
+				label="title"
-				<li v-for="board in boards" v-if="!currentBoard || ''+board.id !== ''+currentBoard" :class="{'selected': (selectedBoard === board.id) }"
+				@select="fetchCardsFromBoard" />
-					@click="selectedBoard=board.id">
+
-					<span :style="{ 'backgroundColor': '#' + board.color }" class="board-bullet" />
+			<Multiselect :placeholder="t('deck', 'Select a card')" v-model="selectedCard" :options="cardsFromBoard"
-					<span>{{ board.title }}</span>
+						label="title"/>
-				</li>
+
-			</ul>
+			<button :disabled="!isBoardAndStackChoosen" class="primary" @click="select">{{ t('deck', 'Link to card') }}</button>
-			<button v-if="!loading" class="primary" @click="select">{{ t('deck', 'Select board') }}</button>
+			<button @click="close">{{ t('deck', 'Cancel') }}</button>
 		</div>
 	</Modal>
 </template>
 
 <script>
-/* global OC */
 import { Modal } from 'nextcloud-vue/dist/Components/Modal'
-import { Avatar } from 'nextcloud-vue/dist/Components/Avatar'
+import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
 import axios from 'nextcloud-axios'
 
 export default {
 	name: 'CollaborationView',
 	components: {
-		Modal, Avatar
+		Modal, 
+		Multiselect
 	},
 	data() {
 		return {
 			boards: [],
-			selectedBoard: null,
+			selectedBoard: '',
-			loading: true,
+			cardsFromBoard: [],
-			currentBoard: null
+			selectedCard: '',
+			loading: true
 		}
 	},
 	computed: {
-
+		isBoardAndStackChoosen() {
+			if (this.selectedBoard === '' || this.selectedCard === '') {
+				return false
+			}
+			return true
+		}
 	},
 	beforeMount() {
 		this.fetchBoards()
-		if (typeof angular !== 'undefined' && angular.element('#board')) {
-			try {
-				this.currentBoard = angular.element('#board').scope().boardservice.id || null
-			} catch (e) {}
-		}
 	},
 	methods: {
 		fetchBoards() {
@@ -73,11 +74,24 @@ export default {
 				this.loading = false
 			})
 		},
+		async fetchCardsFromBoard(board) {
+			try {
+				this.cardsFromBoard = []
+				let url = OC.generateUrl('/apps/deck/stacks/' + board.id)
+				let response = await axios.get(url)
+				response.data.forEach(stack => {
+					this.cardsFromBoard.push(...stack.cards)
+				})
+			} catch (err) {
+				return err
+			}
+			
+		},
 		close() {
 			this.$root.$emit('close')
 		},
 		select() {
-			this.$root.$emit('select', this.selectedBoard)
+			this.$root.$emit('select', this.selectedCard.id)
 
 		}
 	}
@@ -90,6 +104,7 @@ export default {
 		width: 90vw;
 		max-width: 400px;
 		padding: 20px;
+		height: 500px;
 	}
 	ul {
 		min-height: 100px;
@@ -116,4 +131,7 @@ export default {
 	.avatar {
 		vertical-align: middle;
 	}
+	button {
+		float: right;
+	}
 </style>

src/init-collections-card.js

@@ -1,67 +0,0 @@
-/*
- * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
- *
- * @author Julius Härtl <jus@bitgrid.net>
- *
- * @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 CardSelector from './CardSelector'
-import './../css/collections.css'
-
-'use strict'
-
-/* global __webpack_nonce__ __webpack_public_path__ OC t n */
-// eslint-disable-next-line
-__webpack_nonce__ = btoa(OC.requestToken);
-// eslint-disable-next-line
-__webpack_public_path__ = OC.linkTo('deck', 'js/');
-
-Vue.prototype.t = t
-Vue.prototype.n = n
-Vue.prototype.OC = OC;
-
-((function(OCP) {
-
-	OCP.Collaboration.registerType('deck-card', {
-		action: () => {
-			return new Promise((resolve, reject) => {
-				const container = document.createElement('div')
-				container.id = 'deck-board-select'
-				const body = document.getElementById('body-user')
-				body.append(container)
-				const ComponentVM = new Vue({
-					render: h => h(CardSelector)
-				})
-				ComponentVM.$mount(container)
-				ComponentVM.$root.$on('close', () => {
-					ComponentVM.$el.remove()
-					ComponentVM.$destroy()
-					reject()
-				})
-				ComponentVM.$root.$on('select', (id) => {
-					resolve(id)
-					ComponentVM.$el.remove()
-					ComponentVM.$destroy()
-				})
-			})
-		},
-		typeString: t('deck', 'Link to a card'),
-		typeIconClass: 'icon-deck'
-	})
-})(window.OCP))

src/init-collections.js

@@ -23,6 +23,7 @@
 import Vue from 'vue'
 
 import BoardSelector from './BoardSelector'
+import CardSelector from './CardSelector'
 
 import './../css/collections.css'
 
@@ -66,4 +67,31 @@ Vue.prototype.OC = OC;
 		typeString: t('deck', 'Link to a board'),
 		typeIconClass: 'icon-deck'
 	})
+
+	OCP.Collaboration.registerType('deck-card', {
+		action: () => {
+			return new Promise((resolve, reject) => {
+				const container = document.createElement('div')
+				container.id = 'deck-board-select'
+				const body = document.getElementById('body-user')
+				body.append(container)
+				const ComponentVM = new Vue({
+					render: h => h(CardSelector)
+				})
+				ComponentVM.$mount(container)
+				ComponentVM.$root.$on('close', () => {
+					ComponentVM.$el.remove()
+					ComponentVM.$destroy()
+					reject()
+				})
+				ComponentVM.$root.$on('select', (id) => {
+					resolve(id)
+					ComponentVM.$el.remove()
+					ComponentVM.$destroy()
+				})
+			})
+		},
+		typeString: t('deck', 'Link to a card'),
+		typeIconClass: 'icon-deck'
+	})
 })(window.OCP))

webpack.common.js

@@ -5,7 +5,6 @@ module.exports = {
 	entry: {
 		deck: path.join(__dirname, 'src', 'main.js'),
 		collections: path.join(__dirname, 'src', 'init-collections.js'),
-		collectionscard: path.join(__dirname, 'src', 'init-collections-card.js'),
 	},
 	output: {
 		filename: '[name].js',