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

Adds About for Creators

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-08-07 14:25:49 -04:00
parent 76d35ce6a9
commit a8d6c42060
7 changed files with 166 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/views/Profile/Dialogs/PageInformations/About.vue Normal file
View 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>

45
src/views/Profile/PageInformations.vue
View File

@@ -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">
<v-icon>mdi-chevron-right</v-icon>
<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>
</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>