start

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

js/deck-dark.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16">
+  <rect ry="1" height="8" width="14" y="7" x="1"/>
+  <rect ry=".5" height="1" width="12" y="5" x="2"/>
+  <rect ry=".5" height="1" width="10" y="3" x="3"/>
+  <rect ry=".5" height="1" width="8" y="1" x="4"/>
+</svg>

js/webpack.config.js

@@ -9,7 +9,7 @@ module.exports = {
 	},
 	entry: {
 		deck: ['./init.js'],
-		collections: ['./init-collections.js']
+		//collections: ['./src/init-collections.js']
 	},
 	output: {
 		filename: '[name].js',

src/BoardSelector.vue

@@ -0,0 +1,119 @@
+<!--
+  - @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/>.
+  -
+  -->
+
+<template>
+	<Modal @close="close">
+		<div id="modal-inner" :class="{ 'icon-loading': loading }">
+			<h1>{{ t('deck', 'Select the board to link to a project') }}</h1>
+			<ul v-if="!loading">
+				<li v-for="board in boards" v-if="!currentBoard || ''+board.id !== ''+currentBoard" :class="{'selected': (selectedBoard === board.id) }"
+					@click="selectedBoard=board.id">
+					<span :style="{ 'backgroundColor': '#' + board.color }" class="board-bullet" />
+					<span>{{ board.title }}</span>
+				</li>
+			</ul>
+			<button v-if="!loading" class="primary" @click="select">{{ t('deck', 'Select board') }}</button>
+		</div>
+	</Modal>
+</template>
+<style scoped>
+	#modal-inner {
+		width: 90vw;
+		max-width: 400px;
+		padding: 20px;
+	}
+	ul {
+		min-height: 100px;
+	}
+	li {
+		padding: 6px;
+		border: 1px solid transparent;
+	}
+	li:hover, li:focus {
+		background-color: var(--color-background-dark);
+	}
+	li.selected {
+		border: 1px solid var(--color-primary);
+	}
+	.board-bullet {
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		border: none;
+		border-radius: 50%;
+		cursor: pointer;
+	}
+	li > span,
+	.avatar {
+		vertical-align: middle;
+
+	}
+
+</style>
+<script>
+/* global OC */
+import { Modal } from 'nextcloud-vue/dist/Components/Modal'
+import { Avatar } from 'nextcloud-vue/dist/Components/Avatar'
+import axios from 'nextcloud-axios'
+
+export default {
+	name: 'CollaborationView',
+	components: {
+		Modal, Avatar
+	},
+	data() {
+		return {
+			boards: [],
+			selectedBoard: null,
+			loading: true,
+			currentBoard: null
+		}
+	},
+	computed: {
+
+	},
+	beforeMount() {
+		this.fetchBoards()
+		if (typeof angular !== 'undefined' && angular.element('#board')) {
+			try {
+				this.currentBoard = angular.element('#board').scope().boardservice.id || null
+			} catch (e) {}
+		}
+	},
+	methods: {
+		fetchBoards() {
+			axios.get(OC.generateUrl('/apps/deck/boards')).then((response) => {
+				this.boards = response.data
+				this.loading = false
+			})
+		},
+		close() {
+			this.$root.$emit('close')
+		},
+		select() {
+			this.$root.$emit('select', this.selectedBoard)
+
+		}
+	}
+
+}
+</script>

src/init-collections.js

@@ -20,50 +20,50 @@
  *
  */
 
-'use strict';
+import Vue from 'vue'
+
+import BoardSelector from './BoardSelector'
+
+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/build/');
+__webpack_public_path__ = OC.linkTo('deck', 'js/');
 
-import Vue from 'vue';
-
-Vue.prototype.t = t;
-Vue.prototype.n = n;
+Vue.prototype.t = t
+Vue.prototype.n = n
 Vue.prototype.OC = OC;
 
-import BoardSelector from './views/BoardSelector';
-
-import './../css/collections.css';
-
 ((function(OCP) {
 
 	OCP.Collaboration.registerType('deck', {
 		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 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(BoardSelector),
-				});
-				ComponentVM.$mount(container);
+					render: h => h(BoardSelector)
+				})
+				ComponentVM.$mount(container)
 				ComponentVM.$root.$on('close', () => {
-					ComponentVM.$el.remove();
-					ComponentVM.$destroy();
-					reject();
-				});
+					ComponentVM.$el.remove()
+					ComponentVM.$destroy()
+					reject()
+				})
 				ComponentVM.$root.$on('select', (id) => {
-					resolve(id);
-					ComponentVM.$el.remove();
-					ComponentVM.$destroy();
-				});
-			});
+					resolve(id)
+					ComponentVM.$el.remove()
+					ComponentVM.$destroy()
+				})
+			})
 		},
 		typeString: t('deck', 'Link to a board'),
 		typeIconClass: 'icon-deck'
-	});
-})(window.OCP));
+	})
+})(window.OCP))

webpack.common.js

@@ -2,11 +2,14 @@ const path = require('path');
 const { VueLoaderPlugin } = require('vue-loader');
 
 module.exports = {
-	entry: path.join(__dirname, 'src', 'main.js'),
+	entry: {
+		deck: path.join(__dirname, 'src', 'main.js'),
+		collections: ['./src/init-collections.js']
+	},
 	output: {
-		path: path.resolve(__dirname, './js'),
+		filename: '[name].js',
+		path: __dirname + '/js',
 		publicPath: '/js/',
-		filename: 'deck.js',
 		jsonpFunction: 'webpackJsonpOCADeck'
 	},
 	module: {