From 568a1ffd6ca8ae678e73b390942091f26df59094 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 23 Nov 2024 10:54:31 -0500
Subject: [PATCH] Add Thumbnail - Work in Progress

---
 src/views/contents/ContentEditorPage.vue      | 30 +++++++++----------
 src/views/contents/ContentList.vue            |  8 +++--
 src/views/contents/QuickyContentEditor.vue    | 22 +++++++++++---
 .../contents/contentcards/NContentCard.vue    |  6 ++--
 src/views/creators/CreatorHome.vue            | 13 ++------
 5 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/src/views/contents/ContentEditorPage.vue b/src/views/contents/ContentEditorPage.vue
index 0fd4839..96225c9 100644
--- a/src/views/contents/ContentEditorPage.vue
+++ b/src/views/contents/ContentEditorPage.vue
@@ -19,17 +19,17 @@ const toggleHtmlEditor = () => {
 
 <template>
   <div class="flex flex-col h-screen">
-    <!-- Titre en haut -->
+
     <header class="text-2xl text-center py-4 bg-gray-200">
       Création de contenu
     </header>
 
-    <!-- Contenu en deux colonnes -->
+ 
     <div class="flex flex-grow">
-      <!-- Menu latéral -->
+   
       <aside class="side-menu flex flex-col items-center py-6 bg-gray-100 w-1/4">
         <div class="text-xl uppercase mb-6">Éditeurs de contenu</div>
-        <!-- Le bouton Quicky est plus visible quand il est actif -->
+  
         <v-btn
             :variant="showQuickyEditor ? 'elevated' : 'plain'"
             @click="toggleQuickyEditor"
@@ -37,14 +37,14 @@ const toggleHtmlEditor = () => {
         >
           Quicky
         </v-btn>
-        <!-- Le bouton Article est plus visible quand il est actif -->
-<!--        <v-btn-->
-<!--            :variant="showHtmlEditor ? 'elevated' : 'plain'"-->
-<!--            @click="toggleHtmlEditor"-->
-<!--            class="normal-button"-->
-<!--        >-->
-<!--          Article-->
-<!--        </v-btn>-->
+
+        <v-btn
+            :variant="showHtmlEditor ? 'elevated' : 'plain'"
+            @click="toggleHtmlEditor"
+            class="normal-button"
+        >
+          Article
+        </v-btn>
       </aside>
 
       <!-- Contenu principal -->
@@ -68,12 +68,12 @@ const toggleHtmlEditor = () => {
 }
 
 .v-btn {
-  width: 80%; /* Ajuster la largeur des boutons */
+  width: 80%; 
 }
 
 .normal-button {
-  padding: 0.5rem 1rem; /* Taille normale des boutons */
-  font-size: 1rem; /* Ajuster la taille du texte */
+  padding: 0.5rem 1rem; 
+  font-size: 1rem; 
 }
 
 header {
diff --git a/src/views/contents/ContentList.vue b/src/views/contents/ContentList.vue
index f725686..046cf17 100644
--- a/src/views/contents/ContentList.vue
+++ b/src/views/contents/ContentList.vue
@@ -17,9 +17,11 @@
           ></component>
         </template>
       </div>
+      
 
-      <template v-slot:empty>
-        Il n'y a pas plus de contenus
+
+      <template v-slot:empty >
+       <div class="py-2" :style="{color:branding.colors.onSurface}">Il n'y a pas plus de contenu</div>
       </template>
 
       <template v-slot:error>
@@ -34,7 +36,9 @@ import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
 import ContentCardNormal from "@/views/contents/contentcards/NContentCard.vue";
 import ContentCardSm from "@/views/contents/contentcards/SmContentCard.vue";
 import { useClient } from '@/plugins/api.js';
+import { useBrandingStore } from "@/stores/brandingStore.js";
 
+const branding = useBrandingStore();
 const props = defineProps({
   creatorId: {
     type: String,
diff --git a/src/views/contents/QuickyContentEditor.vue b/src/views/contents/QuickyContentEditor.vue
index 4801c8d..2856212 100644
--- a/src/views/contents/QuickyContentEditor.vue
+++ b/src/views/contents/QuickyContentEditor.vue
@@ -8,7 +8,7 @@ const client = useClient();
 const title = ref('');
 const message = ref('');
 const files = ref([]);
-const Thumbnail = ref([]);
+const Thumbnail = ref(); 
 const externalUrls = ref([]);
 
 const creatorProfileStore = useCreatorProfileStore();
@@ -27,9 +27,18 @@ async function publishPost() {
   formData.append('creatorId', creatorProfileStore.creator.id);
   formData.append('title', title.value);
   formData.append('description', message.value);
+  formData.append('thumbnail', Thumbnail);
+
   files.value.forEach(file => {
     formData.append('files', file);
   });
+
+ 
+ 
+ 
+
+
+
   externalUrls.value.forEach(externalUrl => {
     formData.append('externalUrls', externalUrl);
   });
@@ -48,6 +57,7 @@ async function publishPost() {
     title.value = '';
     message.value = '';
     files.value = [];
+    Thumbnail.value = null;
     externalUrls.value = [];
   } catch (error) {
     console.error(error);
@@ -58,10 +68,13 @@ const cancelPost = () => {
   title.value = '';
   message.value = '';
   files.value = [];
+  Thumbnail.value = null; 
   externalUrls.value = [];
 };
 </script>
 
+
+
 <template>
   <v-form>
     <v-card class="text-center rounded-xl w-[600px]">
@@ -105,15 +118,16 @@ const cancelPost = () => {
           <v-icon>mdi-plus</v-icon>
         </v-btn>
         <v-file-input v-model="Thumbnail"
-                      label="Thumbnail"
+                      label="Glissez votre Thumbnail"
                       class="p-2 custom-file-input"
                       variant="outlined"
-                      multiple
                       dropzone
                       prepend-icon=""
-                      placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
+                      placeholder="Glissez et déposez un fichier ici ou cliquez pour sélectionner un fichier"
         ></v-file-input>
 
+
+
         <v-file-input v-model="files"
                       label="Glissez vos images"
                       class="p-2 custom-file-input"
diff --git a/src/views/contents/contentcards/NContentCard.vue b/src/views/contents/contentcards/NContentCard.vue
index 326f8c5..fe2ba61 100644
--- a/src/views/contents/contentcards/NContentCard.vue
+++ b/src/views/contents/contentcards/NContentCard.vue
@@ -74,11 +74,13 @@ function hexToRgb(hex) {
 
     <div class="p-1">
       <div class="flex flex-row justify-between items-center">
-        <span class="text-caption mt-1">{{ time_ago(props.content.createdAt) }}</span>
+        <span class="text-caption mt-1 px-2"   :style="{color:branding.colors.onSurface}">{{ time_ago(props.content.createdAt) }}</span>
         <v-menu v-if="creatorIsCurrentUser" :offset-y="true">
           <template v-slot:activator="{ props }">
             <v-btn variant="plain" v-bind="props" style="min-width: auto; padding: 0; margin-right: 4px;">
+              <div :style="{color:branding.colors.onSurface}">
               <v-icon>mdi-dots-vertical</v-icon>
+             </div>
             </v-btn>
           </template>
           <v-list>
@@ -91,7 +93,7 @@ function hexToRgb(hex) {
     </div>
 
    
-    <div class="capitalize p-2">{{ props.content.title }}</div>
+    <div class="capitalize p-2" :style="{color:branding.colors.onSurface}">{{ props.content.title }}</div>
   </div>
 
   <!-- Delete Dialog -->
diff --git a/src/views/creators/CreatorHome.vue b/src/views/creators/CreatorHome.vue
index c8e1abf..54e5a69 100644
--- a/src/views/creators/CreatorHome.vue
+++ b/src/views/creators/CreatorHome.vue
@@ -4,17 +4,9 @@
     <div class="px-4"
          :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary}">
       <h1>TEST</h1>
-
-      <p>MODE: {{ envv }}</p>
-      <p>VITE_API_URL: {{ enva }}</p>
-      <p>VITE_STRIPE_API_KEY: {{ envb }}</p>
-
-      <donation-button :creator-id="creatorId"
-                       :creator-name="creatorName"
-                       :on-success-url="successUrl"
-                       :on-cancelled-url="cancelledUrl"
-      ></donation-button>
     </div>
+    
+    
 
   </div>
 
@@ -38,6 +30,7 @@ const brandingStore = useBrandingStore()
 const envv = import.meta.env.MODE
 const enva = import.meta.env.VITE_API_URL
 const envb = import.meta.env.VITE_STRIPE_API_KEY
+const tinymceScriptSrc = '/tinymce/js/tinymce/tinymce.min.js';
 
 const creatorId = computed(() => brandingStore.value.id)
 const creatorName = computed(() => brandingStore.value.name)