show owner avatar next to shared calendar

Signed-off-by: Georg Ehrke <developer@georgehrke.com>

.eslintrc.js

@@ -63,7 +63,8 @@ module.exports = {
 		}],
 		// es6 import/export and require
 		'node/no-unpublished-require': ['off'],
-		'node/no-unsupported-features': ['off'],
+		'node/no-unsupported-features/es-syntax': ['off'],
+		'node/no-unsupported-features/es-builtins': ['off'],
 		// space before self-closing elements
 		'vue/html-closing-bracket-spacing': 'error',
 		// code spacing with attributes

css/app/calendarlist.scss

@@ -127,6 +127,21 @@
 
 			li.app-navigation-entry-utils-menu-button {
 
+				&.owner-avatar {
+					display: flex;
+					width: 60px !important;
+
+					.avatardiv {
+						margin: 6px 0;
+
+						.popovermenu {
+							> ul > li {
+								width: auto !important;
+							}
+						}
+					}
+				}
+
 				button.icon-public,
 				button.icon-shared {
 					opacity: 1 !important;

src/components/AppNavigation/CalendarListItem.vue

@@ -8,8 +8,11 @@
 		<div class="app-navigation-entry-utils">
 			<ul>
 				<!-- share popovermenu -->
-				<li v-if="showSharingIcon" class="app-navigation-entry-utils-menu-button">
+				<li v-if="showSharingIcon" :class="{'owner-avatar': isSharedWithMe}" class="app-navigation-entry-utils-menu-button">
 					<button :class="{'icon-public': isPublished, 'icon-shared': !isPublished && isShared, 'icon-share': !isPublished && !isShared}" @click="toggleShareMenu" />
+					<!-- TODO this needs a tooltip saying "shared with you by .... " -->
+					<avatar v-if="isSharedWithMe && loadedOwnerPrincipal" :user="ownerUserId" :display-name="ownerDisplayname" />
+					<div v-if="isSharedWithMe && !loadedOwnerPrincipal" class="icon icon-loading" />
 				</li>
 
 				<!-- more popovermenu -->
@@ -28,13 +31,14 @@
 </template>
 
 <script>
-import { PopoverMenu } from 'nextcloud-vue'
+import { Avatar, PopoverMenu } from 'nextcloud-vue'
 import ClickOutside from 'vue-click-outside'
 import CalendarListItemSharing from './CalendarListItemSharing.vue'
 
 export default {
 	name: 'CalendarListItem',
 	components: {
+		Avatar,
 		CalendarListItemSharing,
 		PopoverMenu
 	},
@@ -92,6 +96,54 @@ export default {
 		isPublished() {
 			return !!this.calendar.publishURL
 		},
+		isSharedWithMe() {
+			return this.calendar.isSharedWithMe
+		},
+		owner() {
+			console.debug('OWNER FOO BAR TRALAALALALALALALALALALA')
+			console.debug('OWNER FOO BAR TRALAALALALALALALALALALA')
+			console.debug('OWNER FOO BAR TRALAALALALALALALALALALA')
+			console.debug('OWNER FOO BAR TRALAALALALALALALALALALA')
+			console.debug('OWNER FOO BAR TRALAALALALALALALALALALA')
+			console.debug('OWNER FOO BAR TRALAALALALALALALALALALA')
+			console.debug('OWNER FOO BAR TRALAALALALALALALALALALA')
+			console.debug('OWNER FOO BAR TRALAALALALALALALALALALA')
+			console.debug('OWNER FOO BAR TRALAALALALALALALALALALA')
+			console.debug('OWNER FOO BAR TRALAALALALALALALALALALA')
+			console.debug('OWNER FOO BAR TRALAALALALALALALALALALA')
+
+			console.debug(this.calendar.owner)
+			console.debug(this.calendar)
+
+			if (this.calendar.owner.indexOf('principal:principals/users/') === '0') {
+				console.debug(this.calendar.owner.substr(27))
+				return this.calendar.owner.substr(27)
+			}
+
+			return ''
+		},
+		loadedOwnerPrincipal() {
+			console.debug(this.calendar.owner)
+			console.debug(this.$store.getters.getPrincipalByUrl(this.calendar.owner))
+			console.debug(this.$store.getters.getPrincipalByUrl(this.calendar.owner) !== undefined)
+			return this.$store.getters.getPrincipalByUrl(this.calendar.owner) !== undefined
+		},
+		ownerUserId() {
+			const principal = this.$store.getters.getPrincipalByUrl(this.calendar.owner)
+			if (principal) {
+				return principal.userId
+			}
+
+			return ''
+		},
+		ownerDisplayname() {
+			const principal = this.$store.getters.getPrincipalByUrl(this.calendar.owner)
+			if (principal) {
+				return principal.displayname
+			}
+
+			return ''
+		},
 		moreMenu() {
 			return [
 				{
@@ -137,9 +189,7 @@ export default {
 						: (this.calendar.isSharedWithMe ? t('calendar', 'Unshare from me') : t('calendar', 'Delete')),
 					icon: this.deleteLoading
 						? 'icon-loading-small'
-						: this.calendar.isSharedWithMe
-							? 'icon-unshare'
-							: 'icon-delete',
+						: 'icon-delete',
 					action: this.deleteCalendar
 				}
 			]

src/components/AppNavigation/CalendarListNew.vue

@@ -22,8 +22,6 @@
 import ClickOutside from 'vue-click-outside'
 import { randomColor } from '../../services/colorService'
 
-console.debug(randomColor)
-
 export default {
 	name: 'CalendarListNew',
 	directives: {

src/components/FullCalendar.vue

@@ -78,7 +78,7 @@ export default {
 					this.$router.push({ name: 'EditSidebarView', params })
 				},
 				eventRender: ({ event, el }) => {
-					console.debug(el)
+					// console.debug(el)
 					// TODO - add popover
 					// TODO - add categories
 					// TODO - add participation status

src/services/fullCalendarEventService.js

@@ -43,8 +43,8 @@ export default function(calendar, userNotificationCallBack) {
 				const comp = new ICAL.Component(jCal)
 
 				if (!comp || !comp.jCal || comp.jCal.length === 0) { // TODO is there a better way to validate the comp?
-					console.debug('The given calendar data does not seem to be a valid calendar')
-					console.debug(calendarObject, comp)
+					console.error('The given calendar data does not seem to be a valid calendar')
+					console.error(calendarObject, comp)
 					return
 				}
 
@@ -94,7 +94,6 @@ export default function(calendar, userNotificationCallBack) {
 				}
 			})
 
-			console.debug(fcEvents)
 			callback(fcEvents)
 		})
 	}
@@ -186,9 +185,6 @@ function getRootAndExceptions(comp) {
  * @returns {Object}
  */
 function getFCEventForOccurrence(calendarObject, event, occurrenceStart, occurrenceEnd, vTimezone) {
-
-	console.debug(occurrenceStart)
-
 	const classNames = []
 	if (event.component.hasProperty('STATUS')) {
 		const status = event.component.getFirstPropertyValue('STATUS')

src/store/calendars.js

@@ -281,13 +281,13 @@ const actions = {
 	 * @param {Object} context the store mutations
 	 * @returns {Promise<Array>} the calendars
 	 */
-	async getCalendars(context) {
+	async getCalendars({ commit, state }) {
 		const calendars = await client.calendarHomes[0].findAllCalendars()
 		calendars.map(mapDavCollectionToCalendar).forEach(calendar => {
-			context.commit('addCalendar', { calendar })
+			commit('addCalendar', { calendar })
 		})
 
-		return [1]
+		return state.calendars
 	},
 
 	/**

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import calendars from './calendars.js'
 import editingEvent from './editingEvent.js'
 import settings from './settings.js'
+import principals from './principals.js'
 
 Vue.use(Vuex)
 
@@ -11,6 +12,7 @@ const mutations = {}
 export default new Vuex.Store({
 	modules: {
 		calendars,
+		principals,
 		editingEvent,
 		settings
 	},

src/store/principals.js

@@ -0,0 +1,70 @@
+/**
+ * @copyright Copyright (c) 2018 Georg Ehrke
+ *
+ * @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
+ * 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 client from '../services/cdav.js'
+
+const principalModel = {
+	id: '',
+	calendarUserType: '',
+	emailAddress: '',
+	displayname: '',
+	userId: '',
+	url: '',
+	dav: false,
+}
+
+export function mapDavToPrincipal(principal) {
+	return {
+		id: principal.url,
+		calendarUserType: principal.calendarUserType,
+		emailAddress: principal.email,
+		displayname: principal.displayname,
+		userId: principal.userId,
+		url: principal.principalUrl,
+		dav: principal
+	}
+}
+
+const state = {
+	principals: []
+}
+
+const mutations = {
+	addPrincipal(state, { principal }) {
+		state.principals.push(Object.assign({}, principalModel, principal))
+	},
+}
+
+const getters = {
+	getPrincipalByUrl: (state) => (url) => {
+		console.debug(state.principals)
+		return state.principals.find((principal) => principal.url === url)
+	}
+}
+
+const actions = {
+	async fetchPrincipalByUrl(context, url) {
+		const principal = await client.findPrincipal(url)
+		context.commit('addPrincipal', { principal: mapDavToPrincipal(principal) })
+	}
+}
+
+export default { state, mutations, getters, actions }

src/views/Calendar.vue

@@ -68,12 +68,23 @@ export default {
 		}
 	},
 	beforeMount() {
+		console.debug(client)
 		// get calendars then get events
 		client.connect({ enableCalDAV: true }).then(() => {
 			this.$store.dispatch('getCalendars')
 				.then((calendars) => {
 					this.loadingCalendars = false
 
+					const owners = []
+					calendars.forEach((calendar) => {
+						if (owners.indexOf(calendar.owner) === -1) {
+							owners.push(calendar.owner)
+						}
+					})
+					owners.forEach((owner) => {
+						this.$store.dispatch('fetchPrincipalByUrl', owner)
+					})
+
 					// No calendars? Create a new one!
 					if (calendars.length === 0) {
 						this.$store.dispatch('appendCalendar', {