Add WIP for content and creators
This commit is contained in:
Jonathan Bourdon
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<v-img cover
|
||||
max-height="375"
|
||||
:src="creator?.portrait_url">
|
||||
</v-img>
|
||||
|
||||
<div class="w-full p-6">
|
||||
<!-- <ContentList :creator-id="creator?.id">-->
|
||||
<ContentList creator-id="00000001-0000-0000-0000-000000000001">
|
||||
</ContentList>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {onMounted, watch, ref, computed} from 'vue';
|
||||
import {useRoute} from 'vue-router';
|
||||
import {useClient} from "@/plugins/api.js";
|
||||
import ContentList from "@/views/contents/ContentList.vue";
|
||||
|
||||
const creator = ref()
|
||||
|
||||
const route = useRoute();
|
||||
const creatorAlias = computed(() => {
|
||||
return route.params.creator;
|
||||
})
|
||||
|
||||
console.log(`Opening ${creatorAlias.value} creator page`)
|
||||
|
||||
const client = useClient();
|
||||
const fetchCreatorData = async (creatorAlias) => {
|
||||
try {
|
||||
const response = await client.get(`/api/creators/@${creatorAlias}`)
|
||||
creator.value = response.data
|
||||
} catch (error) {
|
||||
console.error(`Error fetching content: ${error}`)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchCreatorData(creatorAlias.value);
|
||||
});
|
||||
|
||||
watch(creatorAlias, (newCreatorAlias) => {
|
||||
fetchCreatorData(newCreatorAlias);
|
||||
});
|
||||
|
||||
</script>
|
||||
321
src/views/creators/CreatorPage.vue
Normal file
321
src/views/creators/CreatorPage.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
|
||||
<!-- Bannière-->
|
||||
<div class="relative bottom-4 z-20 m">
|
||||
<div class="relative flex flex-col">
|
||||
|
||||
<!-- Social Network-->
|
||||
<div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24"
|
||||
:style="'background-color: #' + creatorColorTop">
|
||||
|
||||
<div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
|
||||
<div class="text-lg">1000+ Abonnés</div>
|
||||
<div class="text-sm">500 Contacts en commun</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-6 md:flex flex-wrap space-x-0 md:space-x-10 gap-6 ">
|
||||
|
||||
<a v-if="creatorFacebook"
|
||||
:href="creatorFacebook"
|
||||
target="_blank"
|
||||
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
|
||||
<v-icon>mdi-facebook</v-icon>
|
||||
</a>
|
||||
|
||||
<a v-if="creatorX"
|
||||
:href="creatorX"
|
||||
target="_blank"
|
||||
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-400">
|
||||
<v-icon>mdi-twitter</v-icon>
|
||||
</a>
|
||||
|
||||
<a v-if="creatorInstagram"
|
||||
:href="creatorInstagram" target="_blank"
|
||||
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-pink-500">
|
||||
<v-icon>mdi-instagram</v-icon>
|
||||
</a>
|
||||
|
||||
<a v-if="creatorTiktok"
|
||||
:href="creatorTiktok"
|
||||
target="_blank"
|
||||
class="transform transition-transform duration-200 hover:scale-110">
|
||||
<img src="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok" class="w-9 h-9">
|
||||
</a>
|
||||
|
||||
<a v-if="creatorYoutube"
|
||||
:href="creatorYoutube" target="_blank"
|
||||
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-red-500">
|
||||
<v-icon>mdi-youtube</v-icon>
|
||||
</a>
|
||||
|
||||
<a v-if="creatorWebsite"
|
||||
:href="creatorWebsite" target="_blank"
|
||||
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-gray-500">
|
||||
<v-icon>mdi-web</v-icon>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!--Banner & user info-->
|
||||
<div class="relative">
|
||||
<!--Banner-->
|
||||
<div>
|
||||
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)] w-[2048px] h-[569px]"
|
||||
:src="creatorBanner" alt="Profile Banner">
|
||||
</div>
|
||||
<!--User info -->
|
||||
<div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
|
||||
<div class="text-white">
|
||||
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">Guillaume</div>
|
||||
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">Mousseau</div>
|
||||
<div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">Agence Créative</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions Button & image profile -->
|
||||
<div class="relative bottom-4 w-full">
|
||||
<div class="py-4 relative shadow-lg"
|
||||
:style="'background-color: #' + creatorColorBottom">
|
||||
<div class="flex flex-col sm:flex-row items-center sm:justify-between">
|
||||
<img
|
||||
class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
|
||||
:src="creatorPortrait"
|
||||
alt="Profile Picture"
|
||||
style="border-color: rgb(70, 37, 24); max-width: 250px; width: 100%;">
|
||||
<div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
|
||||
<button
|
||||
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
|
||||
@click="isDialogActive = true">
|
||||
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
|
||||
</button>
|
||||
<button class="text-white py-2 px-4 rounded"
|
||||
style="background-color: #333; transition: background-color 0.3s ease;"
|
||||
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
|
||||
S'ABONNER
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center text-white transform transition-transform duration-200 hover:text-white hover:scale-125">
|
||||
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-comment-text</v-icon>
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
|
||||
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full mt-20">
|
||||
|
||||
<v-tabs
|
||||
v-model="tab"
|
||||
bg-color="primary"
|
||||
>
|
||||
<v-tab value="content">Contenu</v-tab>
|
||||
<v-tab value="community">Communauté</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
|
||||
<v-card-text>
|
||||
<v-tabs-window v-model="tab">
|
||||
<v-tabs-window-item value="content">
|
||||
<div class="w-full h-full p-6">
|
||||
<ContentList v-if="creatorId"
|
||||
:creator-id="creatorId">
|
||||
</ContentList>
|
||||
</div>
|
||||
</v-tabs-window-item>
|
||||
|
||||
<v-tabs-window-item value="community">
|
||||
<div>
|
||||
<div class="border-b-2 p-6">
|
||||
<PostMessage v-if="creatorId"
|
||||
:content-id="creatorId">
|
||||
</PostMessage>
|
||||
</div>
|
||||
|
||||
<div class="border-b-2 p-6">
|
||||
<h2 class="font-sans font-semibold">Commentaires</h2>
|
||||
<MessageList v-if="creatorId"
|
||||
:content-id="creatorId">
|
||||
</MessageList>
|
||||
</div>
|
||||
</div>
|
||||
</v-tabs-window-item>
|
||||
|
||||
</v-tabs-window>
|
||||
</v-card-text>
|
||||
|
||||
</div>
|
||||
|
||||
<!--Post-modale-->
|
||||
<v-dialog v-model="isDialogActive" max-width="500">
|
||||
<template v-slot:default="{ isActive }">
|
||||
<v-card class="text-center rounded-xl">
|
||||
<div class="text-white p-4 rounded-t" :style="'background-color: #' + creatorColorMenu">
|
||||
<h2>Publication</h2>
|
||||
</div>
|
||||
<v-card-text class="bg">
|
||||
<v-row class="justify-center mb-4">
|
||||
<v-col class="d-flex align-center justify-end">
|
||||
<v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
|
||||
</v-col>
|
||||
<v-col class="d-flex align-center justify-start">
|
||||
<v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
|
||||
<v-file-input
|
||||
label="Ajoutez des fichiers"
|
||||
v-model="files"
|
||||
outlined
|
||||
multiple
|
||||
dropzone
|
||||
placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
|
||||
></v-file-input>
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn color="primary" @click="publishPost">Publier</v-btn>
|
||||
<v-btn color="primary" @click="cancelPost">Annuler</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
|
||||
import {onMounted, watch, ref, computed} from 'vue';
|
||||
import {useRoute} from 'vue-router';
|
||||
import {useClient} from "@/plugins/api.js";
|
||||
import ContentList from "@/views/contents/ContentList.vue";
|
||||
import PostMessage from "@/views/messages/PostMessage.vue";
|
||||
import MessageList from "@/views/messages/MessageList.vue";
|
||||
|
||||
const tab = ref()
|
||||
|
||||
// FETCH CREATOR NAME
|
||||
const route = useRoute();
|
||||
const creatorAlias = computed(() => {
|
||||
return route.params.creator;
|
||||
})
|
||||
|
||||
// CREATOR METADATA
|
||||
const creator = ref()
|
||||
const creatorId = computed(() => {
|
||||
return creator?.value?.id
|
||||
})
|
||||
const creatorFacebook = computed(() => {
|
||||
return creator?.value?.socialNetworks?.facebookUrl
|
||||
})
|
||||
const creatorX = computed(() => {
|
||||
return creator?.value?.socialNetworks?.xUrl
|
||||
})
|
||||
const creatorWebsite = computed(() => {
|
||||
return creator?.value?.socialNetworks?.yourWebsiteUrl
|
||||
})
|
||||
const creatorTiktok = computed(() => {
|
||||
return creator?.value?.socialNetworks?.tikTokUrl
|
||||
})
|
||||
const creatorYoutube = computed(() => {
|
||||
return creator?.value?.socialNetworks?.youtubeUrl
|
||||
})
|
||||
const creatorInstagram = computed(() => {
|
||||
return creator?.value?.socialNetworks?.instagramUrl
|
||||
})
|
||||
const creatorLinkedIn = computed(() => {
|
||||
return creator?.value?.socialNetworks?.linkedInUrl
|
||||
})
|
||||
const creatorReddit = computed(() => {
|
||||
return creator?.value?.socialNetworks?.redditUrl
|
||||
})
|
||||
const creatorPortrait = computed(() => {
|
||||
return creator?.value?.storedDataUrls?.profilePictureUrl
|
||||
})
|
||||
const creatorBanner = computed(() => {
|
||||
return creator?.value?.storedDataUrls?.bannerPictureUrl
|
||||
})
|
||||
|
||||
const creatorColorTop = computed(() => {
|
||||
return creator?.value?.profileColors?.bannerTop
|
||||
})
|
||||
const creatorColorBottom = computed(() => {
|
||||
return creator?.value?.profileColors?.bannerBottom
|
||||
})
|
||||
const creatorColorAccent = computed(() => {
|
||||
return creator?.value?.profileColors?.accent
|
||||
})
|
||||
const creatorColorMenu = computed(() => {
|
||||
return creator?.value?.profileColors?.menu
|
||||
})
|
||||
|
||||
const client = useClient()
|
||||
|
||||
const fetchCreatorData = async (creatorAlias) => {
|
||||
try {
|
||||
const response = await client.get(`/api/creators/@${creatorAlias}`)
|
||||
creator.value = response.data
|
||||
console.log('loaded the following creator from api')
|
||||
console.table(creator.value.id)
|
||||
} catch (error) {
|
||||
console.error(`Error fetching content: ${error}`)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchCreatorData(creatorAlias.value);
|
||||
});
|
||||
|
||||
watch(creatorAlias, (newCreatorAlias) => {
|
||||
fetchCreatorData(newCreatorAlias);
|
||||
});
|
||||
|
||||
// POST CONTENT / POPUP DIALOG
|
||||
|
||||
const isDialogActive = ref(false);
|
||||
const message = ref('');
|
||||
const files = ref([]);
|
||||
const isArticle = ref(false);
|
||||
|
||||
const publishPost = () => {
|
||||
// Logic to publish post
|
||||
console.log('Post published:', message.value, files.value);
|
||||
isDialogActive.value = false;
|
||||
resetPostForm();
|
||||
};
|
||||
|
||||
const cancelPost = () => {
|
||||
isDialogActive.value = false;
|
||||
resetPostForm();
|
||||
};
|
||||
|
||||
const resetPostForm = () => {
|
||||
message.value = '';
|
||||
files.value = [];
|
||||
};
|
||||
|
||||
const togglePostType = (article) => {
|
||||
isArticle.value = article;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.v-btn--active {
|
||||
background-color: #1976D2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user