ImageList.vue

<template>
  <section class="w-full">
    <PaginationBar
      :current-page="currentPage"
      :last-page="lastPage"
      @onPageChange="pageChange"
    />
    <div class="w-full flex flex-row flex-wrap justify-center">
      <div
        v-for="(flake, index) in stateImageSnowflakes"
        :key="index"
        class="max-w-xs flex flex-col"
      >
        <ImageItem :flake="flake" @checked="appendToDeleteArray"></ImageItem>
      </div>
    </div>
    <PaginationBar
      :current-page="currentPage"
      :last-page="lastPage"
      @onPageChange="pageChange"
    />
    <button
      v-show="deleteArray.length"
      @click="deleteImages(deleteArray)"
      class="fixed bottom-0 right-0 p-1 bg-blue-300"
    >
      Delete
    </button>
  </section>
</template>

<script>
import ImageItem from "@/components/ImageItem.vue";
import PaginationBar from "@/components/PaginationBar.vue";
import { mapState, mapActions } from "vuex";
import paths from "@/assets/js/paths.js";

export default {
  components: {
    ImageItem,
    PaginationBar,
  },
  data: () => {
    return {
      deleteArray: [],
      currentPage: 0,
      lastPage: 0,
    };
  },
  computed: {
    ...mapState(["stateUser", "stateImageSnowflakes"]),
  },
  async created() {
    this.lastPage = Number(await this.getLastPage());
    this.pageChange();
  },
  methods: {
    async pageChange() {
      this.currentPage = Number(
        window.location.pathname.split("/").pop().match(/^\d+$/)
      );
      window.scrollTo(0, 0);
      this.setStateImageSnowflakes(await this.getSnowflakes(this.currentPage));
    },
    async getSnowflakes(pageEntry) {
      const response = await fetch(paths.ImagePageField(pageEntry));
      const snowflakes = await response.json();
      return snowflakes;
    },
    async getLastPage() {
      const response = await fetch(paths.ImagePage);
      const lastPage = await response.text();
      return lastPage;
    },
    appendToDeleteArray(...args) {
      const [checked, hash] = args;
      checked
        ? this.deleteArray.push(hash)
        : this.deleteArray.splice(this.deleteArray.indexOf(hash), 1);
    },
    deleteImages(deleteArray) {
      const options = {
        method: "DELETE",
        headers: { secret: this.stateUser.secret },
      };
      for (let i = 0; i < deleteArray.length; i++) {
        fetch(paths.ImageField(deleteArray[i]), options);
      }
      this.deleteArray = [];
    },
    ...mapActions(["setStateImageSnowflakes"]),
  },
};
</script>