Add content creation
This commit is contained in:
Jonathan Bourdon
42
src/views/contents/ContentCard.vue
Normal file
42
src/views/contents/ContentCard.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div class=" shadow-lg rounded-lg max-w-sm">
|
||||
|
||||
<div class="h-48 object-cover bg-purple">
|
||||
|
||||
<v-img :src="props.content.url"
|
||||
v-if="!isHttpUrl">
|
||||
</v-img>
|
||||
|
||||
<iframe v-if="isHttpUrl"
|
||||
:src="props.content.banner"
|
||||
title="YouTube video player"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-lg font-bold">{{ props.content.title }}</div>
|
||||
<div class="text-sm text-gray-500">{{ props.content.title }}</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {defineProps, computed} from 'vue';
|
||||
|
||||
const isHttpUrl = computed(() => props.content.url.startsWith('http'))
|
||||
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: Object,
|
||||
required: true,
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
37
src/views/contents/ContentList.vue
Normal file
37
src/views/contents/ContentList.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
|
||||
<div class="flex">
|
||||
<ContentCard v-for="content in contents"
|
||||
:content="content"
|
||||
class="m-2 bg-red w-full">
|
||||
</ContentCard>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {useClient} from '@/plugins/api.js';
|
||||
import {defineProps, onBeforeMount, ref} from 'vue';
|
||||
import ContentCard from "./ContentCard.vue";
|
||||
|
||||
const props = defineProps({
|
||||
creatorId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const client = useClient();
|
||||
const contents = ref();
|
||||
|
||||
onBeforeMount(async () => {
|
||||
try {
|
||||
const response = await client.get(`/api/contents/user/${props.creatorId}`)
|
||||
contents.value = response.data
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch posts", error);
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
74
src/views/contents/ContentPage.vue
Normal file
74
src/views/contents/ContentPage.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
|
||||
<div class="flex flex-column w-full">
|
||||
|
||||
<div class="border-b-2 p-6 font-sans space-y-2">
|
||||
<div v-if="data && data.uri">
|
||||
Uri: {{ data?.uri }}
|
||||
</div>
|
||||
<div v-if="data && data.title" class="font-semibold">
|
||||
Title: {{ data?.title }}
|
||||
</div>
|
||||
<div v-if="data && data.description">
|
||||
Description: {{ data?.description }}
|
||||
</div>
|
||||
<div v-if="data && data.createdAt">
|
||||
Date: {{ data?.createdAt }}
|
||||
</div>
|
||||
<div v-if="data && data.createdBy">
|
||||
Creator: {{ data?.createdBy }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-b-2 p-6">
|
||||
<PostMessage :content-id="contentId">
|
||||
</PostMessage>
|
||||
</div>
|
||||
|
||||
<div class="border-b-2 p-6">
|
||||
<h2 class="font-sans font-semibold">Commentaires</h2>
|
||||
<MessageList :content-id="contentId">
|
||||
</MessageList>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup async>
|
||||
import PostMessage from "@/views/messages/PostMessage.vue";
|
||||
import MessageList from "@/views/messages/MessageList.vue";
|
||||
import {useClient} from "@/plugins/api.js";
|
||||
import {onMounted, watch, ref, computed} from 'vue';
|
||||
import {useRoute} from 'vue-router';
|
||||
|
||||
const data = ref()
|
||||
|
||||
const route = useRoute()
|
||||
const client = useClient()
|
||||
|
||||
const contentId = computed(() => {
|
||||
return route.params.contentId;
|
||||
});
|
||||
|
||||
const fetchContentData = async (contentId) => {
|
||||
try {
|
||||
const response = await client.get(`/api/contents/${contentId}`)
|
||||
data.value = response.data
|
||||
} catch (error) {
|
||||
console.error(`Error fetching content: ${error}`)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchContentData(contentId.value);
|
||||
});
|
||||
|
||||
watch(contentId, (newContentId) => {
|
||||
fetchContentData(newContentId);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
106
src/views/contents/PostContent.vue
Normal file
106
src/views/contents/PostContent.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
|
||||
<div class="flex flex-column">
|
||||
|
||||
<div class="h-full bg-yellow p-2 rounded-2xl m-4">
|
||||
<post-content-menu></post-content-menu>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column m-4 gap-4">
|
||||
<v-form>
|
||||
<v-file-input
|
||||
v-model="selectedFile"
|
||||
label="Select Image"
|
||||
accept="image/*"
|
||||
prepend-icon="mdi-camera"
|
||||
@change="onFileSelected">
|
||||
</v-file-input>
|
||||
|
||||
<v-img
|
||||
v-if="url"
|
||||
:src="url"
|
||||
max-height="375"
|
||||
contain
|
||||
></v-img>
|
||||
|
||||
<v-text-field
|
||||
v-model="title"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
label="Titre"
|
||||
hide-details
|
||||
clearable>
|
||||
</v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="description"
|
||||
density="comfortable"
|
||||
variant="outlined"
|
||||
label="Description"
|
||||
hide-details
|
||||
clearable>
|
||||
</v-text-field>
|
||||
|
||||
</v-form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-2 p-2 justify-end">
|
||||
<v-btn style="border-radius: 20px" variant="text">Canceller</v-btn>
|
||||
<v-btn style="border-radius: 20px" @click="publish">Publier</v-btn>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// import posts from "@/views/posts/posts.json";
|
||||
|
||||
import {useClient} from '@/plugins/api.js';
|
||||
import {defineProps, ref} from 'vue';
|
||||
import PostContentMenu from "@/views/contents/PostContentMenu.vue";
|
||||
|
||||
const props = defineProps({
|
||||
contentId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const client = useClient();
|
||||
|
||||
const selectedFile = ref("");
|
||||
const url = ref("");
|
||||
const title = ref("");
|
||||
const description = ref("");
|
||||
|
||||
const onFileSelected = () => {
|
||||
if (selectedFile.value) {
|
||||
const fileReader = new FileReader();
|
||||
fileReader.readAsDataURL(selectedFile.value);
|
||||
fileReader.onload = () => {
|
||||
url.value = fileReader.result;
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const publish = async () => {
|
||||
const response = await client.post(
|
||||
`/api/contents/`,
|
||||
{
|
||||
"url": url.value,
|
||||
"title": title.value,
|
||||
"description": description.value
|
||||
})
|
||||
|
||||
if (response.status !== 200) {
|
||||
console.info(`Content created!`)
|
||||
} else {
|
||||
console.error(`Failed to create content ${response.data}`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
148
src/views/contents/PostContentMenu.vue
Normal file
148
src/views/contents/PostContentMenu.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
|
||||
<div class="flow">
|
||||
<button @click="selectType('title')">
|
||||
<v-icon>mdi-format-title</v-icon>
|
||||
</button>
|
||||
|
||||
<button @click="selectType('text')">
|
||||
<v-icon>mdi-text</v-icon>
|
||||
</button>
|
||||
|
||||
<button @click="selectType('image')">
|
||||
<v-icon>mdi-image</v-icon>
|
||||
</button>
|
||||
<button @click="selectType('video')">
|
||||
<v-icon>mdi-video</v-icon>
|
||||
</button>
|
||||
|
||||
<button @click="selectType('audio')">
|
||||
<v-icon>mdi-volume-high</v-icon>
|
||||
</button>
|
||||
|
||||
<button @click="selectType('comments')">
|
||||
<v-icon>mdi-comment</v-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Affichage du contenu en fonction du type sélectionné -->
|
||||
<!-- <v-card-text>-->
|
||||
<!-- <v-row v-for="(content, index) in contents" :key="index" class="draggable-row"-->
|
||||
<!-- @dragstart="dragStart(index)" @dragover.prevent @drop="drop(index)" draggable="true">-->
|
||||
<!-- <v-col cols="10">-->
|
||||
<!-- <template v-if="content.type === 'title'">-->
|
||||
<!-- <v-text-field v-model="content.value" label="Titre"></v-text-field>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else-if="content.type === 'text'">-->
|
||||
<!-- <v-textarea v-model="content.value" label="Texte"></v-textarea>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else-if="content.type === 'image'">-->
|
||||
<!-- <v-row>-->
|
||||
|
||||
<!-- <v-col cols="12">-->
|
||||
<!-- <v-file-input v-model="content.value" label="Image"></v-file-input>-->
|
||||
<!-- </v-col>-->
|
||||
<!-- </v-row>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else-if="content.type === 'video'">-->
|
||||
<!-- <v-text-field v-model="content.value" label="URL de la vidéo"></v-text-field>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else-if="content.type === 'audio'">-->
|
||||
<!-- <v-row>-->
|
||||
<!-- <v-col cols="2">-->
|
||||
<!-- <v-icon>mdi-volume-high</v-icon>-->
|
||||
<!-- </v-col>-->
|
||||
<!-- <v-col cols="10">-->
|
||||
<!-- <v-file-input v-model="content.value" label="Audio"></v-file-input>-->
|
||||
<!-- </v-col>-->
|
||||
<!-- </v-row>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else-if="content.type === 'comments'">-->
|
||||
<!-- <v-text-field v-model="content.value" label="Commentaires"></v-text-field>-->
|
||||
<!-- </template>-->
|
||||
<!-- </v-col>-->
|
||||
<!-- <v-col cols="2" class="d-flex justify-center align-center">-->
|
||||
<!-- <button icon @click="removeContent(index)" class="remove-button">-->
|
||||
<!-- <v-icon>mdi-close</v-icon>-->
|
||||
<!-- </button>-->
|
||||
<!-- </v-col>-->
|
||||
<!-- </v-row>-->
|
||||
<!-- </v-card-text>-->
|
||||
|
||||
<!-- <!– Boutons Post, Preview et Cancel –>-->
|
||||
<!-- <v-row v-if="contents.length > 0" justify="end" style="margin-bottom: 10px;">-->
|
||||
<!-- <v-col class="d-flex justify-end" style="margin-right: 4%;">-->
|
||||
<!-- <button style="margin-right: 15px;" @click="postContent" color="white" dark-->
|
||||
<!-- elevation="4">Post-->
|
||||
<!-- </button>-->
|
||||
<!-- <button style="margin-right: 15px;" @click="previewContent" color="white" dark-->
|
||||
<!-- elevation="5">Preview-->
|
||||
<!-- </button>-->
|
||||
<!-- <button @click="cancelPost" color="white" dark elevation="5">Cancel</button>-->
|
||||
<!-- </v-col>-->
|
||||
<!-- </v-row>-->
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
|
||||
const contents = ref([]);
|
||||
let dragIndex = null;
|
||||
|
||||
const selectType = (type) => {
|
||||
console.log("Type sélectionné:", type);
|
||||
contents.value.push({type: type, value: ''});
|
||||
};
|
||||
|
||||
const removeContent = (index) => {
|
||||
contents.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const postContent = () => {
|
||||
// Implémenter la logique pour poster le contenu
|
||||
};
|
||||
|
||||
const previewContent = () => {
|
||||
// Implémenter la logique pour prévisualiser le contenu
|
||||
};
|
||||
|
||||
const cancelPost = () => {
|
||||
if (contents.value.length > 0) {
|
||||
// Réinitialiser le tableau contents pour supprimer tous les contenus
|
||||
contents.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
const dragStart = (index) => {
|
||||
dragIndex = index;
|
||||
};
|
||||
|
||||
const drop = (index) => {
|
||||
if (dragIndex !== null && index !== null) {
|
||||
const draggedItem = contents.value[dragIndex];
|
||||
contents.value.splice(dragIndex, 1);
|
||||
contents.value.splice(index, 0, draggedItem);
|
||||
dragIndex = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.remove-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: -20%;
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
margin-top: 10px;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
|
||||
.draggable-row {
|
||||
cursor: grab;
|
||||
}
|
||||
</style>
|
||||
40
src/views/contents/contents.json
Normal file
40
src/views/contents/contents.json
Normal file
@@ -0,0 +1,40 @@
|
||||
[
|
||||
{
|
||||
"id": "00000002-0000-0000-0000-000000000001",
|
||||
"url": "https://www.youtube.com/embed/neKWqjE0eSs?si=Bo7xbYaw9-56w3lU",
|
||||
"description": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy.",
|
||||
"created_by": {
|
||||
"id": "00000001-0000-0000-0000-000000000001",
|
||||
"alias": "@marchy"
|
||||
},
|
||||
"created_at": "",
|
||||
"thumb_up_count": 0,
|
||||
"thumb_down_count": 0
|
||||
},
|
||||
{
|
||||
"id": "00000002-0000-0000-0000-000000000002",
|
||||
"url": "/images/usersmedia/HutopyProfile/pictures/version.png",
|
||||
"title": "Déploiement de la version 0.10 d'Hutopy",
|
||||
"description": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy.",
|
||||
"created_by": {
|
||||
"id": "00000001-0000-0000-0000-000000000001",
|
||||
"alias": "@marchy",
|
||||
"portrait_url": ""
|
||||
},
|
||||
"created_at": "",
|
||||
"thumb_up_count": 0,
|
||||
"thumb_down_count": 0
|
||||
},
|
||||
{
|
||||
"id": "00000002-0000-0000-0000-000000000003",
|
||||
"url": "/images/usersmedia/HutopyProfile/pictures/version.png",
|
||||
"description": "Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une aventure visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de fraîcheur en favorisant des interactions plus constructives entre les individus. Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur. Dans un futur proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites via l'onglet d'inscription et ont rempli quelques questions. Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La première consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire partie de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire progresser certaines fonctionnalités. Merci de visiter Hutopy.",
|
||||
"created_by": {
|
||||
"id": "00000001-0000-0000-0000-000000000001",
|
||||
"alias": "@marchy"
|
||||
},
|
||||
"created_at": "",
|
||||
"thumb_up_count": 0,
|
||||
"thumb_down_count": 0
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user