jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add content creation

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-07-01 23:32:53 -04:00
parent 308e96c26b
commit d2d9366700
19 changed files with 530 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/views/contents/PostContentMenu.vue Normal file
View File

@@ -0,0 +1,148 @@
<template>
<div class="flow">
<button @click="selectType('title')">
<v-icon>mdi-format-title</v-icon>
</button>
<button @click="selectType('text')">
<v-icon>mdi-text</v-icon>
</button>
<button @click="selectType('image')">
<v-icon>mdi-image</v-icon>
</button>
<button @click="selectType('video')">
<v-icon>mdi-video</v-icon>
</button>
<button @click="selectType('audio')">
<v-icon>mdi-volume-high</v-icon>
</button>
<button @click="selectType('comments')">
<v-icon>mdi-comment</v-icon>
</button>
</div>
<!-- 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">-->
<!-- <button icon @click="removeContent(index)" class="remove-button">-->
<!-- <v-icon>mdi-close</v-icon>-->
<!-- </button>-->
<!-- </v-col>-->
<!-- </v-row>-->
<!-- </v-card-text>-->
<!-- &lt;!&ndash; Boutons Post, Preview et Cancel &ndash;&gt;-->
<!-- <v-row v-if="contents.length > 0" justify="end" style="margin-bottom: 10px;">-->
<!-- <v-col class="d-flex justify-end" style="margin-right: 4%;">-->
<!-- <button style="margin-right: 15px;" @click="postContent" color="white" dark-->
<!-- elevation="4">Post-->
<!-- </button>-->
<!-- <button style="margin-right: 15px;" @click="previewContent" color="white" dark-->
<!-- elevation="5">Preview-->
<!-- </button>-->
<!-- <button @click="cancelPost" color="white" dark elevation="5">Cancel</button>-->
<!-- </v-col>-->
<!-- </v-row>-->
</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 postContent = () => {
// Implémenter la logique pour poster le contenu
};
const previewContent = () => {
// Implémenter la logique pour prévisualiser le contenu
};
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-button {
margin-top: 10px;
margin-bottom: -15px;
}
.draggable-row {
cursor: grab;
}
</style>