feat: List team resources in related resources panel

Signed-off-by: Julius Härtl <[email protected]>
nextcloud-libraries · Mar 1, 2024 · 8faf8d8 · 8faf8d8
1 parent e94a7cb
commit 8faf8d8
Show file tree

Hide file tree

Showing 2 changed files with 172 additions and 4 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 ""
 
@@ -286,6 +289,9 @@ msgstr ""
 msgid "Related resources"
 msgstr ""
 
+msgid "Related team resources"
+msgstr ""
+
 #. TRANSLATORS: A color name for RGB(191, 103, 139)
 msgid "Rosy brown"
 msgstr ""

diff --git a/src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue b/src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue
@@ -46,8 +46,57 @@ export default {
 
 <template>
 	<div v-if="appEnabled && isVisible" class="related-resources">
+		<div v-if="teamResources.length > 0" class="related-resources__team">
+			<div class="related-resources__header">
+				<h5>{{ t('Related team resources') }}</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>
+					<NcButton type="tertiary" @click.stop="toggleOpen(team.teamId)">
+						<ChevronUp v-if="open(team.teamId)"
+							:size="20" />
+						<ChevronDown v-else
+							:size="20" />
+					</NcButton>
+				</h5>
+
+				<div v-if="open(team.teamId)">
+					<div v-for="provider in teamProviders(team.teamId)"
+						:key="provider.id"
+						class="related-team-provider">
+						<h6 v-if="provider.resources.length > 0">
+							{{ provider.name }}
+						</h6>
+						<ul>
+							<li v-for="resource in provider.resources" :key="resource.url" class="related-team-resource">
+								<a :href="resource.url" class="related-team-resource__link">
+									<span v-if="resource.iconEmoji" class="resource__icon">
+										{{ resource.iconEmoji }}
+									</span>
+									<!-- @eslint-disable-next-line vue/no-v-html -->
+									<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>
+									<span class="resource__name">
+										{{ resource.label }}
+									</span>
+								</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+
 		<div class="related-resources__header">
-			<h5>{{ header }}</h5>
+			<h5>{{ headerOther }}</h5>
 			<p>{{ subline }}</p>
 		</div>
 
@@ -63,16 +112,23 @@ export default {
 <script>
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
-
+import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import NcResource from './NcResource.vue'
+import NcButton from '../NcButton/NcButton.vue'
 
 import { t } from '../../l10n.js'
 
 export default {
 	name: 'NcRelatedResourcesPanel',
 
 	components: {
+		AccountGroup,
 		NcResource,
+		ChevronDown,
+		ChevronUp,
+		NcButton,
 	},
 
 	props: {
@@ -120,6 +176,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 +204,8 @@ export default {
 			loading: false,
 			error: null,
 			resources: [],
+			teamResources: null,
+			teamOpen: null,
 		}
 	},
 
@@ -152,7 +214,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) {
@@ -194,6 +256,34 @@ export default {
 				limit: this.limit,
 			})
 		},
+
+		teamProviders() {
+			return (teamId) => {
+				const team = this.teamResources.find(t => t.teamId === teamId)
+				return team.resources?.reduce((acc, resource) => {
+					if (resource.provider.id === this.providerId && resource.id === String(this.itemId)) {
+						return acc
+					}
+
+					if (!acc[resource.provider.id]) {
+						acc[resource.provider.id] = resource.provider
+						acc[resource.provider.id].resources = []
+					}
+
+					if (resource.provider.id === this.providerId && resource.id === String(this.itemId)) {
+						return acc
+					}
+
+					acc[resource.provider.id].resources.push(resource)
+					return acc
+				}, {})
+			}
+		},
+		open() {
+			return (teamId) => {
+				return this.teamOpen === teamId
+			}
+		},
 	},
 
 	watch: {
@@ -231,6 +321,8 @@ export default {
 	methods: {
 		t,
 		async fetchRelatedResources() {
+			this.fetchTeamResources()
+
 			if (!this.appEnabled || !this.hasResourceInfo) {
 				return
 			}
@@ -248,22 +340,92 @@ 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.teamOpen = this.teamResources[0]?.teamId
+			this.loading = false
+		},
+		toggleOpen(teamId) {
+			this.teamOpen = this.teamOpen !== teamId ? teamId : null
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
 .related-resources {
 	&__header {
-		margin: 0 0 10px 46px;
 
 		h5 {
 			font-weight: bold;
+			margin-bottom: 6px;
 		}
 
 		p {
 			color: var(--color-text-maxcontrast);
 		}
 	}
 }
+
+.related-team {
+	border-radius: var(--border-radius-large);
+	border: 2px solid var(--color-border-dark);
+	margin-bottom: 6px;
+
+	&__header {
+		padding: 5px;
+		display: flex;
+		gap: 12px;
+	}
+
+	&__link {
+		display: flex;
+		flex-grow: 1;
+		align-items: center;
+		gap: 12px;
+		padding: 6px 12px;
+		font-weight: bold;
+	}
+
+	.related-team-provider {
+		padding: 6px 12px;
+
+		h6 {
+			font-weight: bold;
+			margin-bottom: 3px;
+		}
+
+		&__link {
+			display: flex;
+			gap: 12px;
+			padding: 6px 12px;
+			font-weight: bold;
+		}
+	}
+
+	.related-team-resource {
+		&__link {
+			display: flex;
+			gap: 12px;
+			padding: 6px 12px;
+			border-radius: var(--border-radius-large);
+
+			&:hover {
+				background-color: var(--color-background-hover);
+			}
+			&:focus {
+				background-color: var(--color-background-hover);
+				outline: 2px solid var(--color-primary-element);
+			}
+		}
+		&__icon {
+			width: 24px;
+			height: 24px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+}
 </style>