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

Upload thumbnail required

Browse Source
This commit is contained in:
PascalMarchesseault
2024-11-24 20:26:56 -05:00
parent 25c6305bcc
commit a97e22908d
1 changed files with 86 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/views/contents/QuickyContentEditor.vue
View File

@@ -1,8 +1,8 @@
<script setup> <script setup>
import {useClient} from '@/plugins/api.js'; import { useClient } from '@/plugins/api.js';
import {ref} from 'vue'; import { ref } from 'vue';
import {v7} from 'uuid'; import { v7 } from 'uuid';
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js"; import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
const client = useClient(); const client = useClient();
const title = ref(''); const title = ref('');
@@ -22,61 +22,61 @@ const removeUrl = (index) => {
}; };
async function publishPost() { async function publishPost() {
const formData = new FormData(); // Validation : le thumbnail est obligatoire
formData.append('id', v7()); if (!Thumbnail.value) {
formData.append('creatorId', creatorProfileStore.creator.id); alert("Veuillez ajouter un thumbnail avant de publier."); // Utilisez une alerte ou une notification Vuetify
formData.append('title', title.value); return;
formData.append('description', message.value);
if (Thumbnail.value) {
formData.append('thumbnail', Thumbnail.value);
} }
const formData = new FormData();
formData.append('id', v7()); // UUID pour l'ID du contenu
formData.append('creatorId', creatorProfileStore.creator.id); // Récupère l'ID du créateur
formData.append('title', title.value);
formData.append('description', message.value);
// Ajout du thumbnail
formData.append('Thumbnail', Thumbnail.value);
// Ajout des fichiers
files.value.forEach(file => { files.value.forEach(file => {
formData.append('files', file); formData.append('files', file); // Ajoute les fichiers au FormData
}); });
// Ajout des URLs externes
externalUrls.value.forEach(url => {
formData.append('externalUrls', url); // Les URLs sont ajoutées comme tableau
externalUrls.value.forEach(externalUrl => {
formData.append('externalUrls', externalUrl);
}); });
try { try {
const content = await client.post( const response = await client.post(
`/api/contents/`, `/api/contents`,
formData, formData,
{ {
headers: { headers: {
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data',
} },
}); },
);
console.log('Content published:', response.data);
title.value = ''; resetForm(); // Réinitialise le formulaire après le succès
message.value = '';
files.value = [];
Thumbnail.value = '';
externalUrls.value = [];
} catch (error) { } catch (error) {
console.error(error); console.error('Error publishing content:', error);
} }
} }
const cancelPost = () => { const resetForm = () => {
title.value = ''; title.value = '';
message.value = ''; message.value = '';
files.value = []; files.value = [];
Thumbnail.value = null; Thumbnail.value = null;
externalUrls.value = []; externalUrls.value = [];
}; };
const cancelPost = resetForm;
</script> </script>
<template> <template>
<v-form> <v-form>
<v-card class="text-center rounded-xl w-[600px]"> <v-card class="text-center rounded-xl w-[600px]">
@@ -85,72 +85,70 @@ const cancelPost = () => {
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-text-field v-model="title" <v-text-field
class="p-2" v-model="title"
label="Titre" label="Titre"
density="comfortable" density="comfortable"
variant="outlined" variant="outlined"
hide-details clearable
clearable />
></v-text-field> <v-textarea
v-model="message"
<v-textarea v-model="message" label="Message"
label="Écrivez votre message ici..." density="comfortable"
class="p-2" variant="outlined"
density="comfortable" clearable
variant="outlined" />
hide-details
clearable
outlined
></v-textarea>
<!-- Ajout des URLs externes -->
<div v-for="(url, index) in externalUrls" :key="index" class="d-flex align-center"> <div v-for="(url, index) in externalUrls" :key="index" class="d-flex align-center">
<v-text-field v-model="externalUrls[index]" <v-text-field
class="p-2 flex-grow-1" v-model="externalUrls[index]"
label="Url Externe" label="URL externe"
density="comfortable" density="comfortable"
variant="outlined" variant="outlined"
hide-details />
></v-text-field> <v-btn icon @click="removeUrl(index)">
<v-btn icon @click="removeUrl(index)" class="ml-2">
<v-icon>mdi-minus</v-icon> <v-icon>mdi-minus</v-icon>
</v-btn> </v-btn>
</div> </div>
<v-btn icon @click="addUrl" class="mt-2"> <v-btn icon @click="addUrl">
<v-icon>mdi-plus</v-icon> <v-icon>mdi-plus</v-icon>
</v-btn> </v-btn>
<v-file-input v-model="Thumbnail"
label="Glissez votre Thumbnail"
class="p-2 custom-file-input"
variant="outlined"
dropzone
prepend-icon=""
placeholder="Glissez et déposez un fichier ici ou cliquez pour sélectionner un fichier"
></v-file-input>
<!-- Ajout du thumbnail -->
<v-file-input
v-model="Thumbnail"
label="Thumbnail (obligatoire)"
variant="outlined"
dropzone
clearable
:rules="[value => !!value || 'Un thumbnail est obligatoire']"
/>
<!-- Ajout des fichiers -->
<v-file-input v-model="files" <v-file-input
label="Glissez vos images" v-model="files"
class="p-2 custom-file-input" label="Images"
variant="outlined" variant="outlined"
multiple multiple
dropzone dropzone
prepend-icon="" />
placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
></v-file-input>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-btn variant="flat" <v-btn
@click="cancelPost" variant="flat"
class="p-20"> @click="cancelPost"
Cancel >
Annuler
</v-btn> </v-btn>
<v-btn variant="flat" <v-btn
color="primary" variant="flat"
@click="publishPost"> color="primary"
@click="publishPost"
>
Publier Publier
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>