Add tags to ResourceTable (#7388)

* Add tags to resourcetable * Use file tags instead of tags * Add changelog, remove border for + item * Replace OcFileTag * Dump ODS
owncloud · Dec 22, 2022 · 7a591be · 7a591be
1 parent b870786
commit 7a591be
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/changelog/unreleased/enhancement-add-tags-to-resource-table b/changelog/unreleased/enhancement-add-tags-to-resource-table
@@ -0,0 +1,5 @@
+Enhancement: Add Tags to ResourceTable
+
+We've added a new column in ResourceTable to display tags
+
+https://github.com/owncloud/web/pull/7388
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -84,6 +84,21 @@
     <template #size="{ item }">
       <oc-resource-size :size="item.size || Number.NaN" />
     </template>
+    <template #tags="{ item }">
+      <router-link v-for="tag in item.tags.slice(0, 2)" :key="tag" :to="getTagLink(tag)">
+        <oc-tag :rounded="true" size="small" class="oc-ml-xs">
+          {{ tag }}
+        </oc-tag>
+      </router-link>
+      <oc-tag
+        v-if="item.tags.length > 2"
+        size="small"
+        class="resource-table-tag-more"
+        @click="openTagsSidebar"
+      >
+        + {{ item.tags.length - 2 }}
+      </oc-tag>
+    </template>
     <template #mdate="{ item }">
       <span
         v-oc-tooltip="formatDate(item.mdate)"
@@ -192,7 +207,7 @@ import { Resource } from 'web-client'
 import { ClipboardActions } from '../../helpers/clipboardActions'
 import { isResourceTxtFileAlmostEmpty } from '../../helpers/resources'
 import { ShareTypes } from 'web-client/src/helpers/share'
-import { createLocationSpaces, createLocationShares } from '../../router'
+import { createLocationSpaces, createLocationShares, createLocationCommon } from '../../router'
 import { formatDateFromJSDate, formatRelativeDateFromJSDate } from 'web-pkg/src/helpers'
 import { SideBarEventTopics } from '../../composables/sideBar'
 import { buildShareSpaceResource, extractDomSelector, SpaceResource } from 'web-client/src/helpers'
@@ -462,6 +477,13 @@ export default defineComponent({
             alignH: 'right',
             wrap: 'nowrap'
           },
+          {
+            name: 'tags',
+            title: this.$gettext('Tags'),
+            type: 'slot',
+            alignH: 'right',
+            wrap: 'nowrap'
+          },
           {
             name: 'owner',
             title: this.$gettext('Shared by'),
@@ -567,6 +589,11 @@ export default defineComponent({
     shouldDisplayThumbnails(item) {
       return this.areThumbnailsDisplayed && !isResourceTxtFileAlmostEmpty(item)
     },
+    getTagLink(tag) {
+      return createLocationCommon('files-common-search', {
+        query: { term: `tag:${tag}`, provider: 'files.sdk' }
+      })
+    },
     isLatestSelectedItem(item) {
       return item.id === this.latestSelectedId
     },
@@ -577,6 +604,9 @@ export default defineComponent({
     openRenameDialog(item) {
       this.$_rename_trigger({ resources: [item] }, this.getMatchingSpace(item))
     },
+    openTagsSidebar() {
+      this.openWithPanel('tags-item')
+    },
     openSharingSidebar(file) {
       let panelToOpen
       if (file.type === 'space') {
@@ -868,6 +898,10 @@ export default defineComponent({
       }
     }
   }
+  &-tag-more {
+    cursor: pointer;
+    border: 0px !important;
+  }
   &-edit-name {
     display: inline-flex;
     margin-left: var(--oc-space-xsmall);

diff --git a/packages/web-client/src/helpers/resource/types.ts b/packages/web-client/src/helpers/resource/types.ts
@@ -8,6 +8,7 @@ export interface Resource {
   storageId?: string
   readonly nodeId?: string
   name?: string
+  tags?: string[]
   path: string
   webDavPath?: string
   downloadURL?: string