jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

I added the button and the modal to create a post in a new .vue file to better organize everything.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-07-13 18:20:47 -04:00
committed by Jonathan Bourdon
parent c069753d1b
commit 7794f126d0
3 changed files with 116 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/views/creators/CreatePostButton.vue Normal file
View File

@@ -0,0 +1,80 @@
<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"
@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>

83
src/views/creators/CreatorBanner.vue
View File

@@ -1,7 +1,6 @@
<template>
<seize-indicator></seize-indicator>
<!-- Bannière-->
<div class="relative bottom-4 z-20 m">
<div class="relative flex flex-col">
@@ -19,8 +18,6 @@
</a>
</div>
</div>
</div>
<!--Banner & user info-->
@@ -62,11 +59,7 @@
<!-- Buttons -->
<div class="flex flex-wrap items-center justify-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4 ml-">
<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"
@click="isDialogActive = true">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
</button>
<CreatePostButton :creator="creator" />
<button class="text-white py-2 px-4 rounded"
style="background-color: #333; transition: background-color 0.3s ease;"
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
@@ -81,89 +74,17 @@
</div>
</div>
</div>
<!--Post-modale-->
<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>
</template>
<script setup>
import CreatePostButton from "@/views/creators/CreatePostButton.vue";
import {defineProps, ref} from "vue";
import {useUserStore} from "@/stores/user.js";
import SeizeIndicator from "@/views/tools/SeizeIndicator.vue";
import AboutYou from "@/views/creators/AboutYou.vue";
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;
};
function GetActiveSocialNetworkUrls(){
const socialNetworks = [];

7
src/views/creators/CreatorPage.vue
View File

@@ -2,15 +2,11 @@
<div v-if="creator && creator.id">
<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">
@@ -42,6 +38,7 @@
</v-card-text>
</div>
</div>
</div>
<!-- Fallback when user try to access a non-existing creator -->
@@ -69,6 +66,8 @@ 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();