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

Added back stripePayment with the userId. Colors on the banner + accent on the profile picture and name

Browse Source
This commit is contained in:
Dominic Villemure
2024-07-05 00:11:11 -04:00
parent 5eccb68c2e
commit fb57d633df
3 changed files with 41 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/stores/user.js
View File

@@ -22,27 +22,30 @@ export const useUserStore = defineStore('user', () => {
this.user.value = myUserModel;
await client.patch("/api/UpdateMyUser/profile", myUserModel)
const updateProfilePictureEndpoint = profilePicture !== null && profilePicture.size !== 0 ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${myUserModel.storedDataUrls.profilePictureUrl}`;
this.user.value.storedDataUrls.profilePictureUrl = await client.post(updateProfilePictureEndpoint, profilePicture, {
headers: {
'Content-Type': 'application/octet-stream',
}
});
const updateBannerPictureEndpoint = bannerPicture !== null && bannerPicture.size !== 0 ? `/api/UpdateMyUser/banner-picture` : `/api/UpdateMyUser/banner-picture?url=${myUserModel.storedDataUrls.bannerPictureUrl}`;
this.user.value.storedDataUrls.bannerPictureUrl = await client.post(updateBannerPictureEndpoint, bannerPicture, {
headers: {
'Content-Type': 'application/octet-stream',
}
});
console.log(websiteIcon);
const updateWebsiteIconEndpoint = websiteIcon !== null && websiteIcon.size !== 0 ? `/api/UpdateMyUser/website-icon` : `/api/UpdateMyUser/website-icon?url=${myUserModel.storedDataUrls.websiteIconUrl}`;
this.user.value.storedDataUrls.websiteIconUrl = await client.post(updateWebsiteIconEndpoint, websiteIcon, {
headers: {
'Content-Type': 'application/octet-stream',
}
});
if (typeof myUserModel.storedDataUrls.profilePictureUrl !== "object") {
const updateProfilePictureEndpoint = profilePicture !== null && profilePicture.size !== 0 ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${myUserModel.storedDataUrls.profilePictureUrl}`;
this.user.value.storedDataUrls.profilePictureUrl = await client.post(updateProfilePictureEndpoint, profilePicture, {
headers: {
'Content-Type': 'application/octet-stream',
}
});
}
if (typeof myUserModel.storedDataUrls.bannerPictureUrl !== "object") {
const updateBannerPictureEndpoint = bannerPicture !== null && bannerPicture.size !== 0 ? `/api/UpdateMyUser/banner-picture` : `/api/UpdateMyUser/banner-picture?url=${myUserModel.storedDataUrls.bannerPictureUrl}`;
this.user.value.storedDataUrls.bannerPictureUrl = await client.post(updateBannerPictureEndpoint, bannerPicture, {
headers: {
'Content-Type': 'application/octet-stream',
}
});
}
if (typeof myUserModel.storedDataUrls.websiteIconUrl !== "object") {
const updateWebsiteIconEndpoint = websiteIcon !== null && websiteIcon.size !== 0 ? `/api/UpdateMyUser/website-icon` : `/api/UpdateMyUser/website-icon?url=${myUserModel.storedDataUrls.websiteIconUrl}`;
this.user.value.storedDataUrls.websiteIconUrl = await client.post(updateWebsiteIconEndpoint, websiteIcon, {
headers: {
'Content-Type': 'application/octet-stream',
}
});
}
}
return { user, getCurrentUser, setCurrentUser, updateCurrentUser }

7
src/views/main/Creator.vue
View File

@@ -20,8 +20,9 @@
<!-- </div>-->
<PostContentMenu></PostContentMenu>
<StripePayment :creator-id="user.id"></StripePayment>
<div class="flex flex-col items-center">
<div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
<PostCard v-for="post in posts"
@@ -47,6 +48,7 @@ import {onBeforeMount, ref} from "vue";
import {useClient} from "@/plugins/api.js";
import {useRoute} from "vue-router";
import CreatorBanner from "@/views/main/CreatorBanner.vue";
import StripePayment from "@/views/StripePayment.vue";
const client = useClient();
const route = useRoute();
@@ -56,7 +58,6 @@ const user = ref(null);
onBeforeMount(async() => {
const response = await client.get(`/api/Users?UserName=${route.params.creator}`)
user.value = response.data
console.log(response.data);
})
</script>

19
src/views/main/CreatorBanner.vue
View File

@@ -3,7 +3,7 @@
<div class="relative bottom-4 z-20 m">
<div class="relative flex flex-col">
<!-- Social Network-->
<div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24">
<div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24" :style="{ backgroundColor: user.profileColors.bannerTop }">
<div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
<div class="text-lg">1000+ Abonnés</div>
<div class="text-sm">500 Contacts en commun</div>
@@ -30,9 +30,15 @@
<!--User info -->
<div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
<div class="text-white">
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold"> {{ user.firstName}}</div>
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold"> {{ user.lastName }}</div>
<div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl"> {{ user.occupation }} </div>
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
<p :style="{ color: user.profileColors.accent }">{{ user.firstName }}</p>
</div>
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
<p :style="{ color: user.profileColors.accent }">{{ user.lastName }}</p>
</div>
<div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">
<p :style="{ color: user.profileColors.accent }">{{ user.occupation }}</p>
</div>
</div>
</div>
</div>
@@ -40,13 +46,14 @@
<!-- Actions Button & image profile -->
<div class="relative bottom-4 w-full">
<div class="bg-gray-800 py-4 relative shadow-lg" style="background-color: #24120E">
<div class="bg-gray-800 py-4 relative shadow-lg" :style="{ backgroundColor: user.profileColors.bannerBottom }">
<div class="flex flex-col sm:flex-row items-center sm:justify-between">
<img
class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
:src="user.storedDataUrls.profilePictureUrl"
alt="Profile Picture"
style="border-color: rgb(70, 37, 24); max-width: 250px; width: 100%;">
:style="{ borderColor: user.profileColors.accent, maxWidth: '250px', width: '100%' }"
>
<div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
<button
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"