social-media/src/views/contents/contentcards/NContentCard.vue

<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>{{$t('contentCard.edit')}}</v-list-item-title>
              </v-list-item>
              <v-list-item v-if="creatorIsCurrentUser" @click="openDeleteConfirmationDialog">
                <v-list-item-title>{{$t('contentCard.delete')}}</v-list-item-title>
              </v-list-item>
              <v-list-item @click="reportContent">
                <v-list-item-title>{{$t('contentCard.report')}}</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="max-w-[800px]"
            @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">
        <Reaction :content="content"></Reaction>

        <v-btn
            :class="{'comment-active': hasMessages}"
            icon="true"
            variant="plain"
            @click="toggleComments">
          <v-icon>mdi-comment-outline</v-icon>
          {{ messageCount }}
        </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">{{ $t('contentCard.commenttitle') }}</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">
            {{$t('contentCard.deletecontenttitle')}}
          </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">
          {{$t('contentCard.deeletecontentwarning')}}
        </div>

        <div class="py-2 space-x-3">
          <v-btn variant="flat"
                 @click="deleteContent()" class=" mt-5">
            {{$t('general.yes')}}
          </v-btn>
          <v-btn variant="outlined"
                 @click="openDeleteConfirmationModal = false" class=" mt-5">
            {{$t('general.no')}}
          </v-btn>
        </div>
      </v-card>
    </v-form>
  </v-dialog>
</template>

<script setup>
import {computed, onBeforeMount, 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";
import Reaction from "@/views/contents/Reaction.vue";
import {useMessageStore} from "@/stores/messageStore.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 messageStore = useMessageStore();
const messageCount = ref(0);
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);


onBeforeMount(async () => {
  messageCount.value = await messageStore.fetchMessageCount(contentId.value)
})

function openDeleteConfirmationDialog() {
  openDeleteConfirmationModal.value = true;
}

function addMessage(newMessage) {
  messages.value.unshift(newMessage);
  messagesVisible.value = true;
}

function toggleComments() {
  messagesVisible.value = !messagesVisible.value;
}

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>


.custom-border {
  border-color: #EAEBEC;
}

.hidden {
  display: none;
}

.comment-active .v-icon {
  color: #D63DAB;
}
</style>