1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162
| <template>
<div>
<div class="bloc-fil-actualite">
<h2 class="h2_publication">Publications du forum</h2>
<div>
<div id="post" class="allPost" v-for="post in posts" v-bind:key="post.id_post">
<div >
<div class="publication" v-if="!deletingPosts.includes(post.id_post)" :key="post.id_post">
<div class="bloc_image">
<img class="img_post" v-bind:src= post.imageUrl alt="" >
</div>
<div class="post-text">
<p class="text-user" >{{post.username }} le : {{post.date_post}}</p>
<p class="post-user">{{ post.postUser}}</p>
</div>
<postUpdate v-bind:revele="revele" v-bind:toggleModale="toggleModale"></postUpdate>
<button v-on:click="toggleModale(post.id_post)" v-if="post.id_user == id_user" class="btn-updatePost"><i class="fas fa-pencil-alt"></i>Modifier</button>
<button class="btn-deletePost" @click="postDelete(post.id_post)" v-if="post.id_user == id_user" ><i class="far fa-trash-alt"></i>Supprimer</button>
<!-- <button @click="showComment = !showComment" >Répondre<CreateComment /></button> -->
<button class="btn-reply-post" v-on:click="showComments(post.id_post)" v-if="post.id_user == id_user"><i class="fas fa-reply"></i>Répondre</button>
<!-- <button v-on:click="showComments(post.id_post)" v-if="post.id_user == id_user"><i class="far fa-comments"></i>Commentaires</button> -->
<!-- <button v-on:click="showComments(post.id_post)" v-if="!vueComment.includes(post.id_post)" :key="post.id_post"><i class="far fa-comments"></i>Commentaires</button> a supprimer si sa fonctionne pas -->
<div>
<div class="Show-comment" >
<div class="all-comment-users">
<h2 class="title-comment">Commentaires...</h2>
<div v-for="comments in comment" v-bind:key="comments.id_post">
<div class="bloc-comment" v-if="!vueComment.includes(post.id_post)" :key="post.id_post">
<p>{{comments.username}} le : {{comments.date_comment}}</p>
<p>{{comments.commentUser}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import PostUpdate from '@/components/posts/PostUpdate.vue'
export default {
name: 'AllPost',
props:['id_post'],
components: {
PostUpdate,
//CreateComment,
//AllComment,
},
data(){
return{
//isDisplay: false,
deletingPosts:[],
revele:false,
posts: [],
comment: {},
id_user : localStorage.getItem('id_user'),
username : "",
postUser:"",
commentUser:"",
imageUrl :"",
date_post :"",
show: false,
showComment:[],
vueComment:[],
}
},
beforeMount(id_post){
this.id_post = localStorage.setItem('id_post', id_post)
let token = localStorage.getItem('token')
const header = {
headers: {
'Content-type': 'application/json',
'Authorization': `Bearer ${token}`
}
}
axios.get('http://localhost:3000/api/posts/', header)
.then(response =>{
console.log(response)
this.posts = response.data.result
//this.vueComment
}).catch((err) => {
console.log({err: err})
});
},
methods:{
showComments: function(post){
localStorage.setItem('id_post',post)
this.showComment = !this.showComment
//const id_post = id_post;
},
selectPost (id_post){
let token = localStorage.getItem('token')
const header = {
headers: {
'Content-type': 'application/json',
'Authorization': `Bearer ${token}`
}
}
//let id_post = localStorage.getItem('id_post')
let id_user = localStorage.getItem('id_user')
//console.log(id_post)
this.vueComment.push(id_post)
console.log(this.vueComment)
axios.get(`http://localhost:3000/api/comment/${id_user}/${id_post}/comment`, header)
.then((response) => {
console.log(response)
//this.post = response.data.results
this.comment = response.data.results
// console.log(this.comment)
this.vueComment
console.log(this.vueComment)
}).catch((err) => {
console.log({err: err})
});
},
//modale pour modifier un post
toggleModale: function(posts){
localStorage.setItem('id_post', posts)
this.revele = !this.revele
const id_post = id_post;
},
//suppression d'un post
postDelete(id_post){
this.deletingPosts.push(id_post)
this.id_post = localStorage.setItem('id_post', id_post)
let id_user = localStorage.getItem('id_user')
const token = localStorage.getItem('token')
const headers = {
headers: {
'Content-type': 'application/json',
'Authorization': `Bearer ${token}`
}
};
axios.delete(`http://localhost:3000/api/posts/delete/${id_user}/${id_post}`, headers )
.then(response => {
console.log(response)
this.deletingPosts
}).catch((error) => {
console.log(error)
})
},
}
}
</script> |
Partager