KAZ/webtransfer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add progess bar for transfer

Browse Source
This commit is contained in:
GMrrc 2024-11-22 14:28:06 +01:00
parent 39b1724a66
commit fd03c869c6
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/FileTable.vue
View File

@ -11,11 +11,14 @@
</NcBreadcrumb>
<template #actions>
<div class="flex items-center ml-2">
<button @click="toggleAddFilePopup"
<button v-if="!isTransfering" @click="toggleAddFilePopup"
class="flex items-center space-x-2 bg-blue-100 text-blue-600 font-medium px-4 py-2 rounded-md hover:bg-blue-200 transition">
<Plus :size="20" />
<span>Nouveau</span>
</button>
<span v-else>
<NcProgressBar :value="transferProgress" size="medium" :color="transferStatus" />
</span>
</div>
</template>
</NcBreadcrumbs>
@ -123,7 +126,6 @@
<script>
import { ref } from 'vue';
import { getClient, getRootPath } from '@nextcloud/files/dav';
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js';
@ -132,6 +134,7 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js';
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js';
import Delete from 'vue-material-design-icons/Delete.vue';
import Pencil from 'vue-material-design-icons/Pencil.vue'
import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
import EditFileName from './EditFileName.vue';
export default {
@ -142,6 +145,7 @@ export default {
Plus,
NcActions,
NcActionButton,
NcProgressBar,
Delete,
Pencil,
EditFileName
@ -164,6 +168,8 @@ export default {
isDragging: false,
editDialogDisabled: true,
initialFileName: '',
transferProgress: 0,
transferStatus: 'green',
};
},
async mounted() {
@ -263,16 +269,21 @@ export default {
if (file.isDirectory) {
await this.moveFilesOfFolder(file,'');
} else {
this.transferProgress = 25;
if (file.content && typeof file.content.arrayBuffer === 'function') {
file.content = await file.content.arrayBuffer();
}
this.transferProgress = 50;
await this.moveFileToTarget(file, '');
this.transferProgress = 100;
}
this.isTransfering = false;
this.transferProgress = 0;
} catch (error) {
console.error('Erreur lors du drop :', error);
this.transferStatus = 'red';
this.isTransfering = false;
}
},
@ -280,7 +291,10 @@ export default {
await this.createFolder(folder, parentPath);
const progressSteps = 100 / folder.children.length;
for (const child of folder.children) {
this.transferProgress += progressSteps;
if (child.isDirectory) {
await this.moveFilesOfFolder(child, parentPath + child.parentPath + '/');
} else {