Apply loading service to the new action composables

packages/web-app-files/src/composables/actions/files/useFileActionsAcceptShare.ts

@@ -8,6 +8,7 @@ import {
   useCapabilityFilesSharingResharing,
   useCapabilityShareJailEnabled,
   useClientService,
+  useLoadingService,
   useRouter,
   useStore
 } from 'web-pkg/src/composables'
@@ -23,6 +24,7 @@ export const useFileActionsAcceptShare = ({ store }: { store?: Store<any> } = {}
   const hasResharing = useCapabilityFilesSharingResharing()
   const hasShareJail = useCapabilityShareJailEnabled()
   const { owncloudSdk } = useClientService()
+  const loadingService = useLoadingService()
 
   const handler = async ({ resources }) => {
     const errors = []
@@ -81,7 +83,7 @@ export const useFileActionsAcceptShare = ({ store }: { store?: Store<any> } = {}
     {
       name: 'accept-share',
       icon: 'check',
-      handler,
+      handler: (args) => loadingService.addTask(() => handler(args)),
       label: ({ resources }) => $ngettext('Accept share', 'Accept shares', resources.length),
       isEnabled: ({ space, resources }) => {
         if (

packages/web-app-files/src/composables/actions/files/useFileActionsDeclineShare.ts

@@ -11,6 +11,7 @@ import {
   useCapabilityFilesSharingResharing,
   useCapabilityShareJailEnabled,
   useClientService,
+  useLoadingService,
   useRouter,
   useStore
 } from 'web-pkg/src/composables'
@@ -26,6 +27,7 @@ export const useFileActionsDeclineShare = ({ store }: { store?: Store<any> } = {
   const hasResharing = useCapabilityFilesSharingResharing()
   const hasShareJail = useCapabilityShareJailEnabled()
   const { owncloudSdk } = useClientService()
+  const loadingService = useLoadingService()
 
   const handler = async ({ resources }) => {
     const errors = []
@@ -85,7 +87,7 @@ export const useFileActionsDeclineShare = ({ store }: { store?: Store<any> } = {
     {
       name: 'decline-share',
       icon: 'spam-3',
-      handler,
+      handler: (args) => loadingService.addTask(() => handler(args)),
       label: ({ resources }) => $ngettext('Decline share', 'Decline shares', resources.length),
       isEnabled: ({ space, resources }) => {
         if (

packages/web-app-files/src/composables/actions/files/useFileActionsDownloadArchive.ts

@@ -11,13 +11,19 @@ import { archiverService } from '../../../services'
 import { isPublicSpaceResource, Resource } from 'web-client/src/helpers'
 import { Store } from 'vuex'
 import { computed, unref } from 'vue'
-import { usePublicLinkPassword, useRouter, useStore } from 'web-pkg/src/composables'
+import {
+  useLoadingService,
+  usePublicLinkPassword,
+  useRouter,
+  useStore
+} from 'web-pkg/src/composables'
 import { Action, ActionOptions } from 'web-pkg/src/composables/actions'
 import { useGettext } from 'vue3-gettext'
 
 export const useFileActionsDownloadArchive = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
   const router = useRouter()
+  const loadingService = useLoadingService()
   const { $ngettext, $gettext } = useGettext()
   const publicLinkPassword = usePublicLinkPassword({ store })
   const isFilesAppActive = useIsFilesAppActive()
@@ -31,25 +37,27 @@ export const useFileActionsDownloadArchive = ({ store }: { store?: Store<any> }
           dir: path.dirname(first<Resource>(resources).path) || '/',
           files: resources.map((resource) => resource.name)
         }
-    await archiverService
-      .triggerDownload({
-        ...fileOptions,
-        ...(isPublicSpaceResource(space) && {
-          publicToken: space.id as string,
-          publicLinkPassword: unref(publicLinkPassword)
+    return loadingService.addTask(() => {
+      return archiverService
+        .triggerDownload({
+          ...fileOptions,
+          ...(isPublicSpaceResource(space) && {
+            publicToken: space.id as string,
+            publicLinkPassword: unref(publicLinkPassword)
+          })
         })
-      })
-      .catch((e) => {
-        console.error(e)
-        store.dispatch('showMessage', {
-          title: $ngettext(
-            'Failed to download the selected folder.', // on single selection only available for folders
-            'Failed to download the selected files.', // on multi selection available for files+folders
-            resources.length
-          ),
-          status: 'danger'
+        .catch((e) => {
+          console.error(e)
+          store.dispatch('showMessage', {
+            title: $ngettext(
+              'Failed to download the selected folder.', // on single selection only available for folders
+              'Failed to download the selected files.', // on multi selection available for files+folders
+              resources.length
+            ),
+            status: 'danger'
+          })
         })
-      })
+    })
   }
 
   const actions = computed((): Action[] => {

packages/web-app-files/src/composables/actions/files/useFileActionsEmptyTrashBin.ts

@@ -8,6 +8,7 @@ import {
   useCapabilityFilesPermanentDeletion,
   useCapabilityShareJailEnabled,
   useClientService,
+  useLoadingService,
   useRouter,
   useStore
 } from 'web-pkg/src/composables'
@@ -19,6 +20,7 @@ export const useFileActionsEmptyTrashBin = ({ store }: { store?: Store<any> } =
   const router = useRouter()
   const { $gettext, $pgettext } = useGettext()
   const { owncloudSdk } = useClientService()
+  const loadingService = useLoadingService()
   const hasShareJail = useCapabilityShareJailEnabled()
   const hasPermanentDeletion = useCapabilityFilesPermanentDeletion()
 
@@ -27,27 +29,29 @@ export const useFileActionsEmptyTrashBin = ({ store }: { store?: Store<any> } =
       ? buildWebDavSpacesTrashPath(space.id)
       : buildWebDavFilesTrashPath(store.getters.user.id)
 
-    return owncloudSdk.fileTrash
-      .clearTrashBin(path)
-      .then(() => {
-        store.dispatch('showMessage', {
-          title: $gettext('All deleted files were removed')
+    return loadingService.addTask(() => {
+      return owncloudSdk.fileTrash
+        .clearTrashBin(path)
+        .then(() => {
+          store.dispatch('showMessage', {
+            title: $gettext('All deleted files were removed')
+          })
+          store.dispatch('Files/clearTrashBin')
         })
-        store.dispatch('Files/clearTrashBin')
-      })
-      .catch((error) => {
-        console.error(error)
-        store.dispatch('showMessage', {
-          title: $pgettext(
-            'Error message in case clearing the trash bin fails',
-            'Failed to delete all files permanently'
-          ),
-          status: 'danger'
+        .catch((error) => {
+          console.error(error)
+          store.dispatch('showMessage', {
+            title: $pgettext(
+              'Error message in case clearing the trash bin fails',
+              'Failed to delete all files permanently'
+            ),
+            status: 'danger'
+          })
         })
-      })
-      .finally(() => {
-        store.dispatch('hideModal')
-      })
+        .finally(() => {
+          store.dispatch('hideModal')
+        })
+    })
   }
 
   const handler = ({ space }: ActionOptions) => {

packages/web-app-files/src/composables/actions/files/useFileActionsPaste.ts

@@ -6,13 +6,14 @@ import {
 import { Store } from 'vuex'
 import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { useClientService, useRouter, useStore } from 'web-pkg/src/composables'
+import { useClientService, useLoadingService, useRouter, useStore } from 'web-pkg/src/composables'
 import { Action } from 'web-pkg/src/composables/actions'
 
 export const useFileActionsPaste = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
   const router = useRouter()
   const clientService = useClientService()
+  const loadingService = useLoadingService()
   const { $gettext, $pgettext, interpolate: $gettextInterpolate, $ngettext } = useGettext()
 
   const isMacOs = computed(() => {
@@ -30,6 +31,7 @@ export const useFileActionsPaste = ({ store }: { store?: Store<any> } = {}) => {
     store.dispatch('Files/pasteSelectedFiles', {
       targetSpace: space,
       clientService,
+      loadingService,
       createModal: (...args) => store.dispatch('createModal', ...args),
       hideModal: (...args) => store.dispatch('hideModal', ...args),
       showMessage: (...args) => store.dispatch('showMessage', ...args),

packages/web-app-files/src/composables/actions/files/useFileActionsRename.ts

@@ -12,7 +12,7 @@ import {
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 import { renameResource as _renameResource } from '../../../helpers/resources'
 import { computed, unref } from 'vue'
-import { useClientService, useRouter, useStore } from 'web-pkg/src/composables'
+import { useClientService, useLoadingService, useRouter, useStore } from 'web-pkg/src/composables'
 import { useGettext } from 'vue3-gettext'
 import { Action, ActionOptions } from 'web-pkg/src/composables/actions'
 import { useCapabilityFilesSharingCanRename } from 'web-pkg/src/composables/capability'
@@ -22,6 +22,7 @@ export const useFileActionsRename = ({ store }: { store?: Store<any> } = {}) =>
   const router = useRouter()
   const { $gettext, interpolate: $gettextInterpolate } = useGettext()
   const clientService = useClientService()
+  const loadingService = useLoadingService()
   const canRename = useCapabilityFilesSharingCanRename()
 
   const checkNewName = (resource, newName, parentResources = undefined) => {
@@ -167,7 +168,9 @@ export const useFileActionsRename = ({ store }: { store?: Store<any> } = {}) =>
         newName = `${newName}.${resources[0].extension}`
       }
 
-      renameResource(space, resources[0], newName)
+      return loadingService.addTask(() => {
+        return renameResource(space, resources[0], newName)
+      })
     }
     const checkName = (newName) => {
       if (!areFileExtensionsShown) {

packages/web-app-files/src/composables/actions/files/useFileActionsRestore.ts

@@ -19,19 +19,22 @@ import {
   useAccessToken,
   useCapabilitySpacesEnabled,
   useClientService,
+  useLoadingService,
   useRouter,
   useStore
 } from 'web-pkg/src/composables'
 import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Action, ActionOptions } from 'web-pkg/src/composables/actions'
+import { LoadingTaskCallbackArguments } from 'web-pkg'
 
 export const useFileActionsRestore = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
   const router = useRouter()
   const { $gettext, $ngettext, interpolate: $gettextInterpolate } = useGettext()
   const clientService = useClientService()
   const accessToken = useAccessToken({ store })
+  const loadingService = useLoadingService()
 
   const hasSpacesEnabled = useCapabilitySpacesEnabled()
 
@@ -151,13 +154,14 @@ export const useFileActionsRestore = ({ store }: { store?: Store<any> } = {}) =>
   const restoreResources = async (
     space: SpaceResource,
     resources: Resource[],
-    missingFolderPaths: string[]
+    missingFolderPaths: string[],
+    { setProgress }: LoadingTaskCallbackArguments
   ) => {
     const restoredResources = []
     const failedResources = []
 
     let createdFolderPaths = []
-    for (const resource of resources) {
+    for (const [i, resource] of resources.entries()) {
       const parentPath = dirname(resource.path)
       if (missingFolderPaths.includes(parentPath)) {
         const { existingPaths } = await createFolderStructure(space, parentPath, createdFolderPaths)
@@ -172,6 +176,8 @@ export const useFileActionsRestore = ({ store }: { store?: Store<any> } = {}) =>
       } catch (e) {
         console.error(e)
         failedResources.push(resource)
+      } finally {
+        setProgress({ total: resources.length, current: i + 1 })
       }
     }
 
@@ -261,7 +267,12 @@ export const useFileActionsRestore = ({ store }: { store?: Store<any> } = {}) =>
       resource.path = urlJoin(parentPath, resolvedName)
       resolvedResources.push(resource)
     }
-    return restoreResources(space, resolvedResources, missingFolderPaths)
+    return loadingService.addTask(
+      ({ setProgress }) => {
+        return restoreResources(space, resolvedResources, missingFolderPaths, { setProgress })
+      },
+      { indeterminate: false }
+    )
   }
 
   const actions = computed((): Action[] => [