zoff/frontend/components/playlist/Playlist.vue

<template>
  <div class="playlist-conatiner">
    <div class="playlist-element" v-for="(song, i) in paginatedList" :key="i">
      <Song
        class="song"
        :title="song.title"
        :thumbnail="song.thumbnail"
        :votes="song.votes"
        :addedBy="song.added_by"
        :id="song.id"
        :type="song.type"
        :duration="song.duration"
        @contextmenu="moreInfo"
      />
      <div class="song-context-button" @click="moreInfo($event, song.id)">. . .</div>
    </div>
    <div class="pagination-buttons">
      <button @click="firstPage" :disabled="disabledPrev" class="first"><</button>
      <button @click="prevPage" :disabled="disabledPrev">previous</button>
      <span>{{ page + 1 }} / {{ pages }}</span>
      <button @click="nextPage" :disabled="disabledNext">next</button>
      <button @click="lastPage" :disabled="disabledNext" class="last">></button>
    </div>
    <ContextMenu
      v-if="contextMenuOpen"
      :addedBy="contextOnElement.added_by"
      :id="contextOnElement.id"
      :type="contextOnElement.type"
      :mouseX="mouseX"
      :mouseY="mouseY"
      @closeContextMenu="closeContextMenu"
    />
  </div>
</template>

<script>
import Song from "@/components/playlist/Song";
import ContextMenu from "@/components/playlist/ContextMenu";

export default {
  components: {
    Song,
    ContextMenu
  },
  computed: {
    paginatedList: function() {
      return this.playlist.slice(
        this.page * this.perPage,
        (1 + this.page) * this.perPage
      );
    },
    disabledPrev: function() {
      return this.page == 0;
    },
    disabledNext: function() {
      return this.playlist.length < (this.page + 1) * this.perPage;
    },
    pages: function() {
      return Math.ceil(this.playlist.length / this.perPage);
    }
  },
  async beforeMount() {
    try {
      const request = await fetch("https://zoff.me/api/list/summér", {
        method: "POST"
      });
      const playlist = await request.json();
      if (this.playlist.error == true) {
        console.error(this.playlist.error);
        return;
      }
      this.playlist = playlist.results;
    } catch (e) {
      alert("TIMEOUT");
    }
  },
  methods: {
    moreInfo: function(e, id) {
      e.preventDefault();
      this.contextOnElement = this.playlist.find(song => song.id == id);
      this.mouseX = e.pageX;
      this.mouseY = e.pageY;
      this.contextMenuOpen = true;
    },
    closeContextMenu: function() {
      this.contextMenuOpen = false;
      this.contextOnElement = null;
    },
    firstPage: function() {
      this.page = 0;
    },
    lastPage: function() {
      this.page = Math.floor(this.playlist.length / this.perPage);
    },
    prevPage: function() {
      if (this.page == 0) {
        return;
      }
      this.page -= 1;
    },
    nextPage: function() {
      if (this.playlist.length < (this.page + 1) * this.perPage) {
        return;
      }
      this.page += 1;
    }
  },
  data() {
    return {
      contextMenuOpen: false,
      contextOnElement: {},
      page: 0,
      perPage: 10,
      playlist: []
    };
  }
};
</script>

<style scoped lang="scss">
.playlist-conatiner {
  background-color: #2d2d2d;
  padding-top: 5px;

  & .playlist-element {
    display: flex;
    flex-direction: row;
    box-shadow: 0px 0px 2px #000000;
    border-radius: 5px;
    background: #2d2d2d;
    color: white;
    margin: 5px 5px;
    cursor: pointer;

    &:hover {
      box-shadow: 0px 0px 3px #000000;
    }

    &:active {
      background: #000000;
    }

    & .song {
      width: 90%;
    }
    & .song-context-button {
      width: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-left: 1px solid black;
    }
  }

  .pagination-buttons {
    display: flex;
    justify-content: space-between;
    color: white;
    padding: 10px 0;

    & span {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    & button {
      width: 35%;
      height: 30px;
      background: transparent;
      color: white;
      border: none;

      &.first,
      &.last {
        width: 10%;
      }
    }
  }
}
</style>