Quick first draft

packages/web-app-files/src/components/Shares/SharedWithMeSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="oc-px-m oc-py-s">
+    <h2 class="oc-px-m oc-py-s oc-invisible-sr">
       {{ title }}
       <span class="oc-text-medium">({{ items.length }})</span>
     </h2>
@@ -39,25 +39,7 @@
           :key="resource.getDomSelector() + resource.status"
           class="oc-text-nowrap oc-flex oc-flex-middle oc-flex-right"
         >
-          <oc-button
-            v-if="getShowAcceptButton(resource)"
-            size="small"
-            variation="success"
-            class="file-row-share-status-accept"
-            @click.stop="triggerAction('accept-share', { space: null, resources: [resource] })"
-          >
-            <oc-icon size="small" name="check" />
-            <span v-translate>Accept</span>
-          </oc-button>
-          <oc-button
-            v-if="getShowDeclineButton(resource)"
-            size="small"
-            class="file-row-share-decline oc-ml-s"
-            @click.stop="triggerAction('decline-share', { space: null, resources: [resource] })"
-          >
-            <oc-icon size="small" name="spam-3" fill-type="line" />
-            <span v-translate>Decline</span>
-          </oc-button>
+          <oc-icon v-if="getShowSynchedIcon(resource)" name="cloudy-2" v-oc-tooltip="syncHint" />
         </div>
       </template>
       <template #contextMenu="{ resource }">
@@ -66,6 +48,29 @@
           :action-options="{ space: getSpace(resource), resources: selectedResources }"
         />
       </template>
+      <template #quickActions="{ resource }">
+        <!-- Provide different button depending on share being hidden/visible -->
+        <!-- 'decline-share' should be turned into "hide", and should show a modal if the share-to-be-hidden is already accepted -->
+        <oc-button
+          v-if="getShowAcceptButton(resource)"
+          size="small"
+          variation="success"
+          class="file-row-share-status-accept"
+          @click.stop="triggerAction('accept-share', { space: null, resources: [resource] })"
+        >
+          <oc-icon size="small" name="check" />
+          <span v-translate>Accept</span>
+        </oc-button>
+        <oc-button
+          v-if="getShowDeclineButton(resource)"
+          size="small"
+          class="file-row-share-decline oc-ml-s"
+          @click.stop="triggerAction('decline-share', { space: null, resources: [resource] })"
+        >
+          <oc-icon size="small" name="spam-3" fill-type="line" />
+          <span v-translate>Decline</span>
+        </oc-button>
+      </template>
       <template #footer>
         <div v-if="showMoreToggle && hasMore" class="oc-width-1-1 oc-text-center oc-mt">
           <oc-button
@@ -92,25 +97,27 @@
 </template>
 
 <script lang="ts">
-import ResourceTable from '../FilesList/ResourceTable.vue'
-import { computed, defineComponent, PropType, unref } from 'vue'
 import { debounce } from 'lodash-es'
+import { computed, defineComponent, PropType, unref } from 'vue'
+import { RouteLocationNamedRaw } from 'vue-router'
+import { mapActions } from 'vuex'
+
+import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
+import { buildShareSpaceResource, Resource, SpaceResource } from 'web-client/src/helpers'
+import { useCapabilityShareJailEnabled, SortDir, useStore } from 'web-pkg/src/composables'
+import { configurationManager } from 'web-pkg/src/configuration'
 import { ImageDimension, ImageType } from 'web-pkg/src/constants'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { mapActions } from 'vuex'
+import { ShareStatus } from 'web-client/src/helpers/share'
+
+import ResourceTable from '../FilesList/ResourceTable.vue'
 import { useFileActions } from '../../composables/actions/files/useFileActions'
-import { useCapabilityShareJailEnabled, SortDir, useStore } from 'web-pkg/src/composables'
 import { createLocationSpaces } from '../../router'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
-import { ShareStatus } from 'web-client/src/helpers/share'
 import ContextActions from '../../components/FilesList/ContextActions.vue'
-import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import { useSelectedResources } from '../../composables/selection'
-import { RouteLocationNamedRaw } from 'vue-router'
-import { buildShareSpaceResource, Resource, SpaceResource } from 'web-client/src/helpers'
-import { configurationManager } from 'web-pkg/src/configuration'
 import { CreateTargetRouteOptions } from '../../helpers/folderLink'
-import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -138,7 +145,7 @@ export default defineComponent({
     },
     shareStatus: {
       type: Number,
-      required: true
+      default: ShareStatus.accepted
     },
     sortBy: {
       type: String,
@@ -222,11 +229,15 @@ export default defineComponent({
       )
     }
 
+    // TODO: Pipe through gettext
+    const syncHint = 'Synced with your devices'
+
     return {
       ...useFileActions(),
       resourceTargetRouteCallback,
       ...useSelectedResources({ store }),
       hasShareJail: useCapabilityShareJailEnabled(),
+      syncHint,
       getSpace
     }
   },
@@ -288,6 +299,10 @@ export default defineComponent({
         onExit: debounced.cancel
       })
     },
+    getShowSynchedIcon(resource) {
+      // TODO: Change to hidden status
+      return resource.status === ShareStatus.accepted
+    },
     getShowAcceptButton(resource) {
       return resource.status === ShareStatus.declined || resource.status === ShareStatus.pending
     },

packages/web-app-files/src/views/shares/SharedWithMe.vue

@@ -8,53 +8,50 @@
       />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
+        <!-- TODO: Make styling final -->
+        <div class="button-group oc-button-group oc-m-m">
+          <oc-button
+            :appearance="areHiddenFilesShown ? 'raw' : 'filled'"
+            class="oc-px-m"
+            @click="setAreHiddenFilesShown(false)"
+          >
+            Shares
+          </oc-button>
+          <oc-button
+            :appearance="areHiddenFilesShown ? 'filled' : 'raw'"
+            class="oc-px-m"
+            @click="setAreHiddenFilesShown(true)"
+          >
+            Hidden Shares
+          </oc-button>
+        </div>
         <shared-with-me-section
-          v-if="pendingItems.length > 0"
-          id="files-shared-with-me-pending-section"
-          :display-thumbnails="false"
-          :file-list-header-y="fileListHeaderY"
-          :items="pendingItems"
-          :resource-clickable="false"
-          :share-status="ShareStatus.pending"
-          :show-more-toggle="true"
-          :side-bar-open="sideBarOpen"
-          :sort-by="pendingSortBy"
-          :sort-dir="pendingSortDir"
-          :sort-handler="pendingHandleSort"
-          :title="pendingTitle"
-        />
-
-        <shared-with-me-section
-          id="files-shared-with-me-accepted-section"
+          v-if="!areHiddenFilesShown"
+          id="files-shared-with-me-visible-view"
           :display-thumbnails="displayThumbnails"
-          :empty-message="acceptedEmptyMessage"
           :file-list-header-y="fileListHeaderY"
-          :items="acceptedItems"
+          :items="visibleShares"
           :resource-clickable="true"
-          :share-status="ShareStatus.accepted"
+          :show-more-toggle="true"
           :side-bar-open="sideBarOpen"
           :sort-by="acceptedSortBy"
           :sort-dir="acceptedSortDir"
           :sort-handler="acceptedHandleSort"
-          :title="acceptedTitle"
-          :grouping-settings="groupingSettings"
+          :title="shareSectionTitle"
         />
-
         <shared-with-me-section
-          id="files-shared-with-me-declined-section"
-          :display-thumbnails="false"
-          :empty-message="declinedEmptyMessage"
+          v-if="areHiddenFilesShown"
+          id="files-shared-with-me-hidden-view"
+          :display-thumbnails="displayThumbnails"
           :file-list-header-y="fileListHeaderY"
-          :items="declinedItems"
+          :items="hiddenShares"
           :resource-clickable="false"
-          :share-status="ShareStatus.declined"
           :show-more-toggle="true"
           :side-bar-open="sideBarOpen"
-          :sort-by="declinedSortBy"
-          :sort-dir="declinedSortDir"
-          :sort-handler="declinedHandleSort"
-          :title="declinedTitle"
-          :grouping-settings="groupingSettings"
+          :sort-by="acceptedSortBy"
+          :sort-dir="acceptedSortDir"
+          :sort-handler="acceptedHandleSort"
+          :title="shareSectionTitle"
         />
       </template>
     </files-view-wrapper>
@@ -63,21 +60,21 @@
 </template>
 
 <script lang="ts">
-import { mapGetters } from 'vuex'
-import { useResourcesViewDefaults } from '../../composables'
+import { computed, defineComponent, ref, unref } from 'vue'
+import { useGettext } from 'vue3-gettext'
 
+import { Resource } from 'web-client'
+import { ShareStatus } from 'web-client/src/helpers/share'
+import { buildShareSpaceResource } from 'web-client/src/helpers'
+import { configurationManager } from 'web-pkg/src/configuration'
+import { useCapabilityShareJailEnabled, useSort, useStore } from 'web-pkg/src/composables'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
+
 import AppBar from '../../components/AppBar/AppBar.vue'
 import SharedWithMeSection from '../../components/Shares/SharedWithMeSection.vue'
-import { ShareStatus } from 'web-client/src/helpers/share'
-import { computed, defineComponent, unref } from 'vue'
-import { Resource } from 'web-client'
+import { useResourcesViewDefaults } from '../../composables'
 import SideBar from '../../components/SideBar/SideBar.vue'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
-import { buildShareSpaceResource } from 'web-client/src/helpers'
-import { configurationManager } from 'web-pkg/src/configuration'
-import { useCapabilityShareJailEnabled, useSort, useStore } from 'web-pkg/src/composables'
-import { useGroupingSettings } from 'web-pkg/src/cern/composables'
 
 export default defineComponent({
   components: {
@@ -102,23 +99,22 @@ export default defineComponent({
       scrollToResourceFromRoute
     } = useResourcesViewDefaults<Resource, any, any[]>()
 
-    // pending shares
-    const pending = computed(() =>
-      unref(storeItems).filter((item) => item.status === ShareStatus.pending)
-    )
-    const {
-      sortBy: pendingSortBy,
-      sortDir: pendingSortDir,
-      items: pendingItems,
-      handleSort: pendingHandleSort
-    } = useSort({
-      items: pending,
-      fields: sortFields,
-      sortByQueryName: 'pending-sort-by',
-      sortDirQueryName: 'pending-sort-dir'
+    const { $gettext } = useGettext()
+
+    const areHiddenFilesShown = ref(false)
+
+    const shareSectionTitle = computed(() => {
+      return areHiddenFilesShown.value ? $gettext('Hidden Shares') : $gettext('Shares')
     })
 
-    // accepted shares
+    const setAreHiddenFilesShown = (value: boolean) => {
+      areHiddenFilesShown.value = value
+    }
+
+    const visibleShares = computed(() => unref(storeItems))
+    const hiddenShares = []
+
+    // TODO: Adapt for show/hidden state
     const accepted = computed(() =>
       unref(storeItems).filter((item) => item.status === ShareStatus.accepted)
     )
@@ -134,23 +130,10 @@ export default defineComponent({
       sortDirQueryName: 'accepted-sort-dir'
     })
 
-    // declined shares
-    const declined = computed(() =>
-      unref(storeItems).filter((item) => item.status === ShareStatus.declined)
-    )
-    const {
-      sortBy: declinedSortBy,
-      sortDir: declinedSortDir,
-      items: declinedItems,
-      handleSort: declinedHandleSort
-    } = useSort({
-      items: declined,
-      fields: sortFields,
-      sortByQueryName: 'declined-sort-by',
-      sortDirQueryName: 'declined-sort-dir'
-    })
-
     const store = useStore()
+
+    const displayThumbnails = computed(() => store.getters.configuration?.options?.disablePreviews)
+
     const hasShareJail = useCapabilityShareJailEnabled()
     const selectedShareSpace = computed(() => {
       if (unref(selectedResources).length !== 1) {
@@ -182,63 +165,33 @@ export default defineComponent({
       selectedShareSpace,
       scrollToResourceFromRoute,
 
-      // view specific
-      pendingHandleSort,
-      pendingSortBy,
-      pendingSortDir,
-      pendingItems,
+      areHiddenFilesShown,
+      displayThumbnails,
+      hiddenShares,
+      setAreHiddenFilesShown,
+      shareSectionTitle,
+      visibleShares,
 
+      // TODO: Add sorting via useSort
       acceptedHandleSort,
       acceptedSortBy,
       acceptedSortDir,
-      acceptedItems,
-
-      declinedHandleSort,
-      declinedSortBy,
-      declinedSortDir,
-      declinedItems,
-
-      // CERN
-      ...useGroupingSettings({ sortBy: acceptedSortBy, sortDir: acceptedSortDir })
+      acceptedItems
     }
   },
 
   data: () => ({
     ShareStatus
   }),
 
-  computed: {
-    ...mapGetters(['configuration']),
-
-    pendingTitle() {
-      return this.$gettext('Pending shares')
-    },
-
-    acceptedTitle() {
-      return this.$gettext('Accepted shares')
-    },
-    acceptedEmptyMessage() {
-      return this.$gettext('You have no accepted shares.')
-    },
-
-    declinedTitle() {
-      return this.$gettext('Declined shares')
-    },
-    declinedEmptyMessage() {
-      return this.$gettext('You have no declined shares.')
-    },
-    displayThumbnails() {
-      return !this.configuration?.options?.disablePreviews
-    }
-  },
-
   async created() {
     await this.loadResourcesTask.perform()
-    this.scrollToResourceFromRoute([
-      ...this.acceptedItems,
-      ...this.pendingItems,
-      ...this.declinedItems
-    ])
+    // TODO: Fix
+    // this.scrollToResourceFromRoute([
+    //   ...this.acceptedItems,
+    //   ...this.pendingItems,
+    //   ...this.declinedItems
+    // ])
   }
 })
 </script>