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

Update-Current-User WIP

Browse Source
This commit is contained in:
Dominic Villemure
2024-06-29 22:44:49 -04:00
parent 81fe5abd7b
commit b07ca6f364
9 changed files with 168 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/models/myUserModel.js
View File

@@ -1,4 +1,5 @@
import UserTransactionsModel from "@/models/userTransactionsModel.js";
import SocialNetworksModel from "@/models/socialNetworksModel.js";
export default class MyUserModel
{
@@ -6,6 +7,16 @@ export default class MyUserModel
firstName = "";
lastName = "";
userName = "";
occupation = "";
email = "";
phone = "";
birthDate = "";
country = "";
city = "";
address = "";
about = "";
description = "";
socialNetworks = new SocialNetworksModel();
totalBalance = "";
userTransactions = [];

15
src/models/socialNetworksModel.js Normal file
View File

@@ -0,0 +1,15 @@
export default class SocialNetworksModel
{
facebookUrl = "";
instagramUrl = "";
xUrl = "";
linkedInUrl = "";
tikTokUrl = "";
youtubeUrl = "";
redditUrl = "";
yourWebsiteUrl = "";
static createFromApiResult(apiResult){
return Object.assign(new SocialNetworksModel(), apiResult)
}
}

17
src/stores/user.js Normal file
View File

@@ -0,0 +1,17 @@
import { ref } from 'vue'
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);
}
async function updateCurrentUser(client, myUserModel) {
await client.patch("/api/UpdateMyUser/profile", myUserModel)
}
return { user, getCurrentUser, updateCurrentUser }
})

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

@@ -7,42 +7,42 @@
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Prénom</label>
</div>
<v-text-field v-model="firstName" label="Prénom" variant="outlined"></v-text-field>
<v-text-field v-model="user.firstName" label="Prénom" variant="outlined"></v-text-field>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Nom</label>
</div>
<v-text-field v-model="lastName" label="Nom" variant="outlined"></v-text-field>
<v-text-field v-model="user.lastName" label="Nom" variant="outlined"></v-text-field>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Occupation</label>
</div>
<v-text-field v-model="occupation" label="Occupation" variant="outlined"></v-text-field>
<v-text-field v-model="user.occupation" label="Occupation" variant="outlined"></v-text-field>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Courriel</label>
</div>
<v-text-field v-model="email" label="Courriel" variant="outlined"></v-text-field>
<v-text-field 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="phone" label="Téléphone" variant="outlined"></v-text-field>
<v-text-field v-model="user.phone" label="Téléphone" variant="outlined"></v-text-field>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Date de naissance (JJ/MM/AAAA)</label>
</div>
<v-text-field v-model="birthDate" label="Date de naissance" variant="outlined"
<v-text-field v-model="user.birthDate" label="Date de naissance" variant="outlined"
:rules="[dateRule]"></v-text-field>
</div>
@@ -50,35 +50,35 @@
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Pays</label>
</div>
<v-text-field v-model="country" label="Pays" variant="outlined"></v-text-field>
<v-text-field v-model="user.country" label="Pays" variant="outlined"></v-text-field>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Ville</label>
</div>
<v-text-field v-model="city" label="Ville" variant="outlined"></v-text-field>
<v-text-field v-model="user.city" label="Ville" variant="outlined"></v-text-field>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Adresse</label>
</div>
<v-text-field v-model="address" label="Adresse" variant="outlined"></v-text-field>
<v-text-field v-model="user.address" label="Adresse" variant="outlined"></v-text-field>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Titre A propos</label>
</div>
<v-text-field v-model="titre" label="Titre A propos" variant="outlined"></v-text-field>
<v-text-field v-model="user.about" label="Titre A propos" variant="outlined"></v-text-field>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Description</label>
</div>
<v-textarea v-model="description" label="Description" variant="outlined"></v-textarea>
<v-textarea v-model="user.description" label="Description" variant="outlined"></v-textarea>
</div>
</div>
</div>
@@ -86,19 +86,12 @@
</template>
<script setup>
import { ref } from 'vue';
import { ref, defineProps } from 'vue';
import MyUserModel from "@/models/myUserModel.js";
const firstName = ref('');
const lastName = ref('');
const occupation = ref('');
const email = ref('');
const phone = ref('');
const birthDate = ref('');
const country = ref('');
const city = ref('');
const address = ref('');
const titre = ref('');
const description = ref('');
const props = defineProps({
user: { type: MyUserModel },
});
const dateRule = value => {
const datePattern = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/;

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

@@ -101,11 +101,11 @@
</template>
<script setup>
import MyUserModel from "@/models/myUserModel.js";
import {useClient} from "@/plugins/api.js";
import {ref, onMounted, onBeforeUnmount} from "vue";
import {eventBus} from '@/eventBus.js';
import {useRouter} from 'vue-router';
import {useUserStore} from "@/stores/user.js";
const router = useRouter();
const currentUserName = ref("Anonyme");
@@ -113,6 +113,7 @@ const searchQuery = ref("");
const showSearch = ref(false);
let currentUser = null;
const client = useClient();
const userStore = useUserStore();
const toggleSidebar = () => {
eventBus.value.toggleSidebar();
@@ -153,10 +154,8 @@ const logout = () => {
onMounted(async () => {
try {
const myUser = await client.get("/api/GetMyUser");
const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
currentUser = currentUserModel;
currentUserName.value = currentUserModel.userName;
currentUser = await userStore.getCurrentUser(client);
currentUserName.value = currentUser.userName;
} catch (error) {
console.log("User not logged");
}

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

@@ -2,13 +2,13 @@
<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 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 rounded-t-3xl border-b-4 border-b-gray-200 font-sans text-white">
Personnaliser votre profil
</H1>
</h1>
<ProfileBanner></ProfileBanner>
<Aboutyou></Aboutyou>
<SocialLinks></SocialLinks>
<ProfileBanner :user="currentUser"></ProfileBanner>
<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">
@@ -28,6 +28,23 @@ 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();
const userStore = useUserStore();
const currentUser = ref(MyUserModel)
onBeforeMount(async () => {
try {
currentUser.value = await userStore.getCurrentUser(client);
} catch(error) {
console.log("User not logged")
}
})
</script>

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

@@ -67,105 +67,82 @@
</div>
</template>
<script>
import {ref} from 'vue';
<script setup>
import { ref, defineProps } from 'vue';
import MyUserModel from "@/models/myUserModel.js";
export default {
props: {
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'
},
},
setup(props) {
const topColor = ref(props.initialTopColor);
const bottomColor = ref(props.initialBottomColor);
const accentColor = ref(props.initialAccentColor);
const accent2Color = ref(props.initialAccent2Color);
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 bannerImageUrl = ref(props.initialBannerImageUrl);
const profilePictureUrl = ref(props.initialProfilePictureUrl);
const topColor = ref(props.initialTopColor);
const bottomColor = ref(props.initialBottomColor);
const accentColor = ref(props.initialAccentColor);
const accent2Color = ref(props.initialAccent2Color);
const bannerImage = ref(null);
const profilePicture = ref(null);
const bannerImageUrl = ref(props.initialBannerImageUrl);
const profilePictureUrl = ref(props.initialProfilePictureUrl);
const showColorPicker = ref(false);
const selectedColor = ref('#F4F4F4');
const colorTarget = ref('');
const bannerImage = ref(null);
const profilePicture = ref(null);
const onBannerFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
bannerImageUrl.value = e.target.result;
};
reader.readAsDataURL(file);
}
};
const showColorPicker = ref(false);
const selectedColor = ref('#F4F4F4');
const colorTarget = ref('');
const onProfileFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
profilePictureUrl.value = e.target.result;
};
reader.readAsDataURL(file);
}
};
const onBannerFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
bannerImageUrl.value = e.target.result;
};
reader.readAsDataURL(file);
}
};
const openColorPicker = (target) => {
colorTarget.value = target;
showColorPicker.value = true;
};
const onProfileFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
profilePictureUrl.value = e.target.result;
};
reader.readAsDataURL(file);
}
};
const applyColor = () => {
if (colorTarget.value === 'top') {
topColor.value = selectedColor.value;
} else if (colorTarget.value === 'bottom') {
bottomColor.value = selectedColor.value;
} else if (colorTarget.value === 'accent') {
accentColor.value = selectedColor.value;
} else if (colorTarget.value === 'accent2') {
accent2Color.value = selectedColor.value; // Appliquer la nouvelle couleur
}
showColorPicker.value = false;
};
const openColorPicker = (target) => {
colorTarget.value = target;
showColorPicker.value = true;
};
const getTextColor = (bgColor) => {
// Simple function to determine if the text should be white or black based on the background color
const color = bgColor.replace('#', '');
const r = parseInt(color.substr(0, 2), 16);
const g = parseInt(color.substr(2, 2), 16);
const b = parseInt(color.substr(4, 2), 16);
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness > 155 ? '#000' : '#fff';
};
const applyColor = () => {
if (colorTarget.value === 'top') {
topColor.value = selectedColor.value;
} else if (colorTarget.value === 'bottom') {
bottomColor.value = selectedColor.value;
} else if (colorTarget.value === 'accent') {
accentColor.value = selectedColor.value;
} else if (colorTarget.value === 'accent2') {
accent2Color.value = selectedColor.value;
}
showColorPicker.value = false;
};
return {
topColor,
bottomColor,
accentColor,
accent2Color,
bannerImageUrl,
profilePictureUrl,
bannerImage,
profilePicture,
showColorPicker,
selectedColor,
colorTarget,
onBannerFileChange,
onProfileFileChange,
openColorPicker,
applyColor,
getTextColor,
};
},
const getTextColor = (bgColor) => {
// Simple function to determine if the text should be white or black based on the background color
const color = bgColor.replace('#', '');
const r = parseInt(color.substr(0, 2), 16);
const g = parseInt(color.substr(2, 2), 16);
const b = parseInt(color.substr(4, 2), 16);
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness > 155 ? '#000' : '#fff';
};
</script>

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

@@ -22,15 +22,20 @@
</template>
<script setup>
import { ref } from 'vue';
import {defineProps, ref} from 'vue';
import SocialNetworksModel from "@/models/socialNetworksModel.js";
const props = defineProps({
socialNetworks: { type: SocialNetworksModel },
});
const socialNetworks = ref([
{ label: 'Instagram', field: 'instagram', value: '' },
{ label: 'TikTok', field: 'tiktok', value: '' },
{ label: 'Facebook', field: 'facebook', value: '' },
{ label: 'X', field: 'X', value: '' },
{ label: 'LinkedIn', field: 'linkedin', value: '' },
{ label: 'Site Web', field: 'website', value: '' }
{ label: 'Instagram', field: 'instagram', value: props.socialNetworks.instagramUrl },
{ label: 'TikTok', field: 'tiktok', value: props.socialNetworks.tikTokUrl },
{ label: 'Facebook', field: 'facebook', value: props.socialNetworks.facebookUrl },
{ label: 'X', field: 'X', value: props.socialNetworks.xUrl },
{ label: 'LinkedIn', field: 'linkedin', value: props.socialNetworks.linkedInUrl },
{ label: 'Site Web', field: 'website', value: props.socialNetworks.yourWebsiteUrl }
]);
const iconUrl = ref('');

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

@@ -27,7 +27,9 @@
import { onBeforeMount, ref } from 'vue';
import {useClient} from "@/plugins/api.js";
import MyUserModel from "@/models/myUserModel.js";
import {useUserStore} from "@/stores/user.js";
const client = useClient();
const userStore = useUserStore();
const total = ref(false);
const drawer = ref(false);
@@ -36,10 +38,8 @@ let currentUser = null;
onBeforeMount(async () => {
try {
const myUser = await client.get("/api/GetMyUser");
const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
currentUser = currentUserModel;
currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName
currentUser = await userStore.getCurrentUser(client);
currentUserName.value = currentUser.firstName + " " + currentUser.lastName
} catch(error) {
console.log("User not logged")