From 99171789c0b99c7e5dadc93c1306dcb275140b77 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Wed, 1 May 2024 21:21:51 -0400
Subject: [PATCH] Start PostUI

---
 src/layouts/PostContentMenu.vue               | 160 ++++++++++++++++++
 .../postcomponents/postimagecomponents        |   0
 src/views/main/ContactView.vue                |  23 ++-
 src/views/main/CreatorFolio.vue               |   2 +-
 4 files changed, 175 insertions(+), 10 deletions(-)
 create mode 100644 src/layouts/PostContentMenu.vue
 create mode 100644 src/layouts/postcomponents/postimagecomponents

diff --git a/src/layouts/PostContentMenu.vue b/src/layouts/PostContentMenu.vue
new file mode 100644
index 0000000..ed46932
--- /dev/null
+++ b/src/layouts/PostContentMenu.vue
@@ -0,0 +1,160 @@
+<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 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-btn {
+    margin-top: 10px;
+    margin-bottom: -15px;
+}
+
+.draggable-row {
+    cursor: grab;
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/postcomponents/postimagecomponents b/src/layouts/postcomponents/postimagecomponents
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/main/ContactView.vue b/src/views/main/ContactView.vue
index 738f19a..7ec4227 100644
--- a/src/views/main/ContactView.vue
+++ b/src/views/main/ContactView.vue
@@ -33,10 +33,12 @@
                 <h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
                 <v-text-field v-model="name" label="Nom" style="color: rgb(107, 0, 101);"></v-text-field>
                 <v-text-field v-model="emailAddress" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
-                <v-textarea v-model="reasonToJoin" style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement?"
-                  placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
-                <v-textarea v-model="socialNetworkAccount" style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux?"
-                  placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
+                <v-textarea v-model="reasonToJoin" style="color: rgb(107, 0, 101)"
+                  label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici"
+                  rows="3" auto-grow></v-textarea>
+                <v-textarea v-model="socialNetworkAccount" style="color: rgb(107, 0, 101)"
+                  label="Avez-vous déjà des comptes sur les réseaux sociaux?" placeholder="Écrivez votre message ici"
+                  rows="3" auto-grow></v-textarea>
                 <v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
                   class="mt-4 send-btn" block>Envoyez
                 </v-btn>
@@ -101,16 +103,19 @@
         </v-col>
       </v-row>
 
-      <!-- Form Information  -->+
-      <v-text-field v-model="name" class="labelsize" label="Nom" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
-      <v-text-field v-model="emailAddress" class="labelsize" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
+      <!-- Form Information  -->
+      <v-text-field v-model="name" class="labelsize" label="Nom"
+        style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
+      <v-text-field v-model="emailAddress" class="labelsize" label="Courriel"
+        style="color: rgb(107, 0, 101);"></v-text-field>
       <v-textarea v-model="reasonToJoin" class="labelsize" style="color: rgb(107, 0, 101)"
         label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici" rows="3"
         auto-grow></v-textarea>
       <v-textarea v-model="socialNetworkAccount" class="labelsize" style="color: rgb(107, 0, 101)"
         label="Avez-vous déjà des comptes sur les réseaux sociaux?" placeholder="Écrivez votre message ici" rows="3"
         auto-grow></v-textarea>
-      <v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
+      <v-btn @click="sendForm()"
+        style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
         class="mt-4 send-btn" block>
         Envoyez
       </v-btn>
@@ -182,8 +187,8 @@
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import { ref } from 'vue';
 import { useClient } from "@/plugins/api.js";
+import { ref } from 'vue';
 
 const client = useClient();
 
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index 6515a9f..a78f0e2 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -286,7 +286,7 @@
           </v-container>
         </v-container>
 
-
+        <!--   <PostContentMenu style="margin-top: -30px;"></PostContentMenu>  Post   -->
 
         <!-- Card youtube balado -->
         <v-container>