Adding messaging / content

This commit is contained in:
Jonathan Bourdon
2024-07-18 20:50:15 -04:00
parent 17ba6449af
commit e71d02c45b
10 changed files with 201 additions and 144 deletions

View File

@@ -1,80 +0,0 @@
<template>
<div>
<button v-if="creator.id === userStore.getCurrentUser().id"
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4"
@click="isDialogActive = true">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
</button>
<v-dialog v-model="isDialogActive" max-width="500">
<template v-slot:default="{ isActive }">
<v-card class="text-center rounded-xl">
<div class="text-white p-4 rounded-t" :style="{backgroundColor: creator.profileColors.menu || '#A30E79'}">
<h2>Publication</h2>
</div>
<v-card-text class="bg">
<v-row class="justify-center mb-4">
<v-col class="d-flex align-center justify-end">
<v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
</v-col>
<v-col class="d-flex align-center justify-start">
<v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
</v-col>
</v-row>
<v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
<v-file-input
label="Ajoutez des fichiers"
v-model="files"
outlined
multiple
dropzone
placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
></v-file-input>
</v-card-text>
<v-card-actions class="justify-end">
<v-btn color="primary" @click="publishPost">Publier</v-btn>
<v-btn color="primary" @click="cancelPost">Annuler</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</div>
</template>
<script setup>
import { defineProps, ref } from 'vue';
import { useUserStore } from '@/stores/user.js';
const props = defineProps({
creator: { type: Object, required: true },
});
const userStore = useUserStore();
const isDialogActive = ref(false);
const message = ref('');
const files = ref([]);
const isArticle = ref(false);
const publishPost = () => {
// Logic to publish post
console.log('Post published:', message.value, files.value);
isDialogActive.value = false;
resetPostForm();
};
const cancelPost = () => {
isDialogActive.value = false;
resetPostForm();
};
const resetPostForm = () => {
message.value = '';
files.value = [];
};
const togglePostType = (article) => {
isArticle.value = article;
};
</script>

View File

@@ -81,7 +81,7 @@
</template>
<script setup>
import CreatePostButton from "@/views/creators/CreatePostButton.vue";
import CreatePostButton from "@/views/contents/CreatePostButton.vue";
import {defineProps, ref} from "vue";
import SeizeIndicator from "@/views/tools/SeizeIndicator.vue";
import AboutYou from "@/views/creators/AboutYou.vue";

View File

@@ -4,38 +4,10 @@
<creator-banner :creator="creator"></creator-banner>
<DonationPopup :creator-id="creator.id"></DonationPopup>
<div class="max-w-[1000px] mx-auto flex flex-row justify-center border-l-2 border-r-2 -mt-6 ">
<div class="w-full mt-20">
<v-card-text>
<v-tabs-window v-model="tab">
<v-tabs-window-item value="content">
<div class="w-full h-full p-6">
<ContentList v-if="creator.id"
:creator-id="creator.id">
</ContentList>
</div>
</v-tabs-window-item>
<v-tabs-window-item value="community">
<div>
<div class="border-b-2 p-6">
<PostMessage v-if="creator.id"
:content-id="creator.id">
</PostMessage>
</div>
<div class="border-b p-6">
<h2 class="font-sans font-semibold">Commentaires</h2>
<MessageList v-if="creator.id"
:content-id="creator.id">
</MessageList>
</div>
</div>
</v-tabs-window-item>
</v-tabs-window>
</v-card-text>
<div class="max-w-[800px] mx-auto flex flex-row justify-center border-l-2 border-r-2 -mt-6 ">
<div class="w-full mt-20 h-full">
<ContentList :creator-id="creator.id">
</ContentList>
</div>
</div>
@@ -66,8 +38,6 @@ import MessageList from "@/views/messages/MessageList.vue";
import ContentList from "@/views/contents/ContentList.vue";
import PostMessage from "@/views/messages/PostMessage.vue";
import DonationPopup from "@/views/main/DonationPopup.vue";
import CreatorFeed from "@/views/main/CreatorFeed.vue";
import CreatePostButton from "@/views/creators/CreatePostButton.vue";
const client = useClient();
const route = useRoute();