first commit

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/app.vue

@@ -0,0 +1,125 @@
+<!--**
+ * 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 v-if="isReady" id="app" class="stock-app container-fluid">
+    <StockHeader />
+    <Search @search="onSearch" @applyFilter="applyFilter" />
+    <LowFilter v-if="isOverview" :filters="filters" @lowStockChecked="onLowStockChecked" />
+    <div class="card container-fluid pa-2 clearfix">
+      <router-view class="view" @resetFilters="resetFilters" @fetch="fetch"></router-view>
+      <PSPagination
+        :currentIndex="currentPagination"
+        :pagesCount="pagesCount"
+        @pageChanged="onPageChanged"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import StockHeader from './header/stock-header';
+  import Search from './header/search';
+  import LowFilter from './header/filters/low-filter';
+  import PSPagination from '@app/widgets/ps-pagination';
+
+  const FIRST_PAGE = 1;
+
+  export default {
+    name: 'app',
+    computed: {
+      isReady() {
+        return this.$store.state.isReady;
+      },
+      pagesCount() {
+        return this.$store.state.totalPages;
+      },
+      currentPagination() {
+        return this.$store.state.pageIndex;
+      },
+      isOverview() {
+        return this.$route.name === 'overview';
+      },
+    },
+    methods: {
+      onPageChanged(pageIndex) {
+        this.$store.dispatch('updatePageIndex', pageIndex);
+        this.fetch('asc');
+      },
+      fetch(sortDirection) {
+        const action = this.$route.name === 'overview' ? 'getStock' : 'getMovements';
+        const sorting = (sortDirection === 'desc') ? ' desc' : '';
+        this.$store.dispatch('isLoading');
+
+        this.filters = Object.assign({}, this.filters, {
+          order: `${this.$store.state.order}${sorting}`,
+          page_size: this.$store.state.productsPerPage,
+          page_index: this.$store.state.pageIndex,
+          keywords: this.$store.state.keywords,
+        });
+
+        this.$store.dispatch(action, this.filters);
+      },
+      onSearch(keywords) {
+        this.$store.dispatch('updateKeywords', keywords);
+        this.resetPagination();
+        this.fetch();
+      },
+      applyFilter(filters) {
+        this.filters = filters;
+        this.resetPagination();
+        this.fetch();
+      },
+      resetFilters() {
+        this.filters = {};
+      },
+      resetPagination() {
+          this.$store.dispatch('updatePageIndex', FIRST_PAGE);
+      },
+      onLowStockChecked(isChecked) {
+        this.filters = Object.assign({}, this.filters, {
+          low_stock: isChecked,
+        });
+        this.fetch();
+      },
+    },
+    components: {
+      StockHeader,
+      Search,
+      PSPagination,
+      LowFilter,
+    },
+    data: () => ({
+      filters: {},
+    }),
+  };
+</script>
+
+<style lang="scss" type="text/scss">
+  // hide the layout header
+  #main-div > .header-toolbar {
+    height: 0;
+    display: none;
+  }
+</style>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/header/breadcrumb.vue

@@ -0,0 +1,56 @@
+<!--**
+ * 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 aria-label="Breadcrumb">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item">
+        <a :href="catalogLink">{{trans('link_catalog')}}</a>
+      </li>
+      <li class="breadcrumb-item">
+        <a :href="stockLink">{{trans('link_stock')}}</a>
+      </li>
+      <li class="breadcrumb-item active">
+        <span v-if="isOverview">{{trans('link_overview')}}</span>
+        <span v-else>{{trans('link_movements')}}</span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+  export default {
+    computed: {
+      isOverview() {
+        return this.$route.name === 'overview';
+      },
+      catalogLink() {
+        return window.data.catalogUrl;
+      },
+      stockLink() {
+        return window.data.stockUrl;
+      },
+    },
+  };
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/header/filters.vue

@@ -0,0 +1,207 @@
+<!--**
+ * 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 id="filters-container">
+    <button class="search-input collapse-button" type="button" data-toggle="collapse" data-target="#filters">
+      <i class="material-icons mr-1">filter_list</i>
+      <i class="material-icons float-right ">keyboard_arrow_down</i>
+      {{trans('button_advanced_filter')}}
+    </button>
+    <div id="filters" class="container-fluid collapse">
+      <div class="row">
+        <div class="col-lg-4">
+          <div v-if="isOverview" class="py-3">
+            <h2>{{trans('filter_suppliers')}}</h2>
+            <FilterComponent
+              :placeholder="trans('filter_search_suppliers')"
+              :list="this.$store.getters.suppliers"
+              class="filter-suppliers"
+              itemID="supplier_id"
+              label="name"
+              @active="onFilterActive"
+            />
+          </div>
+          <div v-else class="py-3">
+            <h2>{{trans('filter_movements_type')}}</h2>
+            <PSSelect :items="movementsTypes" itemID="id_stock_mvt_reason" itemName="name" @change="onChange">
+              {{trans('none')}}
+            </PSSelect>
+            <h2 class="mt-4">{{trans('filter_movements_employee')}}</h2>
+            <PSSelect :items="employees" itemID="id_employee" itemName="name" @change="onChange">
+             {{trans('none')}}
+            </PSSelect>
+            <h2 class="mt-4">{{trans('filter_movements_period')}}</h2>
+            <form class="row">
+              <div class="col-md-6">
+                <label>{{trans('filter_datepicker_from')}}</label>
+                <PSDatePicker :locale="locale" @dpChange="onDpChange" @reset="onClear" type="sup"/>
+              </div>
+              <div class="col-md-6">
+                <label>{{trans('filter_datepicker_to')}}</label>
+                <PSDatePicker :locale="locale" @dpChange="onDpChange" @reset="onClear" type="inf" />
+              </div>
+            </form>
+          </div>
+        </div>
+        <div class="col-lg-4">
+          <div class="py-3">
+            <h2>{{trans('filter_categories')}}</h2>
+            <FilterComponent
+              :placeholder="trans('filter_search_category')"
+              :list="categoriesList"
+              class="filter-categories"
+              itemID="id_category"
+              label="name"
+              @active="onFilterActive"
+            />
+          </div>
+        </div>
+        <div class="col-lg-4">
+          <div class="py-3">
+            <h2>{{trans('filter_status')}}</h2>
+            <PSRadio
+              id="enable"
+              :label="trans('filter_status_enable')"
+              :checked="false"
+              value="1"
+              @change="onRadioChange"
+            />
+            <PSRadio
+              id="disable"
+              :label="trans('filter_status_disable')"
+              :checked="false"
+              value="0"
+              @change="onRadioChange"
+            />
+            <PSRadio
+              id="all"
+              :label="trans('filter_status_all')"
+              :checked="true"
+              value="null"
+              @change="onRadioChange"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import FilterComponent from './filters/filter-component';
+  import PSSelect from '@app/widgets/ps-select';
+  import PSButton from '@app/widgets/ps-button';
+  import PSDatePicker from '@app/widgets/ps-datepicker';
+  import PSRadio from '@app/widgets/ps-radio';
+  import _ from 'lodash';
+
+  export default {
+    computed: {
+      locale() {
+        return window.data.locale;
+      },
+      isOverview() {
+        return this.$route.name === 'overview';
+      },
+      employees() {
+        return this.$store.state.employees;
+      },
+      movementsTypes() {
+        return this.$store.state.movementsTypes;
+      },
+      categoriesList() {
+        return this.$store.getters.categories;
+      },
+    },
+    methods: {
+      onClear(event) {
+        delete this.date_add[event.dateType];
+        this.applyFilter();
+      },
+      onClick() {
+        this.applyFilter();
+      },
+      onFilterActive(list, type) {
+        if (type === 'supplier') {
+          this.suppliers = list;
+        } else {
+          this.categories = list;
+        }
+        this.disabled = !this.suppliers.length && !this.categories.length;
+        this.applyFilter();
+      },
+      applyFilter() {
+        this.$store.dispatch('isLoading');
+        this.$emit('applyFilter', {
+          suppliers: this.suppliers,
+          categories: this.categories,
+          id_stock_mvt_reason: this.id_stock_mvt_reason,
+          id_employee: this.id_employee,
+          date_add: this.date_add,
+          active: this.active,
+        });
+      },
+      onChange(item) {
+        if (item.itemID === 'id_stock_mvt_reason') {
+          this.id_stock_mvt_reason = item.value === 'default' ? [] : item.value;
+        } else {
+          this.id_employee = item.value === 'default' ? [] : item.value;
+        }
+        this.applyFilter();
+      },
+      onDpChange(event) {
+        this.date_add[event.dateType] = event.date.unix();
+        if (event.oldDate) {
+          this.applyFilter();
+        }
+      },
+      onRadioChange(value) {
+        this.active = value;
+        this.applyFilter();
+      },
+    },
+    components: {
+      FilterComponent,
+      PSSelect,
+      PSButton,
+      PSDatePicker,
+      PSRadio,
+    },
+    mounted() {
+      this.date_add = {};
+      this.$store.dispatch('getSuppliers');
+      this.$store.dispatch('getCategories');
+    },
+    data: () => ({
+      disabled: true,
+      suppliers: [],
+      categories: [],
+      id_stock_mvt_reason: [],
+      id_employee: [],
+      date_add: {},
+      active: null,
+    }),
+  };
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/header/filters/filter-component.vue

@@ -0,0 +1,188 @@
+<!--**
+ * 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="filter-container">
+    <PSTags
+      v-if="!hasChildren"
+      ref="tags"
+      class="form-control search search-input mb-2"
+      :tags="tags"
+      :placeholder="hasPlaceholder?placeholder:''"
+      :hasIcon="true"
+      @tagChange="onTagChanged"
+      @typing="onTyping"
+    />
+    <div v-if="hasChildren">
+      <PSTree
+        v-if="isOverview"
+        v-once
+        ref="tree"
+        :hasCheckbox="true"
+        :model="list"
+        @checked="onCheck"
+        :translations="PSTreeTranslations"
+      >
+      </PSTree>
+      <PSTree
+        v-else
+        ref="tree"
+        :hasCheckbox="true"
+        :model="list"
+        @checked="onCheck"
+        :translations="PSTreeTranslations"
+      >
+      </PSTree>
+    </div>
+    <ul
+      class="mt-1"
+      v-else
+    >
+      <li
+        v-for="(item, index) in items"
+        v-show="item.visible"
+        class="item"
+      >
+        <PSTreeItem
+          :label="item[label]"
+          :model="item"
+          @checked="onCheck"
+          :hasCheckbox="true"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import PSTags from '@app/widgets/ps-tags';
+  import PSTreeItem from '@app/widgets/ps-tree/ps-tree-item';
+  import PSTree from '@app/widgets/ps-tree/ps-tree';
+  import { EventBus } from '@app/utils/event-bus';
+  import _ from 'lodash';
+
+  export default {
+    props: ['placeholder', 'itemID', 'label', 'list'],
+    computed: {
+      isOverview() {
+        return this.$route.name === 'overview';
+      },
+      hasPlaceholder() {
+        return !this.tags.length;
+      },
+      items() {
+        const matchList = [];
+        this.list.filter((data) => {
+          const label = data[this.label].toLowerCase();
+          data.visible = false;
+          if (label.match(this.currentVal)) {
+            data.visible = true;
+            matchList.push(data);
+          }
+          if (data.children) {
+            this.hasChildren = true;
+          }
+          return data;
+        });
+
+        if (matchList.length === 1) {
+          this.match = matchList[0];
+        } else {
+          this.match = null;
+        }
+        return this.list;
+      },
+      PSTreeTranslations() {
+        return {
+          expand: this.trans('tree_expand'),
+          reduce: this.trans('tree_reduce'),
+        };
+      },
+    },
+    methods: {
+      onCheck(obj) {
+        const itemLabel = obj.item[this.label];
+        const filterType = this.hasChildren ? 'category' : 'supplier';
+
+        if (obj.checked) {
+          this.tags.push(itemLabel);
+        } else {
+          const index = this.tags.indexOf(itemLabel);
+          if (this.splice) {
+            this.tags.splice(index, 1);
+          }
+          this.splice = true;
+        }
+        if (this.tags.length) {
+          this.$emit('active', this.filterList(this.tags), filterType);
+        } else {
+          this.$emit('active', [], filterType);
+        }
+      },
+      onTyping(val) {
+        this.currentVal = val.toLowerCase();
+      },
+      onTagChanged(tag) {
+        let checkedTag = tag;
+        if (this.tags.indexOf(this.currentVal) !== -1) {
+          this.tags.pop();
+        }
+        this.splice = false;
+        if (this.match) {
+          checkedTag = this.match[this.label];
+        }
+        EventBus.$emit('toggleCheckbox', checkedTag);
+        this.currentVal = '';
+      },
+      filterList(tags) {
+        const idList = [];
+        const categoryList = this.$store.state.categoryList;
+        const list = this.hasChildren ? categoryList : this.list;
+
+        list.map((data) => {
+          const isInIdList = idList.indexOf(Number(data[this.itemID])) === -1;
+          if (tags.indexOf(data[this.label]) !== -1 && isInIdList) {
+            idList.push(Number(data[this.itemID]));
+          }
+          return idList;
+        });
+        return idList;
+      },
+    },
+    data() {
+      return {
+        currentVal: '',
+        match: null,
+        tags: [],
+        splice: true,
+        hasChildren: false,
+      };
+    },
+    components: {
+      PSTags,
+      PSTree,
+      PSTreeItem,
+    },
+  };
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/header/filters/low-filter.vue

@@ -0,0 +1,85 @@
+<!--**
+ * 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="container-fluid">
+     <div class="row py-2">
+       <div class="col row ml-1">
+         <PSCheckbox ref="low-filter" id="low-filter" class="mt-1" @checked="onCheck">
+           <span slot="label" class="ml-2">{{trans('filter_low_stock')}}</span>
+         </PSCheckbox>
+       </div>
+       <div class="col mr-3 d-flex align-items-center justify-content-end">
+         <a :href="stockExporttUrl">
+           <span data-toggle="pstooltip" :title="stockExportTitle" data-html="true" data-placement="top">
+             <i class="material-icons">cloud_upload</i>
+           </span>
+         </a>
+         <a class="ml-2" :href="stockImportUrl" target="_blank">
+           <span data-toggle="pstooltip" :title="stockImportTitle" data-html="true" data-placement="top">
+             <i class="material-icons">cloud_download</i>
+           </span>
+         </a>
+       </div>
+     </div>
+  </div>
+</template>
+
+<script>
+import PSCheckbox from '@app/widgets/ps-checkbox';
+
+export default {
+  props: {
+    filters: {},
+  },
+  computed: {
+    stockImportTitle() {
+      return this.trans('title_import');
+    },
+    stockExportTitle() {
+      return this.trans('title_export');
+    },
+    stockImportUrl() {
+      return window.data.stockImportUrl;
+    },
+    stockExporttUrl() {
+      const params = $.param(this.filters);
+      return `${window.data.stockExportUrl}&${params}`;
+    },
+  },
+  methods: {
+    onCheck(checkbox) {
+      const isChecked = checkbox.checked ? 1 : 0;
+      this.$emit('lowStockChecked', isChecked);
+    },
+  },
+  mounted() {
+    $('[data-toggle="pstooltip"]').pstooltip();
+  },
+  components: {
+    PSCheckbox,
+  },
+};
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/header/search.vue

@@ -0,0 +1,115 @@
+<!--**
+ * 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 id="search" class="row mb-2">
+    <div class="col-md-8">
+      <div class="mb-2">
+        <form class="search-form" @submit.prevent>
+          <label>{{trans('product_search')}}</label>
+          <div class="input-group">
+            <PSTags ref="psTags" :tags="tags" @tagChange="onSearch" />
+            <div class="input-group-append">
+              <PSButton @click="onClick" class="search-button" :primary="true">
+                <i class="material-icons">search</i>
+                {{trans('button_search')}}
+              </PSButton>
+            </div>
+          </div>
+        </form>
+      </div>
+      <Filters @applyFilter="applyFilter"/>
+    </div>
+    <div class="col-md-4 alert-box">
+      <transition name="fade">
+        <PSAlert
+          v-if="showAlert"
+          :alertType="alertType"
+          :hasClose="true"
+          @closeAlert="onCloseAlert"
+        >
+          <span v-if="error">{{trans('alert_bulk_edit')}}</span>
+          <span v-else>{{trans('notification_stock_updated')}}</span>
+        </PSAlert>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Filters from './filters';
+  import PSTags from '@app/widgets/ps-tags';
+  import PSButton from '@app/widgets/ps-button';
+  import PSAlert from '@app/widgets/ps-alert';
+  import { EventBus } from '@app/utils/event-bus';
+
+  export default {
+    components: {
+      Filters,
+      PSTags,
+      PSButton,
+      PSAlert,
+    },
+    computed: {
+      error() {
+        return (this.alertType === 'ALERT_TYPE_DANGER');
+      },
+    },
+    methods: {
+      onClick() {
+        const tag = this.$refs.psTags.tag;
+        this.$refs.psTags.add(tag);
+      },
+      onSearch() {
+        this.$emit('search', this.tags);
+      },
+      applyFilter(filters) {
+        this.$emit('applyFilter', filters);
+      },
+      onCloseAlert() {
+        this.showAlert = false;
+      },
+    },
+    watch: {
+      $route() {
+        this.tags = [];
+      },
+    },
+    mounted() {
+      EventBus.$on('displayBulkAlert', (type) => {
+        this.alertType = type === 'success' ? 'ALERT_TYPE_SUCCESS' : 'ALERT_TYPE_DANGER';
+        this.showAlert = true;
+        setTimeout(_ => {
+          this.showAlert = false;
+        }, 5000);
+      });
+    },
+    data: () => ({
+      tags: [],
+      showAlert: false,
+      alertType: 'ALERT_TYPE_DANGER',
+      duration: false,
+    }),
+  };
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/header/stock-header.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="header-toolbar">
+    <div class="container-fluid">
+      <Breadcrumb />
+      <div class="title-row">
+        <h1 class="title">{{trans('head_title')}}</h1>
+      </div>
+    </div>
+    <Tabs />
+  </div>
+</template>
+
+<script>
+  import Breadcrumb from './breadcrumb';
+  import Tabs from './tabs';
+
+  const $ = global.$;
+
+  function getOldHeaderToolbarButtons() {
+    return $('.header-toolbar')
+      .first()
+      .find('.toolbar-icons');
+  }
+
+  export default {
+    components: {
+      Breadcrumb,
+      Tabs,
+    },
+    mounted() {
+      // move the toolbar buttons to this header
+      const toolbarButtons = getOldHeaderToolbarButtons();
+      toolbarButtons.insertAfter($(this.$el).find('.title-row > .title'));
+
+      // signal header change (so size can be updated)
+      const event = $.Event('vueHeaderMounted', {
+        name: 'stock-header',
+      });
+      $(document).trigger(event);
+    },
+  };
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/header/tabs.vue

@@ -0,0 +1,49 @@
+<!--**
+ * 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="page-head-tabs" id="head_tabs">
+    <ul class="nav nav-pills">
+      <li class="nav-item">
+        <router-link data-toggle="tab" class="nav-link" :class="{active : isOverview}" to="/" role="tab">{{trans('menu_stock')}}</router-link>
+      </li>
+      <li class="nav-item">
+        <router-link data-toggle="tab" class="nav-link" :class="{active : isMovements}" to="/movements" role="tab">{{trans('menu_movements')}}</router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    computed: {
+      isOverview() {
+        return this.$route.name === 'overview';
+      },
+      isMovements() {
+        return this.$route.name === 'movements';
+      },
+    },
+  };
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/movements/index.vue

@@ -0,0 +1,128 @@
+<!--**
+ * 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>
+  <section class="stock-movements">
+    <PSTable class="mt-1">
+      <thead>
+        <tr>
+          <th width="30%">
+            <PSSort order="product" @sort="sort" :current-sort="currentSort">
+              {{trans('title_product')}}
+            </PSSort>
+          </th>
+          <th>
+            <PSSort order="reference" @sort="sort" :current-sort="currentSort">
+              {{trans('title_reference')}}
+            </PSSort>
+          </th>
+          <th>
+            {{trans('title_movements_type')}}
+          </th>
+          <th class="text-center">
+            {{trans('title_quantity')}}
+          </th>
+          <th class="text-center">
+            <PSSort order="date_add" @sort="sort" :current-sort="currentSort">
+              {{trans('title_date')}}
+            </PSSort>
+          </th>
+          <th>
+            {{trans('title_employee')}}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="this.isLoading">
+          <td colspan="6">
+            <PSLoader v-for="(n, index) in 3" class="mt-1" :key="index">
+              <div class="background-masker header-top"></div>
+              <div class="background-masker header-left"></div>
+              <div class="background-masker header-bottom"></div>
+              <div class="background-masker subheader-left"></div>
+              <div class="background-masker subheader-bottom"></div>
+            </PSLoader>
+          </td>
+        </tr>
+        <tr v-else-if="emptyMovements">
+          <td colspan="6">
+            <PSAlert alertType="ALERT_TYPE_WARNING" :hasClose="false">
+              {{trans('no_product')}}
+            </PSAlert>
+          </td>
+        </tr>
+        <MovementLine v-else v-for="(product, index) in movements" key=${index} :product="product" />
+      </tbody>
+    </PSTable>
+  </section>
+</template>
+
+<script>
+  import PSTable from '@app/widgets/ps-table/ps-table';
+  import PSSort from '@app/widgets/ps-table/ps-sort';
+  import PSAlert from '@app/widgets/ps-alert';
+  import PSLoader from '@app/widgets/ps-loader';
+  import MovementLine from './movement-line';
+
+  const DEFAULT_SORT = 'desc';
+
+  export default {
+    computed: {
+      isLoading() {
+        return this.$store.state.isLoading;
+      },
+      movements() {
+        return this.$store.state.movements;
+      },
+      emptyMovements() {
+        return !this.$store.state.movements.length;
+      },
+      currentSort() {
+        return this.$store.state.order;
+      },
+    },
+    methods: {
+      sort(order, sortDirection) {
+        this.$store.dispatch('updateOrder', order);
+        this.$emit('fetch', sortDirection === 'desc' ? 'desc' : 'asc');
+      },
+    },
+    mounted() {
+      this.$store.dispatch('updatePageIndex', 1);
+      this.$store.dispatch('updateKeywords', []);
+      this.$store.dispatch('getEmployees');
+      this.$store.dispatch('getMovementsTypes');
+      this.$store.dispatch('updateOrder', 'date_add');
+      this.$emit('resetFilters');
+      this.$emit('fetch', DEFAULT_SORT);
+    },
+    components: {
+      PSTable,
+      PSSort,
+      PSAlert,
+      PSLoader,
+      MovementLine,
+    },
+  };
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/movements/movement-line.vue

@@ -0,0 +1,92 @@
+<!--**
+ * 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>
+  <tr>
+    <td>
+      <div class="d-flex align-items-center">
+        <PSMedia
+          class="d-flex align-items-center"
+          :thumbnail="thumbnail"
+        >
+          <p>
+            {{ product.product_name }}
+            <small v-if="hasCombination"><br />
+              {{ combinationName }}
+            </small>
+          </p>
+        </PSMedia>
+      </div>
+    </td>
+    <td>
+      {{ product.product_reference }}
+    </td>
+    <td>
+      <a v-if="orderLink" :href="orderLink" target="_blank">
+        {{ product.movement_reason }}
+      </a>
+      <span v-else>{{ product.movement_reason }}</span>
+    </td>
+    <td class="text-sm-center">
+      <span class="qty-number" :class="{'is-positive' : isPositive}">
+        <span v-if="isPositive">+</span>
+        <span v-else>-</span>
+        {{ qty }}
+      </span>
+    </td>
+    <td class="text-sm-center">
+      {{ product.date_add }}
+    </td>
+    <td>
+      {{ employeeName }}
+    </td>
+  </tr>
+</template>
+
+<script>
+  import PSMedia from '@app/widgets/ps-media';
+  import productDesc from '@app/pages/stock/mixins/product-desc';
+
+  export default {
+    props: ['product'],
+    mixins: [productDesc],
+    computed: {
+      qty() {
+        return this.product.physical_quantity;
+      },
+      employeeName() {
+        return `${this.product.employee_firstname} ${this.product.employee_lastname}`;
+      },
+      isPositive() {
+        return this.product.sign > 0;
+      },
+      orderLink() {
+        return this.product.order_link !== 'N/A' ? this.product.order_link : null;
+      },
+    },
+    components: {
+      PSMedia,
+    },
+  };
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/overview/index.vue

@@ -0,0 +1,65 @@
+<!--**
+ * 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>
+  <section class="stock-overview">
+    <ProductsActions />
+    <ProductsTable
+      :isLoading="isLoading"
+      @sort="sort"
+    />
+  </section>
+</template>
+
+<script>
+  import ProductsActions from './products-actions';
+  import ProductsTable from './products-table';
+
+  const DEFAULT_SORT = 'asc';
+
+  export default {
+    computed: {
+      isLoading() {
+        return this.$store.state.isLoading;
+      },
+    },
+    methods: {
+      sort(sortDirection) {
+        this.$emit('fetch', sortDirection);
+      },
+    },
+    mounted() {
+      this.$store.dispatch('updatePageIndex', 1);
+      this.$store.dispatch('updateKeywords', []);
+      this.$store.dispatch('updateOrder', 'product');
+      this.$store.dispatch('isLoading');
+      this.$emit('resetFilters');
+      this.$emit('fetch', DEFAULT_SORT);
+    },
+    components: {
+      ProductsActions,
+      ProductsTable,
+    },
+  };
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/overview/movement-type.vue

@@ -0,0 +1,74 @@
+<!--**
+ * 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="col-md-4">
+    <div class="movements">
+      <PSButton
+        type="button"
+        class="update-qty float-sm-right"
+        :class="classObject"
+        :disabled="disabled"
+        :primary="true"
+        @click="sendQty"
+      >
+        <i class="material-icons">edit</i>
+        {{trans('button_movement_type')}}
+      </PSButton>
+    </div>
+  </div>
+</template>
+
+<script>
+  import PSButton from '@app/widgets/ps-button';
+
+  export default {
+    computed: {
+      disabled() {
+        return !this.$store.state.hasQty;
+      },
+      classObject() {
+        return {
+          'btn-primary': !this.disabled,
+        };
+      },
+    },
+    methods: {
+      sendQty() {
+        this.$store.dispatch('updateQtyByProductsId');
+      },
+    },
+    components: {
+      PSButton,
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../../../scss/config/_settings.scss";
+  .update-qty {
+    color: white;
+    transition: background-color 0.2s ease;
+  }
+</style>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/overview/product-line.vue

@@ -0,0 +1,174 @@
+<!--**
+ * 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>
+  <tr :class="{'low-stock':lowStock}">
+    <td>
+      <div class="d-flex align-items-center">
+        <PSCheckbox
+          :id="id"
+          :ref="id"
+          :model="product"
+          @checked="productChecked"
+        />
+        <PSMedia
+          class="d-flex align-items-center ml-2"
+          :thumbnail="thumbnail"
+        >
+          <p>
+            {{ product.product_name }}
+            <small v-if="hasCombination"><br />
+              {{ combinationName }}
+            </small>
+          </p>
+        </PSMedia>
+      </div>
+    </td>
+    <td>
+      {{ reference }}
+    </td>
+    <td>
+      {{ product.supplier_name }}
+    </td>
+    <td v-if="product.active" class="text-sm-center">
+      <i class="material-icons enable">check</i>
+    </td>
+    <td v-else class="text-sm-center">
+      <i class="material-icons disable">close</i>
+    </td>
+    <td class="text-sm-center" :class="{'stock-warning':lowStock}">
+      {{ physical }}
+      <span v-if="updatedQty" class="qty-update" :class="{'stock-warning':lowStock}">
+        <i class="material-icons">trending_flat</i>
+        {{physicalQtyUpdated}}
+      </span>
+    </td>
+    <td class="text-sm-center" :class="{'stock-warning':lowStock}">
+      {{ product.product_reserved_quantity }}
+    </td>
+    <td class="text-sm-center" :class="{'stock-warning':lowStock}">
+      {{ product.product_available_quantity }}
+      <span v-if="updatedQty" class="qty-update" :class="{'stock-warning':lowStock}">
+        <i class="material-icons">trending_flat</i>
+        {{availableQtyUpdated}}
+      </span>
+      <span v-if="lowStock" class="stock-warning ico ml-2" data-toggle="pstooltip" data-placement="top" data-html="true" :title="lowStockLevel">!</span>
+    </td>
+    <td class="qty-spinner text-right">
+      <Spinner :product="product" @updateProductQty="updateProductQty" />
+    </td>
+  </tr>
+</template>
+
+<script>
+  import PSCheckbox from '@app/widgets/ps-checkbox';
+  import PSMedia from '@app/widgets/ps-media';
+  import ProductDesc from '@app/pages/stock/mixins/product-desc';
+  import { EventBus } from '@app/utils/event-bus';
+  import Spinner from '@app/pages/stock/components/overview/spinner';
+  import _ from 'lodash';
+
+  export default {
+    props: ['product'],
+    mixins: [ProductDesc],
+    computed: {
+      reference() {
+        if (this.product.combination_reference !== 'N/A') {
+          return this.product.combination_reference;
+        }
+        return this.product.product_reference;
+      },
+      updatedQty() {
+        return !!this.product.qty;
+      },
+      physicalQtyUpdated() {
+        return Number(this.physical) + Number(this.product.qty);
+      },
+      availableQtyUpdated() {
+        return Number(this.product.product_available_quantity) + Number(this.product.qty);
+      },
+      physical() {
+        const productAvailableQty = Number(this.product.product_available_quantity);
+        const productReservedQty = Number(this.product.product_reserved_quantity);
+        return productAvailableQty + productReservedQty;
+      },
+      lowStock() {
+        return this.product.product_low_stock_alert;
+      },
+      lowStockLevel() {
+        return `<div class="text-sm-left">
+                  <p>${this.trans('product_low_stock')}</p>
+                  <p><strong>${this.trans('product_low_stock_level')} ${this.product.product_low_stock_threshold}</strong></p>
+                </div>`;
+      },
+      lowStockAlert() {
+        return `<div class="text-sm-left">
+                  <p><strong>${this.trans('product_low_stock_alert')} ${this.product.product_low_stock_alert}</strong></p>
+                </div>`;
+      },
+      id() {
+        return `product-${this.product.product_id}${this.product.combination_id}`;
+      },
+    },
+    methods: {
+      productChecked(checkbox) {
+        if (checkbox.checked) {
+          this.$store.dispatch('addSelectedProduct', checkbox.item);
+        } else {
+          this.$store.dispatch('removeSelectedProduct', checkbox.item);
+        }
+      },
+      updateProductQty(productToUpdate) {
+        const updatedProduct = {
+          product_id: productToUpdate.product.product_id,
+          combination_id: productToUpdate.product.combination_id,
+          delta: productToUpdate.delta,
+        };
+        this.$store.dispatch('updateProductQty', updatedProduct);
+        if (productToUpdate.delta) {
+          this.$store.dispatch('addProductToUpdate', updatedProduct);
+        } else {
+          this.$store.dispatch('removeProductToUpdate', updatedProduct);
+        }
+      },
+    },
+    mounted() {
+      EventBus.$on('toggleProductsCheck', (checked) => {
+        const ref = this.id;
+        if (this.$refs[ref]) {
+          this.$refs[ref].checked = checked;
+        }
+      });
+      $('[data-toggle="pstooltip"]').pstooltip();
+    },
+    data: () => ({
+      bulkEdition: false,
+    }),
+    components: {
+      Spinner,
+      PSMedia,
+      PSCheckbox,
+    },
+  };
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/overview/products-actions.vue

@@ -0,0 +1,147 @@
+<!--**
+ * 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="row product-actions">
+    <div
+      class="col-md-8 qty d-flex align-items-center"
+      :class="{'active' : isFocused}"
+    >
+      <PSCheckbox
+        id="bulk-action"
+        ref="bulk-action"
+        class="mt-3"
+        :isIndeterminate="isIndeterminate"
+        @checked="bulkChecked"
+      />
+      <div class="ml-2">
+        <small>{{trans('title_bulk')}}</small>
+        <PSNumber
+          class="bulk-qty"
+          :danger="danger"
+          :value="bulkEditQty"
+          :buttons="this.isFocused"
+          @focus="focusIn"
+          @blur="focusOut($event)"
+          @change="onChange"
+          @keyup="onKeyUp"
+        />
+      </div>
+    </div>
+    <div class="col-md-4">
+      <PSButton
+        type="button"
+        class="update-qty float-sm-right my-4 mr-2"
+        :class="{'btn-primary': disabled }"
+        :disabled="disabled"
+        :primary="true"
+        @click="sendQty"
+      >
+        <i class="material-icons">edit</i>
+        {{trans('button_movement_type')}}
+      </PSButton>
+    </div>
+  </div>
+</template>
+
+<script>
+  import PSNumber from '@app/widgets/ps-number';
+  import PSCheckbox from '@app/widgets/ps-checkbox';
+  import PSButton from '@app/widgets/ps-button';
+  import { EventBus } from '@app/utils/event-bus';
+
+  export default {
+    computed: {
+      disabled() {
+        return !this.$store.state.hasQty;
+      },
+      bulkEditQty() {
+        return this.$store.state.bulkEditQty;
+      },
+      isIndeterminate() {
+        const selectedProductsLng = this.selectedProductsLng;
+        const productsLng = this.$store.state.products.length;
+        const isIndeterminate = (selectedProductsLng > 0 && selectedProductsLng < productsLng);
+        if (isIndeterminate) {
+          this.$refs['bulk-action'].checked = true;
+        }
+        return isIndeterminate;
+      },
+      selectedProductsLng() {
+        return this.$store.getters.selectedProductsLng;
+      },
+    },
+    watch: {
+      selectedProductsLng(value) {
+        if (value === 0 && this.$refs['bulk-action']) {
+          this.$refs['bulk-action'].checked = false;
+          this.isFocused = false;
+        }
+        if (value === 1 && this.$refs['bulk-action']) {
+          this.isFocused = true;
+        }
+      },
+    },
+    methods: {
+      focusIn() {
+        this.danger = !this.selectedProductsLng;
+        this.isFocused = !this.danger;
+        if (this.danger) {
+          EventBus.$emit('displayBulkAlert', 'error');
+        }
+      },
+      focusOut(event) {
+        this.isFocused = $(event.target).hasClass('ps-number');
+        this.danger = false;
+      },
+      bulkChecked(checkbox) {
+        if (!checkbox.checked) {
+          this.$store.dispatch('updateBulkEditQty', null);
+        }
+        if (!this.isIndeterminate) {
+          EventBus.$emit('toggleProductsCheck', checkbox.checked);
+        }
+      },
+      sendQty() {
+        this.$store.dispatch('updateQtyByProductsId');
+      },
+      onChange(value) {
+        this.$store.dispatch('updateBulkEditQty', value);
+      },
+      onKeyUp(event) {
+        this.isFocused = true;
+        this.$store.dispatch('updateBulkEditQty', event.target.value);
+      },
+    },
+    data: () => ({
+      isFocused: false,
+      danger: false,
+    }),
+    components: {
+      PSNumber,
+      PSCheckbox,
+      PSButton,
+    },
+  };
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/overview/products-table.vue

@@ -0,0 +1,129 @@
+<!--**
+ * 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>
+  <PSTable class="mt-1">
+    <thead>
+      <tr class="column-headers">
+        <th scope="col" width="27%" class="product-title">
+          <PSSort order="product" @sort="sort" :current-sort="currentSort">
+            {{trans('title_product')}}
+          </PSSort>
+        </th>
+        <th scope="col">
+          <PSSort order="reference" @sort="sort" :current-sort="currentSort">
+            {{trans('title_reference')}}
+          </PSSort>
+        </th>
+        <th>
+          <PSSort order="supplier" @sort="sort" :current-sort="currentSort">
+            {{trans('title_supplier')}}
+          </PSSort>
+        </th>
+        <th class="text-center">
+          {{trans('title_status')}}
+        </th>
+        <th class="text-center">
+          <PSSort order="physical_quantity" @sort="sort" :current-sort="currentSort">
+            {{trans('title_physical')}}
+          </PSSort>
+        </th>
+        <th class="text-center">
+          {{trans('title_reserved')}}
+        </th>
+        <th class="text-center">
+          <PSSort order="available_quantity" @sort="sort" :current-sort="currentSort">
+            {{trans('title_available')}}
+          </PSSort>
+        </th>
+        <th :title="trans('title_edit_quantity')">
+          <i class="material-icons">edit</i>
+          {{trans('title_edit_quantity')}}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-if="this.isLoading">
+        <td colspan="8">
+          <PSLoader v-for="(n, index) in 3" class="mt-1" :key="index">
+            <div class="background-masker header-top"></div>
+            <div class="background-masker header-left"></div>
+            <div class="background-masker header-bottom"></div>
+            <div class="background-masker subheader-left"></div>
+            <div class="background-masker subheader-bottom"></div>
+          </PSLoader>
+        </td>
+      </tr>
+      <tr v-else-if="emptyProducts">
+        <td colspan="8">
+          <PSAlert alertType="ALERT_TYPE_WARNING" :hasClose="false" >
+            {{trans('no_product')}}
+          </PSAlert>
+        </td>
+      </tr>
+      <ProductLine
+        v-else
+        v-for="(product, index) in products"
+        :key=index
+        :product="product"
+      />
+    </tbody>
+  </PSTable>
+</template>
+
+<script>
+  import ProductLine from './product-line';
+  import PSAlert from '@app/widgets/ps-alert';
+  import PSTable from '@app/widgets/ps-table/ps-table';
+  import PSSort from '@app/widgets/ps-table/ps-sort';
+  import PSLoader from '@app/widgets/ps-loader';
+
+  export default {
+    props: ['isLoading'],
+    components: {
+      ProductLine,
+      PSSort,
+      PSAlert,
+      PSTable,
+      PSLoader,
+    },
+    methods: {
+      sort(order, sortDirection) {
+        this.$store.dispatch('updateOrder', order);
+        this.$emit('sort', sortDirection === 'desc' ? 'desc' : 'asc');
+      },
+    },
+    computed: {
+      products() {
+        return this.$store.state.products;
+      },
+      emptyProducts() {
+        return !this.$store.state.products.length;
+      },
+      currentSort() {
+        return this.$store.state.order;
+      },
+    },
+  };
+</script>

admin086k8e6t9/themes/new-theme/js/app/pages/stock/components/overview/spinner.vue

@@ -0,0 +1,151 @@
+<!--**
+ * 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>
+  <form
+    class="qty"
+    :class="classObject"
+    @mouseover="focusIn"
+    @mouseleave="focusOut($event)"
+    @submit.prevent="sendQty"
+  >
+    <PSNumber
+      name="qty"
+      class="edit-qty"
+      placeholder="0"
+      pattern="\d*"
+      step="1"
+      buttons="true"
+      hoverButtons="true"
+      :value="qty"
+      @change="onChange"
+      @keyup="onKeyup($event)"
+      @focus="focusIn"
+      @blur="focusOut($event)"
+    />
+    <transition name="fade">
+      <button v-if="isActive" class="check-button"><i class="material-icons">check</i></button>
+    </transition>
+  </form>
+</template>
+
+<script>
+  import PSNumber from '@app/widgets/ps-number';
+
+  const $ = global.$;
+
+  export default {
+    props: ['product'],
+    computed: {
+      qty() {
+        if (!this.product.qty) {
+          this.isEnabled = false;
+          this.value = '';
+        }
+        return this.product.qty;
+      },
+      id() {
+        return `qty-${this.product.product_id}-${this.product.combination_id}`;
+      },
+      classObject() {
+        return {
+          active: this.isActive,
+          disabled: !this.isEnabled,
+        };
+      },
+    },
+    methods: {
+      onChange(val) {
+        this.value = val;
+        this.isEnabled = !!val;
+      },
+      deActivate() {
+        this.isActive = false;
+        this.isEnabled = false;
+        this.value = null;
+        this.product.qty = null;
+      },
+      onKeyup(event) {
+        const val = event.target.value;
+        if (val === 0) {
+          this.deActivate();
+        } else {
+          this.isActive = true;
+          this.isEnabled = true;
+          this.value = val;
+        }
+      },
+      focusIn() {
+        this.isActive = true;
+      },
+      focusOut(event) {
+        const value = parseInt(this.value, 10);
+        if (!$(event.target).hasClass('ps-number') && (isNaN(value) || value === 0)) {
+          this.isActive = false;
+        }
+        this.isEnabled = !!this.value;
+      },
+      sendQty() {
+        const postUrl = this.product.edit_url;
+        if (parseInt(this.product.qty, 10) !== 0 && !isNaN(parseInt(this.value, 10))) {
+          this.$store.dispatch('updateQtyByProductId', {
+            url: postUrl,
+            delta: this.value,
+          });
+          this.deActivate();
+        }
+      },
+    },
+    watch: {
+      value(val) {
+        this.$emit('updateProductQty', {
+          product: this.product,
+          delta: val,
+        });
+      },
+    },
+    components: {
+      PSNumber,
+    },
+    data: () => ({
+      value: null,
+      isActive: false,
+      isEnabled: false,
+    }),
+  };
+</script>
+
+<style lang="scss" type="text/scss" scoped>
+  @import "~jquery-ui-dist/jquery-ui.css";
+  *{
+    outline: none;
+  }
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity 0.2s ease;
+  }
+  .fade-enter, .fade-leave-to {
+    opacity: 0
+  }
+
+</style>