Improve collaborators and owner columns in shared file lists

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,21 +37,31 @@
           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.id" class="uk-margin-small-right uk-flex uk-flex-middle">
+          <avatar-image :key="'avatar-' + share.id" 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
+            :key="'icon-' + share.id"
+            :name="$_shareTypeIcon(share.shareType)"
+            class="uk-margin-xsmall-right"
+            size="small"
+            variation="active"
+            aria-hidden="true"
+          />
+          <span :key="'collaborator-name-' + share.id" v-if="share.collaborator" class="file-row-collaborator-name" v-text="share.collaborator.displayName" />
+          <translate :key="'collaborator-name-public-' + share.id" v-if="share.shareType === shareTypes.link" class="file-row-collaborator-name" 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 class="file-row-owner-name" 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>
-        <a v-if="item.status === 1" class="uk-text-meta uk-margin-left" @click="pendingShareAction(item, 'DELETE')" v-translate>Decline</a>
-        <span class="uk-text-small uk-margin-left" v-text="shareStatus(item.status)" />
+        <a v-if="item.status === 1 || item.status === 2" class="file-row-share-status-action uk-text-meta" @click="pendingShareAction(item, 'POST')" v-translate>Accept</a>
+        <a v-if="item.status === 1" class="file-row-share-status-action uk-text-meta uk-margin-left" @click="pendingShareAction(item, 'DELETE')" v-translate>Decline</a>
+        <span class="uk-text-small uk-margin-left file-row-share-status-text" v-text="shareStatus(item.status)" />
       </div>
       <div class="uk-text-meta uk-text-nowrap uk-width-small" v-text="formDateFromNow(item.shareTime)" />
     </template>
@@ -71,6 +83,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 +109,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 +136,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
     }
   },