Move to card selector modal

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/CardSelector.vue

@@ -21,21 +21,37 @@
   -->
 
 <template>
-	<Modal :title="t('deck', 'Select the card to link to a project')" @close="close">
+	<Modal class="card-selector" @close="close">
 		<div id="modal-inner" :class="{ 'icon-loading': loading }">
+			<h3>{{ title }}</h3>
 			<Multiselect v-model="selectedBoard"
 				:placeholder="t('deck', 'Select a board')"
 				:options="boards"
+				:disabled="loading"
 				label="title"
-				@select="fetchCardsFromBoard" />
+				@select="fetchCardsFromBoard">
+				<template slot="singleLabel" slot-scope="props">
+					<span>
+						<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
+						<span>{{ props.option.title }}</span>
+					</span>
+				</template>
+				<template slot="option" slot-scope="props">
+					<span>
+						<span :style="{ 'backgroundColor': '#' + props.option.color }" class="board-bullet" />
+						<span>{{ props.option.title }}</span>
+					</span>
+				</template>
+			</Multiselect>
 
 			<Multiselect v-model="selectedCard"
 				:placeholder="t('deck', 'Select a card')"
 				:options="cardsFromBoard"
+				:disabled="loading || selectedBoard === ''"
 				label="title" />
 
 			<button :disabled="!isBoardAndStackChoosen" class="primary" @click="select">
-				{{ t('deck', 'Link to card') }}
+				{{ action }}
 			</button>
 			<button @click="close">
 				{{ t('deck', 'Cancel') }}
@@ -56,6 +72,16 @@ export default {
 		Modal,
 		Multiselect,
 	},
+	props: {
+		title: {
+			type: String,
+			default: t('deck', 'Select the card to link to a project'),
+		},
+		action: {
+			type: String,
+			default: t('deck', 'Link to card'),
+		},
+	},
 	data() {
 		return {
 			boards: [],
@@ -67,10 +93,7 @@ export default {
 	},
 	computed: {
 		isBoardAndStackChoosen() {
-			if (this.selectedBoard === '' || this.selectedCard === '') {
+			return !(this.selectedBoard === '' || this.selectedCard === '')
-				return false
-			}
-			return true
 		},
 	},
 	beforeMount() {
@@ -113,7 +136,12 @@ export default {
 		width: 90vw;
 		max-width: 400px;
 		padding: 20px;
-		height: 500px;
+		height: 200px;
+	}
+
+	.multiselect {
+		width: 100%;
+		margin-bottom: 10px;
 	}
 
 	ul {
@@ -129,10 +157,6 @@ export default {
 		background-color: var(--color-background-dark);
 	}
 
-	li.selected {
-		border: 1px solid var(--color-primary);
-	}
-
 	.board-bullet {
 		display: inline-block;
 		width: 12px;
@@ -142,12 +166,11 @@ export default {
 		cursor: pointer;
 	}
 
-	li > span,
-	.avatar {
-		vertical-align: middle;
-	}
-
 	button {
 		float: right;
 	}
+
+	.card-selector::v-deep .modal-container {
+		overflow: visible !important;
+	}
 </style>

src/components/card/AttachmentList.vue

@@ -182,7 +182,7 @@ export default {
 			immediate: true,
 			handler() {
 				this.$store.dispatch('fetchAttachments', this.cardId)
-			}
+			},
 		},
 	},
 	methods: {

src/init-collections.js

@@ -24,9 +24,8 @@ import Vue from 'vue'
 
 import BoardSelector from './BoardSelector'
 import CardSelector from './CardSelector'
-
 import './../css/collections.css'
-
+import FileSharingPicker from './views/FileSharingPicker'
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(OC.requestToken);
 // eslint-disable-next-line
@@ -34,7 +33,15 @@ __webpack_public_path__ = OC.linkTo('deck', 'js/');
 
 Vue.prototype.t = t
 Vue.prototype.n = n
-Vue.prototype.OC = OC;
+Vue.prototype.OC = OC
+
+window.addEventListener('DOMContentLoaded', () => {
+	if (OCA.Sharing && OCA.Sharing.ShareSearch) {
+		OCA.Sharing.ShareSearch.addNewResult(FileSharingPicker)
+	} else {
+		console.error('OCA.Sharing.ShareSearch not ready')
+	}
+});
 
 ((function(OCP) {
 

src/services/SharingApi.js

@@ -0,0 +1,43 @@
+/*
+ * @copyright Copyright (c) 2020 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 axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+
+const shareUrl = generateOcsUrl('apps/files_sharing/api/v1', 2) + 'shares'
+
+const createShare = async function({ path, permissions, shareType, shareWith, publicUpload, password, sendPasswordByTalk, expireDate, label }) {
+	try {
+		const request = await axios.post(shareUrl, { path, permissions, shareType, shareWith, publicUpload, password, sendPasswordByTalk, expireDate, label })
+		if (!request?.data?.ocs) {
+			throw request
+		}
+		return request
+	} catch (error) {
+		console.error('Error while creating share', error)
+		OC.Notification.showTemporary(t('files_sharing', 'Error creating the share'), { type: 'error' })
+		throw error
+	}
+}
+
+export {
+	createShare,
+}

src/views/FileSharingPicker.js

@@ -0,0 +1,64 @@
+/*
+ * @copyright Copyright (c) 2020 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 { createShare } from '../services/SharingApi'
+
+export default {
+	icon: 'icon-deck',
+	displayName: t('deck', 'Share with a Deck card'),
+	handler: async self => {
+
+		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 SelectorView = Vue.extend(CardSelector)
+			const ComponentVM = new SelectorView({
+				propsData: {
+					title: t('deck', 'Share {file} with a Deck card', { file: decodeURIComponent(self.fileInfo.name) }),
+					action: t('deck', 'Share'),
+				},
+			})
+			ComponentVM.$mount(container)
+			ComponentVM.$root.$on('close', () => {
+				ComponentVM.$el.remove()
+				ComponentVM.$destroy()
+				reject(new Error('Canceled'))
+			})
+			ComponentVM.$root.$on('select', async(id) => {
+				const result = await createShare({
+					path: self.fileInfo.path + '/' + self.fileInfo.name,
+					shareType: 12,
+					shareWith: '' + id,
+				})
+				ComponentVM.$el.remove()
+				ComponentVM.$destroy()
+				resolve(result.data.ocs.data)
+			})
+
+		})
+	},
+	condition: self => true,
+}