[full-ci] Implement cut, copy, paste keyboard shortcuts

changelog/unreleased/enhancement-resource-table-add-hotkeys

@@ -0,0 +1,6 @@
+Enhancement: Add Hotkeys to ResourceTable 
+
+We've added hotkeys for copy, cut and paste.
+
+https://github.com/owncloud/web/pull/7078
+https://github.com/owncloud/web/issues/7071

packages/web-app-files/src/App.vue

@@ -20,7 +20,7 @@
 </template>
 <script lang="ts">
 import Mixins from './mixins'
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState, mapMutations } from 'vuex'
 import SideBar from './components/SideBar/SideBar.vue'
 import { defineComponent } from '@vue/composition-api'
 
@@ -55,13 +55,48 @@ export default defineComponent({
     })
   },
 
+  mounted() {
+    document.addEventListener('keydown', this.handleShortcut, false)
+  },
+
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleShortcut)
+  },
+
   methods: {
     ...mapActions('Files', ['resetFileSelection']),
     ...mapActions('Files/sidebar', {
       closeSidebar: 'close',
       setActiveSidebarPanel: 'setActivePanel'
     }),
-    ...mapActions(['showMessage']),
+    ...mapActions(['showMessage', 'createModal', 'hideModal']),
+    ...mapActions('Files', ['copySelectedFiles', 'cutSelectedFiles', 'pasteSelectedFiles']),
+    ...mapMutations('Files', ['UPSERT_RESOURCE']),
+
+    handleShortcut(event) {
+      const key = event.keyCode || event.which
+      const ctr = window.navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey
+      if (!ctr /* CTRL | CMD */) return
+      const isCopyAction = key === 67
+      const isPaseAction = key === 86
+      const isCutAction = key === 88
+      if (isCopyAction) {
+        this.copySelectedFiles()
+      } else if (isPaseAction) {
+        this.pasteSelectedFiles({
+          client: this.$client,
+          createModal: this.createModal,
+          hideModal: this.hideModal,
+          showMessage: this.showMessage,
+          $gettext: this.$gettext,
+          $gettextInterpolate: this.$gettextInterpolate,
+          $ngettext: this.$ngettext,
+          upsertResource: this.UPSERT_RESOURCE
+        })
+      } else if (isCutAction) {
+        this.cutSelectedFiles()
+      }
+    },
 
     focusSideBar(component, event) {
       this.focus({

packages/web-app-files/src/helpers/clipboardActions.ts

@@ -0,0 +1,4 @@
+export abstract class ClipboardActions {
+  static readonly Cut: string = 'cut'
+  static readonly Copy: string = 'copy'
+}

packages/web-app-files/src/helpers/resource/move.ts → packages/web-app-files/src/helpers/resource/copyMove.ts

@@ -72,13 +72,15 @@ export const resolveAllConflicts = async (
   hideModal,
   $gettext,
   $gettextInterpolate,
-  resolveFileExistsMethod
+  resolveFileExistsMethod,
+  copy = false
 ) => {
   // if we implement MERGE, we need to use 'infinity' instead of 1
   const targetFolderItems = await client.files.list(targetFolder.webDavPath, 1)
   const targetPath = targetFolder.path
   const index = targetFolder.webDavPath.lastIndexOf(targetPath)
-  const webDavPrefix = targetFolder.webDavPath.substring(0, index)
+  const webDavPrefix =
+    targetPath === '/' ? targetFolder.webDavPath : targetFolder.webDavPath.substring(0, index)
 
   // Collect all conflicting resources
   const allConflicts = []
@@ -175,6 +177,55 @@ export const move = async (
   $gettext,
   $gettextInterpolate,
   $ngettext
+) => {
+  return copyMoveResource(
+    resourcesToMove,
+    targetFolder,
+    client,
+    createModal,
+    hideModal,
+    showMessage,
+    $gettext,
+    $gettextInterpolate,
+    $ngettext,
+    false
+  )
+}
+export const copy = async (
+  resourcesToMove,
+  targetFolder,
+  client,
+  createModal,
+  hideModal,
+  showMessage,
+  $gettext,
+  $gettextInterpolate,
+  $ngettext
+) => {
+  return copyMoveResource(
+    resourcesToMove,
+    targetFolder,
+    client,
+    createModal,
+    hideModal,
+    showMessage,
+    $gettext,
+    $gettextInterpolate,
+    $ngettext,
+    true
+  )
+}
+export const copyMoveResource = async (
+  resourcesToMove,
+  targetFolder,
+  client,
+  createModal,
+  hideModal,
+  showMessage,
+  $gettext,
+  $gettextInterpolate,
+  $ngettext,
+  copy = false
 ) => {
   const errors = []
   const resolvedConflicts = await resolveAllConflicts(
@@ -185,7 +236,8 @@ export const move = async (
     hideModal,
     $gettext,
     $gettextInterpolate,
-    resolveFileExists
+    resolveFileExists,
+    copy
   )
   const movedResources = []
 
@@ -203,14 +255,25 @@ export const move = async (
       }
       if (resolveStrategy === ResolveStrategy.KEEP_BOTH) {
         targetName = $gettextInterpolate($gettext('%{name} copy'), { name: resource.name }, true)
+        resource.name = targetName
       }
     }
+    resource.path = join(targetFolder.path, resource.name)
     try {
-      await client.files.move(
-        resource.webDavPath,
-        join(targetFolder.webDavPath, targetName),
-        overwriteTarget
-      )
+      if (copy) {
+        await client.files.copy(
+          resource.webDavPath,
+          join(targetFolder.webDavPath, targetName),
+          overwriteTarget
+        )
+      } else {
+        await client.files.move(
+          resource.webDavPath,
+          join(targetFolder.webDavPath, targetName),
+          overwriteTarget
+        )
+      }
+      resource.webDavPath = join(targetFolder.webDavPath, resource.name)
       movedResources.push(resource)
     } catch (error) {
       console.error(error)

packages/web-app-files/src/helpers/resource/index.ts

@@ -4,4 +4,4 @@ export * from './privatePreviewBlob'
 export * from './publicPreviewUrl'
 export * from './resource'
 export * from './sameResource'
-export * from './move'
+export * from './copyMove'

packages/web-app-files/src/helpers/resources.ts

@@ -144,7 +144,6 @@ export function buildSpace(space) {
       disabled = space.root.deleted?.state === 'trashed'
     }
   }
-
   return {
     id: space.id,
     fileId: '',
@@ -154,7 +153,7 @@ export function buildSpace(space) {
     description: space.description,
     extension: '',
     path: '',
-    webDavPath: '',
+    webDavPath: buildWebDavSpacesPath(space.id, ''),
     driveType: space.driveType,
     type: 'space',
     isFolder: true,

packages/web-app-files/src/store/actions.js

@@ -1,7 +1,8 @@
 import PQueue from 'p-queue'
+import { dirname } from 'path'
+import { DavProperties } from 'web-pkg/src/constants'
 
 import { getParentPaths } from '../helpers/path'
-import { dirname } from 'path'
 import {
   buildResource,
   buildShare,
@@ -10,12 +11,13 @@ import {
   buildSpace
 } from '../helpers/resources'
 import { $gettext, $gettextInterpolate } from '../gettext'
-import { loadPreview } from '../helpers/resource'
+import { loadPreview, move, copy } from '../helpers/resource'
 import { avatarUrl } from '../helpers/user'
 import { has } from 'lodash-es'
 import { ShareTypes, SpacePeopleShareRoles } from '../helpers/share'
 import { sortSpaceMembers } from '../helpers/space'
 import get from 'lodash-es/get'
+import { ClipboardActions } from '../helpers/clipboardActions'
 
 const allowSharePermissions = (getters) => {
   return get(getters, `capabilities.files_sharing.resharing`, true)
@@ -36,6 +38,81 @@ export default {
       context.commit('ADD_FILE_SELECTION', file)
     }
   },
+  copySelectedFiles(context) {
+    context.commit('CLIPBOARD_SELECTED')
+    context.commit('SET_CLIPBOARD_ACTION', ClipboardActions.Copy)
+    context.dispatch(
+      'showMessage',
+      {
+        title: $gettext('Copied to clipboard!'),
+        status: 'success'
+      },
+      { root: true }
+    )
+  },
+  cutSelectedFiles(context) {
+    context.commit('CLIPBOARD_SELECTED')
+    context.commit('SET_CLIPBOARD_ACTION', ClipboardActions.Cut)
+    context.dispatch(
+      'showMessage',
+      {
+        title: $gettext('Copied to clipboard!'),
+        status: 'success'
+      },
+      { root: true }
+    )
+  },
+  async pasteSelectedFiles(
+    context,
+    {
+      client,
+      createModal,
+      hideModal,
+      showMessage,
+      $gettext,
+      $gettextInterpolate,
+      $ngettext,
+      upsertResource
+    }
+  ) {
+    let movedResources
+    if (context.state.clipboardAction === ClipboardActions.Cut) {
+      movedResources = await move(
+        context.state.clipboardResources,
+        context.state.currentFolder,
+        client,
+        createModal,
+        hideModal,
+        showMessage,
+        $gettext,
+        $gettextInterpolate,
+        $ngettext
+      )
+      context.commit('CLEAR_CLIPBOARD')
+    }
+    if (context.state.clipboardAction === ClipboardActions.Copy) {
+      movedResources = await copy(
+        context.state.clipboardResources,
+        context.state.currentFolder,
+        client,
+        createModal,
+        hideModal,
+        showMessage,
+        $gettext,
+        $gettextInterpolate,
+        $ngettext
+      )
+    }
+    const loadMovedResource = async (resource) => {
+      const loadedResource = await client.files.fileInfo(resource.webDavPath, DavProperties.Default)
+      upsertResource(buildResource(loadedResource))
+    }
+    const loadingResources = []
+    for (const resource of movedResources) {
+      loadingResources.push(loadMovedResource(resource))
+    }
+    await Promise.all(loadingResources)
+  },
   resetFileSelection(context) {
     context.commit('RESET_SELECTION')
   },

packages/web-app-files/src/store/mutations.js

@@ -79,6 +79,18 @@ export default {
   CLEAR_FILES_SEARCHED(state) {
     state.filesSearched = null
   },
+  CLEAR_CLIPBOARD(state) {
+    state.clipboardResources = []
+    state.clipboardAction = null
+  },
+  CLIPBOARD_SELECTED(state) {
+    state.clipboardResources = state.files.filter((f) => {
+      return state.selectedIds.some((id) => f.id === id)
+    })
+  },
+  SET_CLIPBOARD_ACTION(state, action) {
+    state.clipboardAction = action
+  },
   SET_FILE_SELECTION(state, files) {
     state.selectedIds = files.map((f) => f.id)
   },

packages/web-app-files/src/store/state.js

@@ -3,6 +3,8 @@ export default {
   files: [],
   filesSearched: null,
   selectedIds: [],
+  clipboardResources: [],
+  clipboardAction: null,
   versions: [],
   spaces: [],