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

ajout composant fileExistsDialog (non fonctionnel)

Browse Source
This commit is contained in:
Alexandre_BRAVO
2024-11-25 17:55:40 +01:00
parent 7920b0706c
commit cf18c7638e
3 changed files with 171 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/FileExistsDialog.vue Normal file
View File

@@ -0,0 +1,101 @@
<template>
<div class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50">
<div v-if="!displayRename" class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
<h2 class="text-lg font-semibold mb-4">Le fichier existe déjà</h2>
<p>Le fichier "{{ fileName }}" existe déjà. Que voulez-vous faire ?</p>
<div class="flex justify-end mt-4 space-x-2">
<button @click="onOverwrite">Écraser</button>
<button @click="toggleRename">Renommer</button>
<button @click="onCancel">Annuler</button>
</div>
</div>
<!-- Renommer le fichier -->
<div v-else class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
<h2 class="text-lg font-semibold mb-4">Modifier le nom du fichier</h2>
<input
type="text"
v-model="newFileName"
@input="onInputChange"
@keyup.enter="save"
placeholder="Entrez le nom du fichier"
class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<div class="flex justify-end mt-4 space-x-2">
<button @click="save" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">Valider</button>
<button @click="toggleRename" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">Annuler</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
fileName: {
type: String,
required: true
}
},
data() {
var oldFileName = this.fileName;
var newFileName = this.fileName;
var extension = '';
if(!this.isDirectory) {
let nameSplit = newFileName.split('.');
if (nameSplit.length > 1) {
extension = nameSplit.pop();
}
}
return {
displayRename: false,
oldFileName,
newFileName,
extension,
}
},
methods: {
onOverwrite() {
this.$emit('overwrite', {forAll : false});
},
onCancel() {
this.$emit('cancel');
},
toggleRename() {
this.displayRename = !this.displayRename;
},
save() {
if(this.newFileName !== ''){
// Séparer le nom de fichier sans l'extension
const fileNameWithoutExtension = this.newFileName.slice(0, this.newFileName.lastIndexOf('.'));
// Re-construire le nom du fichier avec l'extension d'origine
const newFileNameWithOriginalExtension = fileNameWithoutExtension + '.' + this.extension;
if (!this.isDirectory && this.newFileName !== newFileNameWithOriginalExtension) {
// L'extension a été modifiée, on rétablit l'extension correcte
this.newFileName = newFileNameWithOriginalExtension;
}
this.$emit("rename", { initialFileName: this.initialFileName, newFileName: this.newFileName });
this.onCancel();
}
},
onInputChange() {
if (!this.isDirectory) {
const fileNameWithoutExtension = this.newFileName.slice(0, this.newFileName.lastIndexOf('.'));
const newFileNameWithOriginalExtension = fileNameWithoutExtension + '.' + this.extension;
// Si l'extension est différente de celle d'origine, on la rétablit
if (this.extension !== '' && this.newFileName !== newFileNameWithOriginalExtension) {
// Vous pouvez ici vérifier si l'extension a été modifiée et la rétablir
this.newFileName = newFileNameWithOriginalExtension;
}
}
},
}
};
</script>
<style></style>

43
src/components/FileTable.vue
View File

@@ -15,9 +15,9 @@
<Plus :size="20" />
<span>Nouveau</span>
</button>
<span v-else>
<div v-else>
<ProgressBar :value="transferProgress" :color="transferStatus" />
</span>
</div>
</div>
</template>
</NcBreadcrumbs>
@@ -117,8 +117,11 @@
</div>
</div>
</div>
<EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" :isDirectory="isDirectory" @update="updateFileName" @close="closeEditDialog">
</EditFileName>
<FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" @overwrite="" @rename="" @cancel="fileExistDialogDisabled = true">
</FileExistsDialog>
</div>
</template>
@@ -126,16 +129,22 @@
<script>
import { getClient, getRootPath } from '@nextcloud/files/dav';
// NextCloud Components
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js';
import Plus from 'vue-material-design-icons/Plus.vue'
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'
// Custom components
import ProgressBar from './ProgressBar.vue';
import EditFileName from './EditFileName.vue';
import FileExistsDialog from './FileExistsDialog.vue';
// Icons
import Plus from 'vue-material-design-icons/Plus.vue'
import Delete from 'vue-material-design-icons/Delete.vue';
import Pencil from 'vue-material-design-icons/Pencil.vue'
export default {
name: 'FileTable',
@@ -149,6 +158,7 @@ export default {
Delete,
Pencil,
EditFileName,
FileExistsDialog
},
props: {
file: {
@@ -167,8 +177,9 @@ export default {
isTransfering: false,
isDragging: false,
editDialogDisabled: true,
initialFileName: '', // Nom originel du fichier/dossier edite
isDirectory: false, // Si l'element edite est un dossier ou non
fileExistDialogDisabled:true,
initialFileName: '', // Nom originel du fichier/dossier a edite
isDirectory: false, // Si l'element a edite est un dossier ou non
transferProgress: 0,
transferStatus: 'bg-blue-500',
};
@@ -350,7 +361,11 @@ export default {
await this.fetchFiles();
}
else{
alert(`Vous ne pouvez pas deposer le fichier : ${file.name} car un autre fichier porte deja le meme nom.`);
this.initialFileName = file.name;
this.fileExistDialogDisabled = false;
while(!this.fileExistDialogDisabled) {
await this.sleep(50);
}
}
} catch (error) {
console.error('Erreur lors du déplacement du fichier:', error);
@@ -368,7 +383,11 @@ export default {
await this.fetchFiles();
}
else{
alert(`Vous ne pouvez pas deposer le dossier : ${folder.name} car un autre dossier porte deja le meme nom.`);
this.initialFileName = folder.name;
this.fileExistDialogDisabled = false;
while(!this.fileExistDialogDisabled) {
await this.sleep();
}
}
} catch (error) {
console.error('Erreur lors de la création du dossier :', error);
@@ -427,7 +446,6 @@ export default {
catch(error){
console.error('Erreur lors du renommage d\'un element : ', error);
}
await this.fetchFiles();
}
},
@@ -440,6 +458,9 @@ export default {
let exists = await client.exists(path);
return exists;
},
async sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
}
};