123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 |
- <template>
- <div class="content recent-activity-tab">
- <div v-if="activities.length > 0">
- <h4 class="section-title">Recent activity</h4>
- <p class="section-description">
- This is a log of all actions
- {{ userId === myUserId ? "you have" : `${username} has` }}
- taken recently.
- </p>
- <hr class="section-horizontal-rule" />
- <div id="activity-items" @scroll="handleScroll">
- <activity-item
- class="item activity-item universal-item"
- v-for="activity in activities"
- :key="activity._id"
- :activity="activity"
- >
- <div slot="actions">
- <a
- v-if="userId === myUserId"
- href="#"
- @click.prevent="hideActivity(activity._id)"
- >
- <i class="material-icons hide-icon"
- >visibility_off</i
- >
- </a>
- </div>
- </activity-item>
- </div>
- </div>
- <div v-else>
- <h3>No recent activity.</h3>
- </div>
- </div>
- </template>
- <script>
- import { mapState, mapGetters, mapActions } from "vuex";
- import Toast from "toasters";
- import ws from "../../../ws";
- import ActivityItem from "../../../components/ui/ActivityItem.vue";
- export default {
- components: { ActivityItem },
- props: {
- userId: {
- type: String,
- default: ""
- }
- },
- data() {
- return {
- username: "",
- activities: [],
- position: 1,
- maxPosition: 1,
- offsettedFromNextSet: 0,
- isGettingSet: false
- };
- },
- computed: {
- ...mapState({
- ...mapState("modalVisibility", {
- modals: state => state.modals.station
- }),
- myUserId: state => state.user.auth.userId
- }),
- ...mapGetters({
- socket: "websockets/getSocket"
- })
- },
- mounted() {
- if (this.myUserId !== this.userId) {
- ws.onConnect(() =>
- this.socket.dispatch(
- "apis.joinRoom",
- `profile-${this.userId}-activities`
- )
- );
- this.getUsernameFromId(this.userId).then(res => {
- if (res) this.username = res;
- });
- }
- this.socket.dispatch("activities.length", this.userId, length => {
- this.maxPosition = Math.ceil(length / 15) + 1;
- this.getSet();
- });
- this.socket.on("event:activity.create", activity => {
- this.activities.unshift(activity);
- this.offsettedFromNextSet += 1;
- });
- this.socket.on("event:activity.hide", activityId => {
- this.activities = this.activities.filter(
- activity => activity._id !== activityId
- );
- this.offsettedFromNextSet -= 1;
- });
- this.socket.on("event:activity.removeAllForUser", () => {
- this.activities = [];
- this.position = 1;
- this.maxPosition = 1;
- this.offsettedFromNextSet = 0;
- });
- },
- methods: {
- hideActivity(activityId) {
- this.socket.dispatch("activities.hideActivity", activityId, res => {
- if (res.status !== "success")
- new Toast({ content: res.message, timeout: 3000 });
- });
- },
- getSet() {
- if (this.isGettingSet) return;
- if (this.position >= this.maxPosition) return;
- this.isGettingSet = true;
- this.socket.dispatch(
- "activities.getSet",
- this.userId,
- this.position,
- this.offsettedFromNextSet,
- res => {
- if (res.status === "success") {
- this.activities.push(...res.data);
- this.position += 1;
- }
- this.isGettingSet = false;
- }
- );
- },
- handleScroll(event) {
- const scrollPosition =
- event.target.clientHeight + event.target.scrollTop;
- const bottomPosition = event.target.scrollHeight;
- if (this.loadAllSongs) return false;
- if (scrollPosition + 100 >= bottomPosition) this.getSet();
- return this.maxPosition === this.position;
- },
- ...mapActions("user/auth", ["getUsernameFromId"])
- }
- };
- </script>
- <style lang="scss" scoped>
- #activity-items {
- overflow: auto;
- min-height: auto;
- max-height: 570px;
- }
- </style>
|