first commit

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

@@ -0,0 +1,74 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<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: 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>

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

@@ -0,0 +1,58 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<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>

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

@@ -0,0 +1,63 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<template>
+  <div class="md-checkbox">
+    <label>
+      <input type="checkbox" :id="id" v-model="checked" :class="{'indeterminate' : isIndeterminate }">
+      <i class="md-checkbox-control"></i>
+      <slot name="label"></slot>
+    </label>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      id: {
+        type: String,
+      },
+      model: {
+        type: Object,
+        required: false,
+      },
+      isIndeterminate: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    watch: {
+      checked(val) {
+        this.$emit('checked', {
+          checked: val,
+          item: this.model,
+        });
+      },
+    },
+    data: () => ({
+      checked: false,
+    }),
+  };
+</script>

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

@@ -0,0 +1,84 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<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="sass">
+  @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>

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

@@ -0,0 +1,70 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<template>
+  <div class="ps-loader">
+    <div class="timeline-item">
+      <div class="animated-background">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['thumb'],
+  };
+</script>
+<style lang="sass" 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>

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

@@ -0,0 +1,69 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<template>
+  <div class="media">
+    <img v-if="displayThumb" :src="thumbnail" class="thumbnail d-flex"  />
+    <div v-else class="no-img"></div>
+    <div class="ml-2 desc media-body">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: ['thumbnail'],
+    computed: {
+      displayThumb() {
+        return !!this.thumbnail;
+      },
+    },
+  };
+</script>
+
+<style lang="sass" 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>

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

@@ -0,0 +1,97 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<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,
+    },
+  },
+  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="sass" scoped>
+   @import "../../../scss/config/_settings.scss";
+  .modal-header .close {
+    font-size: 1.2rem;
+    color: $gray-medium;
+    opacity: 1;
+  }
+  .modal-content {
+    border-radius: 0
+  }
+</style>

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

@@ -0,0 +1,72 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+
+ <template>
+  <div class="ps-number" :class="{'hover-buttons': hoverButtons}">
+    <input
+      type="number"
+      class="form-control"
+      :class="{'danger': danger}"
+      :value="value"
+      @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>
+      <span class="ps-number-down" @click="decrement"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      value: 0,
+      danger: false,
+      buttons: false,
+      hoverButtons: false,
+    },
+    methods: {
+      onKeyup($event) {
+        this.$emit('keyup', $event);
+      },
+      focusIn() {
+        this.$emit('focus');
+      },
+      focusOut($event) {
+        this.$emit('blur', $event);
+      },
+      increment() {
+        const value = parseInt(this.value, 10);
+        this.$emit('change', isNaN(value) ? 0 : value + 1);
+      },
+      decrement() {
+        const value = parseInt(this.value, 10);
+        this.$emit('change', isNaN(value) ? -1 : value - 1);
+      },
+    },
+  };
+</script>

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

@@ -0,0 +1,125 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<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">
+        <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', 'currentIndex'],
+    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>

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

@@ -0,0 +1,47 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+
+<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 },
+      checked: { type: Boolean, required: false },
+      value: { type: String, required: false },
+    },
+    methods: {
+      onChange() {
+        this.$emit('change', this.value);
+      },
+    },
+  };
+</script>

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

@@ -0,0 +1,74 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<template>
+  <div class="ps-select">
+    <select class="form-control" v-model="selected" @change="onChange">
+      <option value="default" selected>
+        <slot />
+      </option>
+      <option
+        v-for="item in items"
+        :value="item[itemID]"
+      >
+        {{item[itemName]}}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['items', 'itemID', 'itemName'],
+    methods: {
+      onChange() {
+        this.$emit('change', {
+          value: this.selected,
+          itemID: this.itemID,
+        });
+      },
+    },
+    data: () => ({ selected: 'default' }),
+  };
+</script>
+
+<style lang="sass" 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>

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

@@ -0,0 +1,27 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<template>
+  <div class="ps-spinner"></div>
+</template>

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

@@ -0,0 +1,57 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<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"></span>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      // column name
+      order: String,
+      // indicates the currently sorted column in the table
+      currentSort: String,
+    },
+    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>
+

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

@@ -0,0 +1,31 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<template>
+  <div class="table-responsive">
+    <table class="table">
+      <slot />
+    </table>
+  </div>
+</template>

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

@@ -0,0 +1,86 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<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" 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', 'placeholder', 'hasIcon'],
+    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>

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

@@ -0,0 +1,157 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<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" class="tree-item" :class="{disable: model.disable}">
+        <PSTreeItem
+          :ref="element.id"
+          :class="className"
+          :hasCheckbox="hasCheckbox"
+          :model="element"
+          :label="element.name"
+          :translations="translations"
+          :currentItem="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 },
+      hasCheckbox: { type: Boolean, required: false },
+      translations: { type: Object, required: false },
+      currentItem: { type: String, required: false },
+    },
+    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>

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

@@ -0,0 +1,88 @@
+<!--**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *-->
+<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">
+        <PSTreeItem
+          ref="item"
+          :hasCheckbox="hasCheckbox"
+          :model="element"
+          :label="element.name"
+          :translations="translations"
+          :currentItem="currentItem"
+          @checked="onCheck"
+          @setCurrentElement ="setCurrentElement"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import PSTreeItem from './ps-tree-item';
+  import { EventBus } from 'app/utils/event-bus';
+
+  export default {
+    name: 'PSTree',
+    props: {
+      model: Array,
+      className: String,
+      currentItem: String,
+      hasCheckbox: Boolean,
+      translations: {
+        type: Object,
+        required: false,
+      },
+    },
+    methods: {
+      onCheck(obj) {
+        this.$emit('checked', obj);
+      },
+      expand() {
+        EventBus.$emit('expand');
+      },
+      reduce() {
+        EventBus.$emit('reduce');
+      },
+      setCurrentElement(id) {
+        EventBus.$emit('setCurrentElement', id);
+      },
+    },
+    components: {
+      PSTreeItem,
+    },
+  };
+</script>