Commit 2b91d45ce43d13b31ceabb85246d92c6c4a2547c
1 parent
145dd9bdec
Exists in
master
new ui fixes
Showing
11 changed files
with
1459 additions
and
547 deletions
Show diff stats
src/components/AuthorIntro.vue
| ... | ... | @@ -2,17 +2,8 @@ |
| 2 | 2 | <main class="landing-page"> |
| 3 | 3 | |
| 4 | 4 | <div class="container-fluid episode-intro"> |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | - <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a> | |
| 7 | - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
| 8 | - <span class="navbar-toggler-icon"></span> | |
| 9 | - <span class="navbar-toggler-icon"></span> | |
| 10 | - <span class="navbar-toggler-icon"></span> | |
| 11 | - </button> | |
| 12 | - <div class="user-profile-photo insights-profile"> | |
| 13 | - <a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a> | |
| 14 | - </div> | |
| 15 | - </nav> | |
| 5 | + <Header></Header> | |
| 6 | + | |
| 16 | 7 | <!-- menu wrapper --> |
| 17 | 8 | <div class="intro-startup"> |
| 18 | 9 | <div class="smasung-g-10wrp"> |
| ... | ... | @@ -71,8 +62,12 @@ |
| 71 | 62 | <script> |
| 72 | 63 | import Vue from "vue"; |
| 73 | 64 | import router from "../router"; |
| 65 | +import Header from "./Header"; | |
| 74 | 66 | |
| 75 | 67 | export default { |
| 68 | + components: { | |
| 69 | + Header: Header, | |
| 70 | + }, | |
| 76 | 71 | name: "AuthorIntro", |
| 77 | 72 | |
| 78 | 73 | data() { | ... | ... |
src/components/EpisodeIntro.vue
| ... | ... | @@ -2,7 +2,7 @@ |
| 2 | 2 | <main class="landing-page"> |
| 3 | 3 | |
| 4 | 4 | <div class="container-fluid episode-intro"> |
| 5 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | + <!-- <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 6 | 6 | <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a> |
| 7 | 7 | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> |
| 8 | 8 | <span class="navbar-toggler-icon"></span> |
| ... | ... | @@ -12,7 +12,9 @@ |
| 12 | 12 | <div class="user-profile-photo insights-profile"> |
| 13 | 13 | <a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a> |
| 14 | 14 | </div> |
| 15 | - </nav> | |
| 15 | + </nav> --> | |
| 16 | + <Header></Header> | |
| 17 | + | |
| 16 | 18 | <!-- menu wrapper --> |
| 17 | 19 | <div class="startup-wrp"> |
| 18 | 20 | |
| ... | ... | @@ -90,10 +92,13 @@ |
| 90 | 92 | <script> |
| 91 | 93 | import Vue from "vue"; |
| 92 | 94 | import router from "../router"; |
| 95 | +import Header from "./Header"; | |
| 93 | 96 | |
| 94 | 97 | export default { |
| 95 | 98 | name: "EpisodeIntro", |
| 96 | - | |
| 99 | +components: { | |
| 100 | + Header: Header, | |
| 101 | + }, | |
| 97 | 102 | data() { |
| 98 | 103 | return { |
| 99 | 104 | allSlide:[], | ... | ... |
src/components/Header.vue
| ... | ... | @@ -0,0 +1,101 @@ |
| 1 | +<template> | |
| 2 | + <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 3 | + <a class="navbar-brand" href="javasript:void(0);" @click="goTo" | |
| 4 | + ><img src="../assets/images/logo.png" | |
| 5 | + /></a> | |
| 6 | + <button | |
| 7 | + class="navbar-toggler" | |
| 8 | + type="button" | |
| 9 | + data-toggle="collapse" | |
| 10 | + data-target="#navbarsExample03" | |
| 11 | + aria-controls="navbarsExample03" | |
| 12 | + aria-expanded="false" | |
| 13 | + aria-label="Toggle navigation" | |
| 14 | + > | |
| 15 | + <span class="navbar-toggler-icon"></span> | |
| 16 | + <span class="navbar-toggler-icon"></span> | |
| 17 | + <span class="navbar-toggler-icon"></span> | |
| 18 | + </button> | |
| 19 | + | |
| 20 | + <div class="collapse navbar-collapse" id="navbarsExample03"> | |
| 21 | + <!-- <ul class="navbar-nav mr-auto"> | |
| 22 | + <li class="nav-item active"> | |
| 23 | + <a class="nav-link" href="javasript:void(0);">About</a> | |
| 24 | + </li> | |
| 25 | + <li class="nav-item"> | |
| 26 | + <a class="nav-link" href="javasript:void(0);">Masterclass</a> | |
| 27 | + </li> | |
| 28 | + <li class="nav-item"> | |
| 29 | + <a class="nav-link" href="javasript:void(0);">Stories</a> | |
| 30 | + </li> | |
| 31 | + <li class="nav-item"> | |
| 32 | + <a class="nav-link" href="javasript:void(0);">Library</a> | |
| 33 | + </li> | |
| 34 | + </ul> --> | |
| 35 | + </div> | |
| 36 | + <div class=""> | |
| 37 | + <a @click="goTo" href="javascript:void(0);" class="user-profile-photo common_color" | |
| 38 | + ><img :src="profilePictue" | |
| 39 | + /></a> | |
| 40 | + <div class="sub-menu-user" id="userprofileshow" style="display: none"> | |
| 41 | + <!-- <ul> | |
| 42 | + <li> | |
| 43 | + <a href="javascript:void(0);" | |
| 44 | + >Edit Profile</a | |
| 45 | + > | |
| 46 | + </li> | |
| 47 | + <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> | |
| 48 | + </ul> --> | |
| 49 | + </div> | |
| 50 | + </div> | |
| 51 | + </nav> | |
| 52 | +</template> | |
| 53 | + | |
| 54 | +<script> | |
| 55 | +import $ from "jquery"; | |
| 56 | +import axios from "axios"; | |
| 57 | +export default { | |
| 58 | + name: "Header", | |
| 59 | + data() { | |
| 60 | + return { | |
| 61 | + usertoken:null, | |
| 62 | + profilePictue:null, | |
| 63 | + }; | |
| 64 | + }, | |
| 65 | + mounted() { | |
| 66 | + var userdata = localStorage.getItem("spotlight_usertoken"); | |
| 67 | + if (userdata) { | |
| 68 | + userdata = JSON.parse(userdata); | |
| 69 | + this.usertoken = userdata.token; | |
| 70 | + this.getProfile(); | |
| 71 | + } | |
| 72 | + }, | |
| 73 | + methods: { | |
| 74 | + goTo() { | |
| 75 | + this.$router.push("/profile"); | |
| 76 | + }, | |
| 77 | + getProfile() { | |
| 78 | + axios | |
| 79 | + .get("/profile", { | |
| 80 | + headers: { | |
| 81 | + Authorization: "Bearer " + this.usertoken, | |
| 82 | + }, | |
| 83 | + }) | |
| 84 | + .then((response) => { | |
| 85 | + this.assignClass(response.data.data.bgColor); | |
| 86 | + this.profilePictue = response.data.data.profilePic; | |
| 87 | + console.log(response.data.data); | |
| 88 | + }) | |
| 89 | + .catch((error) => console.log(error)); | |
| 90 | + }, | |
| 91 | + assignClass(bgClr) { | |
| 92 | + var cols = document.getElementsByClassName("common_color"); | |
| 93 | + for (var i = 0; i < cols.length; i++) { | |
| 94 | + cols[i].style.backgroundColor = bgClr; | |
| 95 | + } | |
| 96 | + }, | |
| 97 | + } | |
| 98 | + , | |
| 99 | + | |
| 100 | +}; | |
| 101 | +</script> | ... | ... |
src/components/NoScreenshotSingleAuthor.vue
| 1 | 1 | <template> |
| 2 | 2 | <main class="landing-page"> |
| 3 | 3 | <div class="container-fluid episode-intro"> |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="javascript:void(0);" | |
| 6 | - ><img src="../assets/images/logo.png" | |
| 7 | - /></a> | |
| 8 | - <button | |
| 9 | - class="navbar-toggler" | |
| 10 | - type="button" | |
| 11 | - data-toggle="collapse" | |
| 12 | - data-target="#navbarsExample03" | |
| 13 | - aria-controls="navbarsExample03" | |
| 14 | - aria-expanded="false" | |
| 15 | - aria-label="Toggle navigation" | |
| 16 | - > | |
| 17 | - <span class="navbar-toggler-icon"></span> | |
| 18 | - <span class="navbar-toggler-icon"></span> | |
| 19 | - <span class="navbar-toggler-icon"></span> | |
| 20 | - </button> | |
| 21 | - <div class="user-profile-photo insights-profile"> | |
| 22 | - <a href="javascript:void(0);"><img src="../assets/images/lock.svg" /></a> | |
| 23 | - </div> | |
| 24 | - </nav> | |
| 4 | + <Header></Header> | |
| 5 | + | |
| 25 | 6 | <!-- menu wrapper --> |
| 26 | 7 | <div class="intro-startup"> |
| 27 | - | |
| 28 | - <!-- chat box --> | |
| 8 | +<!-- chat box --> | |
| 29 | 9 | <div class="bounce-board-wrp" id="cht_box_close"> |
| 30 | 10 | <div class="inner-wrp-bc"> |
| 31 | 11 | <div class="bc-top-head"> |
| ... | ... | @@ -67,13 +47,12 @@ |
| 67 | 47 | </div> |
| 68 | 48 | <!-- top head --> |
| 69 | 49 | <div class="bounce-board-body"> |
| 70 | - | |
| 71 | 50 | <!-- all user comments --> |
| 72 | 51 | <ul class="bounced-user-comments"> |
| 73 | 52 | <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> |
| 74 | 53 | <div class="bc_brd_l"></div> |
| 75 | 54 | <!-- border --> |
| 76 | - <div class="parent-full-width"> | |
| 55 | + <div class="parent-full-width" v-if="cmnt.comment"> | |
| 77 | 56 | <div class="full-width"> |
| 78 | 57 | <div class="b-user-head"> |
| 79 | 58 | <img :src="cmnt.user.profilePic" /> |
| ... | ... | @@ -85,7 +64,9 @@ |
| 85 | 64 | cmnt.user.karmaPoints |
| 86 | 65 | }}pts |
| 87 | 66 | </li> |
| 88 | - <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li> | |
| 67 | + <li> | |
| 68 | + <span></span>{{ dateGenerator(cmnt.createdAt) }} | |
| 69 | + </li> | |
| 89 | 70 | </ul> |
| 90 | 71 | </div> |
| 91 | 72 | <!-- header --> |
| ... | ... | @@ -95,13 +76,32 @@ |
| 95 | 76 | <div class="joined_wrapper"> |
| 96 | 77 | <ul class="joined-info info_bc_spc"> |
| 97 | 78 | <li> |
| 98 | - <img src="../assets/images/purple-heart.png" /> | |
| 79 | + <img | |
| 80 | + src="../assets/images/heart.svg" | |
| 81 | + v-if="cmnt.like == false" | |
| 82 | + @click="likeComment(true, cmnt._id)" | |
| 83 | + class="cursor-pointer" | |
| 84 | + /> | |
| 85 | + <img | |
| 86 | + src="../assets/images/purple-heart.png" | |
| 87 | + v-if="cmnt.like == true" | |
| 88 | + @click="likeComment(false, cmnt._id)" | |
| 89 | + class="cursor-pointer" | |
| 90 | + /> | |
| 91 | + </li> | |
| 92 | + <li> | |
| 93 | + <a href="javasript:void(0);"> | |
| 94 | + {{ cmnt.likes.length }}</a | |
| 95 | + > | |
| 99 | 96 | </li> |
| 100 | - <li><a href="javasript:void(0);"> 0</a></li> | |
| 101 | 97 | <li class="comment-spc"> |
| 102 | 98 | <img src="../assets/images/purple-comment.png" /> |
| 103 | 99 | </li> |
| 104 | - <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li> | |
| 100 | + <li> | |
| 101 | + <a href="javasript:void(0);"> | |
| 102 | + {{ cmnt.children.length }}</a | |
| 103 | + > | |
| 104 | + </li> | |
| 105 | 105 | </ul> |
| 106 | 106 | <div class="add_rply" v-if="!cmnt.childInput"> |
| 107 | 107 | <input |
| ... | ... | @@ -118,7 +118,7 @@ |
| 118 | 118 | <!-- full width --> |
| 119 | 119 | </div> |
| 120 | 120 | <div class="comments-footer each-ft" v-if="cmnt.childInput"> |
| 121 | - <textarea v-model="comment"></textarea> | |
| 121 | + <textarea v-model="comment" id="childInput"></textarea> | |
| 122 | 122 | <div class="comments-footer-wrp"> |
| 123 | 123 | <a |
| 124 | 124 | @click="createChildComment(cmnt)" |
| ... | ... | @@ -126,42 +126,69 @@ |
| 126 | 126 | class="add_comments_chat reply-Wdth" |
| 127 | 127 | >Reply</a |
| 128 | 128 | > |
| 129 | - <a href="javasript:void(0);" class="discard_bt" | |
| 130 | - @click="discardRply(cmnt)"><img src="../assets/images/discard.svg" | |
| 129 | + <a | |
| 130 | + href="javasript:void(0);" | |
| 131 | + class="discard_bt" | |
| 132 | + @click="discardRply(cmnt)" | |
| 133 | + ><img src="../assets/images/discard.svg" | |
| 131 | 134 | /></a> |
| 132 | 135 | </div> |
| 133 | 136 | </div> |
| 134 | 137 | <!-- parent --> |
| 135 | - <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i"> | |
| 138 | + <div | |
| 139 | + class="child-full-width" | |
| 140 | + v-for="(childCmnt, i) in cmnt.children" | |
| 141 | + :key="i" | |
| 142 | + > | |
| 136 | 143 | <div class="full-width"> |
| 137 | 144 | <div class="b-user-head"> |
| 138 | 145 | <img :src="childCmnt.user.profilePic" /> |
| 139 | - <span class="head-content">{{childCmnt.user.name }} </span> | |
| 146 | + <span class="head-content" | |
| 147 | + >{{ childCmnt.user.name }} | |
| 148 | + </span> | |
| 140 | 149 | <ul> |
| 141 | 150 | <li> |
| 142 | 151 | <span></span |
| 143 | - ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts | |
| 152 | + ><img src="../assets/images/u-info-icon.png" />{{ | |
| 153 | + childCmnt.user.karmaPoints | |
| 154 | + }}pts | |
| 155 | + </li> | |
| 156 | + <li> | |
| 157 | + <span></span | |
| 158 | + >{{ dateGenerator(childCmnt.createdAt) }} | |
| 144 | 159 | </li> |
| 145 | - <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li> | |
| 146 | 160 | </ul> |
| 147 | 161 | </div> |
| 148 | 162 | <p> |
| 149 | - {{childCmnt.comment}} | |
| 163 | + {{ childCmnt.comment }} | |
| 150 | 164 | </p> |
| 151 | 165 | <div class="joined_wrapper"> |
| 152 | 166 | <ul class="joined-info info_bc_spc"> |
| 153 | 167 | <li> |
| 154 | - <img src="../assets/images/purple-heart.png" /> | |
| 168 | + <img | |
| 169 | + src="../assets/images/heart.svg" | |
| 170 | + v-if="childCmnt.like == false" | |
| 171 | + @click="likeComment(true, childCmnt._id)" | |
| 172 | + class="cursor-pointer" | |
| 173 | + /> | |
| 174 | + <img | |
| 175 | + src="../assets/images/purple-heart.png" | |
| 176 | + v-if="childCmnt.like == true" | |
| 177 | + @click="likeComment(false, childCmnt._id)" | |
| 178 | + class="cursor-pointer" | |
| 179 | + /> | |
| 180 | + </li> | |
| 181 | + <li> | |
| 182 | + <a href="javasript:void(0);"> | |
| 183 | + {{ childCmnt.likes.length }}</a | |
| 184 | + > | |
| 155 | 185 | </li> |
| 156 | - <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li> | |
| 157 | - | |
| 158 | 186 | </ul> |
| 159 | - | |
| 160 | 187 | </div> |
| 161 | 188 | </div> |
| 162 | 189 | </div> |
| 163 | 190 | <!-- eree --> |
| 164 | - | |
| 191 | + | |
| 165 | 192 | <!-- comments footer --> |
| 166 | 193 | </li> |
| 167 | 194 | </ul> |
| ... | ... | @@ -188,19 +215,36 @@ |
| 188 | 215 | <div class="single-author-comments"> |
| 189 | 216 | <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> --> |
| 190 | 217 | <div class="ct-l-400"> |
| 191 | - <div class="single-author-li-comments"> | |
| 218 | + <div class="single-author-li-comments" v-if="commentExistCheck(0)"> | |
| 192 | 219 | <div class="a-intro-comments right-corner"> |
| 193 | 220 | <p> |
| 194 | - {{currentSlideData.payload.comments[0].comment}} | |
| 221 | + {{commentList[0].comment}} | |
| 195 | 222 | </p> |
| 196 | 223 | <ul class="rly-comment-set"> |
| 224 | + <!-- like/dislike --> | |
| 197 | 225 | <li> |
| 198 | - <img src="../assets/images/color-heart.svg" /> | |
| 199 | - <a href="javascript:void(0);">0</a> | |
| 226 | + <img | |
| 227 | + src="../assets/images/heart.svg" | |
| 228 | + v-if="commentList[0].like == false" | |
| 229 | + @click="likeComment(true, commentList[0]._id)" | |
| 230 | + class="cursor-pointer" | |
| 231 | + /> | |
| 232 | + <img | |
| 233 | + src="../assets/images/purple-heart.png" | |
| 234 | + v-if="commentList[0].like == true" | |
| 235 | + @click="likeComment(false, commentList[0]._id)" | |
| 236 | + class="cursor-pointer" | |
| 237 | + /> | |
| 238 | + <a href="javascript:void(0);">{{ | |
| 239 | + commentList[0].likes.length | |
| 240 | + }}</a> | |
| 200 | 241 | </li> |
| 242 | + <!-- like/dislike ends --> | |
| 201 | 243 | <li> |
| 202 | 244 | <img src="../assets/images/rply.svg" /> |
| 203 | - <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | |
| 245 | + <a href="javascript:void(0);" @click="reply_cht_box(0)" | |
| 246 | + >Reply</a | |
| 247 | + > | |
| 204 | 248 | </li> |
| 205 | 249 | </ul> |
| 206 | 250 | </div> |
| ... | ... | @@ -212,67 +256,113 @@ |
| 212 | 256 | :src="currentSlideData.payload.metaData.authorImage" |
| 213 | 257 | /> |
| 214 | 258 | <div class="comments-a-wrp ct-width"> |
| 215 | - <div class="single-author-li-comments"> | |
| 259 | + <div class="single-author-li-comments" v-if="commentExistCheck(1)"> | |
| 216 | 260 | <div class="a-intro-comments"> |
| 217 | 261 | <p> |
| 218 | - {{currentSlideData.payload.comments[0].comment}} | |
| 262 | + {{commentList[1].comment}} | |
| 219 | 263 | </p> |
| 220 | 264 | <ul class="rly-comment-set"> |
| 265 | + <!-- like/dislike --> | |
| 221 | 266 | <li> |
| 222 | - <img src="../assets/images/color-heart.svg" /> | |
| 223 | - <a href="javascript:void(0);">0</a> | |
| 267 | + <img | |
| 268 | + src="../assets/images/heart.svg" | |
| 269 | + v-if="commentList[1].like == false" | |
| 270 | + @click="likeComment(true, commentList[1]._id)" | |
| 271 | + class="cursor-pointer" | |
| 272 | + /> | |
| 273 | + <img | |
| 274 | + src="../assets/images/purple-heart.png" | |
| 275 | + v-if="commentList[1].like == true" | |
| 276 | + @click="likeComment(false, commentList[1]._id)" | |
| 277 | + class="cursor-pointer" | |
| 278 | + /> | |
| 279 | + <a href="javascript:void(0);">{{ | |
| 280 | + commentList[1].likes.length | |
| 281 | + }}</a> | |
| 224 | 282 | </li> |
| 283 | + <!-- like/dislike ends --> | |
| 225 | 284 | <li> |
| 226 | 285 | <img src="../assets/images/rply.svg" /> |
| 227 | - <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | |
| 286 | + <a href="javascript:void(0);" @click="reply_cht_box(1)" | |
| 287 | + >Reply</a | |
| 288 | + > | |
| 228 | 289 | </li> |
| 229 | 290 | </ul> |
| 230 | 291 | </div> |
| 231 | 292 | <!-- comments box --> |
| 232 | 293 | </div> |
| 233 | 294 | <!-- single author comments --> |
| 234 | - <div class="single-author-li-comments"> | |
| 295 | + <div class="single-author-li-comments" v-if="commentExistCheck(2)"> | |
| 235 | 296 | <div class="a-intro-comments"> |
| 236 | 297 | <p> |
| 237 | - {{currentSlideData.payload.comments[1].comment}} | |
| 298 | + {{commentList[2].comment}} | |
| 238 | 299 | </p> |
| 239 | 300 | <ul class="rly-comment-set"> |
| 301 | + <!-- like/dislike --> | |
| 240 | 302 | <li> |
| 241 | - <img src="../assets/images/color-heart.svg" /> | |
| 242 | - <a href="javascript:void(0);">0</a> | |
| 303 | + <img | |
| 304 | + src="../assets/images/heart.svg" | |
| 305 | + v-if="commentList[2].like == false" | |
| 306 | + @click="likeComment(true, commentList[2]._id)" | |
| 307 | + class="cursor-pointer" | |
| 308 | + /> | |
| 309 | + <img | |
| 310 | + src="../assets/images/purple-heart.png" | |
| 311 | + v-if="commentList[2].like == true" | |
| 312 | + @click="likeComment(false, commentList[2]._id)" | |
| 313 | + class="cursor-pointer" | |
| 314 | + /> | |
| 315 | + <a href="javascript:void(0);">{{ | |
| 316 | + commentList[2].likes.length | |
| 317 | + }}</a> | |
| 243 | 318 | </li> |
| 319 | + <!-- like/dislike ends --> | |
| 244 | 320 | <li> |
| 245 | 321 | <img src="../assets/images/rply.svg" /> |
| 246 | - <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | |
| 322 | + <a href="javascript:void(0);" @click="reply_cht_box(2)" | |
| 323 | + >Reply</a | |
| 324 | + > | |
| 247 | 325 | </li> |
| 248 | 326 | </ul> |
| 249 | 327 | </div> |
| 250 | 328 | <!-- comments box --> |
| 251 | 329 | </div> |
| 252 | - <div class="single-author-li-comments"> | |
| 330 | + <!-- coment box 3 --> | |
| 331 | + <!-- <div class="single-author-li-comments" v-if="commentExistCheck(3)"> | |
| 253 | 332 | <div class="a-intro-comments"> |
| 254 | 333 | <p> |
| 255 | - {{currentSlideData.payload.comments[2].comment}} | |
| 334 | + {{commentList[3].comment}} | |
| 256 | 335 | </p> |
| 257 | - <!-- <p> | |
| 258 | - Before I dive in to showcase my observations and userflows | |
| 259 | - that stood out to me in the app, I want to call out that the | |
| 260 | - situation or time-frame in which I was using the app is | |
| 261 | - extremely important for what I am about to show as well. | |
| 262 | - </p> --> | |
| 263 | - <ul class="rly-comment-set"> | |
| 336 | + <ul class="rly-comment-set"> | |
| 264 | 337 | <li> |
| 265 | - <img src="../assets/images/color-heart.svg" /> | |
| 266 | - <a href="javascript:void(0);">0</a> | |
| 338 | + <img | |
| 339 | + src="../assets/images/heart.svg" | |
| 340 | + v-if="commentList[3].like == false" | |
| 341 | + @click="likeComment(true, commentList[2]._id)" | |
| 342 | + class="cursor-pointer" | |
| 343 | + /> | |
| 344 | + <img | |
| 345 | + src="../assets/images/purple-heart.png" | |
| 346 | + v-if="commentList[3].like == true" | |
| 347 | + @click="likeComment(false, commentList[3]._id)" | |
| 348 | + class="cursor-pointer" | |
| 349 | + /> | |
| 350 | + <a href="javascript:void(0);">{{ | |
| 351 | + commentList[3].likes.length | |
| 352 | + }}</a> | |
| 267 | 353 | </li> |
| 268 | 354 | <li> |
| 269 | 355 | <img src="../assets/images/rply.svg" /> |
| 270 | - <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | |
| 356 | + <a href="javascript:void(0);" @click="reply_cht_box(3)" | |
| 357 | + >Reply</a | |
| 358 | + > | |
| 271 | 359 | </li> |
| 272 | 360 | </ul> |
| 273 | 361 | </div> |
| 274 | - <!-- comments box --> | |
| 275 | - </div> | |
| 362 | + </div> --> | |
| 363 | + <!-- coment box 3 --> | |
| 364 | + | |
| 365 | + | |
| 276 | 366 | <!-- single author comments --> |
| 277 | 367 | <!-- <div class="a-intro-comments custom-selected-author-style"> |
| 278 | 368 | <img src="../assets/images/org-rect.svg" class="rect" /> |
| ... | ... | @@ -299,19 +389,19 @@ |
| 299 | 389 | <div class="ft-comments-group testi-photos-ct"> |
| 300 | 390 | <div class="c-with-photos"> |
| 301 | 391 | <span class="count-comments" |
| 302 | - >{{ commentList.length - 1 }}+ Comments</span | |
| 392 | + >{{ getLastcomment("count", commentList) }}+ | |
| 393 | + Comments</span | |
| 303 | 394 | ><!-- count commets --> |
| 304 | 395 | <ul class="comments-photos"> |
| 305 | - <!-- <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 306 | - <li><img src="../assets/images/c-photo-2.png" /></li> --> | |
| 396 | + <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> | |
| 397 | + <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> | |
| 307 | 398 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> |
| 308 | - <!-- <li><img :src="commentList[commentList.length - 1].user.profilePic" /></li> --> | |
| 309 | 399 | </ul> |
| 310 | 400 | <!-- comment photos --> |
| 311 | 401 | </div> |
| 312 | 402 | <div class="comments-detail all-c-space"> |
| 313 | 403 | <span |
| 314 | - >{{ commentList[commentList.length - 1].user.name }} | |
| 404 | + >{{ getLastcomment("name", commentList) }} | |
| 315 | 405 | <a href="javascript:void(0);" @click="open_ct_box" |
| 316 | 406 | >View All</a |
| 317 | 407 | ></span |
| ... | ... | @@ -319,7 +409,7 @@ |
| 319 | 409 | <p> |
| 320 | 410 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 321 | 411 | and “Pickup and Drop... --> |
| 322 | - {{ commentList[commentList.length - 1].comment }} | |
| 412 | + {{ getLastcomment("msg", commentList) }} | |
| 323 | 413 | </p> |
| 324 | 414 | </div> |
| 325 | 415 | <!-- comments detail --> |
| ... | ... | @@ -395,8 +485,12 @@ import Vue from "vue"; |
| 395 | 485 | import router from "../router"; |
| 396 | 486 | import axios from "axios"; |
| 397 | 487 | import moment from 'moment'; |
| 488 | +import Header from "./Header"; | |
| 398 | 489 | |
| 399 | 490 | export default { |
| 491 | + components: { | |
| 492 | + Header: Header, | |
| 493 | + }, | |
| 400 | 494 | name: "noscreenshotSingleautho", |
| 401 | 495 | |
| 402 | 496 | data() { |
| ... | ... | @@ -545,7 +639,7 @@ export default { |
| 545 | 639 | goToSignUp() { |
| 546 | 640 | this.$router.push("/"); |
| 547 | 641 | }, |
| 548 | - chtbox_close() { | |
| 642 | + chtbox_close() { | |
| 549 | 643 | $("#cht_box_close").removeClass("cht_close"); |
| 550 | 644 | $("#open_ct_box, .c_hide").show(); |
| 551 | 645 | $(".footer-top").addClass("white-bg"); |
| ... | ... | @@ -558,11 +652,76 @@ export default { |
| 558 | 652 | eachRply(cmnt) { |
| 559 | 653 | cmnt.childInput = true; |
| 560 | 654 | this.parentInput = false; |
| 655 | + this.comment = null; | |
| 656 | + setTimeout(() => { | |
| 657 | + document.getElementById("childInput").focus(); | |
| 658 | + }, 100); | |
| 561 | 659 | }, |
| 562 | 660 | discardRply(cmnt) { |
| 563 | 661 | cmnt.childInput = false; |
| 564 | 662 | this.parentInput = true; |
| 565 | - | |
| 663 | + this.comment = null; | |
| 664 | + }, | |
| 665 | + reply_cht_box(i) { | |
| 666 | + console.log(this.commentList, "cmnt"); | |
| 667 | + $("#cht_box_close").addClass("cht_close"); | |
| 668 | + $("#open_ct_box, .c_hide").hide(); | |
| 669 | + $(".footer-top").removeClass("white-bg"); | |
| 670 | + this.commentList[i].childInput = true; | |
| 671 | + this.parentInput = false; | |
| 672 | + this.comment = null; | |
| 673 | + setTimeout(() => { | |
| 674 | + document.getElementById("childInput").focus(); | |
| 675 | + }, 100); | |
| 676 | + }, | |
| 677 | + likeComment(status, id) { | |
| 678 | + console.log("===", this.comment); | |
| 679 | + var obj = { | |
| 680 | + commentId: id, | |
| 681 | + like: status, | |
| 682 | + }; | |
| 683 | + axios | |
| 684 | + .post("/bounceBoard/like", obj, { | |
| 685 | + headers: { | |
| 686 | + Authorization: "Bearer " + this.usertoken, | |
| 687 | + }, | |
| 688 | + }) | |
| 689 | + .then((response) => { | |
| 690 | + this.getComment(); | |
| 691 | + console.log(response); | |
| 692 | + }) | |
| 693 | + .catch((error) => { | |
| 694 | + if (error.response) { | |
| 695 | + this.$toaster.error(error.response.data.message); | |
| 696 | + } | |
| 697 | + }); | |
| 698 | + }, | |
| 699 | + getLastcomment(flag, commentArray) { | |
| 700 | + var finalComment = null; | |
| 701 | + var totalMessage = 0; | |
| 702 | + var name = null; | |
| 703 | + commentArray.forEach((comment_) => { | |
| 704 | + if (comment_.comment != null) { | |
| 705 | + name = comment_.user.name; | |
| 706 | + finalComment = comment_.comment; | |
| 707 | + totalMessage++; | |
| 708 | + } | |
| 709 | + }); | |
| 710 | + if (flag == "count") { | |
| 711 | + return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | |
| 712 | + } else if (flag =="name") { | |
| 713 | + return (name = name); | |
| 714 | + } else { | |
| 715 | + return finalComment; | |
| 716 | + } | |
| 717 | + }, | |
| 718 | + commentExistCheck(i) { | |
| 719 | + console.log(this.commentList[i].comment); | |
| 720 | + var returnValue = false; | |
| 721 | + if (this.commentList[i].comment) { | |
| 722 | + returnValue = true; | |
| 723 | + } | |
| 724 | + return returnValue; | |
| 566 | 725 | }, |
| 567 | 726 | }, |
| 568 | 727 | }; | ... | ... |
src/components/Profile.vue
| ... | ... | @@ -362,6 +362,8 @@ |
| 362 | 362 | </div> |
| 363 | 363 | </div> |
| 364 | 364 | </nav> |
| 365 | + | |
| 366 | + <!-- <Header></Header> --> | |
| 365 | 367 | <!-- menu wrapper --> |
| 366 | 368 | <div class="row profile-tab-spc-top"> |
| 367 | 369 | <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> |
| ... | ... | @@ -454,11 +456,10 @@ |
| 454 | 456 | </li> |
| 455 | 457 | </ul> |
| 456 | 458 | </div> |
| 457 | - <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> | |
| 459 | + <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right"> | |
| 458 | 460 | <ul class="social-connects" v-if="selectedSocialLink.length > 0"> |
| 459 | 461 | <li><span>Follow</span></li> |
| 460 | 462 | <li v-for="(social, i) in selectedSocialLink" :key="i"> |
| 461 | - | |
| 462 | 463 | <a |
| 463 | 464 | href="javascript:void(0);" |
| 464 | 465 | @click="openUrl(social.fieldValue)" |
| ... | ... | @@ -467,9 +468,9 @@ |
| 467 | 468 | /></a> |
| 468 | 469 | </li> |
| 469 | 470 | </ul> |
| 470 | - <ul class="social-connects" v-if="selectedSocialLink.length == 0"> | |
| 471 | + <ul class="social-connects" v-if="selectedSocialLink.length == 0"> | |
| 471 | 472 | <li> |
| 472 | - <a | |
| 473 | + <a | |
| 473 | 474 | href="javascript:void(0);" |
| 474 | 475 | @click="addProfileDialog" |
| 475 | 476 | class="active cursor-pointer" |
| ... | ... | @@ -655,9 +656,12 @@ import Vue from "vue"; |
| 655 | 656 | import router from "../router"; |
| 656 | 657 | import $ from "jquery"; |
| 657 | 658 | import axios from "axios"; |
| 658 | - | |
| 659 | +import Header from "./Header"; | |
| 659 | 660 | export default { |
| 660 | 661 | name: "Profile", |
| 662 | + components: { | |
| 663 | + Header: Header, | |
| 664 | + }, | |
| 661 | 665 | data: () => ({ |
| 662 | 666 | loggedinFlag: false, |
| 663 | 667 | usertoken: null, |
| ... | ... | @@ -738,7 +742,7 @@ export default { |
| 738 | 742 | displayName: "Dribble", |
| 739 | 743 | fieldName: "dribble", |
| 740 | 744 | fieldValue: null, |
| 741 | - image:require(`../assets/images/dribbble.png`), | |
| 745 | + image: require(`../assets/images/dribbble.png`), | |
| 742 | 746 | }, |
| 743 | 747 | { |
| 744 | 748 | displayName: "Github", |
| ... | ... | @@ -756,7 +760,7 @@ export default { |
| 756 | 760 | displayName: "Instagram", |
| 757 | 761 | fieldName: "instagram", |
| 758 | 762 | fieldValue: null, |
| 759 | - image:require(`../assets/images/instagram.png`), | |
| 763 | + image: require(`../assets/images/instagram.png`), | |
| 760 | 764 | }, |
| 761 | 765 | ], |
| 762 | 766 | selectedSocialLink: [], |
| ... | ... | @@ -815,7 +819,7 @@ export default { |
| 815 | 819 | this.selectedSocialLink.push({ |
| 816 | 820 | displayName: this.socialLink[j].displayName, |
| 817 | 821 | fieldName: this.socialLink[j].fieldName, |
| 818 | - image: this.socialLink[j].image, | |
| 822 | + image: this.socialLink[j].image, | |
| 819 | 823 | fieldValue: null, |
| 820 | 824 | }); |
| 821 | 825 | } else { |
| ... | ... | @@ -827,7 +831,7 @@ export default { |
| 827 | 831 | this.userData.socialMediaProfiles[name] = null; |
| 828 | 832 | this.selectedSocialLink.splice(i, 1); |
| 829 | 833 | }, |
| 830 | - | |
| 834 | + | |
| 831 | 835 | addInterest() { |
| 832 | 836 | console.log(this.userData.interests.length, "called", this.interestName); |
| 833 | 837 | if (this.userData.interests.length <= 2) { |
| ... | ... | @@ -1124,4 +1128,10 @@ export default { |
| 1124 | 1128 | .padding-right { |
| 1125 | 1129 | padding-right: 0px !important; |
| 1126 | 1130 | } |
| 1131 | + | |
| 1132 | +.social-link-right { | |
| 1133 | + display: flex; | |
| 1134 | + flex-flow: column wrap; | |
| 1135 | + align-content: flex-end; | |
| 1136 | +} | |
| 1127 | 1137 | </style> | ... | ... |
src/components/SingleMobileScreenInsightOne.vue
| 1 | 1 | <template> |
| 2 | 2 | <main class="landing-page"> |
| 3 | 3 | <div class="container-fluid episode-intro"> |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="javascript:void(0);" | |
| 6 | - ><img src="../assets/images/logo.png" | |
| 7 | - /></a> | |
| 8 | - <button | |
| 9 | - class="navbar-toggler" | |
| 10 | - type="button" | |
| 11 | - data-toggle="collapse" | |
| 12 | - data-target="#navbarsExample03" | |
| 13 | - aria-controls="navbarsExample03" | |
| 14 | - aria-expanded="false" | |
| 15 | - aria-label="Toggle navigation" | |
| 16 | - > | |
| 17 | - <span class="navbar-toggler-icon"></span> | |
| 18 | - <span class="navbar-toggler-icon"></span> | |
| 19 | - <span class="navbar-toggler-icon"></span> | |
| 20 | - </button> | |
| 21 | - <div class="user-profile-photo insights-profile"> | |
| 22 | - <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a> | |
| 23 | - </div> | |
| 24 | - </nav> | |
| 4 | + <Header></Header> | |
| 5 | + | |
| 25 | 6 | <!-- menu wrapper --> |
| 26 | 7 | <div class="intro-startup"> |
| 27 | 8 | |
| 28 | - | |
| 29 | 9 | <!-- chat box --> |
| 30 | 10 | <div class="bounce-board-wrp" id="cht_box_close"> |
| 31 | 11 | <div class="inner-wrp-bc"> |
| ... | ... | @@ -68,13 +48,12 @@ |
| 68 | 48 | </div> |
| 69 | 49 | <!-- top head --> |
| 70 | 50 | <div class="bounce-board-body"> |
| 71 | - | |
| 72 | 51 | <!-- all user comments --> |
| 73 | 52 | <ul class="bounced-user-comments"> |
| 74 | 53 | <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> |
| 75 | 54 | <div class="bc_brd_l"></div> |
| 76 | 55 | <!-- border --> |
| 77 | - <div class="parent-full-width"> | |
| 56 | + <div class="parent-full-width" v-if="cmnt.comment"> | |
| 78 | 57 | <div class="full-width"> |
| 79 | 58 | <div class="b-user-head"> |
| 80 | 59 | <img :src="cmnt.user.profilePic" /> |
| ... | ... | @@ -86,7 +65,9 @@ |
| 86 | 65 | cmnt.user.karmaPoints |
| 87 | 66 | }}pts |
| 88 | 67 | </li> |
| 89 | - <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li> | |
| 68 | + <li> | |
| 69 | + <span></span>{{ dateGenerator(cmnt.createdAt) }} | |
| 70 | + </li> | |
| 90 | 71 | </ul> |
| 91 | 72 | </div> |
| 92 | 73 | <!-- header --> |
| ... | ... | @@ -96,13 +77,32 @@ |
| 96 | 77 | <div class="joined_wrapper"> |
| 97 | 78 | <ul class="joined-info info_bc_spc"> |
| 98 | 79 | <li> |
| 99 | - <img src="../assets/images/purple-heart.png" /> | |
| 80 | + <img | |
| 81 | + src="../assets/images/heart.svg" | |
| 82 | + v-if="cmnt.like == false" | |
| 83 | + @click="likeComment(true, cmnt._id)" | |
| 84 | + class="cursor-pointer" | |
| 85 | + /> | |
| 86 | + <img | |
| 87 | + src="../assets/images/purple-heart.png" | |
| 88 | + v-if="cmnt.like == true" | |
| 89 | + @click="likeComment(false, cmnt._id)" | |
| 90 | + class="cursor-pointer" | |
| 91 | + /> | |
| 92 | + </li> | |
| 93 | + <li> | |
| 94 | + <a href="javasript:void(0);"> | |
| 95 | + {{ cmnt.likes.length }}</a | |
| 96 | + > | |
| 100 | 97 | </li> |
| 101 | - <li><a href="javasript:void(0);"> 0</a></li> | |
| 102 | 98 | <li class="comment-spc"> |
| 103 | 99 | <img src="../assets/images/purple-comment.png" /> |
| 104 | 100 | </li> |
| 105 | - <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li> | |
| 101 | + <li> | |
| 102 | + <a href="javasript:void(0);"> | |
| 103 | + {{ cmnt.children.length }}</a | |
| 104 | + > | |
| 105 | + </li> | |
| 106 | 106 | </ul> |
| 107 | 107 | <div class="add_rply" v-if="!cmnt.childInput"> |
| 108 | 108 | <input |
| ... | ... | @@ -119,7 +119,7 @@ |
| 119 | 119 | <!-- full width --> |
| 120 | 120 | </div> |
| 121 | 121 | <div class="comments-footer each-ft" v-if="cmnt.childInput"> |
| 122 | - <textarea v-model="comment"></textarea> | |
| 122 | + <textarea v-model="comment" id="childInput"></textarea> | |
| 123 | 123 | <div class="comments-footer-wrp"> |
| 124 | 124 | <a |
| 125 | 125 | @click="createChildComment(cmnt)" |
| ... | ... | @@ -127,42 +127,69 @@ |
| 127 | 127 | class="add_comments_chat reply-Wdth" |
| 128 | 128 | >Reply</a |
| 129 | 129 | > |
| 130 | - <a href="javasript:void(0);" class="discard_bt" | |
| 131 | - @click="discardRply(cmnt)"><img src="../assets/images/discard.svg" | |
| 130 | + <a | |
| 131 | + href="javasript:void(0);" | |
| 132 | + class="discard_bt" | |
| 133 | + @click="discardRply(cmnt)" | |
| 134 | + ><img src="../assets/images/discard.svg" | |
| 132 | 135 | /></a> |
| 133 | 136 | </div> |
| 134 | 137 | </div> |
| 135 | 138 | <!-- parent --> |
| 136 | - <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i"> | |
| 139 | + <div | |
| 140 | + class="child-full-width" | |
| 141 | + v-for="(childCmnt, i) in cmnt.children" | |
| 142 | + :key="i" | |
| 143 | + > | |
| 137 | 144 | <div class="full-width"> |
| 138 | 145 | <div class="b-user-head"> |
| 139 | 146 | <img :src="childCmnt.user.profilePic" /> |
| 140 | - <span class="head-content">{{childCmnt.user.name }} </span> | |
| 147 | + <span class="head-content" | |
| 148 | + >{{ childCmnt.user.name }} | |
| 149 | + </span> | |
| 141 | 150 | <ul> |
| 142 | 151 | <li> |
| 143 | 152 | <span></span |
| 144 | - ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts | |
| 153 | + ><img src="../assets/images/u-info-icon.png" />{{ | |
| 154 | + childCmnt.user.karmaPoints | |
| 155 | + }}pts | |
| 156 | + </li> | |
| 157 | + <li> | |
| 158 | + <span></span | |
| 159 | + >{{ dateGenerator(childCmnt.createdAt) }} | |
| 145 | 160 | </li> |
| 146 | - <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li> | |
| 147 | 161 | </ul> |
| 148 | 162 | </div> |
| 149 | 163 | <p> |
| 150 | - {{childCmnt.comment}} | |
| 164 | + {{ childCmnt.comment }} | |
| 151 | 165 | </p> |
| 152 | 166 | <div class="joined_wrapper"> |
| 153 | 167 | <ul class="joined-info info_bc_spc"> |
| 154 | 168 | <li> |
| 155 | - <img src="../assets/images/purple-heart.png" /> | |
| 169 | + <img | |
| 170 | + src="../assets/images/heart.svg" | |
| 171 | + v-if="childCmnt.like == false" | |
| 172 | + @click="likeComment(true, childCmnt._id)" | |
| 173 | + class="cursor-pointer" | |
| 174 | + /> | |
| 175 | + <img | |
| 176 | + src="../assets/images/purple-heart.png" | |
| 177 | + v-if="childCmnt.like == true" | |
| 178 | + @click="likeComment(false, childCmnt._id)" | |
| 179 | + class="cursor-pointer" | |
| 180 | + /> | |
| 181 | + </li> | |
| 182 | + <li> | |
| 183 | + <a href="javasript:void(0);"> | |
| 184 | + {{ childCmnt.likes.length }}</a | |
| 185 | + > | |
| 156 | 186 | </li> |
| 157 | - <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li> | |
| 158 | - | |
| 159 | 187 | </ul> |
| 160 | - | |
| 161 | 188 | </div> |
| 162 | 189 | </div> |
| 163 | 190 | </div> |
| 164 | 191 | <!-- eree --> |
| 165 | - | |
| 192 | + | |
| 166 | 193 | <!-- comments footer --> |
| 167 | 194 | </li> |
| 168 | 195 | </ul> |
| ... | ... | @@ -185,7 +212,6 @@ |
| 185 | 212 | <!-- bounceboard wrp --> |
| 186 | 213 | <!-- chat box --> |
| 187 | 214 | |
| 188 | - | |
| 189 | 215 | <div class="single-mobileInsight"> |
| 190 | 216 | <div class="top-area-blank"></div> |
| 191 | 217 | <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen" /> |
| ... | ... | @@ -201,38 +227,72 @@ |
| 201 | 227 | class="dynamic-thoughts" |
| 202 | 228 | /> |
| 203 | 229 | </div><!-- user thoughts --> |
| 204 | - <div class="single-author-li-comments"> | |
| 230 | + <div class="single-author-li-comments" v-if="commentExistCheck(0)"> | |
| 205 | 231 | <div class="a-intro-comments custom-c-style"> |
| 206 | 232 | <p> |
| 207 | - {{currentSlideData.payload.comments[0].comment}} | |
| 233 | + {{commentList[0].comment}} | |
| 208 | 234 | </p> |
| 209 | 235 | <ul class="rly-comment-set"> |
| 236 | + <!-- like/dislike --> | |
| 210 | 237 | <li> |
| 211 | - <img src="../assets/images/color-heart.svg" /> | |
| 212 | - <a href="javascript:void(0);">0</a> | |
| 238 | + <img | |
| 239 | + src="../assets/images/heart.svg" | |
| 240 | + v-if="commentList[0].like == false" | |
| 241 | + @click="likeComment(true, commentList[0]._id)" | |
| 242 | + class="cursor-pointer" | |
| 243 | + /> | |
| 244 | + <img | |
| 245 | + src="../assets/images/purple-heart.png" | |
| 246 | + v-if="commentList[0].like == true" | |
| 247 | + @click="likeComment(false, commentList[0]._id)" | |
| 248 | + class="cursor-pointer" | |
| 249 | + /> | |
| 250 | + <a href="javascript:void(0);">{{ | |
| 251 | + commentList[0].likes.length | |
| 252 | + }}</a> | |
| 213 | 253 | </li> |
| 254 | + <!-- like/dislike ends --> | |
| 214 | 255 | <li> |
| 215 | 256 | <img src="../assets/images/rply.svg" /> |
| 216 | - <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | |
| 257 | + <a href="javascript:void(0);" @click="reply_cht_box(0)" | |
| 258 | + >Reply</a | |
| 259 | + > | |
| 217 | 260 | </li> |
| 218 | 261 | </ul> |
| 219 | 262 | </div> |
| 220 | 263 | <!-- comments box --> |
| 221 | 264 | </div> |
| 222 | 265 | <!-- single author comments --> |
| 223 | - <div class="single-author-li-comments"> | |
| 266 | + <div class="single-author-li-comments" v-if="commentExistCheck(1)"> | |
| 224 | 267 | <div class="a-intro-comments custom-c-style"> |
| 225 | - <p> | |
| 226 | - {{currentSlideData.payload.comments[1].comment}} | |
| 268 | + <p> | |
| 269 | + {{commentList[1].comment}} | |
| 227 | 270 | </p> |
| 228 | 271 | <ul class="rly-comment-set"> |
| 272 | + <!-- like/dislike --> | |
| 229 | 273 | <li> |
| 230 | - <img src="../assets/images/color-heart.svg" /> | |
| 231 | - <a href="javascript:void(0);">0</a> | |
| 274 | + <img | |
| 275 | + src="../assets/images/heart.svg" | |
| 276 | + v-if="commentList[1].like == false" | |
| 277 | + @click="likeComment(true, commentList[1]._id)" | |
| 278 | + class="cursor-pointer" | |
| 279 | + /> | |
| 280 | + <img | |
| 281 | + src="../assets/images/purple-heart.png" | |
| 282 | + v-if="commentList[1].like == true" | |
| 283 | + @click="likeComment(false, commentList[1]._id)" | |
| 284 | + class="cursor-pointer" | |
| 285 | + /> | |
| 286 | + <a href="javascript:void(0);">{{ | |
| 287 | + commentList[1].likes.length | |
| 288 | + }}</a> | |
| 232 | 289 | </li> |
| 290 | + <!-- like/dislike ends --> | |
| 233 | 291 | <li> |
| 234 | 292 | <img src="../assets/images/rply.svg" /> |
| 235 | - <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | |
| 293 | + <a href="javascript:void(0);" @click="reply_cht_box(1)" | |
| 294 | + >Reply</a | |
| 295 | + > | |
| 236 | 296 | </li> |
| 237 | 297 | </ul> |
| 238 | 298 | </div> |
| ... | ... | @@ -247,7 +307,7 @@ |
| 247 | 307 | <img src="../assets/images/rect.svg" class="rect" /> |
| 248 | 308 | <div class="top-wrp"> |
| 249 | 309 | {{currentSlideData.payload.insight.tag}} Insight |
| 250 | - <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> | |
| 310 | + <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> | |
| 251 | 311 | </div> |
| 252 | 312 | <!-- <div class="top-head"> |
| 253 | 313 | Decide on using multiple call to action vs single call to |
| ... | ... | @@ -292,18 +352,19 @@ |
| 292 | 352 | <div class="ft-comments-group testi-photos-ct"> |
| 293 | 353 | <div class="c-with-photos"> |
| 294 | 354 | <span class="count-comments" |
| 295 | - >{{ commentList.length - 1 }}+ Comments</span | |
| 355 | + >{{ getLastcomment("count", commentList) }}+ | |
| 356 | + Comments</span | |
| 296 | 357 | ><!-- count commets --> |
| 297 | 358 | <ul class="comments-photos"> |
| 298 | - <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 299 | - <li><img src="../assets/images/c-photo-2.png" /></li> | |
| 300 | - <li><img src="../assets/images/c-photo-3.png" /></li> | |
| 359 | + <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> | |
| 360 | + <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> | |
| 361 | + <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> | |
| 301 | 362 | </ul> |
| 302 | 363 | <!-- comment photos --> |
| 303 | 364 | </div> |
| 304 | 365 | <div class="comments-detail all-c-space"> |
| 305 | 366 | <span |
| 306 | - >{{ commentList[commentList.length - 1].user.name }} | |
| 367 | + >{{ getLastcomment("name", commentList) }} | |
| 307 | 368 | <a href="javascript:void(0);" @click="open_ct_box" |
| 308 | 369 | >View All</a |
| 309 | 370 | ></span |
| ... | ... | @@ -311,7 +372,7 @@ |
| 311 | 372 | <p> |
| 312 | 373 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 313 | 374 | and “Pickup and Drop... --> |
| 314 | - {{ commentList[commentList.length - 1].comment }} | |
| 375 | + {{ getLastcomment("msg", commentList) }} | |
| 315 | 376 | </p> |
| 316 | 377 | </div> |
| 317 | 378 | <!-- comments detail --> |
| ... | ... | @@ -387,7 +448,12 @@ import Vue from "vue"; |
| 387 | 448 | import router from "../router"; |
| 388 | 449 | import axios from "axios"; |
| 389 | 450 | import moment from 'moment'; |
| 451 | +import Header from "./Header"; | |
| 452 | + | |
| 390 | 453 | export default { |
| 454 | + components: { | |
| 455 | + Header: Header, | |
| 456 | + }, | |
| 391 | 457 | name: "SingleMobileScreenInsightOne", |
| 392 | 458 | |
| 393 | 459 | data() { |
| ... | ... | @@ -536,6 +602,9 @@ export default { |
| 536 | 602 | goToSignUp() { |
| 537 | 603 | this.$router.push("/"); |
| 538 | 604 | }, |
| 605 | + open(url){ | |
| 606 | + window.open(url); | |
| 607 | + }, | |
| 539 | 608 | chtbox_close() { |
| 540 | 609 | $("#cht_box_close").removeClass("cht_close"); |
| 541 | 610 | $("#open_ct_box, .c_hide").show(); |
| ... | ... | @@ -549,11 +618,76 @@ export default { |
| 549 | 618 | eachRply(cmnt) { |
| 550 | 619 | cmnt.childInput = true; |
| 551 | 620 | this.parentInput = false; |
| 621 | + this.comment = null; | |
| 622 | + setTimeout(() => { | |
| 623 | + document.getElementById("childInput").focus(); | |
| 624 | + }, 100); | |
| 552 | 625 | }, |
| 553 | 626 | discardRply(cmnt) { |
| 554 | 627 | cmnt.childInput = false; |
| 555 | 628 | this.parentInput = true; |
| 556 | - | |
| 629 | + this.comment = null; | |
| 630 | + }, | |
| 631 | + reply_cht_box(i) { | |
| 632 | + console.log(this.commentList, "cmnt"); | |
| 633 | + $("#cht_box_close").addClass("cht_close"); | |
| 634 | + $("#open_ct_box, .c_hide").hide(); | |
| 635 | + $(".footer-top").removeClass("white-bg"); | |
| 636 | + this.commentList[i].childInput = true; | |
| 637 | + this.parentInput = false; | |
| 638 | + this.comment = null; | |
| 639 | + setTimeout(() => { | |
| 640 | + document.getElementById("childInput").focus(); | |
| 641 | + }, 100); | |
| 642 | + }, | |
| 643 | + likeComment(status, id) { | |
| 644 | + console.log("===", this.comment); | |
| 645 | + var obj = { | |
| 646 | + commentId: id, | |
| 647 | + like: status, | |
| 648 | + }; | |
| 649 | + axios | |
| 650 | + .post("/bounceBoard/like", obj, { | |
| 651 | + headers: { | |
| 652 | + Authorization: "Bearer " + this.usertoken, | |
| 653 | + }, | |
| 654 | + }) | |
| 655 | + .then((response) => { | |
| 656 | + this.getComment(); | |
| 657 | + console.log(response); | |
| 658 | + }) | |
| 659 | + .catch((error) => { | |
| 660 | + if (error.response) { | |
| 661 | + this.$toaster.error(error.response.data.message); | |
| 662 | + } | |
| 663 | + }); | |
| 664 | + }, | |
| 665 | + getLastcomment(flag, commentArray) { | |
| 666 | + var finalComment = null; | |
| 667 | + var totalMessage = 0; | |
| 668 | + var name = null; | |
| 669 | + commentArray.forEach((comment_) => { | |
| 670 | + if (comment_.comment != null) { | |
| 671 | + name = comment_.user.name; | |
| 672 | + finalComment = comment_.comment; | |
| 673 | + totalMessage++; | |
| 674 | + } | |
| 675 | + }); | |
| 676 | + if (flag == "count") { | |
| 677 | + return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | |
| 678 | + } else if (flag =="name") { | |
| 679 | + return (name = name); | |
| 680 | + } else { | |
| 681 | + return finalComment; | |
| 682 | + } | |
| 683 | + }, | |
| 684 | + commentExistCheck(i) { | |
| 685 | + console.log(this.commentList[i].comment); | |
| 686 | + var returnValue = false; | |
| 687 | + if (this.commentList[i].comment) { | |
| 688 | + returnValue = true; | |
| 689 | + } | |
| 690 | + return returnValue; | |
| 557 | 691 | }, |
| 558 | 692 | }, |
| 559 | 693 | }; | ... | ... |
src/components/SingleMobileScreenInsightTwo.vue
| 1 | 1 | <template> |
| 2 | 2 | <main class="landing-page"> |
| 3 | 3 | <div class="container-fluid episode-intro"> |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="javascript:void(0);" | |
| 4 | + <!-- <nav class="navbar navbar-expand-sm spotLight-nav"> --> | |
| 5 | + <!-- <a class="navbar-brand" href="javascript:void(0);" | |
| 6 | 6 | ><img src="../assets/images/logo.png" |
| 7 | 7 | /></a> |
| 8 | 8 | <button |
| ... | ... | @@ -20,8 +20,10 @@ |
| 20 | 20 | </button> |
| 21 | 21 | <div class="user-profile-photo insights-profile"> |
| 22 | 22 | <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a> |
| 23 | - </div> | |
| 24 | - </nav> | |
| 23 | + </div> --> | |
| 24 | + <Header></Header> | |
| 25 | + | |
| 26 | + <!-- </nav> --> | |
| 25 | 27 | <!-- menu wrapper --> |
| 26 | 28 | <div class="intro-startup"> |
| 27 | 29 | <!-- chat box --> |
| ... | ... | @@ -66,13 +68,12 @@ |
| 66 | 68 | </div> |
| 67 | 69 | <!-- top head --> |
| 68 | 70 | <div class="bounce-board-body"> |
| 69 | - | |
| 70 | 71 | <!-- all user comments --> |
| 71 | 72 | <ul class="bounced-user-comments"> |
| 72 | 73 | <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> |
| 73 | 74 | <div class="bc_brd_l"></div> |
| 74 | 75 | <!-- border --> |
| 75 | - <div class="parent-full-width"> | |
| 76 | + <div class="parent-full-width" v-if="cmnt.comment"> | |
| 76 | 77 | <div class="full-width"> |
| 77 | 78 | <div class="b-user-head"> |
| 78 | 79 | <img :src="cmnt.user.profilePic" /> |
| ... | ... | @@ -84,7 +85,9 @@ |
| 84 | 85 | cmnt.user.karmaPoints |
| 85 | 86 | }}pts |
| 86 | 87 | </li> |
| 87 | - <li><span></span>{{dateGenerator(cmnt.createdAt)}}</li> | |
| 88 | + <li> | |
| 89 | + <span></span>{{ dateGenerator(cmnt.createdAt) }} | |
| 90 | + </li> | |
| 88 | 91 | </ul> |
| 89 | 92 | </div> |
| 90 | 93 | <!-- header --> |
| ... | ... | @@ -93,16 +96,33 @@ |
| 93 | 96 | </p> |
| 94 | 97 | <div class="joined_wrapper"> |
| 95 | 98 | <ul class="joined-info info_bc_spc"> |
| 96 | - | |
| 97 | 99 | <li> |
| 98 | - <img src="../assets/images/heart.svg" v-if="cmnt.like == false" @click="likeComment(true,cmnt._id)" class="cursor-pointer"/> | |
| 99 | - <img src="../assets/images/purple-heart.png" v-if="cmnt.like == true" @click="likeComment(false,cmnt._id)" class="cursor-pointer"/> | |
| 100 | + <img | |
| 101 | + src="../assets/images/heart.svg" | |
| 102 | + v-if="cmnt.like == false" | |
| 103 | + @click="likeComment(true, cmnt._id)" | |
| 104 | + class="cursor-pointer" | |
| 105 | + /> | |
| 106 | + <img | |
| 107 | + src="../assets/images/purple-heart.png" | |
| 108 | + v-if="cmnt.like == true" | |
| 109 | + @click="likeComment(false, cmnt._id)" | |
| 110 | + class="cursor-pointer" | |
| 111 | + /> | |
| 112 | + </li> | |
| 113 | + <li> | |
| 114 | + <a href="javasript:void(0);"> | |
| 115 | + {{ cmnt.likes.length }}</a | |
| 116 | + > | |
| 100 | 117 | </li> |
| 101 | - <li><a href="javasript:void(0);"> {{cmnt.likes.length}}</a></li> | |
| 102 | 118 | <li class="comment-spc"> |
| 103 | 119 | <img src="../assets/images/purple-comment.png" /> |
| 104 | 120 | </li> |
| 105 | - <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li> | |
| 121 | + <li> | |
| 122 | + <a href="javasript:void(0);"> | |
| 123 | + {{ cmnt.children.length }}</a | |
| 124 | + > | |
| 125 | + </li> | |
| 106 | 126 | </ul> |
| 107 | 127 | <div class="add_rply" v-if="!cmnt.childInput"> |
| 108 | 128 | <input |
| ... | ... | @@ -119,7 +139,7 @@ |
| 119 | 139 | <!-- full width --> |
| 120 | 140 | </div> |
| 121 | 141 | <div class="comments-footer each-ft" v-if="cmnt.childInput"> |
| 122 | - <textarea v-model="comment"></textarea> | |
| 142 | + <textarea v-model="comment" id="childInput"></textarea> | |
| 123 | 143 | <div class="comments-footer-wrp"> |
| 124 | 144 | <a |
| 125 | 145 | @click="createChildComment(cmnt)" |
| ... | ... | @@ -127,43 +147,69 @@ |
| 127 | 147 | class="add_comments_chat reply-Wdth" |
| 128 | 148 | >Reply</a |
| 129 | 149 | > |
| 130 | - <a href="javasript:void(0);" class="discard_bt" | |
| 131 | - @click="discardRply(cmnt)"><img src="../assets/images/discard.svg" | |
| 150 | + <a | |
| 151 | + href="javasript:void(0);" | |
| 152 | + class="discard_bt" | |
| 153 | + @click="discardRply(cmnt)" | |
| 154 | + ><img src="../assets/images/discard.svg" | |
| 132 | 155 | /></a> |
| 133 | 156 | </div> |
| 134 | 157 | </div> |
| 135 | 158 | <!-- parent --> |
| 136 | - <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i"> | |
| 159 | + <div | |
| 160 | + class="child-full-width" | |
| 161 | + v-for="(childCmnt, i) in cmnt.children" | |
| 162 | + :key="i" | |
| 163 | + > | |
| 137 | 164 | <div class="full-width"> |
| 138 | 165 | <div class="b-user-head"> |
| 139 | 166 | <img :src="childCmnt.user.profilePic" /> |
| 140 | - <span class="head-content">{{childCmnt.user.name }} </span> | |
| 167 | + <span class="head-content" | |
| 168 | + >{{ childCmnt.user.name }} | |
| 169 | + </span> | |
| 141 | 170 | <ul> |
| 142 | 171 | <li> |
| 143 | 172 | <span></span |
| 144 | - ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts | |
| 173 | + ><img src="../assets/images/u-info-icon.png" />{{ | |
| 174 | + childCmnt.user.karmaPoints | |
| 175 | + }}pts | |
| 176 | + </li> | |
| 177 | + <li> | |
| 178 | + <span></span | |
| 179 | + >{{ dateGenerator(childCmnt.createdAt) }} | |
| 145 | 180 | </li> |
| 146 | - <li><span></span>{{dateGenerator(childCmnt.createdAt)}}</li> | |
| 147 | 181 | </ul> |
| 148 | 182 | </div> |
| 149 | 183 | <p> |
| 150 | - {{childCmnt.comment}} | |
| 184 | + {{ childCmnt.comment }} | |
| 151 | 185 | </p> |
| 152 | 186 | <div class="joined_wrapper"> |
| 153 | 187 | <ul class="joined-info info_bc_spc"> |
| 154 | 188 | <li> |
| 155 | - <img src="../assets/images/heart.svg" v-if="childCmnt.like == false" @click="likeComment(true,childCmnt._id)" class="cursor-pointer"/> | |
| 156 | - <img src="../assets/images/purple-heart.png" v-if="childCmnt.like == true" @click="likeComment(false,childCmnt._id)" class="cursor-pointer"/> | |
| 189 | + <img | |
| 190 | + src="../assets/images/heart.svg" | |
| 191 | + v-if="childCmnt.like == false" | |
| 192 | + @click="likeComment(true, childCmnt._id)" | |
| 193 | + class="cursor-pointer" | |
| 194 | + /> | |
| 195 | + <img | |
| 196 | + src="../assets/images/purple-heart.png" | |
| 197 | + v-if="childCmnt.like == true" | |
| 198 | + @click="likeComment(false, childCmnt._id)" | |
| 199 | + class="cursor-pointer" | |
| 200 | + /> | |
| 201 | + </li> | |
| 202 | + <li> | |
| 203 | + <a href="javasript:void(0);"> | |
| 204 | + {{ childCmnt.likes.length }}</a | |
| 205 | + > | |
| 157 | 206 | </li> |
| 158 | - <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li> | |
| 159 | - | |
| 160 | 207 | </ul> |
| 161 | - | |
| 162 | 208 | </div> |
| 163 | 209 | </div> |
| 164 | 210 | </div> |
| 165 | 211 | <!-- eree --> |
| 166 | - | |
| 212 | + | |
| 167 | 213 | <!-- comments footer --> |
| 168 | 214 | </li> |
| 169 | 215 | </ul> |
| ... | ... | @@ -187,7 +233,7 @@ |
| 187 | 233 | <!-- chat box --> |
| 188 | 234 | |
| 189 | 235 | <div class="single-mobileInsight"> |
| 190 | - <div class="top-area-blank"></div> | |
| 236 | + <div class="top-area-blank"></div> | |
| 191 | 237 | <!-- <img src="../assets/images/slide.png" class="slide-img" /> --> |
| 192 | 238 | <img |
| 193 | 239 | :src="currentSlideData.payload.metaData.mobileImage" |
| ... | ... | @@ -212,18 +258,32 @@ |
| 212 | 258 | >” are. If they are the same, there are two “call to actions” |
| 213 | 259 | for the same workflow |
| 214 | 260 | </p> --> |
| 215 | - <p >{{ commentList[0].comment }}</p> | |
| 261 | + <p>{{ commentList[0].comment }}</p> | |
| 216 | 262 | <ul class="rly-comment-set"> |
| 217 | 263 | <!-- like/dislike --> |
| 218 | - <li > | |
| 219 | - <img src="../assets/images/heart.svg" v-if="commentList[0].like == false" @click="likeComment(true,commentList[0]._id)" class="cursor-pointer"/> | |
| 220 | - <img src="../assets/images/purple-heart.png" v-if="commentList[0].like == true" @click="likeComment(false,commentList[0]._id)" class="cursor-pointer"/> | |
| 221 | - <a href="javascript:void(0);">{{commentList[0].likes.length}}</a> | |
| 264 | + <li> | |
| 265 | + <img | |
| 266 | + src="../assets/images/heart.svg" | |
| 267 | + v-if="commentList[0].like == false" | |
| 268 | + @click="likeComment(true, commentList[0]._id)" | |
| 269 | + class="cursor-pointer" | |
| 270 | + /> | |
| 271 | + <img | |
| 272 | + src="../assets/images/purple-heart.png" | |
| 273 | + v-if="commentList[0].like == true" | |
| 274 | + @click="likeComment(false, commentList[0]._id)" | |
| 275 | + class="cursor-pointer" | |
| 276 | + /> | |
| 277 | + <a href="javascript:void(0);">{{ | |
| 278 | + commentList[0].likes.length | |
| 279 | + }}</a> | |
| 222 | 280 | </li> |
| 223 | - <!-- like/dislike ends --> | |
| 281 | + <!-- like/dislike ends --> | |
| 224 | 282 | <li> |
| 225 | 283 | <img src="../assets/images/rply.svg" /> |
| 226 | - <a href="javascript:void(0);" @click="reply_cht_box(0)">Reply</a> | |
| 284 | + <a href="javascript:void(0);" @click="reply_cht_box(0)" | |
| 285 | + >Reply</a | |
| 286 | + > | |
| 227 | 287 | </li> |
| 228 | 288 | </ul> |
| 229 | 289 | </div> |
| ... | ... | @@ -236,16 +296,30 @@ |
| 236 | 296 | {{ commentList[1].comment }} |
| 237 | 297 | </p> |
| 238 | 298 | <ul class="rly-comment-set"> |
| 239 | - <!-- like/dislike --> | |
| 240 | - <li > | |
| 241 | - <img src="../assets/images/heart.svg" v-if="commentList[1].like == false" @click="likeComment(true,commentList[1]._id)" class="cursor-pointer"/> | |
| 242 | - <img src="../assets/images/purple-heart.png" v-if="commentList[1].like == true" @click="likeComment(false,commentList[1]._id)" class="cursor-pointer"/> | |
| 243 | - <a href="javascript:void(0);">{{commentList[1].likes.length}}</a> | |
| 299 | + <!-- like/dislike --> | |
| 300 | + <li> | |
| 301 | + <img | |
| 302 | + src="../assets/images/heart.svg" | |
| 303 | + v-if="commentList[1].like == false" | |
| 304 | + @click="likeComment(true, commentList[1]._id)" | |
| 305 | + class="cursor-pointer" | |
| 306 | + /> | |
| 307 | + <img | |
| 308 | + src="../assets/images/purple-heart.png" | |
| 309 | + v-if="commentList[1].like == true" | |
| 310 | + @click="likeComment(false, commentList[1]._id)" | |
| 311 | + class="cursor-pointer" | |
| 312 | + /> | |
| 313 | + <a href="javascript:void(0);">{{ | |
| 314 | + commentList[1].likes.length | |
| 315 | + }}</a> | |
| 244 | 316 | </li> |
| 245 | - <!-- like/dislike ends --> | |
| 317 | + <!-- like/dislike ends --> | |
| 246 | 318 | <li> |
| 247 | 319 | <img src="../assets/images/rply.svg" /> |
| 248 | - <a href="javascript:void(0);" @click="reply_cht_box(1)">Reply</a> | |
| 320 | + <a href="javascript:void(0);" @click="reply_cht_box(1)" | |
| 321 | + >Reply</a | |
| 322 | + > | |
| 249 | 323 | </li> |
| 250 | 324 | </ul> |
| 251 | 325 | </div> |
| ... | ... | @@ -254,23 +328,40 @@ |
| 254 | 328 | <!-- single author comments --> |
| 255 | 329 | </div> |
| 256 | 330 | <!-- single mobile Left insight --> |
| 257 | - <div class="c-product-insight-wrp two-screen-spc-top" v-if="commentExistCheck(2)"> | |
| 331 | + <div | |
| 332 | + class="c-product-insight-wrp two-screen-spc-top" | |
| 333 | + v-if="commentExistCheck(2)" | |
| 334 | + > | |
| 258 | 335 | <div class="single-author-li-comments"> |
| 259 | 336 | <div class="a-intro-comments"> |
| 260 | 337 | <p> |
| 261 | 338 | {{ commentList[2].comment }} |
| 262 | 339 | </p> |
| 263 | 340 | <ul class="rly-comment-set"> |
| 264 | - <!-- like/dislike --> | |
| 265 | - <li > | |
| 266 | - <img src="../assets/images/heart.svg" v-if="commentList[2].like == false" @click="likeComment(true,commentList[2]._id)" class="cursor-pointer"/> | |
| 267 | - <img src="../assets/images/purple-heart.png" v-if="commentList[2].like == true" @click="likeComment(false,commentList[2]._id)" class="cursor-pointer"/> | |
| 268 | - <a href="javascript:void(0);">{{commentList[2].likes.length}}</a> | |
| 341 | + <!-- like/dislike --> | |
| 342 | + <li> | |
| 343 | + <img | |
| 344 | + src="../assets/images/heart.svg" | |
| 345 | + v-if="commentList[2].like == false" | |
| 346 | + @click="likeComment(true, commentList[2]._id)" | |
| 347 | + class="cursor-pointer" | |
| 348 | + /> | |
| 349 | + <img | |
| 350 | + src="../assets/images/purple-heart.png" | |
| 351 | + v-if="commentList[2].like == true" | |
| 352 | + @click="likeComment(false, commentList[2]._id)" | |
| 353 | + class="cursor-pointer" | |
| 354 | + /> | |
| 355 | + <a href="javascript:void(0);">{{ | |
| 356 | + commentList[2].likes.length | |
| 357 | + }}</a> | |
| 269 | 358 | </li> |
| 270 | - <!-- like/dislike ends --> | |
| 359 | + <!-- like/dislike ends --> | |
| 271 | 360 | <li> |
| 272 | 361 | <img src="../assets/images/rply.svg" /> |
| 273 | - <a href="javascript:void(0);" @click="reply_cht_box(2)">Reply</a> | |
| 362 | + <a href="javascript:void(0);" @click="reply_cht_box(2)" | |
| 363 | + >Reply</a | |
| 364 | + > | |
| 274 | 365 | </li> |
| 275 | 366 | </ul> |
| 276 | 367 | </div> |
| ... | ... | @@ -282,16 +373,30 @@ |
| 282 | 373 | {{ commentList[3].comment }} |
| 283 | 374 | </p> |
| 284 | 375 | <ul class="rly-comment-set"> |
| 285 | - <!-- like/dislike --> | |
| 286 | - <li > | |
| 287 | - <img src="../assets/images/heart.svg" v-if="commentList[3].like == false" @click="likeComment(true,commentList[3]._id)" class="cursor-pointer"/> | |
| 288 | - <img src="../assets/images/purple-heart.png" v-if="commentList[3].like == true" @click="likeComment(false,commentList[3]._id)" class="cursor-pointer"/> | |
| 289 | - <a href="javascript:void(0);">{{commentList[3].likes.length}}</a> | |
| 376 | + <!-- like/dislike --> | |
| 377 | + <li> | |
| 378 | + <img | |
| 379 | + src="../assets/images/heart.svg" | |
| 380 | + v-if="commentList[3].like == false" | |
| 381 | + @click="likeComment(true, commentList[3]._id)" | |
| 382 | + class="cursor-pointer" | |
| 383 | + /> | |
| 384 | + <img | |
| 385 | + src="../assets/images/purple-heart.png" | |
| 386 | + v-if="commentList[3].like == true" | |
| 387 | + @click="likeComment(false, commentList[3]._id)" | |
| 388 | + class="cursor-pointer" | |
| 389 | + /> | |
| 390 | + <a href="javascript:void(0);">{{ | |
| 391 | + commentList[3].likes.length | |
| 392 | + }}</a> | |
| 290 | 393 | </li> |
| 291 | - <!-- like/dislike ends --> | |
| 394 | + <!-- like/dislike ends --> | |
| 292 | 395 | <li> |
| 293 | 396 | <img src="../assets/images/rply.svg" /> |
| 294 | - <a href="javascript:void(0);" @click="reply_cht_box(3)">Reply</a> | |
| 397 | + <a href="javascript:void(0);" @click="reply_cht_box(3)" | |
| 398 | + >Reply</a | |
| 399 | + > | |
| 295 | 400 | </li> |
| 296 | 401 | </ul> |
| 297 | 402 | </div> |
| ... | ... | @@ -301,7 +406,7 @@ |
| 301 | 406 | </div> |
| 302 | 407 | <!-- single mobile Right insight --> |
| 303 | 408 | </div> |
| 304 | - <!-- single author comments --> | |
| 409 | + <!-- single author comments --> | |
| 305 | 410 | <div class="footer-nav"> |
| 306 | 411 | <div class="footer-top white-bg"> |
| 307 | 412 | <div class="row"> |
| ... | ... | @@ -313,18 +418,19 @@ |
| 313 | 418 | <div class="ft-comments-group testi-photos-ct"> |
| 314 | 419 | <div class="c-with-photos"> |
| 315 | 420 | <span class="count-comments" |
| 316 | - >{{ getLastcomment('count',commentList) }}+ Comments</span | |
| 421 | + >{{ getLastcomment("count", commentList) }}+ | |
| 422 | + Comments</span | |
| 317 | 423 | ><!-- count commets --> |
| 318 | 424 | <ul class="comments-photos"> |
| 319 | - <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 425 | + <!-- <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 320 | 426 | <li><img src="../assets/images/c-photo-2.png" /></li> |
| 321 | - <li><img src="../assets/images/c-photo-3.png" /></li> | |
| 427 | + <li><img src="../assets/images/c-photo-3.png" /></li> --> | |
| 322 | 428 | </ul> |
| 323 | 429 | <!-- comment photos --> |
| 324 | 430 | </div> |
| 325 | 431 | <div class="comments-detail all-c-space"> |
| 326 | 432 | <span |
| 327 | - >{{ getLastcomment('name',commentList) }} | |
| 433 | + >{{ getLastcomment("name", commentList) }} | |
| 328 | 434 | <a href="javascript:void(0);" @click="open_ct_box" |
| 329 | 435 | >View All</a |
| 330 | 436 | ></span |
| ... | ... | @@ -332,7 +438,7 @@ |
| 332 | 438 | <p> |
| 333 | 439 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 334 | 440 | and “Pickup and Drop... --> |
| 335 | - {{ getLastcomment('msg',commentList) }} | |
| 441 | + {{ getLastcomment("msg", commentList) }} | |
| 336 | 442 | </p> |
| 337 | 443 | </div> |
| 338 | 444 | <!-- comments detail --> |
| ... | ... | @@ -407,11 +513,14 @@ |
| 407 | 513 | import Vue from "vue"; |
| 408 | 514 | import router from "../router"; |
| 409 | 515 | import axios from "axios"; |
| 410 | -import moment from 'moment'; | |
| 516 | +import moment from "moment"; | |
| 517 | +import Header from "./Header"; | |
| 411 | 518 | |
| 412 | 519 | export default { |
| 520 | + components: { | |
| 521 | + Header: Header, | |
| 522 | + }, | |
| 413 | 523 | name: "SingleMobileScreenInsightTwo", |
| 414 | - | |
| 415 | 524 | data() { |
| 416 | 525 | return { |
| 417 | 526 | allSlide: [], |
| ... | ... | @@ -474,7 +583,6 @@ export default { |
| 474 | 583 | caseStudyId: this.currentSlideData.caseStudyId, |
| 475 | 584 | slideId: this.currentSlideData.slideId, |
| 476 | 585 | comment: this.comment, |
| 477 | - | |
| 478 | 586 | }; |
| 479 | 587 | axios |
| 480 | 588 | .post("/bounceBoard/comment", obj, { |
| ... | ... | @@ -493,37 +601,14 @@ export default { |
| 493 | 601 | } |
| 494 | 602 | }); |
| 495 | 603 | }, |
| 496 | - likeComment(status,id) { | |
| 497 | - console.log("===", this.comment); | |
| 498 | - var obj = { | |
| 499 | - commentId: id, | |
| 500 | - like: status | |
| 501 | - | |
| 502 | - }; | |
| 503 | - axios | |
| 504 | - .post("/bounceBoard/like", obj, { | |
| 505 | - headers: { | |
| 506 | - Authorization: "Bearer " + this.usertoken, | |
| 507 | - }, | |
| 508 | - }) | |
| 509 | - .then((response) => { | |
| 510 | - this.getComment(); | |
| 511 | - console.log(response); | |
| 512 | - }) | |
| 513 | - .catch((error) => { | |
| 514 | - if (error.response) { | |
| 515 | - this.$toaster.error(error.response.data.message); | |
| 516 | - } | |
| 517 | - }); | |
| 518 | - }, | |
| 519 | - createChildComment(cmnt) { | |
| 520 | - console.log(cmnt,"===", this.comment); | |
| 604 | + | |
| 605 | + createChildComment(cmnt) { | |
| 606 | + console.log(cmnt, "===", this.comment); | |
| 521 | 607 | var obj = { |
| 522 | 608 | caseStudyId: this.currentSlideData.caseStudyId, |
| 523 | 609 | slideId: this.currentSlideData.slideId, |
| 524 | 610 | comment: this.comment, |
| 525 | 611 | parentId: cmnt._id, |
| 526 | - | |
| 527 | 612 | }; |
| 528 | 613 | axios |
| 529 | 614 | .post("/bounceBoard/comment", obj, { |
| ... | ... | @@ -556,32 +641,30 @@ export default { |
| 556 | 641 | .then((response) => { |
| 557 | 642 | console.log(response.data); |
| 558 | 643 | var comments = []; |
| 559 | - var keys = Object.keys(response.data.data) | |
| 560 | - response.data.data | |
| 644 | + var keys = Object.keys(response.data.data); | |
| 645 | + response.data.data; | |
| 561 | 646 | keys.forEach((key_) => { |
| 562 | - if(response.data.data[key_].comment != null){ | |
| 563 | - comments.push(response.data.data[key_]) | |
| 564 | - } | |
| 647 | + comments.push(response.data.data[key_]); | |
| 565 | 648 | }); |
| 566 | - comments.forEach((coment_)=>{ | |
| 649 | + comments.forEach((coment_) => { | |
| 567 | 650 | coment_.childInput = false; |
| 568 | 651 | }); |
| 569 | - console.log("comments",comments) | |
| 652 | + console.log("comments", comments); | |
| 570 | 653 | this.commentList = comments; |
| 571 | 654 | }) |
| 572 | 655 | .catch((error) => console.log(error)); |
| 573 | 656 | }, |
| 574 | - dateGenerator(curreDate){ | |
| 575 | - var todayDate = moment(new Date(), "DD.MM.YYYY"); | |
| 576 | - var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | |
| 577 | - var result = todayDate.diff(endDate, 'days'); | |
| 657 | + dateGenerator(curreDate) { | |
| 658 | + var todayDate = moment(new Date(), "DD.MM.YYYY"); | |
| 659 | + var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); | |
| 660 | + var result = todayDate.diff(endDate, "days"); | |
| 578 | 661 | var date = null; |
| 579 | - if(result == 0){ | |
| 580 | - date = 'Today'; | |
| 581 | - }else{ | |
| 582 | - date = result +' days ago'; | |
| 583 | - } | |
| 584 | - return date; | |
| 662 | + if (result == 0) { | |
| 663 | + date = "Today"; | |
| 664 | + } else { | |
| 665 | + date = result + " days ago"; | |
| 666 | + } | |
| 667 | + return date; | |
| 585 | 668 | }, |
| 586 | 669 | goToLogin() { |
| 587 | 670 | this.$router.push("/login"); |
| ... | ... | @@ -602,50 +685,77 @@ export default { |
| 602 | 685 | eachRply(cmnt) { |
| 603 | 686 | cmnt.childInput = true; |
| 604 | 687 | this.parentInput = false; |
| 688 | + this.comment = null; | |
| 689 | + setTimeout(() => { | |
| 690 | + document.getElementById("childInput").focus(); | |
| 691 | + }, 100); | |
| 605 | 692 | }, |
| 606 | 693 | discardRply(cmnt) { |
| 607 | 694 | cmnt.childInput = false; |
| 608 | 695 | this.parentInput = true; |
| 609 | - | |
| 696 | + this.comment = null; | |
| 610 | 697 | }, |
| 611 | - reply_cht_box(i){ | |
| 612 | - console.log(this.commentList,"cmnt"); | |
| 613 | - $("#cht_box_close").addClass("cht_close"); | |
| 698 | + reply_cht_box(i) { | |
| 699 | + console.log(this.commentList, "cmnt"); | |
| 700 | + $("#cht_box_close").addClass("cht_close"); | |
| 614 | 701 | $("#open_ct_box, .c_hide").hide(); |
| 615 | 702 | $(".footer-top").removeClass("white-bg"); |
| 616 | 703 | this.commentList[i].childInput = true; |
| 617 | 704 | this.parentInput = false; |
| 705 | + this.comment = null; | |
| 706 | + setTimeout(() => { | |
| 707 | + document.getElementById("childInput").focus(); | |
| 708 | + }, 100); | |
| 618 | 709 | }, |
| 619 | - getLastcomment(flag,commentArray){ | |
| 710 | + likeComment(status, id) { | |
| 711 | + console.log("===", this.comment); | |
| 712 | + var obj = { | |
| 713 | + commentId: id, | |
| 714 | + like: status, | |
| 715 | + }; | |
| 716 | + axios | |
| 717 | + .post("/bounceBoard/like", obj, { | |
| 718 | + headers: { | |
| 719 | + Authorization: "Bearer " + this.usertoken, | |
| 720 | + }, | |
| 721 | + }) | |
| 722 | + .then((response) => { | |
| 723 | + this.getComment(); | |
| 724 | + console.log(response); | |
| 725 | + }) | |
| 726 | + .catch((error) => { | |
| 727 | + if (error.response) { | |
| 728 | + this.$toaster.error(error.response.data.message); | |
| 729 | + } | |
| 730 | + }); | |
| 731 | + }, | |
| 732 | + getLastcomment(flag, commentArray) { | |
| 620 | 733 | var finalComment = null; |
| 621 | 734 | var totalMessage = 0; |
| 622 | 735 | var name = null; |
| 623 | - commentArray.forEach(comment_ => { | |
| 624 | - console.log("comment_",comment_) | |
| 625 | - if(comment_.comment != null){ | |
| 736 | + commentArray.forEach((comment_) => { | |
| 737 | + if (comment_.comment != null) { | |
| 626 | 738 | name = comment_.user.name; |
| 627 | 739 | finalComment = comment_.comment; |
| 628 | - totalMessage++ | |
| 740 | + totalMessage++; | |
| 629 | 741 | } |
| 630 | - | |
| 631 | 742 | }); |
| 632 | - if(flag == 'count'){ | |
| 633 | - return totalMessage = totalMessage == 1 ?1:totalMessage-1; | |
| 634 | - }else if('name'){ | |
| 635 | - return name = name; | |
| 636 | - }else{ | |
| 743 | + if (flag == "count") { | |
| 744 | + return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | |
| 745 | + } else if (flag == "name") { | |
| 746 | + return (name = name); | |
| 747 | + } else { | |
| 637 | 748 | return finalComment; |
| 638 | 749 | } |
| 639 | 750 | }, |
| 640 | - commentExistCheck(number){ | |
| 641 | - console.log( this.commentList.length,"number",number) | |
| 751 | + commentExistCheck(i) { | |
| 752 | + console.log(this.commentList[i].comment); | |
| 642 | 753 | var returnValue = false; |
| 643 | - if(number < this.commentList.length){ | |
| 754 | + if (this.commentList[i].comment) { | |
| 644 | 755 | returnValue = true; |
| 645 | 756 | } |
| 646 | 757 | return returnValue; |
| 647 | - | |
| 648 | - } | |
| 758 | + }, | |
| 649 | 759 | }, |
| 650 | 760 | }; |
| 651 | 761 | // | ... | ... |
src/components/TwoScreenWithInsight.vue
| 1 | 1 | <template> |
| 2 | 2 | <main class="landing-page"> |
| 3 | 3 | <div class="container-fluid episode-intro"> |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="javascript:void(0);" | |
| 6 | - ><img src="../assets/images/logo.png" | |
| 7 | - /></a> | |
| 8 | - <button | |
| 9 | - class="navbar-toggler" | |
| 10 | - type="button" | |
| 11 | - data-toggle="collapse" | |
| 12 | - data-target="#navbarsExample03" | |
| 13 | - aria-controls="navbarsExample03" | |
| 14 | - aria-expanded="false" | |
| 15 | - aria-label="Toggle navigation" | |
| 16 | - > | |
| 17 | - <span class="navbar-toggler-icon"></span> | |
| 18 | - <span class="navbar-toggler-icon"></span> | |
| 19 | - <span class="navbar-toggler-icon"></span> | |
| 20 | - </button> | |
| 21 | - <div class="user-profile-photo insights-profile"> | |
| 22 | - <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a> | |
| 23 | - </div> | |
| 24 | - </nav> | |
| 4 | + <Header></Header> | |
| 5 | + | |
| 25 | 6 | <!-- menu wrapper --> |
| 26 | 7 | <div class="intro-startup"> |
| 27 | - <!-- chat box --> | |
| 8 | + <!-- chat box --> | |
| 28 | 9 | <div class="bounce-board-wrp" id="cht_box_close"> |
| 29 | 10 | <div class="inner-wrp-bc"> |
| 30 | 11 | <div class="bc-top-head"> |
| ... | ... | @@ -71,7 +52,7 @@ |
| 71 | 52 | <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> |
| 72 | 53 | <div class="bc_brd_l"></div> |
| 73 | 54 | <!-- border --> |
| 74 | - <div class="parent-full-width"> | |
| 55 | + <div class="parent-full-width" v-if="cmnt.comment"> | |
| 75 | 56 | <div class="full-width"> |
| 76 | 57 | <div class="b-user-head"> |
| 77 | 58 | <img :src="cmnt.user.profilePic" /> |
| ... | ... | @@ -84,8 +65,7 @@ |
| 84 | 65 | }}pts |
| 85 | 66 | </li> |
| 86 | 67 | <li> |
| 87 | - <span></span>{{ dateGenerator(cmnt.createdAt) }}days | |
| 88 | - ago | |
| 68 | + <span></span>{{ dateGenerator(cmnt.createdAt) }} | |
| 89 | 69 | </li> |
| 90 | 70 | </ul> |
| 91 | 71 | </div> |
| ... | ... | @@ -96,9 +76,24 @@ |
| 96 | 76 | <div class="joined_wrapper"> |
| 97 | 77 | <ul class="joined-info info_bc_spc"> |
| 98 | 78 | <li> |
| 99 | - <img src="../assets/images/purple-heart.png" /> | |
| 79 | + <img | |
| 80 | + src="../assets/images/heart.svg" | |
| 81 | + v-if="cmnt.like == false" | |
| 82 | + @click="likeComment(true, cmnt._id)" | |
| 83 | + class="cursor-pointer" | |
| 84 | + /> | |
| 85 | + <img | |
| 86 | + src="../assets/images/purple-heart.png" | |
| 87 | + v-if="cmnt.like == true" | |
| 88 | + @click="likeComment(false, cmnt._id)" | |
| 89 | + class="cursor-pointer" | |
| 90 | + /> | |
| 91 | + </li> | |
| 92 | + <li> | |
| 93 | + <a href="javasript:void(0);"> | |
| 94 | + {{ cmnt.likes.length }}</a | |
| 95 | + > | |
| 100 | 96 | </li> |
| 101 | - <li><a href="javasript:void(0);"> 0</a></li> | |
| 102 | 97 | <li class="comment-spc"> |
| 103 | 98 | <img src="../assets/images/purple-comment.png" /> |
| 104 | 99 | </li> |
| ... | ... | @@ -123,7 +118,7 @@ |
| 123 | 118 | <!-- full width --> |
| 124 | 119 | </div> |
| 125 | 120 | <div class="comments-footer each-ft" v-if="cmnt.childInput"> |
| 126 | - <textarea v-model="comment"></textarea> | |
| 121 | + <textarea v-model="comment" id="childInput"></textarea> | |
| 127 | 122 | <div class="comments-footer-wrp"> |
| 128 | 123 | <a |
| 129 | 124 | @click="createChildComment(cmnt)" |
| ... | ... | @@ -160,7 +155,7 @@ |
| 160 | 155 | </li> |
| 161 | 156 | <li> |
| 162 | 157 | <span></span |
| 163 | - >{{ dateGenerator(childCmnt.createdAt) }}days ago | |
| 158 | + >{{ dateGenerator(childCmnt.createdAt) }} | |
| 164 | 159 | </li> |
| 165 | 160 | </ul> |
| 166 | 161 | </div> |
| ... | ... | @@ -170,7 +165,18 @@ |
| 170 | 165 | <div class="joined_wrapper"> |
| 171 | 166 | <ul class="joined-info info_bc_spc"> |
| 172 | 167 | <li> |
| 173 | - <img src="../assets/images/purple-heart.png" /> | |
| 168 | + <img | |
| 169 | + src="../assets/images/heart.svg" | |
| 170 | + v-if="childCmnt.like == false" | |
| 171 | + @click="likeComment(true, childCmnt._id)" | |
| 172 | + class="cursor-pointer" | |
| 173 | + /> | |
| 174 | + <img | |
| 175 | + src="../assets/images/purple-heart.png" | |
| 176 | + v-if="childCmnt.like == true" | |
| 177 | + @click="likeComment(false, childCmnt._id)" | |
| 178 | + class="cursor-pointer" | |
| 179 | + /> | |
| 174 | 180 | </li> |
| 175 | 181 | <li> |
| 176 | 182 | <a href="javasript:void(0);"> |
| ... | ... | @@ -209,40 +215,74 @@ |
| 209 | 215 | <div class="mobile-screen-one p-left"> |
| 210 | 216 | <div class="top-area-blank"></div> |
| 211 | 217 | <div class="m-screen-comments"> |
| 212 | - <div class="single-author-li-comments"> | |
| 218 | + <div class="single-author-li-comments" v-if="commentExistCheck(0)"> | |
| 213 | 219 | <div class="a-intro-comments"> |
| 214 | - <p>{{ currentSlideData.payload.comments[0].comment }}</p> | |
| 215 | - <ul class="rly-comment-set"> | |
| 216 | - <li> | |
| 217 | - <img src="../assets/images/color-heart.svg" /> | |
| 218 | - <a href="javascript:void(0);">0</a> | |
| 219 | - </li> | |
| 220 | - <li> | |
| 221 | - <img src="../assets/images/rply.svg" /> | |
| 222 | - <a href="javascript:void(0);" @click="open_ct_box" | |
| 223 | - >Reply</a | |
| 224 | - > | |
| 225 | - </li> | |
| 226 | - </ul> | |
| 220 | + <p> | |
| 221 | + {{commentList[0].comment}} | |
| 222 | + </p> | |
| 223 | + <ul class="rly-comment-set"> | |
| 224 | + <!-- like/dislike --> | |
| 225 | + <li> | |
| 226 | + <img | |
| 227 | + src="../assets/images/heart.svg" | |
| 228 | + v-if="commentList[0].like == false" | |
| 229 | + @click="likeComment(true, commentList[0]._id)" | |
| 230 | + class="cursor-pointer" | |
| 231 | + /> | |
| 232 | + <img | |
| 233 | + src="../assets/images/purple-heart.png" | |
| 234 | + v-if="commentList[0].like == true" | |
| 235 | + @click="likeComment(false, commentList[0]._id)" | |
| 236 | + class="cursor-pointer" | |
| 237 | + /> | |
| 238 | + <a href="javascript:void(0);">{{ | |
| 239 | + commentList[0].likes.length | |
| 240 | + }}</a> | |
| 241 | + </li> | |
| 242 | + <!-- like/dislike ends --> | |
| 243 | + <li> | |
| 244 | + <img src="../assets/images/rply.svg" /> | |
| 245 | + <a href="javascript:void(0);" @click="reply_cht_box(0)" | |
| 246 | + >Reply</a | |
| 247 | + > | |
| 248 | + </li> | |
| 249 | + </ul> | |
| 227 | 250 | </div> |
| 228 | 251 | <!-- comments box --> |
| 229 | 252 | </div> |
| 230 | 253 | <!-- single author comments --> |
| 231 | - <div class="single-author-li-comments"> | |
| 254 | + <div class="single-author-li-comments" v-if="commentExistCheck(1)"> | |
| 232 | 255 | <div class="a-intro-comments"> |
| 233 | - <p>{{ currentSlideData.payload.comments[1].comment }}</p> | |
| 234 | - <ul class="rly-comment-set"> | |
| 235 | - <li> | |
| 236 | - <img src="../assets/images/color-heart.svg" /> | |
| 237 | - <a href="javascript:void(0);">0</a> | |
| 238 | - </li> | |
| 239 | - <li> | |
| 240 | - <img src="../assets/images/rply.svg" /> | |
| 241 | - <a href="javascript:void(0);" @click="open_ct_box" | |
| 242 | - >Reply</a | |
| 243 | - > | |
| 244 | - </li> | |
| 245 | - </ul> | |
| 256 | + <p> | |
| 257 | + {{commentList[1].comment}} | |
| 258 | + </p> | |
| 259 | + <ul class="rly-comment-set"> | |
| 260 | + <!-- like/dislike --> | |
| 261 | + <li> | |
| 262 | + <img | |
| 263 | + src="../assets/images/heart.svg" | |
| 264 | + v-if="commentList[1].like == false" | |
| 265 | + @click="likeComment(true, commentList[1]._id)" | |
| 266 | + class="cursor-pointer" | |
| 267 | + /> | |
| 268 | + <img | |
| 269 | + src="../assets/images/purple-heart.png" | |
| 270 | + v-if="commentList[1].like == true" | |
| 271 | + @click="likeComment(false, commentList[1]._id)" | |
| 272 | + class="cursor-pointer" | |
| 273 | + /> | |
| 274 | + <a href="javascript:void(0);">{{ | |
| 275 | + commentList[1].likes.length | |
| 276 | + }}</a> | |
| 277 | + </li> | |
| 278 | + <!-- like/dislike ends --> | |
| 279 | + <li> | |
| 280 | + <img src="../assets/images/rply.svg" /> | |
| 281 | + <a href="javascript:void(0);" @click="reply_cht_box(1)" | |
| 282 | + >Reply</a | |
| 283 | + > | |
| 284 | + </li> | |
| 285 | + </ul> | |
| 246 | 286 | </div> |
| 247 | 287 | <!-- comments box --> |
| 248 | 288 | </div> |
| ... | ... | @@ -269,7 +309,7 @@ |
| 269 | 309 | |
| 270 | 310 | <div class="top-wrp"> |
| 271 | 311 | {{ currentSlideData.payload.insight.tag }} Insight |
| 272 | - <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> | |
| 312 | + <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> | |
| 273 | 313 | </div> |
| 274 | 314 | <div class="top-head"> |
| 275 | 315 | {{ currentSlideData.payload.insight.title }} |
| ... | ... | @@ -313,19 +353,19 @@ |
| 313 | 353 | <div class="ft-comments-group testi-photos-ct"> |
| 314 | 354 | <div class="c-with-photos"> |
| 315 | 355 | <span class="count-comments" |
| 316 | - >{{ commentList.length - 1 }}+ Comments</span | |
| 356 | + >{{ getLastcomment("count", commentList) }}+ | |
| 357 | + Comments</span | |
| 317 | 358 | ><!-- count commets --> |
| 318 | 359 | <ul class="comments-photos"> |
| 319 | - <!-- <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 320 | - <li><img src="../assets/images/c-photo-2.png" /></li> --> | |
| 360 | + <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> | |
| 361 | + <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> | |
| 321 | 362 | <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> |
| 322 | - <!-- <li><img :src="commentList[commentList.length - 1].user.profilePic" /></li> --> | |
| 323 | 363 | </ul> |
| 324 | 364 | <!-- comment photos --> |
| 325 | 365 | </div> |
| 326 | 366 | <div class="comments-detail all-c-space"> |
| 327 | 367 | <span |
| 328 | - >{{ commentList[commentList.length - 1].user.name }} | |
| 368 | + >{{ getLastcomment("name", commentList) }} | |
| 329 | 369 | <a href="javascript:void(0);" @click="open_ct_box" |
| 330 | 370 | >View All</a |
| 331 | 371 | ></span |
| ... | ... | @@ -333,7 +373,7 @@ |
| 333 | 373 | <p> |
| 334 | 374 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 335 | 375 | and “Pickup and Drop... --> |
| 336 | - {{ commentList[commentList.length - 1].comment }} | |
| 376 | + {{ getLastcomment("msg", commentList) }} | |
| 337 | 377 | </p> |
| 338 | 378 | </div> |
| 339 | 379 | <!-- comments detail --> |
| ... | ... | @@ -409,7 +449,12 @@ import Vue from "vue"; |
| 409 | 449 | import router from "../router"; |
| 410 | 450 | import axios from "axios"; |
| 411 | 451 | import moment from "moment"; |
| 452 | +import Header from "./Header"; | |
| 453 | + | |
| 412 | 454 | export default { |
| 455 | + components: { | |
| 456 | + Header: Header, | |
| 457 | + }, | |
| 413 | 458 | name: "TwoScreenWithInsight", |
| 414 | 459 | data() { |
| 415 | 460 | return { |
| ... | ... | @@ -555,6 +600,9 @@ export default { |
| 555 | 600 | goToSignUp() { |
| 556 | 601 | this.$router.push("/"); |
| 557 | 602 | }, |
| 603 | + open(url){ | |
| 604 | + window.open(url); | |
| 605 | + }, | |
| 558 | 606 | chtbox_close() { |
| 559 | 607 | $("#cht_box_close").removeClass("cht_close"); |
| 560 | 608 | $("#open_ct_box, .c_hide").show(); |
| ... | ... | @@ -568,10 +616,76 @@ export default { |
| 568 | 616 | eachRply(cmnt) { |
| 569 | 617 | cmnt.childInput = true; |
| 570 | 618 | this.parentInput = false; |
| 619 | + this.comment = null; | |
| 620 | + setTimeout(() => { | |
| 621 | + document.getElementById("childInput").focus(); | |
| 622 | + }, 100); | |
| 571 | 623 | }, |
| 572 | 624 | discardRply(cmnt) { |
| 573 | 625 | cmnt.childInput = false; |
| 574 | 626 | this.parentInput = true; |
| 627 | + this.comment = null; | |
| 628 | + }, | |
| 629 | + reply_cht_box(i) { | |
| 630 | + console.log(this.commentList, "cmnt"); | |
| 631 | + $("#cht_box_close").addClass("cht_close"); | |
| 632 | + $("#open_ct_box, .c_hide").hide(); | |
| 633 | + $(".footer-top").removeClass("white-bg"); | |
| 634 | + this.commentList[i].childInput = true; | |
| 635 | + this.parentInput = false; | |
| 636 | + this.comment = null; | |
| 637 | + setTimeout(() => { | |
| 638 | + document.getElementById("childInput").focus(); | |
| 639 | + }, 100); | |
| 640 | + }, | |
| 641 | + likeComment(status, id) { | |
| 642 | + console.log("===", this.comment); | |
| 643 | + var obj = { | |
| 644 | + commentId: id, | |
| 645 | + like: status, | |
| 646 | + }; | |
| 647 | + axios | |
| 648 | + .post("/bounceBoard/like", obj, { | |
| 649 | + headers: { | |
| 650 | + Authorization: "Bearer " + this.usertoken, | |
| 651 | + }, | |
| 652 | + }) | |
| 653 | + .then((response) => { | |
| 654 | + this.getComment(); | |
| 655 | + console.log(response); | |
| 656 | + }) | |
| 657 | + .catch((error) => { | |
| 658 | + if (error.response) { | |
| 659 | + this.$toaster.error(error.response.data.message); | |
| 660 | + } | |
| 661 | + }); | |
| 662 | + }, | |
| 663 | + getLastcomment(flag, commentArray) { | |
| 664 | + var finalComment = null; | |
| 665 | + var totalMessage = 0; | |
| 666 | + var name = null; | |
| 667 | + commentArray.forEach((comment_) => { | |
| 668 | + if (comment_.comment != null) { | |
| 669 | + name = comment_.user.name; | |
| 670 | + finalComment = comment_.comment; | |
| 671 | + totalMessage++; | |
| 672 | + } | |
| 673 | + }); | |
| 674 | + if (flag == "count") { | |
| 675 | + return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | |
| 676 | + } else if (flag =="name") { | |
| 677 | + return (name = name); | |
| 678 | + } else { | |
| 679 | + return finalComment; | |
| 680 | + } | |
| 681 | + }, | |
| 682 | + commentExistCheck(i) { | |
| 683 | + console.log(this.commentList[i].comment); | |
| 684 | + var returnValue = false; | |
| 685 | + if (this.commentList[i].comment) { | |
| 686 | + returnValue = true; | |
| 687 | + } | |
| 688 | + return returnValue; | |
| 575 | 689 | }, |
| 576 | 690 | }, |
| 577 | 691 | }; | ... | ... |
src/components/TwoScreenWithoutInsight.vue
| 1 | 1 | <template> |
| 2 | 2 | <main class="landing-page"> |
| 3 | 3 | <div class="container-fluid episode-intro"> |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="javasript:void(0);" | |
| 6 | - ><img src="../assets/images/logo.png" | |
| 7 | - /></a> | |
| 8 | - <button | |
| 9 | - class="navbar-toggler" | |
| 10 | - type="button" | |
| 11 | - data-toggle="collapse" | |
| 12 | - data-target="#navbarsExample03" | |
| 13 | - aria-controls="navbarsExample03" | |
| 14 | - aria-expanded="false" | |
| 15 | - aria-label="Toggle navigation" | |
| 16 | - > | |
| 17 | - <span class="navbar-toggler-icon"></span> | |
| 18 | - <span class="navbar-toggler-icon"></span> | |
| 19 | - <span class="navbar-toggler-icon"></span> | |
| 20 | - </button> | |
| 21 | - <div class="user-profile-photo insights-profile"> | |
| 22 | - <a href="javasript:void(0);" | |
| 23 | - ><img src="../assets/images/lock.svg" | |
| 24 | - /></a> | |
| 25 | - </div> | |
| 26 | - </nav> | |
| 4 | + <Header></Header> | |
| 5 | + | |
| 27 | 6 | <!-- menu wrapper --> |
| 28 | 7 | <div class="intro-startup"> |
| 29 | - <!-- chat box --> | |
| 8 | + <!-- chat box --> | |
| 30 | 9 | <div class="bounce-board-wrp" id="cht_box_close"> |
| 31 | 10 | <div class="inner-wrp-bc"> |
| 32 | 11 | <div class="bc-top-head"> |
| ... | ... | @@ -68,13 +47,12 @@ |
| 68 | 47 | </div> |
| 69 | 48 | <!-- top head --> |
| 70 | 49 | <div class="bounce-board-body"> |
| 71 | - | |
| 72 | 50 | <!-- all user comments --> |
| 73 | 51 | <ul class="bounced-user-comments"> |
| 74 | 52 | <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> |
| 75 | 53 | <div class="bc_brd_l"></div> |
| 76 | 54 | <!-- border --> |
| 77 | - <div class="parent-full-width"> | |
| 55 | + <div class="parent-full-width" v-if="cmnt.comment"> | |
| 78 | 56 | <div class="full-width"> |
| 79 | 57 | <div class="b-user-head"> |
| 80 | 58 | <img :src="cmnt.user.profilePic" /> |
| ... | ... | @@ -86,7 +64,9 @@ |
| 86 | 64 | cmnt.user.karmaPoints |
| 87 | 65 | }}pts |
| 88 | 66 | </li> |
| 89 | - <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li> | |
| 67 | + <li> | |
| 68 | + <span></span>{{ dateGenerator(cmnt.createdAt) }} | |
| 69 | + </li> | |
| 90 | 70 | </ul> |
| 91 | 71 | </div> |
| 92 | 72 | <!-- header --> |
| ... | ... | @@ -96,13 +76,32 @@ |
| 96 | 76 | <div class="joined_wrapper"> |
| 97 | 77 | <ul class="joined-info info_bc_spc"> |
| 98 | 78 | <li> |
| 99 | - <img src="../assets/images/purple-heart.png" /> | |
| 79 | + <img | |
| 80 | + src="../assets/images/heart.svg" | |
| 81 | + v-if="cmnt.like == false" | |
| 82 | + @click="likeComment(true, cmnt._id)" | |
| 83 | + class="cursor-pointer" | |
| 84 | + /> | |
| 85 | + <img | |
| 86 | + src="../assets/images/purple-heart.png" | |
| 87 | + v-if="cmnt.like == true" | |
| 88 | + @click="likeComment(false, cmnt._id)" | |
| 89 | + class="cursor-pointer" | |
| 90 | + /> | |
| 91 | + </li> | |
| 92 | + <li> | |
| 93 | + <a href="javasript:void(0);"> | |
| 94 | + {{ cmnt.likes.length }}</a | |
| 95 | + > | |
| 100 | 96 | </li> |
| 101 | - <li><a href="javasript:void(0);"> 0</a></li> | |
| 102 | 97 | <li class="comment-spc"> |
| 103 | 98 | <img src="../assets/images/purple-comment.png" /> |
| 104 | 99 | </li> |
| 105 | - <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li> | |
| 100 | + <li> | |
| 101 | + <a href="javasript:void(0);"> | |
| 102 | + {{ cmnt.children.length }}</a | |
| 103 | + > | |
| 104 | + </li> | |
| 106 | 105 | </ul> |
| 107 | 106 | <div class="add_rply" v-if="!cmnt.childInput"> |
| 108 | 107 | <input |
| ... | ... | @@ -119,7 +118,7 @@ |
| 119 | 118 | <!-- full width --> |
| 120 | 119 | </div> |
| 121 | 120 | <div class="comments-footer each-ft" v-if="cmnt.childInput"> |
| 122 | - <textarea v-model="comment"></textarea> | |
| 121 | + <textarea v-model="comment" id="childInput"></textarea> | |
| 123 | 122 | <div class="comments-footer-wrp"> |
| 124 | 123 | <a |
| 125 | 124 | @click="createChildComment(cmnt)" |
| ... | ... | @@ -127,42 +126,69 @@ |
| 127 | 126 | class="add_comments_chat reply-Wdth" |
| 128 | 127 | >Reply</a |
| 129 | 128 | > |
| 130 | - <a href="javasript:void(0);" class="discard_bt" | |
| 131 | - @click="discardRply(cmnt)"><img src="../assets/images/discard.svg" | |
| 129 | + <a | |
| 130 | + href="javasript:void(0);" | |
| 131 | + class="discard_bt" | |
| 132 | + @click="discardRply(cmnt)" | |
| 133 | + ><img src="../assets/images/discard.svg" | |
| 132 | 134 | /></a> |
| 133 | 135 | </div> |
| 134 | 136 | </div> |
| 135 | 137 | <!-- parent --> |
| 136 | - <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i"> | |
| 138 | + <div | |
| 139 | + class="child-full-width" | |
| 140 | + v-for="(childCmnt, i) in cmnt.children" | |
| 141 | + :key="i" | |
| 142 | + > | |
| 137 | 143 | <div class="full-width"> |
| 138 | 144 | <div class="b-user-head"> |
| 139 | 145 | <img :src="childCmnt.user.profilePic" /> |
| 140 | - <span class="head-content">{{childCmnt.user.name }} </span> | |
| 146 | + <span class="head-content" | |
| 147 | + >{{ childCmnt.user.name }} | |
| 148 | + </span> | |
| 141 | 149 | <ul> |
| 142 | 150 | <li> |
| 143 | 151 | <span></span |
| 144 | - ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts | |
| 152 | + ><img src="../assets/images/u-info-icon.png" />{{ | |
| 153 | + childCmnt.user.karmaPoints | |
| 154 | + }}pts | |
| 155 | + </li> | |
| 156 | + <li> | |
| 157 | + <span></span | |
| 158 | + >{{ dateGenerator(childCmnt.createdAt) }} | |
| 145 | 159 | </li> |
| 146 | - <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li> | |
| 147 | 160 | </ul> |
| 148 | 161 | </div> |
| 149 | 162 | <p> |
| 150 | - {{childCmnt.comment}} | |
| 163 | + {{ childCmnt.comment }} | |
| 151 | 164 | </p> |
| 152 | 165 | <div class="joined_wrapper"> |
| 153 | 166 | <ul class="joined-info info_bc_spc"> |
| 154 | 167 | <li> |
| 155 | - <img src="../assets/images/purple-heart.png" /> | |
| 168 | + <img | |
| 169 | + src="../assets/images/heart.svg" | |
| 170 | + v-if="childCmnt.like == false" | |
| 171 | + @click="likeComment(true, childCmnt._id)" | |
| 172 | + class="cursor-pointer" | |
| 173 | + /> | |
| 174 | + <img | |
| 175 | + src="../assets/images/purple-heart.png" | |
| 176 | + v-if="childCmnt.like == true" | |
| 177 | + @click="likeComment(false, childCmnt._id)" | |
| 178 | + class="cursor-pointer" | |
| 179 | + /> | |
| 180 | + </li> | |
| 181 | + <li> | |
| 182 | + <a href="javasript:void(0);"> | |
| 183 | + {{ childCmnt.likes.length }}</a | |
| 184 | + > | |
| 156 | 185 | </li> |
| 157 | - <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li> | |
| 158 | - | |
| 159 | 186 | </ul> |
| 160 | - | |
| 161 | 187 | </div> |
| 162 | 188 | </div> |
| 163 | 189 | </div> |
| 164 | 190 | <!-- eree --> |
| 165 | - | |
| 191 | + | |
| 166 | 192 | <!-- comments footer --> |
| 167 | 193 | </li> |
| 168 | 194 | </ul> |
| ... | ... | @@ -190,40 +216,74 @@ |
| 190 | 216 | <div class="top-area-blank"></div> |
| 191 | 217 | <!-- fixed area --> |
| 192 | 218 | <div class="m-screen-comments"> |
| 193 | - <div class="single-author-li-comments"> | |
| 219 | + <div class="single-author-li-comments" v-if="commentExistCheck(0)"> | |
| 194 | 220 | <div class="a-intro-comments"> |
| 195 | - <p>{{ currentSlideData.payload.comments[0].comment }}</p> | |
| 196 | - <ul class="rly-comment-set"> | |
| 197 | - <li> | |
| 198 | - <img src="../assets/images/color-heart.svg" /> | |
| 199 | - <a href="javascript:void(0);">0</a> | |
| 200 | - </li> | |
| 201 | - <li> | |
| 202 | - <img src="../assets/images/rply.svg" /> | |
| 203 | - <a href="javascript:void(0);" @click="open_ct_box" | |
| 204 | - >Reply</a | |
| 205 | - > | |
| 206 | - </li> | |
| 207 | - </ul> | |
| 221 | + <p> | |
| 222 | + {{commentList[0].comment}} | |
| 223 | + </p> | |
| 224 | + <ul class="rly-comment-set"> | |
| 225 | + <!-- like/dislike --> | |
| 226 | + <li> | |
| 227 | + <img | |
| 228 | + src="../assets/images/heart.svg" | |
| 229 | + v-if="commentList[0].like == false" | |
| 230 | + @click="likeComment(true, commentList[0]._id)" | |
| 231 | + class="cursor-pointer" | |
| 232 | + /> | |
| 233 | + <img | |
| 234 | + src="../assets/images/purple-heart.png" | |
| 235 | + v-if="commentList[0].like == true" | |
| 236 | + @click="likeComment(false, commentList[0]._id)" | |
| 237 | + class="cursor-pointer" | |
| 238 | + /> | |
| 239 | + <a href="javascript:void(0);">{{ | |
| 240 | + commentList[0].likes.length | |
| 241 | + }}</a> | |
| 242 | + </li> | |
| 243 | + <!-- like/dislike ends --> | |
| 244 | + <li> | |
| 245 | + <img src="../assets/images/rply.svg" /> | |
| 246 | + <a href="javascript:void(0);" @click="reply_cht_box(0)" | |
| 247 | + >Reply</a | |
| 248 | + > | |
| 249 | + </li> | |
| 250 | + </ul> | |
| 208 | 251 | </div> |
| 209 | 252 | <!-- comments box --> |
| 210 | 253 | </div> |
| 211 | 254 | <!-- single author comments --> |
| 212 | - <div class="single-author-li-comments"> | |
| 255 | + <div class="single-author-li-comments" v-if="commentExistCheck(1)"> | |
| 213 | 256 | <div class="a-intro-comments"> |
| 214 | - <p>{{ currentSlideData.payload.comments[1].comment }}</p> | |
| 215 | - <ul class="rly-comment-set"> | |
| 216 | - <li> | |
| 217 | - <img src="../assets/images/color-heart.svg" /> | |
| 218 | - <a href="javascript:void(0);">0</a> | |
| 219 | - </li> | |
| 220 | - <li> | |
| 221 | - <img src="../assets/images/rply.svg" /> | |
| 222 | - <a href="javascript:void(0);" @click="open_ct_box" | |
| 223 | - >Reply</a | |
| 224 | - > | |
| 225 | - </li> | |
| 226 | - </ul> | |
| 257 | + <p> | |
| 258 | + {{commentList[1].comment}} | |
| 259 | + </p> | |
| 260 | + <ul class="rly-comment-set"> | |
| 261 | + <!-- like/dislike --> | |
| 262 | + <li> | |
| 263 | + <img | |
| 264 | + src="../assets/images/heart.svg" | |
| 265 | + v-if="commentList[1].like == false" | |
| 266 | + @click="likeComment(true, commentList[1]._id)" | |
| 267 | + class="cursor-pointer" | |
| 268 | + /> | |
| 269 | + <img | |
| 270 | + src="../assets/images/purple-heart.png" | |
| 271 | + v-if="commentList[1].like == true" | |
| 272 | + @click="likeComment(false, commentList[1]._id)" | |
| 273 | + class="cursor-pointer" | |
| 274 | + /> | |
| 275 | + <a href="javascript:void(0);">{{ | |
| 276 | + commentList[1].likes.length | |
| 277 | + }}</a> | |
| 278 | + </li> | |
| 279 | + <!-- like/dislike ends --> | |
| 280 | + <li> | |
| 281 | + <img src="../assets/images/rply.svg" /> | |
| 282 | + <a href="javascript:void(0);" @click="reply_cht_box(1)" | |
| 283 | + >Reply</a | |
| 284 | + > | |
| 285 | + </li> | |
| 286 | + </ul> | |
| 227 | 287 | </div> |
| 228 | 288 | <!-- comments box --> |
| 229 | 289 | </div> |
| ... | ... | @@ -244,40 +304,74 @@ |
| 244 | 304 | <div class="top-area-blank"></div> |
| 245 | 305 | <!-- fixed area --> |
| 246 | 306 | <div class="m-screen-right"> |
| 247 | - <div class="single-author-li-comments"> | |
| 307 | + <div class="single-author-li-comments" v-if="commentExistCheck(2)"> | |
| 248 | 308 | <div class="a-intro-comments"> |
| 249 | - <p>{{ currentSlideData.payload.comments[2].comment }}</p> | |
| 250 | - <ul class="rly-comment-set"> | |
| 251 | - <li> | |
| 252 | - <img src="../assets/images/color-heart.svg" /> | |
| 253 | - <a href="javascript:void(0);">0</a> | |
| 254 | - </li> | |
| 255 | - <li> | |
| 256 | - <img src="../assets/images/rply.svg" /> | |
| 257 | - <a href="javascript:void(0);" @click="open_ct_box" | |
| 258 | - >Reply</a | |
| 259 | - > | |
| 260 | - </li> | |
| 261 | - </ul> | |
| 309 | + <p> | |
| 310 | + {{commentList[2].comment}} | |
| 311 | + </p> | |
| 312 | + <ul class="rly-comment-set"> | |
| 313 | + <!-- like/dislike --> | |
| 314 | + <li> | |
| 315 | + <img | |
| 316 | + src="../assets/images/heart.svg" | |
| 317 | + v-if="commentList[2].like == false" | |
| 318 | + @click="likeComment(true, commentList[2]._id)" | |
| 319 | + class="cursor-pointer" | |
| 320 | + /> | |
| 321 | + <img | |
| 322 | + src="../assets/images/purple-heart.png" | |
| 323 | + v-if="commentList[2].like == true" | |
| 324 | + @click="likeComment(false, commentList[2]._id)" | |
| 325 | + class="cursor-pointer" | |
| 326 | + /> | |
| 327 | + <a href="javascript:void(0);">{{ | |
| 328 | + commentList[2].likes.length | |
| 329 | + }}</a> | |
| 330 | + </li> | |
| 331 | + <!-- like/dislike ends --> | |
| 332 | + <li> | |
| 333 | + <img src="../assets/images/rply.svg" /> | |
| 334 | + <a href="javascript:void(0);" @click="reply_cht_box(2)" | |
| 335 | + >Reply</a | |
| 336 | + > | |
| 337 | + </li> | |
| 338 | + </ul> | |
| 262 | 339 | </div> |
| 263 | 340 | <!-- comments box --> |
| 264 | 341 | </div> |
| 265 | 342 | <!-- single author comments --> |
| 266 | - <div class="single-author-li-comments"> | |
| 343 | + <div class="single-author-li-comments" v-if="commentExistCheck(3)"> | |
| 267 | 344 | <div class="a-intro-comments"> |
| 268 | - <p>{{ currentSlideData.payload.comments[3].comment }}</p> | |
| 269 | - <ul class="rly-comment-set"> | |
| 270 | - <li> | |
| 271 | - <img src="../assets/images/color-heart.svg" /> | |
| 272 | - <a href="javascript:void(0);">0</a> | |
| 273 | - </li> | |
| 274 | - <li> | |
| 275 | - <img src="../assets/images/rply.svg" /> | |
| 276 | - <a href="javascript:void(0);" @click="open_ct_box" | |
| 277 | - >Reply</a | |
| 278 | - > | |
| 279 | - </li> | |
| 280 | - </ul> | |
| 345 | + <p> | |
| 346 | + {{commentList[3].comment}} | |
| 347 | + </p> | |
| 348 | + <ul class="rly-comment-set"> | |
| 349 | + <!-- like/dislike --> | |
| 350 | + <li> | |
| 351 | + <img | |
| 352 | + src="../assets/images/heart.svg" | |
| 353 | + v-if="commentList[3].like == false" | |
| 354 | + @click="likeComment(true, commentList[3]._id)" | |
| 355 | + class="cursor-pointer" | |
| 356 | + /> | |
| 357 | + <img | |
| 358 | + src="../assets/images/purple-heart.png" | |
| 359 | + v-if="commentList[3].like == true" | |
| 360 | + @click="likeComment(false, commentList[3]._id)" | |
| 361 | + class="cursor-pointer" | |
| 362 | + /> | |
| 363 | + <a href="javascript:void(0);">{{ | |
| 364 | + commentList[3].likes.length | |
| 365 | + }}</a> | |
| 366 | + </li> | |
| 367 | + <!-- like/dislike ends --> | |
| 368 | + <li> | |
| 369 | + <img src="../assets/images/rply.svg" /> | |
| 370 | + <a href="javascript:void(0);" @click="reply_cht_box(3)" | |
| 371 | + >Reply</a | |
| 372 | + > | |
| 373 | + </li> | |
| 374 | + </ul> | |
| 281 | 375 | </div> |
| 282 | 376 | <!-- comments box --> |
| 283 | 377 | </div> |
| ... | ... | @@ -297,7 +391,7 @@ |
| 297 | 391 | </div> |
| 298 | 392 | |
| 299 | 393 | <!-- single author comments --> |
| 300 | - <div class="footer-nav"> | |
| 394 | + <div class="footer-nav"> | |
| 301 | 395 | <div class="footer-top white-bg"> |
| 302 | 396 | <div class="row"> |
| 303 | 397 | <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide"> |
| ... | ... | @@ -308,18 +402,19 @@ |
| 308 | 402 | <div class="ft-comments-group testi-photos-ct"> |
| 309 | 403 | <div class="c-with-photos"> |
| 310 | 404 | <span class="count-comments" |
| 311 | - >{{ commentList.length - 1 }}+ Comments</span | |
| 405 | + >{{ getLastcomment("count", commentList) }}+ | |
| 406 | + Comments</span | |
| 312 | 407 | ><!-- count commets --> |
| 313 | 408 | <ul class="comments-photos"> |
| 314 | - <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 315 | - <li><img src="../assets/images/c-photo-2.png" /></li> | |
| 316 | - <li><img src="../assets/images/c-photo-3.png" /></li> | |
| 409 | + <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> | |
| 410 | + <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> | |
| 411 | + <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> | |
| 317 | 412 | </ul> |
| 318 | 413 | <!-- comment photos --> |
| 319 | 414 | </div> |
| 320 | 415 | <div class="comments-detail all-c-space"> |
| 321 | 416 | <span |
| 322 | - >{{ commentList[commentList.length - 1].user.name }} | |
| 417 | + >{{ getLastcomment("name", commentList) }} | |
| 323 | 418 | <a href="javascript:void(0);" @click="open_ct_box" |
| 324 | 419 | >View All</a |
| 325 | 420 | ></span |
| ... | ... | @@ -327,7 +422,7 @@ |
| 327 | 422 | <p> |
| 328 | 423 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 329 | 424 | and “Pickup and Drop... --> |
| 330 | - {{ commentList[commentList.length - 1].comment }} | |
| 425 | + {{ getLastcomment("msg", commentList) }} | |
| 331 | 426 | </p> |
| 332 | 427 | </div> |
| 333 | 428 | <!-- comments detail --> |
| ... | ... | @@ -403,8 +498,12 @@ import Vue from "vue"; |
| 403 | 498 | import router from "../router"; |
| 404 | 499 | import axios from "axios"; |
| 405 | 500 | import moment from 'moment'; |
| 501 | +import Header from "./Header"; | |
| 406 | 502 | |
| 407 | 503 | export default { |
| 504 | + components: { | |
| 505 | + Header: Header, | |
| 506 | + }, | |
| 408 | 507 | name: "TwoScreenWithoutInsight", |
| 409 | 508 | |
| 410 | 509 | data() { |
| ... | ... | @@ -568,11 +667,76 @@ export default { |
| 568 | 667 | eachRply(cmnt) { |
| 569 | 668 | cmnt.childInput = true; |
| 570 | 669 | this.parentInput = false; |
| 670 | + this.comment = null; | |
| 671 | + setTimeout(() => { | |
| 672 | + document.getElementById("childInput").focus(); | |
| 673 | + }, 100); | |
| 571 | 674 | }, |
| 572 | 675 | discardRply(cmnt) { |
| 573 | 676 | cmnt.childInput = false; |
| 574 | 677 | this.parentInput = true; |
| 575 | - | |
| 678 | + this.comment = null; | |
| 679 | + }, | |
| 680 | + reply_cht_box(i) { | |
| 681 | + console.log(this.commentList, "cmnt"); | |
| 682 | + $("#cht_box_close").addClass("cht_close"); | |
| 683 | + $("#open_ct_box, .c_hide").hide(); | |
| 684 | + $(".footer-top").removeClass("white-bg"); | |
| 685 | + this.commentList[i].childInput = true; | |
| 686 | + this.parentInput = false; | |
| 687 | + this.comment = null; | |
| 688 | + setTimeout(() => { | |
| 689 | + document.getElementById("childInput").focus(); | |
| 690 | + }, 100); | |
| 691 | + }, | |
| 692 | + likeComment(status, id) { | |
| 693 | + console.log("===", this.comment); | |
| 694 | + var obj = { | |
| 695 | + commentId: id, | |
| 696 | + like: status, | |
| 697 | + }; | |
| 698 | + axios | |
| 699 | + .post("/bounceBoard/like", obj, { | |
| 700 | + headers: { | |
| 701 | + Authorization: "Bearer " + this.usertoken, | |
| 702 | + }, | |
| 703 | + }) | |
| 704 | + .then((response) => { | |
| 705 | + this.getComment(); | |
| 706 | + console.log(response); | |
| 707 | + }) | |
| 708 | + .catch((error) => { | |
| 709 | + if (error.response) { | |
| 710 | + this.$toaster.error(error.response.data.message); | |
| 711 | + } | |
| 712 | + }); | |
| 713 | + }, | |
| 714 | + getLastcomment(flag, commentArray) { | |
| 715 | + var finalComment = null; | |
| 716 | + var totalMessage = 0; | |
| 717 | + var name = null; | |
| 718 | + commentArray.forEach((comment_) => { | |
| 719 | + if (comment_.comment != null) { | |
| 720 | + name = comment_.user.name; | |
| 721 | + finalComment = comment_.comment; | |
| 722 | + totalMessage++; | |
| 723 | + } | |
| 724 | + }); | |
| 725 | + if (flag == "count") { | |
| 726 | + return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | |
| 727 | + } else if (flag =="name") { | |
| 728 | + return (name = name); | |
| 729 | + } else { | |
| 730 | + return finalComment; | |
| 731 | + } | |
| 732 | + }, | |
| 733 | + commentExistCheck(i) { | |
| 734 | + console.log(this.commentList[i].comment); | |
| 735 | + var returnValue = false; | |
| 736 | + if (this.commentList[i].comment) { | |
| 737 | + returnValue = true; | |
| 738 | + } | |
| 739 | + return returnValue; | |
| 576 | 740 | }, |
| 577 | 741 | }, |
| 578 | 742 | }; | ... | ... |
src/components/noscreenshotSingleautho.vue
| 1 | 1 | <template> |
| 2 | 2 | <main class="landing-page"> |
| 3 | 3 | <div class="container-fluid episode-intro"> |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="javascript:void(0);" | |
| 6 | - ><img src="../assets/images/logo.png" | |
| 7 | - /></a> | |
| 8 | - <button | |
| 9 | - class="navbar-toggler" | |
| 10 | - type="button" | |
| 11 | - data-toggle="collapse" | |
| 12 | - data-target="#navbarsExample03" | |
| 13 | - aria-controls="navbarsExample03" | |
| 14 | - aria-expanded="false" | |
| 15 | - aria-label="Toggle navigation" | |
| 16 | - > | |
| 17 | - <span class="navbar-toggler-icon"></span> | |
| 18 | - <span class="navbar-toggler-icon"></span> | |
| 19 | - <span class="navbar-toggler-icon"></span> | |
| 20 | - </button> | |
| 21 | - <div class="user-profile-photo insights-profile"> | |
| 22 | - <a href="javascript:void(0);"><img src="../assets/images/lock.svg" /></a> | |
| 23 | - </div> | |
| 24 | - </nav> | |
| 4 | + <Header></Header> | |
| 25 | 5 | <!-- menu wrapper --> |
| 26 | 6 | <div class="intro-startup"> |
| 27 | 7 | |
| 28 | - <!-- chat box --> | |
| 8 | + <!-- chat box --> | |
| 29 | 9 | <div class="bounce-board-wrp" id="cht_box_close"> |
| 30 | 10 | <div class="inner-wrp-bc"> |
| 31 | 11 | <div class="bc-top-head"> |
| ... | ... | @@ -67,13 +47,12 @@ |
| 67 | 47 | </div> |
| 68 | 48 | <!-- top head --> |
| 69 | 49 | <div class="bounce-board-body"> |
| 70 | - | |
| 71 | 50 | <!-- all user comments --> |
| 72 | 51 | <ul class="bounced-user-comments"> |
| 73 | 52 | <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j"> |
| 74 | 53 | <div class="bc_brd_l"></div> |
| 75 | 54 | <!-- border --> |
| 76 | - <div class="parent-full-width"> | |
| 55 | + <div class="parent-full-width" v-if="cmnt.comment"> | |
| 77 | 56 | <div class="full-width"> |
| 78 | 57 | <div class="b-user-head"> |
| 79 | 58 | <img :src="cmnt.user.profilePic" /> |
| ... | ... | @@ -85,7 +64,9 @@ |
| 85 | 64 | cmnt.user.karmaPoints |
| 86 | 65 | }}pts |
| 87 | 66 | </li> |
| 88 | - <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li> | |
| 67 | + <li> | |
| 68 | + <span></span>{{ dateGenerator(cmnt.createdAt) }} | |
| 69 | + </li> | |
| 89 | 70 | </ul> |
| 90 | 71 | </div> |
| 91 | 72 | <!-- header --> |
| ... | ... | @@ -95,13 +76,32 @@ |
| 95 | 76 | <div class="joined_wrapper"> |
| 96 | 77 | <ul class="joined-info info_bc_spc"> |
| 97 | 78 | <li> |
| 98 | - <img src="../assets/images/purple-heart.png" /> | |
| 79 | + <img | |
| 80 | + src="../assets/images/heart.svg" | |
| 81 | + v-if="cmnt.like == false" | |
| 82 | + @click="likeComment(true, cmnt._id)" | |
| 83 | + class="cursor-pointer" | |
| 84 | + /> | |
| 85 | + <img | |
| 86 | + src="../assets/images/purple-heart.png" | |
| 87 | + v-if="cmnt.like == true" | |
| 88 | + @click="likeComment(false, cmnt._id)" | |
| 89 | + class="cursor-pointer" | |
| 90 | + /> | |
| 91 | + </li> | |
| 92 | + <li> | |
| 93 | + <a href="javasript:void(0);"> | |
| 94 | + {{ cmnt.likes.length }}</a | |
| 95 | + > | |
| 99 | 96 | </li> |
| 100 | - <li><a href="javasript:void(0);"> 0</a></li> | |
| 101 | 97 | <li class="comment-spc"> |
| 102 | 98 | <img src="../assets/images/purple-comment.png" /> |
| 103 | 99 | </li> |
| 104 | - <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li> | |
| 100 | + <li> | |
| 101 | + <a href="javasript:void(0);"> | |
| 102 | + {{ cmnt.children.length }}</a | |
| 103 | + > | |
| 104 | + </li> | |
| 105 | 105 | </ul> |
| 106 | 106 | <div class="add_rply" v-if="!cmnt.childInput"> |
| 107 | 107 | <input |
| ... | ... | @@ -118,7 +118,7 @@ |
| 118 | 118 | <!-- full width --> |
| 119 | 119 | </div> |
| 120 | 120 | <div class="comments-footer each-ft" v-if="cmnt.childInput"> |
| 121 | - <textarea v-model="comment"></textarea> | |
| 121 | + <textarea v-model="comment" id="childInput"></textarea> | |
| 122 | 122 | <div class="comments-footer-wrp"> |
| 123 | 123 | <a |
| 124 | 124 | @click="createChildComment(cmnt)" |
| ... | ... | @@ -126,42 +126,69 @@ |
| 126 | 126 | class="add_comments_chat reply-Wdth" |
| 127 | 127 | >Reply</a |
| 128 | 128 | > |
| 129 | - <a href="javasript:void(0);" class="discard_bt" | |
| 130 | - @click="discardRply(cmnt)"><img src="../assets/images/discard.svg" | |
| 129 | + <a | |
| 130 | + href="javasript:void(0);" | |
| 131 | + class="discard_bt" | |
| 132 | + @click="discardRply(cmnt)" | |
| 133 | + ><img src="../assets/images/discard.svg" | |
| 131 | 134 | /></a> |
| 132 | 135 | </div> |
| 133 | 136 | </div> |
| 134 | 137 | <!-- parent --> |
| 135 | - <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i"> | |
| 138 | + <div | |
| 139 | + class="child-full-width" | |
| 140 | + v-for="(childCmnt, i) in cmnt.children" | |
| 141 | + :key="i" | |
| 142 | + > | |
| 136 | 143 | <div class="full-width"> |
| 137 | 144 | <div class="b-user-head"> |
| 138 | 145 | <img :src="childCmnt.user.profilePic" /> |
| 139 | - <span class="head-content">{{childCmnt.user.name }} </span> | |
| 146 | + <span class="head-content" | |
| 147 | + >{{ childCmnt.user.name }} | |
| 148 | + </span> | |
| 140 | 149 | <ul> |
| 141 | 150 | <li> |
| 142 | 151 | <span></span |
| 143 | - ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts | |
| 152 | + ><img src="../assets/images/u-info-icon.png" />{{ | |
| 153 | + childCmnt.user.karmaPoints | |
| 154 | + }}pts | |
| 155 | + </li> | |
| 156 | + <li> | |
| 157 | + <span></span | |
| 158 | + >{{ dateGenerator(childCmnt.createdAt) }} | |
| 144 | 159 | </li> |
| 145 | - <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li> | |
| 146 | 160 | </ul> |
| 147 | 161 | </div> |
| 148 | 162 | <p> |
| 149 | - {{childCmnt.comment}} | |
| 163 | + {{ childCmnt.comment }} | |
| 150 | 164 | </p> |
| 151 | 165 | <div class="joined_wrapper"> |
| 152 | 166 | <ul class="joined-info info_bc_spc"> |
| 153 | 167 | <li> |
| 154 | - <img src="../assets/images/purple-heart.png" /> | |
| 168 | + <img | |
| 169 | + src="../assets/images/heart.svg" | |
| 170 | + v-if="childCmnt.like == false" | |
| 171 | + @click="likeComment(true, childCmnt._id)" | |
| 172 | + class="cursor-pointer" | |
| 173 | + /> | |
| 174 | + <img | |
| 175 | + src="../assets/images/purple-heart.png" | |
| 176 | + v-if="childCmnt.like == true" | |
| 177 | + @click="likeComment(false, childCmnt._id)" | |
| 178 | + class="cursor-pointer" | |
| 179 | + /> | |
| 180 | + </li> | |
| 181 | + <li> | |
| 182 | + <a href="javasript:void(0);"> | |
| 183 | + {{ childCmnt.likes.length }}</a | |
| 184 | + > | |
| 155 | 185 | </li> |
| 156 | - <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li> | |
| 157 | - | |
| 158 | 186 | </ul> |
| 159 | - | |
| 160 | 187 | </div> |
| 161 | 188 | </div> |
| 162 | 189 | </div> |
| 163 | 190 | <!-- eree --> |
| 164 | - | |
| 191 | + | |
| 165 | 192 | <!-- comments footer --> |
| 166 | 193 | </li> |
| 167 | 194 | </ul> |
| ... | ... | @@ -187,37 +214,71 @@ |
| 187 | 214 | <div class="single-author-comments"> |
| 188 | 215 | <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> --> |
| 189 | 216 | <div class="ct-l-400"> |
| 190 | - <div class="single-author-li-comments"> | |
| 217 | + <div class="single-author-li-comments" v-if="commentExistCheck(0)"> | |
| 191 | 218 | <div class="a-intro-comments right-corner"> |
| 192 | - <p> | |
| 193 | - {{currentSlideData.payload.comments[0].comment}} | |
| 219 | + <p> | |
| 220 | + {{commentList[0].comment}} | |
| 194 | 221 | </p> |
| 195 | 222 | <ul class="rly-comment-set"> |
| 223 | + <!-- like/dislike --> | |
| 196 | 224 | <li> |
| 197 | - <img src="../assets/images/color-heart.svg" /> | |
| 198 | - <a href="javascript:void(0);">0</a> | |
| 225 | + <img | |
| 226 | + src="../assets/images/heart.svg" | |
| 227 | + v-if="commentList[0].like == false" | |
| 228 | + @click="likeComment(true, commentList[0]._id)" | |
| 229 | + class="cursor-pointer" | |
| 230 | + /> | |
| 231 | + <img | |
| 232 | + src="../assets/images/purple-heart.png" | |
| 233 | + v-if="commentList[0].like == true" | |
| 234 | + @click="likeComment(false, commentList[0]._id)" | |
| 235 | + class="cursor-pointer" | |
| 236 | + /> | |
| 237 | + <a href="javascript:void(0);">{{ | |
| 238 | + commentList[0].likes.length | |
| 239 | + }}</a> | |
| 199 | 240 | </li> |
| 241 | + <!-- like/dislike ends --> | |
| 200 | 242 | <li> |
| 201 | 243 | <img src="../assets/images/rply.svg" /> |
| 202 | - <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | |
| 244 | + <a href="javascript:void(0);" @click="reply_cht_box(0)" | |
| 245 | + >Reply</a | |
| 246 | + > | |
| 203 | 247 | </li> |
| 204 | 248 | </ul> |
| 205 | 249 | </div> |
| 206 | - | |
| 207 | - </div> <!-- comments box --> | |
| 208 | - <div class="single-author-li-comments"> | |
| 250 | + | |
| 251 | + </div> <!-- comments box --> | |
| 252 | + <div class="single-author-li-comments" v-if="commentExistCheck(1)"> | |
| 209 | 253 | <div class="a-intro-comments right-corner"> |
| 210 | - <p> | |
| 211 | - {{currentSlideData.payload.comments[0].comment}} | |
| 254 | + <p> | |
| 255 | + {{commentList[1].comment}} | |
| 212 | 256 | </p> |
| 213 | 257 | <ul class="rly-comment-set"> |
| 258 | + <!-- like/dislike --> | |
| 214 | 259 | <li> |
| 215 | - <img src="../assets/images/color-heart.svg" /> | |
| 216 | - <a href="javascript:void(0);">0</a> | |
| 260 | + <img | |
| 261 | + src="../assets/images/heart.svg" | |
| 262 | + v-if="commentList[1].like == false" | |
| 263 | + @click="likeComment(true, commentList[1]._id)" | |
| 264 | + class="cursor-pointer" | |
| 265 | + /> | |
| 266 | + <img | |
| 267 | + src="../assets/images/purple-heart.png" | |
| 268 | + v-if="commentList[1].like == true" | |
| 269 | + @click="likeComment(false, commentList[1]._id)" | |
| 270 | + class="cursor-pointer" | |
| 271 | + /> | |
| 272 | + <a href="javascript:void(0);">{{ | |
| 273 | + commentList[1].likes.length | |
| 274 | + }}</a> | |
| 217 | 275 | </li> |
| 276 | + <!-- like/dislike ends --> | |
| 218 | 277 | <li> |
| 219 | 278 | <img src="../assets/images/rply.svg" /> |
| 220 | - <a href="javascript:void(0);" @click="open_ct_box">Reply</a> | |
| 279 | + <a href="javascript:void(0);" @click="reply_cht_box(1)" | |
| 280 | + >Reply</a | |
| 281 | + > | |
| 221 | 282 | </li> |
| 222 | 283 | </ul> |
| 223 | 284 | </div> |
| ... | ... | @@ -233,7 +294,7 @@ |
| 233 | 294 | <div class="a-intro-comments custom-selected-style custom-selected-style-2"> |
| 234 | 295 | |
| 235 | 296 | <div class="top-wrp"> |
| 236 | - {{currentSlideData.payload.insight.tag}} Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> | |
| 297 | + {{currentSlideData.payload.insight.tag}} Insight <a @click="open(currentSlideData.payload.insight.furtherReading[0])" href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a> | |
| 237 | 298 | </div> |
| 238 | 299 | <div class="top-head">{{currentSlideData.payload.insight.title}}</div> |
| 239 | 300 | <p>{{currentSlideData.payload.insight.description}} |
| ... | ... | @@ -261,18 +322,19 @@ |
| 261 | 322 | <div class="ft-comments-group testi-photos-ct"> |
| 262 | 323 | <div class="c-with-photos"> |
| 263 | 324 | <span class="count-comments" |
| 264 | - >{{ commentList.length - 1 }}+ Comments</span | |
| 325 | + >{{ getLastcomment("count", commentList) }}+ | |
| 326 | + Comments</span | |
| 265 | 327 | ><!-- count commets --> |
| 266 | 328 | <ul class="comments-photos"> |
| 267 | - <li><img src="../assets/images/c-photo-1.png" /></li> | |
| 268 | - <li><img src="../assets/images/c-photo-2.png" /></li> | |
| 269 | - <li><img src="../assets/images/c-photo-3.png" /></li> | |
| 329 | + <!-- <li><img src="../assets/images/c-photo-1.png" /></li> --> | |
| 330 | + <!-- <li><img src="../assets/images/c-photo-2.png" /></li> --> | |
| 331 | + <!-- <li><img src="../assets/images/c-photo-3.png" /></li> --> | |
| 270 | 332 | </ul> |
| 271 | 333 | <!-- comment photos --> |
| 272 | 334 | </div> |
| 273 | 335 | <div class="comments-detail all-c-space"> |
| 274 | 336 | <span |
| 275 | - >{{ commentList[commentList.length - 1].user.name }} | |
| 337 | + >{{ getLastcomment("name", commentList) }} | |
| 276 | 338 | <a href="javascript:void(0);" @click="open_ct_box" |
| 277 | 339 | >View All</a |
| 278 | 340 | ></span |
| ... | ... | @@ -280,7 +342,7 @@ |
| 280 | 342 | <p> |
| 281 | 343 | <!-- I wonder what the difference between “Dunzo Assistant” |
| 282 | 344 | and “Pickup and Drop... --> |
| 283 | - {{ commentList[commentList.length - 1].comment }} | |
| 345 | + {{ getLastcomment("msg", commentList) }} | |
| 284 | 346 | </p> |
| 285 | 347 | </div> |
| 286 | 348 | <!-- comments detail --> |
| ... | ... | @@ -356,7 +418,12 @@ import Vue from "vue"; |
| 356 | 418 | import router from "../router"; |
| 357 | 419 | import axios from "axios"; |
| 358 | 420 | import moment from 'moment'; |
| 421 | +import Header from "./Header"; | |
| 422 | + | |
| 359 | 423 | export default { |
| 424 | + components: { | |
| 425 | + Header: Header, | |
| 426 | + }, | |
| 360 | 427 | name: "noscreenshotSingleautho", |
| 361 | 428 | data() { |
| 362 | 429 | return { |
| ... | ... | @@ -504,6 +571,9 @@ data() { |
| 504 | 571 | goToSignUp() { |
| 505 | 572 | this.$router.push("/"); |
| 506 | 573 | }, |
| 574 | + open(url){ | |
| 575 | + window.open(url); | |
| 576 | + }, | |
| 507 | 577 | chtbox_close() { |
| 508 | 578 | $("#cht_box_close").removeClass("cht_close"); |
| 509 | 579 | $("#open_ct_box, .c_hide").show(); |
| ... | ... | @@ -517,11 +587,76 @@ data() { |
| 517 | 587 | eachRply(cmnt) { |
| 518 | 588 | cmnt.childInput = true; |
| 519 | 589 | this.parentInput = false; |
| 590 | + this.comment = null; | |
| 591 | + setTimeout(() => { | |
| 592 | + document.getElementById("childInput").focus(); | |
| 593 | + }, 100); | |
| 520 | 594 | }, |
| 521 | 595 | discardRply(cmnt) { |
| 522 | 596 | cmnt.childInput = false; |
| 523 | 597 | this.parentInput = true; |
| 524 | - | |
| 598 | + this.comment = null; | |
| 599 | + }, | |
| 600 | + reply_cht_box(i) { | |
| 601 | + console.log(this.commentList, "cmnt"); | |
| 602 | + $("#cht_box_close").addClass("cht_close"); | |
| 603 | + $("#open_ct_box, .c_hide").hide(); | |
| 604 | + $(".footer-top").removeClass("white-bg"); | |
| 605 | + this.commentList[i].childInput = true; | |
| 606 | + this.parentInput = false; | |
| 607 | + this.comment = null; | |
| 608 | + setTimeout(() => { | |
| 609 | + document.getElementById("childInput").focus(); | |
| 610 | + }, 100); | |
| 611 | + }, | |
| 612 | + likeComment(status, id) { | |
| 613 | + console.log("===", this.comment); | |
| 614 | + var obj = { | |
| 615 | + commentId: id, | |
| 616 | + like: status, | |
| 617 | + }; | |
| 618 | + axios | |
| 619 | + .post("/bounceBoard/like", obj, { | |
| 620 | + headers: { | |
| 621 | + Authorization: "Bearer " + this.usertoken, | |
| 622 | + }, | |
| 623 | + }) | |
| 624 | + .then((response) => { | |
| 625 | + this.getComment(); | |
| 626 | + console.log(response); | |
| 627 | + }) | |
| 628 | + .catch((error) => { | |
| 629 | + if (error.response) { | |
| 630 | + this.$toaster.error(error.response.data.message); | |
| 631 | + } | |
| 632 | + }); | |
| 633 | + }, | |
| 634 | + getLastcomment(flag, commentArray) { | |
| 635 | + var finalComment = null; | |
| 636 | + var totalMessage = 0; | |
| 637 | + var name = null; | |
| 638 | + commentArray.forEach((comment_) => { | |
| 639 | + if (comment_.comment != null) { | |
| 640 | + name = comment_.user.name; | |
| 641 | + finalComment = comment_.comment; | |
| 642 | + totalMessage++; | |
| 643 | + } | |
| 644 | + }); | |
| 645 | + if (flag == "count") { | |
| 646 | + return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1); | |
| 647 | + } else if (flag =="name") { | |
| 648 | + return (name = name); | |
| 649 | + } else { | |
| 650 | + return finalComment; | |
| 651 | + } | |
| 652 | + }, | |
| 653 | + commentExistCheck(i) { | |
| 654 | + console.log(this.commentList[i].comment); | |
| 655 | + var returnValue = false; | |
| 656 | + if (this.commentList[i].comment) { | |
| 657 | + returnValue = true; | |
| 658 | + } | |
| 659 | + return returnValue; | |
| 525 | 660 | }, |
| 526 | 661 | }, |
| 527 | 662 | }; | ... | ... |
src/components/outro.vue
| 1 | 1 | <template> |
| 2 | 2 | <main class="landing-page"> |
| 3 | 3 | <div class="container-fluid episode-intro"> |
| 4 | - <nav class="navbar navbar-expand-sm spotLight-nav"> | |
| 5 | - <a class="navbar-brand" href="javascript:void(0);" | |
| 6 | - ><img src="../assets/images/logo.png" | |
| 7 | - /></a> | |
| 8 | - <button | |
| 9 | - class="navbar-toggler" | |
| 10 | - type="button" | |
| 11 | - data-toggle="collapse" | |
| 12 | - data-target="#navbarsExample03" | |
| 13 | - aria-controls="navbarsExample03" | |
| 14 | - aria-expanded="false" | |
| 15 | - aria-label="Toggle navigation" | |
| 16 | - > | |
| 17 | - <span class="navbar-toggler-icon"></span> | |
| 18 | - <span class="navbar-toggler-icon"></span> | |
| 19 | - <span class="navbar-toggler-icon"></span> | |
| 20 | - </button> | |
| 21 | - <div class="user-profile-photo insights-profile"> | |
| 22 | - <a href="javascript:void(0);"><img src="../assets/images/user.png" /></a> | |
| 23 | - </div> | |
| 24 | - </nav> | |
| 4 | + <Header></Header> | |
| 5 | + | |
| 25 | 6 | <!-- menu wrapper --> |
| 26 | 7 | <div class="intro-startup"> |
| 27 | 8 | <div class="thanks-wrapper"> |
| ... | ... | @@ -216,8 +197,12 @@ |
| 216 | 197 | import Vue from "vue"; |
| 217 | 198 | import router from "../router"; |
| 218 | 199 | import axios from "axios"; |
| 200 | +import Header from "./Header"; | |
| 219 | 201 | |
| 220 | 202 | export default { |
| 203 | + components: { | |
| 204 | + Header: Header, | |
| 205 | + }, | |
| 221 | 206 | name: "Outro", |
| 222 | 207 | |
| 223 | 208 | data() { | ... | ... |