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

Colors + profile mapping + socialNetworks urls. Missing images

Browse Source
This commit is contained in:
Dominic Villemure
2024-06-30 15:47:43 -04:00
parent 3ce1c0013a
commit 169e2cc160
11 changed files with 119 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-app>
<v-app v-if="isUserLoaded">
<div class="m-0 flex flex-column h-screen">
<Header @toggle-sidebar="toggleSidebar" class="fixed w-full z-50 top-0 p-2"></Header>
<div class="flex flex-row relative">
@@ -27,20 +27,30 @@
</v-app>
</template>
<script setup>
<script async setup>
import Header from "@/views/main/Header.vue";
import Footer from "@/views/main/Footer.vue";
import SideBar from "@/views/main/SideBar.vue";
import {ref, onMounted, onUnmounted} from 'vue';
import StripePayment from "@/views/StripePayment.vue";
import {ref, onMounted, onUnmounted, onBeforeMount} from 'vue';
import {eventBus} from '@/eventBus.js';
import {useUserStore} from "@/stores/user.js";
import {useClient} from "@/plugins/api.js";
const hideSideBar = ref(false);
const isUserLoaded = ref(false);
const showPopup = ref(false);
const popup = ref(null);
const popupButton = ref(null);
let closeSidebarTimer = null;
let client = useClient();
let userStore = useUserStore();
onBeforeMount(async () => {
await userStore.setCurrentUser(client);
isUserLoaded.value = true;
});
const toggleSidebar = () => {
hideSideBar.value = !hideSideBar.value;
};

13
src/models/myUserModel.js
View File

@@ -1,5 +1,7 @@
import UserTransactionsModel from "@/models/userTransactionsModel.js";
import SocialNetworksModel from "@/models/socialNetworksModel.js";
import ProfileColorsModel from "@/models/profileColorsModel.js";
import StoredDataUrlsModel from "@/models/storedDataUrlsModel.js";
export default class MyUserModel
{
@@ -9,7 +11,7 @@ export default class MyUserModel
userName = "";
occupation = "";
email = "";
phone = "";
phoneNumber = "";
birthDate = "";
country = "";
city = "";
@@ -17,6 +19,8 @@ export default class MyUserModel
about = "";
description = "";
socialNetworks = new SocialNetworksModel();
profileColors = new ProfileColorsModel();
storedDataUrlsModel = new StoredDataUrlsModel();
totalBalance = "";
userTransactions = [];
@@ -32,4 +36,11 @@ export default class MyUserModel
return userModel;
}
static getDefaultUser(){
const defaultUser = new MyUserModel();
defaultUser.userName = "Anonymous"
return defaultUser;
}
}

11
src/models/profileColorsModel.js Normal file
View File

@@ -0,0 +1,11 @@
export default class ProfileColorsModel
{
bannerTop = "";
bannerBottom = "";
accent = "";
menu = "";
static createFromApiResult(apiResult){
return Object.assign(new ProfileColorsModel(), apiResult)
}
}

10
src/models/storedDataUrlsModel.js Normal file
View File

@@ -0,0 +1,10 @@
export default class StoredDataUrlsModel
{
bannerPictureUrl = "";
profilePictureUrl = "";
websiteIconUrl = "";
static createFromApiResult(apiResult){
return Object.assign(new StoredDataUrlsModel(), apiResult)
}
}

20
src/stores/user.js
View File

@@ -3,15 +3,25 @@ import { defineStore } from 'pinia'
import MyUserModel from "@/models/myUserModel.js";
export const useUserStore = defineStore('user', () => {
const user = ref(MyUserModel)
async function getCurrentUser(client) {
const myUser = await client.get("/api/GetMyUser");
return MyUserModel.createFromApiResult(myUser.data);
const user = ref({});
function getCurrentUser() {
return this.user.value;
}
async function setCurrentUser(client) {
try {
const myUser = await client.get("/api/GetMyUser");
this.user.value = MyUserModel.createFromApiResult(myUser.data);
} catch (e){
this.user.value = MyUserModel.getDefaultUser();
console.log("User not logged.")
}
}
async function updateCurrentUser(client, myUserModel) {
this.user.value = myUserModel;
await client.patch("/api/UpdateMyUser/profile", myUserModel)
}
return { user, getCurrentUser, updateCurrentUser }
return { user, getCurrentUser, setCurrentUser, updateCurrentUser }
})

4
src/views/main/Aboutyou.vue
View File

@@ -28,14 +28,14 @@
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Courriel</label>
</div>
<v-text-field v-model="user.email" label="Courriel" variant="outlined"></v-text-field>
<v-text-field disabled v-model="user.email" label="Courriel" variant="outlined"></v-text-field>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Téléphone</label>
</div>
<v-text-field v-model="user.phone" label="Téléphone" variant="outlined"></v-text-field>
<v-text-field v-model="user.phoneNumber" label="Téléphone" variant="outlined"></v-text-field>
</div>
<div>

13
src/views/main/Header.vue
View File

@@ -101,7 +101,6 @@
</template>
<script setup>
import {useClient} from "@/plugins/api.js";
import {ref, onMounted, onBeforeUnmount} from "vue";
import {eventBus} from '@/eventBus.js';
import {useRouter} from 'vue-router';
@@ -112,7 +111,6 @@ const currentUserName = ref("Anonyme");
const searchQuery = ref("");
const showSearch = ref(false);
let currentUser = null;
const client = useClient();
const userStore = useUserStore();
const toggleSidebar = () => {
@@ -152,13 +150,10 @@ const logout = () => {
window.location.reload();
};
onMounted(async () => {
try {
currentUser = await userStore.getCurrentUser(client);
currentUserName.value = currentUser.userName;
} catch (error) {
console.log("User not logged");
}
onMounted( () => {
currentUser = userStore.getCurrentUser();
currentUserName.value = currentUser.userName;
document.addEventListener('click', handleClickOutside);
});

37
src/views/main/Profile.vue
View File

@@ -2,49 +2,66 @@
<div class="px-2">
<div class="flex flex-col max-w-2xl mx-auto rounded-3xl shadow-2xl mt-2 mb-16">
<H1 class="text-center text-4xl bg-fuchsia-900 p-3 w-full rounded-t-3xl border-b-4 border-b-gray-200 font-sans text-white">
<h1 class="text-center text-4xl bg-fuchsia-900 p-3 w-full rounded-t-3xl border-b-4 border-b-gray-200 font-sans text-white">
Personnaliser votre profil
</h1>
<ProfileBanner :user="currentUser"></ProfileBanner>
<Aboutyou :user="currentUser"></Aboutyou>
<AboutYou :user="currentUser"></AboutYou>
<SocialLinks :social-networks="currentUser.socialNetworks"></SocialLinks>
<div class="sticky inset-x-0 bottom-0 flex justify-center px-4 pb-4">
<div class="flex space-x-2">
<v-btn class="save-btn" @click="saveAll">Enregistrer</v-btn>
<router-link :to="`/${currentUserName}`">
<v-btn class="save-btn" @click="saveForm">Enregistrer</v-btn>
<router-link :to="`/${currentUser.userName}`">
<v-btn class="save-btn">Retour</v-btn>
</router-link>
</div>
</div>
<v-snackbar v-model="snackbar" :timeout="1000">
Sauvegarde
<template v-slot:actions>
<v-btn color="green" variant="text" @click="snackbar = false">
Fermer
</v-btn>
</template>
</v-snackbar>
</div>
</div>
</template>
<script async setup>
import Aboutyou from "@/views/main/Aboutyou.vue";
import AboutYou from "@/views/main/Aboutyou.vue";
import SocialLinks from "@/views/main/SocialLinks.vue";
import ProfileBanner from "@/views/main/ProfileBanner.vue";
import DonationPopup from "@/views/main/DonationPopup.vue";
import {onBeforeMount, ref} from "vue";
import {useClient} from "@/plugins/api.js";
import {useUserStore} from "@/stores/user.js";
import MyUserModel from "@/models/myUserModel.js";
const client = useClient();
import {useClient} from "@/plugins/api.js";
const userStore = useUserStore();
const client = useClient();
const currentUser = ref(MyUserModel)
const snackbar = ref(false);
onBeforeMount(async () => {
onBeforeMount( () => {
try {
currentUser.value = await userStore.getCurrentUser(client);
currentUser.value = userStore.getCurrentUser();
} catch(error) {
console.log("User not logged")
}
})
async function saveForm(){
snackbar.value = true;
await userStore.updateCurrentUser(client, currentUser.value);
}
</script>

37
src/views/main/ProfileBanner.vue
View File

@@ -1,28 +1,28 @@
<template>
<div>
<div>
<div class="px-5 py-2 bg-fuchsia-800 text-white" :style="{ backgroundColor: accent2Color }" >
<div class="px-5 py-2 bg-fuchsia-800 text-white" :style="{ backgroundColor: user.profileColors.menu }" >
<div class="flex justify-center text-2xl">Photo de couverture</div>
</div>
<div>
<div :style="{ backgroundColor: topColor }" class="flex h-4"></div>
<div :style="{ backgroundColor: user.profileColors.bannerTop }" class="flex h-4"></div>
<img :src="bannerImageUrl" alt="Banner Image" class="w-full object-cover">
<div :style="{ backgroundColor: bottomColor }" class="h-4">
<div :style="{ backgroundColor: user.profileColors.bannerBottom }" class="h-4">
</div>
<div>
<div class="space-x-4 flex justify-center py-2">
<v-btn @click="openColorPicker('top')"
:style="{ backgroundColor: topColor, color: getTextColor(topColor) }">Haut
:style="{ backgroundColor: user.profileColors.bannerTop, color: getTextColor(user.profileColors.bannerTop) }">Haut
</v-btn>
<v-btn @click="openColorPicker('bottom')"
:style="{ backgroundColor: bottomColor, color: getTextColor(bottomColor) }">Bas
:style="{ backgroundColor: user.profileColors.bannerBottom, color: getTextColor(user.profileColors.bannerBottom) }">Bas
</v-btn>
<v-btn @click="openColorPicker('accent')"
:style="{ backgroundColor: accentColor, color: getTextColor(accentColor) }">Accent1
:style="{ backgroundColor: user.profileColors.accent, color: getTextColor(user.profileColors.accent) }">Accent1
</v-btn>
<v-btn @click="openColorPicker('accent2')"
:style="{ backgroundColor: accent2Color, color: getTextColor(accent2Color) }">Menu
<v-btn @click="openColorPicker('menu')"
:style="{ backgroundColor: user.profileColors.menu, color: getTextColor(user.profileColors.menu) }">Menu
</v-btn>
</div>
</div>
@@ -41,7 +41,7 @@
</div>
<div class="flex justify-center py-4">
<img :src="profilePictureUrl"
:style="{ borderColor: accentColor, borderWidth: '3px', borderStyle: 'solid' }"
:style="{ borderColor: user.profileColors.accent, borderWidth: '3px', borderStyle: 'solid' }"
class="rounded-full max-w-48 max-w-48"
alt="Profile Image">
</div>
@@ -72,20 +72,11 @@
import MyUserModel from "@/models/myUserModel.js";
const props = defineProps({
initialTopColor: { type: String, default: '#6B0065' },
initialBottomColor: { type: String, default: '#A30E79' },
initialAccentColor: { type: String, default: '#282286' },
initialAccent2Color: { type: String, default: '#A526B6' },
initialBannerImageUrl: { type: String, default: '/images/usersmedia/HutopyProfile/banners/banner01.png' },
initialProfilePictureUrl: { type: String, default: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png' },
user: { type: MyUserModel },
});
const topColor = ref(props.initialTopColor);
const bottomColor = ref(props.initialBottomColor);
const accentColor = ref(props.initialAccentColor);
const accent2Color = ref(props.initialAccent2Color);
const bannerImageUrl = ref(props.initialBannerImageUrl);
const profilePictureUrl = ref(props.initialProfilePictureUrl);
@@ -125,13 +116,13 @@
const applyColor = () => {
if (colorTarget.value === 'top') {
topColor.value = selectedColor.value;
props.user.profileColors.bannerTop = selectedColor.value;
} else if (colorTarget.value === 'bottom') {
bottomColor.value = selectedColor.value;
props.user.profileColors.bannerBottom = selectedColor.value;
} else if (colorTarget.value === 'accent') {
accentColor.value = selectedColor.value;
} else if (colorTarget.value === 'accent2') {
accent2Color.value = selectedColor.value;
props.user.profileColors.accent = selectedColor.value;
} else if (colorTarget.value === 'menu') {
props.user.profileColors.menu = selectedColor.value;
}
showColorPicker.value = false;
};

3
src/views/main/SocialLinks.vue
View File

@@ -23,10 +23,9 @@
<script setup>
import {defineProps, ref} from 'vue';
import SocialNetworksModel from "@/models/socialNetworksModel.js";
const props = defineProps({
socialNetworks: { type: SocialNetworksModel },
socialNetworks: { type: Object },
});
const socialNetworks = ref([

12
src/views/main/Wallet.vue
View File

@@ -47,10 +47,8 @@
<script async setup>
import { onBeforeMount, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useClient } from "@/plugins/api.js";
import {useUserStore} from "@/stores/user.js";
const client = useClient();
const userStore = useUserStore();
const router = useRouter();
@@ -74,11 +72,17 @@ const formattedBalance = computed(() => {
const transactionCount = computed(() => userTransactions.value.length);
onBeforeMount(async () => {
onBeforeMount( () => {
try {
const myUser = await userStore.getCurrentUser(client);
const myUser = userStore.getCurrentUser();
userTransactions.value = myUser.userTransactions;
totalBalance.value = myUser.totalBalance;
console.log(userTransactions.value);
console.log(totalBalance.value);
console.log(formattedTransactions);
console.log(formattedBalance);
} catch (error) {
navigateToHome();
}