From d03a9d24e178606178566c95abbf922003afb931 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 19 Aug 2024 18:48:54 -0400
Subject: [PATCH] Update Cards UI

---
 src/views/contents/ContentList.vue            |  27 +-
 .../contents/contentcards/NContentCard.vue    | 257 +++++++++++++++++
 .../contents/contentcards/SmContentCard.vue   | 265 ++++++++++++++++++
 src/views/creators/CreatorBanner.vue          |   2 +-
 src/views/creators/CreatorPage.vue            |   2 +-
 .../banner/bannerlower/BannerActionsLg.vue    |   2 +-
 .../banner/bannerlower/BannerActionsXl.vue    |   2 +-
 7 files changed, 542 insertions(+), 15 deletions(-)
 create mode 100644 src/views/contents/contentcards/NContentCard.vue
 create mode 100644 src/views/contents/contentcards/SmContentCard.vue

diff --git a/src/views/contents/ContentList.vue b/src/views/contents/ContentList.vue
index 9058ce2..fc63d23 100644
--- a/src/views/contents/ContentList.vue
+++ b/src/views/contents/ContentList.vue
@@ -2,12 +2,18 @@
 
   <v-infinite-scroll :items="contents"
                      :onLoad="fetchContents"
-                     class="gap-2">
+                     class="md:gap-2">
 
-    <template v-for="content in contents" :key="content">
-      <content-card :content="content"               
-                    @content-deleted="onContentDeleted"
-      ></content-card>
+    <template v-for="content in contents" :key="content.id">
+
+      <div class="d-sm-none mb-1">
+        <content-card-sm :content="content" @content-deleted="onContentDeleted"></content-card-sm>
+      </div>
+
+     
+      <div class="d-none d-sm-flex">
+        <content-card-normal :content="content" @content-deleted="onContentDeleted"></content-card-normal>
+      </div>
     </template>
 
     <template v-slot:empty>
@@ -22,11 +28,12 @@
 
 </template>
 
-<script setup>
 
+<script setup>
 import {useClient} from '@/plugins/api.js';
 import {ref, watch} from 'vue';
-import ContentCard from "./ContentCard.vue";
+import ContentCardNormal from "@/views/contents/contentcards/NContentCard.vue";
+import ContentCardSm from "@/views/contents/contentcards/SmContentCard.vue";
 
 const props = defineProps({
   creatorId: {
@@ -52,10 +59,8 @@ const creatorIdWatcher = watch(
     () => props.creatorId,
     (newCreatorId) => {
       if (newCreatorId) {
-        // Reset contents and last_id when the creatorId changes
         contents.value = []
         last_id = null
-        // Fetch contents for the new creator
         fetchContents({
           done: () => {
           }
@@ -65,7 +70,7 @@ const creatorIdWatcher = watch(
 
 async function fetchContents({done, page_size = 10}) {
   if (props.creatorId == null) return
-  
+
   try {
     let uri = `/api/contents/creator/${props.creatorId}?page_size=${page_size}`
     if (last_id !== null) uri = uri + `&last_id=${last_id}`
@@ -94,4 +99,4 @@ async function fetchContents({done, page_size = 10}) {
   }
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/contents/contentcards/NContentCard.vue b/src/views/contents/contentcards/NContentCard.vue
new file mode 100644
index 0000000..914ca10
--- /dev/null
+++ b/src/views/contents/contentcards/NContentCard.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="shadow-md rounded-2xl bg-gray-50 border custom-border w-full mb-2 ">
+    <div>
+      <v-card-title>
+        <div class="flex flex-row justify-between items-center">
+          <div class="flex items-center">
+            <img
+                :src="props.content.createdByPortraitUrl"
+                alt="Profile Image"
+                class="rounded-full"
+                width="32px"
+                height="32px">
+            <div class="capitalize px-2">
+              {{ props.content.createdByName }}
+            </div>
+            <span class="text-subtitle-2 mt-1">
+              {{ time_ago(props.content.createdAt) }}
+            </span>
+          </div>
+
+          <v-menu>
+            <template v-slot:activator="{ props }">
+              <v-btn variant="plain" v-bind="props">
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item v-if="creatorIsCurrentUser" @click="editContent">
+                <v-list-item-title>Modifier le contenu</v-list-item-title>
+              </v-list-item>
+              <v-list-item v-if="creatorIsCurrentUser" @click="openDeleteConfirmationDialog">
+                <v-list-item-title>Effacer le contenu</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="reportContent">
+                <v-list-item-title>Reporter le contenu</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
+        <div class="uppercase">
+          {{ props.content.title }}
+        </div>
+        <div>
+          {{ props.content.description }}
+        </div>
+      </v-card-title>
+
+      <v-carousel
+          hide-delimiters
+          v-if="hasUrls"
+          :show-arrows="props.content.urls.length > 1"
+          :show-indicators="props.content.urls.length > 1"
+      >
+        <v-carousel-item
+            v-for="url in props.content.urls"
+            :key="url"
+            class="image-container"
+            @click="redirectToContent"
+        >
+          <component :is="getComponent(url)" :src="url"></component>
+        </v-carousel-item>
+      </v-carousel>
+    </div>
+
+    <div class="px-4">
+      <div class="flex justify-around py-2">
+        <v-btn variant="plain" icon @click="likeContent">
+          <v-icon>mdi-thumb-up-outline</v-icon>
+        </v-btn>
+        <v-btn variant="plain" icon @click="dislikeContent">
+          <v-icon>mdi-thumb-down-outline</v-icon>
+        </v-btn>
+        <v-btn
+            :class="{'comment-active': hasMessages}"
+            variant="plain"
+            icon
+            @click="toggleComments">
+          <v-icon>mdi-comment-outline</v-icon>
+        </v-btn>
+
+        <donation-button :color-border="colorMenu"
+                         :color-accent="colorAccent"
+                         :creator-id="creatorId"
+                         :creator-name="creatorName"
+                         :creator-logo="creatorLogo"
+                         iconColorClass="text-black"
+        ></donation-button>
+
+      </div>
+
+      <div :class="{'hidden': !messagesVisible}">
+        <h2 class="font-sans font-semibold mt-2">Commentaires</h2>
+        <message-list
+            :subject-id="props.content.id"
+            :messages="messages"
+        ></message-list>
+
+      </div>
+
+      <div class="py-2">
+        <post-message :subject-id="props.content.id"
+                      @message-posted="addMessage"
+        ></post-message>
+      </div>
+    </div>
+  </div>
+
+
+  <v-dialog v-model="openDeleteConfirmationModal" max-width="500">
+    <v-form>
+      <v-card class="text-center rounded-xl"
+              :style="{ 
+                border: `2px solid  ` 
+              }">
+        <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
+          <div class="flex-1 text-center">
+            Supprimer ce contenu ?
+          </div>
+
+          <v-btn icon @click="openDeleteConfirmationModal = false" class="ml-auto mr-2" variant="text">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+
+        </div>
+
+        <div class=" mr-2">
+          Êtes-vous sûr de vouloir supprimer le contenu ?
+        </div>
+
+        <div class="py-2 space-x-3">
+          <v-btn variant="flat"
+                 @click="deleteContent()" class=" mt-5">
+            Oui
+          </v-btn>
+          <v-btn variant="outlined"
+                 @click="openDeleteConfirmationModal = false" class=" mt-5">
+            Non
+          </v-btn>
+        </div>
+      </v-card>
+    </v-form>
+  </v-dialog>
+</template>
+
+<script setup>
+import {computed, ref} from 'vue';
+import {time_ago} from "@/internal_time_ago.js";
+import MessageList from "@/views/messages/MessageList.vue";
+import PostMessage from "@/views/messages/PostMessage.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
+import YoutubePlayer from '../YoutubePlayer.vue';
+import ImageViewer from '../ImageViewer.vue';
+import {useClient} from "@/plugins/api.js";
+import {useAuthStore} from "@/stores/authStore.js";
+
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true,
+  }
+});
+
+const openDeleteConfirmationModal = ref(false);
+const emits = defineEmits(['content-deleted'])
+
+const contentId = computed(() => props.content.id)
+const creatorId = computed(() => props.content.createdBy)
+const creatorName = computed(() => props.content.createdByName)
+const creatorLogo = computed(() => props.content.createdByPortraitUrl)
+const colorMenu = computed(() => props.content.colorMenu)
+const colorAccent = computed(() => props.content.colorAccent)
+
+const authStore = useAuthStore()
+const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value)
+
+const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
+const messagesVisible = ref(false);
+const messages = ref([]);
+const hasMessages = computed(() => messages.value.length > 0)
+
+function openDeleteConfirmationDialog() {
+  openDeleteConfirmationModal.value = true;
+}
+
+function addMessage(newMessage) {
+  messages.value.unshift(newMessage);
+  messagesVisible.value = true;
+}
+
+function toggleComments() {
+  messagesVisible.value = !messagesVisible.value;
+}
+
+function likeContent() {
+  console.log('Content liked');
+}
+
+function dislikeContent() {
+  console.log('Content disliked');
+}
+
+function getComponent(url) {
+  if (url.includes('youtube.com') || url.includes('youtu.be')) {
+    return YoutubePlayer;
+  } else if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
+    return ImageViewer;
+  }
+}
+
+function editContent() {
+  console.log('Modifier le contenu');
+}
+
+async function deleteContent() {
+  const client = useClient()
+  const response = await client.delete(`/api/contents/${contentId.value}`)
+  if (response.status >= 200 && response.status < 300) {
+    emits('content-deleted', contentId.value)
+  }
+}
+
+function reportContent() {
+  console.log('Reporter le contenu');
+}
+
+function redirectToContent() {
+  window.location.href = `/content/${props.content.id}`;
+}
+</script>
+
+<style>
+.image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.custom-border {
+  border-color: #EAEBEC;
+}
+
+.hidden {
+  display: none;
+}
+
+.comment-active .v-icon {
+  color: #D63DAB;
+}
+</style>
diff --git a/src/views/contents/contentcards/SmContentCard.vue b/src/views/contents/contentcards/SmContentCard.vue
new file mode 100644
index 0000000..e869264
--- /dev/null
+++ b/src/views/contents/contentcards/SmContentCard.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="shadow-md bg-gray-50">
+    <div>
+      <v-card-title>
+        <div class="flex flex-row justify-between items-center">
+          <div class="flex items-center">
+            <img
+                :src="props.content.createdByPortraitUrl"
+                alt="Profile Image"
+                class="rounded-full"
+                width="32px"
+                height="32px">
+            <div class="capitalize px-2">
+              {{ props.content.createdByName }}
+            </div>
+            <span class="text-subtitle-2">
+              {{ time_ago(props.content.createdAt) }}
+            </span>
+          </div>
+
+          <v-menu>
+            <template v-slot:activator="{ props }">
+              <v-btn variant="plain" v-bind="props">
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item v-if="creatorIsCurrentUser" @click="editContent">
+                <v-list-item-title>Modifier le contenu</v-list-item-title>
+              </v-list-item>
+              <v-list-item v-if="creatorIsCurrentUser" @click="openDeleteConfirmationDialog">
+                <v-list-item-title>Effacer le contenu</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="reportContent">
+                <v-list-item-title>Reporter le contenu</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
+        <div class="uppercase">
+          {{ props.content.title }}
+        </div>
+        <div>
+          {{ props.content.description }}
+        </div>
+      </v-card-title>
+
+      <v-carousel
+          hide-delimiters
+          v-if="hasUrls"
+          :show-arrows="props.content.urls.length > 1"
+          :show-indicators="props.content.urls.length > 1"
+      >
+        <v-carousel-item
+            v-for="url in props.content.urls"
+            :key="url"
+            class="image-container"
+            @click="redirectToContent"
+        >
+          <component :is="getComponent(url)" :src="url"></component>
+        </v-carousel-item>
+      </v-carousel>
+    </div>
+
+    <div class="px-1">
+      <div class="flex justify-around ">
+        <v-btn variant="plain" icon @click="likeContent">
+          <v-icon>mdi-thumb-up-outline</v-icon>
+        </v-btn>
+        <v-btn variant="plain" icon @click="dislikeContent">
+          <v-icon>mdi-thumb-down-outline</v-icon>
+        </v-btn>
+        <v-btn
+            :class="{'comment-active': hasMessages}"
+            variant="plain"
+            icon
+            @click="toggleComments">
+          <v-icon>mdi-comment-outline</v-icon>
+        </v-btn>
+
+        <donation-button :color-border="colorMenu"
+                         :color-accent="colorAccent"
+                         :creator-id="creatorId"
+                         :creator-name="creatorName"
+                         :creator-logo="creatorLogo"
+                         iconColorClass="text-black"
+        ></donation-button>
+
+      </div>
+
+      <div :class="{'hidden': !messagesVisible}">
+        <h2 class="font-sans font-semibold ">Commentaires</h2>
+        <message-list
+            :subject-id="props.content.id"
+            :messages="messages"
+        ></message-list>
+
+      </div>
+
+      <div class="py-1">
+        <post-message :subject-id="props.content.id"
+                      @message-posted="addMessage"
+        ></post-message>
+      </div>
+    </div>
+  </div>
+
+
+  <v-dialog v-model="openDeleteConfirmationModal" max-width="500">
+    <v-form>
+      <v-card class="text-center rounded-xl"
+              :style="{ 
+                border: `2px solid  ` 
+              }">
+        <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
+          <div class="flex-1 text-center">
+            Supprimer ce contenu ?
+          </div>
+
+          <v-btn icon @click="openDeleteConfirmationModal = false" class="ml-auto mr-2" variant="text">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+
+        </div>
+
+        <div class=" mr-2">
+          Êtes-vous sûr de vouloir supprimer le contenu ?
+        </div>
+
+        <div class="py-2 space-x-3">
+          <v-btn variant="flat"
+                 @click="deleteContent()" class=" mt-5">
+            Oui
+          </v-btn>
+          <v-btn variant="outlined"
+                 @click="openDeleteConfirmationModal = false" class=" mt-5">
+            Non
+          </v-btn>
+        </div>
+      </v-card>
+    </v-form>
+  </v-dialog>
+</template>
+
+<script setup>
+import {computed, ref} from 'vue';
+import {time_ago} from "@/internal_time_ago.js";
+import MessageList from "@/views/messages/MessageList.vue";
+import PostMessage from "@/views/messages/PostMessage.vue";
+import DonationButton from "@/views/creators/DonationButton.vue";
+import YoutubePlayer from '../YoutubePlayer.vue';
+import ImageViewer from '../ImageViewer.vue';
+import {useClient} from "@/plugins/api.js";
+import {useAuthStore} from "@/stores/authStore.js";
+
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true,
+  }
+});
+
+const openDeleteConfirmationModal = ref(false);
+const emits = defineEmits(['content-deleted'])
+
+const contentId = computed(() => props.content.id)
+const creatorId = computed(() => props.content.createdBy)
+const creatorName = computed(() => props.content.createdByName)
+const creatorLogo = computed(() => props.content.createdByPortraitUrl)
+const colorMenu = computed(() => props.content.colorMenu)
+const colorAccent = computed(() => props.content.colorAccent)
+
+const authStore = useAuthStore()
+const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value)
+
+const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
+const messagesVisible = ref(false);
+const messages = ref([]);
+const hasMessages = computed(() => messages.value.length > 0)
+
+function openDeleteConfirmationDialog() {
+  openDeleteConfirmationModal.value = true;
+}
+
+function addMessage(newMessage) {
+  messages.value.unshift(newMessage);
+  messagesVisible.value = true;
+}
+
+function toggleComments() {
+  messagesVisible.value = !messagesVisible.value;
+}
+
+function likeContent() {
+  console.log('Content liked');
+}
+
+function dislikeContent() {
+  console.log('Content disliked');
+}
+
+function getComponent(url) {
+  if (url.includes('youtube.com') || url.includes('youtu.be')) {
+    return YoutubePlayer;
+  } else if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
+    return ImageViewer;
+  }
+}
+
+function editContent() {
+  console.log('Modifier le contenu');
+}
+
+async function deleteContent() {
+  const client = useClient()
+  const response = await client.delete(`/api/contents/${contentId.value}`)
+  if (response.status >= 200 && response.status < 300) {
+    emits('content-deleted', contentId.value)
+  }
+}
+
+function reportContent() {
+  console.log('Reporter le contenu');
+}
+
+function redirectToContent() {
+  window.location.href = `/content/${props.content.id}`;
+}
+</script>
+
+<style>
+.image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+  
+}
+
+.image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.custom-border {
+  border-color: #EAEBEC;
+}
+
+.hidden {
+  display: none;
+}
+
+.v-carousel-item {
+  padding: 0; /* Supprime tout padding interne */
+  margin: 0; /* Supprime toute marge interne */
+  width: 100vw; /* Assure que chaque item occupe toute la largeur de l'écran */
+}
+
+
+.comment-active .v-icon {
+  color: #D63DAB;
+}
+</style>
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 2cc68f2..9a14f08 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -7,7 +7,7 @@
         <div class="py-4 px-4 min-h-14 md:rounded-t-2xl"
              :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
 
-          <div class="w-full flex justify-end gap-14 ">
+          <div class="w-full flex justify-end gap-6 ">
             <a
                 v-for="socialNetwork in GetSocialsUrls()"
                 :href="socialNetwork.url"
diff --git a/src/views/creators/CreatorPage.vue b/src/views/creators/CreatorPage.vue
index e70ecc4..f3d448e 100644
--- a/src/views/creators/CreatorPage.vue
+++ b/src/views/creators/CreatorPage.vue
@@ -16,7 +16,7 @@
     </div>
   </div>
 
-  <!-- Fallback when user try to access a non-existing creator -->
+
   <div v-else>
     <div v-if="loading">
       <v-progress-linear indeterminate></v-progress-linear>
diff --git a/src/views/creators/banner/bannerlower/BannerActionsLg.vue b/src/views/creators/banner/bannerlower/BannerActionsLg.vue
index 0f32ff6..930e68f 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsLg.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsLg.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative w-full">
+  <div class="relative w-full mb-5">
     <div class="rounded-b-2xl"
          :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
       <div class="relative z-20">
diff --git a/src/views/creators/banner/bannerlower/BannerActionsXl.vue b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
index 0f32ff6..930e68f 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsXl.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative w-full">
+  <div class="relative w-full mb-5">
     <div class="rounded-b-2xl"
          :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
       <div class="relative z-20">