first commit

admin-kalsport/themes/new-theme/js/vue/components/Pagination.vue

@@ -0,0 +1,183 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div class="pagination">
+    <ul class="pagination-list">
+      <li class="pagination-item pagination-previous">
+        <button
+          @click="goToPage(currentPage - 1)"
+          :disabled="currentPage === 1"
+        >
+          <i class="material-icons">chevron_left</i>
+        </button>
+      </li>
+      <li
+        :class="['pagination-item', isActive(key)]"
+        v-for="(page, key) of paginatedDatas"
+        :key="key"
+      >
+        <button @click="goToPage(key + 1)">
+          {{ key + 1 }}
+        </button>
+      </li>
+      <li class="pagination-item pagination-next">
+        <button
+          @click="goToPage(currentPage + 1)"
+          :disabled="currentPage === paginatedDatas.length"
+        >
+          <i class="material-icons">chevron_right</i>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Pagination',
+    data() {
+      return {
+        paginatedDatas: [],
+        currentPage: 1,
+      };
+    },
+    props: {
+      datas: {
+        type: Array,
+        default: () => [],
+      },
+      paginationLength: {
+        type: Number,
+        default: 14,
+      },
+    },
+    methods: {
+      /**
+       * Used to switch page state of the pagination
+       *
+       * @param {int} pageNumber
+       */
+      goToPage(pageNumber) {
+        if (this.paginatedDatas[pageNumber - 1]) {
+          this.currentPage = pageNumber;
+          this.$emit('paginated', {
+            paginatedDatas: this.paginatedDatas,
+            currentPage: this.currentPage,
+          });
+        }
+      },
+      /**
+       * Split items into chunks based on paginationLength
+       *
+       * @param {array} newDatas
+       */
+      constructDatas(newDatas) {
+        this.paginatedDatas = [];
+
+        for (let i = 0; i < newDatas.length; i += this.paginationLength) {
+          this.paginatedDatas.push(newDatas.slice(i, i + this.paginationLength));
+        }
+
+        this.$emit('paginated', {
+          paginatedDatas: this.paginatedDatas,
+          currentPage: this.currentPage,
+        });
+      },
+      /**
+       * Avoid too much logics in the template
+       *
+       * @param {int} key
+       */
+      isActive(key) {
+        return this.currentPage === key + 1 ? 'active' : null;
+      },
+    },
+    /**
+     * On mount, split datas into chunks
+     */
+    mounted() {
+      this.constructDatas(this.datas);
+    },
+    watch: {
+      /**
+       * On datas change, split into chunks again.
+       *
+       * @param {array} newDatas
+       */
+      datas(newDatas) {
+        this.constructDatas(newDatas);
+      },
+    },
+  };
+</script>
+
+<style lang="scss" type="text/scss">
+@import "~@scss/config/_settings.scss";
+
+.pagination {
+  &-list {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+  }
+
+  &-item {
+    list-style-type: none;
+
+    button {
+      font-size: 1rem;
+      padding: 0.5rem;
+      transition: 0.25s ease-out;
+      cursor: pointer;
+      color: #6c868e;
+      border: 0;
+      background-color: inherit;
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
+      &:hover:not(:disabled) {
+        color: $primary;
+      }
+    }
+
+    &.active {
+      button {
+        color: $primary;
+      }
+    }
+  }
+
+  &-previous,
+  &-next {
+    font-size: 1.25rem;
+  }
+}
+</style>