Implemented virtual scroll in trashbin

Adjusted selectors

apps/files/src/components/FileList.vue

@@ -66,7 +66,7 @@
  />
  </div>
  <oc-button
- :id="`files-file-list-action-button-small-resolution-${item.id}${{ '-active': active }}`"
+ :id="actionsDropdownButtonId(item.id, active)"
  icon="more_vert"
  :class="{ 'uk-hidden@m' : !compactMode, 'uk-visible@s uk-hidden@xl' : compactMode }"
  :disabled="$_actionInProgress(item)"
@@ -135,6 +135,11 @@ export default {
  isActionEnabled: {
  type: Function,
  required: true
+ },
+ selectableRow: {
+ type: Boolean,
+ required: false,
+ default: true
  }
  },
  data () {
@@ -247,6 +252,8 @@ export default {
  return 'file-row'
  },
  selectRow (item, event) {
+ if (!this.selectableRow) return
+
  if (item.status && (item.status === 1 || item.status === 2)) return
 
  event.stopPropagation()
@@ -286,6 +293,14 @@ export default {
  this.rowActionsDisplayed = false
  this.rowActionsItem = {}
  this.rowActions = []
+ },
+
+ actionsDropdownButtonId (id, active) {
+ if (active) {
+ return `files-file-list-action-button-small-resolution-${id}-active`
+ }
+
+ return `files-file-list-action-button-small-resolution-${id}`
  }
  },
  computed: {

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

@@ -7,7 +7,6 @@
  position="bottom-right"
  id="files-list-row-actions-dropdown"
  class="uk-open uk-drop-stack"
- :data-actions-dropdown-for-item="nameForDropdownData(item.name)"
  >
  <ul class="uk-list">
  <li v-for="action in actions" :key="action.ariaLabel">

apps/files/src/components/Trashbin.vue

@@ -1,68 +1,37 @@
 <template>
- <div id="files-list-container">
- <oc-table middle divider class="oc-filelist" id="files-list" v-show="!loadingFolder">
- <oc-table-group>
- <oc-table-row>
- <oc-table-cell shrink type="head">
- <oc-checkbox :hideLabel="true" class="uk-margin-small-left" id="filelist-check-all" @click.stop @change.native="$_ocTrashbin_toggleAll" :value="all" />
- </oc-table-cell>
- <oc-table-cell type="head" class="uk-text-nowrap" v-translate>Name</oc-table-cell>
- <oc-table-cell shrink type="head" class="uk-text-nowrap uk-visible@m" v-translate>Deletion Time</oc-table-cell>
- <oc-table-cell shrink type="head" v-translate>Actions</oc-table-cell>
- </oc-table-row>
- </oc-table-group>
- <oc-table-group v-for="(item, index) in fileData" :key="index">
- <oc-table-row class="file-row" data-is-visible="true">
- <oc-table-cell>
- <oc-checkbox :hideLabel="true" class="uk-margin-small-left" @click.stop @change.native="$_ocTrashbin_toggleFileSelect(item)" :value="selectedFiles.indexOf(item) >= 0" />
- </oc-table-cell>
- <oc-table-cell class="uk-text-truncate">
- <div>
- <oc-file :name="$_ocTrashbin_fileName(item)" :extension="item.extension" class="file-row-name"
- :filename="item.name" :icon="fileTypeIcon(item)" :key="item.originalLocation" />
- </div>
- </oc-table-cell>
- <oc-table-cell class="uk-text-meta uk-text-nowrap uk-visible@m">
+ <div id="files-list-container" class="uk-height-1-1">
+ <div class="uk-overflow-auto uk-height-1-1">
+ <file-list
+ id="files-list"
+ :fileData="fileData"
+ :loading="loadingFolder"
+ :actions="actions"
+ :isActionEnabled="isActionEnabled"
+ :selectableRow="false"
+ >
+ <template #headerColumns>
+ <div class="uk-text-truncate uk-text-meta uk-width-expand" v-translate>Name</div>
+ <div
+ type="head"
+ :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden' : _sidebarOpen }"
+ class="uk-text-nowrap uk-text-meta uk-width-small"
+ v-translate
+ >
+ Deletion Time
+ </div>
+ </template>
+ <template #rowColumns="{ item }">
+ <div class="uk-text-truncate uk-width-expand">
+ <oc-file
+ :name="$_ocTrashbin_fileName(item)" :extension="item.extension" class="file-row-name" :icon="fileTypeIcon(item)"
+ :filename="item.name" :key="item.id"/>
+ </div>
+ <div class="uk-text-meta uk-text-nowrap uk-width-small" :class="{ 'uk-visible@s' : !_sidebarOpen, 'uk-hidden' : _sidebarOpen }">
  {{ formDateFromNow(item.deleteTimestamp) }}
- </oc-table-cell>
- <oc-table-cell class="uk-text-meta uk-text-nowrap">
- <oc-button icon="restore" class="uk-visible@m" @click="$_ocTrashbin_restoreFile(item)">
- <translate>Restore</translate>
- </oc-button>
- <oc-button icon="delete" class="uk-visible@m" @click="$_ocTrashbin_deleteFile(item)" ariaLabel="Delete">
- <translate>Delete immediately</translate>
- </oc-button>
- <oc-button
- :id="'files-trashbin-action-button-small-resolution-' + index"
- icon="more_vert"
- class="uk-hidden@m"
- :aria-label="'show-file-actions'"
- @click.stop
- />
- <oc-drop
- v-if="!ocDialogIsOpen"
- :toggle="'#files-trashbin-action-button-small-resolution-' + index"
- :options="{ offset: 0 }"
- position="bottom-right"
- :data-actions-dropdown-for-item="nameForDropdownData(item.name)"
- >
- <ul class="uk-list">
- <li>
- <oc-button icon="restore" class="uk-width-1-1" @click="$_ocTrashbin_restoreFile(item)" ariaLabel="Restore">
- <translate>Restore</translate>
- </oc-button>
- </li>
- <li>
- <oc-button icon="delete" class="uk-width-1-1" @click="$_ocTrashbin_deleteFile(item)" ariaLabel="Delete">
- <translate>Delete immediately</translate>
- </oc-button>
- </li>
- </ul>
- </oc-drop>
- </oc-table-cell>
- </oc-table-row>
- </oc-table-group>
- </oc-table>
+ </div>
+ </template>
+ </file-list>
+ </div>
  <oc-dialog-prompt name="delete-file-confirmation-dialog" :oc-active="trashbinDeleteMessage !== ''"
  :oc-content="trashbinDeleteMessage" :oc-has-input="false" :ocTitle="_deleteDialogTitle"
  ocConfirmId="oc-dialog-delete-confirm" @oc-confirm="$_ocTrashbin_clearTrashbinConfirmation"
@@ -73,8 +42,8 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import Mixins from '../mixins'
+import FileList from './FileList.vue'
 import OcDialogPrompt from './ocDialogPrompt.vue'
-// import PQueue from 'p-queue'
 const { default: PQueue } = require('p-queue')
 
 export default {
@@ -89,7 +58,8 @@ export default {
  },
 
  components: {
- OcDialogPrompt
+ OcDialogPrompt,
+ FileList
  },
 
  mixins: [
@@ -116,8 +86,21 @@ export default {
  return this.$gettextInterpolate(translated, { numberOfFiles: files.length }, true)
  },
 
- all () {
- return this.selectedFiles.length === this.fileData.length && this.fileData.length !== 0
+ actions () {
+ return [
+ {
+ icon: 'restore',
+ ariaLabel: this.$gettext('Restore'),
+ handler: this.$_ocTrashbin_restoreFile,
+ isEnabled: () => true
+ },
+ {
+ icon: 'delete',
+ ariaLabel: this.$gettext('Delete'),
+ handler: this.$_ocTrashbin_deleteFile,
+ isEnabled: () => true
+ }
+ ]
  }
  },
 
@@ -140,27 +123,6 @@ export default {
  this.setTrashbinDeleteMessage(this.$gettext('This item will be deleted permanently. You can’t undo this action.'))
  },
 
- $_ocTrashbin_toggleFileSelect (item) {
- if (this.selectedFiles.includes(item)) {
- this.removeFileSelection(item)
- } else {
- this.addFileSelection(item)
- }
- },
-
- $_ocTrashbin_toggleAll () {
- if (this.selectedFiles.length && this.selectedFiles.length === this.fileData.length) {
- this.resetFileSelection()
- } else {
- const selectedFiles = this.fileData.slice()
- for (const item of selectedFiles) {
- if (!this.selectedFiles.includes(item)) {
- this.addFileSelection(item)
- }
- }
- }
- },
-
  $_ocTrashbin_clearTrashbinConfirmation (files = this.selectedFiles) {
  // TODO: use clear all if all files are selected
  this.ocDialogIsOpen = false
@@ -244,14 +206,9 @@ export default {
  }
  return item.basename
  },
- // FIXME: Remove as soon as trashbin has virtual scroll
- nameForDropdownData (name) {
- // Escape double quotes inside of selector
- if (name.indexOf('"') > -1) {
- name = name.replace(/\\([\s\S])|(")/g, '&quot;')
- }
 
- return name
+ isActionEnabled (item, action) {
+ return action.isEnabled(item, this.parentFolder)
  }
  }
 }

tests/acceptance/pageObjects/FilesPageElement/filesList.js

@@ -420,26 +420,8 @@ module.exports = {
  const linkSelector = this.getFileLinkSelectorByFileName(fileName)
 
  await this.waitForElementPresent('@filesTableContainer')
-
  await this.filesListScrollToTop()
-
- // TODO: After virtual scroll is implemented also in trashbin get rid of this
- let trashbin = false
- await this.api.url(result => {
- if (result.value.indexOf('trash-bin') > -1) {
- trashbin = true
- }
- })
-
- if (trashbin) {
- const rowSelector = this.getFileRowSelectorByFileName(fileName)
-
- this
- .useXpath()
- .waitForElementVisible(rowSelector)
- } else {
- await this.findItemInFilesList(fileName)
- }
+ await this.findItemInFilesList(fileName)
 
  // Find the item in files list if it's not in the view
  await this
@@ -835,11 +817,11 @@ module.exports = {
  locateStrategy: 'xpath'
  },
  restoreButtonInFileRow: {
- selector: '//span[.="Restore"]',
+ selector: '//span[@aria-label="Restore"]',
  locateStrategy: 'xpath'
  },
  deleteImmediatelyButtonInFileRow: {
- selector: '//span[.="Delete immediately"]',
+ selector: '//span[@aria-label="Delete"]',
  locateStrategy: 'xpath'
  },
  deleteFileConfirmationBtn: {
@@ -864,12 +846,10 @@ module.exports = {
  selector: '#oc-dialog-rename-confirm'
  },
  fileRowByName: {
- // FIXME: When the virtual scroll is implemented in trashbin adjust the selector
- selector: '//span[@class="oc-file-name"][text()=%s and not(../span[@class="oc-file-extension"])]/../../../../../*[@data-is-visible="true"]'
+ selector: '//span[@class="oc-file-name"][text()=%s and not(../span[@class="oc-file-extension"])]/../../../../../div[@data-is-visible="true"]'
  },
  fileRowByNameAndExtension: {
- // FIXME: When the virtual scroll is implemented in trashbin adjust the selector
- selector: '//span[span/text()=%s and span/text()="%s"]/../../../../*[@data-is-visible="true"]'
+ selector: '//span[span/text()=%s and span/text()="%s"]/../../../../div[@data-is-visible="true"]'
  },
  fileLinkInFileRow: {
  selector: '//span[contains(@class, "file-row-name")]'
@@ -932,8 +912,7 @@ module.exports = {
  selector: '.files-collaborators-lists'
  },
  itemActionsDropdown: {
- // FIXME: Use id after virtual scroll was implemented in trashbin
- selector: '//div[@data-actions-dropdown-for-item="%s"]'
+ selector: '#files-list-row-actions-dropdown'
  },
  foldersCount: {
  selector: '#files-list-count-folders'