Improve collaborators and owner columns in shared file lists

When sharing with multiple targets, they must all be listed there
instead of a single entry. This is fixed by replacing the code that make
share entries unique into an aggregation that has been inspired by the
one used in OC core.
Also includes group shares and link shares now.

Added avatars and icons for the displayed collaborators in the column.

apps/files/src/components/Collaborators/SharedFilesList.vue

@@ -7,7 +7,9 @@
           <translate translate-context="Name column in files table">Name</translate>
         </sortable-column-header>
       </div>
-      <div class="uk-text-nowrap uk-text-meta uk-width-small" v-text="$_sharedCellTitle" />
+      <div><!-- indicators column --></div>
+      <div key="shared-with-header-cell" v-if="!$_isSharedWithMe" class="uk-text-nowrap uk-text-meta uk-width-medium" translate-context="Collaborators table column" v-text="$gettext('Collaborators')" />
+      <div key="shared-with-header-cell" v-else class="uk-text-nowrap uk-text-meta uk-width-small" translate-context="Owner table column" v-text="$gettext('Owner')" />
       <div
         v-if="$route.name === 'files-shared-with-me'"
         shrink
@@ -35,16 +37,25 @@
           class="uk-margin-small-left"
         />
       </div>
-      <div class="uk-text-meta uk-text-nowrap uk-width-small">
-        <div v-if="$route.name === 'files-shared-with-others'" key="shared-with-cell">
-          <span v-text="item.sharedWith" />
-          <span v-if="item.shareType === 1">
-            (<translate>group</translate>)
-          </span>
-        </div>
-        <div v-else key="shared-from-cell">
-          {{ item.shareOwnerDisplayname }}
-        </div>
+      <div><!-- indicators column --></div>
+      <div key="shared-with-cell" v-if="!$_isSharedWithMe" class="uk-text-meta uk-text-nowrap uk-text-truncate uk-width-medium uk-flex file-row-collaborators">
+        <span v-for="share in item.shares" :key="share.sourceId" class="uk-margin-small-right uk-flex uk-flex-middle">
+          <avatar-image v-if="share.shareType === shareTypes.user && share.collaborator" class="uk-margin-xsmall-right" :width="24" :userid="share.collaborator.name" :userName="share.collaborator.displayName" />
+          <oc-icon
+            v-else
+            :name="$_shareTypeIcon(share.shareType)"
+            class="uk-margin-xsmall-right"
+            size="small"
+            variation="active"
+            aria-hidden="true"
+          />
+          <span v-if="share.collaborator" v-text="share.collaborator.displayName" />
+          <translate v-if="share.shareType === shareTypes.link" translate-context="Short public link indicator">Public</translate>
+        </span>
+      </div>
+      <div v-else key="shared-from-cell" class="uk-text-meta uk-text-nowrap uk-text-truncate uk-width-small uk-flex uk-flex-middle file-row-collaborators">
+        <avatar-image class="uk-margin-xsmall-right" :width="24" :userid="item.shareOwner.username" :userName="item.shareOwner.displayName" />
+        <span v-text="item.shareOwner.displayName"/>
       </div>
       <div v-if="$route.name === 'files-shared-with-me'" class="uk-text-nowrap uk-width-small" :key="item.id + item.status">
         <a v-if="item.status === 1 || item.status === 2" class="uk-text-meta" @click="pendingShareAction(item, 'POST')" v-translate>Accept</a>
@@ -71,6 +82,7 @@ import FileActions from '../../fileactions'
 import FileList from '../FileList.vue'
 import NoContentMessage from '../NoContentMessage.vue'
 import SortableColumnHeader from '../FilesLists/SortableColumnHeader.vue'
+import { shareTypes } from '../../helpers/shareTypes'
 
 export default {
   name: 'SharedFilesList',
@@ -96,16 +108,12 @@ export default {
   computed: {
     ...mapGetters('Files', ['loadingFolder']),
 
-    $_isSharedWithMe () {
-      return (this.$route.name === 'files-shared-with-me')
+    shareTypes () {
+      return shareTypes
     },
 
-    $_sharedCellTitle () {
-      if (this.$_isSharedWithMe) {
-        return this.$gettext('Owner')
-      }
-
-      return this.$gettext('Collaborators')
+    $_isSharedWithMe () {
+      return (this.$route.name === 'files-shared-with-me')
     }
   },
   watch: {
@@ -127,6 +135,14 @@ export default {
   methods: {
     ...mapActions('Files', ['loadFolderSharedFromMe', 'loadFolderSharedWithMe', 'setFilterTerm', 'pendingShare']),
 
+    $_shareTypeIcon (type) {
+      switch (type) {
+        case shareTypes.user: return 'person'
+        case shareTypes.group: return 'group'
+        case shareTypes.link: return 'link'
+      }
+    },
+
     $_ocSharedFromMe_getFiles () {
       this.loadFolderSharedFromMe({
         client: this.$client,

apps/files/src/components/FilesLists/StatusIndicators/DefaultIndicators.vue

@@ -35,7 +35,7 @@ export default {
     },
     parentPath: {
       type: String,
-      required: true
+      required: false
     }
   },
 
@@ -61,6 +61,9 @@ export default {
     },
 
     shareTypesIndirect () {
+      if (!this.parentPath) {
+        return []
+      }
       const parentPaths = getParentPaths(this.parentPath, true)
       if (parentPaths.length === 0) {
         return []
@@ -87,16 +90,27 @@ export default {
   },
 
   methods: {
+    $_shareTypes (item) {
+      if (typeof item.shareTypes !== 'undefined') {
+        return item.shareTypes
+      }
+
+      if (item.shares) {
+        return Array.from(new Set(item.shares.map(share => parseInt(share.type, 10))))
+      }
+      return []
+    },
+
     isDirectUserShare (item) {
-      return (intersection(userShareTypes, item.shareTypes).length > 0)
+      return (intersection(userShareTypes, this.$_shareTypes(item)).length > 0)
     },
 
     isIndirectUserShare (item) {
       return (item.isReceivedShare() || intersection(userShareTypes, this.shareTypesIndirect).length > 0)
     },
 
     isDirectLinkShare (item) {
-      return (item.shareTypes.indexOf(shareTypes.link) >= 0)
+      return (this.$_shareTypes(item).indexOf(shareTypes.link) >= 0)
     },
 
     isIndirectLinkShare () {

apps/files/src/components/FilesLists/StatusIndicators/StatusIndicators.vue

@@ -37,7 +37,7 @@ export default {
     },
     parentPath: {
       type: String,
-      required: true
+      required: false
     }
   },