fixup! Improve free/busy UI

Signed-off-by: hamza mahjoubi <[email protected]>

Author: hamza221

src/components/Editor/FreeBusy/FreeBusy.vue

@@ -99,6 +99,9 @@ import {
 import { NcModal as Modal } from '@nextcloud/vue'
 import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
 import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
+import Vue from 'vue'
+import OrganizerListItem from '../Invitees/OrganizerListItem.vue'
+import InviteesListItem from '../Invitees/InviteesListItem.vue'
 
 import { getColorForFBType } from '../../../utils/freebusy.js'
 
@@ -287,6 +290,13 @@ export default {
 				height: 'auto',
 				loading: this.loading,
 				headerToolbar: false,
+			//	resourceLabelContent: this.customResourceRender,
+				resourceAreaColumns: [
+					{
+						field: 'title',
+						headerContent: 'Attendees',
+					},
+				],
 				// Timezones:
 				timeZone: this.timezoneId,
 				// Formatting of the title
@@ -326,6 +336,28 @@ export default {
 				break
 			}
 		},
+		 customResourceRender(arg) {
+			const attendee = [this.organizer, ...this.attendees].find((a) => a.uri === arg.resource.id)
+			let component = null
+			if (attendee === this.organizer) {
+				component	= new Vue({
+ 			 render: h => h(OrganizerListItem, { props: { organizer: attendee, isReadOnly: false } }),
+				}).$mount()
+			} else {
+				component	= new Vue({
+ 			 render: h => h(InviteesListItem, { props: { attendee, organizerDisplayName: this.organizer.commonName, isReadOnly: false } }),
+				}).$mount()
+
+			}
+
+			const html = document.createElement('div')
+			html.style.position = 'absolute'
+			html.innerText(component.$el.outerHTML)
+
+ 		 	return {
+   				 html,
+  				}
+		},
 	},
 }
 </script>

src/utils/freebusy.js

@@ -37,16 +37,16 @@ export function getColorForFBType(type = 'BUSY') {
 		return 'rgba(255,255,255,0)'
 
 	case 'BUSY-TENTATIVE':
-		return 'rgb(221,203,85)'
+		return 'rgba(184,129,0,0.3)'
 
 	case 'BUSY':
-		return 'rgb(201,136,121)'
+		return 'rgba(217,24,18,0.3)'
 
 	case 'BUSY-UNAVAILABLE':
-		return 'rgb(182,70,157)'
+		return 'rgba(219,219,219)'
 
 	default:
-		return 'rgb(0,130,201)'
+		return 'rgba(0,113,173,0.3)'
 	}
 }