SearchResults.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <div class="container">
  3. <div v-if="loading" class="pt-5 text-center">
  4. <div class="spinner-border" role="status">
  5. <span class="sr-only">Loading…</span>
  6. </div>
  7. </div>
  8. <div v-if="networkError" class="pt-5 text-center">
  9. <p class="lead font-weight-lighter">An error occured, results could not be loaded.<br> Please try again later.</p>
  10. </div>
  11. <div v-if="!loading && !networkError" class="mt-5 row">
  12. <div class="col-12 col-md-3 mb-4">
  13. <div>
  14. <p class="font-weight-bold">Filters</p>
  15. <div class="custom-control custom-checkbox">
  16. <input type="checkbox" class="custom-control-input" id="filter1" v-model="filters.hashtags">
  17. <label class="custom-control-label text-muted" for="filter1">Show Hashtags</label>
  18. </div>
  19. <div class="custom-control custom-checkbox">
  20. <input type="checkbox" class="custom-control-input" id="filter2" v-model="filters.profiles">
  21. <label class="custom-control-label text-muted" for="filter2">Show Profiles</label>
  22. </div>
  23. <div class="custom-control custom-checkbox">
  24. <input type="checkbox" class="custom-control-input" id="filter3" v-model="filters.statuses">
  25. <label class="custom-control-label text-muted" for="filter3">Show Statuses</label>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="col-12 col-md-9">
  30. <p class="h5 font-weight-bold">Showing results for <i>{{query}}</i></p>
  31. <hr>
  32. <div v-if="filters.hashtags && results.hashtags" class="row mb-4">
  33. <p class="col-12 font-weight-bold text-muted">Hashtags</p>
  34. <a v-for="(hashtag, index) in results.hashtags" class="col-12 col-md-3 mb-3" style="text-decoration: none;" :href="hashtag.url">
  35. <div class="card card-body text-center">
  36. <p class="lead mb-0 text-truncate text-dark" data-toggle="tooltip" :title="hashtag.value">
  37. #{{hashtag.value}}
  38. </p>
  39. <p class="lead mb-0 small font-weight-bold text-dark">
  40. {{hashtag.count}} posts
  41. </p>
  42. </div>
  43. </a>
  44. </div>
  45. <div v-if="filters.profiles && results.profiles" class="row mb-4">
  46. <p class="col-12 font-weight-bold text-muted">Profiles</p>
  47. <a v-for="(profile, index) in results.profiles" class="col-12 col-md-4 mb-3" style="text-decoration: none;" :href="profile.url">
  48. <div class="card card-body text-center">
  49. <p class="text-center">
  50. <img :src="profile.entity.thumb" width="32px" height="32px" class="rounded-circle box-shadow">
  51. </p>
  52. <p class="font-weight-bold text-truncate text-dark">
  53. {{profile.value}}
  54. </p>
  55. <p class="mb-0 text-center">
  56. <button :class="[profile.entity.following ? 'btn btn-secondary btn-sm py-1 font-weight-bold' : 'btn btn-primary btn-sm py-1 font-weight-bold']" v-on:click="followProfile(profile.entity.id)">
  57. {{profile.entity.following ? 'Unfollow' : 'Follow'}}
  58. </button>
  59. </p>
  60. </div>
  61. </a>
  62. </div>
  63. <div v-if="filters.statuses && results.statuses" class="row mb-4">
  64. <p class="col-12 font-weight-bold text-muted">Statuses</p>
  65. <a v-for="(status, index) in results.statuses" class="col-12 col-md-4 mb-3" style="text-decoration: none;" :href="status.url">
  66. <div class="card">
  67. <img class="card-img-top img-fluid" :src="status.thumb" style="height:180px;">
  68. <div class="card-body text-center ">
  69. <p class="mb-0 small text-truncate font-weight-bold text-muted" v-html="status.value">
  70. </p>
  71. </div>
  72. </div>
  73. </a>
  74. </div>
  75. <div v-if="!results.hashtags && !results.profiles && !results.statuses">
  76. <p class="text-center lead">No results found!</p>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </template>
  82. <style type="text/css" scoped>
  83. </style>
  84. <script type="text/javascript">
  85. export default {
  86. props: ['query', 'profileId'],
  87. data() {
  88. return {
  89. loading: true,
  90. networkError: false,
  91. results: {
  92. hashtags: [],
  93. profiles: [],
  94. statuses: []
  95. },
  96. filters: {
  97. hashtags: true,
  98. profiles: true,
  99. statuses: true
  100. }
  101. }
  102. },
  103. beforeMount() {
  104. this.fetchSearchResults();
  105. },
  106. mounted() {
  107. $('.search-form input').val(this.query);
  108. },
  109. updated() {
  110. },
  111. methods: {
  112. fetchSearchResults() {
  113. axios.get('/api/search/' + encodeURI(this.query))
  114. .then(res => {
  115. let results = res.data;
  116. this.results.hashtags = results.hashtags;
  117. this.results.profiles = results.profiles;
  118. this.results.statuses = results.posts;
  119. this.loading = false;
  120. }).catch(err => {
  121. this.loading = false;
  122. // this.networkError = true;
  123. })
  124. },
  125. followProfile(id) {
  126. axios.post('/i/follow', {
  127. item: id
  128. }).then(res => {
  129. window.location.href = window.location.href;
  130. });
  131. },
  132. }
  133. }
  134. </script>