Adds About for Creators
This commit is contained in:
Jonathan Bourdon
67
src/views/Profile/Dialogs/PageInformations/About.vue
Normal file
67
src/views/Profile/Dialogs/PageInformations/About.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
import {useClient} from "@/plugins/api.js";
|
||||
|
||||
const props = defineProps({
|
||||
creator: {
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['closeRequested'])
|
||||
|
||||
const title = ref(props.creator.about.title)
|
||||
const description = ref(props.creator.about.description)
|
||||
|
||||
const client = useClient()
|
||||
const save = async () => {
|
||||
try {
|
||||
await client.post(
|
||||
`/api/creators/${props.creator.id}/about`,
|
||||
{
|
||||
"title": title.value || null,
|
||||
"description": description.value || null
|
||||
})
|
||||
|
||||
props.creator.about.title = title
|
||||
props.creator.about.description = description
|
||||
|
||||
emits('closeRequested')
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
const cancel = () => {
|
||||
emits('closeRequested')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pb-5 text-2xl">About</div>
|
||||
|
||||
<div class="flex flex-row align-center">
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="title"
|
||||
label="Titre"
|
||||
outlined
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-row align-center">
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
v-model="description"
|
||||
label="Description"
|
||||
outlined
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-4">
|
||||
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
|
||||
<v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,10 +1,11 @@
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
import {useUserStore} from "@/stores/userStore.js"
|
||||
import Socials from '@/views/Profile/Dialogs/PageInformations/Socials.vue'
|
||||
import BannerPicker from '@/views/Profile/Dialogs/PageInformations/BannerPicker.vue'
|
||||
import ColorsPicker from '@/views/Profile/Dialogs/PageInformations/ColorsPicker.vue'
|
||||
import LogoPicker from "@/views/Profile/Dialogs/PageInformations/LogoPicker.vue"
|
||||
import {useUserStore} from "@/stores/userStore.js"
|
||||
import About from "@/views/Profile/Dialogs/PageInformations/About.vue";
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
@@ -16,7 +17,8 @@ const componentsMap = {
|
||||
BannerPicker,
|
||||
LogoPicker,
|
||||
Socials,
|
||||
ColorsPicker
|
||||
ColorsPicker,
|
||||
About
|
||||
};
|
||||
|
||||
const openDialog = (component, colorName = null) => {
|
||||
@@ -58,31 +60,32 @@ const closeDialog = () => {
|
||||
<div class="py-5 uppercase ml-4">Informations</div>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<button
|
||||
@click="openDialog('Socials')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
|
||||
<span class="flex-none pa-2 min-w-32 text-left"> Nom de la page </span>
|
||||
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openDialog('Socials')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
|
||||
<span class="flex-none pa-2 min-w-32 text-left"> Titre </span>
|
||||
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
|
||||
<span class="flex-none pa-2 min-w-32 text-left">Nom</span>
|
||||
<span class="flex-auto text-left pr-6">{{ userStore.creator.name }}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openDialog('Socials')"
|
||||
@click="openDialog('About')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
|
||||
<span class="flex-none pa-2 min-w-32 text-left">Titre</span>
|
||||
<span class="flex-auto text-left pr-6">{{ userStore.creator.about.title }}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="openDialog('About')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl ">
|
||||
<span class="pa-2 min-w-32 text-left"> Description </span>
|
||||
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.websiteUrl }}</span>
|
||||
<span class="pa-2 min-w-32 text-left">Description</span>
|
||||
<span class="flex-auto text-left pr-6">{{ userStore.creator.about.description }}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</span>
|
||||
@@ -91,7 +94,6 @@ const closeDialog = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="border rounded-2xl w-full max-w-[800px]">
|
||||
<div class="py-5 uppercase ml-4">Bannière et image de profil</div>
|
||||
<div class="flex flex-col w-full">
|
||||
@@ -145,7 +147,7 @@ const closeDialog = () => {
|
||||
@click="openDialog('ColorsPicker', 'menu')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
|
||||
<span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
|
||||
<span class="flex-auto text-left pr-6">couleur des entêtes de menus</span>
|
||||
<span class="flex-auto text-left pr-6">Couleur des entêtes de menus</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-eyedropper-variant</v-icon>
|
||||
</span>
|
||||
@@ -182,7 +184,8 @@ const closeDialog = () => {
|
||||
<button
|
||||
@click="openDialog('Socials')"
|
||||
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
|
||||
<span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/x.svg" width="23px" height="23px"></span>
|
||||
<span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/x.svg" width="23px"
|
||||
height="23px"></span>
|
||||
<span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
|
||||
<span class="flex-none">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
|
||||
55
src/views/creators/CreatorAbout.vue
Normal file
55
src/views/creators/CreatorAbout.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
|
||||
@click="AboutUs = true"
|
||||
>
|
||||
<v-icon style="font-size: 35px; height: 35px; width: 55px;">
|
||||
mdi-information
|
||||
</v-icon>
|
||||
</button>
|
||||
|
||||
<v-dialog v-model="AboutUs" max-width="500px">
|
||||
<v-card>
|
||||
|
||||
<v-card-title>
|
||||
{{ creator.about.title }}
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="scrollable-content">
|
||||
{{ creator.about.description }}
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text class="ml-auto" @click="AboutUs = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
|
||||
const AboutUs = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
creator: {type: Object, required: true},
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scrollable-content {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scrollable-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div class="py-8" ref="container">
|
||||
<div class="text-center text-2xl py-4 border-t-4">À propos de vous</div>
|
||||
<div class="px-5 relative">
|
||||
<div class="flex flex-col space-y-4">
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Prénom</label>
|
||||
</div>
|
||||
<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="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="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 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.phoneNumber" 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="user.birthDate" label="Date de naissance" variant="outlined"
|
||||
:rules="[dateRule]"></v-text-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-lg">Pays</label>
|
||||
</div>
|
||||
<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="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="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="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="user.description" label="Description" variant="outlined"></v-textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
user
|
||||
});
|
||||
|
||||
const dateRule = value => {
|
||||
const datePattern = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/;
|
||||
return datePattern.test(value) || 'Format de date invalide (JJ/MM/AAAA)';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Votre style ici */
|
||||
</style>
|
||||
@@ -60,12 +60,12 @@
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex flex-wrap items-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
|
||||
<AboutYou :creator="creator"></AboutYou>
|
||||
|
||||
<creator-about :creator="creator"></creator-about>
|
||||
|
||||
<subscribe-button :creator="creator"></subscribe-button>
|
||||
|
||||
<publish-content-button :creator="creator"/>
|
||||
|
||||
<publish-content-button :creator="creator"></publish-content-button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,7 +74,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import AboutYou from "@/views/creators/CreatorDescriptionBtn.vue";
|
||||
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
|
||||
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
|
||||
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
|
||||
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
|
||||
@click="AboutUs = true"
|
||||
>
|
||||
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
|
||||
</button>
|
||||
|
||||
<v-dialog v-model="AboutUs" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
À propos
|
||||
<br><br>
|
||||
<div class="flex justify-center">{{ creator.about }}</div>
|
||||
<br>
|
||||
</v-card-title>
|
||||
<v-card-text class="scrollable-content">
|
||||
{{ creator.description }}
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text class="ml-auto" @click="AboutUs = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const AboutUs = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
creator: { type: Object, required: true },
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
.scrollable-content::-webkit-scrollbar-thumb {
|
||||
background-color: ${props.creator.colors.menu};
|
||||
border-radius: 10px;
|
||||
}
|
||||
.scrollable-content::-webkit-scrollbar-thumb:hover {
|
||||
background-color: ${shadeColor(props.creator.colors.accent, -10)};
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
});
|
||||
|
||||
function shadeColor(color, percent) {
|
||||
const f = parseInt(color.slice(1), 16),
|
||||
t = percent < 0 ? 0 : 255,
|
||||
p = percent < 0 ? percent * -1 : percent,
|
||||
R = f >> 16,
|
||||
G = (f >> 8) & 0x00ff,
|
||||
B = f & 0x0000ff;
|
||||
return (
|
||||
"#" +
|
||||
(
|
||||
0x1000000 +
|
||||
(Math.round((t - R) * p) + R) * 0x10000 +
|
||||
(Math.round((t - G) * p) + G) * 0x100 +
|
||||
(Math.round((t - B) * p) + B)
|
||||
)
|
||||
.toString(16)
|
||||
.slice(1)
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scrollable-content {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scrollable-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.transparent-btn {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="flex flex-col md:flex-row">
|
||||
|
||||
<!-- Left Menu -->
|
||||
<div class="bg-[#f4f4f4] z-20 w-full md:max-w-xs fixed md:sticky md:top-0 md:flex md:flex-col top-0">
|
||||
<div class="sticky top-20 z-30 bg-[#f4f4f4]">
|
||||
@@ -20,22 +21,27 @@
|
||||
@mouseleave="mouseLeave"
|
||||
@mouseup="mouseUp"
|
||||
@mousemove="mouseMove">
|
||||
|
||||
<v-btn variant="text" @click="currentComponent = 'PageInformations'">
|
||||
<v-icon class="mr-2">mdi-file-edit-outline</v-icon>
|
||||
Informations de votre page
|
||||
</v-btn>
|
||||
|
||||
<v-btn variant="text" @click="currentComponent = 'PersonnalInfo'">
|
||||
<v-icon class="mr-2">mdi-information</v-icon>
|
||||
Informations personnelles
|
||||
</v-btn>
|
||||
|
||||
<v-btn variant="text" @click="currentComponent = 'ManageAccount'">
|
||||
<v-icon class="mr-2">mdi-account</v-icon>
|
||||
Gestion de Comptes
|
||||
</v-btn>
|
||||
|
||||
<v-btn variant="text" @click="currentComponent = 'AccountSecurity'">
|
||||
<v-icon class="mr-2">mdi-security</v-icon>
|
||||
Sécurité
|
||||
</v-btn>
|
||||
|
||||
</div>
|
||||
<button @click="scrollRightFunc"
|
||||
class="rounded p-1 absolute right-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl">
|
||||
@@ -50,16 +56,16 @@
|
||||
<!-- Mid Content -->
|
||||
<div class="flex flex-col flex-1 align-center py-12 p-3 mt-28 md:mt-0">
|
||||
<template v-if="currentComponent === 'ManageAccount'">
|
||||
<ManageAccount/>
|
||||
<manage-account></manage-account>
|
||||
</template>
|
||||
<template v-else-if="currentComponent === 'PageInformations'">
|
||||
<PageInformations/>
|
||||
<page-informations></page-informations>
|
||||
</template>
|
||||
<template v-else-if="currentComponent === 'PersonnalInfo'">
|
||||
<PersonnalInfo/>
|
||||
<personnal-info></personnal-info>
|
||||
</template>
|
||||
<template v-else-if="currentComponent === 'AccountSecurity'">
|
||||
<AccountSecurity/>
|
||||
<account-security></account-security>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,15 +74,12 @@
|
||||
|
||||
<script setup>
|
||||
import {ref, onMounted} from "vue";
|
||||
import {useUserStore} from "@/stores/userStore.js";
|
||||
import ManageAccount from "@/views/Profile/ManageAccount.vue";
|
||||
import PageInformations from "@/views/Profile/PageInformations.vue";
|
||||
import PersonnalInfo from "@/views/Profile/PersonnalInfo.vue";
|
||||
import AccountSecurity from "@/views/Profile/AccountSecurity.vue";
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const currentComponent = ref('PageInformations'); // Default component
|
||||
const currentComponent = ref('PersonnalInfo'); // Default component
|
||||
const isDown = ref(false);
|
||||
const startX = ref(0);
|
||||
const scrollLeft = ref(0);
|
||||
|
||||
Reference in New Issue
Block a user