first commit

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>