Implement sharing menu in calendar list

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

css/src/Calendars/Calendar.scss

@@ -0,0 +1,64 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Team Popcorn <teampopcornberlin@gmail.com>
+ * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @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/>.
+ *
+ */
+
+.calendar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+
+	> a:first-of-type {
+		// put actions at the end
+		margin-left: auto;
+	}
+
+	&__name {
+		display: block;
+		flex: 0 1 auto;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	&__share,
+	&__menu .icon-more {
+		width: 44px;
+		height: 44px;
+		opacity: .5;
+		cursor: pointer;
+		&:hover,
+		&:focus,
+		&:active {
+			opacity: .7;
+		}
+	}
+	&__share {
+		&--shared {
+			opacity: .7;
+		}
+	}
+	&--disabled &__name {
+		opacity: .5;
+	}
+}

css/src/Calendars/CalendarSharee.scss

@@ -0,0 +1,85 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Team Popcorn <teampopcornberlin@gmail.com>
+ * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @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/>.
+ *
+ */
+
+.calendar-sharee {
+	padding: 0 5px;
+	display: inline-flex;
+	align-items: center;
+	width: 100%;
+
+	.icon {
+		margin-right: 5px;
+		opacity: 0.2;
+		width: 16px;
+		height: 16px;
+		display: inline-block;
+		margin-bottom: 2px;
+		&.icon-loading-small {
+			opacity: 1;
+		}
+	}
+
+	&__identifier {
+		width: 100%;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		display: inline-block;
+		vertical-align: top;
+		opacity: 0.7;
+	}
+
+	&__utils {
+		padding: 0 !important;
+		float: right;
+		position: relative !important;
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+		height: 20px;
+
+		.icon-delete {
+			display: inline-block;
+			width: 20px;
+			height: 20px;
+			opacity: 0.4;
+			margin-bottom: 2px;
+			margin-left: 4px;
+			&:hover {
+				box-shadow: unset !important;
+			}
+		}
+
+		// loading state
+		&--disabled {
+			opacity: .2 !important;
+		}
+		.checkbox + label {
+			padding: 0 !important;
+		}
+		label {
+			opacity: 0.7;
+		}
+	}
+}

css/src/Calendars/CalendarShares.scss

@@ -0,0 +1,62 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ * @author Team Popcorn <teampopcornberlin@gmail.com>
+ * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @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/>.
+ *
+ */
+
+.calendar-shares {
+	width: calc(100% - 6px);
+	margin: 6px;
+	&__list {
+		margin-top: 8px;
+		margin-bottom: 12px;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__shareematch--bold {
+		font-weight: bold;
+	}
+
+	.icon-loading::after {
+		top: 70%;
+		left: 95%;
+		height: 14px;
+		width: 14px;
+	}
+
+	.multiselect {
+		width: inherit;
+		margin: 0;
+		.multiselect__tags:focus-within, 
+		.multiselect__tags:hover {
+			border-color: var(--color-primary-element);
+		}
+
+		&:not(.showContent) .multiselect__content-wrapper {
+			display: none;
+		}
+
+		.multiselect__content-wrapper {
+			z-index: 101 !important;
+		}
+	}
+}

css/src/style.scss

@@ -47,8 +47,11 @@
 				display: none;
 			}
 
-			&.list:not(.active) .app-navigation-entry-utils-menu-button {
-				display: none;
+			&.list:not(.active) {
+				.app-navigation-entry-utils-menu-button,
+				.calendar__share {
+					display: none;
+				}
 			}
 
 			.app-navigation-entry-edit {

css/tasks.scss

@@ -24,3 +24,7 @@
 @import './src/sprites-bw';
 @import './src/style';
 @import './src/markdown';
+
+@import './src/Calendars/Calendar.scss';
+@import './src/Calendars/CalendarShares.scss';
+@import './src/Calendars/CalendarSharee.scss';

src/components/CalendarShare.vue

@@ -0,0 +1,140 @@
+<!--
+@copyright Copyright (c) 2018 Team Popcorn <teampopcornberlin@gmail.com>
+
+@author Team Popcorn <teampopcornberlin@gmail.com>
+@author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+
+@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 class="calendar-shares">
+		<multiselect
+			id="users-groups-search"
+			:options="usersOrGroups"
+			:searchable="true"
+			:internal-search="false"
+			:max-height="600"
+			:show-no-results="true"
+			:placeholder="placeholder"
+			:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
+			:user-select="true"
+			open-direction="bottom"
+			track-by="user"
+			label="user"
+			@search-change="findSharee"
+			@input="shareCalendar"
+		/>
+		<!-- list of user or groups calendar is shared with -->
+		<ul v-if="calendar.shares.length > 0" class="calendar-shares__list">
+			<calendar-sharee v-for="sharee in calendar.shares" :key="sharee.uri"
+				:sharee="sharee" :calendar="calendar"
+			/>
+		</ul>
+	</div>
+</template>
+
+<script>
+import client from '../services/cdav'
+import { Multiselect } from 'nextcloud-vue'
+
+import calendarSharee from './CalendarSharee'
+// import debounce from 'debounce'
+
+export default {
+	name: 'ShareCalendar',
+	components: {
+		calendarSharee,
+		Multiselect
+	},
+	props: {
+		calendar: {
+			type: Object,
+			default() {
+				return {}
+			}
+		}
+	},
+	data() {
+		return {
+			isLoading: false,
+			inputGiven: false,
+			usersOrGroups: []
+		}
+	},
+	computed: {
+		placeholder() {
+			return t('tasks', 'Share with users or groups')
+		},
+		noResult() {
+			return t('tasks', 'No users or groups')
+		}
+	},
+	mounted() {
+		// This ensures that the multiselect input is in focus as soon as the user clicks share
+		document.getElementById('users-groups-search').focus()
+	},
+	methods: {
+		/**
+		 * Share calendar
+		 *
+		 * @param {Object} data destructuring object
+		 * @param {string} data.user the userId
+		 * @param {string} data.displayName the displayName
+		 * @param {string} data.uri the sharing principalScheme uri
+		 * @param {boolean} data.isGroup is this a group ?
+		 */
+		shareCalendar({ user, displayName, uri, isGroup }) {
+			let calendar = this.calendar
+			uri = decodeURI(uri)
+			user = decodeURI(user)
+			this.$store.dispatch('shareCalendar', { calendar, user, displayName, uri, isGroup })
+		},
+
+		/**
+		 * Use the cdav client call to find matches to the query from the existing Users & Groups
+		 *
+		 * @param {string} query The query string
+		 */
+		findSharee: async function(query) {
+			this.isLoading = true
+			this.usersOrGroups = []
+			if (query.length > 0) {
+				const results = await client.principalPropertySearchByDisplayname(query)
+				this.usersOrGroups = results.reduce((list, result) => {
+					if	(['GROUP', 'INDIVIDUAL'].indexOf(result.calendarUserType) > -1) {
+						const isGroup = result.calendarUserType === 'GROUP'
+						list.push({
+							user: result[isGroup ? 'groupId' : 'userId'],
+							displayName: result.displayname,
+							icon: isGroup ? 'icon-group' : 'icon-user',
+							uri: result.principalScheme,
+							isGroup
+						})
+					}
+					return list
+				}, [])
+				this.isLoading = false
+				this.inputGiven = true
+			} else {
+				this.inputGiven = false
+				this.isLoading = false
+			}
+		}
+	}
+}
+</script>