first commit

admin-kalsport/themes/new-theme/js/app/widgets/ps-alert.vue

@@ -0,0 +1,88 @@
+<!--**
+ * 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="ps-alert alert"
+    :class="classObject"
+    role="alert"
+  >
+    <button
+      v-if="hasClose"
+      type="button"
+      class="close"
+      data-dismiss="alert"
+      aria-label="Close"
+      @click.stop="onClick"
+    >
+      <span class="material-icons">close</span>
+    </button>
+    <p class="alert-text">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script>
+  const ALERT_TYPE_INFO = 'ALERT_TYPE_INFO';
+  const ALERT_TYPE_WARNING = 'ALERT_TYPE_WARNING';
+  const ALERT_TYPE_DANGER = 'ALERT_TYPE_DANGER';
+  const ALERT_TYPE_SUCCESS = 'ALERT_TYPE_SUCCESS';
+
+  export default {
+    props: {
+      duration: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      alertType: {
+        type: String,
+        required: true,
+      },
+      hasClose: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    computed: {
+      classObject() {
+        return {
+          'alert-info': this.alertType === ALERT_TYPE_INFO,
+          'alert-warning': this.alertType === ALERT_TYPE_WARNING,
+          'alert-danger': this.alertType === ALERT_TYPE_DANGER,
+          'alert-success': this.alertType === ALERT_TYPE_SUCCESS,
+        };
+      },
+      isInfo() {
+        return this.alertType === ALERT_TYPE_INFO;
+      },
+    },
+    methods: {
+      onClick() {
+        this.$emit('closeAlert');
+      },
+    },
+  };
+</script>

admin-kalsport/themes/new-theme/js/app/widgets/ps-button.vue

@@ -0,0 +1,63 @@
+<!--**
+ * 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>
+  <button
+    type="button"
+    class="btn"
+    :class="classObject"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+  export default {
+    props: {
+      primary: {type: Boolean},
+      ghost: {type: Boolean},
+    },
+    computed: {
+      classObject() {
+        if (this.ghost) {
+          return {
+            'btn-outline-primary': this.primary,
+            'btn-outline-secondary': !this.primary,
+          };
+        }
+
+        return {
+          'btn-primary': this.primary,
+          'btn-secondary': !this.primary,
+        };
+      },
+    },
+    methods: {
+      onClick() {
+        this.$emit('click');
+      },
+    },
+  };
+</script>

admin-kalsport/themes/new-theme/js/app/widgets/ps-checkbox.vue

@@ -0,0 +1,71 @@
+<!--**
+ * 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="md-checkbox">
+    <label>
+      <input
+        type="checkbox"
+        :id="id"
+        v-model="checked"
+        :class="{'indeterminate' : isIndeterminate }"
+      >
+      <i class="md-checkbox-control" />
+      <slot name="label" />
+    </label>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      id: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      model: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+      isIndeterminate: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    watch: {
+      checked(val) {
+        this.$emit('checked', {
+          checked: val,
+          item: this.model,
+        });
+      },
+    },
+    data: () => ({
+      checked: false,
+    }),
+  };
+</script>

admin-kalsport/themes/new-theme/js/app/widgets/ps-datepicker.vue

@@ -0,0 +1,88 @@
+<!--**
+ * 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="input-group date">
+    <input
+      ref="datepicker"
+      type="text"
+      class="form-control"
+    >
+    <div class="input-group-append">
+      <span class="input-group-text">
+        <i class="material-icons">event</i>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      locale: {
+        type: String,
+        required: true,
+        default: 'en',
+      },
+      type: {
+        type: String,
+        required: true,
+      },
+    },
+    mounted() {
+      $(this.$refs.datepicker).datetimepicker({
+        format: 'YYYY-MM-DD',
+        showClear: true,
+      }).on('dp.change', (infos) => {
+        infos.dateType = this.type;
+        this.$emit(
+          infos.date ? 'dpChange' : 'reset',
+          infos,
+        );
+      });
+    },
+  };
+</script>
+
+<style lang="scss">
+  @import '~@scss/config/_settings.scss';
+
+  .date {
+    a[data-action='clear']::before {
+      font-family: 'Material Icons';
+      content: "\E14C";
+      font-size: 20px;
+      position: absolute;
+      bottom: 15px;
+      left: 50%;
+      margin-left: -10px;
+      color: $gray-dark;
+      cursor:pointer;
+    }
+    .bootstrap-datetimepicker-widget tr td span:hover {
+      background-color: white;
+    }
+  }
+
+</style>

admin-kalsport/themes/new-theme/js/app/widgets/ps-loader.vue

@@ -0,0 +1,66 @@
+<!--**
+ * 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="ps-loader">
+    <div class="timeline-item">
+      <div class="animated-background">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@scss/config/_settings.scss';
+
+  .ps-loader {
+    width: 100%;
+    .animated-background {
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+      animation-name: loading;
+      animation-timing-function: linear;
+      background: $gray-soft;
+      background: linear-gradient(to right, $gray-soft 8%, #ccc 18%, $gray-soft 33%);
+      background-size: 100%;
+      height: 40px;
+      position: relative;
+    }
+
+    .background-masker {
+      background: white;
+      position: absolute;
+    }
+  }
+
+  @keyframes loading{
+    0%{
+      background-position: -500px 0
+    }
+    100%{
+      background-position: 500px 0
+    }
+  }
+</style>

admin-kalsport/themes/new-theme/js/app/widgets/ps-media.vue

@@ -0,0 +1,82 @@
+<!--**
+ * 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="media">
+    <img
+      v-if="displayThumb"
+      :src="thumbnail"
+      class="thumbnail d-flex"
+    >
+    <div
+      v-else
+      class="no-img"
+    />
+    <div class="ml-2 desc media-body">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      thumbnail: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      displayThumb() {
+        return !!this.thumbnail;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~@scss/config/_settings.scss';
+
+  .product-title {
+    .has-combination & {
+      font-weight: 600;
+    }
+  }
+  .thumbnail, .no-img {
+    border: $gray-light 1px solid;
+    max-width: 47px;
+  }
+  .no-img {
+    background: white;
+    width: 47px;
+    height: 47px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .desc {
+    white-space: normal;
+  }
+  small {
+    color: $gray-medium;
+  }
+</style>

admin-kalsport/themes/new-theme/js/app/widgets/ps-modal.vue

@@ -0,0 +1,127 @@
+<!--**
+ * 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="modal fade"
+    id="ps-modal"
+    tabindex="-1"
+    role="dialog"
+  >
+    <div
+      class="modal-dialog"
+      role="document"
+    >
+      <div class="modal-content">
+        <div class="modal-header">
+          <button
+            type="button"
+            class="close"
+            data-dismiss="modal"
+          >
+            <i class="material-icons">close</i>
+          </button>
+          <h4 class="modal-title">
+            {{ translations.modal_title }}
+          </h4>
+        </div>
+        <div class="modal-body">
+          {{ translations.modal_content }}
+        </div>
+        <div class="modal-footer">
+          <PSButton
+            @click="onSave"
+            class="btn-lg"
+            primary
+            data-dismiss="modal"
+          >
+            {{ translations.button_save }}
+          </PSButton>
+          <PSButton
+            @click="onLeave"
+            class="btn-lg"
+            ghost
+            data-dismiss="modal"
+          >
+            {{ translations.button_leave }}
+          </PSButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import PSButton from '@app/widgets/ps-button';
+  import {EventBus} from '@app/utils/event-bus';
+
+  export default {
+    props: {
+      translations: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+    },
+    mounted() {
+      EventBus.$on('showModal', () => {
+        this.showModal();
+      });
+      EventBus.$on('hideModal', () => {
+        this.hideModal();
+      });
+    },
+    methods: {
+      showModal() {
+        $(this.$el).modal('show');
+      },
+      hideModal() {
+        $(this.$el).modal('hide');
+      },
+      onSave() {
+        this.$emit('save');
+      },
+      onLeave() {
+        this.$emit('leave');
+      },
+    },
+    components: {
+      PSButton,
+    },
+  };
+
+</script>
+
+<style lang="scss" scoped>
+  @import '~@scss/config/_settings.scss';
+
+  .modal-header .close {
+    font-size: 1.2rem;
+    color: $gray-medium;
+    opacity: 1;
+  }
+  .modal-content {
+    border-radius: 0
+  }
+</style>

admin-kalsport/themes/new-theme/js/app/widgets/ps-number.vue

@@ -0,0 +1,97 @@
+<!--**
+ * 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="ps-number"
+    :class="{ 'hover-buttons': hoverButtons }"
+  >
+    <input
+      type="number"
+      class="form-control"
+      :class="{ danger }"
+      :value="value"
+      placeholder="0"
+      @keyup="onKeyup($event)"
+      @focus="focusIn"
+      @blur.native="focusOut($event)"
+    >
+    <div
+      class="ps-number-spinner d-flex"
+      v-if="buttons"
+    >
+      <span
+        class="ps-number-up"
+        @click="increment"
+      />
+      <span
+        class="ps-number-down"
+        @click="decrement"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: [Number, String],
+        default: 0,
+      },
+      danger: {
+        type: Boolean,
+        default: false,
+      },
+      buttons: {
+        type: Boolean,
+        default: false,
+      },
+      hoverButtons: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    methods: {
+      onKeyup($event) {
+        this.$emit('keyup', $event);
+      },
+      focusIn() {
+        this.$emit('focus');
+      },
+      focusOut($event) {
+        this.$emit('blur', $event);
+      },
+      increment() {
+        const value = parseInt(this.value === '' || isNaN(this.value) ? 0 : this.value, 10);
+        this.$emit('change', Number.isNaN(value) ? 0 : value + 1);
+      },
+      decrement() {
+        const value = parseInt(this.value, 10);
+        this.$emit('change', Number.isNaN(value) ? -1 : value - 1);
+      },
+    },
+  };
+</script>

admin-kalsport/themes/new-theme/js/app/widgets/ps-pagination.vue

@@ -0,0 +1,169 @@
+<!--**
+ * 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>
+  <nav
+    class="mt-1 mx-auto"
+    v-if="displayPagination"
+  >
+    <ul
+      class="pagination"
+      :class="{'multi':isMultiPagination}"
+    >
+      <li
+        v-if="isMultiPagination"
+        class="page-item previous"
+      >
+        <a
+          v-show="activeLeftArrow"
+          class="float-left page-link"
+          @click="prev($event)"
+          href="#"
+        >
+          <span class="sr-only">Previous</span>
+        </a>
+      </li>
+      <li
+        class="page-item"
+        :class="{'active' : checkCurrentIndex(index)}"
+        v-for="index in pagesCount"
+        :key="index"
+      >
+        <a
+          v-if="showIndex(index)"
+          class="page-link"
+          :class="{
+            'pl-0' : showFirstDots(index),
+            'pr-0' : showLastDots(index)
+          }"
+          @click.prevent="changePage(index)"
+          href="#"
+        >
+          <span
+            v-if="isMultiPagination"
+            v-show="showFirstDots(index)"
+          >...</span>
+          {{ index }}
+          <span
+            v-if="isMultiPagination"
+            v-show="showLastDots(index)"
+          >...</span>
+        </a>
+      </li>
+      <li
+        v-if="isMultiPagination"
+        class="page-item next"
+      >
+        <a
+          v-show="activeRightArrow"
+          class="float-left page-link"
+          @click="next($event)"
+          href="#"
+        >
+          <span class="sr-only">Next</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+  export default {
+    props: {
+      pagesCount: {
+        type: Number,
+        required: true,
+      },
+      currentIndex: {
+        type: Number,
+        required: true,
+      },
+    },
+    computed: {
+      isMultiPagination() {
+        return this.pagesCount > this.multiPagesActivationLimit;
+      },
+      activeLeftArrow() {
+        return this.currentIndex !== 1;
+      },
+      activeRightArrow() {
+        return this.currentIndex !== this.pagesCount;
+      },
+      pagesToDisplay() {
+        return this.multiPagesToDisplay;
+      },
+      displayPagination() {
+        return this.pagesCount > 1;
+      },
+    },
+    methods: {
+      checkCurrentIndex(index) {
+        return this.currentIndex === index;
+      },
+      showIndex(index) {
+        const startPaginationIndex = index < this.currentIndex + this.multiPagesToDisplay;
+        const lastPaginationIndex = index > this.currentIndex - this.multiPagesToDisplay;
+        const indexToDisplay = startPaginationIndex && lastPaginationIndex;
+        const lastIndex = index === this.pagesCount;
+        const firstIndex = index === 1;
+
+        if (!this.isMultiPagination) {
+          return !this.isMultiPagination;
+        }
+        return indexToDisplay || firstIndex || lastIndex;
+      },
+      changePage(pageIndex) {
+        this.$emit('pageChanged', pageIndex);
+      },
+      showFirstDots(index) {
+        const pagesToDisplay = this.pagesCount - this.multiPagesToDisplay;
+
+        if (!this.isMultiPagination) {
+          return this.isMultiPagination;
+        }
+        return index === this.pagesCount && this.currentIndex <= pagesToDisplay;
+      },
+      showLastDots(index) {
+        if (!this.isMultiPagination) {
+          return this.isMultiPagination;
+        }
+        return index === 1 && this.currentIndex > this.multiPagesToDisplay;
+      },
+      prev() {
+        if (this.currentIndex > 1) {
+          this.changePage(this.currentIndex - 1);
+        }
+      },
+      next() {
+        if (this.currentIndex < this.pagesCount) {
+          this.changePage(this.currentIndex + 1);
+        }
+      },
+    },
+    data: () => ({
+      multiPagesToDisplay: 2,
+      multiPagesActivationLimit: 5,
+    }),
+  };
+</script>

admin-kalsport/themes/new-theme/js/app/widgets/ps-radio.vue

@@ -0,0 +1,67 @@
+<!--**
+ * 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="ps-radio">
+    <input
+      type="radio"
+      :id="id"
+      name="radio-group"
+      :checked="checked"
+      @change="onChange"
+    >
+    <label :for="id">{{ label }}</label>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+      label: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      checked: {
+        type: Boolean,
+        required: false,
+      },
+      value: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    methods: {
+      onChange() {
+        this.$emit('change', this.value);
+      },
+    },
+  };
+</script>

admin-kalsport/themes/new-theme/js/app/widgets/ps-select.vue

@@ -0,0 +1,98 @@
+<!--**
+ * 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="ps-select">
+    <select
+      class="form-control"
+      v-model="selected"
+      @change="onChange"
+    >
+      <option
+        value="default"
+        selected
+      >
+        <slot />
+      </option>
+      <option
+        v-for="(item, index) in items"
+        :key="index"
+        :value="item[itemId]"
+      >
+        {{ item[itemName] }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      items: {
+        type: Array,
+        required: true,
+      },
+      itemId: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      itemName: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    methods: {
+      onChange() {
+        this.$emit('change', {
+          value: this.selected,
+          itemId: this.itemId,
+        });
+      },
+    },
+    data: () => ({selected: 'default'}),
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~@scss/config/_settings.scss';
+
+  .ps-select {
+    position: relative;
+    select {
+      appearance: none;
+      border-radius: 0;
+    }
+    &::after {
+      content: "\E313";
+      font-family: 'Material Icons';
+      color: $gray-medium;
+      font-size: 20px;
+      position: absolute;
+      right: 5px;
+      top: 5px;
+    }
+  }
+</style>

admin-kalsport/themes/new-theme/js/app/widgets/ps-spinner.vue

@@ -0,0 +1,27 @@
+<!--**
+ * 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="ps-spinner" />
+</template>

admin-kalsport/themes/new-theme/js/app/widgets/ps-table/ps-sort.vue

@@ -0,0 +1,72 @@
+<!--**
+ * 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="ps-sortable-column"
+    data-sort-col-name="id_product"
+    :data-sort-is-current="isCurrent"
+    :data-sort-direction="sortDirection"
+    @click="sortToggle"
+  >
+    <span role="columnheader"><slot /></span>
+    <span
+      role="button"
+      class="ps-sort"
+      aria-label="Tri"
+    />
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      // column name
+      order: {
+        type: String,
+        required: true,
+      },
+      // indicates the currently sorted column in the table
+      currentSort: {
+        type: String,
+        required: true,
+      },
+    },
+    methods: {
+      sortToggle() {
+        // toggle direction
+        this.sortDirection = (this.sortDirection === 'asc') ? 'desc' : 'asc';
+        this.$emit('sort', this.order, this.sortDirection);
+      },
+    },
+    data: () => ({
+      sortDirection: 'asc',
+    }),
+    computed: {
+      isCurrent() {
+        return this.currentSort === this.order;
+      },
+    },
+  };
+</script>

admin-kalsport/themes/new-theme/js/app/widgets/ps-table/ps-table.vue

@@ -0,0 +1,31 @@
+<!--**
+ * 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="table-responsive">
+    <table class="table">
+      <slot />
+    </table>
+  </div>
+</template>

admin-kalsport/themes/new-theme/js/app/widgets/ps-tags.vue

@@ -0,0 +1,112 @@
+<!--**
+ * 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="tags-input search-input search d-flex flex-wrap"
+    :class="{ 'search-with-icon': hasIcon }"
+    @click="focus()"
+  >
+    <div class="tags-wrapper">
+      <span
+        v-for="(tag, index) in tags"
+        :key="index"
+        class="tag"
+      >{{ tag }}<i
+        class="material-icons"
+        @click="close(index)"
+      >close</i></span>
+    </div>
+    <input
+      ref="tags"
+      :placeholder="placeholderToDisplay"
+      type="text"
+      v-model="tag"
+      class="form-control input"
+      @keyup="onKeyUp"
+      @keydown.enter="add(tag)"
+      @keydown.delete.stop="remove()"
+      :size="inputSize"
+    >
+  </div>
+</template>
+
+<script>
+
+  export default {
+    props: {
+      tags: {
+        type: Array,
+        required: false,
+        default: () => ([]),
+      },
+      placeholder: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      hasIcon: {
+        type: Boolean,
+        required: false,
+      },
+    },
+    computed: {
+      inputSize() {
+        return !this.tags.length && this.placeholder ? this.placeholder.length : 0;
+      },
+      placeholderToDisplay() {
+        return this.tags.length ? '' : this.placeholder;
+      },
+    },
+    methods: {
+      onKeyUp() {
+        this.$emit('typing', this.$refs.tags.value);
+      },
+      add(tag) {
+        if (tag) {
+          this.tags.push(tag.trim());
+          this.tag = '';
+          this.focus();
+          this.$emit('tagChange', this.tag);
+        }
+      },
+      close(index) {
+        const tagName = this.tags[index];
+        this.tags.splice(index, 1);
+        this.$emit('tagChange', tagName);
+      },
+      remove() {
+        if (this.tags.length && !this.tag.length) {
+          const tagName = this.tags[this.tags.length - 1];
+          this.tags.pop();
+          this.$emit('tagChange', tagName);
+        }
+      },
+      focus() {
+        this.$refs.tags.focus();
+      },
+    },
+    data: () => ({tag: null}),
+  };
+</script>

admin-kalsport/themes/new-theme/js/app/widgets/ps-tree/ps-tree-item.vue

@@ -0,0 +1,213 @@
+<!--**
+ * 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="ps-tree-items"
+    :class="{className}"
+  >
+    <div
+      class="d-flex tree-name"
+      :class="{active: active, disable: model.disable}"
+      @click="clickElement"
+    >
+      <button
+        class="btn btn-text"
+        :class="[{hidden: isHidden}, chevronStatus]"
+      >
+        <span
+          v-if="translations"
+          class="sr-only"
+        >{{ this.model.open ? translations.reduce : translations.expand }}</span>
+      </button>
+      <PSCheckbox
+        :ref="model.name"
+        :id="id"
+        :model="model"
+        @checked="onCheck"
+        v-if="hasCheckbox"
+      />
+      <span
+        class="tree-label"
+        :class="{warning: isWarning}"
+      >{{ model.name }}</span>
+      <span
+        class="tree-extra-label d-sm-none d-xl-inline-block"
+        v-if="displayExtraLabel"
+      >{{ getExtraLabel }}</span>
+      <span
+        class="tree-extra-label-mini d-xl-none"
+        v-if="displayExtraLabel"
+      >{{ this.model.extraLabel }}</span>
+    </div>
+    <ul
+      v-show="open"
+      v-if="isFolder"
+      class="tree"
+    >
+      <li
+        v-for="(element, index) in model.children"
+        :key="index"
+        class="tree-item"
+        :class="{disable: model.disable}"
+      >
+        <PSTreeItem
+          :ref="element.id"
+          :class="className"
+          :has-checkbox="hasCheckbox"
+          :model="element"
+          :label="element.name"
+          :translations="translations"
+          :current-item="currentItem"
+          @checked="onCheck"
+          @setCurrentElement="setCurrentElement"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import PSCheckbox from '@app/widgets/ps-checkbox';
+  import {EventBus} from '@app/utils/event-bus';
+
+  export default {
+    name: 'PSTreeItem',
+    props: {
+      model: {
+        type: Object,
+        required: true,
+      },
+      className: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      hasCheckbox: {
+        type: Boolean,
+        required: false,
+      },
+      translations: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+      currentItem: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    computed: {
+      id() {
+        return this.model.id;
+      },
+      isFolder() {
+        return this.model.children && this.model.children.length;
+      },
+      displayExtraLabel() {
+        return this.isFolder && this.model.extraLabel;
+      },
+      getExtraLabel() {
+        let extraLabel = '';
+
+        if (this.model.extraLabel && this.model.extraLabel === 1) {
+          extraLabel = this.translations.extra_singular;
+        } else if (this.model.extraLabel) {
+          extraLabel = this.translations.extra.replace('%d', this.model.extraLabel);
+        }
+
+        return extraLabel;
+      },
+      isHidden() {
+        return !this.isFolder;
+      },
+      chevronStatus() {
+        return this.open ? 'open' : 'closed';
+      },
+      isWarning() {
+        return !this.isFolder && this.model.warning;
+      },
+      active() {
+        return this.model.full_name === this.currentItem;
+      },
+    },
+    methods: {
+      setCurrentElement(el) {
+        if (this.$refs[el]) {
+          this.openTreeItemAction();
+          this.current = true;
+          this.parentElement(this.$parent);
+        } else {
+          this.current = false;
+        }
+      },
+      parentElement(parent) {
+        if (parent.clickElement) {
+          parent.clickElement();
+          this.parentElement(parent.$parent);
+        }
+      },
+      clickElement() {
+        return !this.model.disable ? this.openTreeItemAction() : false;
+      },
+      openTreeItemAction() {
+        this.setCurrentElement(this.model.full_name);
+        if (this.isFolder) {
+          this.open = !this.open;
+        } else {
+          EventBus.$emit('lastTreeItemClick', {
+            item: this.model,
+          });
+        }
+      },
+      onCheck(obj) {
+        this.$emit('checked', obj);
+      },
+    },
+    mounted() {
+      EventBus.$on('toggleCheckbox', (tag) => {
+        const checkbox = this.$refs[tag];
+
+        if (checkbox) {
+          checkbox.$data.checked = !checkbox.$data.checked;
+        }
+      }).$on('expand', () => {
+        this.open = true;
+      }).$on('reduce', () => {
+        this.open = false;
+      }).$on('setCurrentElement', (el) => {
+        this.setCurrentElement(el);
+      });
+      this.setCurrentElement(this.currentItem);
+    },
+    components: {
+      PSCheckbox,
+    },
+    data: () => ({
+      open: false,
+      current: false,
+    }),
+  };
+</script>

admin-kalsport/themes/new-theme/js/app/widgets/ps-tree/ps-tree.vue

@@ -0,0 +1,113 @@
+<!--**
+ * 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="ps-tree">
+    <div class="mb-3 tree-header">
+      <button
+        class="btn btn-text text-uppercase pointer"
+        @click="expand"
+      >
+        <i class="material-icons">keyboard_arrow_down</i>
+        <span v-if="translations">{{ translations.expand }}</span>
+      </button>
+      <button
+        class="btn btn-text float-right text-uppercase pointer"
+        @click="reduce"
+      >
+        <i class="material-icons">keyboard_arrow_up</i>
+        <span v-if="translations">{{ translations.reduce }}</span>
+      </button>
+    </div>
+    <ul
+      class="tree"
+      :class="className"
+    >
+      <li
+        v-for="(element, index) in model"
+        :key="index"
+      >
+        <PSTreeItem
+          ref="item"
+          :has-checkbox="hasCheckbox"
+          :model="element"
+          :label="element.name"
+          :translations="translations"
+          :current-item="currentItem"
+          @checked="onCheck"
+          @setCurrentElement="setCurrentElement"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import {EventBus} from '@app/utils/event-bus';
+  import PSTreeItem from './ps-tree-item';
+
+  export default {
+    name: 'PSTree',
+    props: {
+      model: {
+        type: Array,
+        default: () => ([]),
+      },
+      className: {
+        type: String,
+        default: '',
+      },
+      currentItem: {
+        type: String,
+        default: '',
+      },
+      hasCheckbox: {
+        type: Boolean,
+        default: false,
+      },
+      translations: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+    },
+    methods: {
+      onCheck(obj) {
+        this.$emit('checked', obj);
+      },
+      expand() {
+        EventBus.$emit('expand');
+      },
+      reduce() {
+        EventBus.$emit('reduce');
+      },
+      setCurrentElement(id) {
+        EventBus.$emit('setCurrentElement', id);
+      },
+    },
+    components: {
+      PSTreeItem,
+    },
+  };
+</script>