Skip to content

Commit 693ac18

Browse files
christianbeeznestchristianbeeznest
authored
Merge pull request #5502 from christianbeeznest/ofaj-21101-12
Social: Enhancements and Fixes for Social Network Features - refs BT#21101
2 parents 66f6fcd + b09d91d commit 693ac18

File tree

14 files changed

+95
-91
lines changed

14 files changed

+95
-91
lines changed

‎assets/css/app.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -619,6 +619,16 @@ form .field {
619619
display: none;
620620
}
621621

622+
.sub-item-indent {
623+
padding-left: 20px;
624+
}
625+
626+
.sub-item-indent.active {
627+
background-color: #e0e0e0;
628+
color: #333;
629+
font-weight: bold;
630+
}
631+
622632
//@import 'primevue-md-light-indigo/theme.css';
623633
//@import '~primevue/resources/primevue.min.css';
624634
//@import '~primeflex/primeflex.css';

‎assets/vue/components/message/MessageLayout.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<div class="message-layout flex">
33
<div class="sidebar">
44
<UserProfileCard />
5-
<SocialSideMenu />
65
</div>
76
<div class="content flex-grow">
87
<router-view></router-view>
@@ -11,7 +10,6 @@
1110
</template>
1211
<script setup>
1312
import UserProfileCard from "../social/UserProfileCard.vue"
14-
import SocialSideMenu from "../social/SocialSideMenu.vue"
1513
import { onMounted, provide } from "vue"
1614
import { useSocialInfo } from "../../composables/useSocialInfo"
1715
import { useSecurityStore } from "../../store/securityStore"

‎assets/vue/components/personalfile/Layout.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<div class="flex flex-col md:flex-row gap-4">
33
<div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
44
<UserProfileCard />
5-
<SocialSideMenu />
65
</div>
76
<div class="md:basis-2/3 lg:basis-3/4 2xl:basis-5/6">
87
<h2 v-t="'My files'" class="mr-auto" />
@@ -13,7 +12,6 @@
1312
</template>
1413
<script setup>
1514
import UserProfileCard from "../social/UserProfileCard.vue"
16-
import SocialSideMenu from "../social/SocialSideMenu.vue"
1715
import { onMounted, provide } from "vue"
1816
import { useSocialInfo } from "../../composables/useSocialInfo"
1917

‎assets/vue/components/social/MyGroupsCard.vue

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,18 @@ function search() {
6969
7070
async function fetchGroups(userId) {
7171
try {
72-
const response = await axios.get( `/social-network/groups/${userId}`)
73-
groups.value = response.data.groups
74-
goToUrl.value = response.data.groups.find(group => group.go_to)?.go_to || ''
72+
const response = await axios.get(`/social-network/groups/${userId}`)
73+
if (response.data) {
74+
groups.value = response.data.items
75+
goToUrl.value = response.data.go_to
76+
}
7577
} catch (error) {
76-
console.error('Error fetching groups:', error)
78+
groups.value = []
79+
goToUrl.value = ''
7780
}
7881
}
7982
83+
8084
watchEffect(() => {
8185
if (user.value && user.value.id) {
8286
fetchGroups(user.value.id)

‎assets/vue/components/user/Layout.vue

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
<template>
2-
<div class="flex flex-col md:flex-row gap-4">
3-
<div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
2+
<div class="flex flex-col md:flex-row gap-4 w-full">
3+
<div class="flex flex-col w-full md:w-1/5">
44
<UserProfileCard />
5-
<SocialSideMenu />
65
</div>
7-
<div class="md:basis-2/3 lg:basis-1/2 2xl:basis-4/6">
6+
<div class="flex-grow w-full md:w-4/5">
87
<router-view />
98
</div>
109
</div>
1110
</template>
1211

1312
<script setup>
1413
import UserProfileCard from "../social/UserProfileCard.vue"
15-
import SocialSideMenu from "../social/SocialSideMenu.vue"
16-
1714
import { onMounted, provide } from "vue"
1815
import { useSocialInfo } from "../../composables/useSocialInfo"
1916

‎assets/vue/components/usergroup/Layout.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
44
<UserProfileCard v-if="!isLoading && !isGroup" />
55
<GroupInfoCard v-if="!isLoading && isGroup" />
6-
<SocialSideMenu v-if="!isLoading && !isGroup" />
76
<SocialGroupMenu v-if="!isLoading && isGroup" />
87
</div>
98
<div class="md:basis-2/3 lg:basis-3/4 2xl:basis-5/6">
@@ -13,7 +12,6 @@
1312
</template>
1413
<script setup>
1514
import UserProfileCard from "../social/UserProfileCard.vue"
16-
import SocialSideMenu from "../social/SocialSideMenu.vue"
1715
import { provide } from "vue"
1816
import { useSocialInfo } from "../../composables/useSocialInfo"
1917
import SocialGroupMenu from "../social/SocialGroupMenu.vue"

‎assets/vue/components/userreluser/Layout.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<div class="flex flex-col md:flex-row gap-4">
33
<div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
44
<UserProfileCard />
5-
<SocialSideMenu />
65
</div>
76
<div class="md:basis-2/3 lg:basis-3/4 2xl:basis-5/6">
87
<router-view></router-view>
@@ -11,7 +10,6 @@
1110
</template>
1211
<script setup>
1312
import UserProfileCard from "../social/UserProfileCard.vue"
14-
import SocialSideMenu from "../social/SocialSideMenu.vue"
1513
import { onMounted, provide } from "vue"
1614
import { useSocialInfo } from "../../composables/useSocialInfo"
1715

‎assets/vue/composables/sidebarMenu.js

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,31 @@
11
import { useI18n } from "vue-i18n"
2-
import { computed } from "vue"
2+
import { computed, ref } from "vue"
33
import { useSecurityStore } from "../store/securityStore"
44
import { usePlatformConfig } from "../store/platformConfig"
55
import { useEnrolledStore } from "../store/enrolledStore"
6-
import { useRouter } from "vue-router"
6+
import { useRoute, useRouter } from "vue-router"
7+
import { useSocialMenuItems } from "./useSocialMenuItems"
78

89
export function useSidebarMenu() {
910
const { t } = useI18n()
1011
const router = useRouter()
12+
const route = useRoute()
1113
const securityStore = useSecurityStore()
1214
const platformConfigStore = usePlatformConfig()
1315
const enrolledStore = useEnrolledStore()
16+
const { items: socialItems } = useSocialMenuItems();
1417
const showTabsSetting = platformConfigStore.getSetting("platform.show_tabs")
1518
const showCatalogue = platformConfigStore.getSetting("platform.catalog_show_courses_sessions")
1619

20+
const isActive = (item) => {
21+
if (item.route) {
22+
return route.path === item.route || (item.route.name && route.name === item.route.name)
23+
} else if (item.items) {
24+
return item.items.some(subItem => isActive(subItem))
25+
}
26+
return false
27+
};
28+
1729
const menuItemsBeforeMyCourse = computed(() => {
1830
const items = []
1931

@@ -118,11 +130,29 @@ export function useSidebarMenu() {
118130
}
119131

120132
if (showTabsSetting.indexOf("social") > -1) {
133+
const styledSocialItems = socialItems.value.map(item => {
134+
const newItem = {
135+
...item,
136+
class: `sub-item-indent${isActive(item) ? ' active' : ''}`
137+
};
138+
139+
if (newItem.isLink && newItem.route) {
140+
newItem.command = () => window.location.href = newItem.route
141+
} else if (newItem.route) {
142+
newItem.command = () => router.push(newItem.route)
143+
} else if (newItem.link) {
144+
newItem.command = () => window.location.href = newItem.link
145+
}
146+
147+
return newItem
148+
});
149+
121150
items.push({
122151
icon: "mdi mdi-sitemap-outline",
123152
label: t("Social network"),
124-
command: () => router.push({ name: "SocialWall" }),
125-
})
153+
items: styledSocialItems,
154+
expanded: isActive({ items: styledSocialItems })
155+
});
126156
}
127157

128158
if (platformConfigStore.plugins?.bbb?.show_global_conference_link) {

‎assets/vue/views/account/Home.vue

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,18 @@
22
<div class="flex flex-col md:flex-row gap-4">
33
<div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
44
<UserProfileCard />
5-
<SocialSideMenu />
65
</div>
76
<div class="md:basis-2/3 lg:basis-3/4 2xl:basis-5/6">
8-
<div id="account-home">
9-
<div class="flex mb-4">
10-
<Avatar
11-
:image="user.illustrationUrl + '?w=80&h=80&fit=crop'"
12-
class="flex-none mr-2"
13-
shape="circle"
14-
size="large"
15-
/>
16-
<div class="flex-1">
17-
<p class="text-body-1">
18-
{{ user.fullName }}
19-
</p>
20-
<p class="text-caption">
21-
{{ user.username }}
22-
</p>
23-
</div>
24-
</div>
25-
</div>
7+
<SocialWall :hidePostForm="true" />
268
</div>
279
</div>
2810
</template>
2911

3012
<script setup>
3113
import { onMounted, provide } from "vue"
32-
33-
import Avatar from "primevue/avatar"
34-
import SocialSideMenu from "../../components/social/SocialSideMenu.vue";
3514
import UserProfileCard from "../../components/social/UserProfileCard.vue"
3615
import { useSocialInfo } from "../../composables/useSocialInfo"
16+
import SocialWall from "../social/SocialWall.vue"
3717
3818
3919
const { user, isCurrentUser, groupInfo, isGroup, loadUser } = useSocialInfo();

‎assets/vue/views/message/MessageList.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,6 @@ import { MESSAGE_STATUS_DELETED, MESSAGE_TYPE_INBOX } from "../../components/mes
179179
import { GET_USER_MESSAGE_TAGS } from "../../graphql/queries/MessageTag"
180180
import { useNotification } from "../../composables/notification"
181181
import { useMessageRelUserStore } from "../../store/messageRelUserStore"
182-
import SocialSideMenu from "../../components/social/SocialSideMenu.vue"
183182
import { useSecurityStore } from "../../store/securityStore"
184183
185184
const route = useRoute()

‎assets/vue/views/social/SocialLayout.vue

Lines changed: 18 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,55 @@
11
<template>
2-
<div v-if="!isLoadingPage && hasPermission" class="flex flex-wrap md:flex-nowrap gap-4">
3-
<div class="flex flex-col w-full md:w-1/4 lg:w-1/6">
4-
<UserProfileCard />
5-
<SocialSideMenu />
6-
</div>
7-
<div class="flex-grow w-full md:basis-1/2 lg:basis-2/3">
8-
<component :is="currentComponent" />
9-
</div>
10-
<div class="flex flex-col w-full md:w-1/4 lg:w-1/6" v-if="!isSearchPage">
11-
<MyGroupsCard v-if="!hideSocialGroupBlock" />
12-
<MyFriendsCard />
13-
<MySkillsCard />
14-
</div>
2+
<div v-if="!isLoadingPage && hasPermission" class="flex flex-wrap md:flex-nowrap gap-4">
3+
<div class="flex flex-col w-full md:w-1/5">
4+
<UserProfileCard />
5+
<MyGroupsCard v-if="!hideSocialGroupBlock" />
6+
<MyFriendsCard />
7+
<MySkillsCard />
158
</div>
16-
<div v-if="!isLoadingPage && !hasPermission">
17-
<div class="flex flex-wrap md:flex-nowrap gap-4">
9+
<div class="flex-grow w-full md:w-4/5">
10+
<component :is="currentComponent" />
11+
</div>
12+
</div>
13+
<div v-if="!isLoadingPage && !hasPermission">
14+
<div class="flex flex-wrap md:flex-nowrap gap-4">
1815
<p> {{ t("You do not have permission to view this page") }}</p>
19-
</div>
2016
</div>
17+
</div>
2118
</template>
2219

2320
<script setup>
24-
import { onMounted, provide, computed, readonly, ref, watch, watchEffect } from "vue"
21+
import { onMounted, provide, computed, ref } from "vue"
2522
import { useRoute } from "vue-router"
2623
import SocialWall from "./SocialWall.vue"
2724
import SocialSearch from "./SocialSearch.vue"
2825
import UserProfileCard from "../../components/social/UserProfileCard.vue"
29-
import SocialSideMenu from "../../components/social/SocialSideMenu.vue"
3026
import MyGroupsCard from "../../components/social/MyGroupsCard.vue"
3127
import MyFriendsCard from "../../components/social/MyFriendsCard.vue"
3228
import MySkillsCard from "../../components/social/MySkillsCard.vue"
3329
import { useSocialInfo } from "../../composables/useSocialInfo"
34-
import { useSocialStore } from "../../store/socialStore"
3530
import { useI18n } from "vue-i18n"
3631
import { useSecurityStore } from "../../store/securityStore"
3732
import { usePlatformConfig } from "../../store/platformConfig"
3833
3934
const platformConfigStore = usePlatformConfig()
40-
const hideSocialGroupBlock = "true" === platformConfigStore.getSetting("social.hide_social_groups_block")
35+
const hideSocialGroupBlock = "true" === platformConfigStore.getSetting("social.hide_social_groups_block")
4136
const route = useRoute()
4237
const { t } = useI18n()
4338
const securityStore = useSecurityStore()
44-
const socialStore = useSocialStore()
4539
const hasPermission = ref(false)
4640
const isLoadingPage = ref(true)
47-
const { user, isCurrentUser, groupInfo, isGroup, loadUser } = useSocialInfo()
41+
const { user, isCurrentUser, groupInfo, isGroup } = useSocialInfo()
4842
4943
provide("social-user", user)
5044
provide("is-current-user", isCurrentUser)
5145
provide("group-info", groupInfo)
5246
provide("is-group", isGroup)
5347
54-
const profileUserId = computed(() => route.query.id)
55-
5648
onMounted(async () => {
57-
if (profileUserId.value) {
58-
await socialStore.checkUserRelation(securityStore.user.id, profileUserId.value)
59-
hasPermission.value = socialStore.isProfileVisible
60-
} else {
49+
isLoadingPage.value = false
50+
if (securityStore.user.id) {
6151
hasPermission.value = true
6252
}
63-
isLoadingPage.value = false
6453
})
6554
6655
const isSearchPage = computed(() => route.path.includes('/social/search'))

‎assets/vue/views/social/SocialWall.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<SocialWallPostForm @post-created="refreshPosts" class="mb-6" />
3+
<SocialWallPostForm v-if="!hidePostForm" @post-created="refreshPosts" class="mb-6" />
44
<SocialWallPostList ref="postListRef" class="mb-6" />
55
</div>
66
</template>
@@ -10,6 +10,13 @@ import { ref } from 'vue';
1010
import SocialWallPostForm from "../../components/social/SocialWallPostForm.vue"
1111
import SocialWallPostList from "../../components/social/SocialWallPostList.vue"
1212
13+
const props = defineProps({
14+
hidePostForm: {
15+
type: Boolean,
16+
default: false
17+
}
18+
});
19+
1320
const postListRef = ref(null);
1421
1522
function refreshPosts() {

‎assets/vue/views/userreluser/Invitations.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@
2727
</template>
2828

2929
<script setup>
30-
import axios from 'axios'
31-
import { inject, onMounted, ref, watchEffect } from "vue"
30+
import { inject, onMounted, ref } from "vue"
3231
import InvitationList from "../../components/userreluser/InvitationList.vue"
3332
import BaseButton from "../../components/basecomponents/BaseButton.vue"
3433
import { useRouter } from "vue-router"
@@ -38,12 +37,9 @@ const receivedInvitations = ref([])
3837
const sentInvitations = ref([])
3938
const pendingInvitations = ref([])
4039
const router = useRouter()
41-
4240
const user = inject('social-user')
43-
const isCurrentUser = inject('is-current-user')
44-
4541
46-
watchEffect(() => {
42+
onMounted(() => {
4743
if (user.value && user.value.id) {
4844
fetchInvitations(user.value.id)
4945
}

0 commit comments

Comments
 (0)