Merge remote-tracking branch 'origin/master'

assets/css/app.scss

@@ -619,6 +619,16 @@ form .field {
   display: none;
 }
 
+.sub-item-indent {
+  padding-left: 20px;
+}
+
+.sub-item-indent.active {
+  background-color: #e0e0e0;
+  color: #333;
+  font-weight: bold;
+}
+
 //@import 'primevue-md-light-indigo/theme.css';
 //@import '~primevue/resources/primevue.min.css';
 //@import '~primeflex/primeflex.css';

assets/vue/components/message/MessageLayout.vue

@@ -2,7 +2,6 @@
   <div class="message-layout flex">
     <div class="sidebar">
       <UserProfileCard />
-      <SocialSideMenu />
     </div>
     <div class="content flex-grow">
       <router-view></router-view>
@@ -11,7 +10,6 @@
 </template>
 <script setup>
 import UserProfileCard from "../social/UserProfileCard.vue"
-import SocialSideMenu from "../social/SocialSideMenu.vue"
 import { onMounted, provide } from "vue"
 import { useSocialInfo } from "../../composables/useSocialInfo"
 import { useSecurityStore } from "../../store/securityStore"

assets/vue/components/personalfile/Layout.vue

@@ -2,7 +2,6 @@
   <div class="flex flex-col md:flex-row gap-4">
     <div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
       <UserProfileCard />
-      <SocialSideMenu />
     </div>
     <div class="md:basis-2/3 lg:basis-3/4 2xl:basis-5/6">
       <h2 v-t="'My files'" class="mr-auto" />
@@ -13,7 +12,6 @@
 </template>
 <script setup>
 import UserProfileCard from "../social/UserProfileCard.vue"
-import SocialSideMenu from "../social/SocialSideMenu.vue"
 import { onMounted, provide } from "vue"
 import { useSocialInfo } from "../../composables/useSocialInfo"
 

assets/vue/components/social/MyGroupsCard.vue

@@ -69,14 +69,18 @@ function search() {
 
 async function fetchGroups(userId) {
   try {
-    const response = await axios.get( `/social-network/groups/${userId}`)
-    groups.value = response.data.groups
-    goToUrl.value = response.data.groups.find(group => group.go_to)?.go_to || ''
+    const response = await axios.get(`/social-network/groups/${userId}`)
+    if (response.data) {
+      groups.value = response.data.items
+      goToUrl.value = response.data.go_to
+    }
   } catch (error) {
-    console.error('Error fetching groups:', error)
+    groups.value = []
+    goToUrl.value = ''
   }
 }
 
+
 watchEffect(() => {
   if (user.value && user.value.id) {
     fetchGroups(user.value.id)

assets/vue/components/user/Layout.vue

@@ -1,19 +1,16 @@
 <template>
-  <div class="flex flex-col md:flex-row gap-4">
-    <div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
+  <div class="flex flex-col md:flex-row gap-4 w-full">
+    <div class="flex flex-col w-full md:w-1/5">
       <UserProfileCard />
-      <SocialSideMenu />
     </div>
-    <div class="md:basis-2/3 lg:basis-1/2 2xl:basis-4/6">
+    <div class="flex-grow w-full md:w-4/5">
       <router-view />
     </div>
   </div>
 </template>
 
 <script setup>
 import UserProfileCard from "../social/UserProfileCard.vue"
-import SocialSideMenu from "../social/SocialSideMenu.vue"
-
 import { onMounted, provide } from "vue"
 import { useSocialInfo } from "../../composables/useSocialInfo"
 

assets/vue/components/usergroup/Layout.vue

@@ -3,7 +3,6 @@
     <div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
       <UserProfileCard v-if="!isLoading && !isGroup" />
       <GroupInfoCard v-if="!isLoading && isGroup" />
-      <SocialSideMenu v-if="!isLoading && !isGroup" />
       <SocialGroupMenu v-if="!isLoading && isGroup" />
     </div>
     <div class="md:basis-2/3 lg:basis-3/4 2xl:basis-5/6">
@@ -13,7 +12,6 @@
 </template>
 <script setup>
 import UserProfileCard from "../social/UserProfileCard.vue"
-import SocialSideMenu from "../social/SocialSideMenu.vue"
 import { provide } from "vue"
 import { useSocialInfo } from "../../composables/useSocialInfo"
 import SocialGroupMenu from "../social/SocialGroupMenu.vue"

assets/vue/components/userreluser/Layout.vue

@@ -2,7 +2,6 @@
   <div class="flex flex-col md:flex-row gap-4">
     <div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
       <UserProfileCard />
-      <SocialSideMenu />
     </div>
     <div class="md:basis-2/3 lg:basis-3/4 2xl:basis-5/6">
       <router-view></router-view>
@@ -11,7 +10,6 @@
 </template>
 <script setup>
 import UserProfileCard from "../social/UserProfileCard.vue"
-import SocialSideMenu from "../social/SocialSideMenu.vue"
 import { onMounted, provide } from "vue"
 import { useSocialInfo } from "../../composables/useSocialInfo"
 

assets/vue/composables/sidebarMenu.js

@@ -1,19 +1,31 @@
 import { useI18n } from "vue-i18n"
-import { computed } from "vue"
+import { computed, ref } from "vue"
 import { useSecurityStore } from "../store/securityStore"
 import { usePlatformConfig } from "../store/platformConfig"
 import { useEnrolledStore } from "../store/enrolledStore"
-import { useRouter } from "vue-router"
+import { useRoute, useRouter } from "vue-router"
+import { useSocialMenuItems } from "./useSocialMenuItems"
 
 export function useSidebarMenu() {
   const { t } = useI18n()
   const router = useRouter()
+  const route = useRoute()
   const securityStore = useSecurityStore()
   const platformConfigStore = usePlatformConfig()
   const enrolledStore = useEnrolledStore()
+  const { items: socialItems } = useSocialMenuItems();
   const showTabsSetting = platformConfigStore.getSetting("platform.show_tabs")
   const showCatalogue = platformConfigStore.getSetting("platform.catalog_show_courses_sessions")
 
+  const isActive = (item) => {
+    if (item.route) {
+      return route.path === item.route || (item.route.name && route.name === item.route.name)
+    } else if (item.items) {
+      return item.items.some(subItem => isActive(subItem))
+    }
+    return false
+  };
+
   const menuItemsBeforeMyCourse = computed(() => {
     const items = []
 
@@ -118,11 +130,29 @@ export function useSidebarMenu() {
     }
 
     if (showTabsSetting.indexOf("social") > -1) {
+      const styledSocialItems = socialItems.value.map(item => {
+        const newItem = {
+          ...item,
+          class: `sub-item-indent${isActive(item) ? ' active' : ''}`
+        };
+
+        if (newItem.isLink && newItem.route) {
+          newItem.command = () => window.location.href = newItem.route
+        } else if (newItem.route) {
+          newItem.command = () => router.push(newItem.route)
+        } else if (newItem.link) {
+          newItem.command = () => window.location.href = newItem.link
+        }
+
+        return newItem
+      });
+
       items.push({
         icon: "mdi mdi-sitemap-outline",
         label: t("Social network"),
-        command: () => router.push({ name: "SocialWall" }),
-      })
+        items: styledSocialItems,
+        expanded: isActive({ items: styledSocialItems })
+      });
     }
 
     if (platformConfigStore.plugins?.bbb?.show_global_conference_link) {

assets/vue/composables/useSocialMenuItems.js

@@ -0,0 +1,77 @@
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMessageRelUserStore } from "../store/messageRelUserStore"
+import { useSecurityStore } from "../store/securityStore"
+import { usePlatformConfig } from "../store/platformConfig"
+import axios from 'axios';
+import { useSocialInfo } from "./useSocialInfo"
+import { storeToRefs } from "pinia"
+
+export function useSocialMenuItems() {
+  const { t } = useI18n();
+  const messageRelUserStore = useMessageRelUserStore();
+  const securityStore = useSecurityStore();
+  const platformConfigStore = usePlatformConfig();
+  const invitationsCount = ref(0);
+  const groupLink = ref({ name: "UserGroupShow" });
+
+  const { isCurrentUser} = useSocialInfo()
+  const { user } = storeToRefs(securityStore)
+
+  const unreadMessagesCount = computed(() => messageRelUserStore.countUnread);
+  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 fetchInvitationsCount = async (userId) => {
+    if (!userId) return;
+    try {
+      const { data } = await axios.get(`/social-network/invitations/count/${userId}`);
+      invitationsCount.value = data.totalInvitationsCount;
+    } catch (error) {
+      console.error("Error fetching invitations count:", error);
+    }
+  };
+
+  const getGroupLink = async () => {
+    try {
+      const response = await axios.get("/social-network/get-forum-link");
+      if (isValidGlobalForumsCourse.value) {
+        groupLink.value = response.data.go_to;
+      } else {
+        groupLink.value = { name: "UserGroupList" };
+      }
+    } catch (error) {
+      console.error("Error fetching forum link:", error);
+      groupLink.value = { name: "UserGroupList" };
+    }
+  };
+
+  console.log('user.value ::: ', user.value.id)
+
+  if (user.value && user.value.id) {
+    fetchInvitationsCount(user.value.id);
+    getGroupLink();
+  }
+
+  const items = computed(() => {
+    return isCurrentUser.value ? [
+      { icon: 'mdi mdi-home', label: t("Home"), route: '/social' },
+      { icon: 'mdi mdi-email', label: t("Messages"), route: '/resources/messages', badgeCount: unreadMessagesCount.value },
+      { icon: 'mdi mdi-mailbox', label: t("Invitations"), route: { name: 'Invitations' }, badgeCount: invitationsCount.value },
+      { icon: 'mdi mdi-handshake', label: t("My friends"), route: { name: 'UserRelUserList' } },
+      { icon: 'mdi mdi-group', label: t("Social groups"), route: groupLink.value, isLink: isValidGlobalForumsCourse.value },
+      { icon: 'mdi mdi-magnify', label: t("Search"), route: '/social/search' },
+      { icon: 'mdi mdi-briefcase', label: t("My files"), route: { name: 'PersonalFileList', params: { node: securityStore.user.resourceNode.id } } },
+      { icon: 'mdi mdi-account', label: t("Personal data"), route: '/resources/users/personal_data' },
+      { icon: 'mdi mdi-star', label: t("Promoted messages"), route: { path: '/social', query: { filterType: 'promoted' } } }
+    ] : [
+      { icon: 'mdi mdi-home', label: t("Home"), route: '/social' },
+      { icon: 'mdi mdi-email', label: t("Send message"), link: `/main/inc/ajax/user_manager.ajax.php?a=get_user_popup&user_id=${user.value.id}`, isExternal: true }
+    ];
+  });
+
+  return { items };
+}

assets/vue/views/account/Home.vue

@@ -2,38 +2,18 @@
   <div class="flex flex-col md:flex-row gap-4">
     <div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
       <UserProfileCard />
-      <SocialSideMenu />
     </div>
     <div class="md:basis-2/3 lg:basis-3/4 2xl:basis-5/6">
-      <div id="account-home">
-        <div class="flex mb-4">
-          <Avatar
-            :image="user.illustrationUrl + '?w=80&h=80&fit=crop'"
-            class="flex-none mr-2"
-            shape="circle"
-            size="large"
-          />
-          <div class="flex-1">
-            <p class="text-body-1">
-              {{ user.fullName }}
-            </p>
-            <p class="text-caption">
-              {{ user.username }}
-            </p>
-          </div>
-        </div>
-      </div>
+      <SocialWall :hidePostForm="true" />
     </div>
   </div>
 </template>
 
 <script setup>
 import { onMounted, provide } from "vue"
-
-import Avatar from "primevue/avatar"
-import SocialSideMenu from "../../components/social/SocialSideMenu.vue";
 import UserProfileCard from "../../components/social/UserProfileCard.vue"
 import { useSocialInfo } from "../../composables/useSocialInfo"
+import SocialWall from "../social/SocialWall.vue"
 
 
 const { user, isCurrentUser, groupInfo, isGroup, loadUser } = useSocialInfo();

assets/vue/views/message/MessageList.vue

@@ -179,7 +179,6 @@ import { MESSAGE_STATUS_DELETED, MESSAGE_TYPE_INBOX } from "../../components/mes
 import { GET_USER_MESSAGE_TAGS } from "../../graphql/queries/MessageTag"
 import { useNotification } from "../../composables/notification"
 import { useMessageRelUserStore } from "../../store/messageRelUserStore"
-import SocialSideMenu from "../../components/social/SocialSideMenu.vue"
 import { useSecurityStore } from "../../store/securityStore"
 
 const route = useRoute()