Add related resources panel component

l10n/messages.pot

@@ -56,6 +56,9 @@ msgstr ""
 msgid "Edit item"
 msgstr ""
 
+msgid "Error getting related resources"
+msgstr ""
+
 msgid "External documentation for {title}"
 msgstr ""
 
@@ -104,6 +107,9 @@ msgstr ""
 msgid "Open"
 msgstr ""
 
+msgid "Open link to \"{resourceTitle}\""
+msgstr ""
+
 msgid "Open navigation"
 msgstr ""
 
@@ -125,6 +131,9 @@ msgstr ""
 msgid "Previous"
 msgstr ""
 
+msgid "Related resources"
+msgstr ""
+
 msgid "Search"
 msgstr ""
 

src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue

@@ -0,0 +1,199 @@
+<!--
+ - @copyright 2022 Christopher Ng <chrng8@gmail.com>
+ -
+ - @author Christopher Ng <chrng8@gmail.com>
+ -
+ - @license AGPL-3.0-or-later
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+-->
+
+<docs>
+### Usage
+
+Use this component to display the related resources of a given item.
+
+```
+<template>
+ <NcRelatedResourcesPanel provider-id="talk"
+ :item-id="conversationId" />
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ conversationId: 1,
+ }
+ },
+}
+</script>
+```
+</docs>
+
+<template>
+ <div v-if="appEnabled && isVisible" class="related-resources">
+ <div class="related-resources__header">
+ <h5>{{ headerTranslated }}</h5>
+ </div>
+
+ <NcResource v-for="resource in resources"
+ :key="resource.itemId"
+ class="related-resources__entry"
+ :title="resource.title"
+ :subtitle="resource.subtitle"
+ :tooltip="resource.tooltip"
+ :url="resource.url" />
+ </div>
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
+
+import NcResource from './NcResource.vue'
+
+export default {
+ name: 'NcRelatedResourcesPanel',
+
+ components: {
+ NcResource,
+ },
+
+ props: {
+ /**
+ * The provider id implemented with `\OCA\RelatedResources\IRelatedResourceProvider::getProviderId()`
+ */
+ providerId: {
+ type: String,
+ default: null,
+ },
+ /**
+ * The item id which uniquely identities the e.g. Calendar event, Deck board, file, Talk room, etc.
+ */
+ itemId: {
+ type: [String, Number],
+ default: null,
+ },
+ /**
+ * Only used by the files sidebar
+ *
+ * File info is passed when registered with `OCA.Sharing.ShareTabSections.registerSection()`
+ */
+ fileInfo: {
+ type: Object,
+ default: null,
+ },
+ },
+
+ emits: [
+ 'has-resources',
+ ],
+
+ data() {
+ return {
+ appEnabled: OC?.appswebroots?.related_resources !== undefined,
+ headerTranslated: t('Related resources'),
+ loading: false,
+ resources: [],
+ }
+ },
+
+ computed: {
+ isVisible() {
+ return !this.loading && this.resources.length > 0
+ },
+
+ hasResourceInfo() {
+ if (this.providerId !== null && this.itemId !== null) {
+ return true
+ }
+ if (this.fileInfo !== null) {
+ return true
+ }
+ return false
+ },
+
+ url() {
+ if (this.fileInfo?.id !== undefined) {
+ return generateOcsUrl('/apps/related_resources/related/files/{fileId}?format=json', { fileId: this.fileInfo.id })
+ }
+ return generateOcsUrl('/apps/related_resources/related/{providerId}/{itemId}?format=json', {
+ providerId: this.providerId,
+ itemId: this.itemId,
+ })
+ },
+ },
+
+ watch: {
+ providerId() {
+ this.fetchRelatedResources()
+ },
+ itemId() {
+ this.fetchRelatedResources()
+ },
+ fileInfo() {
+ this.fetchRelatedResources()
+ },
+ resources(resources) {
+ /**
+ * Emitted when the resources value changes
+ *
+ * @type {boolean}
+ */
+ this.$emit('has-resources', resources.length > 0)
+ },
+ },
+
+ created() {
+ this.fetchRelatedResources()
+ },
+
+ methods: {
+ async fetchRelatedResources() {
+ if (!this.appEnabled || !this.hasResourceInfo) {
+ return
+ }
+
+ this.loading = true
+ this.resources = []
+ try {
+ const response = await axios.get(this.url)
+ this.resources = response.data.ocs?.data
+ } catch (e) {
+ console.error(e)
+ showError(t('Error getting related resources'))
+ } finally {
+ this.loading = false
+ }
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.related-resources {
+ &__header {
+ display: flex;
+ height: 44px;
+ align-items: center;
+ }
+
+ &__entry {
+ padding-left: 36px;
+ }
+}
+</style>

src/components/NcRelatedResourcesPanel/NcResource.vue

@@ -0,0 +1,111 @@
+<!--
+ - @copyright 2022 Christopher Ng <chrng8@gmail.com>
+ -
+ - @author Christopher Ng <chrng8@gmail.com>
+ -
+ - @license AGPL-3.0-or-later
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+-->
+
+<template>
+ <li class="resource">
+ <div v-tooltip="tooltip" class="resource__desc">
+ <h5>{{ title }}</h5>
+ <p v-if="subtitle">
+ {{ subtitle }}
+ </p>
+ </div>
+ <NcButton :aria-label="labelTranslated"
+ type="tertiary"
+ :href="url">
+ <template #icon>
+ <ArrowRight :size="20" />
+ </template>
+ </NcButton>
+ </li>
+</template>
+
+<script>
+import NcButton from '../NcButton/index.js'
+import Tooltip from '../../directives/Tooltip/index.js'
+
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+
+export default {
+ name: 'NcResource',
+
+ components: {
+ ArrowRight,
+ NcButton,
+ },
+
+ directives: {
+ Tooltip,
+ },
+
+ props: {
+ title: {
+ type: String,
+ required: true,
+ },
+ subtitle: {
+ type: String,
+ default: null,
+ },
+ tooltip: {
+ type: String,
+ default: null,
+ },
+ url: {
+ type: String,
+ required: true,
+ },
+ },
+
+ data() {
+ return {
+ labelTranslated: t('Open link to "{resourceTitle}"', { resourceTitle: this.title }),
+ }
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.resource {
+ display: flex;
+ align-items: center;
+ height: 44px;
+
+ &__desc {
+ padding: 8px;
+ line-height: 1.2em;
+ position: relative;
+ flex: 1 1;
+ min-width: 0;
+
+ h5 {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ max-width: inherit;
+ }
+
+ p {
+ color: var(--color-text-maxcontrast);
+ }
+ }
+}
+</style>

src/components/NcRelatedResourcesPanel/index.js

@@ -0,0 +1,23 @@
+/**
+ * @copyright 2022 Christopher Ng <chrng8@gmail.com>
+ *
+ * @author Christopher Ng <chrng8@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+export { default } from './NcRelatedResourcesPanel.vue'

src/components/index.js

@@ -74,3 +74,4 @@ export { default as NcRichContenteditable } from './NcRichContenteditable/index.
 export { default as NcSettingsSection } from './NcSettingsSection/index.js'
 export { default as NcTextField } from './NcTextField/index.js'
 export { default as NcUserBubble } from './NcUserBubble/index.js'
+export { default as NcRelatedResourcesPanel } from './NcRelatedResourcesPanel/index.js'