fix: Improve Add a visioconference link with external video conferenc…

…e - EXO-70996 (#669)

Before this fix, when the provider allow to modify the url of the visio, the url cannot be changed
This commit add the possibility to update the visio url

agenda-webapps/src/main/resources/locale/portlet/Agenda_en.properties

@@ -158,6 +158,7 @@ agenda.deleteEventConference=Delete conference
 agenda.createEventConference=Create conference
 agenda.webConferenceScheduled=Web conference scheduled
 agenda.webConferenceURL=Enter a link to the call of the event
+agenda.webConferenceURL.warning=To avoid any video conference conflicts, we recommend to create a different link on your external video conference software.
 agenda.emptyWebConferenceProvider=No web conferencing provider
 agenda.webConferencingProviderSaved=Web conferencing provider saved.
 agenda.connectoInitializationFailed=Personal calendar connector initialization failed

agenda-webapps/src/main/webapp/skin/less/agenda.less

@@ -106,6 +106,18 @@
     .location-event-input {
       width: 500px;
     }
+    .webconference-event-input,.webconference-event-span {
+      width: 500px;
+    }
+    @media (max-width: @maxMobileWidth) {
+      .webconference-event-span {
+        max-width: ~"calc(100% - 36px)";
+      }
+
+    }
+    .max-width-fit {
+      max-width: 100% !important;
+    }
 
     label {
       cursor:default;
@@ -232,6 +244,12 @@
     input, textarea {
       max-width: ~"calc(100% - 64px)";
     }
+    .webconference-event-span {
+      max-width: ~"calc(100% - 105px)";
+    }
+    .webconference-event-span-without-cross {
+      max-width: ~"calc(100% - 64px)";
+    }
     #eventTitle {
       min-width: ~"calc(100% - 20px)";
       margin: 0 10px;
@@ -839,4 +857,5 @@
       }
     }
   }
+
 }

agenda-webapps/src/main/webapp/vue-app/agenda-common/components/event/form/AgendaEventFormBasicInformation.vue

@@ -58,17 +58,13 @@
               class="text-wrap ms-2" />
           </div>
         </div>
-        <div class="d-flex flex-row">
-          <v-icon class="my-3 me-10 darkGreyIcon" size="32px">fa-video</v-icon>
-          <div class="d-flex flex-column">
-            <agenda-event-form-conference
-              :event="event"
-              :settings="settings"
-              :current-space="currentSpace"
-              :conference-provider="conferenceProvider"
-              class="my-auto" />
-          </div>
-        </div>
+        <agenda-event-form-conference
+          :event="event"
+          :settings="settings"
+          :current-space="currentSpace"
+          :conference-provider="conferenceProvider"
+          class="my-auto"
+          icon-class="me-10"/>
         <div class="d-flex flex-row">
           <v-flex class="flex-grow-0">
             <i class="uiIconDescription darkGreyIcon uiIcon32x32 my-3 me-11"></i>

agenda-webapps/src/main/webapp/vue-app/agenda-common/components/event/form/AgendaEventFormConference.vue

@@ -1,15 +1,30 @@
 <template>
   <div class="d-flex flex-row">
-    <div v-if="isConferenceEnabled" class="d-flex flex-row my-auto">
+    <v-icon :class="`darkGreyIcon my-auto ${this.iconClass} mt-4`" size="32px" v-if="!isMobile">fa-video</v-icon>
+    <template v-if="isConferenceEnabled">
       <template v-if="eventConference">
-        <div
-          v-if="eventConferenceUrl"
+        <span :class="`${this.marginClass} mx-0 webconference-event-span`" v-if="eventConferenceUrl && this.conferenceProvider.canModifyEventUrl">
+          <input
+              id="eventCallURL"
+              ref="eventCallURL"
+              v-model="conferenceURL"
+              :placeholder="$t('agenda.webConferenceURL')"
+              type="text"
+              name="webConferenceEvent"
+              class="ignore-vuetify-classes webconference-event-input mb-0 max-width-fit">
+          <div class="flex-row grey--text">
+            <i class="fas fa-exclamation-triangle primary--text"></i>
+            {{ $t('agenda.webConferenceURL.warning') }}
+          </div>
+        </span>
+        <span
+          v-else-if="eventConferenceUrl"
           v-autolinker="eventConferenceUrl"
-          class="my-auto"></div>
+          class="my-auto"></span>
         <v-chip
           v-else
           color="primary"
-          class="my-auto"
+          :class="`${this.marginClass} my-auto`"
           outlined>
           <span class="primary--text">
             {{ $t('agenda.webConferenceScheduled') }}
@@ -21,31 +36,34 @@
           color="grey"
           icon
           dark
-          class="ms-auto"
+          :class="`${this.marginClass}`"
           @click="deleteCallURL">
           <v-icon>
             mdi-close
           </v-icon>
         </v-btn>
+
       </template>
       <v-btn
         v-else
         :loading="loading"
-        class="btn btn-primary border-radius my-auto"
+        :class="`${this.marginClass} btn btn-primary border-radius`"
         @click="createCallUrl">
         {{ $t('agenda.createEventConference') }}
       </v-btn>
-    </div>
-    <div v-else class="d-flex flex-row my-auto">
+    </template>
+    <template v-else>
+      <span :class="`${this.marginClass} mx-0 webconference-event-span-without-cross`">
       <input
         id="eventCallURL"
         ref="eventCallURL"
         v-model="conferenceURL"
         :placeholder="$t('agenda.webConferenceURL')"
         type="text"
-        name="locationEvent"
-        class="ignore-vuetify-classes my-3 location-event-input">
-    </div>
+        name="webConferenceEvent"
+        class="ignore-vuetify-classes webconference-event-input max-width-fit">
+      </span>
+    </template>
   </div>
 </template>
 
@@ -68,14 +86,24 @@ export default {
       type: Object,
       default: () => null
     },
+    iconClass: {
+      type: Object,
+      default: () => null,
+    },
   },
   data: () => ({
     loading: false,
     conferenceURL: null,
   }),
   computed: {
+    isMobile() {
+      return this.$vuetify.breakpoint.name === 'xs' || this.$vuetify.breakpoint.name === 'sm';
+    },
+    marginClass() {
+      return this.isMobile ? 'my-0' : 'my-3';
+    },
     isConferenceEnabled() {
-      return this.conferenceProvider && (!this.eventConferenceType || this.conferenceProvider.getType() === this.eventConferenceType);
+      return this.conferenceProvider && (!this.eventConferenceType || this.conferenceProvider.getType() === this.eventConferenceType || this.eventConferenceType === 'manual');
     },
     eventConferences() {
       return this.event && this.event.conferences;
@@ -109,7 +137,7 @@ export default {
     }
   },
   mounted() {
-    if (this.isConferenceEnabled && this.event && this.event.conferences && this.event.conferences.length) {
+    if (this.event && this.event.conferences && this.event.conferences.length) {
       this.conferenceURL = this.event.conferences[0].url;
     } else {
       this.conferenceURL = null;
@@ -121,9 +149,17 @@ export default {
       this.$set(this.event, 'conferences', [{
         type: this.conferenceProvider.getType(),
       }]);
+
+      if (this.conferenceProvider.canModifyEventUrl) {
+        this.conferenceProvider.getCallUrl(eXo.env.portal.spaceName).then(url => {
+          this.conferenceURL = url;
+          this.$set(this.event.conferences[0], 'url', url);
+        });
+      }
     },
     deleteCallURL() {
       this.$set(this.event, 'conferences', null);
+      this.conferenceURL = null;
     },
   }
 };

agenda-webapps/src/main/webapp/vue-app/agenda-common/components/event/form/AgendaEventQuickFormDrawer.vue

@@ -63,27 +63,12 @@
               name="locationEvent"
               class="ignore-vuetify-classes my-3 location-event-input">
           </div>
-          <div class="d-flex flex-row">
-            <v-flex class="flex-grow-0 my-auto mx-3">
-              <v-icon class="darkGreyIcon" size="32px">fa-video</v-icon>
-            </v-flex>
-            <agenda-event-form-conference
-              v-if="isConferenceEnabled"
-              :event="event"
-              :settings="settings"
-              :current-space="currentSpace"
-              :conference-provider="conferenceProvider"
-              class="me-3" />
-            <input
-              v-else
-              id="eventConference"
-              ref="eventConference"
-              v-model="conferenceURL"
-              :placeholder="$t('agenda.webConferenceURL')"
-              type="text"
-              name="locationEvent"
-              class="ignore-vuetify-classes my-3 location-event-input">
-          </div>
+          <agenda-event-form-conference
+            :event="event"
+            :settings="settings"
+            :current-space="currentSpace"
+            :conference-provider="conferenceProvider"
+            icon-class="mx-3"/>
           <div class="d-flex flex-row">
             <v-flex class="flex-grow-0">
               <i class="uiIconGroup darkGreyIcon uiIcon32x32 mt-4 mx-3"></i>

agenda-webapps/src/main/webapp/vue-app/agenda-common/components/event/form/mobile/AgendaEventMobileForm.vue

@@ -77,24 +77,11 @@
         <label class="font-weight-bold my-2">
           {{ $t('agenda.conference') }}
         </label>
-        <div class="d-flex flex-row">
-          <agenda-event-form-conference
-            v-if="isConferenceEnabled"
-            :event="event"
-            :settings="settings"
-            :current-space="currentSpace"
-            :conference-provider="conferenceProvider"
-            class="me-3" />
-          <input
-            v-else
-            id="eventConference"
-            ref="eventConference"
-            v-model="conferenceURL"
-            :placeholder="$t('agenda.webConferenceURL')"
-            type="text"
-            name="locationEvent"
-            class="ignore-vuetify-classes my-3 location-event-input">
-        </div>
+        <agenda-event-form-conference
+          :event="event"
+          :settings="settings"
+          :current-space="currentSpace"
+          :conference-provider="conferenceProvider"/>
         <label class="font-weight-bold my-2">
           {{ $t('agenda.participants') }}
         </label>
@@ -258,4 +245,4 @@ export default {
     },
   }
 };
-</script>
+</script>