feat: List team resources in related resources panel

Signed-off-by: Julius Härtl <[email protected]>
nextcloud-libraries · Feb 27, 2024 · 3eec9af · 3eec9af
1 parent e94a7cb
commit 3eec9af
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 2 deletions.
diff --git a/l10n/messages.pot b/l10n/messages.pot
@@ -238,6 +238,9 @@ msgstr ""
 msgid "Options"
 msgstr ""
 
+msgid "Other resources"
+msgstr ""
+
 msgid "Password is secure"
 msgstr ""
 

diff --git a/src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue b/src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue
@@ -48,6 +48,35 @@ export default {
 	<div v-if="appEnabled && isVisible" class="related-resources">
 		<div class="related-resources__header">
 			<h5>{{ header }}</h5>
+		</div>
+		<div v-for="team in teamResources" :key="team.teamId" class="related-team">
+			<h5 class="related-team__header">
+				<a :href="team.link" class="related-team__link">
+					<AccountGroup :size="20" />
+					{{ team.displayName }}
+				</a>
+			</h5>
+
+			<ul>
+				<NcListItem v-for="resource in team.resources"
+					:key="resource.url"
+					:name="resource.label"
+					:href="resource.url">
+					<template #icon>
+						<span v-if="resource.iconEmoji" class="resource__icon">
+							{{ resource.iconEmoji }}
+						</span>
+						<span v-else-if="resource.iconSvg" class="resource__icon" v-html="resource.iconSvg" />
+						<span v-if="resource.iconUrl" class="resource__icon">
+							<img :src="resource.iconURL" alt="">
+						</span>
+					</template>
+				</NcListItem>
+			</ul>
+		</div>
+
+		<div class="related-resources__header">
+			<h5>{{ headerOther }}</h5>
 			<p>{{ subline }}</p>
 		</div>
 
@@ -63,16 +92,20 @@ export default {
 <script>
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
+import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
 
 import NcResource from './NcResource.vue'
+import NcListItem from '../NcListItem/NcListItem.vue'
 
 import { t } from '../../l10n.js'
 
 export default {
 	name: 'NcRelatedResourcesPanel',
 
 	components: {
+		AccountGroup,
 		NcResource,
+		NcListItem,
 	},
 
 	props: {
@@ -120,6 +153,10 @@ export default {
 			type: String,
 			default: t('Related resources'),
 		},
+		headerOther: {
+			type: String,
+			default: t('Other resources'),
+		},
 		description: {
 			type: String,
 			default: t('Anything shared with the same group of people will show up here'),
@@ -144,6 +181,7 @@ export default {
 			loading: false,
 			error: null,
 			resources: [],
+			teamResources: null,
 		}
 	},
 
@@ -152,7 +190,7 @@ export default {
 			if (this.loading) {
 				return false
 			}
-			return this.error ?? this.resources.length > 0
+			return (this.error ?? this.resources.length > 0) || this.teamResources?.length > 0
 		},
 		subline() {
 			if (this.error) {
@@ -231,6 +269,8 @@ export default {
 	methods: {
 		t,
 		async fetchRelatedResources() {
+			this.fetchTeamResources()
+
 			if (!this.appEnabled || !this.hasResourceInfo) {
 				return
 			}
@@ -248,14 +288,18 @@ export default {
 				this.loading = false
 			}
 		},
+		async fetchTeamResources() {
+			const response = await axios.get(generateOcsUrl(`/teams/resources/${this.providerId}/${this.itemId}`))
+			this.teamResources = response.data.ocs.data.teams
+			this.loading = false
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
 .related-resources {
 	&__header {
-		margin: 0 0 10px 46px;
 
 		h5 {
 			font-weight: bold;
@@ -266,4 +310,13 @@ export default {
 		}
 	}
 }
+
+.related-team {
+	&__link {
+		display: flex;
+		gap: 12px;
+		padding: 6px 12px;
+		font-weight: bold;
+	}
+}
 </style>