Update editor

src/views/contents/QuickyContentEditor.vue

@@ -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;