From 25c6305bcc08aeb87631b78f81bdb3e3cc53c3d7 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 24 Nov 2024 01:45:25 -0500
Subject: [PATCH] Thumbnail - wip

---
 src/views/contents/QuickyContentEditor.vue       |  6 ++++--
 src/views/contents/contentcards/NContentCard.vue | 15 ++++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/views/contents/QuickyContentEditor.vue b/src/views/contents/QuickyContentEditor.vue
index 2856212..d12aac7 100644
--- a/src/views/contents/QuickyContentEditor.vue
+++ b/src/views/contents/QuickyContentEditor.vue
@@ -27,7 +27,9 @@ async function publishPost() {
   formData.append('creatorId', creatorProfileStore.creator.id);
   formData.append('title', title.value);
   formData.append('description', message.value);
-  formData.append('thumbnail', Thumbnail);
+  if (Thumbnail.value) {
+    formData.append('thumbnail', Thumbnail.value); 
+  }
 
   files.value.forEach(file => {
     formData.append('files', file);
@@ -57,7 +59,7 @@ async function publishPost() {
     title.value = '';
     message.value = '';
     files.value = [];
-    Thumbnail.value = null;
+    Thumbnail.value = '';
     externalUrls.value = [];
   } catch (error) {
     console.error(error);
diff --git a/src/views/contents/contentcards/NContentCard.vue b/src/views/contents/contentcards/NContentCard.vue
index fe2ba61..15b8c64 100644
--- a/src/views/contents/contentcards/NContentCard.vue
+++ b/src/views/contents/contentcards/NContentCard.vue
@@ -17,6 +17,7 @@ const openDeleteConfirmationModal = ref(false);
 const emits = defineEmits(['content-deleted']);
 const contentId = computed(() => props.content.id);
 const creatorId = computed(() => props.content.createdBy);
+const Thumbnail = computed(() => props.content.thumbnailUrl);
 const branding = useBrandingStore();
 const authStore = useAuthStore();
 const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value);
@@ -59,6 +60,8 @@ function hexToRgb(hex) {
 </style>
 
 <template>
+
+
   <div class="shadow-md rounded-md bg-gray-50 border custom-border w-52 h-[300px]"
        :style="{
          backgroundColor: branding.colors.surface,
@@ -66,11 +69,13 @@ function hexToRgb(hex) {
          borderColor: `rgba(${hexToRgb(branding.colors.secondary)}, 0.4)`,
          borderWidth: '1px',
        }">
-
-   
-    <img v-if="props.content.urls[0]" :src="props.content.urls[0]" class="rounded-t-md w-[260px] h-[160px] object-cover cursor-pointer"
-         alt="Image Content" @click="redirectToContent" />
-
+    
+    <img
+        v-if="props.content.thumbnailUrl"
+        :src="props.content.thumbnailUrl.replace(/[{}]/g, '')"
+        class="rounded-t-md w-[260px] h-[160px] object-cover cursor-pointer"
+        alt="Image Content"
+        @click="redirectToContent" />
 
     <div class="p-1">
       <div class="flex flex-row justify-between items-center">