1
0

PostComments.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <style scoped>
  2. span {
  3. font-size: 14px;
  4. }
  5. .comment-text {
  6. }
  7. .comment-text p {
  8. display: inline;
  9. }
  10. </style>
  11. <template>
  12. <div>
  13. <div class="postCommentsLoader text-center">
  14. <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
  15. </div>
  16. <div class="postCommentsContainer d-none">
  17. <p class="mb-1 text-center load-more-link d-none"><a href="#" class="text-muted" v-on:click="loadMore">Load more comments</a></p>
  18. <div class="comments" data-min-id="0" data-max-id="0">
  19. <p v-for="(reply, index) in results" class="mb-0 d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;">
  20. <span>
  21. <a class="text-dark font-weight-bold mr-1" :href="reply.account.url" v-bind:title="reply.account.username">{{truncate(reply.account.username,15)}}</a>
  22. <span class="text-break" v-html="reply.content"></span>
  23. </span>
  24. <span class="pl-2" style="min-width:38px">
  25. <span v-on:click="likeStatus(reply, $event)"><i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger':'far fa-heart fa-sm text-lighter']"></i></span>
  26. <post-menu :status="reply" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block pl-2"></post-menu>
  27. </span>
  28. </p>
  29. </div>
  30. </div>
  31. </div>
  32. </template>
  33. <style type="text/css" scoped>
  34. .text-lighter {
  35. color:#B8C2CC !important;
  36. }
  37. .text-break {
  38. word-break: break-all !important;
  39. }
  40. </style>
  41. <script>
  42. export default {
  43. props: ['post-id', 'post-username', 'user'],
  44. data() {
  45. return {
  46. results: null,
  47. pagination: {},
  48. min_id: 0,
  49. max_id: 0,
  50. reply_to_profile_id: 0,
  51. }
  52. },
  53. mounted() {
  54. this.fetchData();
  55. },
  56. updated() {
  57. pixelfed.readmore();
  58. },
  59. methods: {
  60. embed(e) {
  61. //pixelfed.embed.build(e);
  62. },
  63. deleteComment(id, i) {
  64. axios.post('/i/delete', {
  65. type: 'comment',
  66. item: id
  67. }).then(res => {
  68. this.results.splice(i, 1);
  69. }).catch(err => {
  70. swal('Something went wrong!', 'Please try again later', 'error');
  71. });
  72. },
  73. l(e) {
  74. let len = e.length;
  75. if(len < 10) { return e; }
  76. return e.substr(0, 10)+'...';
  77. },
  78. reply(e) {
  79. this.reply_to_profile_id = e.account.id;
  80. $('.comment-form input[name=comment]').val('@'+e.account.username+' ');
  81. $('.comment-form input[name=comment]').focus();
  82. },
  83. fetchData() {
  84. let url = '/api/v2/comments/'+this.postUsername+'/status/'+this.postId;
  85. axios.get(url)
  86. .then(response => {
  87. let self = this;
  88. this.results = _.reverse(response.data.data);
  89. this.pagination = response.data.meta.pagination;
  90. if(this.results.length > 0) {
  91. $('.load-more-link').removeClass('d-none');
  92. }
  93. $('.postCommentsLoader').addClass('d-none');
  94. $('.postCommentsContainer').removeClass('d-none');
  95. }).catch(error => {
  96. if(!error.response) {
  97. $('.postCommentsLoader .lds-ring')
  98. .attr('style','width:100%')
  99. .addClass('pt-4 font-weight-bold text-muted')
  100. .text('An error occurred, cannot fetch comments. Please try again later.');
  101. } else {
  102. switch(error.response.status) {
  103. case 401:
  104. $('.postCommentsLoader .lds-ring')
  105. .attr('style','width:100%')
  106. .addClass('pt-4 font-weight-bold text-muted')
  107. .text('Please login to view.');
  108. break;
  109. default:
  110. $('.postCommentsLoader .lds-ring')
  111. .attr('style','width:100%')
  112. .addClass('pt-4 font-weight-bold text-muted')
  113. .text('An error occurred, cannot fetch comments. Please try again later.');
  114. break;
  115. }
  116. }
  117. });
  118. },
  119. loadMore(e) {
  120. e.preventDefault();
  121. if(this.pagination.total_pages == 1 || this.pagination.current_page == this.pagination.total_pages) {
  122. $('.load-more-link').addClass('d-none');
  123. return;
  124. }
  125. $('.postCommentsLoader').removeClass('d-none');
  126. let next = this.pagination.links.next;
  127. axios.get(next)
  128. .then(response => {
  129. let self = this;
  130. let res = response.data.data;
  131. $('.postCommentsLoader').addClass('d-none');
  132. for(let i=0; i < res.length; i++) {
  133. this.results.unshift(res[i]);
  134. }
  135. this.pagination = response.data.meta.pagination;
  136. });
  137. },
  138. likeStatus(status, $event) {
  139. if($('body').hasClass('loggedIn') == false) {
  140. return;
  141. }
  142. axios.post('/i/like', {
  143. item: status.id
  144. }).then(res => {
  145. status.favourites_count = res.data.count;
  146. if(status.favourited == true) {
  147. status.favourited = false;
  148. } else {
  149. status.favourited = true;
  150. }
  151. }).catch(err => {
  152. swal('Error', 'Something went wrong, please try again later.', 'error');
  153. });
  154. },
  155. truncate(str,lim) {
  156. return _.truncate(str,{
  157. length: lim
  158. });
  159. }
  160. },
  161. }
  162. </script>