added comments

Nacnus · Feb 21, 2024 · 195af7f · 195af7f
1 parent fbb331c
commit 195af7f
Showing 1 changed file with 101 additions and 35 deletions.
diff --git a/pages/index.vue b/pages/index.vue
@@ -86,6 +86,7 @@
                 </v-card-subtitle>
               </v-btn>
             </v-row>
+
             <v-row>
               <v-col
                 v-for="(item,i) in postItems"
@@ -111,9 +112,11 @@
             </v-row>
           </v-col>
         </v-card>
+
         <v-divider class="mb-2" />
+
         <v-card
-          v-for="(item,i) in posts.results"
+          v-for="(item,i) in posts"
           :key="i"
           class="elevation-0 card-border mb-2"
         >
@@ -128,30 +131,74 @@
           <v-card-text style="color:black">
             {{ item.text }}
           </v-card-text>
+
           <v-divider class="mb-2" />
-          <v-row>
-            <v-col
-              v-for="(bar,a) in likeBar"
-              :key="a"
+
+          <v-btn
+            text
+            class="ml-6 mb-2"
+            @click="postLike(item)"
+          >
+            <v-icon
+              :color="item.liked ? 'blue' : 'grey'"
             >
-              <v-btn
-                text
-                class="ml-1 mb-2"
-              >
-                <v-icon
-                  :color="bar.color"
-                >
-                  {{ bar.icon }}
-                </v-icon>
-                <v-card-text
-                  style="color:rgba(102, 102, 102, 0.60)"
-                  class="text-capitalize pa-0 ml-1"
-                >
-                  {{ bar.text }}
-                </v-card-text>
-              </v-btn>
-            </v-col>
-          </v-row>
+              mdi-thumb-up-outline
+            </v-icon>
+            <v-card-text
+              style="color:rgba(102, 102, 102, 0.60)"
+              class="text-capitalize pa-0 ml-1"
+            >
+              Beğen
+            </v-card-text>
+          </v-btn>
+          <v-btn
+            text
+            class="ml-6 mb-2"
+            @click="showComments(item)"
+          >
+            <v-icon
+              color="grey"
+            >
+              mdi-message-text-outline
+            </v-icon>
+            <v-card-text
+              style="color:rgba(102, 102, 102, 0.60)"
+              class="text-capitalize pa-0 ml-1"
+            >
+              Yorum Yap
+            </v-card-text>
+          </v-btn>
+          <v-btn
+            v-for="(bar,a) in likeBar"
+            :key="a"
+            text
+            class="ml-6 mb-2"
+          >
+            <v-icon
+              :color="bar.color"
+            >
+              {{ bar.icon }}
+            </v-icon>
+            <v-card-text
+              style="color:rgba(102, 102, 102, 0.60)"
+              class="text-capitalize pa-0 ml-1"
+            >
+              {{ bar.text }}
+            </v-card-text>
+          </v-btn>
+
+          <v-card v-if="item.commentVisible">
+            <v-text-field v-model="newComment" @keydown.enter="commentSend(item,newComment)" />
+            <v-btn @click="commentSend(item, $event.target.value)">
+              GÖNDER
+            </v-btn>
+          </v-card>
+
+          <v-card v-if="item.comments && item.comments.length > 0">
+            <v-card-title v-for="(comment, index) in item.comments" :key="index">
+              {{ comment.text }}
+            </v-card-title>
+          </v-card>
         </v-card>
       </v-col>
 
@@ -161,7 +208,7 @@
           class="mt-4 mr-4 justify-start elevation-0 card-border"
           width="300"
         >
-          Footer kısmı
+          footer kısmı
         </v-card>
       </v-col>
     </v-row>
@@ -178,18 +225,10 @@ export default {
       dialog: false,
       postItem: '',
       posts: [],
+      newComment: null,
       media_file: null,
+      commentVisible: false,
       likeBar: [
-        {
-          icon: 'mdi-thumb-up-outline',
-          color: 'grey',
-          text: 'Beğen'
-        },
-        {
-          icon: 'mdi-message-text-outline',
-          color: 'grey',
-          text: 'Yorum Yap'
-        },
         {
           icon: 'mdi-sync',
           color: 'grey',
@@ -227,7 +266,11 @@ export default {
     postGet () {
       this.$axios.$get(process.env.POSTS_URL)
         .then((response) => {
-          this.posts = response
+          this.posts = response.results.map(post => ({
+            ...post,
+            commentVisible: false,
+            comments: null
+          }))
         })
     },
     postCreate () {
@@ -240,11 +283,34 @@ export default {
       this.media_file = null
       this.dialog = false
     },
+    postLike (item) {
+      item.liked = !item.liked
+      this.$axios.post(process.env.POST_LIKE_URL.replace('{uuid}', item.uuid))
+    },
     logout () {
       this.$auth.logout()
         .then(() => {
           this.$router.push('/auth/login')
         })
+    },
+    showComments (item) {
+      item.commentVisible = true
+      const params = {
+        post: item.uuid
+      }
+      this.$axios.$get(process.env.POST_COMMENT_URL, { params })
+        .then((response) => {
+          item.comments = response
+        })
+    },
+    commentSend (item, newComment) {
+      const params = {
+        text: newComment
+      }
+      this.$axios.$post('/api/pages/comment/', params)
+        .then((res) => {
+          console.log(res)
+        })
     }
   }
 }