implement AvatarParticipationStatus component

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

css/icons.scss

@@ -23,6 +23,7 @@
 @include icon-black-white('color-picker', 'calendar', 1);
 @include icon-black-white('embed', 'calendar', 1);
 @include icon-black-white('eye', 'calendar', 3);
+@include icon-black-white('invitees-no-response', 'calendar', 5);
 @include icon-black-white('leftarrow', 'calendar', 1);
 @include icon-black-white('random', 'calendar', 1);
 @include icon-black-white('reminder', 'calendar', 1);

img/LICENSES.md

@@ -10,6 +10,11 @@
 - License: CC-BY
 - Link: https://thenounproject.com/search/?q=eye&i=428971
 
+# invitees-no-response.svg
+- Created by: [Alena](https://thenounproject.com/joyeyes)
+- License: CC-BY
+- Link: https://thenounproject.com/search/?q=question%20mark&i=1156193
+
 ## repeat.svg
 - Created by: [Brandy Bora](https://thenounproject.com/brandy.bora/)
 - License: CC-BY

img/invitees-no-response.svg

@@ -0,0 +1 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.6 15.93a1.7 1.7 0 0 1-3.41 0l-.01-.9c0-1.1.18-2 .55-2.72a8.33 8.33 0 0 1 2.19-2.4 16 16 0 0 0 1.96-1.76 2.4 2.4 0 0 0-.38-3.3 3.42 3.42 0 0 0-2.36-.78 3.6 3.6 0 0 0-2.4.81 4.36 4.36 0 0 0-1.33 2.5 1.74 1.74 0 0 1-3.44-.44c.1-1.6.78-2.95 2.04-4.07a7.22 7.22 0 0 1 4.97-1.67c2.16 0 3.87.56 5.15 1.69a5.1 5.1 0 0 1 1.91 3.93c0 .82-.23 1.61-.7 2.35s-1.47 1.75-3 3.02a5.71 5.71 0 0 0-1.48 1.59c-.19.4-.27 1.12-.25 2.15zm-1.7 2.98a1.94 1.94 0 1 1 0 3.89 1.94 1.94 0 0 1 0-3.89z"/></svg>

src/components/Editor/Invitees/AvatarParticipationStatus.vue

@@ -21,15 +21,156 @@
   -->
 
 <template>
-	<div />
+	<div v-tooltip="tooltip" class="avatar-participation-status-wrapper">
+		<Avatar
+			:disable-menu="true"
+			:disable-tooltip="true"
+			:user="avatarLink"
+		/>
+		<div class="participation-status" :class="className" />
+	</div>
 </template>
 
 <script>
+import {
+	Avatar
+} from 'nextcloud-vue'
+
 export default {
-	name: 'AvatarParticipationStatus'
+	name: 'AvatarParticipationStatus',
+	components: {
+		Avatar
+	},
+	props: {
+		avatarLink: {
+			type: String,
+			required: true
+		},
+		participationStatus: {
+			type: String,
+			required: true
+		},
+		commonName: {
+			type: String,
+			required: true
+		},
+		isViewedByOrganizer: {
+			type: Boolean,
+			required: true
+		},
+		attendeeIsOrganizer: {
+			type: Boolean,
+			required: true
+		},
+		organizerDisplayName: {
+			type: String,
+			required: true
+		}
+	},
+	computed: {
+		tooltip() {
+			if (this.isViewedByOrganizer && this.attendeeIsOrganizer) {
+				return null
+			}
+
+			if (this.participationStatus === 'ACCEPTED' && this.isViewedByOrganizer) {
+				return t('calendar', '{name} accepted your invitation.', {
+					name: this.commonName
+				})
+			}
+			if (this.participationStatus === 'ACCEPTED' && !this.isViewedByOrganizer) {
+				return t('calendar', '{name} accepted {organizerName}\'s invitation.', {
+					name: this.commonName,
+					organizerName: this.organizerDisplayName
+				})
+			}
+
+			if (this.participationStatus === 'DECLINED' && this.isViewedByOrganizer) {
+				return t('calendar', '{name} declined your invitation.', {
+					name: this.commonName
+				})
+			}
+			if (this.participationStatus === 'DECLINED' && !this.isViewedByOrganizer) {
+				return t('calendar', '{name} declined {organizerName}\'s invitation.', {
+					name: this.commonName,
+					organizerName: this.organizerDisplayName
+				})
+			}
+
+			if (this.participationStatus === 'DELEGATED') {
+				return t('calendar', '{name} has delegated their invitation.', {
+					name: this.commonName
+				})
+			}
+			if (this.participationStatus === 'TENTATIVE') {
+				return t('calendar', '{name} marked their participation as tentative.', {
+					name: this.commonName
+				})
+			}
+
+			if (this.isViewedByOrganizer) {
+				return t('calendar', '{name} did not respond to your invitation yet.', {
+					name: this.commonName
+				})
+			} else {
+				return t('calendar', '{name} did not respond to {organizerName}\'s invitation yet.', {
+					name: this.commonName,
+					organizerName: this.organizerDisplayName
+				})
+			}
+		},
+		className() {
+			if (this.participationStatus === 'ACCEPTED') {
+				return ['accepted', 'icon', 'icon-checkmark-white']
+			}
+			if (this.participationStatus === 'DECLINED') {
+				return ['declined', 'icon', 'icon-close-white']
+			}
+			if (this.participationStatus === 'TENTATIVE') {
+				return ['tentative', 'icon', 'icon-checkmark-white']
+			}
+			if (this.participationStatus === 'DELEGATED') {
+				return ['delegated', 'icon', 'icon-confirm-white']
+			}
+
+			return ['no-response', 'icon', 'icon-invitees-no-response-white']
+		}
+	}
 }
 </script>
 
 <style scoped>
+.avatar-participation-status-wrapper {
+	position: relative;
+	height: 38px;
+	width: 38px;
+}
 
+.participation-status {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	background-size: 10px;
+	height: 15px;
+	width: 15px;
+	box-shadow: 0 0 3px grey;
+	border-radius: 50%;
+}
+
+.participation-status.accepted {
+	background-color: #2fb130;
+}
+
+.participation-status.declined {
+	background-color: #ff0000;
+}
+
+.participation-status.tentative {
+	background-color: #ffa704;
+}
+
+.participation-status.delegated,
+.participation-status.no-response {
+	background-color: grey;
+}
 </style>