Improvment: UI review of the events details body - EXO-73527 (#688)

- Conducted UI review for the agenda event details body - Better ICS file generation on the server side and eventtitle only as subject if creator or updater
exoplatform · Sep 27, 2024 · 50ae42e · 50ae42e
1 parent ca4212a
commit 50ae42e
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 29 deletions.
diff --git a/...ices/src/main/java/org/exoplatform/agenda/notification/builder/AgendaTemplateBuilder.java b/...ices/src/main/java/org/exoplatform/agenda/notification/builder/AgendaTemplateBuilder.java
@@ -118,7 +118,16 @@ protected MessageInfo makeMessage(NotificationContext ctx) {
                                                                 templateProvider,
                                                                 notification,
                                                                 timeZone);
-      MessageInfo messageInfo = buildMessageSubjectAndBody(templateContext, notification, pushNotificationURL);
+      MessageInfo messageInfo = new MessageInfo();
+      long creatorIdentityId = event.getCreatorId();
+      long modifierIdentityId = event.getModifierId();
+      if((StringUtils.equals(eventModificationType, AgendaEventModificationType.ADDED.name()) && identityId == creatorIdentityId)
+              || (StringUtils.equals(eventModificationType, AgendaEventModificationType.UPDATED.name()) && identityId == modifierIdentityId)){
+        messageInfo.subject(notification.getValueOwnerParameter(STORED_PARAMETER_EVENT_TITLE));
+        messageInfo.body(TemplateUtils.processGroovy(templateContext));
+      } else {
+        messageInfo = buildMessageSubjectAndBody(templateContext, notification, pushNotificationURL);
+      }
       addIcsFile(notification, messageInfo, timeZone);
       Throwable exception = templateContext.getException();
       logException(notification, exception);

diff --git a/agenda-services/src/main/java/org/exoplatform/agenda/util/NotificationUtils.java b/agenda-services/src/main/java/org/exoplatform/agenda/util/NotificationUtils.java
@@ -13,6 +13,7 @@
 
 import net.fortuna.ical4j.data.CalendarOutputter;
 import net.fortuna.ical4j.model.DateTime;
+import net.fortuna.ical4j.model.ParameterList;
 import net.fortuna.ical4j.model.component.VEvent;
 import net.fortuna.ical4j.model.parameter.Cn;
 import net.fortuna.ical4j.model.property.*;
@@ -52,6 +53,7 @@
 import org.exoplatform.webui.utils.TimeConvertUtils;
 
 import static org.exoplatform.agenda.util.Utils.getICalTimeZone;
+import static org.exoplatform.agenda.util.Utils.getResourceBundleLabel;
 
 public class NotificationUtils {
 
@@ -848,7 +850,7 @@ private static final String getEventNotificationCreatorOrModifierUserName(Identi
             .map(t -> t.substring(0, 1).toUpperCase() + t.substring(1))
             .collect(Collectors.joining(" "));
     if(Utils.isExternal(identity.getRemoteId())) {
-      fullName += " " + "(" + Utils.getResourceBundleLabel(new Locale(Utils.getUserLanguage(identity.getRemoteId())), "external.label.tag") + ")";
+      fullName += " " + "(" + getResourceBundleLabel(new Locale(Utils.getUserLanguage(identity.getRemoteId())), "external.label.tag") + ")";
     }
     return fullName;
   }
@@ -898,12 +900,21 @@ public static String getWebConferenceLink(Event event) {
 
   }
   public static final void addIcsFile(NotificationInfo notification, MessageInfo messageInfo, ZoneId timeZone) {
-    Attachment attachment = new Attachment();
+    IdentityManager identityManager = ExoContainerContext.getService(IdentityManager.class);
+    SpaceService spaceService = ExoContainerContext.getService(SpaceService.class);
+    String ownerId = notification.getValueOwnerParameter(STORED_PARAMETER_EVENT_OWNER_ID);
+    Identity identity = identityManager.getIdentity(ownerId);
+    Space space = identity!=null ? spaceService.getSpaceByPrettyName(identity.getRemoteId()) : null;
+    String spaceName = space == null ? null : space.getDisplayName();
+    String eventConference = notification.getValueOwnerParameter(TEMPLATE_VARIABLE_EVENT_CONFERENCE);
+    String eventCreator = notification.getValueOwnerParameter(STORED_PARAMETER_EVENT_CREATOR);
+      Attachment attachment = new Attachment();
     /* Generate unique identifier */
     UidGenerator ug = new RandomUidGenerator();
     Uid uid = ug.generateUid();
     /* Create the event */
     String eventSummary = notification.getValueOwnerParameter(STORED_PARAMETER_EVENT_TITLE);
+    String eventDescription = notification.getValueOwnerParameter(STORED_PARAMETER_EVENT_DESCRIPTION);
     String startDateRFC3339 = notification.getValueOwnerParameter(STORED_PARAMETER_EVENT_START_DATE);
     String endDateRFC3339 = notification.getValueOwnerParameter(STORED_PARAMETER_EVENT_END_DATE);
     ZonedDateTime startDate = ZonedDateTime.parse(startDateRFC3339).withZoneSameInstant(timeZone);
@@ -919,8 +930,33 @@ public static final void addIcsFile(NotificationInfo notification, MessageInfo m
     calendar.getProperties().add(Version.VERSION_2_0);
     calendar.getProperties().add(CalScale.GREGORIAN);
     Organizer organizer = new Organizer(URI.create("[email protected]"));
-    organizer.getParameters().add(new Cn(notification.getValueOwnerParameter(STORED_PARAMETER_EVENT_CREATOR)));
+    organizer.getParameters().add(new Cn(eventCreator));
     calendar.getProperties().add(organizer);
+
+    Locale userLocale = Locale.of(Utils.getUserLanguage(notification.getTo()));
+    String plainTextContent = getResourceBundleLabel(userLocale, "agenda.invitationText") + " " + eventCreator +
+            " " + getResourceBundleLabel(userLocale, "agenda.inSpace") + " " + spaceName + ". \n"
+            + (eventConference != null ? getResourceBundleLabel(userLocale, "agenda.visioLink") + " " +  eventConference : "");
+    String htmlContent = "<html><body>" +
+            getResourceBundleLabel(userLocale, "agenda.invitationText") + " " + " <b>" + eventCreator
+            + "</b> " +  getResourceBundleLabel(userLocale, "agenda.inSpace") + " <b>" + spaceName + "</b>. "
+            + ( eventConference != null ? "<br><b>" + getResourceBundleLabel(userLocale, "agenda.visioLink") + " " + "</b> "
+            +  "<a href=\""+ eventConference + "\">"
+            + eventConference + "</a>" :"");
+    if (eventDescription != null && !eventDescription.isEmpty()) {
+      plainTextContent = plainTextContent + "\n \n " + getResourceBundleLabel(userLocale, "agenda.eventDetail") + ": \n" +
+              eventDescription.replaceAll("<a\\s+href=\"([^\"]+)\"[^>]*>(.*?)</a>", "$2 ($1)")
+                      .replaceAll("</?[^>]+(>|$)", "")
+                      .replaceAll("\\n{2,}", "\n").trim();
+      htmlContent = htmlContent + "<br><br>" + getResourceBundleLabel(userLocale, "agenda.eventDetail") + "<br>" + eventDescription;
+    }
+    vEvent.getProperties().add(new Description(plainTextContent));
+    htmlContent = htmlContent + "</body></html>";
+    ParameterList parameters = new ParameterList();
+    parameters.add(new net.fortuna.ical4j.model.parameter.XParameter("FMTTYPE", "text/html"));
+    XProperty xProperty = new XProperty("X-ALT-DESC", parameters, htmlContent);
+    vEvent.getProperties().add(xProperty);
+
     /* Add event to calendar */
     calendar.getComponents().add(vEvent);
     CalendarOutputter outputter = new CalendarOutputter();

diff --git a/agenda-services/src/main/java/org/exoplatform/agenda/util/Utils.java b/agenda-services/src/main/java/org/exoplatform/agenda/util/Utils.java
@@ -22,6 +22,8 @@
 import java.util.stream.Collectors;
 
 import net.fortuna.ical4j.model.Month;
+import org.apache.commons.lang3.ArrayUtils;
+import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
 
 import org.exoplatform.agenda.constant.AgendaEventModificationType;
@@ -569,8 +571,15 @@ public static void detectEventModifiedFields(Event newEvent, Event oldEvent, Age
   }
 
   public static String getResourceBundleLabel(Locale locale, String label) {
-    ResourceBundleService resourceBundleService =  ExoContainerContext.getService(ResourceBundleService.class);
-    return resourceBundleService.getResourceBundle(resourceBundleService.getSharedResourceBundleNames(), locale).getString(label);
+    ResourceBundleService resourceBundleService = ExoContainerContext.getService(ResourceBundleService.class);
+    try {
+      return resourceBundleService.getResourceBundle(ArrayUtils.addAll(resourceBundleService.getSharedResourceBundleNames(),
+                                                                       "locale.portlet.Agenda"),
+                                                     locale)
+                                  .getString(label);
+    } catch (MissingResourceException mre) {
+      return label;
+    }
   }
 
   /**

diff --git a/agenda-webapps/package-lock.json b/agenda-webapps/package-lock.json
diff --git a/agenda-webapps/src/main/resources/locale/portlet/Agenda_fr.properties b/agenda-webapps/src/main/resources/locale/portlet/Agenda_fr.properties
@@ -147,11 +147,11 @@ agenda.doYouParticipate=Participer ?
 agenda.repitition=R\u00e9p\u00e9tition
 agenda.connect=Connecter
 agenda.disconnect=D\u00e9connecter
-agenda.icsbutton=Ajouter à mon Agenda
-agenda.invitationText=Invitation issue
+agenda.icsbutton=Ajouter \u00e0 mon Agenda
+agenda.invitationText=Invitation issue par
 agenda.inSpace=dans l'espace
 agenda.visioLink=Lien de visio :
-agenda.eventDetail=Détail de l'évènement :
+agenda.eventDetail=D\u00e9tail de l'\u00e9v\u00e9nement :
 agenda.connectYourPersonalAgenda=Connectez votre calendrier personnel
 agenda.synchronizeEventsWithPersonalCalendarSubTitle=Synchronisez vos \u00e9v\u00e9nements avec votre calendrier personnel
 agenda.connectYourPersonalAgendaSubTitle=Cliquez ici pour connecter votre calendrier personnel

diff --git a/agenda-webapps/src/main/webapp/skin/less/agenda.less b/agenda-webapps/src/main/webapp/skin/less/agenda.less
@@ -452,8 +452,11 @@
   }
 
   .event-details-body {
-    .event-details-body-right, .event-details-body-left {
-      max-width: ~"calc(50% - 21px)";
+    .event-details-body-left {
+      max-width: ~"calc(100% - 463px)";
+    }
+    .event-details-body-right{
+      max-width: 420px !important;
     }
     .event-time {
       .uiIconClock.uiIcon32x32:before {
@@ -506,7 +509,7 @@
   }
 
   .remote-events-details {
-    max-width: 250px;
+    max-width: 100%;
     min-width: 250px;
   }
 
@@ -827,6 +830,18 @@
   max-height: 82px !important;
 }
 
+@media (min-width: @maxMobileWidth) {
+  .VuetifyApp {
+    .event-details {
+      .event-details-body {
+        .event-details-body-right {
+          min-width: 420px !important;
+        }
+      }
+    }
+  }
+}
+
 @media (max-width: @maxMobileWidth) {
   .VuetifyApp {
     .event-details {

diff --git a/...apps/src/main/webapp/vue-app/agenda-common/components/event/view/AgendaEventAttendees.vue b/...apps/src/main/webapp/vue-app/agenda-common/components/event/view/AgendaEventAttendees.vue
@@ -4,7 +4,7 @@
       <i class="uiIconGroup darkGreyIcon uiIcon32x32 pe-5"></i>
       <span>{{ attendeesResponsesTitle }}</span>
     </div>
-    <div class="event-attendees ps-5 ms-7 mt-2 flex-column">
+    <div class="event-attendees mt-2 flex-column full-width">
       <agenda-event-attendee-item
         v-for="attendee in displayedAttendees"
         :key="attendee"

diff --git a/...da-webapps/src/main/webapp/vue-app/agenda-common/components/event/view/AgendaEventIcs.vue b/...da-webapps/src/main/webapp/vue-app/agenda-common/components/event/view/AgendaEventIcs.vue
@@ -1,15 +1,16 @@
 <template>
   <div>
     <div v-if="!connectors" class="d-flex justify-center">
-      <v-btn outlined color="primary" class="btn border-radius v-btn v-btn--contained v-size--default v-chip v-chip--outlined theme--light
-         primary primary--text mt-4 mb-2 me-5" @click="downloadICS">
-        <v-icon class="uiIcon20x20 pe-2" depressed>
+      <v-btn outlined color="primary"
+        class="pl-2 pr-2 text-body-1 btn border-radius v-chip v-chip--outlined theme--light primary primary--text mt-4 mb-2"
+        @click="downloadICS">
+        <v-icon class="uiIcon20x20 pe-3">
           fa-calendar-plus
         </v-icon>
         {{ $t('agenda.icsbutton') }}
       </v-btn>
     </div>
-    <div v-else @click="downloadICS" :class="{ 'mt-5': connectors }">
+    <div v-else @click="downloadICS" :class="{ 'mt-4': connectors, 'ml-n7': connectors }">
       <v-icon class="uiIcon20x20 clickable" depressed>
         fa-calendar-plus
       </v-icon>
@@ -130,4 +131,4 @@ export default {
     },
   }
 };
-</script>
+</script>
diff --git a/...s/src/main/webapp/vue-app/agenda-common/components/event/view/AgendaEventsDetailsBody.vue b/...s/src/main/webapp/vue-app/agenda-common/components/event/view/AgendaEventsDetailsBody.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="event-details-body overflow-auto flex-grow-1 d-flex flex-column flex-md-row pa-4 mt-5">
     <div class="flex-grow-1 flex-shrink-0 event-details-body-left " :class="{ 'd-flex' : !isMobile }">
-      <div class="mx-auto">
+      <div :class="{'mx-auto' : isMobile}">
         <div class="event-date align-center d-flex pb-5">
           <i class="uiIconDatePicker darkGreyIcon uiIcon32x32 pe-5"></i>
           <div class="d-inline-flex">
@@ -104,7 +104,7 @@
         </div>
         <div v-if="event.description" class="event-description d-flex flex-grow-0 flex-shrink-1 pb-5">
           <i class="uiIconDescription darkGreyIcon uiIcon32x32 pe-5"></i>
-          <span v-sanitized-html="event.description" class="mt-1 me-4 align-self-center text-wrap text-left text-break rich-editor-content"></span>
+          <span v-sanitized-html="event.description" class="mt-1 align-self-center text-wrap text-left text-break rich-editor-content"></span>
         </div>
         <div
           v-if="event.attachments && event.attachments.length !== 0"
@@ -125,11 +125,11 @@
       <v-divider vertical class="event-details-body-divider" />
     </div>
     <div class="flex-grow-1 flex-shrink-0 d-flex event-details-body-right">
-      <div class="mx-10">
+      <div class="mr-1 width-full" >
         <agenda-event-attendees
           ref="agendaAttendees"
           :event="event" />
-        <div :class="{ 'd-flex flex-row-reverse': enabledconnectors }">
+        <div :class="{ 'd-flex flex-row-reverse': enabledconnectors}" class="justify-content-left">
           <agenda-ics
             v-if="addToMyAgenda"
             :settings="settings"
@@ -141,7 +141,7 @@
             :event="event"
             :connectors="connectors"
             :class="!isAcceptedEvent && 'agenda-hidden-connectors'"
-            class="mt-5" />
+            class="mt-4 mr-auto width-full" />
         </div>
       </div>
     </div>

diff --git a/...ebapp/vue-app/agenda-common/components/remote-event/AgendaConnectorContemporaryEvents.vue b/...ebapp/vue-app/agenda-common/components/remote-event/AgendaConnectorContemporaryEvents.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="d-flex">
-      <div class="d-flex flex-column">
+      <div class="d-flex flex-column width-full">
         <div class="d-flex text-no-wrap text-truncate font-weight-bold text-title-color">
           {{ $t('agenda.personalCalendar') }}
         </div>
@@ -27,7 +27,7 @@
             </div>
             <div class="text-center">
               <v-btn
-                class="btn remote-event mt-3 justify-content-center"
+                class="btn primary-border-color primary--text remote-event mt-3 justify-content-center"
                 @click="openPersonalCalendarDrawer">
                 {{ $t('agenda.connect') }}
               </v-btn>
@@ -220,4 +220,4 @@ export default {
     },
   }
 };
-</script>
+</script>