ajout options (delete et edit) pour les fichiers
This commit is contained in:
Alexandre_BRAVO
79
src/components/EditFileName.vue
Normal file
79
src/components/EditFileName.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50" @click="closeModal">
|
||||
<div class="bg-NcBlack rounded-lg shadow-lg p-6 w-96" @click.stop>
|
||||
<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">Sauvegarder</button>
|
||||
<button @click="closeModal" 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 {
|
||||
name: "FileNameEditor",
|
||||
props: {
|
||||
initialFileName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
var newFileName = this.initialFileName;
|
||||
var extension = '';
|
||||
let nameSplit = newFileName.split('.');
|
||||
if (nameSplit.length > 1) {
|
||||
extension = nameSplit.pop();
|
||||
}
|
||||
return {
|
||||
newFileName,
|
||||
extension,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
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.extension !== '' && this.newFileName !== newFileNameWithOriginalExtension) {
|
||||
// L'extension a été modifiée, on rétablit l'extension correcte
|
||||
this.newFileName = newFileNameWithOriginalExtension;
|
||||
}
|
||||
|
||||
this.$emit("update", { initialFileName: this.initialFileName, newFileName: this.newFileName });
|
||||
this.closeModal();
|
||||
}
|
||||
},
|
||||
closeModal() {
|
||||
this.$emit("close");
|
||||
},
|
||||
onInputChange() {
|
||||
// Vous pouvez ici vérifier si l'extension a été modifiée et la rétablir
|
||||
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) {
|
||||
this.newFileName = newFileNameWithOriginalExtension;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -53,9 +53,10 @@
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="flex h-12 items-center border-b border-gray-300">
|
||||
<div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
|
||||
<div class="w-1/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div>
|
||||
<div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
|
||||
<div class="w-7/12 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
|
||||
<div class="w-2/12 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Type</div>
|
||||
<div class="w-2/12 px-4 py-2 text-gray-500 font-semibold">Taille</div>
|
||||
<div class="w-1/12 px-4 py-2 text-gray-500 font-semibold">Options</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenu -->
|
||||
@@ -65,7 +66,7 @@
|
||||
@click="handleClickElem(file)">
|
||||
|
||||
<!-- Nom -->
|
||||
<div class="w-4/6 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer">
|
||||
<div class="w-7/12 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer">
|
||||
<div class="w-12 h-12 flex items-center justify-center cursor-pointer">
|
||||
<template v-if="file.type === 'directory'">
|
||||
<svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
|
||||
@@ -90,34 +91,64 @@
|
||||
</div>
|
||||
|
||||
<!-- Type -->
|
||||
<div class="w-1/6 px-4 py-2 border-r border-gray-300 cursor-pointer">
|
||||
<div class="w-2/12 px-4 py-2 border-r border-gray-300 cursor-pointer">
|
||||
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
|
||||
</div>
|
||||
|
||||
<!-- Taille -->
|
||||
<div class="w-1/6 px-4 py-2 cursor-pointer">
|
||||
<div class="w-2/12 px-4 py-2 cursor-pointer">
|
||||
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
|
||||
</div>
|
||||
|
||||
<!-- Options -->
|
||||
<div class="w-1/12 px-4 py-2 cursor-pointer" @click.stop>
|
||||
<NcActions>
|
||||
<NcActionButton @click="deleteElem(file)">
|
||||
<template #icon>
|
||||
<Delete :size="20" />
|
||||
</template>
|
||||
Supprimer
|
||||
</NcActionButton>
|
||||
<NcActionButton @click="editElem(file)">
|
||||
<template #icon>
|
||||
<Pencil :size="20" />
|
||||
</template>
|
||||
Editer
|
||||
</NcActionButton>
|
||||
</NcActions>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" @update="updateFileName" @close="closeEditDialog">
|
||||
</EditFileName>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<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';
|
||||
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 EditFileName from './EditFileName.vue';
|
||||
|
||||
export default {
|
||||
name: 'FileTable',
|
||||
components: {
|
||||
NcBreadcrumbs,
|
||||
NcBreadcrumb,
|
||||
Plus
|
||||
Plus,
|
||||
NcActions,
|
||||
NcActionButton,
|
||||
Delete,
|
||||
Pencil,
|
||||
EditFileName
|
||||
},
|
||||
props: {
|
||||
file: {
|
||||
@@ -134,6 +165,8 @@ export default {
|
||||
isAddFilePopupVisible: false,
|
||||
newFileName: '',
|
||||
isTransfering: false,
|
||||
editDialogDisabled: true,
|
||||
initialFileName: '',
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
@@ -278,7 +311,41 @@ export default {
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la création du dossier :', error);
|
||||
}
|
||||
}
|
||||
},
|
||||
async deleteElem(file){
|
||||
const client = getClient()
|
||||
try{
|
||||
let path = this.root_path + this.current_dir + file.basename;
|
||||
await client.deleteFile(path);
|
||||
}
|
||||
catch(error){
|
||||
console.error('Erreur lors de la suppression d\'un element : ', error);
|
||||
}
|
||||
|
||||
await this.fetchFiles();
|
||||
},
|
||||
async editElem(file) {
|
||||
this.initialFileName = file.basename;
|
||||
this.editDialogDisabled = false;
|
||||
},
|
||||
closeEditDialog() {
|
||||
this.editDialogDisabled = true;
|
||||
},
|
||||
async updateFileName(names){
|
||||
if(names[0] !== names[1]){
|
||||
const client = getClient()
|
||||
try{
|
||||
const oldName = this.root_path + this.current_dir + names.initialFileName;
|
||||
const newName = this.root_path + this.current_dir + names.newFileName;
|
||||
await client.moveFile(oldName,newName);
|
||||
}
|
||||
catch(error){
|
||||
console.error('Erreur lors du renommage d\'un element : ', error);
|
||||
}
|
||||
|
||||
await this.fetchFiles();
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user