[feature] Add shared directories in the shared tab

client/platform/web-girder/api/dataset.service.ts

@@ -19,7 +19,7 @@ async function getDatasetList(
   limit?: number,
   offset?: number,
   sort?: string,
-  sortDir?: number,
+  sortdir?: number,
   shared?: boolean,
   published?: boolean,
 ) {
@@ -28,7 +28,7 @@ async function getDatasetList(
       limit,
       offset,
       sort,
-      sortDir,
+      sortdir,
       shared,
       published,
     },

client/platform/web-girder/api/girder.service.ts

@@ -37,9 +37,33 @@ function setUsePrivateQueue(userId: string, value = false) {
   });
 }
 
+async function getSharedWithMeFolders(
+  limit?: number,
+  offset?: number,
+  sort?: string,
+  sortdir?: number,
+  onlyNonAccessibles: boolean = true,
+) {
+  const response = await girderRest.get<GirderModel[]>('folder/shared-folders', {
+    params: {
+      limit,
+      offset,
+      sort,
+      sortdir,
+      onlyNonAccessibles,
+    },
+  });
+  response.data.forEach((element) => {
+    // eslint-disable-next-line no-param-reassign
+    element._modelType = 'folder';
+  });
+  return response;
+}
+
 export {
   deleteResources,
   getItemsInFolder,
   getFolder,
   setUsePrivateQueue,
+  getSharedWithMeFolders,
 };

client/platform/web-girder/views/DataBrowser.vue

@@ -3,17 +3,19 @@ import {
   computed, defineComponent, ref, onBeforeUnmount,
 } from 'vue';
 import {
-  GirderFileManager, getLocationType, GirderModel,
+  getLocationType, GirderModel,
 } from '@girder/components/src';
 import { itemsPerPageOptions } from 'dive-common/constants';
 import { clientSettings } from 'dive-common/store/settings';
 import { useStore, LocationType } from '../store/types';
 import Upload from './Upload.vue';
 import eventBus from '../eventBus';
 
+import DiveGirderBrowser from './DiveGirderBrowser.vue';
+
 export default defineComponent({
   components: {
-    GirderFileManager,
+    DiveGirderBrowser,
     Upload,
   },
 
@@ -77,7 +79,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <GirderFileManager
+  <DiveGirderBrowser
     ref="fileManager"
     v-model="locationStore.selected"
     :selectable="!getters['Location/locationIsViameFolder']"
@@ -159,5 +161,5 @@ export default defineComponent({
         published
       </v-chip>
     </template>
-  </GirderFileManager>
+  </DiveGirderBrowser>
 </template>

client/platform/web-girder/views/DataShared.vue

@@ -6,8 +6,8 @@ import type { DataOptions } from 'vuetify';
 import { GirderModel, mixins } from '@girder/components/src';
 import { clientSettings } from 'dive-common/store/settings';
 import { itemsPerPageOptions } from 'dive-common/constants';
-import { getDatasetList } from '../api';
-import { useStore, LocationType } from '../store/types';
+import { getSharedWithMeFolders } from '../api';
+import { useStore } from '../store/types';
 
 export default defineComponent({
   name: 'DataShared',
@@ -25,7 +25,7 @@ export default defineComponent({
 
     const headers = [
       { text: 'File Name', value: 'name' },
-      { text: '', value: 'annotator', sortable: false },
+      { text: 'Type', value: 'type' },
       { text: 'File Size', value: 'formattedSize' },
       { text: 'Shared By', value: 'ownerLogin' },
     ];
@@ -41,20 +41,17 @@ export default defineComponent({
       const offset = (page - 1) * clientSettings.rowsPerPage;
       const sort = sortBy[0] || 'created';
       const sortDir = sortDesc[0] === false ? 1 : -1;
-      const shared = true;
-      const response = await getDatasetList(limit, offset, sort, sortDir, shared);
+      const response = await getSharedWithMeFolders(limit, offset, sort, sortDir);
       dataList.value = response.data;
       total.value = Number.parseInt(response.headers['girder-total-count'], 10);
       dataList.value.forEach((element) => {
         // eslint-disable-next-line no-param-reassign
         element.formattedSize = fixSize.formatSize(element.size);
+        // eslint-disable-next-line no-param-reassign
+        element.type = isAnnotationFolder(element) ? 'Dataset' : 'Folder';
       });
     };
 
-    function setLocation(location: LocationType) {
-      store.dispatch('Location/setRouteFromLocation', location);
-    }
-
     function isAnnotationFolder(item: GirderModel) {
       return item._modelType === 'folder' && item.meta.annotate;
     }
@@ -70,7 +67,6 @@ export default defineComponent({
       dataList,
       getters,
       updateOptions,
-      setLocation,
       total,
       locationStore,
       clientSettings,
@@ -87,7 +83,6 @@ export default defineComponent({
   <v-data-table
     v-model="locationStore.selected"
     :selectable="!getters['Location/locationIsViameFolder']"
-    :location="locationStore.location"
     :headers="headers"
     :page.sync="page"
     :items-per-page.sync="clientSettings.rowsPerPage"
@@ -98,11 +93,18 @@ export default defineComponent({
     :footer-props="{ itemsPerPageOptions }"
     item-key="_id"
     show-select
-    @input="$emit('input', $event)"
-    @update:location="setLocation"
   >
     <!-- eslint-disable-next-line -->
-    <template v-slot:item.annotator="{item}">
+    <template v-slot:item.name="{ item }">
+      <div class="filename" @click="$router.push({ name: 'home', params: { routeType: 'folder', routeId: item._id } })">
+        <v-icon class="mb-1 mr-1">
+          mdi-folder{{ item.public ? '' : '-key' }}
+        </v-icon>
+        {{ item.name }}
+      </div>
+    </template>
+    <template v-slot:item.type="{ item }">
+      {{ item.type }}
       <v-btn
         v-if="isAnnotationFolder(item)"
         class="ml-2"
@@ -120,3 +122,14 @@ export default defineComponent({
     </template>
   </v-data-table>
 </template>
+
+<style lang="scss" scoped>
+.filename {
+  cursor: pointer;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+</style>

client/platform/web-girder/views/DataSharedBreadCrumb.vue

@@ -0,0 +1,175 @@
+<script>
+import { createLocationValidator, getLocationType } from '@girder/components/src';
+
+export default {
+  props: {
+    location: {
+      type: Object,
+      required: true,
+      validator: createLocationValidator(true),
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    append: {
+      type: Array,
+      default: () => [],
+    },
+    rootLocationDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  inject: ['girderRest'],
+  data() {
+    return {
+      loading: false,
+    };
+  },
+  computed: {
+    // have a separate computed to prevent append triggering remote requests
+    breadcrumb() {
+      const { append } = this;
+      return [...this.pathBreadcrumb, ...append];
+    },
+  },
+  asyncComputed: {
+    pathBreadcrumb: {
+      default: [],
+      async get() {
+        this.loading = true;
+        const breadcrumb = [];
+        const { rootLocationDisabled, girderRest, location } = this;
+        // The reason for this local user variable is that
+        // we have to set up reactivity dependancy before the first async function call
+        const { user } = girderRest;
+        const type = getLocationType(location);
+        const { name, _id } = location;
+        if (type === 'folder') {
+          // The last breadcrumb isn't returned by rootpath.
+          if (name) {
+            breadcrumb.unshift(this.extractCrumbData(location));
+          } else {
+            const { data } = await this.girderRest.get(`folder/${_id}`);
+            breadcrumb.unshift(this.extractCrumbData(data));
+          }
+          // Get the rest of the path.
+          const { data } = await this.girderRest.get(`folder/${_id}/rootpath_or_relative`);
+          data.reverse().forEach((crumb) => {
+            breadcrumb.unshift(this.extractCrumbData(crumb.object));
+          });
+        } else if (type === 'user' || type === 'collection') {
+          const { data } = await this.girderRest.get(`${type}/${_id}`);
+          breadcrumb.unshift(this.extractCrumbData(data));
+        }
+        if (!rootLocationDisabled) {
+          if (
+            type === 'users'
+            || (user && breadcrumb.length && breadcrumb[0].type === 'user')
+          ) {
+            breadcrumb.unshift({ type: 'users' });
+          }
+          if (
+            type === 'collections'
+            || (breadcrumb.length && breadcrumb[0].type === 'collection')
+          ) {
+            breadcrumb.unshift({ type: 'collections' });
+          }
+          breadcrumb.unshift({ type: 'root' });
+        }
+        this.loading = false;
+        return breadcrumb;
+      },
+    },
+  },
+  created() {
+    if (!createLocationValidator(!this.rootLocationDisabled)(this.location)) {
+      throw new Error('root location cannot be used when root-location-disabled is true');
+    }
+  },
+  methods: {
+    extractCrumbData(object) {
+      return {
+        ...object,
+        type: object.type ? object.type : object._modelType,
+        name: object._modelType !== 'user' ? object.name : object.login,
+      };
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="girder-breadcrumb-component">
+    <v-icon
+      v-if="girderRest.user && !readonly"
+      :disabled="location._id === girderRest.user._id"
+      class="home-button mr-3"
+      color="accent"
+      @click="$emit('crumbclick', girderRest.user)"
+    >
+      $vuetify.icons.userHome
+    </v-icon>
+    <v-breadcrumbs
+      :items="breadcrumb"
+      class="font-weight-bold pa-0"
+    >
+      <span
+        slot="divider"
+        :disabled="readonly"
+        class="subheading font-weight-bold"
+      >/</span>
+      <template #item="{ item }">
+        <v-breadcrumbs-item
+          :disabled="(readonly || breadcrumb.indexOf(item) == breadcrumb.length - 1)"
+          tag="a"
+          @click="$emit('crumbclick', item)"
+        >
+          <template v-if="['folder', 'user', 'collection'].indexOf(item.type) !== -1">
+            <span class="accent--text">{{ item.name }}</span>
+          </template>
+          <template v-else-if="item.type === 'users'">
+            <v-icon class="mdi-18px accent--text">
+              $vuetify.icons.user
+            </v-icon>
+          </template>
+          <template v-else-if="item.type === 'collections'">
+            <v-icon class="mdi-18px accent--text">
+              $vuetify.icons.collection
+            </v-icon>
+          </template>
+          <template v-else-if="item.type === 'root'">
+            <v-icon class="mdi-18px accent--text">
+              $vuetify.icons.globe
+            </v-icon>
+          </template>
+          <span v-else>{{ item }}</span>
+        </v-breadcrumbs-item>
+      </template>
+    </v-breadcrumbs>
+  </div>
+</template>
+
+<style lang="scss">
+.girder-breadcrumb-component {
+  display: flex;
+
+  .v-breadcrumbs {
+    .v-breadcrumbs__divider {
+      padding: 0 7px;
+    }
+
+    .v-breadcrumbs__item--disabled {
+      > * {
+        color: inherit !important;
+      }
+    }
+
+    // Good to always hold vertical space
+    &::after {
+      content: "\00a0";
+    }
+  }
+}
+</style>