Prevent editing not public tasks in lists shared with me

css/src/Calendars/CalendarShares.scss

@@ -23,40 +23,49 @@
  */
 
 .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);
+	.app-navigation-entry {
+		padding-left: 0 !important;
+
+		.avatar {
+			width: 32px;
+			height: 32px;
+			background-color: var(--color-border-dark);
+			background-size: 16px;
 		}
 
-		&:not(.showContent) .multiselect__content-wrapper {
-			display: none;
+		&__utils {
+			.action-checkbox__label {
+				padding-right: 0 !important;
+			}
+
+			.action-checkbox__label::before {
+				margin: 4px 4px 0 !important;
+			}
 		}
+
+		&__multiselect {
+			padding-left: 6px !important;
+
+			.multiselect {
+				width: calc(100% - 14px);
+				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;
+				.multiselect__content-wrapper {
+					z-index: 101 !important;
+				}
+			}
 		}
 	}
 }

css/src/style.scss

@@ -31,6 +31,11 @@
 						display: none;
 					}
 				}
+
+				.app-navigation-entry__utils .icon-loading {
+					height: 32px;
+					width: 32px;
+				}
 			}
 
 			&.edit {

css/tasks.scss

@@ -27,4 +27,3 @@
 
 @import './src/Calendars/Calendar.scss';
 @import './src/Calendars/CalendarShares.scss';
-@import './src/Calendars/CalendarSharee.scss';

src/App.vue

@@ -61,27 +61,34 @@ export default {
 			calendars: state => state.calendars.calendars,
 		}),
 	},
-	beforeMount() {
+	async beforeMount() {
 		// get calendars then get tasks
-		client.connect({ enableCalDAV: true }).then(() => {
-			this.$store.dispatch('getCalendars')
-				.then((calendars) => {
-					// No calendars? Create a new one!
-					if (calendars.length === 0) {
-						let color = '#0082C9'
-						if (this.$OCA.Theming) {
-							color = this.$OCA.Theming.color
-						}
-						this.$store.dispatch('appendCalendar', { displayName: this.$t('tasks', 'Tasks'), color })
-							.then(() => {
-								this.fetchTasks()
-							})
-					// else, let's get those tasks!
-					} else {
-						this.fetchTasks()
-					}
-				})
+		await client.connect({ enableCalDAV: true })
+		await this.$store.dispatch('fetchCurrentUserPrincipal')
+		const calendars = await this.$store.dispatch('getCalendars')
+		const owners = []
+		calendars.forEach((calendar) => {
+			if (owners.indexOf(calendar.owner) === -1) {
+				owners.push(calendar.owner)
+			}
+		})
+		owners.forEach((owner) => {
+			this.$store.dispatch('fetchPrincipalByUrl', {
+				url: owner,
+			})
 		})
+		// No calendars? Create a new one!
+		if (calendars.length === 0) {
+			let color = '#0082C9'
+			if (this.$OCA.Theming) {
+				color = this.$OCA.Theming.color
+			}
+			await this.$store.dispatch('appendCalendar', { displayName: this.$t('tasks', 'Tasks'), color })
+			this.fetchTasks()
+		// else, let's get those tasks!
+		} else {
+			this.fetchTasks()
+		}
 	},
 	methods: {
 		/**

src/components/AppNavigation/CalendarShare.vue

@@ -23,23 +23,25 @@ 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">
+		<ul>
+			<li class="app-navigation-entry__multiselect">
+				<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" />
+			</li>
+			<!-- list of user or groups calendar is shared with -->
 			<CalendarSharee v-for="sharee in calendar.shares"
 				:key="sharee.uri"
 				:sharee="sharee"

src/components/AppNavigation/CalendarSharee.vue

@@ -4,6 +4,9 @@
 @author Team Popcorn <teampopcornberlin@gmail.com>
 @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
 
+@copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>
+@author Georg Ehrke <oc.list@georgehrke.com>
+
 @license GNU AGPL version 3 or any later version
 
 This program is free software: you can redistribute it and/or modify
@@ -22,40 +25,51 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<li class="calendar-sharee">
-		<span :class="{
-				'icon-loading-small': loading,
-				'icon-group': sharee.isGroup && !loading,
-				'icon-user': !sharee.isGroup && !loading
-			}"
-			class="icon" />
-		<span class="calendar-sharee__identifier">
-			{{ sharee.displayName }}
-		</span>
-		<span class="calendar-sharee__utils">
-			<input
-				:id="uid"
-				:checked="writeable"
+	<AppNavigationItem
+		:title="sharee.displayName">
+		<template slot="icon">
+			<div v-if="sharee.isGroup" class="avatar icon-group" />
+			<div v-else-if="sharee.isCircle" class="avatar icon-circle" />
+			<Avatar v-else
+				:user="sharee.id"
+				:display-name="sharee.displayName"
+				:disable-menu="true" />
+		</template>
+
+		<template slot="counter">
+			<ActionCheckbox
 				:disabled="loading"
-				class="checkbox"
-				name="editable"
-				type="checkbox"
-				@change="editSharee">
-			<label :for="uid">
+				:checked="writeable"
+				@update:checked="editSharee">
 				{{ $t('tasks', 'can edit') }}
-			</label>
-			<a :class="{'calendar-sharee__utils--disabled': loading}"
-				href="#"
-				title="Delete"
-				class="icon-delete"
-				@click="deleteSharee" />
-		</span>
-	</li>
+			</ActionCheckbox>
+		</template>
+
+		<template slot="actions">
+			<ActionButton
+				icon="icon-delete"
+				:disabled="loading"
+				@click.prevent.stop="deleteSharee">
+				{{ $t('tasks', 'Unshare with {displayName}', { displayName: sharee.displayName }) }}
+			</ActionButton>
+		</template>
+	</AppNavigationItem>
 </template>
 
 <script>
+import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
+import { ActionCheckbox } from '@nextcloud/vue/dist/Components/ActionCheckbox'
+import { AppNavigationItem } from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import { Avatar } from '@nextcloud/vue/dist/Components/Avatar'
+
 export default {
 	name: 'CalendarSharee',
+	components: {
+		ActionButton,
+		ActionCheckbox,
+		AppNavigationItem,
+		Avatar,
+	},
 	props: {
 		calendar: {
 			type: Object,