implement AvatarParticipationStatus component

Signed-off-by: Georg Ehrke <[email protected]>

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

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>