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

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>

39
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();
}