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

Many fix and improvements

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-08-03 04:15:55 -04:00
parent 0d94d79c77
commit 78ead7e387
37 changed files with 669 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/views/main/CreatorFeed.vue
View File

@@ -1,50 +0,0 @@
<template>
<div class="mt-28">
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-4xl mb-4">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:h-full md:w-48" src="/images/usersmedia/HutopyProfile/banners/banner01.png" alt="Image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Nom du réseau social</div>
<p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<p class="mt-2 text-gray-500">Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
</div>
</div>
</div>
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-4xl mb-4">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:h-full md:w-48" src="/images/usersmedia/HutopyProfile/banners/banner01.png" alt="Image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Nom du réseau social</div>
<p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<p class="mt-2 text-gray-500">Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
</div>
</div>
</div>
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-4xl mb-4">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:h-full md:w-48" src="/images/usersmedia/HutopyProfile/banners/banner01.png" alt="Image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Nom du réseau social</div>
<p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<p class="mt-2 text-gray-500">Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>

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

@@ -4,7 +4,7 @@
@click.stop
>
<div class="flex items-center">
<v-app-bar-nav-icon @click.stop="toggleSidebar">
<v-app-bar-nav-icon @click.stop="sideBarStore.toggle()">
</v-app-bar-nav-icon>
<RouterLink to="/" class="hidden md:block">
@@ -53,51 +53,52 @@
<div class="text-center">
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn variant="plain" v-bind="props" class="d-flex align-center text-capital-none">
<span class="normal-case max-w-xs hidden md:block">
{{ currentUser.userName }}
</span>
<div v-bind="props" class="flex align-center font-sans py-1 px-4 rounded-lg hover:bg-gray-100">
<span class="max-w-xs hidden md:block">
{{ userStore.alias }}
</span>
<img
:src="currentUser.storedDataUrls.profilePictureUrl ?? '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
:src="userStore.portraitUrl"
alt="Profile Image"
class="ml-2 rounded-full" style="width: 32px; height: 32px;">
</v-btn>
class="ml-2 rounded-full"
width="32"
height="32">
</div>
</template>
<v-list min-width="200px" class=" align-center mt-3 left-3">
<div v-if="currentUser.userName === 'Anonyme'">
<template v-if="!authStore.isAuthenticated">
<v-list-item class="nav-button">
<v-list-item-title>
<v-btn to="/login" class="w-100 " variant="plain">Connexion</v-btn>
</v-list-item-title>
</v-list-item>
</div>
</template>
<div v-if="currentUser.userName !== 'Anonyme'">
<v-list-item v-if="currentUser.creatorAlias !== null" class="nav-button">
<router-link :to="`/@${currentUser.creatorAlias}`">
<v-btn class="w-100 " variant="plain">@{{ currentUser.creatorAlias }}</v-btn>
<template v-else>
<v-list-item v-if="userStore.creator" class="nav-button">
<router-link :to="`/@${userStore.creator.name}`">
<v-btn class="w-100 " variant="plain">@{{ userStore.creator.name }}</v-btn>
</router-link>
</v-list-item>
<v-list-item class="nav-button">
<v-list-item-title>
<v-btn to="/profile" class="w-100 " variant="plain">Mon profil</v-btn>
<v-btn to="/profile" class="w-100" variant="plain">Mon profil</v-btn>
</v-list-item-title>
</v-list-item>
<v-list-item class="nav-button">
<v-list-item-title>
<v-btn to="/wallet" class="w-100 " variant="plain"> Portefeuille</v-btn>
<v-btn to="/wallet" class="w-100" variant="plain">Portefeuille</v-btn>
</v-list-item-title>
</v-list-item>
<v-list-item class="nav-button">
<v-list-item-title>
<v-btn @click="logout" to="/wallet" class="w-100 " variant="plain"> Déconnexion</v-btn>
<v-btn @click="authStore.logout" class="w-100" variant="plain">Déconnexion</v-btn>
</v-list-item-title>
</v-list-item>
</div>
</template>
</v-list>
</v-menu>
</div>
@@ -108,21 +109,19 @@
</template>
<script setup>
import {ref, onBeforeUnmount, onBeforeMount, watch, reactive} from "vue";
import {eventBus} from '@/eventBus.js';
import {ref, onBeforeUnmount, onBeforeMount, watch} from "vue";
import {useRouter} from 'vue-router';
import {useUserStore} from "@/stores/user.js";
import MyUserModel from "@/models/myUserModel.js";
import {useSideBarStore} from '@/stores/sideBarStore.js';
import {useUserStore} from "@/stores/userStore.js";
import {useAuthStore} from "@/stores/authStore.js";
const authStore = useAuthStore()
const userStore = useUserStore()
const sideBarStore = useSideBarStore()
const router = useRouter();
const searchQuery = ref("");
const showSearch = ref(false);
let currentUser = reactive(MyUserModel.getDefaultUser());
const userStore = useUserStore();
const toggleSidebar = () => {
eventBus.value.toggleSidebar();
};
const onSearch = () => {
const query = searchQuery.value.trim();
@@ -148,33 +147,14 @@ const handleClickOutside = (event) => {
}
};
const navigateToMessages = () => {
router.push('/messages');
};
const logout = () => {
localStorage.removeItem('jwt');
window.location.reload();
};
onBeforeMount(() => {
currentUser = userStore.getCurrentUser();
document.addEventListener('click', handleClickOutside);
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);
});
</script>

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

@@ -68,9 +68,8 @@
</template>
<script setup>
import {ref, onBeforeMount, onMounted} from "vue";
import {useUserStore} from "@/stores/user.js";
import {useClient} from "@/plugins/api.js";
import {ref, onMounted} from "vue";
import {useUserStore} from "@/stores/userStore.js";
import SizeIndicator from "@/views/tools/SizeIndicator.vue";
import ManageAccount from "@/views/Profile/ManageAccount.vue";
import PageInformations from "@/views/Profile/PageInformations.vue";
@@ -78,21 +77,12 @@ import PersonnalInfo from "@/views/Profile/PersonnalInfo.vue";
import AccountSecurity from "@/views/Profile/AccountSecurity.vue";
const userStore = useUserStore();
const client = useClient();
const currentUser = ref(null);
const currentComponent = ref('PageInformations'); // Default component
const isDown = ref(false);
const startX = ref(0);
const scrollLeft = ref(0);
onBeforeMount(() => {
try {
currentUser.value = userStore.getCurrentUser();
} catch (error) {
console.log("User not logged")
}
});
onMounted(() => {
const slider = document.querySelector('.custom-scroll');
@@ -163,9 +153,6 @@ const scrollRightFunc = () => {
</script>
<style scoped>
.save-btn {
z-index: 10;
}
.custom-scroll {
-ms-overflow-style: none; /* Internet Explorer 10+ */
@@ -176,8 +163,4 @@ const scrollRightFunc = () => {
display: none; /* Safari and Chrome */
}
.active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
</style>

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

@@ -86,14 +86,13 @@
<script setup>
import {ref} from 'vue';
import MyUserModel from "@/models/myUserModel.js";
const emit = defineEmits(["updateProfilePicture", "updateBannerPicture"]);
const fallbackProfilePictureUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
const fallbackBannerPictureUrl = '/images/usersmedia/HutopyProfile/banners/banner01.png';
const props = defineProps({
user: {type: MyUserModel},
user: {}
});
const bannerImageUrl = ref(props.user.storedDataUrls.bannerPictureUrl);

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

@@ -1,87 +0,0 @@
<template>
<div ref="container">
<div class="text-center text-2xl py-4 border-t-4">Liens des réseaux sociaux et de votre site</div>
<div class="px-5 py-2 flex flex-col space-y-4">
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Instagram</label>
</div>
<v-text-field v-model="props.user.socialNetworks.instagramUrl" label="Instagram"
variant="outlined"></v-text-field>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">TikTok</label>
</div>
<v-text-field v-model="props.user.socialNetworks.tikTokUrl" label="TikTok" variant="outlined"></v-text-field>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Facebook</label>
</div>
<v-text-field v-model="props.user.socialNetworks.facebookUrl" label="Facebook" variant="outlined"></v-text-field>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">X</label>
</div>
<v-text-field v-model="props.user.socialNetworks.xUrl" label="X" variant="outlined"></v-text-field>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">LinkedIn</label>
</div>
<v-text-field v-model="props.user.socialNetworks.linkedInUrl" label="LinkedIn" variant="outlined"></v-text-field>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Site Web</label>
</div>
<v-text-field v-model="props.user.socialNetworks.yourWebsiteUrl" label="Site Web"
variant="outlined"></v-text-field>
<div class="flex flex-col space-y-4">
<div class="flex items-center mb-2">
<label class="text-lg mr-4">Icône pour votre site web *svg</label>
<v-file-input
v-model="iconFile"
accept=".png, .jpeg, .jpg"
hint="png, jpeg or jpg"
label="Téléverser une icône"
@change="onFileChange">
</v-file-input>
</div>
<div v-if="iconUrl" class="flex justify-center">
<img :src="iconUrl" alt="Icon" class="icon-preview">
</div>
</div>
</div>
</div>
</template>
<script setup>
import {ref} from 'vue';
import MyUserModel from "@/models/myUserModel.js";
const props = defineProps({
user: {type: MyUserModel},
});
const emit = defineEmits(["updateWebsiteIcon"]);
const iconUrl = ref(props.user.storedDataUrls.websiteIconUrl);
const iconFile = ref(null);
const onFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
iconUrl.value = e.target.result;
};
reader.readAsDataURL(file);
emit("updateWebsiteIcon", file)
}
};
</script>
<style scoped>
.icon-preview {
max-width: 250px;
max-height: 250px;
}
</style>

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

@@ -47,7 +47,7 @@
<script async setup>
import { onBeforeMount, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import {useUserStore} from "@/stores/user.js";
import {useUserStore} from "@/stores/userStore.js";
const userStore = useUserStore();
const router = useRouter();
@@ -75,10 +75,8 @@ const transactionCount = computed(() => userTransactions.value.length);
onBeforeMount( () => {
try {
const myUser = userStore.getCurrentUser();
userTransactions.value = myUser.userTransactions;
totalBalance.value = myUser.totalBalance;
userTransactions.value = userStore.user.userTransactions;
totalBalance.value = userStore.user.totalBalance;
} catch (error) {
navigateToHome();
}