WIP: Draft

owncloud · Mar 30, 2022 · b7c3585 · b7c3585
1 parent 1e7933c
commit b7c3585
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 51 deletions.
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -33,9 +33,9 @@
       </div>
       <div class="files-app-bar-actions">
         <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px">
-          <slot v-if="selectedFiles.length === 0" name="actions" />
+          <slot v-if="areDefaultActionsVisible" name="actions" />
           <size-info v-if="showSelectionInfo" class="oc-visible@l" />
-          <batch-actions v-if="showBatchActions" />
+          <batch-actions v-if="showBatchActions" :show-reset-selection="showResetSelection" />
         </div>
       </div>
       <slot name="content" />
@@ -71,6 +71,7 @@ export default {
     breadcrumbs: { type: Array, default: () => [] },
     breadcrumbsContextActionsItems: { type: Array, default: () => [] },
     hasBulkActions: { type: Boolean, default: false },
+    fileCountForBulkActions: { type: Number, default: 2 },
     hasSharesNavigation: { type: Boolean, default: false },
     hasSidebarToggle: { type: Boolean, default: true },
     hasViewOptions: { type: Boolean, default: true }
@@ -84,27 +85,38 @@ export default {
       return this.$gettext(title)
     },
     areDefaultActionsVisible() {
-      return this.selectedFiles.length < 1
+      // make the comparable int configurable
+      return this.selectedFiles.length < this.fileCountForBulkActions
     },
     showContextActions() {
       return last(this.breadcrumbs).allowContextActions
     },
     showSelectionInfo() {
-      return this.hasBulkActions && this.selectedFiles.length > 0
+      return this.showBatchActions && this.selectedFiles.length > 0
     },
     showBatchActions() {
-      return this.hasBulkActions
+      return this.hasBulkActions && !this.areDefaultActionsVisible
+    },
+    showResetSelection() {
+      return this.selectedFiles.length > 0
     },
     selectedResourcesAnnouncement() {
-      if (this.selectedFiles.length === 0) {
-        return this.$gettext('No items selected.')
+      // needs refactoring according to fileCountForBulkActions
+      switch (this.selectedFiles.length) {
+        case 0:
+          return this.$gettext('No items selected.')
+        case 1:
+          return this.$gettext('One item selected.')
+        default:
+          return this.$gettextInterpolate(
+            this.$ngettext(
+              '%{ amount } item selected. Actions are available above the table.',
+              '%{ amount } items selected. Actions are available above the table.',
+              this.selectedFiles.length
+            ),
+            { amount: this.selectedFiles.length }
+          )
       }
-      const translated = this.$ngettext(
-        '%{ amount } item selected. Actions are available above the table.',
-        '%{ amount } items selected. Actions are available above the table.',
-        this.selectedFiles.length
-      )
-      return this.$gettextInterpolate(translated, { amount: this.selectedFiles.length })
     }
   },
 

diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
@@ -1,5 +1,15 @@
 <template>
   <oc-list class="oc-files-appbar-batch-actions oc-width-1-1">
+    <li v-if="showResetSelection" class="oc-mr-s">
+      <oc-button
+        id="files-clear-selection"
+        v-oc-tooltip="clearSelectionLabel"
+        :aria-label="clearSelectionLabel"
+        @click="RESET_SELECTION"
+      >
+        <oc-icon name="close" />
+      </oc-button>
+    </li>
     <action-menu-item
       v-for="(action, i) in menuItemsBatchActions"
       :key="`batch-action-${i}`"
@@ -12,7 +22,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import ActionMenuItem from '../../ActionMenuItem.vue'
 import AcceptShare from '../../../mixins/actions/acceptShare'
 import Copy from '../../../mixins/actions/copy'
@@ -38,13 +48,14 @@ export default {
     Move,
     Restore
   ],
+  props: {
+    showResetSelection: { type: Boolean, default: false }
+  },
   computed: {
     ...mapGetters('Files', ['selectedFiles']),
 
-    filterParams() {
-      return {
-        resources: this.selectedFiles
-      }
+    clearSelectionLabel() {
+      return this.$gettext('Clear selection')
     },
 
     menuItemsBatchActions() {
@@ -60,6 +71,10 @@ export default {
         ...this.$_restore_items
       ].filter((item) => item.isEnabled({ resources: this.selectedFiles }))
     }
+  },
+
+  methods: {
+    ...mapMutations('Files', ['RESET_SELECTION'])
   }
 }
 </script>

diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
@@ -18,21 +18,11 @@
       translate-comment="Number of selected resources displayed above the files list"
       >%{ amount } selected
     </translate>
-    <oc-button
-      id="files-clear-selection"
-      v-oc-tooltip="clearSelectionLabel"
-      :aria-label="clearSelectionLabel"
-      class="oc-ml-m"
-      appearance="outline"
-      @click="RESET_SELECTION"
-    >
-      <oc-icon name="close" />
-    </oc-button>
   </div>
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import { cloneStateObject } from '../../../helpers/store'
 import MixinResources from '../../../mixins/resources'
@@ -55,15 +45,7 @@ export default {
       }
 
       return this.getResourceSize(size)
-    },
-
-    clearSelectionLabel() {
-      return this.$gettext('Clear selection')
     }
-  },
-
-  methods: {
-    ...mapMutations('Files', ['RESET_SELECTION'])
   }
 }
 </script>

diff --git a/packages/web-app-files/src/components/TrashBin.vue b/packages/web-app-files/src/components/TrashBin.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <app-bar :breadcrumbs="breadcrumbs" :has-bulk-actions="true" />
+    <app-bar :breadcrumbs="breadcrumbs" :has-bulk-actions="true" :file-count-for-bulk-actions="0" />
     <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <no-content-message

diff --git a/packages/web-app-files/src/views/shares/SharedWithMe.vue b/packages/web-app-files/src/views/shares/SharedWithMe.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="oc-flex oc-flex-column">
-    <app-bar :has-shares-navigation="true" :has-bulk-actions="true" />
+    <app-bar
+      :has-shares-navigation="true"
+      :has-bulk-actions="true"
+      :file-count-for-bulk-actions="0"
+    />
     <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <!-- Pending shares -->

diff --git a/packages/web-app-files/tests/unit/components/AppBar/SelectedResources/BatchActions.spec.js b/packages/web-app-files/tests/unit/components/AppBar/SelectedResources/BatchActions.spec.js
@@ -20,4 +20,17 @@ describe('Batch Actions component', () => {
 
   it.todo('renders an empty list if there are no batch actions available')
   it.todo('renders a button for each available batch action')
+
+  it('should trigger "RESET_SELECTION" if clear button is clicked', () => {
+    const spyResetSelection = jest.spyOn(SizeInfo.methods, 'RESET_SELECTION').mockImplementation()
+    const store = createStore({ selected: selectedFiles })
+    const wrapper = createWrapper({
+      store,
+      stubs: { ...componentStubs, 'oc-button': false }
+    })
+    const clearSelectionButton = wrapper.find('button')
+    clearSelectionButton.trigger('click')
+
+    expect(spyResetSelection).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/packages/web-app-files/tests/unit/components/AppBar/SelectedResources/SizeInfo.spec.js b/packages/web-app-files/tests/unit/components/AppBar/SelectedResources/SizeInfo.spec.js
@@ -73,18 +73,6 @@ describe('SizeInfo component', () => {
       expect(translate.props().translateParams.size).toBeFalsy()
       expect(translate.text()).toEqual('%{ amount } selected')
     })
-    it('should trigger "RESET_SELECTION" if clear button is clicked', () => {
-      const spyResetSelection = jest.spyOn(SizeInfo.methods, 'RESET_SELECTION').mockImplementation()
-      const store = createStore({ selected: selectedFiles })
-      const wrapper = createWrapper({
-        store,
-        stubs: { ...componentStubs, 'oc-button': false }
-      })
-      const clearSelectionButton = wrapper.find('button')
-      clearSelectionButton.trigger('click')
-
-      expect(spyResetSelection).toHaveBeenCalledTimes(1)
-    })
   })
 })