155 lines
6.5 KiB
Vue
155 lines
6.5 KiB
Vue
<template>
|
|
<v-col cols="12">
|
|
<v-container>
|
|
<v-card style="border-radius: 30px" elevation="10">
|
|
<v-card-text>
|
|
<v-row>
|
|
<!-- Boutons de sélection -->
|
|
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
|
<v-btn elevation="0" icon @click="selectType('title')">
|
|
<v-icon>mdi-format-title</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
|
<v-btn elevation="0" icon @click="selectType('text')">
|
|
<v-icon>mdi-text</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
|
<v-btn elevation="0" icon @click="selectType('image')">
|
|
<v-icon>mdi-image</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
|
<v-btn elevation="0" icon @click="selectType('video')">
|
|
<v-icon>mdi-video</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
|
<v-btn elevation="0" icon @click="selectType('audio')">
|
|
<v-icon>mdi-volume-high</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
|
|
<v-btn elevation="0" icon @click="selectType('comments')">
|
|
<v-icon>mdi-comment</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
|
|
<!-- Affichage du contenu en fonction du type sélectionné -->
|
|
<v-card-text>
|
|
<v-row v-for="(content, index) in contents" :key="index" class="draggable-row"
|
|
@dragstart="dragStart(index)" @dragover.prevent @drop="drop(index)" draggable="true">
|
|
<v-col cols="10">
|
|
<template v-if="content.type === 'title'">
|
|
<v-text-field v-model="content.value" label="Titre"></v-text-field>
|
|
</template>
|
|
<template v-else-if="content.type === 'text'">
|
|
<v-textarea v-model="content.value" label="Texte"></v-textarea>
|
|
</template>
|
|
<template v-else-if="content.type === 'image'">
|
|
<v-row>
|
|
|
|
<v-col cols="12">
|
|
<v-file-input v-model="content.value" label="Image"></v-file-input>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
<template v-else-if="content.type === 'video'">
|
|
<v-text-field v-model="content.value" label="URL de la vidéo"></v-text-field>
|
|
</template>
|
|
<template v-else-if="content.type === 'audio'">
|
|
<v-row>
|
|
<v-col cols="2">
|
|
<v-icon>mdi-volume-high</v-icon>
|
|
</v-col>
|
|
<v-col cols="10">
|
|
<v-file-input v-model="content.value" label="Audio"></v-file-input>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
<template v-else-if="content.type === 'comments'">
|
|
<v-text-field v-model="content.value" label="Commentaires"></v-text-field>
|
|
</template>
|
|
</v-col>
|
|
<v-col cols="2" class="d-flex justify-center align-center">
|
|
<v-btn icon @click="removeContent(index)" class="remove-button">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
|
|
<!-- Boutons Post, Preview et Cancel -->
|
|
<v-row v-if="contents.length > 0" justify="end" style="margin-bottom: 10px;">
|
|
<v-col class="d-flex justify-end" style="margin-right: 4%;">
|
|
<v-btn style="margin-right: 15px;" @click="postContent" color="white" dark
|
|
elevation="4">Post</v-btn>
|
|
<v-btn style="margin-right: 15px;" @click="previewContent" color="white" dark
|
|
elevation="5">Preview</v-btn>
|
|
<v-btn @click="cancelPost" color="white" dark elevation="5">Cancel</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</v-container>
|
|
</v-col>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const contents = ref([]);
|
|
let dragIndex = null;
|
|
|
|
const selectType = (type) => {
|
|
console.log("Type sélectionné:", type);
|
|
contents.value.push({ type: type, value: '' });
|
|
};
|
|
|
|
const removeContent = (index) => {
|
|
contents.value.splice(index, 1);
|
|
};
|
|
|
|
|
|
|
|
const cancelPost = () => {
|
|
if (contents.value.length > 0) {
|
|
// Réinitialiser le tableau contents pour supprimer tous les contenus
|
|
contents.value = [];
|
|
}
|
|
};
|
|
|
|
const dragStart = (index) => {
|
|
dragIndex = index;
|
|
};
|
|
|
|
const drop = (index) => {
|
|
if (dragIndex !== null && index !== null) {
|
|
const draggedItem = contents.value[dragIndex];
|
|
contents.value.splice(dragIndex, 1);
|
|
contents.value.splice(index, 0, draggedItem);
|
|
dragIndex = null;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.remove-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: -20%;
|
|
}
|
|
|
|
.toolbar-btn {
|
|
margin-top: 10px;
|
|
margin-bottom: -15px;
|
|
}
|
|
|
|
.draggable-row {
|
|
cursor: grab;
|
|
}
|
|
</style> |