RecentActivity.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <div class="content recent-activity-tab">
  3. <div v-if="activities.length > 0">
  4. <h4 class="section-title">Recent activity</h4>
  5. <p class="section-description">
  6. This is a log of all actions
  7. {{ userId === myUserId ? "you have" : `${username} has` }}
  8. taken recently.
  9. </p>
  10. <hr class="section-horizontal-rule" />
  11. <div id="activity-items" @scroll="handleScroll">
  12. <activity-item
  13. class="item activity-item universal-item"
  14. v-for="activity in activities"
  15. :key="activity._id"
  16. :activity="activity"
  17. >
  18. <div slot="actions">
  19. <a
  20. v-if="userId === myUserId"
  21. href="#"
  22. @click.prevent="hideActivity(activity._id)"
  23. >
  24. <i class="material-icons hide-icon"
  25. >visibility_off</i
  26. >
  27. </a>
  28. </div>
  29. </activity-item>
  30. </div>
  31. </div>
  32. <div v-else>
  33. <h3>No recent activity.</h3>
  34. </div>
  35. </div>
  36. </template>
  37. <script>
  38. import { mapState, mapGetters, mapActions } from "vuex";
  39. import Toast from "toasters";
  40. import ws from "../../../ws";
  41. import ActivityItem from "../../../components/ui/ActivityItem.vue";
  42. export default {
  43. components: { ActivityItem },
  44. props: {
  45. userId: {
  46. type: String,
  47. default: ""
  48. }
  49. },
  50. data() {
  51. return {
  52. username: "",
  53. activities: [],
  54. position: 1,
  55. maxPosition: 1,
  56. offsettedFromNextSet: 0,
  57. isGettingSet: false
  58. };
  59. },
  60. computed: {
  61. ...mapState({
  62. ...mapState("modalVisibility", {
  63. modals: state => state.modals.station
  64. }),
  65. myUserId: state => state.user.auth.userId
  66. }),
  67. ...mapGetters({
  68. socket: "websockets/getSocket"
  69. })
  70. },
  71. mounted() {
  72. if (this.myUserId !== this.userId) {
  73. ws.onConnect(() =>
  74. this.socket.dispatch(
  75. "apis.joinRoom",
  76. `profile-${this.userId}-activities`
  77. )
  78. );
  79. this.getUsernameFromId(this.userId).then(res => {
  80. if (res) this.username = res;
  81. });
  82. }
  83. this.socket.dispatch("activities.length", this.userId, length => {
  84. this.maxPosition = Math.ceil(length / 15) + 1;
  85. this.getSet();
  86. });
  87. this.socket.on("event:activity.create", activity => {
  88. this.activities.unshift(activity);
  89. this.offsettedFromNextSet += 1;
  90. });
  91. this.socket.on("event:activity.hide", activityId => {
  92. this.activities = this.activities.filter(
  93. activity => activity._id !== activityId
  94. );
  95. this.offsettedFromNextSet -= 1;
  96. });
  97. this.socket.on("event:activity.removeAllForUser", () => {
  98. this.activities = [];
  99. this.position = 1;
  100. this.maxPosition = 1;
  101. this.offsettedFromNextSet = 0;
  102. });
  103. },
  104. methods: {
  105. hideActivity(activityId) {
  106. this.socket.dispatch("activities.hideActivity", activityId, res => {
  107. if (res.status !== "success")
  108. new Toast({ content: res.message, timeout: 3000 });
  109. });
  110. },
  111. getSet() {
  112. if (this.isGettingSet) return;
  113. if (this.position >= this.maxPosition) return;
  114. this.isGettingSet = true;
  115. this.socket.dispatch(
  116. "activities.getSet",
  117. this.userId,
  118. this.position,
  119. this.offsettedFromNextSet,
  120. res => {
  121. if (res.status === "success") {
  122. this.activities.push(...res.data);
  123. this.position += 1;
  124. }
  125. this.isGettingSet = false;
  126. }
  127. );
  128. },
  129. handleScroll(event) {
  130. const scrollPosition =
  131. event.target.clientHeight + event.target.scrollTop;
  132. const bottomPosition = event.target.scrollHeight;
  133. if (this.loadAllSongs) return false;
  134. if (scrollPosition + 100 >= bottomPosition) this.getSet();
  135. return this.maxPosition === this.position;
  136. },
  137. ...mapActions("user/auth", ["getUsernameFromId"])
  138. }
  139. };
  140. </script>
  141. <style lang="scss" scoped>
  142. #activity-items {
  143. overflow: auto;
  144. min-height: auto;
  145. max-height: 570px;
  146. }
  147. </style>