Update editor
This commit is contained in:
PascalMarchesseault
@@ -1,4 +1,111 @@
|
||||
<template>
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { useClient } from "@/plugins/api.js";
|
||||
import { v7 } from "uuid";
|
||||
import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const client = useClient();
|
||||
const router = useRouter();
|
||||
const step = ref(1);
|
||||
const title = ref('');
|
||||
const message = ref('');
|
||||
const files = ref([]);
|
||||
const Thumbnail = ref();
|
||||
const ThumbnailPreview = ref(null);
|
||||
const externalUrls = ref([]);
|
||||
const warningMessage = ref('');
|
||||
const creatorProfileStore = useCreatorProfileStore();
|
||||
const carouselIndex = ref(0);
|
||||
|
||||
|
||||
const carouselItems = computed(() => {
|
||||
const images = files.value.map(file => URL.createObjectURL(file));
|
||||
const videos = externalUrls.value.filter(url => url.trim() !== '');
|
||||
return [...images, ...videos];
|
||||
});
|
||||
|
||||
watch(Thumbnail, (newFile) => {
|
||||
if (newFile) {
|
||||
ThumbnailPreview.value = URL.createObjectURL(newFile);
|
||||
} else {
|
||||
ThumbnailPreview.value = null;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const addUrl = () => externalUrls.value.push('');
|
||||
const removeUrl = (index) => externalUrls.value.splice(index, 1);
|
||||
|
||||
|
||||
const nextCarouselItem = () => {
|
||||
if (carouselItems.value.length > 0) {
|
||||
carouselIndex.value = (carouselIndex.value + 1) % carouselItems.value.length;
|
||||
}
|
||||
};
|
||||
const previousCarouselItem = () => {
|
||||
if (carouselItems.value.length > 0) {
|
||||
carouselIndex.value =
|
||||
(carouselIndex.value - 1 + carouselItems.value.length) %
|
||||
carouselItems.value.length;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const goToContentEditor = () => {
|
||||
if (!title.value || !Thumbnail.value) {
|
||||
warningMessage.value = 'Veuillez sélectionner un thumbnail et entrer un titre avant de continuer.';
|
||||
return;
|
||||
}
|
||||
warningMessage.value = '';
|
||||
step.value = 2;
|
||||
};
|
||||
|
||||
|
||||
const resetForm = () => {
|
||||
title.value = '';
|
||||
message.value = '';
|
||||
files.value = [];
|
||||
Thumbnail.value = null;
|
||||
ThumbnailPreview.value = null;
|
||||
externalUrls.value = [];
|
||||
step.value = 1;
|
||||
};
|
||||
|
||||
const publishPost = async () => {
|
||||
if (!Thumbnail.value) {
|
||||
alert("Veuillez ajouter un thumbnail avant de publier.");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('id', v7());
|
||||
formData.append('creatorId', creatorProfileStore.creator.id);
|
||||
formData.append('title', title.value);
|
||||
formData.append('description', message.value);
|
||||
formData.append('Thumbnail', Thumbnail.value);
|
||||
|
||||
files.value.forEach(file => formData.append('files', file));
|
||||
externalUrls.value.forEach(url => formData.append('externalUrls', url));
|
||||
|
||||
try {
|
||||
const response = await client.post(`/api/contents`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
console.log('Content published:', response.data);
|
||||
|
||||
|
||||
const creatorName = creatorProfileStore.creator.name;
|
||||
router.push(`/@${creatorName}/content`);
|
||||
|
||||
resetForm();
|
||||
} catch (error) {
|
||||
console.error('Error publishing content:', error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto max-w-xl p-4 shadow-md rounded-lg bg-white overflow-y-auto w-[1000px]">
|
||||
<!-- Thumbnail Editor -->
|
||||
<div v-if="step === 1" class="flex flex-col items-center">
|
||||
@@ -149,106 +256,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, computed, watch} from "vue";
|
||||
import {useClient} from "@/plugins/api.js";
|
||||
import {v7} from "uuid";
|
||||
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
|
||||
|
||||
const client = useClient();
|
||||
const step = ref(1); // Étape actuelle (1 = Thumbnail Editor, 2 = Content Editor)
|
||||
const title = ref('');
|
||||
const message = ref('');
|
||||
const files = ref([]);
|
||||
const Thumbnail = ref();
|
||||
const ThumbnailPreview = ref(null);
|
||||
const externalUrls = ref([]);
|
||||
const warningMessage = ref(''); // Message d'avertissement pour le "Next"
|
||||
const creatorProfileStore = useCreatorProfileStore();
|
||||
const carouselIndex = ref(0); // Index actif dans le carrousel
|
||||
|
||||
// Préparer les données du carrousel
|
||||
const carouselItems = computed(() => {
|
||||
const images = files.value.map(file => URL.createObjectURL(file));
|
||||
const videos = externalUrls.value.filter(url => url.trim() !== '');
|
||||
return [...images, ...videos];
|
||||
});
|
||||
|
||||
watch(Thumbnail, (newFile) => {
|
||||
if (newFile) {
|
||||
ThumbnailPreview.value = URL.createObjectURL(newFile);
|
||||
} else {
|
||||
ThumbnailPreview.value = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Gestion des URLs externes
|
||||
const addUrl = () => externalUrls.value.push('');
|
||||
const removeUrl = (index) => externalUrls.value.splice(index, 1);
|
||||
|
||||
// Navigation dans le carrousel
|
||||
const nextCarouselItem = () => {
|
||||
if (carouselItems.value.length > 0) {
|
||||
carouselIndex.value = (carouselIndex.value + 1) % carouselItems.value.length;
|
||||
}
|
||||
};
|
||||
const previousCarouselItem = () => {
|
||||
if (carouselItems.value.length > 0) {
|
||||
carouselIndex.value =
|
||||
(carouselIndex.value - 1 + carouselItems.value.length) %
|
||||
carouselItems.value.length;
|
||||
}
|
||||
};
|
||||
|
||||
// Passe à l'étape suivante avec validation
|
||||
const goToContentEditor = () => {
|
||||
if (!title.value || !Thumbnail.value) {
|
||||
warningMessage.value = 'Veuillez sélectionner un thumbnail et entrer un titre avant de continuer.';
|
||||
return;
|
||||
}
|
||||
warningMessage.value = '';
|
||||
step.value = 2;
|
||||
};
|
||||
|
||||
// Réinitialise le formulaire
|
||||
const resetForm = () => {
|
||||
title.value = '';
|
||||
message.value = '';
|
||||
files.value = [];
|
||||
Thumbnail.value = null;
|
||||
ThumbnailPreview.value = null;
|
||||
externalUrls.value = [];
|
||||
step.value = 1;
|
||||
};
|
||||
|
||||
const publishPost = async () => {
|
||||
if (!Thumbnail.value) {
|
||||
alert("Veuillez ajouter un thumbnail avant de publier.");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('id', v7());
|
||||
formData.append('creatorId', creatorProfileStore.creator.id);
|
||||
formData.append('title', title.value);
|
||||
formData.append('description', message.value);
|
||||
formData.append('Thumbnail', Thumbnail.value);
|
||||
|
||||
files.value.forEach(file => formData.append('files', file));
|
||||
externalUrls.value.forEach(url => formData.append('externalUrls', url));
|
||||
|
||||
try {
|
||||
const response = await client.post(`/api/contents`, formData, {
|
||||
headers: {'Content-Type': 'multipart/form-data'},
|
||||
});
|
||||
console.log('Content published:', response.data);
|
||||
resetForm();
|
||||
} catch (error) {
|
||||
console.error('Error publishing content:', error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.relative {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user