Social: Update Map Markers and Integrate Global Forum - refs BT#21101

assets/vue/components/social/MyGroupsCard.vue

@@ -17,7 +17,7 @@
           <span v-else>{{ group.name }}</span>
         </li>
       </ul>
-      <div v-if="goToUrl" class="text-center mb-3">
+      <div v-if="isValidGlobalForumsCourse" class="text-center mb-3">
         <a :href="goToUrl" class="btn btn-primary">{{ t('See all communities') }}</a>
       </div>
       <div v-else class="input-group mb-3">
@@ -42,14 +42,21 @@
 <script setup>
 import BaseCard from "../basecomponents/BaseCard.vue"
 import { useI18n } from "vue-i18n"
-import { ref, onMounted, inject, watchEffect } from "vue"
+import { ref, inject, watchEffect, computed } from "vue"
 import axios from 'axios'
+import { usePlatformConfig } from "../../store/platformConfig"
 
 const { t } = useI18n()
 const searchQuery = ref('')
 const groups = ref([])
 const goToUrl = ref('')
 const user = inject('social-user')
+const platformConfigStore = usePlatformConfig()
+const globalForumsCourse = computed(() => platformConfigStore.getSetting("forum.global_forums_course_id"))
+const isValidGlobalForumsCourse = computed(() => {
+  const courseId = globalForumsCourse.value
+  return courseId !== null && courseId !== undefined && courseId > 0
+})
 
 function search() {
   window.location.href = `/search?query=${searchQuery.value}`

assets/vue/components/social/SocialSideMenu.vue

@@ -40,7 +40,7 @@
         </router-link>
       </li>
       <li :class="['menu-item', { 'active': isActive(groupLink) }]">
-        <a v-if="isForumLink" :href="groupLink" rel="noopener noreferrer">
+        <a v-if="isValidGlobalForumsCourse" :href="groupLink" rel="noopener noreferrer">
           <i class="mdi mdi-group" aria-hidden="true"></i>
           {{ t("Social Groups") }}
         </a>
@@ -70,10 +70,11 @@ import BaseCard from "../basecomponents/BaseCard.vue"
 import { useRoute } from 'vue-router'
 import { useI18n } from "vue-i18n"
 import { useMessageRelUserStore } from "../../store/messageRelUserStore"
-import { onMounted, computed, ref, provide, readonly, inject, watchEffect } from "vue"
+import { onMounted, computed, ref, inject, watchEffect } from "vue"
 import { useStore } from "vuex"
 import { useSecurityStore } from "../../store/securityStore"
 import axios from "axios"
+import { usePlatformConfig } from "../../store/platformConfig"
 
 const { t } = useI18n()
 const route = useRoute()
@@ -84,25 +85,26 @@ const messageRelUserStore = useMessageRelUserStore()
 const unreadMessagesCount = computed(() => messageRelUserStore.countUnread)
 
 const user = inject('social-user')
-const groupLink = ref({ name: 'UserGroupShow' });
-const isForumLink = ref(false);
-
+const groupLink = ref({ name: 'UserGroupShow' })
+const platformConfigStore = usePlatformConfig()
+const globalForumsCourse = computed(() => platformConfigStore.getSetting("forum.global_forums_course_id"))
+const isValidGlobalForumsCourse = computed(() => {
+  const courseId = globalForumsCourse.value
+  return courseId !== null && courseId !== undefined && courseId > 0
+})
 const getGroupLink = async () => {
   try {
-    const response = await axios.get('/social-network/get-forum-link');
-    const goToLink = response.data.go_to;
-    if (goToLink) {
-      groupLink.value = goToLink;
-      isForumLink.value = true;
+    const response = await axios.get('/social-network/get-forum-link')
+    if (isValidGlobalForumsCourse.value) {
+      groupLink.value = response.data.go_to
     } else {
-      groupLink.value = { name: 'UserGroupShow' };
-      isForumLink.value = false;
+      groupLink.value = { name: 'UserGroupShow' }
     }
   } catch (error) {
-    console.error('Error fetching forum link:', error);
-    groupLink.value = { name: 'UserGroupShow' };
+    console.error('Error fetching forum link:', error)
+    groupLink.value = { name: 'UserGroupShow' }
   }
-};
+}
 
 const isActive = (path, filterType = null) => {
   const pathMatch = route.path.startsWith(path)
@@ -128,6 +130,6 @@ watchEffect(() => {
 })
 
 onMounted(async () => {
-  getGroupLink();
-});
+  await getGroupLink()
+})
 </script>

public/main/template/default/social/map.html.twig

@@ -2,91 +2,72 @@
 
 {% block content %}
     <div id="map" style="width:100%; height:600px"></div>
-<script>
-function start()
-{
-    var options = {
-        center: new google.maps.LatLng(45.526, 6.255), // "Europe center"
-        zoom: 5,
-        mapTypeId: google.maps.MapTypeId.ROADMAP
-    };
+    <script>
+      function start() {
+        var options = {
+          center: new google.maps.LatLng(45.526, 6.255),
+          zoom: 5,
+          mapTypeId: google.maps.MapTypeId.ROADMAP
+        };
 
-    var map = new google.maps.Map(document.getElementById("map"), options);
-    var oms = new OverlappingMarkerSpiderfier(map);
-    var cities = '{{ places | escape('js') }}';
-    cities = JSON.parse(cities);
+        var map = new google.maps.Map(document.getElementById("map"), options);
+        var oms = new OverlappingMarkerSpiderfier(map);
+        var cities = JSON.parse('{{ places | escape("js") }}');
 
-    var imageCity = {
-        url: '{{ image_city }}'
-    }
-    var stageCity = {
-        url:'{{ image_stage }}'
-    }
+        var markers = [];
+        cities.forEach(function(city) {
+          if ('ville_lat' in city && 'ville_long' in city) {
+            var marker = new google.maps.Marker({
+              position: new google.maps.LatLng(city['ville_lat'], city['ville_long']),
+              map: map,
+              title: city['complete_name']
+            });
 
-    // Add markers
-    var markers = [];
-    if (cities.length) {
-        for (var i = 0; i < cities.length; i++) {
-            // Add ville
-            if ('ville_lat' in cities[i]) {
-                var markerOptions = {
-                    position: new google.maps.LatLng(cities[i]['ville_lat'], cities[i]['ville_long']),
-                    title: cities[i]['complete_name'],
-                    city: cities[i],
-                    icon: imageCity,
-                };
-                var marker = new google.maps.Marker(markerOptions);
-                markers.push(marker);
-                oms.addMarker(marker);
-            }
+            markers.push(marker);
+            oms.addMarker(marker);
 
-            // Add stage
-            if ('stage_lat' in cities[i]) {
-                var markerOptions = {
-                    position: new google.maps.LatLng(cities[i]['stage_lat'], cities[i]['stage_long']),
-                    title: cities[i]['complete_name'],
-                    city: cities[i],
-                    icon: stageCity,
-                };
-                var marker = new google.maps.Marker(markerOptions);
-                markers.push(marker);
-                oms.addMarker(marker);
-            }
-        }
+            marker.addListener('click', function() {
+              var infoWindow = new google.maps.InfoWindow({
+                content: '<a href="{{ url }}?u=' + city['id'] + '">' + city['complete_name'] + '</a>'
+              });
+              infoWindow.open(map, marker);
+            });
+          }
 
-        // Enable cluster
-        var markerClusterer = new MarkerClusterer(map, markers, {
-            maxZoom: 9, // maxZoom set when clustering will stop
-            imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
-        });
+          if ('stage_lat' in city && 'stage_long' in city) {
+            var marker = new google.maps.Marker({
+              position: new google.maps.LatLng(city['stage_lat'], city['stage_long']),
+              map: map,
+              title: city['complete_name']
+            });
 
-        // Auto-boxing
-        if (markers.length) {
-            var bounds = new google.maps.LatLngBounds();
-            for (var i = 0; i < markers.length; ++i) {
-                bounds.extend(markers[i].position);
-            }
-            // Disable re center of map to another location based in other points in the map
-            //map.fitBounds(bounds);
-        }
+            markers.push(marker);
+            oms.addMarker(marker);
 
-        // window when clicking
-        var infoWindow = new google.maps.InfoWindow();
-        oms.addListener('click', function (marker, event) {
-            infoWindow.setContent('<a href="{{ url }}?u=' + marker.city['id'] + '">' + marker.city['complete_name'] + '</a>');
-            infoWindow.open(map, marker);
+            marker.addListener('click', function() {
+              var infoWindow = new google.maps.InfoWindow({
+                content: '<a href="{{ url }}?u=' + city['id'] + '">' + city['complete_name'] + '</a>'
+              });
+              infoWindow.open(map, marker);
+            });
+          }
+        });
+
+        var markerClusterer = new MarkerClusterer(map, markers, {
+          maxZoom: 9,
+          imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
         });
 
         google.maps.event.addListener(markerClusterer, 'clusterclick', function (cluster) {
-            map.fitBounds(cluster.getBounds());
-            if (map.getZoom() > 14) {
-                map.setZoom(14);
-            }
+          map.fitBounds(cluster.getBounds());
+          if (map.getZoom() > 14) {
+            map.setZoom(14);
+          }
         });
-    }
-}
-</script>
-<script async defer type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ api_key }}&callback=start"></script>
-<img src="/main/{{ image_city }}" />  {{ field_1 }}  <br />
-<img src="/main/{{ image_stage }}" /> {{ field_2 }}
+      }
+    </script>
+    <script async defer type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ api_key }}&callback=start"></script>
+    <br/>
+    <i class="mdi mdi-city" style="font-size: 48px; color: blue;"></i> {{ field_1 }}<br /><br />
+    <i class="mdi mdi-map-marker" style="font-size: 48px; color: red;"></i> {{ field_2 }}
 {% endblock %}

src/CoreBundle/Controller/PlatformConfigurationController.php

@@ -83,6 +83,7 @@ class PlatformConfigurationController extends AbstractController
                 'language.language_priority_3',
                 'language.language_priority_4',
                 'profile.allow_social_map_fields',
+                'forum.global_forums_course_id',
             ];
 
             /** @var User|null $user */