ajouter les fonctions add ,edit,remove article

pages/index.vue

@@ -1,17 +1,56 @@
-
 <template>
   <div class="background">
-    <main>
-     
+     <main>
       <video controls width="640">
-      <source src="/videos/video.mp4" type="video/mp4" />
-      Your browser does not support the video tag.
-    </video>
+        <source src="/videos/video.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
       <ContentDoc />
+      <div id="app">
+        <h2>Ajouter un nouvel article</h2>
+        <form @submit.prevent="addArticle">
+          <div>
+            <label for="title">Titre :</label>
+            <input type="text" id="title" v-model="newArticle.title" required />
+          </div>
+          <div>
+            <label for="content">Contenu :</label>
+            <textarea id="content" v-model="newArticle.content" required></textarea>
+          </div>
+          <button type="submit">Ajouter l'article</button>
+        </form>
+
+        <h2> Nouveaux Articles </h2>
+        <!-- Liste des articles -->
+        <div v-for="(article, index) in articles" :key="index" class="article">
+          <h3>{{ article.title }}</h3>
+          <p>{{ article.content }}</p>
+          <button @click="editArticle(index)">Modifier</button>
+          <button @click="deleteArticle(index)">Supprimer</button>
+        </div>
+
+        <!-- Formulaire de modification -->
+        <div v-if="isEditing" class="edit-form">
+          <h2>Modifier l'article</h2>
+          <form @submit.prevent="updateArticle">
+            <div>
+              <label for="edit-title">Titre :</label>
+              <input type="text" id="edit-title" v-model="currentArticle.title" required />
+            </div>
+            <div>
+              <label for="edit-content">Contenu :</label>
+              <textarea id="edit-content" v-model="currentArticle.content" required></textarea>
+            </div>
+            <button type="submit">Mettre à jour</button>
+          </form>
+        </div>
+      </div>
+
       <section class="forum">
         <h2>Forum Public</h2>
+        <!-- Forum content -->
         <div v-for="(post, index) in posts" :key="index" class="post">
-          <p><strong>Article {{ post.articleNumber }}:</strong> </p>
+          <p><strong>Article {{ post.articleNumber }}:</strong></p>
           <div class="actions">
             <button @click="upvote(index)">👍 {{ post.votes }}</button>
             <button @click="downvote(index)">👎</button>
@@ -20,16 +59,15 @@
           <button @click="addReply(index)">Commenter</button>
           <div v-if="post.replies.length > 0" class="replies">
             <h4>Commentaires :</h4>
-            <ul>
-              <li v-for="(reply, rIndex) in post.replies" :key="rIndex">{{ reply }}</li>
+            <ul class="no-spacing">
+              <li v-for="(reply, rIndex) in post.replies" :key="rIndex">
+                {{ reply.content }} - <em>{{ reply.date }}</em>
+              </li>
             </ul>
           </div>
         </div>
-        <textarea v-model="newPost" placeholder="Ajouter un nouveau message"></textarea>
-        <button @click="addPost">Publier</button>
       </section>
-      
-<section class="signature">
+      <section class="signature">
   <h2>Signer la Charte</h2>
   <form @submit.prevent="submitSignature">
     <input v-model="name" placeholder="Nom complet" required />
@@ -42,58 +80,81 @@
     <h3>Signatures enregistrées :</h3>
     <ul>
       <li v-for="signature in signatures" :key="signature.email">
-        <strong>{{ signature.name }}</strong> - {{ signature.comment }}
+        <strong>{{ signature.name }}</strong> - {{ signature.comment }} - <em>{{ signature.date }}</em>
       </li>
     </ul>
   </div>
 </section>
-
     </main>
   </div>
 </template>
 
-
 <script>
 export default {
   data() {
     return {
-  
-      // Forum data
+      newArticle: { title: "", content: "" },
+      articles: [],
+      isEditing: false,
+      currentArticle: null,
+      currentArticleIndex: null,
       posts: Array.from({ length: 20 }, (_, i) => ({
         articleNumber: i + 1,
         votes: 0,
         replies: [],
       })),
-      newPost: "",
       replies: [],
-      name: "",
-      email: "",
-      comment: "",
       signatures: [], // Initialize signatures as an empty array
       signatureSuccess: false,
     };
   },
   methods: {
-    addPost() {
-      if (this.newPost.trim()) {
-        this.posts.push({
-          articleNumber: this.posts.length + 1,
-          content: this.newPost,
-          votes: 0,
-          replies: [],
-        });
-        this.newPost = "";
+    addArticle() {
+      if (this.newArticle.title && this.newArticle.content) {
+        this.articles.push({ ...this.newArticle });
+        this.newArticle.title = "";
+        this.newArticle.content = "";
+      } else {
+        alert("Veuillez remplir tous les champs.");
       }
     },
+    deleteArticle(index) {
+      this.articles.splice(index, 1);
+    },
+    editArticle(index) {
+      this.isEditing = true;
+      this.currentArticleIndex = index;
+      this.currentArticle = { ...this.articles[index] };
+    },
+    updateArticle() {
+      if (this.currentArticle && this.currentArticle.title && this.currentArticle.content) {
+        // Met à jour l'article dans la liste
+        this.articles[this.currentArticleIndex] = { ...this.currentArticle };
+        // Réinitialise les variables
+        this.isEditing = false;
+        this.currentArticle = null;
+        this.currentArticleIndex = null;
+      } else {
+        alert("Veuillez remplir tous les champs avant de mettre à jour.");
+      }
+    },
+    cancelEdit() {
+      this.isEditing = false;
+      this.currentArticle = null;
+      this.currentArticleIndex = null;
+    },
     upvote(index) {
-      this.posts[index].votes += 1;
+      this.posts[index].votes++;
     },
     downvote(index) {
-      this.posts[index].votes -= 1;
+      this.posts[index].votes--;
     },
     addReply(index) {
       if (this.replies[index]?.trim()) {
-        this.posts[index].replies.push(this.replies[index]);
+        this.posts[index].replies.push({
+          content: this.replies[index],
+          date: new Date().toLocaleString(),
+        });
         this.replies[index] = "";
       }
     },
@@ -103,6 +164,7 @@ export default {
           name: this.name,
           email: this.email,
           comment: this.comment,
+          date: new Date().toLocaleString(),
         });
         this.signatureSuccess = true;
 
@@ -118,14 +180,19 @@ export default {
 };
 </script>
 
-
 <style scoped>
-.background {
-  padding: 20px;
+.article {
+  margin-bottom: 20px;
+  margin: 20px ;
 }
-.forum {
-  margin: 20px 0;
+.edit-form {
+  margin-top: 20px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #f9f9f9;
 }
+
 .post {
   border: 1px solid #F5F5F5;
   padding: 10px;
@@ -152,6 +219,7 @@ export default {
   border: 1px solid #474405;
   border-radius: 8px;
   background-color: #F5F5F5;
+  margin-bottom: 5cm;
 }
 
 .forum h2 {
@@ -224,6 +292,7 @@ button:hover {
 }
 
 .replies h4 {
+margin-bottom: 5px;
   font-size: 18px;
   color: #474405;
 }
@@ -244,7 +313,8 @@ button:hover {
   padding: 15px;
   border: 1px solid #474405;
   border-radius: 8px;
-  background-color:  #F5F5F5;
+  background-color: #F5F5F5;
+  margin-bottom: 1cm;
 }
 
 .signature h2 {
@@ -293,6 +363,65 @@ h3{
   border-bottom: none;
   
 }
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-align: center;
+  color: #6A994E;
+  margin-top: 4cm;
+  border: 1px solid #474405;
+  border-radius: 8px;
+  padding: 10px;
+  margin-bottom: 5cm;
+ 
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  color: #474405;
+  
+}
+input,
+textarea {
+  padding: 8px;
+  margin-bottom: 10px;
+  width: 100%;
+  margin-top: 5px;
+  font-size: 10px;
+  resize: vertical;
+ 
+  
+}
+button {
+  padding: 10px 20px;
+  background-color: #6A994E;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #218838;
+}
+form {
+  margin: 20px 0;
+  padding: 15px;
+  border: 1px solid #474405;
+  border-radius: 8px;
+  background-color: #F5F5F5;
+  margin-bottom: 1cm;
+  
+ }
+ h3{
+  color: #474405;
+ }
+ button {
+  margin-right: 10px; /* Espace à droite du bouton */
+}
+
+/* Exemple spécifique pour le deuxième bouton */
+button:last-child {
+  margin-right: 0; /* Pas d'espace après le dernier bouton */
+}
 </style>