Merged PR 94: Add profile stuff to creator page

src/stores/user.js

@@ -4,6 +4,7 @@ import MyUserModel from "@/models/myUserModel.js";
 
 export const useUserStore = defineStore('user', () => {
     const user = ref({});
+    const hasChanged = ref(false);
 
     function getCurrentUser() {
         return this.user.value;
@@ -12,6 +13,7 @@ export const useUserStore = defineStore('user', () => {
         try {
             const myUser = await client.get("/api/GetMyUser");
             this.user.value = MyUserModel.createFromApiResult(myUser.data);
+            this.hasChanged = false;
         } catch (e){
             this.user.value = MyUserModel.getDefaultUser();
             console.log("User not logged.")
@@ -19,26 +21,52 @@ export const useUserStore = defineStore('user', () => {
     }
 
     async function updateCurrentUser(client, myUserModel, profilePicture, bannerPicture, websiteIcon) {
-        this.user.value = myUserModel;
         await client.patch("/api/UpdateMyUser/profile", myUserModel)
-        
-        this.user.value.storedDataUrls.profilePictureUrl = await client.post("/api/UpdateMyUser/profile-picture", profilePicture, {
-            headers: {
-                'Content-Type': 'application/octet-stream',
-            }
-        });
 
-        this.user.value.storedDataUrls.bannerPictureUrl = await client.post("/api/UpdateMyUser/banner-picture", bannerPicture, {
-            headers: {
-                'Content-Type': 'application/octet-stream',
+        if (typeof myUserModel.storedDataUrls.profilePictureUrl !== "object") {
+            const haveNewProfilePicture = profilePicture !== null && profilePicture.size !== 0;
+            const updateProfilePictureEndpoint = haveNewProfilePicture ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${myUserModel.storedDataUrls.profilePictureUrl}`;
+            const response = await client.post(updateProfilePictureEndpoint, profilePicture, {
+                headers: {
+                    'Content-Type': 'application/octet-stream',
+                }
+            });
+            
+            if (haveNewProfilePicture) {
+                this.user.value.storedDataUrls.profilePictureUrl = response.data;
             }
-        });
+        }
+        if (typeof myUserModel.storedDataUrls.bannerPictureUrl !== "object") {
+            const haveNewBannerPicture = bannerPicture !== null && bannerPicture.size !== 0;
 
-        this.user.value.storedDataUrls.websiteIconUrl = await client.post("/api/UpdateMyUser/website-icon", websiteIcon, {
-            headers: {
-                'Content-Type': 'application/octet-stream',
+            const updateBannerPictureEndpoint = haveNewBannerPicture ? `/api/UpdateMyUser/banner-picture` : `/api/UpdateMyUser/banner-picture?url=${myUserModel.storedDataUrls.bannerPictureUrl}`;
+            const response = await client.post(updateBannerPictureEndpoint, bannerPicture, {
+                headers: {
+                    'Content-Type': 'application/octet-stream',
+                }
+            });
+            
+            if (haveNewBannerPicture) {
+                this.user.value.storedDataUrls.bannerPictureUrl = response.data;
             }
-        });
+        }
+        if (typeof myUserModel.storedDataUrls.websiteIconUrl !== "object") {
+            const haveNewWebsiteIcon = websiteIcon !== null && websiteIcon.size !== 0;
+
+            const updateWebsiteIconEndpoint = haveNewWebsiteIcon ? `/api/UpdateMyUser/website-icon` : `/api/UpdateMyUser/website-icon?url=${myUserModel.storedDataUrls.websiteIconUrl}`;
+            const response = await client.post(updateWebsiteIconEndpoint, websiteIcon, {
+                headers: {
+                    'Content-Type': 'application/octet-stream',
+                }
+            });
+            
+            if (haveNewWebsiteIcon) {
+                this.user.value.storedDataUrls.websiteIconUrl = response.data;
+            }
+        }
+
+        this.user.value = myUserModel;
+        this.hasChanged = true;
     }
 
     return { user, getCurrentUser, setCurrentUser, updateCurrentUser }

src/views/main/Creator.vue

@@ -1,49 +1,90 @@
 <template>
-  <div>
-    
-  <div class="flex flex-column w-max-[100] ">
-    
+  <div v-if="user && user.id">
+    <CreatorBanner :user="user"></CreatorBanner>
+      
+    <div class="flex flex-column w-max-[100] ">
+  
+  <!--    <div class="w-full border-b-2 p-6">-->
+  <!--      <PostMessage content-id="00000001-0000-0000-0000-000000000001"></PostMessage>-->
+  <!--    </div>-->
+  <!--    -->
+  <!--    <div class="w-full border-b-2 p-6">-->
+  <!--      <h2 class="font-sans font-semibold">Commentaires</h2>-->
+  <!--      <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>-->
+  <!--    </div>-->
+  
+      <PostContentMenu v-if="user.id === userStore.getCurrentUser().id"></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"
+                    :key="post.id"
+                    :post="post"
+                    class=" bg-white w-full content-center rounded-3xl mt-2">
+          </PostCard>
+        </div>
+      </div>
+      
+    </div>
   </div>
 
-
-<!--    <div class="w-full border-b-2 p-6">-->
-<!--      <PostMessage content-id="00000001-0000-0000-0000-000000000001"></PostMessage>-->
-<!--    </div>-->
-<!--    -->
-<!--    <div class="w-full border-b-2 p-6">-->
-<!--      <h2 class="font-sans font-semibold">Commentaires</h2>-->
-<!--      <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>-->
-<!--    </div>-->
-
-    <PostContentMenu></PostContentMenu>
-
-
-    <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"
-                  :key="post.id"
-                  :post="post"
-                  class=" bg-white w-full content-center rounded-3xl mt-2">
-        </PostCard>
-      </div>
+  <!-- Fallback when user try to access a non-existing creator -->
+  <div v-else>
+    <div v-if="loading">
+      <v-progress-linear indeterminate></v-progress-linear>
+    </div>
+    <div v-else>
+      <v-card>
+        <v-card-text style="text-align: center;">
+          Aucun créateur au nom de {{ route.params.creator }}
+        </v-card-text>
+      </v-card>
     </div>
-
-    
-    
-    
-   
   </div>
 </template>
 
-<script setup>
+<script async setup>
 
 import PostContentMenu from '@/views/main/PostContentMenu.vue'
 import PostCard from "@/views/main/PostCard.vue"
 import posts from "@/views/main/posts.json"
 import PostMessage from "@/views/messages/PostMessage.vue";
 import MessageList from "@/views/messages/MessageList.vue";
+import {onBeforeMount, ref, watch} 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";
+import {useUserStore} from "@/stores/user.js";
 
-let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
+const client = useClient();
+const route = useRoute();
+const userStore = useUserStore();
+
+const user = ref(null);
+const loading = ref(true);
+
+onBeforeMount(async() => {
+  setTimeout(() => {
+    loading.value = false;
+  }, 1500);
+  const response = await client.get(`/api/Users?UserName=${route.params.creator}`)
+  user.value = response.data
+})
+
+watch(
+    () => route.params.creator,
+    async () => {
+      loading.value = true;
+      setTimeout(() => {
+        loading.value = false;
+      }, 1000);
+      const response = await client.get(`/api/Users?UserName=${route.params.creator}`)
+      user.value = response.data
+    }
+);
 
 </script>
 

src/views/main/CreatorBanner.vue

@@ -0,0 +1,118 @@
+<template>
+  <!--  Bannière-->
+  <div class="relative bottom-4  z-20 m">
+    <div class="relative flex flex-col">
+      <!-- Social Network-->
+      <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>
+        </div>
+        <div class="grid grid-cols-6  md:flex flex-wrap space-x-0 md:space-x-10 gap-6 ">
+          <a 
+              v-for="socialNetwork in GetActiveSocialNetworkUrls()" 
+              :href="socialNetwork.url" target="_blank"
+             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
+            <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
+            <img v-if="socialNetwork.icon.includes('tiktok')" src="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok" class="w-9 h-9">
+          </a>
+        </div>
+      </div>
+
+
+    </div>
+    <!--Banner & user info-->
+    <div class="relative">
+      <!--Banner-->
+      <div>
+        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="user.storedDataUrls.bannerPictureUrl" alt="Profile Banner" style="max-height: 550px">
+      </div>
+      <!--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">
+            <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>
+  </div>
+
+  <!-- Actions Button & image profile -->
+  <div class="relative bottom-4 w-full">
+    <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="{ 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"
+              @click="isDialogActive = true">
+            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
+          </button>
+          <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';">
+            S'ABONNER
+          </button>
+          <button
+              class="flex items-center text-white transform transition-transform duration-200 hover:text-white hover:scale-125">
+            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-comment-text</v-icon>
+          </button>
+          <button
+              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
+            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+</template>
+
+<script setup>
+
+import {defineProps, ref} from "vue";
+
+const props = defineProps({
+  user: { type: Object, required: true },
+});
+
+const isDialogActive = ref(false);
+
+function GetActiveSocialNetworkUrls(){
+  const socialNetworks = [];
+  const userSocialNetworks = props.user.socialNetworks;
+  if (userSocialNetworks.facebookUrl !== ''){
+    socialNetworks.push({icon: "mdi-facebook", url: props.user.socialNetworks.facebookUrl})
+  }
+  if (userSocialNetworks.facebookUrl !== ''){
+    socialNetworks.push({icon: "mdi-twitter", url: props.user.socialNetworks.xUrl})
+  }
+  if (userSocialNetworks.instagramUrl !== ''){
+    socialNetworks.push({icon: "mdi-instagram", url: props.user.socialNetworks.instagramUrl})
+  }
+  if (userSocialNetworks.tiktokUrl !== ''){
+    socialNetworks.push({icon: "/images/hutopymedia/icons/white/tiktokwhite.png", url: props.user.socialNetworks.tikTokUrl})
+  }
+  if (userSocialNetworks.youtubeUrl !== ''){
+    socialNetworks.push({icon: "mdi-youtube", url: props.user.socialNetworks.youtubeUrl})
+  }
+  if (userSocialNetworks.yourWebsiteUrl !== ''){
+    socialNetworks.push({icon: "mdi-web", url: props.user.socialNetworks.yourWebsiteUrl})
+  }
+  
+  return socialNetworks;
+}
+    
+</script>

src/views/main/Header.vue

@@ -39,7 +39,9 @@
             class="rounded-full w-32 md:w-64 lg:w-96 mx-2"
             append-inner-icon="mdi-magnify"
             @click.stop
-            @click:append-inner="onSearch">
+            @click:append-inner="onSearch"
+            @keyup.enter="onSearch"
+        >
         </v-text-field>
       </template>
       <template v-else>
@@ -74,7 +76,7 @@
 
             <div v-if="currentUser.userName !== 'Anonyme'">
               <v-list-item class="nav-button">
-                <router-link :to="`/${currentUserName}`">
+                <router-link :to="`/@${currentUserName}`">
                   <v-btn class="w-100 " variant="plain"> {{ currentUserName }}</v-btn>
                 </router-link>
               </v-list-item>
@@ -104,16 +106,17 @@
 </template>
 
 <script setup>
-import {ref, onMounted, onBeforeUnmount, onBeforeMount} from "vue";
+import {ref, onBeforeUnmount, onBeforeMount, watch, reactive} from "vue";
 import {eventBus} from '@/eventBus.js';
 import {useRouter} from 'vue-router';
 import {useUserStore} from "@/stores/user.js";
+import MyUserModel from "@/models/myUserModel.js";
 
 const router = useRouter();
 const currentUserName = ref("Anonyme");
 const searchQuery = ref("");
 const showSearch = ref(false);
-const currentUser = ref(null);
+let currentUser = reactive(MyUserModel.getDefaultUser());
 const userStore = useUserStore();
 const backupProfilePictureUrl = "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
 
@@ -159,12 +162,22 @@ const logout = () => {
 };
 
 onBeforeMount( () => {
-  currentUser.value = userStore.getCurrentUser();
-  currentUserName.value = currentUser.value.userName;
+  currentUser = userStore.getCurrentUser();
+  currentUserName.value = currentUser.userName;
 
   document.addEventListener('click', handleClickOutside);
 });
 
+// Watch the user state to get it again if needed.
+watch(
+    () => userStore.hasChanged,
+    () => {
+      currentUser = userStore.getCurrentUser();
+      const timestamp = new Date().getTime();
+      currentUser.storedDataUrls.profilePictureUrl = `${currentUser.storedDataUrls.profilePictureUrl}?t=${timestamp}`;
+    }
+);
+
 onBeforeUnmount(() => {
   document.removeEventListener('click', handleClickOutside);
 });

src/views/main/SideBar.vue

@@ -8,13 +8,6 @@
 
         <ul class="space-y">
           <li>
-            <RouterLink to="/@hutopy">
-              <div class="nav-button">
-                <v-icon class="mx-2">mdi-account</v-icon>
-                Hutopy
-              </div>
-            </RouterLink>
-
             <RouterLink to="/@leffet">
               <div class="nav-button">
                 <v-icon class="mx-2">mdi-account</v-icon>

src/views/main/Wallet.vue

@@ -65,8 +65,9 @@ const formattedTransactions = computed(() => {
 
 const formattedBalance = computed(() => {
   const balanceStr = totalBalance.value.toString();
-  const integerPart = balanceStr.slice(0, -2) || '0';
-  const decimalPart = balanceStr.slice(-2);
+  const balanceParts = balanceStr.split(".");
+  const integerPart = balanceParts[0]
+  const decimalPart = balanceParts[1]
   return integerPart + ',' + decimalPart + ' $';
 });