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

Adds ChangeBanner for Creators

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-08-05 16:34:09 -04:00
parent 743bfea56e
commit bd30b58463
5 changed files with 140 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/stores/userStore.js
View File

@@ -52,26 +52,5 @@ export const useUserStore = defineStore(
} }
} }
async function updateCurrentUser(userModel, profilePicture) {
const client = useClient()
await client.patch("/api/UpdateMyUser/profile", userModel)
if (typeof userModel.storedDataUrls.profilePictureUrl !== "object") {
const haveNewProfilePicture = profilePicture !== null && profilePicture.size !== 0;
const updateProfilePictureEndpoint = haveNewProfilePicture ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${userModel.storedDataUrls.profilePictureUrl}`;
const response = await client.post(updateProfilePictureEndpoint, profilePicture, {
headers: {
'Content-Type': profilePicture?.type ?? "application/octet-stream",
}
});
if (haveNewProfilePicture) {
this.user.value.portraitUrl = response.data;
}
}
this.user.value = userModel;
}
return {user, creator, alias, portraitUrl} return {user, creator, alias, portraitUrl}
}) })

103
src/views/Profile/Dialogs/PageInformations/BannerPicker.vue
View File

@@ -1,73 +1,68 @@
<template> <template>
<div class="p-4"> <h2 class="text-2xl font-semibold mb-4 flex justify-center">
Bannière
</h2>
<h2 class="text-2xl font-semibold mb-4 flex justify-center">Sélectionne ta bannière</h2>
<div class="mb-5">
<img <img
@click="openModal('BannerPicker')" :src="fileUrl"
src="/images/hutopymedia/banners/tutorialbanner.png" class="mb-5 w-full transition duration-200 ease-in-out transform"
class="w-full transition duration-200 ease-in-out transform" alt="Aperçu de la bannière"
alt="Tutorial Banner"
> >
</div>
<v-file-input <v-file-input
v-model="selectedFile"
variant="outlined" variant="outlined"
accept="image/*" accept="image/*"
label="File input" label="Votre bannière"
@change="onFileSelected"
></v-file-input> ></v-file-input>
<div class="flex justify-end space-x-4"> <div class="flex justify-end space-x-4">
<v-btn variant="plain" color="black">Annuler</v-btn> <v-btn color="black" variant="text">Annuler</v-btn>
<v-btn color="#A6147D">Enregistrer</v-btn> <v-btn color="#A6147D" @click="publish">Enregistrer</v-btn>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import {ref} from 'vue'
import {useClient} from '@/plugins/api.js'
const bannerUrl = ref(null); const props = defineProps({
creator: {
const onFileChange = (event) => { required: true
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (e) => {
bannerUrl.value = e.target.result;
};
reader.readAsDataURL(file);
} else {
alert('Veuillez sélectionner une image.');
} }
}; })
</script>
<style scoped> const selectedFile = ref("")
.p-4 { const fileUrl = ref(props.creator.storedDataUrls.bannerPictureUrl)
padding: 1rem;
const onFileSelected = () => {
if (selectedFile.value) {
const reader = new FileReader()
reader.onload = (event) => {
fileUrl.value = event.target.result
}
reader.readAsDataURL(selectedFile.value)
} else {
fileUrl.value = null
}
} }
.mb-4 {
margin-bottom: 1rem; const client = useClient()
const publish = async () => {
try {
const formData = new FormData();
formData.append('file', selectedFile.value)
await client.post(
`/api/creators/${props.creator.id}/banner`,
formData)
props.creator.storedDataUrls.bannerPictureUrl = fileUrl
} catch (error) {
console.error(error)
}
} }
.mt-4 {
margin-top: 1rem; </script>
}
.text-lg {
font-size: 1.125rem;
}
.font-semibold {
font-weight: 600;
}
.w-full {
width: 100%;
}
.h-auto {
height: auto;
}
.rounded {
border-radius: 0.25rem;
}
.shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>

125
src/views/Profile/PageInformations.vue
View File

@@ -1,6 +1,56 @@
<template> <script setup>
import {ref} from 'vue';
import ModalFacebook from '@/views/Profile/Dialogs/PageInformations/ModalFacebook.vue';
import ModalInstagram from '@/views/Profile/Dialogs/PageInformations/ModalInstagram.vue';
import ModalLinkedIn from '@/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue';
import ModalReddit from '@/views/Profile/Dialogs/PageInformations/ModalReddit.vue';
import ModalTikTok from '@/views/Profile/Dialogs/PageInformations/ModalTikTok.vue';
import ModalWebsite from '@/views/Profile/Dialogs/PageInformations/ModalWebsite.vue';
import ModalX from '@/views/Profile/Dialogs/PageInformations/ModalX.vue';
import ModalYoutube from '@/views/Profile/Dialogs/PageInformations/ModalYoutube.vue';
import BannerPicker from '@/views/Profile/Dialogs/PageInformations/BannerPicker.vue';
import ColorTopBanner from '@/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue';
import ColorBottomBanner from "@/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue";
import ProfilePicturePicker from "@/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue";
import ColorBorder from "@/views/Profile/Dialogs/PageInformations/ColorBorder.vue";
import ColorMenu from "@/views/Profile/Dialogs/PageInformations/ColorMenu.vue";
import {useUserStore} from "@/stores/userStore.js";
const userStore = useUserStore()
const dialog = ref(false);
const currentComponent = ref('');
const componentsMap = {
ModalFacebook,
ModalInstagram,
ModalLinkedIn,
ModalReddit,
ModalTikTok,
ModalWebsite,
ModalX,
ModalYoutube,
BannerPicker,
ColorTopBanner,
ColorBottomBanner,
ProfilePicturePicker,
ColorBorder,
ColorMenu
};
const openModal = (component) => {
currentComponent.value = componentsMap[component];
dialog.value = true;
};
</script>
<template>
<div class="flex flex-col items-center w-full"> <div class="flex flex-col items-center w-full">
<h1 class="uppercase pb-5 text-2xl"> <v-icon class="mr-2">mdi-file-edit-outline</v-icon> Informations de votre page</h1> <h1 class="uppercase pb-5 text-2xl">
<v-icon class="mr-2">mdi-file-edit-outline</v-icon>
Informations de votre page
</h1>
<div class="border rounded-2xl w-full max-w-[800px]"> <div class="border rounded-2xl w-full max-w-[800px]">
<div class="py-5 uppercase ml-4">Bannière et image de profil</div> <div class="py-5 uppercase ml-4">Bannière et image de profil</div>
@@ -12,16 +62,15 @@
<v-icon>mdi-eyedropper-variant</v-icon> <v-icon>mdi-eyedropper-variant</v-icon>
</button> </button>
<button > <button>
<img <img
@click="openModal('BannerPicker')" @click="openModal('BannerPicker')"
src="/images/hutopymedia/banners/tutorialbanner.png" :src="userStore.creator.storedDataUrls.bannerPictureUrl"
class="w-full transition duration-200 ease-in-out transform hover:brightness-125" class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
alt="Tutorial Banner" alt="Tutorial Banner"
> >
</button> </button>
<button <button
@click="openModal('ColorBottomBanner')" @click="openModal('ColorBottomBanner')"
class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5 hover:brightness-150"> class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5 hover:brightness-150">
@@ -86,7 +135,8 @@
<button <button
@click="openModal('ModalX')" @click="openModal('ModalX')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
<span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/xblack.png" class="w-5 h-5" ></span> <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/xblack.png"
class="w-5 h-5"></span>
<span class="flex-auto text-left pr-6">X</span> <span class="flex-auto text-left pr-6">X</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
@@ -106,7 +156,8 @@
<button <button
@click="openModal('ModalTikTok')" @click="openModal('ModalTikTok')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full "> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
<span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/externals/tiktok-black.png" class="w-5 h-5" ></span> <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/externals/tiktok-black.png"
class="w-5 h-5"></span>
<span class="flex-auto text-left pr-6">TikTok</span> <span class="flex-auto text-left pr-6">TikTok</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
@@ -151,75 +202,25 @@
<!-- Modal --> <!-- Modal -->
<v-dialog v-model="dialog" max-width="600px"> <v-dialog v-model="dialog" max-width="600px">
<v-card> <v-card>
<v-card-title>
<v-spacer></v-spacer>
</v-card-title>
<v-card-text> <v-card-text>
<component :is="currentComponent"></component> <component :is="currentComponent" :creator="userStore.creator"></component>
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-dialog> </v-dialog>
</template> </template>
<script setup>
import { ref } from 'vue';
import ModalFacebook from '@/views/Profile/Dialogs/PageInformations/ModalFacebook.vue';
import ModalInstagram from '@/views/Profile/Dialogs/PageInformations/ModalInstagram.vue';
import ModalLinkedIn from '@/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue';
import ModalReddit from '@/views/Profile/Dialogs/PageInformations/ModalReddit.vue';
import ModalTikTok from '@/views/Profile/Dialogs/PageInformations/ModalTikTok.vue';
import ModalWebsite from '@/views/Profile/Dialogs/PageInformations/ModalWebsite.vue';
import ModalX from '@/views/Profile/Dialogs/PageInformations/ModalX.vue';
import ModalYoutube from '@/views/Profile/Dialogs/PageInformations/ModalYoutube.vue';
import BannerPicker from '@/views/Profile/Dialogs/PageInformations/BannerPicker.vue';
import ColorTopBanner from '@/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue';
import ColorBottomBanner from "@/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue";
import ProfilePicturePicker from "@/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue";
import ColorBorder from "@/views/Profile/Dialogs/PageInformations/ColorBorder.vue";
import ColorMenu from "@/views/Profile/Dialogs/PageInformations/ColorMenu.vue";
const dialog = ref(false);
const currentComponent = ref('');
const componentsMap = {
ModalFacebook,
ModalInstagram,
ModalLinkedIn,
ModalReddit,
ModalTikTok,
ModalWebsite,
ModalX,
ModalYoutube,
BannerPicker,
ColorTopBanner,
ColorBottomBanner,
ProfilePicturePicker,
ColorBorder,
ColorMenu
};
const openModal = (component) => {
currentComponent.value = componentsMap[component];
dialog.value = true;
};
</script>
<style> <style>
.HoverBtn:hover { .HoverBtn:hover {
@apply bg-[#A6147D] text-white; @apply bg-[#A6147D] text-white;
@apply hover:opacity-90; /* Réduire l'opacité au survol */ @apply hover:opacity-90;
/* Réduire l'opacité au survol */
} }
.HoverBtnpicture:hover { .HoverBtnpicture:hover {
@apply bg-[#A6147D] text-white; @apply bg-[#A6147D] text-white;
@apply hover:opacity-90; /* Réduire l'opacité au survol */ @apply hover:opacity-90;
/* Réduire l'opacité au survol */
} }
.custom-border { .custom-border {

19
src/views/contents/PostContent.vue
View File

@@ -10,11 +10,11 @@
<v-form> <v-form>
<v-file-input <v-file-input
v-model="selectedFile" v-model="selectedFile"
label="Select Image" label="Choisisez votre contenu"
accept="image/*" accept="image/*"
prepend-icon="mdi-camera" prepend-icon="mdi-camera"
@change="onFileSelected"> @change="onFileSelected"
</v-file-input> ></v-file-input>
<v-img <v-img
v-if="url" v-if="url"
@@ -66,14 +66,14 @@ const props = defineProps({
type: String, type: String,
required: true required: true
} }
}); })
const client = useClient(); const client = useClient()
const selectedFile = ref(""); const selectedFile = ref("")
const url = ref(""); const url = ref("")
const title = ref(""); const title = ref("")
const description = ref(""); const description = ref("")
const onFileSelected = () => { const onFileSelected = () => {
if (selectedFile.value) { if (selectedFile.value) {
@@ -99,7 +99,6 @@ const publish = async () => {
} else { } else {
console.error(`Failed to create content ${response.data}`) console.error(`Failed to create content ${response.data}`)
} }
} }

3
src/views/contents/PublishContentButton.vue
View File

@@ -29,7 +29,7 @@ async function publishPost() {
}); });
try { try {
const response = await client.post( await client.post(
`/api/contents/`, `/api/contents/`,
formData, formData,
{ {
@@ -38,7 +38,6 @@ async function publishPost() {
} }
}) })
console.log('Files uploaded successfully:', response.data);
closeDialog() closeDialog()
} catch (error) { } catch (error) {
console.error(error) console.error(error)