Add tags to ResourceTable

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

packages/web-app-files/src/components/FilesList/ResourceTable.vue

@@ -80,6 +80,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)"
@@ -187,7 +202,7 @@ import { defineComponent, PropType } from '@vue/composition-api'
 import { extractDomSelector } from '../../helpers/resource'
 import { Resource } from 'web-client'
 import { ShareTypes } from '../../helpers/share'
-import { createLocationSpaces } from '../../router'
+import { createLocationSpaces, createLocationCommon } from '../../router'
 
 const mapResourceFields = (resource: Resource, mapping = {}) => {
   return Object.keys(mapping).reduce((result, resourceKey) => {
@@ -465,6 +480,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('Share owner'),
@@ -562,6 +584,11 @@ export default defineComponent({
     isResourceSelected(item) {
       return this.selectedIds.includes(item.id)
     },
+    getTagLink(tag) {
+      return createLocationCommon('files-common-search', {
+        query: { term: `tag:${tag}`, provider: 'files.sdk' }
+      })
+    },
     isLatestSelectedItem(item) {
       return item.id === this.latestSelectedId
     },
@@ -572,6 +599,9 @@ export default defineComponent({
     openRenameDialog(item) {
       this.$_rename_trigger({ resources: [item] })
     },
+    openTagsSidebar() {
+      this.openWithPanel('tags-item')
+    },
     openSharingSidebar(file) {
       if (file.share?.shareType === ShareTypes.link.value) {
         this.openWithPanel('sharing-item#linkShares')
@@ -811,6 +841,10 @@ export default defineComponent({
       }
     }
   }
+  &-tag-more {
+    cursor: pointer;
+    border: 0px !important;
+  }
   &-edit-name {
     display: inline-flex;
     vertical-align: super;

packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue

@@ -2,7 +2,7 @@
   <div id="oc-files-sharing-sidebar" class="oc-position-relative">
     <div class="oc-flex">
       <h3 v-translate class="oc-text-bold oc-m-rm oc-text-initial">Members</h3>
-      <oc-contextual-helper class="oc-pl-xs" v-if="helpersEnabled" v-bind="spaceAddMemberHelp" />
+      <oc-contextual-helper v-if="helpersEnabled" class="oc-pl-xs" v-bind="spaceAddMemberHelp" />
     </div>
     <invite-collaborator-form
       v-if="currentUserCanShare"

packages/web-app-files/src/helpers/resources.ts

@@ -56,6 +56,7 @@ export function buildResource(resource): Resource {
     storageId: extractStorageId(resource.fileInfo[DavProperty.FileId]),
     mimeType: resource.fileInfo[DavProperty.MimeType],
     name: path.basename(resource.name),
+    tags: ['space', 'mars', 'code', 'intern'],
     extension: isFolder ? '' : extension,
     path: resourcePath,
     webDavPath: resource.name,

packages/web-client/src/helpers/resource/types.ts

@@ -6,6 +6,7 @@ export interface Resource {
   fileId?: string
   storageId?: string
   name?: string
+  tags?: string[]
   path: string
   webDavPath?: string
   downloadURL?: string

packages/web-runtime/package.json

@@ -24,7 +24,7 @@
     "luxon": "^2.4.0",
     "marked": "^4.0.12",
     "oidc-client-ts": "^2.0.5",
-    "owncloud-design-system": "14.0.0-alpha.12",
+    "owncloud-design-system": "14.0.0-alpha.13",
     "owncloud-sdk": "~3.0.0-alpha.15",
     "p-queue": "^6.6.2",
     "popper-max-size-modifier": "^0.2.0",

yarn.lock

@@ -9711,9 +9711,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"owncloud-design-system@npm:14.0.0-alpha.12":
-  version: 14.0.0-alpha.12
-  resolution: "owncloud-design-system@npm:14.0.0-alpha.12"
+"owncloud-design-system@npm:14.0.0-alpha.13":
+  version: 14.0.0-alpha.13
+  resolution: "owncloud-design-system@npm:14.0.0-alpha.13"
   peerDependencies:
     "@popperjs/core": ^2.4.0
     "@vue/composition-api": ^1.4.3
@@ -9730,7 +9730,7 @@ __metadata:
     vue-inline-svg: ^2.0.0
     vue-select: ^3.12.0
     webfontloader: ^1.6.28
-  checksum: 26903645886722969b982fc22bd0b6831df6d8c41a37b586ec0af803cbd33bc6f44aa7e6ee93698644c7467d18cc03bc5bf16eeb4a9da3126068a1d32b89a64a
+  checksum: f40182673cb47e906175ee75b11b6257dacfae22aef074040424208dd4a6e972bb31b7feae339a6c6927e8a71e0b0a01414187d73960abfe2a00365fe83cad22
   languageName: node
   linkType: hard
 
@@ -13773,7 +13773,7 @@ __metadata:
     luxon: ^2.4.0
     marked: ^4.0.12
     oidc-client-ts: ^2.0.5
-    owncloud-design-system: 14.0.0-alpha.12
+    owncloud-design-system: 14.0.0-alpha.13
     owncloud-sdk: ~3.0.0-alpha.15
     p-queue: ^6.6.2
     popper-max-size-modifier: ^0.2.0