first commit

admin-kalsport/themes/new-theme/js/app/cldr/exception/localization.js

@@ -0,0 +1,32 @@
+/**
+ * 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)
+ */
+class LocalizationException {
+  constructor(message) {
+    this.message = message;
+    this.name = 'LocalizationException';
+  }
+}
+
+export default LocalizationException;

admin-kalsport/themes/new-theme/js/app/cldr/index.js

@@ -0,0 +1,35 @@
+/**
+ * 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)
+ */
+import NumberFormatter from '@app/cldr/number-formatter';
+import NumberSymbol from '@app/cldr/number-symbol';
+import PriceSpecification from '@app/cldr/specifications/price';
+import NumberSpecification from '@app/cldr/specifications/number';
+
+export {
+  PriceSpecification,
+  NumberSpecification,
+  NumberFormatter,
+  NumberSymbol,
+};

admin-kalsport/themes/new-theme/js/app/cldr/number-formatter.js

@@ -0,0 +1,330 @@
+/**
+ * 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)
+ */
+/**
+ * These placeholders are used in CLDR number formatting templates.
+ * They are meant to be replaced by the correct localized symbols in the number formatting process.
+ */
+import NumberSymbol from '@app/cldr/number-symbol';
+import PriceSpecification from '@app/cldr/specifications/price';
+import NumberSpecification from '@app/cldr/specifications/number';
+
+const escapeRE = require('lodash.escaperegexp');
+
+const CURRENCY_SYMBOL_PLACEHOLDER = '¤';
+const DECIMAL_SEPARATOR_PLACEHOLDER = '.';
+const GROUP_SEPARATOR_PLACEHOLDER = ',';
+const MINUS_SIGN_PLACEHOLDER = '-';
+const PERCENT_SYMBOL_PLACEHOLDER = '%';
+const PLUS_SIGN_PLACEHOLDER = '+';
+
+class NumberFormatter {
+  /**
+   * @param NumberSpecification specification Number specification to be used
+   *   (can be a number spec, a price spec, a percentage spec)
+   */
+  constructor(specification) {
+    this.numberSpecification = specification;
+  }
+
+  /**
+   * Formats the passed number according to specifications.
+   *
+   * @param int|float|string number The number to format
+   * @param NumberSpecification specification Number specification to be used
+   *   (can be a number spec, a price spec, a percentage spec)
+   *
+   * @return string The formatted number
+   *                You should use this this value for display, without modifying it
+   */
+  format(number, specification) {
+    if (specification !== undefined) {
+      this.numberSpecification = specification;
+    }
+
+    /*
+     * We need to work on the absolute value first.
+     * Then the CLDR pattern will add the sign if relevant (at the end).
+     */
+    const num = Math.abs(number).toFixed(this.numberSpecification.getMaxFractionDigits());
+
+    let [majorDigits, minorDigits] = this.extractMajorMinorDigits(num);
+    majorDigits = this.splitMajorGroups(majorDigits);
+    minorDigits = this.adjustMinorDigitsZeroes(minorDigits);
+
+    // Assemble the final number
+    let formattedNumber = majorDigits;
+
+    if (minorDigits) {
+      formattedNumber += DECIMAL_SEPARATOR_PLACEHOLDER + minorDigits;
+    }
+
+    // Get the good CLDR formatting pattern. Sign is important here !
+    const pattern = this.getCldrPattern(number < 0);
+    formattedNumber = this.addPlaceholders(formattedNumber, pattern);
+    formattedNumber = this.replaceSymbols(formattedNumber);
+
+    formattedNumber = this.performSpecificReplacements(formattedNumber);
+
+    return formattedNumber;
+  }
+
+  /**
+   * Get number's major and minor digits.
+   *
+   * Major digits are the "integer" part (before decimal separator),
+   * minor digits are the fractional part
+   * Result will be an array of exactly 2 items: [majorDigits, minorDigits]
+   *
+   * Usage example:
+   *  list(majorDigits, minorDigits) = this.getMajorMinorDigits(decimalNumber);
+   *
+   * @param DecimalNumber number
+   *
+   * @return string[]
+   */
+  extractMajorMinorDigits(number) {
+    // Get the number's major and minor digits.
+    const result = number.toString().split('.');
+    const majorDigits = result[0];
+    const minorDigits = (result[1] === undefined) ? '' : result[1];
+
+    return [majorDigits, minorDigits];
+  }
+
+  /**
+   * Splits major digits into groups.
+   *
+   * e.g.: Given the major digits "1234567", and major group size
+   *  configured to 3 digits, the result would be "1 234 567"
+   *
+   * @param string majorDigits The major digits to be grouped
+   *
+   * @return string The grouped major digits
+   */
+  splitMajorGroups(digit) {
+    if (!this.numberSpecification.isGroupingUsed()) {
+      return digit;
+    }
+
+    // Reverse the major digits, since they are grouped from the right.
+    const majorDigits = digit.split('').reverse();
+
+    // Group the major digits.
+    let groups = [];
+    groups.push(majorDigits.splice(0, this.numberSpecification.getPrimaryGroupSize()));
+    while (majorDigits.length) {
+      groups.push(majorDigits.splice(0, this.numberSpecification.getSecondaryGroupSize()));
+    }
+
+    // Reverse back the digits and the groups
+    groups = groups.reverse();
+    const newGroups = [];
+    groups.forEach((group) => {
+      newGroups.push(group.reverse().join(''));
+    });
+
+    // Reconstruct the major digits.
+    return newGroups.join(GROUP_SEPARATOR_PLACEHOLDER);
+  }
+
+  /**
+   * Adds or remove trailing zeroes, depending on specified min and max fraction digits numbers.
+   *
+   * @param string minorDigits Digits to be adjusted with (trimmed or padded) zeroes
+   *
+   * @return string The adjusted minor digits
+   */
+  adjustMinorDigitsZeroes(minorDigits) {
+    let digit = minorDigits;
+
+    if (digit.length > this.numberSpecification.getMaxFractionDigits()) {
+      // Strip any trailing zeroes.
+      digit = digit.replace(/0+$/, '');
+    }
+
+    if (digit.length < this.numberSpecification.getMinFractionDigits()) {
+      // Re-add needed zeroes
+      digit = digit.padEnd(
+        this.numberSpecification.getMinFractionDigits(),
+        '0',
+      );
+    }
+
+    return digit;
+  }
+
+  /**
+   * Get the CLDR formatting pattern.
+   *
+   * @see http://cldr.unicode.org/translation/number-patterns
+   *
+   * @param bool isNegative If true, the negative pattern
+   * will be returned instead of the positive one
+   *
+   * @return string The CLDR formatting pattern
+   */
+  getCldrPattern(isNegative) {
+    if (isNegative) {
+      return this.numberSpecification.getNegativePattern();
+    }
+
+    return this.numberSpecification.getPositivePattern();
+  }
+
+  /**
+   * Replace placeholder number symbols with relevant numbering system's symbols.
+   *
+   * @param string number
+   *                       The number to process
+   *
+   * @return string
+   *                The number with replaced symbols
+   */
+  replaceSymbols(number) {
+    const symbols = this.numberSpecification.getSymbol();
+
+    const map = {};
+    map[DECIMAL_SEPARATOR_PLACEHOLDER] = symbols.getDecimal();
+    map[GROUP_SEPARATOR_PLACEHOLDER] = symbols.getGroup();
+    map[MINUS_SIGN_PLACEHOLDER] = symbols.getMinusSign();
+    map[PERCENT_SYMBOL_PLACEHOLDER] = symbols.getPercentSign();
+    map[PLUS_SIGN_PLACEHOLDER] = symbols.getPlusSign();
+
+    return this.strtr(number, map);
+  }
+
+  /**
+   * strtr() for JavaScript
+   * Translate characters or replace substrings
+   *
+   * @param str
+   *  String to parse
+   * @param pairs
+   *  Hash of ('from' => 'to', ...).
+   *
+   * @return string
+   */
+  strtr(str, pairs) {
+    const substrs = Object.keys(pairs).map(escapeRE);
+
+    return str.split(RegExp(`(${substrs.join('|')})`))
+      .map((part) => pairs[part] || part)
+      .join('');
+  }
+
+  /**
+   * Add missing placeholders to the number using the passed CLDR pattern.
+   *
+   * Missing placeholders can be the percent sign, currency symbol, etc.
+   *
+   * e.g. with a currency CLDR pattern:
+   *  - Passed number (partially formatted): 1,234.567
+   *  - Returned number: 1,234.567 ¤
+   *  ("¤" symbol is the currency symbol placeholder)
+   *
+   * @see http://cldr.unicode.org/translation/number-patterns
+   *
+   * @param formattedNumber
+   *  Number to process
+   * @param pattern
+   *  CLDR formatting pattern to use
+   *
+   * @return string
+   */
+  addPlaceholders(formattedNumber, pattern) {
+    /*
+     * Regex groups explanation:
+     * #          : literal "#" character. Once.
+     * (,#+)*     : any other "#" characters group, separated by ",". Zero to infinity times.
+     * 0          : literal "0" character. Once.
+     * (\.[0#]+)* : any combination of "0" and "#" characters groups, separated by '.'.
+     *              Zero to infinity times.
+     */
+    return pattern.replace(/#?(,#+)*0(\.[0#]+)*/, formattedNumber);
+  }
+
+  /**
+   * Perform some more specific replacements.
+   *
+   * Specific replacements are needed when number specification is extended.
+   * For instance, prices have an extended number specification in order to
+   * add currency symbol to the formatted number.
+   *
+   * @param string formattedNumber
+   *
+   * @return mixed
+   */
+  performSpecificReplacements(formattedNumber) {
+    if (this.numberSpecification instanceof PriceSpecification) {
+      return formattedNumber
+        .split(CURRENCY_SYMBOL_PLACEHOLDER)
+        .join(this.numberSpecification.getCurrencySymbol());
+    }
+
+    return formattedNumber;
+  }
+
+  static build(specifications) {
+    let symbol;
+
+    if (undefined !== specifications.numberSymbols) {
+      symbol = new NumberSymbol(...specifications.numberSymbols);
+    } else {
+      symbol = new NumberSymbol(...specifications.symbol);
+    }
+
+    let specification;
+
+    if (specifications.currencySymbol) {
+      specification = new PriceSpecification(
+        specifications.positivePattern,
+        specifications.negativePattern,
+        symbol,
+        parseInt(specifications.maxFractionDigits, 10),
+        parseInt(specifications.minFractionDigits, 10),
+        specifications.groupingUsed,
+        specifications.primaryGroupSize,
+        specifications.secondaryGroupSize,
+        specifications.currencySymbol,
+        specifications.currencyCode,
+      );
+    } else {
+      specification = new NumberSpecification(
+        specifications.positivePattern,
+        specifications.negativePattern,
+        symbol,
+        parseInt(specifications.maxFractionDigits, 10),
+        parseInt(specifications.minFractionDigits, 10),
+        specifications.groupingUsed,
+        specifications.primaryGroupSize,
+        specifications.secondaryGroupSize,
+      );
+    }
+
+    return new NumberFormatter(specification);
+  }
+}
+
+export default NumberFormatter;

admin-kalsport/themes/new-theme/js/app/cldr/number-symbol.js

@@ -0,0 +1,228 @@
+/**
+ * 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)
+ */
+import LocalizationException from '@app/cldr/exception/localization';
+
+class NumberSymbol {
+  /**
+   * NumberSymbolList constructor.
+   *
+   * @param string decimal Decimal separator character
+   * @param string group Digits group separator character
+   * @param string list List elements separator character
+   * @param string percentSign Percent sign character
+   * @param string minusSign Minus sign character
+   * @param string plusSign Plus sign character
+   * @param string exponential Exponential character
+   * @param string superscriptingExponent Superscripting exponent character
+   * @param string perMille Permille sign character
+   * @param string infinity The infinity sign. Corresponds to the IEEE infinity bit pattern.
+   * @param string nan The NaN (Not A Number) sign. Corresponds to the IEEE NaN bit pattern.
+   *
+   * @throws LocalizationException
+   */
+  constructor(
+    decimal,
+    group,
+    list,
+    percentSign,
+    minusSign,
+    plusSign,
+    exponential,
+    superscriptingExponent,
+    perMille,
+    infinity,
+    nan,
+  ) {
+    this.decimal = decimal;
+    this.group = group;
+    this.list = list;
+    this.percentSign = percentSign;
+    this.minusSign = minusSign;
+    this.plusSign = plusSign;
+    this.exponential = exponential;
+    this.superscriptingExponent = superscriptingExponent;
+    this.perMille = perMille;
+    this.infinity = infinity;
+    this.nan = nan;
+
+    this.validateData();
+  }
+
+  /**
+   * Get the decimal separator.
+   *
+   * @return string
+   */
+  getDecimal() {
+    return this.decimal;
+  }
+
+  /**
+   * Get the digit groups separator.
+   *
+   * @return string
+   */
+  getGroup() {
+    return this.group;
+  }
+
+  /**
+   * Get the list elements separator.
+   *
+   * @return string
+   */
+  getList() {
+    return this.list;
+  }
+
+  /**
+   * Get the percent sign.
+   *
+   * @return string
+   */
+  getPercentSign() {
+    return this.percentSign;
+  }
+
+  /**
+   * Get the minus sign.
+   *
+   * @return string
+   */
+  getMinusSign() {
+    return this.minusSign;
+  }
+
+  /**
+   * Get the plus sign.
+   *
+   * @return string
+   */
+  getPlusSign() {
+    return this.plusSign;
+  }
+
+  /**
+   * Get the exponential character.
+   *
+   * @return string
+   */
+  getExponential() {
+    return this.exponential;
+  }
+
+  /**
+   * Get the exponent character.
+   *
+   * @return string
+   */
+  getSuperscriptingExponent() {
+    return this.superscriptingExponent;
+  }
+
+  /**
+   * Gert the per mille symbol (often "‰").
+   *
+   * @see https://en.wikipedia.org/wiki/Per_mille
+   *
+   * @return string
+   */
+  getPerMille() {
+    return this.perMille;
+  }
+
+  /**
+   * Get the infinity symbol (often "∞").
+   *
+   * @see https://en.wikipedia.org/wiki/Infinity_symbol
+   *
+   * @return string
+   */
+  getInfinity() {
+    return this.infinity;
+  }
+
+  /**
+   * Get the NaN (not a number) sign.
+   *
+   * @return string
+   */
+  getNan() {
+    return this.nan;
+  }
+
+  /**
+   * Symbols list validation.
+   *
+   * @throws LocalizationException
+   */
+  validateData() {
+    if (!this.decimal || typeof this.decimal !== 'string') {
+      throw new LocalizationException('Invalid decimal');
+    }
+
+    if (!this.group || typeof this.group !== 'string') {
+      throw new LocalizationException('Invalid group');
+    }
+
+    if (!this.list || typeof this.list !== 'string') {
+      throw new LocalizationException('Invalid symbol list');
+    }
+
+    if (!this.percentSign || typeof this.percentSign !== 'string') {
+      throw new LocalizationException('Invalid percentSign');
+    }
+
+    if (!this.minusSign || typeof this.minusSign !== 'string') {
+      throw new LocalizationException('Invalid minusSign');
+    }
+
+    if (!this.plusSign || typeof this.plusSign !== 'string') {
+      throw new LocalizationException('Invalid plusSign');
+    }
+
+    if (!this.exponential || typeof this.exponential !== 'string') {
+      throw new LocalizationException('Invalid exponential');
+    }
+
+    if (!this.superscriptingExponent || typeof this.superscriptingExponent !== 'string') {
+      throw new LocalizationException('Invalid superscriptingExponent');
+    }
+
+    if (!this.perMille || typeof this.perMille !== 'string') {
+      throw new LocalizationException('Invalid perMille');
+    }
+
+    if (!this.infinity || typeof this.infinity !== 'string') {
+      throw new LocalizationException('Invalid infinity');
+    }
+
+    if (!this.nan || typeof this.nan !== 'string') {
+      throw new LocalizationException('Invalid nan');
+    }
+  }
+}
+
+export default NumberSymbol;

admin-kalsport/themes/new-theme/js/app/cldr/specifications/number.js

@@ -0,0 +1,176 @@
+/**
+ * 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)
+ */
+import LocalizationException from '@app/cldr/exception/localization';
+import NumberSymbol from '@app/cldr/number-symbol';
+
+class NumberSpecification {
+  /**
+   * Number specification constructor.
+   *
+   * @param string positivePattern CLDR formatting pattern for positive amounts
+   * @param string negativePattern CLDR formatting pattern for negative amounts
+   * @param NumberSymbol symbol Number symbol
+   * @param int maxFractionDigits Maximum number of digits after decimal separator
+   * @param int minFractionDigits Minimum number of digits after decimal separator
+   * @param bool groupingUsed Is digits grouping used ?
+   * @param int primaryGroupSize Size of primary digits group in the number
+   * @param int secondaryGroupSize Size of secondary digits group in the number
+   *
+   * @throws LocalizationException
+   */
+  constructor(
+    positivePattern,
+    negativePattern,
+    symbol,
+    maxFractionDigits,
+    minFractionDigits,
+    groupingUsed,
+    primaryGroupSize,
+    secondaryGroupSize,
+  ) {
+    this.positivePattern = positivePattern;
+    this.negativePattern = negativePattern;
+    this.symbol = symbol;
+
+    this.maxFractionDigits = maxFractionDigits;
+    // eslint-disable-next-line
+    this.minFractionDigits = maxFractionDigits < minFractionDigits ? maxFractionDigits : minFractionDigits;
+
+    this.groupingUsed = groupingUsed;
+    this.primaryGroupSize = primaryGroupSize;
+    this.secondaryGroupSize = secondaryGroupSize;
+
+    if (!this.positivePattern || typeof this.positivePattern !== 'string') {
+      throw new LocalizationException('Invalid positivePattern');
+    }
+
+    if (!this.negativePattern || typeof this.negativePattern !== 'string') {
+      throw new LocalizationException('Invalid negativePattern');
+    }
+
+    if (!this.symbol || !(this.symbol instanceof NumberSymbol)) {
+      throw new LocalizationException('Invalid symbol');
+    }
+
+    if (typeof this.maxFractionDigits !== 'number') {
+      throw new LocalizationException('Invalid maxFractionDigits');
+    }
+
+    if (typeof this.minFractionDigits !== 'number') {
+      throw new LocalizationException('Invalid minFractionDigits');
+    }
+
+    if (typeof this.groupingUsed !== 'boolean') {
+      throw new LocalizationException('Invalid groupingUsed');
+    }
+
+    if (typeof this.primaryGroupSize !== 'number') {
+      throw new LocalizationException('Invalid primaryGroupSize');
+    }
+
+    if (typeof this.secondaryGroupSize !== 'number') {
+      throw new LocalizationException('Invalid secondaryGroupSize');
+    }
+  }
+
+  /**
+   * Get symbol.
+   *
+   * @return NumberSymbol
+   */
+  getSymbol() {
+    return this.symbol;
+  }
+
+  /**
+   * Get the formatting rules for this number (when positive).
+   *
+   * This pattern uses the Unicode CLDR number pattern syntax
+   *
+   * @return string
+   */
+  getPositivePattern() {
+    return this.positivePattern;
+  }
+
+  /**
+   * Get the formatting rules for this number (when negative).
+   *
+   * This pattern uses the Unicode CLDR number pattern syntax
+   *
+   * @return string
+   */
+  getNegativePattern() {
+    return this.negativePattern;
+  }
+
+  /**
+   * Get the maximum number of digits after decimal separator (rounding if needed).
+   *
+   * @return int
+   */
+  getMaxFractionDigits() {
+    return this.maxFractionDigits;
+  }
+
+  /**
+   * Get the minimum number of digits after decimal separator (fill with "0" if needed).
+   *
+   * @return int
+   */
+  getMinFractionDigits() {
+    return this.minFractionDigits;
+  }
+
+  /**
+   * Get the "grouping" flag. This flag defines if digits
+   * grouping should be used when formatting this number.
+   *
+   * @return bool
+   */
+  isGroupingUsed() {
+    return this.groupingUsed;
+  }
+
+  /**
+   * Get the size of primary digits group in the number.
+   *
+   * @return int
+   */
+  getPrimaryGroupSize() {
+    return this.primaryGroupSize;
+  }
+
+  /**
+   * Get the size of secondary digits groups in the number.
+   *
+   * @return int
+   */
+  getSecondaryGroupSize() {
+    return this.secondaryGroupSize;
+  }
+}
+
+export default NumberSpecification;

admin-kalsport/themes/new-theme/js/app/cldr/specifications/price.js

@@ -0,0 +1,114 @@
+/**
+ * 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)
+ */
+import LocalizationException from '@app/cldr/exception/localization';
+import NumberSpecification from '@app/cldr/specifications/number';
+
+/**
+ * Currency display option: symbol notation.
+ */
+const CURRENCY_DISPLAY_SYMBOL = 'symbol';
+
+class PriceSpecification extends NumberSpecification {
+  /**
+   * Price specification constructor.
+   *
+   * @param string positivePattern CLDR formatting pattern for positive amounts
+   * @param string negativePattern CLDR formatting pattern for negative amounts
+   * @param NumberSymbol symbol Number symbol
+   * @param int maxFractionDigits Maximum number of digits after decimal separator
+   * @param int minFractionDigits Minimum number of digits after decimal separator
+   * @param bool groupingUsed Is digits grouping used ?
+   * @param int primaryGroupSize Size of primary digits group in the number
+   * @param int secondaryGroupSize Size of secondary digits group in the number
+   * @param string currencySymbol Currency symbol of this price (eg. : €)
+   * @param currencyCode Currency code of this price (e.g.: EUR)
+   *
+   * @throws LocalizationException
+   */
+  constructor(
+    positivePattern,
+    negativePattern,
+    symbol,
+    maxFractionDigits,
+    minFractionDigits,
+    groupingUsed,
+    primaryGroupSize,
+    secondaryGroupSize,
+    currencySymbol,
+    currencyCode,
+  ) {
+    super(
+      positivePattern,
+      negativePattern,
+      symbol,
+      maxFractionDigits,
+      minFractionDigits,
+      groupingUsed,
+      primaryGroupSize,
+      secondaryGroupSize,
+    );
+    this.currencySymbol = currencySymbol;
+    this.currencyCode = currencyCode;
+
+    if (!this.currencySymbol || typeof this.currencySymbol !== 'string') {
+      throw new LocalizationException('Invalid currencySymbol');
+    }
+
+    if (!this.currencyCode || typeof this.currencyCode !== 'string') {
+      throw new LocalizationException('Invalid currencyCode');
+    }
+  }
+
+  /**
+   * Get type of display for currency symbol.
+   *
+   * @return string
+   */
+  static getCurrencyDisplay() {
+    return CURRENCY_DISPLAY_SYMBOL;
+  }
+
+  /**
+   * Get the currency symbol
+   * e.g.: €.
+   *
+   * @return string
+   */
+  getCurrencySymbol() {
+    return this.currencySymbol;
+  }
+
+  /**
+   * Get the currency ISO code
+   * e.g.: EUR.
+   *
+   * @return string
+   */
+  getCurrencyCode() {
+    return this.currencyCode;
+  }
+}
+
+export default PriceSpecification;

admin-kalsport/themes/new-theme/js/app/pages/catalog/index.js

@@ -0,0 +1,32 @@
+/**
+ * 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)
+ */
+
+import TableSorting from '@app/utils/table-sorting';
+
+const {$} = window;
+
+$(() => {
+  new TableSorting($('table.table')).attach();
+});

admin-kalsport/themes/new-theme/js/app/pages/module-card/index.js

@@ -0,0 +1,32 @@
+/**
+ * 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)
+ */
+
+import ModuleCard from '@components/module-card';
+
+const {$} = window;
+
+$(() => {
+  new ModuleCard();
+});

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

@@ -0,0 +1,139 @@
+<!--**
+ * 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"
+      />
+      <PSPagination
+        :current-index="currentPagination"
+        :pages-count="pagesCount"
+        @pageChanged="onPageChanged"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import PSPagination from '@app/widgets/ps-pagination';
+  import StockHeader from './header/stock-header';
+  import Search from './header/search';
+  import LowFilter from './header/filters/low-filter';
+
+  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 = {
+          ...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 = {...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>

admin-kalsport/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>

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

@@ -0,0 +1,242 @@
+<!--**
+ * 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"
+              item-id="supplier_id"
+              label="name"
+              @active="onFilterActive"
+            />
+          </div>
+          <div
+            v-else
+            class="py-3"
+          >
+            <h2>{{ trans('filter_movements_type') }}</h2>
+            <PSSelect
+              :items="movementsTypes"
+              item-id="id_stock_mvt_reason"
+              item-name="name"
+              @change="onChange"
+            >
+              {{ trans('none') }}
+            </PSSelect>
+            <h2 class="mt-4">
+              {{ trans('filter_movements_employee') }}
+            </h2>
+            <PSSelect
+              :items="employees"
+              item-id="id_employee"
+              item-name="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"
+              item-id="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 PSSelect from '@app/widgets/ps-select';
+  import PSDatePicker from '@app/widgets/ps-datepicker';
+  import PSRadio from '@app/widgets/ps-radio';
+  import FilterComponent from './filters/filter-component';
+
+  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,
+      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>

admin-kalsport/themes/new-theme/js/app/pages/stock/components/header/filters/filter-component.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 class="filter-container">
+    <PSTags
+      v-if="!hasChildren"
+      ref="tags"
+      class="form-control search search-input mb-2"
+      :tags="tags"
+      :placeholder="hasPlaceholder?placeholder:''"
+      :has-icon="true"
+      @tagChange="onTagChanged"
+      @typing="onTyping"
+    />
+    <div v-if="hasChildren">
+      <PSTree
+        v-if="isOverview"
+        v-once
+        ref="tree"
+        :has-checkbox="true"
+        :model="list"
+        @checked="onCheck"
+        :translations="PSTreeTranslations"
+      />
+      <PSTree
+        v-else
+        ref="tree"
+        :has-checkbox="true"
+        :model="list"
+        @checked="onCheck"
+        :translations="PSTreeTranslations"
+      />
+    </div>
+    <ul
+      class="mt-1"
+      v-else
+    >
+      <li
+        v-for="(item, index) in getItems()"
+        :key="index"
+        v-show="item.visible"
+        class="item"
+      >
+        <PSTreeItem
+          :label="item[label]"
+          :model="item"
+          @checked="onCheck"
+          :has-checkbox="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';
+
+  export default {
+    props: {
+      placeholder: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      itemId: {
+        type: String,
+        required: true,
+      },
+      label: {
+        type: String,
+        required: true,
+      },
+      list: {
+        type: Array,
+        required: true,
+      },
+    },
+    computed: {
+      isOverview() {
+        return this.$route.name === 'overview';
+      },
+      hasPlaceholder() {
+        return !this.tags.length;
+      },
+      PSTreeTranslations() {
+        return {
+          expand: this.trans('tree_expand'),
+          reduce: this.trans('tree_reduce'),
+        };
+      },
+    },
+    methods: {
+      getItems() {
+        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;
+      },
+      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;
+        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>

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

@@ -0,0 +1,112 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+
+<template>
+  <div class="content-topbar 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="content-topbar-right col mr-3 d-flex align-items-center justify-content-end">
+        <a :href="stockExportUrl">
+          <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: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+    },
+    computed: {
+      stockImportTitle() {
+        return this.trans('title_import');
+      },
+      stockExportTitle() {
+        return this.trans('title_export');
+      },
+      stockImportUrl() {
+        return window.data.stockImportUrl;
+      },
+      stockExportUrl() {
+        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>

admin-kalsport/themes/new-theme/js/app/pages/stock/components/header/search.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>
+  <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"
+          :alert-type="alertType"
+          :has-close="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 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';
+  import Filters from './filters';
+
+  export default {
+    components: {
+      Filters,
+      PSTags,
+      PSButton,
+      PSAlert,
+    },
+    computed: {
+      error() {
+        return (this.alertType === 'ALERT_TYPE_DANGER');
+      },
+    },
+    methods: {
+      onClick() {
+        const {tag} = this.$refs.psTags;
+        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>

admin-kalsport/themes/new-theme/js/app/pages/stock/components/header/stock-header.vue

@@ -0,0 +1,69 @@
+<!--**
+ * 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 {$} = window;
+
+  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>

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

@@ -0,0 +1,68 @@
+<!--**
+ * 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>

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

@@ -0,0 +1,152 @@
+<!--**
+ * 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 class="background-masker header-left" />
+              <div class="background-masker header-bottom" />
+              <div class="background-masker subheader-left" />
+              <div class="background-masker subheader-bottom" />
+            </PSLoader>
+          </td>
+        </tr>
+        <tr v-else-if="emptyMovements">
+          <td colspan="6">
+            <PSAlert
+              alert-type="ALERT_TYPE_WARNING"
+              :has-close="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>

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

@@ -0,0 +1,104 @@
+<!--**
+ * 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>
+              {{ product.combination_name }}
+            </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: {
+        type: Object,
+        required: true,
+      },
+    },
+    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>

admin-kalsport/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
+      :is-loading="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>

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

@@ -0,0 +1,75 @@
+<!--**
+ * 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>

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

@@ -0,0 +1,213 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <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>
+              {{ product.combination_name }}
+            </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';
+
+  export default {
+    props: {
+      product: {
+        type: Object,
+        required: true,
+      },
+    },
+    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>

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

@@ -0,0 +1,148 @@
+<!--**
+ * 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"
+        :is-indeterminate="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;
+      },
+      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: {
+      isIndeterminate() {
+        const {selectedProductsLng} = this;
+        const productsLng = this.$store.state.products.length;
+        const isIndeterminate = (selectedProductsLng > 0 && selectedProductsLng < productsLng);
+
+        if (isIndeterminate) {
+          this.$refs['bulk-action'].checked = true;
+        }
+        return isIndeterminate;
+      },
+      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>

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

@@ -0,0 +1,165 @@
+<!--**
+ * 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 class="background-masker header-left" />
+            <div class="background-masker header-bottom" />
+            <div class="background-masker subheader-left" />
+            <div class="background-masker subheader-bottom" />
+          </PSLoader>
+        </td>
+      </tr>
+      <tr v-else-if="emptyProducts">
+        <td colspan="8">
+          <PSAlert
+            alert-type="ALERT_TYPE_WARNING"
+            :has-close="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 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';
+  import ProductLine from './product-line';
+
+  export default {
+    props: {
+      isLoading: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    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>

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

@@ -0,0 +1,171 @@
+<!--**
+ * 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"
+      :hover-buttons="true"
+      :value="getQuantity()"
+      @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 {$} = window;
+
+  export default {
+    props: {
+      product: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      id() {
+        return `qty-${this.product.product_id}-${this.product.combination_id}`;
+      },
+      classObject() {
+        return {
+          active: this.isActive,
+          disabled: !this.isEnabled,
+        };
+      },
+    },
+    methods: {
+      getQuantity() {
+        if (!this.product.qty) {
+          this.isEnabled = false;
+          this.value = '';
+        }
+        return parseInt(this.value, 10);
+      },
+      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')
+          && (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
+          && !Number.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>

admin-kalsport/themes/new-theme/js/app/pages/stock/index.js

@@ -0,0 +1,42 @@
+/**
+ * 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)
+ */
+import Vue from 'vue';
+import app from './components/app';
+import store from './store';
+import router from './router';
+import Translation from './mixins/translate';
+
+Vue.mixin(Translation);
+
+new Vue({
+  router,
+  store,
+  el: '#stock-app',
+  template: '<app />',
+  components: {app},
+  beforeMount() {
+    this.$store.dispatch('getTranslations');
+  },
+});

admin-kalsport/themes/new-theme/js/app/pages/stock/mixins/product-desc.js

@@ -0,0 +1,42 @@
+/**
+ * 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)
+ */
+export default {
+  computed: {
+    thumbnail() {
+      if (this.product.combination_thumbnail !== 'N/A') {
+        return `${this.product.combination_thumbnail}`;
+      }
+
+      if (this.product.product_thumbnail !== 'N/A') {
+        return `${this.product.product_thumbnail}`;
+      }
+
+      return null;
+    },
+    hasCombination() {
+      return !!this.product.combination_id;
+    },
+  },
+};

admin-kalsport/themes/new-theme/js/app/pages/stock/mixins/translate.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ */
+export default {
+  methods: {
+    trans(key) {
+      return this.$store.state.translations[key];
+    },
+  },
+};

admin-kalsport/themes/new-theme/js/app/pages/stock/router/index.js

@@ -0,0 +1,51 @@
+/**
+ * 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)
+ */
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import Overview from '@app/pages/stock/components/overview/index';
+import Movements from '@app/pages/stock/components/movements/index';
+
+Vue.use(VueRouter);
+
+export default new VueRouter({
+  mode: 'history',
+  base: (() => {
+    const hasIndex = /(index\.php)/.exec(window.location.href);
+
+    return `${window.data.baseUrl}${hasIndex ? '/index.php' : ''}/sell/stocks`;
+  })(),
+  routes: [
+    {
+      path: '/',
+      name: 'overview',
+      component: Overview,
+    },
+    {
+      path: '/movements',
+      name: 'movements',
+      component: Movements,
+    },
+  ],
+});

admin-kalsport/themes/new-theme/js/app/pages/stock/store/actions.js

@@ -0,0 +1,189 @@
+/**
+ * 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)
+ */
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import * as types from '@app/pages/stock/store/mutation-types';
+import {showGrowl} from '@app/utils/growl';
+import {EventBus} from '@app/utils/event-bus';
+
+Vue.use(VueResource);
+
+export const getStock = ({commit}, payload) => {
+  const url = window.data.apiStockUrl;
+  Vue.http.get(url, {
+    params: {
+      order: payload.order,
+      page_size: payload.page_size,
+      page_index: payload.page_index,
+      keywords: payload.keywords ? payload.keywords : [],
+      supplier_id: payload.suppliers ? payload.suppliers : [],
+      category_id: payload.categories ? payload.categories : [],
+      active: payload.active !== 'null' ? payload.active : [],
+      low_stock: payload.low_stock,
+    },
+  }).then((response) => {
+    commit(types.LOADING_STATE, false);
+    commit(types.SET_TOTAL_PAGES, response.headers.get('Total-Pages'));
+    commit(types.ADD_PRODUCTS, response.body);
+  }, (error) => {
+    showGrowl('error', error.statusText);
+  });
+};
+
+export const getSuppliers = ({commit}) => {
+  const url = window.data.suppliersUrl;
+  Vue.http.get(url).then((response) => {
+    commit(types.SET_SUPPLIERS, response.body);
+  }, (error) => {
+    showGrowl('error', error.statusText);
+  });
+};
+
+export const getCategories = ({commit}) => {
+  const url = window.data.categoriesUrl;
+  Vue.http.get(url).then((response) => {
+    commit(types.SET_CATEGORIES, response.body);
+  }, (error) => {
+    showGrowl('error', error.statusText);
+  });
+};
+
+export const getMovements = ({commit}, payload) => {
+  const url = window.data.apiMovementsUrl;
+
+  Vue.http.get(url, {
+    params: {
+      order: payload.order,
+      page_size: payload.page_size,
+      page_index: payload.page_index,
+      keywords: payload.keywords ? payload.keywords : [],
+      supplier_id: payload.suppliers ? payload.suppliers : [],
+      category_id: payload.categories ? payload.categories : [],
+      id_stock_mvt_reason: payload.id_stock_mvt_reason ? payload.id_stock_mvt_reason : [],
+      id_employee: payload.id_employee ? payload.id_employee : [],
+      date_add: payload.date_add ? payload.date_add : [],
+    },
+  }).then((response) => {
+    commit(types.LOADING_STATE, false);
+    commit(types.SET_TOTAL_PAGES, response.headers.get('Total-Pages'));
+    commit(types.SET_MOVEMENTS, response.body);
+  }, (error) => {
+    showGrowl('error', error.statusText);
+  });
+};
+
+export const getTranslations = ({commit}) => {
+  const url = window.data.translationUrl;
+  Vue.http.get(url).then((response) => {
+    commit(types.SET_TRANSLATIONS, response.body);
+    commit(types.APP_IS_READY);
+  }, (error) => {
+    showGrowl('error', error.statusText);
+  });
+};
+
+export const getEmployees = ({commit}) => {
+  const url = window.data.employeesUrl;
+  Vue.http.get(url).then((response) => {
+    commit(types.SET_EMPLOYEES_LIST, response.body);
+  }, (error) => {
+    showGrowl('error', error.statusText);
+  });
+};
+
+export const getMovementsTypes = ({commit}) => {
+  const url = window.data.movementsTypesUrl;
+  Vue.http.get(url).then((response) => {
+    commit(types.SET_MOVEMENTS_TYPES, response.body);
+  }, (error) => {
+    showGrowl('error', error.statusText);
+  });
+};
+
+export const updateOrder = ({commit}, order) => {
+  commit(types.UPDATE_ORDER, order);
+};
+
+export const updatePageIndex = ({commit}, pageIndex) => {
+  commit(types.SET_PAGE_INDEX, pageIndex);
+};
+
+export const updateKeywords = ({commit}, keywords) => {
+  commit(types.UPDATE_KEYWORDS, keywords);
+};
+
+export const isLoading = ({commit}) => {
+  commit(types.LOADING_STATE, true);
+};
+
+export const updateProductQty = ({commit}, payload) => {
+  commit(types.UPDATE_PRODUCT_QTY, payload);
+};
+
+export const updateQtyByProductId = ({commit}, payload) => {
+  const {url} = payload;
+  const {delta} = payload;
+
+  Vue.http.post(url, {
+    delta,
+  }).then((res) => {
+    commit(types.UPDATE_PRODUCT, res.body);
+    EventBus.$emit('displayBulkAlert', 'success');
+  }, (error) => {
+    showGrowl('error', error.statusText);
+  });
+};
+
+export const updateQtyByProductsId = ({commit, state}) => {
+  const url = state.editBulkUrl;
+  const productsQty = state.productsToUpdate;
+
+  Vue.http.post(url, productsQty).then((res) => {
+    commit(types.UPDATE_PRODUCTS_QTY, res.body);
+    EventBus.$emit('displayBulkAlert', 'success');
+  }, (error) => {
+    showGrowl('error', error.statusText);
+  });
+};
+
+export const updateBulkEditQty = ({commit}, value) => {
+  commit(types.UPDATE_BULK_EDIT_QTY, value);
+};
+
+export const addProductToUpdate = ({commit}, product) => {
+  commit(types.ADD_PRODUCT_TO_UPDATE, product);
+};
+
+export const removeProductToUpdate = ({commit}, product) => {
+  commit(types.REMOVE_PRODUCT_TO_UPDATE, product);
+};
+
+export const addSelectedProduct = ({commit}, product) => {
+  commit(types.ADD_SELECTED_PRODUCT, product);
+};
+
+export const removeSelectedProduct = ({commit}, product) => {
+  commit(types.REMOVE_SELECTED_PRODUCT, product);
+};

admin-kalsport/themes/new-theme/js/app/pages/stock/store/index.js

@@ -0,0 +1,95 @@
+/**
+ * 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)
+ */
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+import * as actions from './actions';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+// root state object.
+
+const state = {
+  order: '',
+  pageIndex: 1,
+  totalPages: 0,
+  productsPerPage: 30,
+  products: [],
+  hasQty: false,
+  keywords: [],
+  suppliers: {
+    data: [],
+  },
+  categories: [],
+  categoryList: [],
+  movements: [],
+  employees: [],
+  movementsTypes: [],
+  translations: {},
+  isLoading: false,
+  isReady: false,
+  editBulkUrl: '',
+  bulkEditQty: null,
+  productsToUpdate: [],
+  selectedProducts: [],
+};
+
+// getters are functions
+const getters = {
+  suppliers(rootState) {
+    function convert(suppliers) {
+      suppliers.forEach((supplier) => {
+        supplier.id = supplier.supplier_id;
+      });
+      return suppliers;
+    }
+    return convert(rootState.suppliers.data);
+  },
+  categories(rootState) {
+    function convert(categories) {
+      categories.forEach((category) => {
+        category.children = _.values(category.children);
+        rootState.categoryList.push(category);
+        category.id = `${category.id_parent}-${category.id_category}`;
+        convert(category.children);
+      });
+      return categories;
+    }
+    return convert(rootState.categories);
+  },
+  selectedProductsLng(rootState) {
+    return rootState.selectedProducts.length;
+  },
+};
+
+// A Vuex instance is created by combining the state, mutations, actions,
+// and getters.
+export default new Vuex.Store({
+  state,
+  getters,
+  actions,
+  mutations,
+});

admin-kalsport/themes/new-theme/js/app/pages/stock/store/mutation-types.js

@@ -0,0 +1,45 @@
+/**
+ * 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)
+ */
+export const ADD_PRODUCTS = 'ADD_PRODUCTS';
+export const ADD_PRODUCT_TO_UPDATE = 'ADD_PRODUCT_TO_UPDATE';
+export const ADD_SELECTED_PRODUCT = 'ADD_SELECTED_PRODUCT';
+export const APP_IS_READY = 'APP_IS_READY';
+export const LOADING_STATE = 'LOADING_STATE';
+export const REMOVE_PRODUCT_TO_UPDATE = 'REMOVE_PRODUCT_TO_UPDATE';
+export const REMOVE_SELECTED_PRODUCT = 'REMOVE_SELECTED_PRODUCT';
+export const SET_CATEGORIES = 'SET_CATEGORIES';
+export const SET_EMPLOYEES_LIST = 'SET_EMPLOYEES_LIST';
+export const SET_MOVEMENTS = 'SET_MOVEMENTS';
+export const SET_MOVEMENTS_TYPES = 'SET_MOVEMENTS_TYPES';
+export const SET_PAGE_INDEX = 'SET_PAGE_INDEX';
+export const SET_SUPPLIERS = 'SET_SUPPLIERS';
+export const SET_TOTAL_PAGES = 'SET_TOTAL_PAGES';
+export const SET_TRANSLATIONS = 'SET_TRANSLATIONS';
+export const UPDATE_BULK_EDIT_QTY = 'UPDATE_BULK_EDIT_QTY';
+export const UPDATE_KEYWORDS = 'UPDATE_KEYWORDS';
+export const UPDATE_PRODUCT = 'UPDATE_PRODUCT';
+export const UPDATE_PRODUCT_QTY = 'UPDATE_PRODUCT_QTY';
+export const UPDATE_PRODUCTS_QTY = 'UPDATE_PRODUCTS_QTY';
+export const UPDATE_ORDER = 'UPDATE_ORDER';

admin-kalsport/themes/new-theme/js/app/pages/stock/store/mutations.js

@@ -0,0 +1,189 @@
+/**
+ * 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)
+ */
+
+import _ from 'lodash';
+import * as types from './mutation-types';
+
+export default {
+  [types.UPDATE_ORDER](state, order) {
+    state.order = order;
+  },
+  [types.UPDATE_KEYWORDS](state, keywords) {
+    state.keywords = keywords;
+  },
+  [types.SET_TOTAL_PAGES](state, totalPages) {
+    state.totalPages = Number(totalPages);
+  },
+  [types.SET_PAGE_INDEX](state, pageIndex) {
+    state.pageIndex = pageIndex;
+  },
+  [types.SET_SUPPLIERS](state, suppliers) {
+    state.suppliers = suppliers;
+  },
+  [types.SET_CATEGORIES](state, categories) {
+    state.categories = categories.data.tree.children;
+  },
+  [types.SET_MOVEMENTS](state, movements) {
+    state.movements = movements.data;
+  },
+  [types.SET_TRANSLATIONS](state, translations) {
+    translations.data.forEach((t) => {
+      state.translations[t.translation_id] = t.name;
+    });
+  },
+  [types.LOADING_STATE](state, isLoading) {
+    state.isLoading = isLoading;
+  },
+  [types.APP_IS_READY](state) {
+    state.isReady = true;
+  },
+  [types.SET_EMPLOYEES_LIST](state, employees) {
+    state.employees = employees.data;
+  },
+  [types.SET_MOVEMENTS_TYPES](state, movementsTypes) {
+    state.movementsTypes = movementsTypes.data;
+  },
+  [types.ADD_PRODUCTS](state, products) {
+    state.productsToUpdate = [];
+    state.selectedProducts = [];
+    _.forEach(products.data.data, (product) => {
+      product.qty = 0;
+    });
+    state.editBulkUrl = products.data.info.edit_bulk_url;
+    state.products = products.data.data;
+  },
+  [types.UPDATE_PRODUCT](state, updatedProduct) {
+    const index = _.findIndex(state.products, {
+      product_id: updatedProduct.product_id,
+      combination_id: updatedProduct.combination_id,
+    });
+    const updatedIndex = _.findIndex(state.productsToUpdate, {
+      product_id: updatedProduct.product_id,
+      combination_id: updatedProduct.combination_id,
+    });
+    updatedProduct.qty = 0;
+    state.products.splice(index, 1, updatedProduct);
+    state.productsToUpdate.splice(updatedIndex, 1);
+  },
+  [types.UPDATE_PRODUCTS_QTY](state, updatedProducts) {
+    state.productsToUpdate = [];
+    state.selectedProducts = [];
+    _.forEach(updatedProducts, (product) => {
+      const index = _.findIndex(state.products, {
+        product_id: product.product_id,
+        combination_id: product.combination_id,
+      });
+      product.qty = 0;
+      state.products.splice(index, 1, product);
+    });
+    state.hasQty = false;
+  },
+  [types.UPDATE_PRODUCT_QTY](state, updatedProduct) {
+    let hasQty = false;
+
+    const productToUpdate = _.find(state.products, {
+      product_id: updatedProduct.product_id,
+      combination_id: updatedProduct.combination_id,
+    });
+
+    _.forEach(state.products, (product) => {
+      productToUpdate.qty = updatedProduct.delta;
+      if (product.qty) {
+        hasQty = true;
+      }
+    });
+
+    state.hasQty = hasQty;
+  },
+  [types.ADD_PRODUCT_TO_UPDATE](state, updatedProduct) {
+    const index = _.findIndex(state.productsToUpdate, {
+      product_id: updatedProduct.product_id,
+      combination_id: updatedProduct.combination_id,
+    });
+
+    if (index !== -1) {
+      state.productsToUpdate.splice(index, 1, updatedProduct);
+    } else {
+      state.productsToUpdate.push(updatedProduct);
+    }
+  },
+  [types.REMOVE_PRODUCT_TO_UPDATE](state, updatedProduct) {
+    const index = _.findIndex(state.productsToUpdate, {
+      product_id: updatedProduct.product_id,
+      combination_id: updatedProduct.combination_id,
+    });
+    state.productsToUpdate.splice(index, 1);
+  },
+  [types.UPDATE_BULK_EDIT_QTY](state, value) {
+    state.bulkEditQty = value;
+    if (value) {
+      _.forEach(state.selectedProducts, (product) => {
+        const index = _.findIndex(state.productsToUpdate, {
+          product_id: product.product_id,
+          combination_id: product.combination_id,
+        });
+        product.qty = value;
+        product.delta = state.bulkEditQty;
+        if (index !== -1) {
+          state.productsToUpdate.splice(index, 1, product);
+        } else {
+          state.productsToUpdate.push(product);
+        }
+      });
+      state.hasQty = true;
+    }
+    if (value === null) {
+      _.forEach(state.selectedProducts, (product) => {
+        product.qty = 0;
+      });
+      state.productsToUpdate = [];
+      state.selectedProducts = [];
+      state.hasQty = false;
+    }
+  },
+  [types.ADD_SELECTED_PRODUCT](state, product) {
+    const index = _.findIndex(state.selectedProducts, {
+      product_id: product.product_id,
+      combination_id: product.combination_id,
+    });
+
+    if (index !== -1) {
+      state.selectedProducts.splice(index, 1, product);
+    } else {
+      state.selectedProducts.push(product);
+    }
+  },
+  [types.REMOVE_SELECTED_PRODUCT](state, product) {
+    const index = _.findIndex(state.selectedProducts, {
+      product_id: product.product_id,
+      combination_id: product.combination_id,
+    });
+
+    if (index !== -1) {
+      state.selectedProducts[index].qty = 0;
+    }
+    state.selectedProducts.splice(index, 1);
+  },
+};

admin-kalsport/themes/new-theme/js/app/pages/translations/components/app.vue

@@ -0,0 +1,175 @@
+<!--**
+ * 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="translations-app"
+  >
+    <div class="container-fluid">
+      <div class="row justify-content-between align-items-center">
+        <Search @search="onSearch" />
+        <div class="translations-summary">
+          <span>{{ totalTranslations }}</span>
+          <span v-show="totalMissingTranslations">
+            -
+            <span class="missing">{{ totalMissingTranslationsString }}</span>
+          </span>
+        </div>
+      </div>
+
+      <div class="row">
+        <Sidebar
+          :modal="this.$refs.transModal"
+          :principal="this.$refs.principal"
+        />
+        <Principal
+          :modal="this.$refs.transModal"
+          ref="principal"
+        />
+      </div>
+    </div>
+    <PSModal
+      ref="transModal"
+      :translations="translations"
+    />
+  </div>
+</template>
+
+<script>
+  import Search from '@app/pages/translations/components/header/search';
+  import Sidebar from '@app/pages/translations/components/sidebar';
+  import Principal from '@app/pages/translations/components/principal';
+  import PSModal from '@app/widgets/ps-modal';
+
+  export default {
+    name: 'App',
+    computed: {
+      isReady() {
+        return this.$store.getters.isReady;
+      },
+      totalTranslations() {
+        return this.$store.state.totalTranslations <= 1
+          ? this.trans('label_total_domain_singular')
+            .replace('%nb_translation%', this.$store.state.totalTranslations)
+          : this.trans('label_total_domain')
+            .replace('%nb_translations%', this.$store.state.totalTranslations);
+      },
+      totalMissingTranslations() {
+        return this.$store.state.totalMissingTranslations;
+      },
+      totalMissingTranslationsString() {
+        return this.totalMissingTranslations === 1
+          ? this.trans('label_missing_singular')
+          : this.trans('label_missing').replace('%d', this.totalMissingTranslations);
+      },
+      translations() {
+        return {
+          button_save: this.trans('button_save'),
+          button_leave: this.trans('button_leave'),
+          modal_content: this.trans('modal_content'),
+          modal_title: this.trans('modal_title'),
+        };
+      },
+    },
+    mounted() {
+      $('a').on('click', (e) => {
+        if ($(e.currentTarget).attr('href')) {
+          this.destHref = $(e.currentTarget).attr('href');
+        }
+      });
+      window.onbeforeunload = () => {
+        if (!this.destHref && this.isEdited() && !this.leave) {
+          return true;
+        }
+
+        if (!this.leave && this.isEdited()) {
+          setTimeout(() => {
+            window.stop();
+          }, 500);
+
+          this.$refs.transModal.showModal();
+          this.$refs.transModal.$once('save', () => {
+            this.$refs.principal.saveTranslations();
+            this.leavePage();
+          });
+
+          this.$refs.transModal.$once('leave', () => {
+            this.leavePage();
+          });
+          return null;
+        }
+
+        return undefined;
+      };
+    },
+    methods: {
+      onSearch() {
+        this.$store.dispatch('getDomainsTree', {
+          store: this.$store,
+        });
+        this.$store.currentDomain = '';
+      },
+      /**
+       * Set leave to true and redirect the user to the new location
+       */
+      leavePage() {
+        this.leave = true;
+        window.location.href = this.destHref;
+      },
+      isEdited() {
+        return this.$refs.principal.edited();
+      },
+    },
+    data: () => ({
+      destHref: null,
+      leave: false,
+    }),
+    components: {
+      Search,
+      Sidebar,
+      Principal,
+      PSModal,
+    },
+  };
+</script>
+
+<style lang="scss" type="text/scss">
+  @import '~@scss/config/_settings.scss';
+
+  .flex {
+    display: flex;
+    align-items: center;
+  }
+
+  .missing {
+    color: $danger;
+  }
+
+  .translations-summary {
+    font-weight: $font-weight-semibold;
+    font-size: 1rem;
+  }
+</style>

admin-kalsport/themes/new-theme/js/app/pages/translations/components/header/search.vue

@@ -0,0 +1,87 @@
+<!--**
+ * 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="col-md-8 mb-4"
+  >
+    <form
+      class="search-form"
+      @submit.prevent
+    >
+      <label>{{ trans('search_label') }}</label>
+      <div class="input-group">
+        <PSTags
+          ref="psTags"
+          :tags="tags"
+          @tagChange="onSearch"
+          :placeholder="trans('search_placeholder')"
+        />
+        <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>
+</template>
+
+<script>
+  import PSTags from '@app/widgets/ps-tags';
+  import PSButton from '@app/widgets/ps-button';
+
+  export default {
+    components: {
+      PSTags,
+      PSButton,
+    },
+    methods: {
+      onClick() {
+        const {tag} = this.$refs.psTags;
+        this.$refs.psTags.add(tag);
+      },
+      onSearch() {
+        this.$store.dispatch('updateSearch', this.tags);
+        this.$emit('search', this.tags);
+      },
+    },
+    watch: {
+      $route() {
+        this.tags = [];
+      },
+    },
+    data() {
+      return {
+        tags: [],
+      };
+    },
+  };
+</script>

admin-kalsport/themes/new-theme/js/app/pages/translations/components/principal/index.vue

@@ -0,0 +1,319 @@
+<!--**
+ * 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>
+  <transition name="fade">
+    <div
+      class="col-sm-9 card"
+      v-if="principalReady"
+    >
+      <div class="p-3 translations-wrapper">
+        <PSAlert
+          v-if="noResult"
+          alert-type="ALERT_TYPE_WARNING"
+          :has-close="false"
+        >
+          {{ noResultInfo }}
+        </PSAlert>
+        <div
+          class="translations-catalog row p-0"
+          v-else
+        >
+          <PSAlert
+            v-if="searchActive"
+            class="col-sm-12"
+            alert-type="ALERT_TYPE_INFO"
+            :has-close="false"
+          >
+            {{ searchInfo }}
+          </PSAlert>
+          <div class="col-sm-8 pt-3">
+            <h3 class="domain-info">
+              <span>{{ currentDomain }}</span>
+              <span>{{ currentDomainTotalTranslations }}</span>
+              <span
+                v-show="currentDomainTotalMissingTranslations"
+              > - <span class="missing">{{ currentDomainTotalMissingTranslationsString }}</span></span>
+            </h3>
+          </div>
+          <div class="col-sm-4">
+            <PSPagination
+              :current-index="currentPagination"
+              :pages-count="pagesCount"
+              class="float-sm-right"
+              @pageChanged="onPageChanged"
+            />
+          </div>
+          <form
+            class="col-sm-12"
+            method="post"
+            :action="saveAction"
+            :isEdited="isEdited"
+            @submit.prevent="saveTranslations"
+          >
+            <div class="row">
+              <div class="col-sm-12 mb-2">
+                <PSButton
+                  :primary="true"
+                  type="submit"
+                  class="float-sm-right"
+                >
+                  {{ trans('button_save') }}
+                </PSButton>
+              </div>
+            </div>
+
+            <TranslationInput
+              v-for="(translation, key) in translationsCatalog"
+              :key="key"
+              :id="key"
+              :translated="translation"
+              :label="translation.default"
+              :extra-info="getDomain(translation.tree_domain)"
+              @editedAction="isEdited"
+            />
+
+            <div class="row">
+              <div class="col-sm-12">
+                <PSButton
+                  :primary="true"
+                  type="submit"
+                  class="float-sm-right mt-3"
+                >
+                  {{ trans('button_save') }}
+                </PSButton>
+              </div>
+            </div>
+          </form>
+          <div class="col-sm-12">
+            <PSPagination
+              :current-index="currentPagination"
+              :pages-count="pagesCount"
+              @pageChanged="onPageChanged"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+  import PSButton from '@app/widgets/ps-button';
+  import PSPagination from '@app/widgets/ps-pagination';
+  import PSAlert from '@app/widgets/ps-alert';
+  import {EventBus} from '@app/utils/event-bus';
+  import TranslationInput from './translation-input';
+
+  export default {
+    props: {
+      modal: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+    },
+    data: () => ({
+      originalTranslations: [],
+      modifiedTranslations: [],
+    }),
+    computed: {
+      principalReady() {
+        return !this.$store.state.principalLoading;
+      },
+      translationsCatalog() {
+        return this.$store.getters.catalog.data.data;
+      },
+      saveAction() {
+        return this.$store.getters.catalog.data.info ? this.$store.getters.catalog.data.info.edit_url : '';
+      },
+      resetAction() {
+        return this.$store.getters.catalog.data.info ? this.$store.getters.catalog.data.info.reset_url : '';
+      },
+      pagesCount() {
+        return this.$store.getters.totalPages;
+      },
+      currentPagination() {
+        return this.$store.getters.pageIndex;
+      },
+      currentDomain() {
+        return this.$store.state.currentDomain;
+      },
+      currentDomainTotalTranslations() {
+        /* eslint-disable max-len */
+        return (this.$store.state.currentDomainTotalTranslations <= 1)
+          ? `- ${this.trans('label_total_domain_singular').replace('%nb_translation%', this.$store.state.currentDomainTotalTranslations)}`
+          : `- ${this.trans('label_total_domain').replace('%nb_translations%', this.$store.state.currentDomainTotalTranslations)}`;
+        /* eslint-enable max-len */
+      },
+      currentDomainTotalMissingTranslations() {
+        return this.$store.state.currentDomainTotalMissingTranslations;
+      },
+      currentDomainTotalMissingTranslationsString() {
+        let totalMissingTranslationsString = '';
+
+        if (this.currentDomainTotalMissingTranslations) {
+          if (this.currentDomainTotalMissingTranslations === 1) {
+            totalMissingTranslationsString = this.trans('label_missing_singular');
+          } else {
+            totalMissingTranslationsString = this.trans('label_missing')
+              .replace('%d', this.currentDomainTotalMissingTranslations);
+          }
+        }
+
+        return totalMissingTranslationsString;
+      },
+      noResult() {
+        return (this.$store.getters.currentDomain === '' || typeof this.$store.getters.currentDomain === 'undefined');
+      },
+      noResultInfo() {
+        return this.trans('no_result').replace('%s', this.$store.getters.searchTags.join(' - '));
+      },
+      searchActive() {
+        return this.$store.getters.searchTags.length;
+      },
+      searchInfo() {
+        const transKey = (this.$store.state.totalTranslations <= 1) ? 'search_info_singular' : 'search_info';
+
+        return this.trans(transKey)
+          .replace('%s', this.$store.getters.searchTags.join(' - '))
+          .replace('%d', this.$store.state.totalTranslations);
+      },
+    },
+    methods: {
+      /**
+       * Dispatch the event to change the page index,
+       * get the translations and reset the modified translations into the state
+       * @param {Number} pageIndex
+       */
+      changePage: function changePage(pageIndex) {
+        this.$store.dispatch('updatePageIndex', pageIndex);
+        this.fetch();
+        this.$store.state.modifiedTranslations = [];
+      },
+      isEdited(input) {
+        if (input.translation.edited) {
+          this.$store.state.modifiedTranslations[input.id] = input.translation;
+        } else {
+          this.$store.state.modifiedTranslations.splice(
+            this.$store.state.modifiedTranslations.indexOf(input.id),
+            1,
+          );
+        }
+      },
+      onPageChanged(pageIndex) {
+        if (this.edited()) {
+          this.modal.showModal();
+          this.modal.$once('save', () => {
+            this.saveTranslations();
+            this.changePage(pageIndex);
+          });
+          this.modal.$once('leave', () => {
+            this.changePage(pageIndex);
+          });
+        } else {
+          this.changePage(pageIndex);
+        }
+      },
+      fetch() {
+        this.$store.dispatch('getCatalog', {
+          url: this.$store.getters.catalog.info.current_url_without_pagination,
+          page_size: this.$store.state.translationsPerPage,
+          page_index: this.$store.getters.pageIndex,
+        });
+      },
+      getDomain(domains) {
+        let domain = '';
+        domains.forEach((d) => {
+          domain += `${d} > `;
+        });
+        return domain.slice(0, -3);
+      },
+      saveTranslations() {
+        const modifiedTranslations = this.getModifiedTranslations();
+
+        if (modifiedTranslations.length) {
+          this.$store.dispatch('saveTranslations', {
+            url: this.saveAction,
+            translations: this.getModifiedTranslations(),
+            store: this.$store,
+          });
+        }
+      },
+      getModifiedTranslations() {
+        this.modifiedTranslations = [];
+        const targetTheme = (window.data.type === 'modules') ? '' : window.data.selected;
+
+        Object.values(this.$store.state.modifiedTranslations).forEach((translation) => {
+          this.modifiedTranslations.push({
+            default: translation.default,
+            edited: translation.edited,
+            domain: translation.tree_domain.join(''),
+            locale: window.data.locale,
+            theme: targetTheme,
+          });
+        });
+
+        return this.modifiedTranslations;
+      },
+      edited() {
+        return Object.keys(this.$store.state.modifiedTranslations).length > 0;
+      },
+    },
+    mounted() {
+      EventBus.$on('resetTranslation', (el) => {
+        const translations = [];
+
+        translations.push({
+          default: el.default,
+          domain: el.tree_domain.join(''),
+          locale: window.data.locale,
+          theme: window.data.selected,
+        });
+
+        this.$store.dispatch('resetTranslation', {
+          url: this.resetAction,
+          translations,
+        });
+      });
+    },
+    components: {
+      TranslationInput,
+      PSButton,
+      PSPagination,
+      PSAlert,
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~@scss/config/_settings.scss';
+
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .5s
+  }
+  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+    opacity: 0
+  }
+</style>

admin-kalsport/themes/new-theme/js/app/pages/translations/components/principal/translation-input.vue

@@ -0,0 +1,113 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div class="form-group">
+    <label>{{ label }}</label>
+    <textarea
+      class="form-control"
+      rows="2"
+      v-model="getTranslated"
+      :class="{ missing : isMissing }"
+    />
+    <PSButton
+      class="mt-3 float-sm-right"
+      :primary="false"
+      ghost
+      @click="resetTranslation"
+    >
+      {{ trans('button_reset') }}
+    </PSButton>
+    <small class="mt-3">{{ extraInfo }}</small>
+  </div>
+</template>
+
+<script>
+  import PSButton from '@app/widgets/ps-button';
+  import {EventBus} from '@app/utils/event-bus';
+
+  export default {
+    name: 'TranslationInput',
+    props: {
+      id: {
+        type: Number,
+        required: false,
+        default: 0,
+      },
+      extraInfo: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      label: {
+        type: String,
+        required: true,
+      },
+      translated: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      getTranslated: {
+        get() {
+          return this.translated.user ? this.translated.user : this.translated.project;
+        },
+        set(modifiedValue) {
+          const modifiedTranslated = this.translated;
+          modifiedTranslated.user = modifiedValue;
+          modifiedTranslated.edited = modifiedValue;
+          this.$emit('input', modifiedTranslated);
+          this.$emit('editedAction', {
+            translation: modifiedTranslated,
+            id: this.id,
+          });
+        },
+      },
+      isMissing() {
+        return this.getTranslated === null;
+      },
+    },
+    methods: {
+      resetTranslation() {
+        this.getTranslated = '';
+        EventBus.$emit('resetTranslation', this.translated);
+      },
+    },
+    components: {
+      PSButton,
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~@scss/config/_settings.scss';
+
+  .form-group {
+    overflow: hidden;
+  }
+  .missing {
+    border: 1px solid $danger;
+  }
+</style>

admin-kalsport/themes/new-theme/js/app/pages/translations/components/sidebar/index.vue

@@ -0,0 +1,231 @@
+<!--**
+ * 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-sm-3">
+    <div class="card p-3">
+      <PSTree
+        ref="domainTree"
+        :model="domainsTree"
+        class-name="translationTree"
+        :translations="translations"
+        :current-item="currentItem"
+        v-if="treeReady"
+      />
+      <PSSpinner v-else />
+    </div>
+  </div>
+</template>
+
+<script>
+  import PSTree from '@app/widgets/ps-tree/ps-tree';
+  import PSSpinner from '@app/widgets/ps-spinner';
+  import {EventBus} from '@app/utils/event-bus';
+
+  export default {
+    props: {
+      modal: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+      principal: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+    },
+    computed: {
+      treeReady() {
+        return !this.$store.state.sidebarLoading;
+      },
+      currentItem() {
+        if (this.$store.getters.currentDomain === '' || typeof this.$store.getters.currentDomain === 'undefined') {
+          if (this.domainsTree.length) {
+            const domain = this.getFirstDomainToDisplay(this.domainsTree);
+            EventBus.$emit('reduce');
+            this.$store.dispatch('updateCurrentDomain', domain);
+
+            if (domain !== '') {
+              this.$store.dispatch('getCatalog', {url: domain.dataValue});
+              EventBus.$emit('setCurrentElement', domain.full_name);
+              return domain.full_name;
+            }
+
+            this.$store.dispatch('updatePrincipalLoading', false);
+            return '';
+          }
+        }
+
+        return this.$store.getters.currentDomain;
+      },
+      domainsTree() {
+        return this.$store.getters.domainsTree;
+      },
+      translations() {
+        return {
+          expand: this.trans('sidebar_expand'),
+          reduce: this.trans('sidebar_collapse'),
+          extra: this.trans('label_missing'),
+          extra_singular: this.trans('label_missing_singular'),
+        };
+      },
+    },
+    mounted() {
+      this.$store.dispatch('getDomainsTree', {
+        store: this.$store,
+      });
+      EventBus.$on('lastTreeItemClick', (el) => {
+        if (this.edited()) {
+          this.modal.showModal();
+          this.modal.$once('save', () => {
+            this.principal.saveTranslations();
+            this.itemClick(el);
+          });
+          this.modal.$once('leave', () => {
+            this.itemClick(el);
+          });
+        } else {
+          this.itemClick(el);
+        }
+      });
+    },
+    methods: {
+      /**
+       * Update the domain, retrieve the translations catalog, set the page to 1
+       * and reset the modified translations
+       * @param {object} el - Domain to set
+       */
+      itemClick: function itemClick(el) {
+        this.$store.dispatch('updateCurrentDomain', el.item);
+        this.$store.dispatch('getCatalog', {url: el.item.dataValue});
+        this.$store.dispatch('updatePageIndex', 1);
+        this.$store.state.modifiedTranslations = [];
+      },
+      getFirstDomainToDisplay: function getFirstDomainToDisplay(tree) {
+        const keys = Object.keys(tree);
+        let toDisplay = '';
+
+        for (let i = 0; i < tree.length; i += 1) {
+          if (!tree[keys[i]].disable) {
+            if (tree[keys[i]].children && tree[keys[i]].children.length > 0) {
+              return getFirstDomainToDisplay(tree[keys[i]].children);
+            }
+
+            toDisplay = tree[keys[i]];
+            break;
+          }
+        }
+
+        return toDisplay;
+      },
+      /**
+       * Check if some translations have been edited
+       * @returns {boolean}
+       */
+      edited: function edited() {
+        return Object.keys(this.$store.state.modifiedTranslations).length > 0;
+      },
+    },
+    components: {
+      PSTree,
+      PSSpinner,
+    },
+  };
+</script>
+
+<style lang="scss" type="text/scss">
+  @import '~@scss/config/_settings.scss';
+
+  .translationTree {
+    .tree-name {
+      margin-bottom: .9375rem;
+
+      &.active {
+        font-weight: bold;
+      }
+
+      &.extra {
+        color: $danger;
+      }
+    }
+    .tree-extra-label {
+      color: $danger;
+      text-transform: uppercase;
+      font-size: .65rem;
+      margin-left: auto;
+    }
+    .tree-extra-label-mini {
+      background-color: $danger;
+      color: #ffffff;
+      padding: 0 0.5rem;
+      border-radius: 0.75rem;
+      display: inline-block;
+      font-size: .75rem;
+      height: 1.5rem;
+      margin-left: auto;
+    }
+    .tree-label {
+      &:hover {
+        color: $primary;
+      }
+    }
+  }
+  .ps-loader {
+    $loader-white-height: 20px;
+    $loader-line-height: 16px;
+    .animated-background {
+      height: 144px!important;
+      animation-duration: 2s!important;
+    }
+    .background-masker {
+      &.header-left {
+        left: 0;
+        top: $loader-line-height;
+        height: 108px;
+        width: 20px;
+      }
+      &.content-top {
+        left: 0;
+        top: $loader-line-height;
+        height: $loader-white-height;
+      }
+      &.content-first-end {
+        left: 0;
+        top: $loader-line-height*2+$loader-white-height;
+        height: $loader-white-height;
+      }
+      &.content-second-end {
+        left: 0;
+        top: $loader-line-height*3+$loader-white-height*2;
+        height: $loader-white-height;
+      }
+      &.content-third-end {
+        left: 0;
+        top: $loader-line-height*4+$loader-white-height*3;
+        height: $loader-white-height;
+      }
+    }
+  }
+</style>

admin-kalsport/themes/new-theme/js/app/pages/translations/index.js

@@ -0,0 +1,42 @@
+/**
+ * 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)
+ */
+import Vue from 'vue';
+import app from './components/app';
+import store from './store';
+import router from './router';
+import Translation from './mixins/translate';
+
+Vue.mixin(Translation);
+
+new Vue({
+  router,
+  store,
+  el: '#translations-app',
+  template: '<app />',
+  components: {app},
+  beforeMount() {
+    this.$store.dispatch('getTranslations');
+  },
+});

admin-kalsport/themes/new-theme/js/app/pages/translations/mixins/translate.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ */
+export default {
+  methods: {
+    trans(key) {
+      return this.$store.getters.translations[key];
+    },
+  },
+};

admin-kalsport/themes/new-theme/js/app/pages/translations/router/index.js

@@ -0,0 +1,41 @@
+/**
+ * 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)
+ */
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import Overview from '@app/pages/translations/components/app';
+
+Vue.use(VueRouter);
+
+export default new VueRouter({
+  mode: 'history',
+  base: `${window.data.baseUrl}/translations`,
+  routes: [
+    {
+      path: '/',
+      name: 'overview',
+      component: Overview,
+    },
+  ],
+});

admin-kalsport/themes/new-theme/js/app/pages/translations/store/actions.js

@@ -0,0 +1,172 @@
+/**
+ * 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)
+ */
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import * as types from '@app/pages/translations/store/mutation-types';
+import {showGrowl} from '@app/utils/growl';
+
+Vue.use(VueResource);
+
+export const getTranslations = ({commit}) => {
+  const url = window.data.translationUrl;
+  Vue.http.get(url).then(
+    (response) => {
+      commit(types.SET_TRANSLATIONS, response.body);
+      commit(types.APP_IS_READY);
+    },
+    (error) => {
+      showGrowl('error', error.bodyText ? JSON.parse(error.bodyText).error : error.statusText);
+    },
+  );
+};
+
+export const getCatalog = ({commit}, payload) => {
+  commit(types.PRINCIPAL_LOADING, true);
+  Vue.http
+    .get(payload.url, {
+      params: {
+        page_size: payload.page_size,
+        page_index: payload.page_index,
+      },
+    })
+    .then(
+      (response) => {
+        commit(types.SET_TOTAL_PAGES, response.headers.get('Total-Pages'));
+        commit(types.SET_CATALOG, response.body);
+        commit(types.PRINCIPAL_LOADING, false);
+      },
+      (error) => {
+        showGrowl('error', error.bodyText ? JSON.parse(error.bodyText).error : error.statusText);
+      },
+    );
+};
+
+export const getDomainsTree = ({commit}, payload) => {
+  const url = window.data.domainsTreeUrl;
+  const params = {};
+
+  commit(types.SIDEBAR_LOADING, true);
+  commit(types.PRINCIPAL_LOADING, true);
+
+  if (payload.store.getters.searchTags.length) {
+    params.search = payload.store.getters.searchTags;
+  }
+
+  Vue.http
+    .get(url, {
+      params,
+    })
+    .then(
+      (response) => {
+        commit(types.SET_DOMAINS_TREE, response.body);
+        commit(types.SIDEBAR_LOADING, false);
+        commit(types.RESET_CURRENT_DOMAIN);
+      },
+      (error) => {
+        showGrowl('error', error.bodyText ? JSON.parse(error.bodyText).error : error.statusText);
+      },
+    );
+};
+
+export const refreshCounts = ({commit}, payload) => {
+  const url = window.data.domainsTreeUrl;
+  const params = {};
+
+  if (payload.store.getters.searchTags.length) {
+    params.search = payload.store.getters.searchTags;
+  }
+
+  Vue.http
+    .get(url, {
+      params,
+    })
+    .then(
+      (response) => {
+        commit(types.DECREASE_CURRENT_DOMAIN_TOTAL_MISSING_TRANSLATIONS, payload.successfullySaved);
+        commit(types.SET_DOMAINS_TREE, response.body);
+      },
+      (error) => {
+        showGrowl('error', error.bodyText ? JSON.parse(error.bodyText).error : error.statusText);
+      },
+    );
+};
+
+export const saveTranslations = ({commit}, payload) => {
+  const {url} = payload;
+  const {translations} = payload;
+
+  Vue.http
+    .post(url, {
+      translations,
+    })
+    .then(
+      () => {
+        payload.store.dispatch('refreshCounts', {
+          successfullySaved: translations.length,
+          store: payload.store,
+        });
+        commit(types.RESET_MODIFIED_TRANSLATIONS);
+        return showGrowl('success', 'Translations successfully updated');
+      },
+      (error) => {
+        showGrowl('error', error.bodyText ? JSON.parse(error.bodyText).error : error.statusText);
+      },
+    );
+};
+
+/* eslint-disable-next-line no-unused-vars */
+export const resetTranslation = ({commit}, payload) => {
+  const {url} = payload;
+  const {translations} = payload;
+
+  Vue.http
+    .post(url, {
+      translations,
+    })
+    .then(
+      () => {
+        showGrowl('success', 'Translations successfully reset');
+      },
+      (error) => {
+        showGrowl('error', error.bodyText ? JSON.parse(error.bodyText).error : error.statusText);
+      },
+    );
+};
+
+export const updatePageIndex = ({commit}, pageIndex) => {
+  commit(types.SET_PAGE_INDEX, pageIndex);
+};
+
+export const updateCurrentDomain = ({commit}, currentDomain) => {
+  commit(types.SET_CURRENT_DOMAIN, currentDomain);
+};
+
+export const updatePrincipalLoading = ({commit}, principalLoading) => {
+  commit(types.PRINCIPAL_LOADING, principalLoading);
+};
+
+export const updateSearch = ({commit}, searchTags) => {
+  commit(types.SEARCH_TAGS, searchTags);
+};

admin-kalsport/themes/new-theme/js/app/pages/translations/store/index.js

@@ -0,0 +1,108 @@
+/**
+ * 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)
+ */
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+import * as actions from './actions';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+// root state object.
+
+const state = {
+  pageIndex: 1,
+  totalPages: 0,
+  translationsPerPage: 20,
+  currentDomain: '',
+  translations: {
+    data: {},
+    info: {},
+  },
+  catalog: {
+    data: {},
+    info: {},
+  },
+  domainsTree: [],
+  totalMissingTranslations: 0,
+  totalTranslations: 0,
+  currentDomainTotalTranslations: 0,
+  currentDomainTotalMissingTranslations: 0,
+  isReady: false,
+  sidebarLoading: true,
+  principalLoading: true,
+  searchTags: [],
+  modifiedTranslations: [],
+};
+
+// getters are functions
+const getters = {
+  totalPages(rootState) {
+    return rootState.totalPages;
+  },
+  pageIndex(rootState) {
+    return rootState.pageIndex;
+  },
+  currentDomain(rootState) {
+    return rootState.currentDomain;
+  },
+  translations(rootState) {
+    return rootState.translations;
+  },
+  catalog(rootState) {
+    return rootState.catalog;
+  },
+  domainsTree() {
+    function convert(domains) {
+      domains.forEach((domain) => {
+        domain.children = _.values(domain.children);
+        domain.extraLabel = domain.total_missing_translations;
+        domain.dataValue = domain.domain_catalog_link;
+        domain.warning = Boolean(domain.total_missing_translations);
+        domain.disable = !domain.total_translations;
+        domain.id = domain.full_name;
+        convert(domain.children);
+      });
+      return domains;
+    }
+
+    return convert(state.domainsTree);
+  },
+  isReady(rootState) {
+    return rootState.isReady;
+  },
+  searchTags(rootState) {
+    return rootState.searchTags;
+  },
+};
+
+// A Vuex instance is created by combining the state, mutations, actions,
+// and getters.
+export default new Vuex.Store({
+  state,
+  getters,
+  actions,
+  mutations,
+});

admin-kalsport/themes/new-theme/js/app/pages/translations/store/mutation-types.js

@@ -0,0 +1,37 @@
+/**
+ * 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)
+ */
+export const SET_TRANSLATIONS = 'SET_TRANSLATIONS';
+export const SET_CATALOG = 'SET_CATALOG';
+export const SET_DOMAINS_TREE = 'SET_DOMAINS_TREE';
+export const APP_IS_READY = 'APP_IS_READY';
+export const SET_TOTAL_PAGES = 'SET_TOTAL_PAGES';
+export const SET_PAGE_INDEX = 'SET_PAGE_INDEX';
+export const SET_CURRENT_DOMAIN = 'SET_CURRENT_DOMAIN';
+export const RESET_CURRENT_DOMAIN = 'RESET_CURRENT_DOMAIN';
+export const SIDEBAR_LOADING = 'SIDEBAR_LOADING';
+export const PRINCIPAL_LOADING = 'PRINCIPAL_LOADING';
+export const SEARCH_TAGS = 'SEARCH_TAGS';
+export const DECREASE_CURRENT_DOMAIN_TOTAL_MISSING_TRANSLATIONS = 'DECREASE_CURRENT_DOMAIN_TOTAL_MISSING_TRANSLATIONS';
+export const RESET_MODIFIED_TRANSLATIONS = 'RESET_MODIFIED_TRANSLATIONS';

admin-kalsport/themes/new-theme/js/app/pages/translations/store/mutations.js

@@ -0,0 +1,76 @@
+/**
+ * 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)
+ */
+
+import * as types from './mutation-types';
+
+export default {
+  [types.SET_TRANSLATIONS](state, translations) {
+    translations.data.forEach((t) => {
+      state.translations[t.translation_id] = t.name;
+    });
+  },
+  [types.SET_CATALOG](state, catalog) {
+    state.catalog = catalog;
+  },
+  [types.SET_DOMAINS_TREE](state, domainsTree) {
+    state.totalMissingTranslations = domainsTree.data.tree.total_missing_translations;
+    state.totalTranslations = domainsTree.data.tree.total_translations;
+    state.domainsTree = domainsTree.data.tree.children;
+  },
+  [types.APP_IS_READY](state) {
+    state.isReady = true;
+  },
+  [types.SET_TOTAL_PAGES](state, totalPages) {
+    state.totalPages = Number(totalPages);
+  },
+  [types.SET_PAGE_INDEX](state, pageIndex) {
+    state.pageIndex = pageIndex;
+  },
+  [types.SET_CURRENT_DOMAIN](state, currentDomain) {
+    state.currentDomain = currentDomain.full_name;
+    state.currentDomainTotalTranslations = currentDomain.total_translations;
+    state.currentDomainTotalMissingTranslations = currentDomain.total_missing_translations;
+  },
+  [types.RESET_CURRENT_DOMAIN](state) {
+    state.currentDomain = '';
+    state.currentDomainTotalTranslations = 0;
+    state.currentDomainTotalMissingTranslations = 0;
+  },
+  [types.SIDEBAR_LOADING](state, isLoading) {
+    state.sidebarLoading = isLoading;
+  },
+  [types.PRINCIPAL_LOADING](state, isLoading) {
+    state.principalLoading = isLoading;
+  },
+  [types.SEARCH_TAGS](state, searchTags) {
+    state.searchTags = searchTags;
+  },
+  [types.DECREASE_CURRENT_DOMAIN_TOTAL_MISSING_TRANSLATIONS](state, successfullySaved) {
+    state.currentDomainTotalMissingTranslations -= successfullySaved;
+  },
+  [types.RESET_MODIFIED_TRANSLATIONS](state) {
+    state.modifiedTranslations = [];
+  },
+};

admin-kalsport/themes/new-theme/js/app/store/index.js

@@ -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)
+ */
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+// root state object.
+
+const state = {
+
+};
+
+// getters are functions
+const getters = {
+
+};
+
+// A Vuex instance is created by combining the state, mutations, actions,
+// and getters.
+export default new Vuex.Store({
+  state,
+  getters,
+  modules: {
+
+  },
+});

admin-kalsport/themes/new-theme/js/app/utils/animations.js

@@ -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)
+ */
+
+/**
+ * Get the correct transition keyword of the browser.
+ * @param {string} type - The property name (transition for example).
+ * @param {string} lifecycle - Which lifecycle of the property name to catch (end, start...).
+ * @return {string} The transition keywoard of the browser.
+*/
+const getAnimationEvent = (type, lifecycle) => {
+  const el = document.createElement('element');
+  const typeUpper = type.charAt(0).toUpperCase() + type.substring(1);
+  const lifecycleUpper = lifecycle.charAt(0).toUpperCase() + lifecycle.substring(1);
+
+  const properties = {
+    transition: `${type}${lifecycle}`,
+    OTransition: `o${typeUpper}${lifecycleUpper}`,
+    MozTransition: `${type}${lifecycle}`,
+    WebkitTransition: `webkit${typeUpper}${lifecycleUpper}`,
+  };
+
+  const key = Object.keys(properties).find((propKey) => el.style[propKey] !== undefined);
+
+  return key !== undefined ? properties[key] : false;
+};
+
+export default getAnimationEvent;

admin-kalsport/themes/new-theme/js/app/utils/colorpicker.js

@@ -0,0 +1,38 @@
+/**
+ * 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)
+ */
+import 'bootstrap-colorpicker';
+
+const {$} = window;
+
+/**
+ * Enable all colorpickers.
+ */
+const init = function initDatePickers() {
+  $('.colorpicker input[type="text"]').each((i, picker) => {
+    $(picker).colorpicker();
+  });
+};
+
+export default init;

admin-kalsport/themes/new-theme/js/app/utils/datepicker.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ */
+import 'url-polyfill';
+
+const {$} = window;
+
+const replaceDatePicker = () => {
+  const datepickerWidget = $('body').find(
+    '.bootstrap-datetimepicker-widget:last',
+  );
+
+  if (datepickerWidget.length <= 0) {
+    return;
+  }
+
+  const position = datepickerWidget.offset();
+  const originalHeight = datepickerWidget.outerHeight();
+  const margin = (datepickerWidget.outerHeight(true) - originalHeight) / 2;
+
+  // Move datepicker to the exact same place it was but attached to body
+  datepickerWidget.appendTo('body');
+
+  // Height changed because the css from column-filters is not applied any more
+  let top = position.top + margin;
+
+  // Datepicker is settle to the top position
+  if (datepickerWidget.hasClass('top')) {
+    top += originalHeight - datepickerWidget.outerHeight(true) - margin;
+  }
+
+  datepickerWidget.css({
+    position: 'absolute',
+    top,
+    bottom: 'auto',
+    left: position.left,
+    right: 'auto',
+  });
+
+  $(window).on('resize', replaceDatePicker);
+};
+
+/**
+ * Enable all datepickers.
+ */
+const init = function initDatePickers() {
+  const $datePickers = $('.datepicker input[type="text"]');
+  $.each($datePickers, (i, picker) => {
+    $(picker)
+      .datetimepicker({
+        locale: window.full_language_code,
+        format: $(picker).data('format')
+          ? $(picker).data('format')
+          : 'YYYY-MM-DD',
+        sideBySide: true,
+        icons: {
+          time: 'time',
+          date: 'date',
+          up: 'up',
+          down: 'down',
+        },
+      })
+      .on('dp.show', replaceDatePicker)
+      .on('dp.hide', () => {
+        $(window).off('resize', replaceDatePicker);
+      })
+      .on('dp.change', (e) => {
+        // Looks like we can't bind an event to a datepicker selected afterwhile.
+        // So we emit an event on change to manipulate datas
+        const event = new CustomEvent('datepickerChange', e);
+        window.document.dispatchEvent(event);
+      });
+  });
+};
+
+export default init;

admin-kalsport/themes/new-theme/js/app/utils/email-idn.js

@@ -0,0 +1,43 @@
+/**
+ * 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)
+ */
+import punycode from 'punycode';
+
+const {$} = window;
+
+const init = function initEmailFields(selector) {
+  const $emailFields = $(selector);
+  $.each($emailFields, (i, field) => {
+    if (!field.checkValidity()) {
+      const parts = field.value.split('@');
+
+      // if local part is not ASCII only, chrome will not auto-convert the domain part to utf8
+      if (punycode.toASCII(parts[0]) === parts[0]) {
+        field.value = punycode.toASCII(field.value);
+      }
+    }
+  });
+};
+
+export default init;

admin-kalsport/themes/new-theme/js/app/utils/event-bus.js

@@ -0,0 +1,29 @@
+/**
+ * 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)
+ */
+import Vue from 'vue';
+
+export const EventBus = new Vue();
+
+export default EventBus;

admin-kalsport/themes/new-theme/js/app/utils/fields.js

@@ -0,0 +1,37 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * Enable all datepickers.
+ */
+const initInvalidFields = () => {
+  $('input,select,textarea').on('invalid', function scroll() {
+    this.scrollIntoView(false);
+  });
+};
+
+export default initInvalidFields;

admin-kalsport/themes/new-theme/js/app/utils/growl.js

@@ -0,0 +1,45 @@
+/**
+ * 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)
+ */
+export const showGrowl = (type, message, durationTime) => {
+  const duration = undefined !== durationTime ? durationTime : 2000;
+
+  if (type === 'success') {
+    window.$.growl({
+      title: '',
+      size: 'large',
+      message,
+      duration,
+    });
+  } else {
+    window.$.growl[type]({
+      title: '',
+      size: 'large',
+      message,
+      duration,
+    });
+  }
+};
+
+export default showGrowl;

admin-kalsport/themes/new-theme/js/app/utils/init-components.js

@@ -0,0 +1,142 @@
+/**
+ * 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)
+ */
+
+import TranslatableField from '@js/components/translatable-field.js';
+import TranslatableInput from '@js/components/translatable-input.js';
+import TinyMCEEditor from '@js/components/tinymce-editor.js';
+import TaggableField from '@js/components/taggable-field.js';
+import ChoiceTable from '@js/components/choice-table.js';
+import ChoiceTree from '@js/components/form/choice-tree.js';
+import MultipleChoiceTable from '@js/components/multiple-choice-table.js';
+import GeneratableInput from '@js/components/generatable-input.js';
+import CountryStateSelectionToggler from '@components/country-state-selection-toggler';
+import CountryDniRequiredToggler from '@components/country-dni-required-toggler';
+import TextWithLengthCounter from '@components/form/text-with-length-counter';
+import PreviewOpener from '@components/form/preview-opener';
+import MultistoreConfigField from '@js/components/form/multistore-config-field.js';
+import {EventEmitter} from '@components/event-emitter';
+import Grid from '@components/grid/grid';
+import Router from '@components/router';
+
+// Grid extensions
+import AsyncToggleColumnExtension from '@components/grid/extension/column/common/async-toggle-column-extension';
+import BulkActionCheckboxExtension from '@components/grid/extension/bulk-action-checkbox-extension';
+import BulkOpenTabsExtension from '@components/grid/extension/bulk-open-tabs-extension';
+import ChoiceExtension from '@components/grid/extension/choice-extension';
+import ColumnTogglingExtension from '@components/grid/extension/column-toggling-extension';
+import ExportToSqlManagerExtension from '@components/grid/extension/export-to-sql-manager-extension';
+import FiltersResetExtension from '@components/grid/extension/filters-reset-extension.js';
+import FiltersSubmitButtonEnablerExtension from '@components/grid/extension/filters-submit-button-enabler-extension';
+import LinkRowActionExtension from '@components/grid/extension/link-row-action-extension';
+import ModalFormSubmitExtension from '@components/grid/extension/modal-form-submit-extension';
+import PositionExtension from '@components/grid/extension/position-extension';
+import PreviewExtension from '@components/grid/extension/preview-extension';
+import ReloadListExtension from '@components/grid/extension/reload-list-extension';
+import SortingExtension from '@components/grid/extension/sorting-extension';
+import SubmitBulkActionExtension from '@components/grid/extension/submit-bulk-action-extension';
+import SubmitGridActionExtension from '@components/grid/extension/submit-grid-action-extension';
+import SubmitRowActionExtension from '@components/grid/extension/action/row/submit-row-action-extension';
+
+const GridExtensions = {
+  AsyncToggleColumnExtension,
+  BulkActionCheckboxExtension,
+  BulkOpenTabsExtension,
+  ChoiceExtension,
+  ColumnTogglingExtension,
+  ExportToSqlManagerExtension,
+  FiltersResetExtension,
+  FiltersSubmitButtonEnablerExtension,
+  LinkRowActionExtension,
+  ModalFormSubmitExtension,
+  PositionExtension,
+  PreviewExtension,
+  ReloadListExtension,
+  SortingExtension,
+  SubmitBulkActionExtension,
+  SubmitGridActionExtension,
+  SubmitRowActionExtension,
+};
+
+const initPrestashopComponents = () => {
+  window.prestashop = {...window.prestashop};
+
+  if (!window.prestashop.instance) {
+    window.prestashop.instance = {};
+  }
+
+  window.prestashop.component = {
+    initComponents(components) {
+      components.forEach((component) => {
+        if (window.prestashop.component[component] === undefined) {
+          console.error(`Failed to initialize PrestaShop component "${component}". This component doesn't exist.`);
+
+          return;
+        }
+
+        const componentInstanceName = component.charAt(0).toLowerCase() + component.slice(1);
+
+        if (window.prestashop.instance[componentInstanceName] !== undefined) {
+          console.warn(
+            `Failed to initialize PrestaShop component "${component}". This component is already initialized.`,
+          );
+
+          return;
+        }
+
+        // EventEmitter is a special case it has no constructor and could be used via
+        // window.prestashop.component.EventEmitter straight away
+        if (component === 'EventEmitter') {
+          window.prestashop.instance[componentInstanceName] = window.prestashop.component[component];
+
+          return;
+        }
+
+        window.prestashop.instance[componentInstanceName] = new window.prestashop.component[component]();
+      });
+
+      // Send an event so external users can initiate their own components
+      EventEmitter.emit('PSComponentsInitiated');
+    },
+    // @todo: add all standard components in this list
+    TranslatableField,
+    TinyMCEEditor,
+    TranslatableInput,
+    TaggableField,
+    ChoiceTable,
+    EventEmitter,
+    ChoiceTree,
+    MultipleChoiceTable,
+    GeneratableInput,
+    CountryStateSelectionToggler,
+    CountryDniRequiredToggler,
+    TextWithLengthCounter,
+    MultistoreConfigField,
+    PreviewOpener,
+    Grid,
+    GridExtensions,
+    Router,
+  };
+};
+export default initPrestashopComponents;

admin-kalsport/themes/new-theme/js/app/utils/number-comma-transformer.js

@@ -0,0 +1,77 @@
+/**
+ * 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)
+ */
+
+const findAllUnwantedCharsExceptTheLatestOne = /(?:(?!^-\d+))[^\d]+(?=.*[^\d])/g;
+const findAllUnwantedChars = /(?:(?!^-\d+))([^\d]+)/g;
+
+/**
+ * If there is a dot in the string
+ * split the string at the first dot, and
+ * replace all unwanted characters.
+ * Otherwise, replace all unwanted characters expect the
+ * latest one, and replace the latest character
+ * by a dot.
+ */
+export const transform = (value) => {
+  let val = value;
+  const unwantedChars = val.match(findAllUnwantedChars);
+
+  if (unwantedChars === null) {
+    return val;
+  }
+
+  if (unwantedChars.length > 1) {
+    const unique = [...new Set(unwantedChars)];
+
+    if (unique.length === 1) {
+      return val.replace(findAllUnwantedChars, '');
+    }
+  }
+
+  val = val
+    .replace(findAllUnwantedCharsExceptTheLatestOne, '')
+    .replace(findAllUnwantedChars, '.');
+
+  return val;
+};
+
+const clearNumberInputValue = (event, selector) => {
+  if (!event.target.matches(selector)) {
+    return;
+  }
+
+  const {value} = event.target;
+  event.target.value = transform(value);
+};
+
+export default (selector) => {
+  document.addEventListener(
+    'change',
+    (event) => {
+      clearNumberInputValue(event, selector);
+    },
+    true,
+  );
+};

admin-kalsport/themes/new-theme/js/app/utils/reset_search.js

@@ -0,0 +1,36 @@
+/**
+ * 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)
+ */
+
+/**
+ * Send a Post Request to reset search Action.
+ */
+
+const {$} = window;
+
+const init = function resetSearch(url, redirectUrl) {
+  $.post(url).then(() => window.location.assign(redirectUrl));
+};
+
+export default init;

admin-kalsport/themes/new-theme/js/app/utils/serp/index.js

@@ -0,0 +1,182 @@
+/**
+ * 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)
+ */
+import Vue from 'vue';
+import {EventEmitter} from '@components/event-emitter';
+import serp from './serp.vue';
+
+const {$} = window;
+
+/**
+ * Vue component displaying a search page result, Google style.
+ * Requires a tag with the id "#serp-app" to be present in the DOM to run it.
+ * The component is automatically updated by watching several inputs.
+ * Set the proper class to link a input to a part of the panel.
+ */
+class SerpApp {
+  constructor(selectors, url) {
+    // If the selector cannot be found, we do not load the Vue app
+    if ($(selectors.container).length === 0) {
+      return;
+    }
+
+    this.originalUrl = url;
+    this.useMultiLang = selectors.multiLanguageInput !== undefined || selectors.multiLanguageField !== undefined;
+
+    if (this.useMultiLang) {
+      const possibleSelectors = [];
+
+      if (selectors.multiLanguageInput) {
+        possibleSelectors.push(selectors.multiLanguageInput);
+      }
+      if (selectors.multiLanguageField) {
+        possibleSelectors.push(selectors.multiLanguageField);
+      }
+      this.multiLangSelector = possibleSelectors.join(',');
+      this.attachMultiLangEvents();
+    }
+
+    this.data = {
+      url,
+      title: '',
+      description: '',
+    };
+
+    this.vm = new Vue({
+      el: selectors.container,
+      template: '<serp ref="serp" :url="url" :title="title" :description="description" />',
+      components: {serp},
+      data: this.data,
+    });
+
+    this.initializeSelectors(selectors);
+    this.attachInputEvents();
+  }
+
+  attachMultiLangEvents(itemSelector) {
+    $('body').on(
+      'click',
+      itemSelector,
+      () => {
+        this.checkTitle();
+        this.checkDesc();
+        this.checkUrl();
+      },
+    );
+
+    EventEmitter.on('languageSelected', () => {
+      this.checkTitle();
+      this.checkDesc();
+      this.checkUrl();
+    });
+  }
+
+  initializeSelectors(selectors) {
+    this.defaultTitle = $(selectors.defaultTitle);
+    this.watchedTitle = $(selectors.watchedTitle);
+    this.defaultDescription = $(selectors.defaultDescription);
+    this.watchedDescription = $(selectors.watchedDescription);
+    this.watchedMetaUrl = $(selectors.watchedMetaUrl);
+  }
+
+  attachInputEvents() {
+    $(this.defaultTitle).on('keyup change', () => this.checkTitle());
+    $(this.watchedTitle).on('keyup change', () => this.checkTitle());
+    $(this.defaultDescription).on('keyup change', () => this.checkDesc());
+    $(this.watchedDescription).on('keyup change', () => this.checkDesc());
+    this.watchedMetaUrl.on('keyup change', () => this.checkUrl());
+
+    this.checkTitle();
+    this.checkDesc();
+    this.checkUrl();
+  }
+
+  setTitle(title) {
+    this.data.title = title;
+  }
+
+  setDescription(description) {
+    this.data.description = description;
+  }
+
+  setUrl(rewrite) {
+    // We replace two placeholders because there was a typo in the initial one ('friendy' instead of 'friendly')
+    this.data.url = this.originalUrl.replace(
+      '{friendy-url}',
+      rewrite,
+    );
+    this.data.url = this.data.url.replace(
+      '{friendly-url}',
+      rewrite,
+    );
+  }
+
+  checkTitle() {
+    let {defaultTitle} = this;
+    let {watchedTitle} = this;
+
+    if (this.useMultiLang) {
+      watchedTitle = watchedTitle.closest(this.multiLangSelector).find('input');
+      defaultTitle = defaultTitle.closest(this.multiLangSelector).find('input');
+    }
+
+    const title1 = watchedTitle.length ? watchedTitle.val() : '';
+    const title2 = defaultTitle.length ? defaultTitle.val() : '';
+
+    this.setTitle(title1 === '' ? title2 : title1);
+    // Always check for url if title change
+    this.checkUrl();
+  }
+
+  checkDesc() {
+    let {watchedDescription} = this;
+    let {defaultDescription} = this;
+
+    if (this.useMultiLang) {
+      watchedDescription = watchedDescription
+        .closest(this.multiLangSelector)
+        .find(this.watchedDescription.is('input') ? 'input' : 'textarea');
+      defaultDescription = defaultDescription
+        .closest(this.multiLangSelector)
+        .find(this.defaultDescription.is('input') ? 'input' : 'textarea');
+    }
+
+    const desc1 = watchedDescription.length ? watchedDescription.val().innerText || watchedDescription.val() : '';
+    const desc2 = defaultDescription.length ? $(defaultDescription.val()).text() || defaultDescription.val() : '';
+
+    this.setDescription(desc1 === '' ? desc2 : desc1);
+  }
+
+  checkUrl() {
+    let {watchedMetaUrl} = this;
+
+    if (this.useMultiLang) {
+      watchedMetaUrl = watchedMetaUrl.closest(this.multiLangSelector).find('input');
+    }
+
+    this.setUrl(watchedMetaUrl.val());
+  }
+}
+
+export default SerpApp;

admin-kalsport/themes/new-theme/js/app/utils/serp/serp.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>
+  <div id="serp">
+    <div class="serp-preview">
+      <div class="serp-title">
+        {{ displayedTitle }}
+      </div>
+      <div class="serp-url">
+        {{ url }}<span class="serp-arrow" />
+      </div>
+      <div class="serp-description">
+        {{ displayedDescription }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Serp',
+    props: {
+      url: {
+        type: String,
+        default: 'https://www.example.com/',
+      },
+      description: {
+        type: String,
+        default: '',
+      },
+      title: {
+        type: String,
+        default: '',
+      },
+    },
+    computed: {
+      displayedTitle() {
+        if (this.title.length > 70) {
+          return `${this.title.substring(0, 70)}...`;
+        }
+
+        return this.title;
+      },
+      displayedDescription() {
+        if (this.description.length > 150) {
+          return `${this.description.substring(0, 150)}...`;
+        }
+
+        return this.description;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" type="text/scss" scoped>
+    .serp-preview {
+        margin-top: 15px;
+        margin-bottom: 15px;
+        border-radius: 2px;
+        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.12);
+        background-color: #ffffff;
+        border: solid 1px #e7e7e7;
+        padding: 30px;
+        max-width: 700px;
+
+        .serp-arrow {
+            border-bottom-color: rgb(0, 102, 33);
+            border-bottom-style: solid;
+            border-bottom-width: 0px;
+            border-left-color: rgba(0, 0, 0, 0);
+            border-left-style: solid;
+            border-left-width: 4px;
+            border-right-color: rgba(0, 0, 0, 0);
+            border-right-style: solid;
+            border-right-width: 4px;
+            border-top-color: rgb(0, 102, 33);
+            border-top-style: solid;
+            border-top-width: 5px;
+            color: rgb(128, 128, 128);
+            cursor: default;
+            font-family: arial, sans-serif;
+            font-size: 11px;
+            font-weight: bold;
+            height: 0px;
+            position: absolute;
+            line-height: 27px;
+            margin-left: 3px;
+            margin-top: 6px;
+            text-align: center;
+            user-select: none;
+            visibility: visible;
+            white-space: nowrap;
+            width: 0px;
+        }
+
+        .serp-title {
+            color: #1A0DAB;
+            cursor: pointer;
+            font-family: arial, regular;
+            font-size: 18px;
+            font-weight: normal;
+            text-align: left;
+            text-decoration: none;
+            visibility: visible;
+            white-space: nowrap;
+        }
+
+        .serp-url {
+            color: #006621;
+            font-family: arial, regular;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: normal;
+            line-height: 24px;
+            text-align: left;
+            visibility: visible;
+        }
+
+        .serp-description {
+            color: #545454;
+            font-family: arial, regular;
+            font-size: 13px;
+            font-weight: normal;
+            text-align: left;
+            visibility: visible;
+            word-wrap: break-word;
+        }
+    }
+</style>

admin-kalsport/themes/new-theme/js/app/utils/sql-manager.js

@@ -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)
+ */
+
+const {$} = window;
+
+/**
+ * Allow to display the last SQL query in a modal and redirect to SQL Manager.
+ */
+class SqlManager {
+  showLastSqlQuery() {
+    $('#catalog_sql_query_modal_content textarea[name="sql"]').val($('tbody.sql-manager').data('query'));
+    $('#catalog_sql_query_modal .btn-sql-submit').click(() => {
+      $('#catalog_sql_query_modal_content').submit();
+    });
+    $('#catalog_sql_query_modal').modal('show');
+  }
+
+  sendLastSqlQuery(name) {
+    $('#catalog_sql_query_modal_content textarea[name="sql"]').val($('tbody.sql-manager').data('query'));
+    $('#catalog_sql_query_modal_content input[name="name"]').val(name);
+    $('#catalog_sql_query_modal_content').submit();
+  }
+
+  createSqlQueryName() {
+    let container = false;
+    let current = false;
+
+    if ($('.breadcrumb')) {
+      container = $('.breadcrumb li').eq(0).text().replace(/\s+/g, ' ')
+        .trim();
+      current = $('.breadcrumb li').eq(-1).text().replace(/\s+/g, ' ')
+        .trim();
+    }
+    let title = false;
+
+    if ($('h2.title')) {
+      title = $('h2.title').first().text().replace(/\s+/g, ' ')
+        .trim();
+    }
+
+    let name = false;
+
+    if (container && current && container !== current) {
+      name = `${container} > ${current}`;
+    } else if (container) {
+      name = container;
+    } else if (current) {
+      name = current;
+    }
+
+    if (title && title !== current && title !== container) {
+      if (name) {
+        name = `${name} > ${title}`;
+      } else {
+        name = title;
+      }
+    }
+
+    return name.trim();
+  }
+}
+
+export default SqlManager;

admin-kalsport/themes/new-theme/js/app/utils/table-sorting.js

@@ -0,0 +1,114 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * Makes a table sortable by columns.
+ * This forces a page reload with more query parameters.
+ */
+class TableSorting {
+  /**
+   * @param {jQuery} table
+   */
+  constructor(table) {
+    this.selector = '.ps-sortable-column';
+    this.columns = $(table).find(this.selector);
+  }
+
+  /**
+   * Attaches the listeners
+   */
+  attach() {
+    this.columns.on('click', (e) => {
+      const $column = $(e.delegateTarget);
+      this.sortByColumn($column, this.getToggledSortDirection($column));
+    });
+  }
+
+  /**
+   * Sort using a column name
+   * @param {string} columnName
+   * @param {string} direction "asc" or "desc"
+   */
+  sortBy(columnName, direction) {
+    const $column = this.columns.is(`[data-sort-col-name="${columnName}"]`);
+
+    if (!$column) {
+      throw new Error(`Cannot sort by "${columnName}": invalid column`);
+    }
+
+    this.sortByColumn($column, direction);
+  }
+
+  /**
+   * Sort using a column element
+   * @param {jQuery} column
+   * @param {string} direction "asc" or "desc"
+   * @private
+   */
+  sortByColumn(column, direction) {
+    window.location = this.getUrl(
+      column.data('sortColName'),
+      (direction === 'desc') ? 'desc' : 'asc',
+      column.data('sortPrefix'),
+    );
+  }
+
+  /**
+   * Returns the inverted direction to sort according to the column's current one
+   * @param {jQuery} column
+   * @return {string}
+   * @private
+   */
+  getToggledSortDirection(column) {
+    return column.data('sortDirection') === 'asc' ? 'desc' : 'asc';
+  }
+
+  /**
+   * Returns the url for the sorted table
+   * @param {string} colName
+   * @param {string} direction
+   * @param {string} prefix
+   * @return {string}
+   * @private
+   */
+  getUrl(colName, direction, prefix) {
+    const url = new URL(window.location.href);
+    const params = url.searchParams;
+
+    if (prefix) {
+      params.set(`${prefix}[orderBy]`, colName);
+      params.set(`${prefix}[sortOrder]`, direction);
+    } else {
+      params.set('orderBy', colName);
+      params.set('sortOrder', direction);
+    }
+
+    return url.toString();
+  }
+}
+
+export default TableSorting;

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

@@ -0,0 +1,88 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div
+    class="ps-alert alert"
+    :class="classObject"
+    role="alert"
+  >
+    <button
+      v-if="hasClose"
+      type="button"
+      class="close"
+      data-dismiss="alert"
+      aria-label="Close"
+      @click.stop="onClick"
+    >
+      <span class="material-icons">close</span>
+    </button>
+    <p class="alert-text">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script>
+  const ALERT_TYPE_INFO = 'ALERT_TYPE_INFO';
+  const ALERT_TYPE_WARNING = 'ALERT_TYPE_WARNING';
+  const ALERT_TYPE_DANGER = 'ALERT_TYPE_DANGER';
+  const ALERT_TYPE_SUCCESS = 'ALERT_TYPE_SUCCESS';
+
+  export default {
+    props: {
+      duration: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      alertType: {
+        type: String,
+        required: true,
+      },
+      hasClose: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    computed: {
+      classObject() {
+        return {
+          'alert-info': this.alertType === ALERT_TYPE_INFO,
+          'alert-warning': this.alertType === ALERT_TYPE_WARNING,
+          'alert-danger': this.alertType === ALERT_TYPE_DANGER,
+          'alert-success': this.alertType === ALERT_TYPE_SUCCESS,
+        };
+      },
+      isInfo() {
+        return this.alertType === ALERT_TYPE_INFO;
+      },
+    },
+    methods: {
+      onClick() {
+        this.$emit('closeAlert');
+      },
+    },
+  };
+</script>

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

@@ -0,0 +1,63 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <button
+    type="button"
+    class="btn"
+    :class="classObject"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+  export default {
+    props: {
+      primary: {type: Boolean},
+      ghost: {type: Boolean},
+    },
+    computed: {
+      classObject() {
+        if (this.ghost) {
+          return {
+            'btn-outline-primary': this.primary,
+            'btn-outline-secondary': !this.primary,
+          };
+        }
+
+        return {
+          'btn-primary': this.primary,
+          'btn-secondary': !this.primary,
+        };
+      },
+    },
+    methods: {
+      onClick() {
+        this.$emit('click');
+      },
+    },
+  };
+</script>

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

@@ -0,0 +1,71 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div class="md-checkbox">
+    <label>
+      <input
+        type="checkbox"
+        :id="id"
+        v-model="checked"
+        :class="{'indeterminate' : isIndeterminate }"
+      >
+      <i class="md-checkbox-control" />
+      <slot name="label" />
+    </label>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      id: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      model: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+      isIndeterminate: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    watch: {
+      checked(val) {
+        this.$emit('checked', {
+          checked: val,
+          item: this.model,
+        });
+      },
+    },
+    data: () => ({
+      checked: false,
+    }),
+  };
+</script>

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

@@ -0,0 +1,88 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div class="input-group date">
+    <input
+      ref="datepicker"
+      type="text"
+      class="form-control"
+    >
+    <div class="input-group-append">
+      <span class="input-group-text">
+        <i class="material-icons">event</i>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      locale: {
+        type: String,
+        required: true,
+        default: 'en',
+      },
+      type: {
+        type: String,
+        required: true,
+      },
+    },
+    mounted() {
+      $(this.$refs.datepicker).datetimepicker({
+        format: 'YYYY-MM-DD',
+        showClear: true,
+      }).on('dp.change', (infos) => {
+        infos.dateType = this.type;
+        this.$emit(
+          infos.date ? 'dpChange' : 'reset',
+          infos,
+        );
+      });
+    },
+  };
+</script>
+
+<style lang="scss">
+  @import '~@scss/config/_settings.scss';
+
+  .date {
+    a[data-action='clear']::before {
+      font-family: 'Material Icons';
+      content: "\E14C";
+      font-size: 20px;
+      position: absolute;
+      bottom: 15px;
+      left: 50%;
+      margin-left: -10px;
+      color: $gray-dark;
+      cursor:pointer;
+    }
+    .bootstrap-datetimepicker-widget tr td span:hover {
+      background-color: white;
+    }
+  }
+
+</style>

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

@@ -0,0 +1,66 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div class="ps-loader">
+    <div class="timeline-item">
+      <div class="animated-background">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@scss/config/_settings.scss';
+
+  .ps-loader {
+    width: 100%;
+    .animated-background {
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+      animation-name: loading;
+      animation-timing-function: linear;
+      background: $gray-soft;
+      background: linear-gradient(to right, $gray-soft 8%, #ccc 18%, $gray-soft 33%);
+      background-size: 100%;
+      height: 40px;
+      position: relative;
+    }
+
+    .background-masker {
+      background: white;
+      position: absolute;
+    }
+  }
+
+  @keyframes loading{
+    0%{
+      background-position: -500px 0
+    }
+    100%{
+      background-position: 500px 0
+    }
+  }
+</style>

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

@@ -0,0 +1,82 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div class="media">
+    <img
+      v-if="displayThumb"
+      :src="thumbnail"
+      class="thumbnail d-flex"
+    >
+    <div
+      v-else
+      class="no-img"
+    />
+    <div class="ml-2 desc media-body">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      thumbnail: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      displayThumb() {
+        return !!this.thumbnail;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~@scss/config/_settings.scss';
+
+  .product-title {
+    .has-combination & {
+      font-weight: 600;
+    }
+  }
+  .thumbnail, .no-img {
+    border: $gray-light 1px solid;
+    max-width: 47px;
+  }
+  .no-img {
+    background: white;
+    width: 47px;
+    height: 47px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .desc {
+    white-space: normal;
+  }
+  small {
+    color: $gray-medium;
+  }
+</style>

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

@@ -0,0 +1,127 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div
+    class="modal fade"
+    id="ps-modal"
+    tabindex="-1"
+    role="dialog"
+  >
+    <div
+      class="modal-dialog"
+      role="document"
+    >
+      <div class="modal-content">
+        <div class="modal-header">
+          <button
+            type="button"
+            class="close"
+            data-dismiss="modal"
+          >
+            <i class="material-icons">close</i>
+          </button>
+          <h4 class="modal-title">
+            {{ translations.modal_title }}
+          </h4>
+        </div>
+        <div class="modal-body">
+          {{ translations.modal_content }}
+        </div>
+        <div class="modal-footer">
+          <PSButton
+            @click="onSave"
+            class="btn-lg"
+            primary
+            data-dismiss="modal"
+          >
+            {{ translations.button_save }}
+          </PSButton>
+          <PSButton
+            @click="onLeave"
+            class="btn-lg"
+            ghost
+            data-dismiss="modal"
+          >
+            {{ translations.button_leave }}
+          </PSButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import PSButton from '@app/widgets/ps-button';
+  import {EventBus} from '@app/utils/event-bus';
+
+  export default {
+    props: {
+      translations: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+    },
+    mounted() {
+      EventBus.$on('showModal', () => {
+        this.showModal();
+      });
+      EventBus.$on('hideModal', () => {
+        this.hideModal();
+      });
+    },
+    methods: {
+      showModal() {
+        $(this.$el).modal('show');
+      },
+      hideModal() {
+        $(this.$el).modal('hide');
+      },
+      onSave() {
+        this.$emit('save');
+      },
+      onLeave() {
+        this.$emit('leave');
+      },
+    },
+    components: {
+      PSButton,
+    },
+  };
+
+</script>
+
+<style lang="scss" scoped>
+  @import '~@scss/config/_settings.scss';
+
+  .modal-header .close {
+    font-size: 1.2rem;
+    color: $gray-medium;
+    opacity: 1;
+  }
+  .modal-content {
+    border-radius: 0
+  }
+</style>

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

@@ -0,0 +1,97 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+
+<template>
+  <div
+    class="ps-number"
+    :class="{ 'hover-buttons': hoverButtons }"
+  >
+    <input
+      type="number"
+      class="form-control"
+      :class="{ danger }"
+      :value="value"
+      placeholder="0"
+      @keyup="onKeyup($event)"
+      @focus="focusIn"
+      @blur.native="focusOut($event)"
+    >
+    <div
+      class="ps-number-spinner d-flex"
+      v-if="buttons"
+    >
+      <span
+        class="ps-number-up"
+        @click="increment"
+      />
+      <span
+        class="ps-number-down"
+        @click="decrement"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: [Number, String],
+        default: 0,
+      },
+      danger: {
+        type: Boolean,
+        default: false,
+      },
+      buttons: {
+        type: Boolean,
+        default: false,
+      },
+      hoverButtons: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    methods: {
+      onKeyup($event) {
+        this.$emit('keyup', $event);
+      },
+      focusIn() {
+        this.$emit('focus');
+      },
+      focusOut($event) {
+        this.$emit('blur', $event);
+      },
+      increment() {
+        const value = parseInt(this.value === '' || isNaN(this.value) ? 0 : this.value, 10);
+        this.$emit('change', Number.isNaN(value) ? 0 : value + 1);
+      },
+      decrement() {
+        const value = parseInt(this.value, 10);
+        this.$emit('change', Number.isNaN(value) ? -1 : value - 1);
+      },
+    },
+  };
+</script>

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

@@ -0,0 +1,169 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <nav
+    class="mt-1 mx-auto"
+    v-if="displayPagination"
+  >
+    <ul
+      class="pagination"
+      :class="{'multi':isMultiPagination}"
+    >
+      <li
+        v-if="isMultiPagination"
+        class="page-item previous"
+      >
+        <a
+          v-show="activeLeftArrow"
+          class="float-left page-link"
+          @click="prev($event)"
+          href="#"
+        >
+          <span class="sr-only">Previous</span>
+        </a>
+      </li>
+      <li
+        class="page-item"
+        :class="{'active' : checkCurrentIndex(index)}"
+        v-for="index in pagesCount"
+        :key="index"
+      >
+        <a
+          v-if="showIndex(index)"
+          class="page-link"
+          :class="{
+            'pl-0' : showFirstDots(index),
+            'pr-0' : showLastDots(index)
+          }"
+          @click.prevent="changePage(index)"
+          href="#"
+        >
+          <span
+            v-if="isMultiPagination"
+            v-show="showFirstDots(index)"
+          >...</span>
+          {{ index }}
+          <span
+            v-if="isMultiPagination"
+            v-show="showLastDots(index)"
+          >...</span>
+        </a>
+      </li>
+      <li
+        v-if="isMultiPagination"
+        class="page-item next"
+      >
+        <a
+          v-show="activeRightArrow"
+          class="float-left page-link"
+          @click="next($event)"
+          href="#"
+        >
+          <span class="sr-only">Next</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+  export default {
+    props: {
+      pagesCount: {
+        type: Number,
+        required: true,
+      },
+      currentIndex: {
+        type: Number,
+        required: true,
+      },
+    },
+    computed: {
+      isMultiPagination() {
+        return this.pagesCount > this.multiPagesActivationLimit;
+      },
+      activeLeftArrow() {
+        return this.currentIndex !== 1;
+      },
+      activeRightArrow() {
+        return this.currentIndex !== this.pagesCount;
+      },
+      pagesToDisplay() {
+        return this.multiPagesToDisplay;
+      },
+      displayPagination() {
+        return this.pagesCount > 1;
+      },
+    },
+    methods: {
+      checkCurrentIndex(index) {
+        return this.currentIndex === index;
+      },
+      showIndex(index) {
+        const startPaginationIndex = index < this.currentIndex + this.multiPagesToDisplay;
+        const lastPaginationIndex = index > this.currentIndex - this.multiPagesToDisplay;
+        const indexToDisplay = startPaginationIndex && lastPaginationIndex;
+        const lastIndex = index === this.pagesCount;
+        const firstIndex = index === 1;
+
+        if (!this.isMultiPagination) {
+          return !this.isMultiPagination;
+        }
+        return indexToDisplay || firstIndex || lastIndex;
+      },
+      changePage(pageIndex) {
+        this.$emit('pageChanged', pageIndex);
+      },
+      showFirstDots(index) {
+        const pagesToDisplay = this.pagesCount - this.multiPagesToDisplay;
+
+        if (!this.isMultiPagination) {
+          return this.isMultiPagination;
+        }
+        return index === this.pagesCount && this.currentIndex <= pagesToDisplay;
+      },
+      showLastDots(index) {
+        if (!this.isMultiPagination) {
+          return this.isMultiPagination;
+        }
+        return index === 1 && this.currentIndex > this.multiPagesToDisplay;
+      },
+      prev() {
+        if (this.currentIndex > 1) {
+          this.changePage(this.currentIndex - 1);
+        }
+      },
+      next() {
+        if (this.currentIndex < this.pagesCount) {
+          this.changePage(this.currentIndex + 1);
+        }
+      },
+    },
+    data: () => ({
+      multiPagesToDisplay: 2,
+      multiPagesActivationLimit: 5,
+    }),
+  };
+</script>

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

@@ -0,0 +1,67 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+
+<template>
+  <div class="ps-radio">
+    <input
+      type="radio"
+      :id="id"
+      name="radio-group"
+      :checked="checked"
+      @change="onChange"
+    >
+    <label :for="id">{{ label }}</label>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+      label: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      checked: {
+        type: Boolean,
+        required: false,
+      },
+      value: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    methods: {
+      onChange() {
+        this.$emit('change', this.value);
+      },
+    },
+  };
+</script>

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

@@ -0,0 +1,98 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div class="ps-select">
+    <select
+      class="form-control"
+      v-model="selected"
+      @change="onChange"
+    >
+      <option
+        value="default"
+        selected
+      >
+        <slot />
+      </option>
+      <option
+        v-for="(item, index) in items"
+        :key="index"
+        :value="item[itemId]"
+      >
+        {{ item[itemName] }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      items: {
+        type: Array,
+        required: true,
+      },
+      itemId: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      itemName: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    methods: {
+      onChange() {
+        this.$emit('change', {
+          value: this.selected,
+          itemId: this.itemId,
+        });
+      },
+    },
+    data: () => ({selected: 'default'}),
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '~@scss/config/_settings.scss';
+
+  .ps-select {
+    position: relative;
+    select {
+      appearance: none;
+      border-radius: 0;
+    }
+    &::after {
+      content: "\E313";
+      font-family: 'Material Icons';
+      color: $gray-medium;
+      font-size: 20px;
+      position: absolute;
+      right: 5px;
+      top: 5px;
+    }
+  }
+</style>

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

@@ -0,0 +1,27 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div class="ps-spinner" />
+</template>

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

@@ -0,0 +1,72 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div
+    class="ps-sortable-column"
+    data-sort-col-name="id_product"
+    :data-sort-is-current="isCurrent"
+    :data-sort-direction="sortDirection"
+    @click="sortToggle"
+  >
+    <span role="columnheader"><slot /></span>
+    <span
+      role="button"
+      class="ps-sort"
+      aria-label="Tri"
+    />
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      // column name
+      order: {
+        type: String,
+        required: true,
+      },
+      // indicates the currently sorted column in the table
+      currentSort: {
+        type: String,
+        required: true,
+      },
+    },
+    methods: {
+      sortToggle() {
+        // toggle direction
+        this.sortDirection = (this.sortDirection === 'asc') ? 'desc' : 'asc';
+        this.$emit('sort', this.order, this.sortDirection);
+      },
+    },
+    data: () => ({
+      sortDirection: 'asc',
+    }),
+    computed: {
+      isCurrent() {
+        return this.currentSort === this.order;
+      },
+    },
+  };
+</script>

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

@@ -0,0 +1,31 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div class="table-responsive">
+    <table class="table">
+      <slot />
+    </table>
+  </div>
+</template>

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

@@ -0,0 +1,112 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div
+    class="tags-input search-input search d-flex flex-wrap"
+    :class="{ 'search-with-icon': hasIcon }"
+    @click="focus()"
+  >
+    <div class="tags-wrapper">
+      <span
+        v-for="(tag, index) in tags"
+        :key="index"
+        class="tag"
+      >{{ tag }}<i
+        class="material-icons"
+        @click="close(index)"
+      >close</i></span>
+    </div>
+    <input
+      ref="tags"
+      :placeholder="placeholderToDisplay"
+      type="text"
+      v-model="tag"
+      class="form-control input"
+      @keyup="onKeyUp"
+      @keydown.enter="add(tag)"
+      @keydown.delete.stop="remove()"
+      :size="inputSize"
+    >
+  </div>
+</template>
+
+<script>
+
+  export default {
+    props: {
+      tags: {
+        type: Array,
+        required: false,
+        default: () => ([]),
+      },
+      placeholder: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      hasIcon: {
+        type: Boolean,
+        required: false,
+      },
+    },
+    computed: {
+      inputSize() {
+        return !this.tags.length && this.placeholder ? this.placeholder.length : 0;
+      },
+      placeholderToDisplay() {
+        return this.tags.length ? '' : this.placeholder;
+      },
+    },
+    methods: {
+      onKeyUp() {
+        this.$emit('typing', this.$refs.tags.value);
+      },
+      add(tag) {
+        if (tag) {
+          this.tags.push(tag.trim());
+          this.tag = '';
+          this.focus();
+          this.$emit('tagChange', this.tag);
+        }
+      },
+      close(index) {
+        const tagName = this.tags[index];
+        this.tags.splice(index, 1);
+        this.$emit('tagChange', tagName);
+      },
+      remove() {
+        if (this.tags.length && !this.tag.length) {
+          const tagName = this.tags[this.tags.length - 1];
+          this.tags.pop();
+          this.$emit('tagChange', tagName);
+        }
+      },
+      focus() {
+        this.$refs.tags.focus();
+      },
+    },
+    data: () => ({tag: null}),
+  };
+</script>

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

@@ -0,0 +1,213 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div
+    class="ps-tree-items"
+    :class="{className}"
+  >
+    <div
+      class="d-flex tree-name"
+      :class="{active: active, disable: model.disable}"
+      @click="clickElement"
+    >
+      <button
+        class="btn btn-text"
+        :class="[{hidden: isHidden}, chevronStatus]"
+      >
+        <span
+          v-if="translations"
+          class="sr-only"
+        >{{ this.model.open ? translations.reduce : translations.expand }}</span>
+      </button>
+      <PSCheckbox
+        :ref="model.name"
+        :id="id"
+        :model="model"
+        @checked="onCheck"
+        v-if="hasCheckbox"
+      />
+      <span
+        class="tree-label"
+        :class="{warning: isWarning}"
+      >{{ model.name }}</span>
+      <span
+        class="tree-extra-label d-sm-none d-xl-inline-block"
+        v-if="displayExtraLabel"
+      >{{ getExtraLabel }}</span>
+      <span
+        class="tree-extra-label-mini d-xl-none"
+        v-if="displayExtraLabel"
+      >{{ this.model.extraLabel }}</span>
+    </div>
+    <ul
+      v-show="open"
+      v-if="isFolder"
+      class="tree"
+    >
+      <li
+        v-for="(element, index) in model.children"
+        :key="index"
+        class="tree-item"
+        :class="{disable: model.disable}"
+      >
+        <PSTreeItem
+          :ref="element.id"
+          :class="className"
+          :has-checkbox="hasCheckbox"
+          :model="element"
+          :label="element.name"
+          :translations="translations"
+          :current-item="currentItem"
+          @checked="onCheck"
+          @setCurrentElement="setCurrentElement"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import PSCheckbox from '@app/widgets/ps-checkbox';
+  import {EventBus} from '@app/utils/event-bus';
+
+  export default {
+    name: 'PSTreeItem',
+    props: {
+      model: {
+        type: Object,
+        required: true,
+      },
+      className: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      hasCheckbox: {
+        type: Boolean,
+        required: false,
+      },
+      translations: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+      currentItem: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    computed: {
+      id() {
+        return this.model.id;
+      },
+      isFolder() {
+        return this.model.children && this.model.children.length;
+      },
+      displayExtraLabel() {
+        return this.isFolder && this.model.extraLabel;
+      },
+      getExtraLabel() {
+        let extraLabel = '';
+
+        if (this.model.extraLabel && this.model.extraLabel === 1) {
+          extraLabel = this.translations.extra_singular;
+        } else if (this.model.extraLabel) {
+          extraLabel = this.translations.extra.replace('%d', this.model.extraLabel);
+        }
+
+        return extraLabel;
+      },
+      isHidden() {
+        return !this.isFolder;
+      },
+      chevronStatus() {
+        return this.open ? 'open' : 'closed';
+      },
+      isWarning() {
+        return !this.isFolder && this.model.warning;
+      },
+      active() {
+        return this.model.full_name === this.currentItem;
+      },
+    },
+    methods: {
+      setCurrentElement(el) {
+        if (this.$refs[el]) {
+          this.openTreeItemAction();
+          this.current = true;
+          this.parentElement(this.$parent);
+        } else {
+          this.current = false;
+        }
+      },
+      parentElement(parent) {
+        if (parent.clickElement) {
+          parent.clickElement();
+          this.parentElement(parent.$parent);
+        }
+      },
+      clickElement() {
+        return !this.model.disable ? this.openTreeItemAction() : false;
+      },
+      openTreeItemAction() {
+        this.setCurrentElement(this.model.full_name);
+        if (this.isFolder) {
+          this.open = !this.open;
+        } else {
+          EventBus.$emit('lastTreeItemClick', {
+            item: this.model,
+          });
+        }
+      },
+      onCheck(obj) {
+        this.$emit('checked', obj);
+      },
+    },
+    mounted() {
+      EventBus.$on('toggleCheckbox', (tag) => {
+        const checkbox = this.$refs[tag];
+
+        if (checkbox) {
+          checkbox.$data.checked = !checkbox.$data.checked;
+        }
+      }).$on('expand', () => {
+        this.open = true;
+      }).$on('reduce', () => {
+        this.open = false;
+      }).$on('setCurrentElement', (el) => {
+        this.setCurrentElement(el);
+      });
+      this.setCurrentElement(this.currentItem);
+    },
+    components: {
+      PSCheckbox,
+    },
+    data: () => ({
+      open: false,
+      current: false,
+    }),
+  };
+</script>

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

@@ -0,0 +1,113 @@
+<!--**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ *-->
+<template>
+  <div class="ps-tree">
+    <div class="mb-3 tree-header">
+      <button
+        class="btn btn-text text-uppercase pointer"
+        @click="expand"
+      >
+        <i class="material-icons">keyboard_arrow_down</i>
+        <span v-if="translations">{{ translations.expand }}</span>
+      </button>
+      <button
+        class="btn btn-text float-right text-uppercase pointer"
+        @click="reduce"
+      >
+        <i class="material-icons">keyboard_arrow_up</i>
+        <span v-if="translations">{{ translations.reduce }}</span>
+      </button>
+    </div>
+    <ul
+      class="tree"
+      :class="className"
+    >
+      <li
+        v-for="(element, index) in model"
+        :key="index"
+      >
+        <PSTreeItem
+          ref="item"
+          :has-checkbox="hasCheckbox"
+          :model="element"
+          :label="element.name"
+          :translations="translations"
+          :current-item="currentItem"
+          @checked="onCheck"
+          @setCurrentElement="setCurrentElement"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import {EventBus} from '@app/utils/event-bus';
+  import PSTreeItem from './ps-tree-item';
+
+  export default {
+    name: 'PSTree',
+    props: {
+      model: {
+        type: Array,
+        default: () => ([]),
+      },
+      className: {
+        type: String,
+        default: '',
+      },
+      currentItem: {
+        type: String,
+        default: '',
+      },
+      hasCheckbox: {
+        type: Boolean,
+        default: false,
+      },
+      translations: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+    },
+    methods: {
+      onCheck(obj) {
+        this.$emit('checked', obj);
+      },
+      expand() {
+        EventBus.$emit('expand');
+      },
+      reduce() {
+        EventBus.$emit('reduce');
+      },
+      setCurrentElement(id) {
+        EventBus.$emit('setCurrentElement', id);
+      },
+    },
+    components: {
+      PSTreeItem,
+    },
+  };
+</script>

admin-kalsport/themes/new-theme/js/clickable-dropdown.js

@@ -0,0 +1,44 @@
+/**
+ * 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)
+ */
+
+/**
+ * By default, bootstrap dropdowns close down when the user clicks anywhere.
+ * This plugin allows clicking inside the dropdown menu while keeping it open.
+ * In order to make a dropdown behave like this, simply add the class "dropdown-clickable" to its parent element.
+ */
+(($) => {
+  $.fn.clickableDropdown = function clickableDropdown() {
+    $(document).on('click', '.dropdown-clickable .dropdown-menu', (e) => {
+      e.stopPropagation();
+    });
+
+    return this;
+  };
+
+  // hook up the plugin
+  $(() => {
+    $(document).clickableDropdown();
+  });
+})(window.$);

admin-kalsport/themes/new-theme/js/components/addons-connector.js

@@ -0,0 +1,102 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * Responsible for connecting to addons marketplace.
+ * Makes an addons connect request to the server, displays error messages if it fails.
+ */
+export default class AddonsConnector {
+  constructor(
+    addonsConnectFormSelector,
+    loadingSpinnerSelector,
+  ) {
+    this.addonsConnectFormSelector = addonsConnectFormSelector;
+    this.$loadingSpinner = $(loadingSpinnerSelector);
+
+    this.initEvents();
+
+    return {};
+  }
+
+  /**
+   * Initialize events related to connection to addons.
+   *
+   * @private
+   */
+  initEvents() {
+    $('body').on(
+      'submit',
+      this.addonsConnectFormSelector,
+      (event) => {
+        const $form = $(event.currentTarget);
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.connect($form.attr('action'), $form.serialize());
+      },
+    );
+  }
+
+  /**
+   * Do a POST request to connect to addons.
+   *
+   * @param {String} addonsConnectUrl
+   * @param {Object} formData
+   *
+   * @private
+   */
+  connect(addonsConnectUrl, formData) {
+    $.ajax({
+      method: 'POST',
+      url: addonsConnectUrl,
+      dataType: 'json',
+      data: formData,
+      beforeSend: () => {
+        this.$loadingSpinner.show();
+        $('button.btn[type="submit"]', this.addonsConnectFormSelector).hide();
+      },
+    }).then((response) => {
+      if (response.success === 1) {
+        window.location.reload();
+      } else {
+        $.growl.error({
+          message: response.message,
+        });
+
+        this.$loadingSpinner.hide();
+        $('button.btn[type="submit"]', this.addonsConnectFormSelector).fadeIn();
+      }
+    }, () => {
+      $.growl.error({
+        message: $(this.addonsConnectFormSelector).data('error-message'),
+      });
+
+      this.$loadingSpinner.hide();
+      $('button.btn[type="submit"]', this.addonsConnectFormSelector).show();
+    });
+  }
+}

admin-kalsport/themes/new-theme/js/components/auto-complete-search.js

@@ -0,0 +1,105 @@
+/**
+ * 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)
+ */
+
+/**
+ * This component is an overlay of typeahead it allows to have a single config input (since
+ * typeahead weirdly uses two different configs). It also provides some default rendering
+ * functions which are, of course, overridable.
+ */
+export default class AutoCompleteSearch {
+  constructor($searchInput, config) {
+    this.$searchInput = $searchInput;
+    this.searchInputId = this.$searchInput.prop('id');
+
+    const inputConfig = config || {};
+    // Merge default and input config
+    this.config = {
+      minLength: 2,
+      highlight: true,
+      cache: false,
+      hint: false,
+      ...inputConfig,
+    };
+
+    // Merge default and input dataSetConfig
+    this.dataSetConfig = {
+      display: 'name', // Which field of the object from the list is used for display (can be a string or a callback)
+      value: 'id', // Which field of the object from the list is used for value (can be a string or a callback)
+      limit: 20, // Limit the number of displayed suggestion
+      dataLimit: 0, // How many elements can be selected max
+      /* eslint-disable-next-line no-unused-vars */
+      onSelect(selectedItem, event) {
+        return true;
+      },
+      /* eslint-disable-next-line no-unused-vars */
+      onClose(event) {
+      },
+      ...inputConfig,
+    };
+
+    // Merging object works fine on one level, but on two it erases sub elements even if not present, so
+    // we handle templates separately, these are the default rendering functions which can be overridden
+    const defaultTemplates = {
+      // Be careful that your rendering function must return HTML node not pure text so always include the
+      // content in a div at least
+      suggestion: (item) => {
+        let displaySuggestion = item;
+
+        if (typeof this.dataSetConfig.display === 'function') {
+          this.dataSetConfig.display(item);
+        } else if (Object.prototype.hasOwnProperty.call(item, this.dataSetConfig.display)) {
+          displaySuggestion = item[this.dataSetConfig.display];
+        }
+
+        return `<div class="px-2">${displaySuggestion}</div>`;
+      },
+      pending(query) {
+        return `<div class="px-2">Searching for "${query.query}"</div>`;
+      },
+      notFound(query) {
+        return `<div class="px-2">No results found for "${query.query}"</div>`;
+      },
+    };
+
+    if (Object.prototype.hasOwnProperty.call(inputConfig, 'templates')) {
+      this.dataSetConfig.templates = {...defaultTemplates, ...inputConfig.templates};
+    } else {
+      this.dataSetConfig.templates = defaultTemplates;
+    }
+
+    this.buildTypeahead();
+  }
+
+  /**
+   * Build the typeahead component based on provided configuration.
+   */
+  buildTypeahead() {
+    this.$searchInput.typeahead(this.config, this.dataSetConfig)
+      .bind('typeahead:select', (e, selectedItem) => this.config.onSelect(selectedItem, e, this.$searchInput))
+      .bind('typeahead:close', (e) => {
+        this.config.onClose(e, this.$searchInput);
+      });
+  }
+}

admin-kalsport/themes/new-theme/js/components/bloodhound/tokenizers.js

@@ -0,0 +1,76 @@
+/**
+ * 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)
+ */
+
+import _ from 'lodash';
+import Bloodhound from 'typeahead.js';
+
+/**
+ * This comes from Bloodhound it allows to create tokenizer based on multiple fields from an object.
+ *
+ * @param tokenizer
+ * @returns {function(*=, ...[*]=): function(*): *[]}
+ */
+function getObjTokenizer(tokenizer) {
+  return function setKey(keys, ...args) {
+    const tokenizerKeys = _.isArray(keys) ? keys : [].slice.call(args, 0);
+
+    return function tokenize(val) {
+      let tokens = [];
+      tokenizerKeys.forEach((key) => {
+        tokens = tokens.concat(tokenizer(_.toString(val[key])));
+      });
+
+      return tokens;
+    };
+  };
+}
+
+/**
+ * Split the word into multiple tokens ok different sizes, thus allowing to search into parts of the words,
+ * the min length of a token is two letters though (maybe it could be configurable in the future)
+ *
+ * @param {string} val
+ *
+ * @return {array}
+ */
+export const letters = (val) => {
+  const tokens = Bloodhound.tokenizers.nonword(val);
+  tokens.forEach((token) => {
+    let i = 0;
+    while (i + 1 < token.length) {
+      tokens.push(token.substr(i, token.length));
+      i += 1;
+    }
+  });
+
+  return tokens;
+};
+
+export default {
+  letters,
+  obj: {
+    letters: getObjTokenizer(letters),
+  },
+};

admin-kalsport/themes/new-theme/js/components/change-password-handler.js

@@ -0,0 +1,131 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * Generates a password and informs about it's strength.
+ * You can pass a password input to watch the password strength and display feedback messages.
+ * You can also generate a random password into an input.
+ */
+export default class ChangePasswordHandler {
+  constructor(passwordStrengthFeedbackContainerSelector, options = {}) {
+    // Minimum length of the generated password.
+    this.minLength = options.minLength || 8;
+
+    // Feedback container holds messages representing password strength.
+    this.$feedbackContainer = $(passwordStrengthFeedbackContainerSelector);
+
+    return {
+      watchPasswordStrength: ($input) => this.watchPasswordStrength($input),
+      generatePassword: ($input) => this.generatePassword($input),
+    };
+  }
+
+  /**
+   * Watch password, which is entered in the input, strength and inform about it.
+   *
+   * @param {jQuery} $input the input to watch.
+   */
+  watchPasswordStrength($input) {
+    $.passy.requirements.length.min = this.minLength;
+    $.passy.requirements.characters = 'DIGIT';
+
+    $input.each((index, element) => {
+      const $outputContainer = $('<span>');
+
+      $outputContainer.insertAfter($(element));
+
+      $(element).passy((strength, valid) => {
+        this.displayFeedback($outputContainer, strength, valid);
+      });
+    });
+  }
+
+  /**
+   * Generates a password and fills it to given input.
+   *
+   * @param {jQuery} $input the input to fill the password into.
+   */
+  generatePassword($input) {
+    $input.passy('generate', this.minLength);
+  }
+
+  /**
+   * Display feedback about password's strength.
+   *
+   * @param {jQuery} $outputContainer a container to put feedback output into.
+   * @param {number} passwordStrength
+   * @param {boolean} isPasswordValid
+   *
+   * @private
+   */
+  displayFeedback($outputContainer, passwordStrength, isPasswordValid) {
+    const feedback = this.getPasswordStrengthFeedback(passwordStrength);
+    $outputContainer.text(feedback.message);
+    $outputContainer.removeClass('text-danger text-warning text-success');
+    $outputContainer.addClass(feedback.elementClass);
+    $outputContainer.toggleClass('d-none', !isPasswordValid);
+  }
+
+  /**
+   * Get feedback that describes given password strength.
+   * Response contains text message and element class.
+   *
+   * @param {number} strength
+   *
+   * @private
+   */
+  getPasswordStrengthFeedback(strength) {
+    switch (strength) {
+      case $.passy.strength.LOW:
+        return {
+          message: this.$feedbackContainer.find('.strength-low').text(),
+          elementClass: 'text-danger',
+        };
+
+      case $.passy.strength.MEDIUM:
+        return {
+          message: this.$feedbackContainer.find('.strength-medium').text(),
+          elementClass: 'text-warning',
+        };
+
+      case $.passy.strength.HIGH:
+        return {
+          message: this.$feedbackContainer.find('.strength-high').text(),
+          elementClass: 'text-success',
+        };
+
+      case $.passy.strength.EXTREME:
+        return {
+          message: this.$feedbackContainer.find('.strength-extreme').text(),
+          elementClass: 'text-success',
+        };
+
+      default:
+        throw new Error('Invalid password strength indicator.');
+    }
+  }
+}

admin-kalsport/themes/new-theme/js/components/choice-table.js

@@ -0,0 +1,52 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * ChoiceTable is responsible for managing common actions in choice table form type
+ */
+export default class ChoiceTable {
+  /**
+   * Init constructor
+   */
+  constructor() {
+    $(document).on('change', '.js-choice-table-select-all', (e) => {
+      this.handleSelectAll(e);
+    });
+  }
+
+  /**
+   * Check/uncheck all boxes in table
+   *
+   * @param {Event} event
+   */
+  handleSelectAll(event) {
+    const $selectAllCheckboxes = $(event.target);
+    const isSelectAllChecked = $selectAllCheckboxes.is(':checked');
+
+    $selectAllCheckboxes.closest('table').find('tbody input:checkbox').prop('checked', isSelectAllChecked);
+  }
+}

admin-kalsport/themes/new-theme/js/components/components-map.js

@@ -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)
+ */
+
+export default {
+  multistoreDropdown: {
+    searchInput: '.js-multistore-dropdown-search',
+    scrollbar: '.js-multistore-scrollbar',
+  },
+  multistoreHeader: {
+    modal: '.js-multishop-modal',
+    headerButton: '.js-header-multishop-open-modal',
+    searchInput: '.js-multishop-modal-search',
+    jsScrollbar: '.js-multishop-scrollbar',
+    setContextUrl: (location, urlLetter, itemId) => {
+      const setContextParameter = `setShopContext=${urlLetter}-${itemId}`;
+      const url = new URL(location);
+
+      if (url.search === '') {
+        url.search = `?${setContextParameter}`;
+      } else {
+        url.search += `&${setContextParameter}`;
+      }
+
+      return url.toString();
+    },
+  },
+};

admin-kalsport/themes/new-theme/js/components/country-dni-required-toggler.js

@@ -0,0 +1,77 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * Toggle DNI input requirement on country selection
+ *
+ * Usage:
+ *
+ * <!-- Country select options must have need_dni attribute when needed -->
+ * <select name="id_country" id="id_country" states-url="path/to/states/api">
+ *   ...
+ *   <option value="6" need_dni="1">Spain</value>
+ *   ...
+ * </select>
+ *
+ * In JS:
+ *
+ * new CountryDniRequiredToggler('#id_country', '#id_country_dni', 'label[for="id_country_dni"]');
+ */
+export default class CountryDniRequiredToggler {
+  constructor(countryInputSelector, countryDniInput, countryDniInputLabel) {
+    this.$countryDniInput = $(countryDniInput);
+    this.$countryDniInputLabel = $(countryDniInputLabel);
+    this.$countryInput = $(countryInputSelector);
+    this.countryInputSelectedSelector = `${countryInputSelector}>option:selected`;
+    this.countryDniInputLabelDangerSelector = `${countryDniInputLabel}>span.text-danger`;
+
+    // If field is required regardless of the country
+    // keep it required
+    if (this.$countryDniInput.attr('required')) {
+      return;
+    }
+
+    this.$countryInput.on('change', () => this.toggle());
+
+    // toggle on page load
+    this.toggle();
+  }
+
+  /**
+   * Toggles DNI input required
+   *
+   * @private
+   */
+  toggle() {
+    $(this.countryDniInputLabelDangerSelector).remove();
+    this.$countryDniInput.prop('required', false);
+    if (parseInt($(this.countryInputSelectedSelector).attr('need_dni'), 10) === 1) {
+      this.$countryDniInput.prop('required', true);
+      this.$countryDniInputLabel.prepend($('<span class="text-danger">*</span>'));
+    }
+  }
+}

admin-kalsport/themes/new-theme/js/components/country-postcode-required-toggler.js

@@ -0,0 +1,77 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * Toggle Postcode input requirement on country selection
+ *
+ * Usage:
+ *
+ * <!-- Country select options must have need_postcode attribute when needed -->
+ * <select name="id_country" id="id_country" states-url="path/to/states/api">
+ *   ...
+ *   <option value="6" need_postcode="1">Spain</value>
+ *   ...
+ * </select>
+ *
+ * In JS:
+ *
+ * new CountryPostcodeRequiredToggler('#id_country', '#id_country_postcode', 'label[for="id_country_postcode"]');
+ */
+export default class CountryPostcodeRequiredToggler {
+  constructor(countryInputSelector, countryPostcodeInput, countryPostcodeInputLabel) {
+    this.$countryPostcodeInput = $(countryPostcodeInput);
+    this.$countryPostcodeInputLabel = $(countryPostcodeInputLabel);
+    this.$countryInput = $(countryInputSelector);
+    this.countryInputSelectedSelector = `${countryInputSelector}>option:selected`;
+    this.countryPostcodeInputLabelDangerSelector = `${countryPostcodeInputLabel}>span.text-danger`;
+
+    // If field is required regardless of the country
+    // keep it required
+    if (this.$countryPostcodeInput.attr('required')) {
+      return;
+    }
+
+    this.$countryInput.on('change', () => this.toggle());
+
+    // toggle on page load
+    this.toggle();
+  }
+
+  /**
+   * Toggles Postcode input required
+   *
+   * @private
+   */
+  toggle() {
+    $(this.countryPostcodeInputLabelDangerSelector).remove();
+    this.$countryPostcodeInput.prop('required', false);
+    if (parseInt($(this.countryInputSelectedSelector).attr('need_postcode'), 10) === 1) {
+      this.$countryPostcodeInput.prop('required', true);
+      this.$countryPostcodeInputLabel.prepend($('<span class="text-danger">*</span>'));
+    }
+  }
+}

admin-kalsport/themes/new-theme/js/components/country-state-selection-toggler.js

@@ -0,0 +1,101 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * Displays, fills or hides State selection block depending on selected country.
+ *
+ * Usage:
+ *
+ * <!-- Country select must have unique identifier & url for states API -->
+ * <select name="id_country" id="id_country" states-url="path/to/states/api">
+ *   ...
+ * </select>
+ *
+ * <!-- If selected country does not have states, then this block will be hidden -->
+ * <div class="js-state-selection-block">
+ *   <select name="id_state">
+ *     ...
+ *   </select>
+ * </div>
+ *
+ * In JS:
+ *
+ * new CountryStateSelectionToggler('#id_country', '#id_state', '.js-state-selection-block');
+ */
+export default class CountryStateSelectionToggler {
+  constructor(countryInputSelector, countryStateSelector, stateSelectionBlockSelector) {
+    this.$stateSelectionBlock = $(stateSelectionBlockSelector);
+    this.$countryStateSelector = $(countryStateSelector);
+    this.$countryInput = $(countryInputSelector);
+
+    this.$countryInput.on('change', () => this.change());
+
+    return {};
+  }
+
+  /**
+   * Change State selection
+   *
+   * @private
+   */
+  change() {
+    const countryId = this.$countryInput.val();
+
+    if (countryId === '') {
+      return;
+    }
+    $.get({
+      url: this.$countryInput.data('states-url'),
+      dataType: 'json',
+      data: {
+        id_country: countryId,
+      },
+    })
+      .then((response) => {
+        this.$countryStateSelector.empty();
+
+        Object.keys(response.states).forEach((value) => {
+          this.$countryStateSelector.append(
+            $('<option></option>')
+              .attr('value', response.states[value])
+              .text(value),
+          );
+        });
+
+        this.toggle();
+      })
+      .catch((response) => {
+        if (typeof response.responseJSON !== 'undefined') {
+          window.showErrorMessage(response.responseJSON.message);
+        }
+      });
+  }
+
+  toggle() {
+    this.$stateSelectionBlock.toggleClass('d-none', !this.$countryStateSelector.find('option').length > 0);
+  }
+}

admin-kalsport/themes/new-theme/js/components/entity-search-input.js

@@ -0,0 +1,259 @@
+/**
+ * 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)
+ */
+
+import AutoCompleteSearch from '@components/auto-complete-search';
+import Bloodhound from 'typeahead.js';
+
+/**
+ * This component is used to search and select an entity, it is uses the AutoSearchComplete
+ * component which displays a list of suggestion based on an API returned response. Then when
+ * an element is selected it is added to the selection container and hidden inputs are created to
+ * send an array of entity IDs in the form request.
+ *
+ * This component is used with TypeaheadType forms, and is tightly linked to the content of this
+ * twig file src/PrestaShopBundle/Resources/views/Admin/TwigTemplateForm/typeahead.html.twig
+ *
+ * @todo: the component relies on this TypeaheadType because it was the historical type but it would be worth
+ * creating a new clean form type with better templating (the tplcollection brings nearly no value as is)
+ */
+export default class EntitySearchInput {
+  constructor($entitySearchInput, options) {
+    this.$entitySearchInput = $entitySearchInput;
+    this.entitySearchInputId = this.$entitySearchInput.prop('id');
+    this.$autoCompleteSearchContainer = this.$entitySearchInput.closest('.autocomplete-search');
+    this.$selectionContainer = $(`#${this.entitySearchInputId}-data`);
+    this.searchInputFullName = this.$autoCompleteSearchContainer.data('fullname');
+
+    const inputOptions = options || {};
+    this.options = {
+      value: 'id',
+      dataLimit: 1,
+      ...inputOptions,
+    };
+    this.buildRemoteSource();
+    this.buildAutoCompleteSearch();
+  }
+
+  /**
+   * Change the remote url of the endpoint that returns suggestions.
+   *
+   * @param remoteUrl {string}
+   */
+  setRemoteUrl(remoteUrl) {
+    this.entityRemoteSource.remote.url = remoteUrl;
+  }
+
+  /**
+   * Force selected values, the input is an array of object that must match the format from
+   * the API if you want the selected entities to be correctly displayed.
+   *
+   * @param values {array}
+   */
+  setValue(values) {
+    this.clearSelectedItems();
+    if (!values || values.length <= 0) {
+      return;
+    }
+
+    values.each((value) => {
+      this.appendSelectedItem(value);
+    });
+  }
+
+  /**
+   * Build the AutoCompleteSearch component
+   */
+  buildAutoCompleteSearch() {
+    const autoSearchConfig = {
+      source: this.entityRemoteSource,
+      dataLimit: this.options.dataLimit,
+      templates: {
+        suggestion: (entity) => {
+          let entityImage;
+
+          if (Object.prototype.hasOwnProperty.call(entity, 'image')) {
+            entityImage = `<img src="${entity.image}" /> `;
+          }
+
+          return `<div class="search-suggestion">${entityImage}${entity.name}</div>`;
+        },
+      },
+      onClose: (event) => {
+        this.onSelectionClose(event);
+      },
+      /* eslint-disable-next-line no-unused-vars */
+      onSelect: (selectedItem, event) => {
+        // When limit is one we cannot select additional elements so we replace them instead
+        if (this.options.dataLimit === 1) {
+          return this.replaceSelectedItem(selectedItem);
+        }
+        return this.appendSelectedItem(selectedItem);
+      },
+    };
+
+    // Can be used to format value depending on selected item
+    if (this.options.value !== undefined) {
+      autoSearchConfig.value = this.options.value;
+    }
+    this.autoSearch = new AutoCompleteSearch(this.$entitySearchInput, autoSearchConfig);
+  }
+
+  /**
+   * Build the Bloodhound remote source which will call the API. The placeholder to
+   * inject the query search parameter is __QUERY__ (@todo: could be configurable)
+   *
+   * @returns {Bloodhound}
+   */
+  buildRemoteSource() {
+    const sourceConfig = {
+      mappingValue: this.$autoCompleteSearchContainer.data('mappingvalue'),
+      remoteUrl: this.$autoCompleteSearchContainer.data('remoteurl'),
+    };
+
+    this.entityRemoteSource = new Bloodhound({
+      datumTokenizer: Bloodhound.tokenizers.whitespace,
+      queryTokenizer: Bloodhound.tokenizers.whitespace,
+      identify(obj) {
+        return obj[sourceConfig.mappingValue];
+      },
+      remote: {
+        url: sourceConfig.remoteUrl,
+        cache: false,
+        wildcard: '__QUERY__',
+        transform(response) {
+          if (!response) {
+            return [];
+          }
+          return response;
+        },
+      },
+    });
+  }
+
+  /**
+   * When an item is selected we empty the input search, since the selected data is stored in hidden inputs anyway
+   *
+   * @param event
+   */
+  onSelectionClose(event) {
+    $(event.target).val('');
+  }
+
+  /**
+   * Removes selected items.
+   */
+  clearSelectedItems() {
+    const formIdItem = $('li', this.$selectionContainer);
+    formIdItem.remove();
+  }
+
+  /**
+   * When the component is configured to have only one selected element on each selection
+   * the previous selection is removed and then replaced.
+   *
+   * @param selectedItem {Object}
+   * @returns {boolean}
+   */
+  replaceSelectedItem(selectedItem) {
+    this.clearSelectedItems();
+    this.addSelectedContentToContainer(selectedItem);
+
+    return true;
+  }
+
+  /**
+   * When the component is configured to have more than one selected item on each selection
+   * the item is added to the list.
+   *
+   * @param selectedItem {Object}
+   * @returns {boolean}
+   */
+  appendSelectedItem(selectedItem) {
+    // If collection length is up to limit, return
+    const formIdItem = $('li', this.$selectionContainer);
+
+    if (this.options.dataLimit !== 0 && formIdItem.length >= this.options.dataLimit) {
+      return false;
+    }
+
+    this.addSelectedContentToContainer(selectedItem);
+
+    return true;
+  }
+
+  /**
+   * Add the selected content to the selection container, the HTML is generated based on the render function
+   * then a hidden input is automatically added inside it, and finally the rendered selection is added to the list.
+   *
+   * @param selectedItem {Object}
+   */
+  addSelectedContentToContainer(selectedItem) {
+    let value;
+
+    if (typeof this.options.value === 'function') {
+      value = this.options.value(selectedItem);
+    } else {
+      value = selectedItem[this.options.value];
+    }
+
+    const selectedHtml = this.renderSelected(selectedItem);
+    // Hidden input is added into the selected li
+    const $selectedNode = $(selectedHtml);
+    const $hiddenInput = $(`<input type="hidden" name="${this.searchInputFullName}[data][]" value="${value}" />`);
+    $selectedNode.append($hiddenInput);
+
+    // Then the li is added to the list
+    this.$selectionContainer.append($selectedNode);
+
+    // Trigger the change so that listeners detect the form data has been modified
+    $hiddenInput.trigger('change');
+  }
+
+  /**
+   * Render the selected element, this will be appended in the selection list (ul),
+   * no need to include the hidden input as it is automatically handled in addSelectedContentToContainer
+   *
+   * @param entity {Object}
+   *
+   * @returns {string}
+   */
+  renderSelected(entity) {
+    // @todo: the tplcollection idea is not bad but it only contains a span for now, to fo to the end of this idea
+    // it should contain the whole div (with media-left media-body and all)
+    const $templateContainer = $(`#tplcollection-${this.entitySearchInputId}`);
+    const innerTemplateHtml = $templateContainer
+      .html()
+      .replace('%s', entity.name);
+
+    return `<li class="media">
+        <div class="media-left">
+          <img class="media-object image" src="${entity.image}" />
+        </div>
+        <div class="media-body media-middle">
+          ${innerTemplateHtml}
+        </div>
+      </li>`;
+  }
+}

admin-kalsport/themes/new-theme/js/components/event-emitter.js

@@ -0,0 +1,34 @@
+/**
+ * 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)
+ */
+
+import EventEmitterClass from 'events';
+
+/**
+ * We instanciate one EventEmitter (restricted via a const) so that every components
+ * register/dispatch on the same one and can communicate with each other.
+ */
+export const EventEmitter = new EventEmitterClass();
+
+export default EventEmitter;

admin-kalsport/themes/new-theme/js/components/form-submit-button.js

@@ -0,0 +1,102 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * Component which allows submitting very simple forms without having to use <form> element.
+ *
+ * Useful when performing actions on resource where URL contains all needed data.
+ * For example, to toggle category status via "POST /categories/2/toggle-status)"
+ * or delete cover image via "POST /categories/2/delete-cover-image".
+ *
+ * Usage example in template:
+ *
+ * <button class="js-form-submit-btn"
+ *         data-form-submit-url="/my-custom-url"          // (required) URL to which form will be submitted
+ *         data-method="GET|POST|DELETE|PATCH"            // (optional) specify the verb to use for the request.
+ *                                                        // POST is taken by default if not value is set
+ *         data-form-csrf-token="my-generated-csrf-token" // (optional) to increase security
+ *         data-form-confirm-message="Are you sure?"      // (optional) to confirm action before submit
+ *         type="button"                                  // make sure its simple button
+ *                                                        // so we can avoid submitting actual form
+ *                                                        // when our button is defined inside form
+ * >
+ *     Click me to submit form
+ * </button>
+ *
+ * In page specific JS you have to enable this feature:
+ *
+ * new FormSubmitButton();
+ */
+export default class FormSubmitButton {
+  constructor() {
+    $(document).on('click', '.js-form-submit-btn', function (event) {
+      event.preventDefault();
+
+      const $btn = $(this);
+
+      if ($btn.data('form-confirm-message') && window.confirm($btn.data('form-confirm-message')) === false) {
+        return;
+      }
+
+      let method = 'POST';
+      let addInput = null;
+
+      if ($btn.data('method')) {
+        const btnMethod = $btn.data('method');
+        const isGetOrPostMethod = ['GET', 'POST'].includes(btnMethod);
+        method = isGetOrPostMethod ? btnMethod : 'POST';
+
+        if (!isGetOrPostMethod) {
+          addInput = $('<input>', {
+            type: '_hidden',
+            name: '_method',
+            value: btnMethod,
+          });
+        }
+      }
+
+      const $form = $('<form>', {
+        action: $btn.data('form-submit-url'),
+        method,
+      });
+
+      if (addInput) {
+        $form.append(addInput);
+      }
+
+      if ($btn.data('form-csrf-token')) {
+        $form.append($('<input>', {
+          type: '_hidden',
+          name: '_csrf_token',
+          value: $btn.data('form-csrf-token'),
+        }));
+      }
+
+      $form.appendTo('body').submit();
+    });
+  }
+}

admin-kalsport/themes/new-theme/js/components/form/autocomplete-with-email.js

@@ -0,0 +1,54 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+export default class AutocompleteWithEmail {
+  constructor(emailInputSelector, map = []) {
+    this.map = map;
+    this.$emailInput = $(emailInputSelector);
+    this.$emailInput.on('change', () => this.change());
+  }
+
+  change() {
+    $.get({
+      url: this.$emailInput.data('customer-information-url'),
+      dataType: 'json',
+      data: {
+        email: this.$emailInput.val(),
+      },
+    }).then((response) => {
+      Object.keys(this.map).forEach((key) => {
+        if (response[key] !== undefined) {
+          $(this.map[key]).val(response[key]);
+        }
+      });
+    }).catch((response) => {
+      if (typeof response.responseJSON !== 'undefined') {
+        window.showErrorMessage(response.responseJSON.message);
+      }
+    });
+  }
+}

admin-kalsport/themes/new-theme/js/components/form/change-password-control.js

@@ -0,0 +1,249 @@
+/**
+ * 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)
+ */
+
+import ChangePasswordHandler from '../change-password-handler';
+import PasswordValidator from '../password-validator';
+
+const {$} = window;
+
+/**
+ * Class responsible for actions related to "change password" form type.
+ * Generates random passwords, validates new password and it's confirmation,
+ * displays error messages related to validation.
+ */
+export default class ChangePasswordControl {
+  constructor(
+    inputsBlockSelector,
+    showButtonSelector,
+    hideButtonSelector,
+    generatePasswordButtonSelector,
+    oldPasswordInputSelector,
+    newPasswordInputSelector,
+    confirmNewPasswordInputSelector,
+    generatedPasswordDisplaySelector,
+    passwordStrengthFeedbackContainerSelector,
+  ) {
+    // Block that contains password inputs
+    this.$inputsBlock = $(inputsBlockSelector);
+
+    // Button that shows the password inputs block
+    this.showButtonSelector = showButtonSelector;
+
+    // Button that hides the password inputs block
+    this.hideButtonSelector = hideButtonSelector;
+
+    // Button that generates a random password
+    this.generatePasswordButtonSelector = generatePasswordButtonSelector;
+
+    // Input to enter old password
+    this.oldPasswordInputSelector = oldPasswordInputSelector;
+
+    // Input to enter new password
+    this.newPasswordInputSelector = newPasswordInputSelector;
+
+    // Input to confirm the new password
+    this.confirmNewPasswordInputSelector = confirmNewPasswordInputSelector;
+
+    // Input that displays generated random password
+    this.generatedPasswordDisplaySelector = generatedPasswordDisplaySelector;
+
+    // Main input for password generation
+    this.$newPasswordInputs = this.$inputsBlock
+      .find(this.newPasswordInputSelector);
+
+    // Generated password will be copied to these inputs
+    this.$copyPasswordInputs = this.$inputsBlock
+      .find(this.confirmNewPasswordInputSelector)
+      .add(this.generatedPasswordDisplaySelector);
+
+    // All inputs in the change password block, that are submittable with the form.
+    this.$submittableInputs = this.$inputsBlock
+      .find(this.oldPasswordInputSelector)
+      .add(this.newPasswordInputSelector)
+      .add(this.confirmNewPasswordInputSelector);
+
+    this.passwordHandler = new ChangePasswordHandler(
+      passwordStrengthFeedbackContainerSelector,
+    );
+
+    this.passwordValidator = new PasswordValidator(
+      this.newPasswordInputSelector,
+      this.confirmNewPasswordInputSelector,
+    );
+
+    this.hideInputsBlock();
+    this.initEvents();
+
+    return {};
+  }
+
+  /**
+   * Initialize events.
+   *
+   * @private
+   */
+  initEvents() {
+    // Show the inputs block when show button is clicked
+    $(document).on('click', this.showButtonSelector, (e) => {
+      this.hide($(e.currentTarget));
+      this.showInputsBlock();
+    });
+
+    $(document).on('click', this.hideButtonSelector, () => {
+      this.hideInputsBlock();
+      this.show($(this.showButtonSelector));
+    });
+
+    // Watch and display feedback about password's strength
+    this.passwordHandler.watchPasswordStrength(this.$newPasswordInputs);
+
+    $(document).on('click', this.generatePasswordButtonSelector, () => {
+      // Generate the password into main input.
+      this.passwordHandler.generatePassword(this.$newPasswordInputs);
+
+      // Copy the generated password from main input to additional inputs
+      this.$copyPasswordInputs.val(this.$newPasswordInputs.val());
+      this.checkPasswordValidity();
+    });
+
+    // Validate new password and it's confirmation when any of the inputs is changed
+    $(document).on(
+      'keyup',
+      `${this.newPasswordInputSelector},${this.confirmNewPasswordInputSelector}`,
+      () => {
+        this.checkPasswordValidity();
+      },
+    );
+
+    // Prevent submitting the form if new password is not valid
+    $(document).on('submit', $(this.oldPasswordInputSelector).closest('form'), (event) => {
+      // If password input is disabled - we don't need to validate it.
+      if ($(this.oldPasswordInputSelector).is(':disabled')) {
+        return;
+      }
+
+      if (!this.passwordValidator.isPasswordValid()) {
+        event.preventDefault();
+      }
+    });
+  }
+
+  /**
+   * Check if password is valid, show error messages if it's not.
+   *
+   * @private
+   */
+  checkPasswordValidity() {
+    const $firstPasswordErrorContainer = $(this.newPasswordInputSelector).parent().find('.form-text');
+    const $secondPasswordErrorContainer = $(this.confirmNewPasswordInputSelector).parent().find('.form-text');
+
+    $firstPasswordErrorContainer
+      .text(this.getPasswordLengthValidationMessage())
+      .toggleClass('text-danger', !this.passwordValidator.isPasswordLengthValid());
+    $secondPasswordErrorContainer
+      .text(this.getPasswordConfirmationValidationMessage())
+      .toggleClass('text-danger', !this.passwordValidator.isPasswordMatchingConfirmation());
+  }
+
+  /**
+   * Get password confirmation validation message.
+   *
+   * @returns {String}
+   *
+   * @private
+   */
+  getPasswordConfirmationValidationMessage() {
+    if (!this.passwordValidator.isPasswordMatchingConfirmation()) {
+      return $(this.confirmNewPasswordInputSelector).data('invalid-password');
+    }
+
+    return '';
+  }
+
+  /**
+   * Get password length validation message.
+   *
+   * @returns {String}
+   *
+   * @private
+   */
+  getPasswordLengthValidationMessage() {
+    if (this.passwordValidator.isPasswordTooShort()) {
+      return $(this.newPasswordInputSelector).data('password-too-short');
+    }
+
+    if (this.passwordValidator.isPasswordTooLong()) {
+      return $(this.newPasswordInputSelector).data('password-too-long');
+    }
+
+    return '';
+  }
+
+  /**
+   * Show the password inputs block.
+   *
+   * @private
+   */
+  showInputsBlock() {
+    this.show(this.$inputsBlock);
+    this.$submittableInputs.removeAttr('disabled');
+    this.$submittableInputs.attr('required', 'required');
+  }
+
+  /**
+   * Hide the password inputs block.
+   *
+   * @private
+   */
+  hideInputsBlock() {
+    this.hide(this.$inputsBlock);
+    this.$submittableInputs.attr('disabled', 'disabled');
+    this.$submittableInputs.removeAttr('required');
+    this.$inputsBlock.find('input').val('');
+    this.$inputsBlock.find('.form-text').text('');
+  }
+
+  /**
+   * Hide an element.
+   *
+   * @param {jQuery} $el
+   *
+   * @private
+   */
+  hide($el) {
+    $el.addClass('d-none');
+  }
+
+  /**
+   * Show hidden element.
+   *
+   * @param {jQuery} $el
+   *
+   * @private
+   */
+  show($el) {
+    $el.removeClass('d-none');
+  }
+}

admin-kalsport/themes/new-theme/js/components/form/choice-tree.js

@@ -0,0 +1,158 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * Handles UI interactions of choice tree
+ */
+export default class ChoiceTree {
+  /**
+   * @param {String} treeSelector
+   */
+  constructor(treeSelector) {
+    this.$container = $(treeSelector);
+
+    this.$container.on('click', '.js-input-wrapper', (event) => {
+      const $inputWrapper = $(event.currentTarget);
+
+      this.toggleChildTree($inputWrapper);
+    });
+
+    this.$container.on('click', '.js-toggle-choice-tree-action', (event) => {
+      const $action = $(event.currentTarget);
+
+      this.toggleTree($action);
+    });
+
+    return {
+      enableAutoCheckChildren: () => this.enableAutoCheckChildren(),
+      enableAllInputs: () => this.enableAllInputs(),
+      disableAllInputs: () => this.disableAllInputs(),
+    };
+  }
+
+  /**
+   * Enable automatic check/uncheck of clicked item's children.
+   */
+  enableAutoCheckChildren() {
+    this.$container.on('change', 'input[type="checkbox"]', (event) => {
+      const $clickedCheckbox = $(event.currentTarget);
+      const $itemWithChildren = $clickedCheckbox.closest('li');
+
+      $itemWithChildren
+        .find('ul input[type="checkbox"]')
+        .prop('checked', $clickedCheckbox.is(':checked'));
+    });
+  }
+
+  /**
+   * Enable all inputs in the choice tree.
+   */
+  enableAllInputs() {
+    this.$container.find('input').removeAttr('disabled');
+  }
+
+  /**
+   * Disable all inputs in the choice tree.
+   */
+  disableAllInputs() {
+    this.$container.find('input').attr('disabled', 'disabled');
+  }
+
+  /**
+   * Collapse or expand sub-tree for single parent
+   *
+   * @param {jQuery} $inputWrapper
+   *
+   * @private
+   */
+  toggleChildTree($inputWrapper) {
+    const $parentWrapper = $inputWrapper.closest('li');
+
+    if ($parentWrapper.hasClass('expanded')) {
+      $parentWrapper
+        .removeClass('expanded')
+        .addClass('collapsed');
+
+      return;
+    }
+
+    if ($parentWrapper.hasClass('collapsed')) {
+      $parentWrapper
+        .removeClass('collapsed')
+        .addClass('expanded');
+    }
+  }
+
+  /**
+   * Collapse or expand whole tree
+   *
+   * @param {jQuery} $action
+   *
+   * @private
+   */
+  toggleTree($action) {
+    const $parentContainer = $action.closest('.js-choice-tree-container');
+    const action = $action.data('action');
+
+    // toggle action configuration
+    const config = {
+      addClass: {
+        expand: 'expanded',
+        collapse: 'collapsed',
+      },
+      removeClass: {
+        expand: 'collapsed',
+        collapse: 'expanded',
+      },
+      nextAction: {
+        expand: 'collapse',
+        collapse: 'expand',
+      },
+      text: {
+        expand: 'collapsed-text',
+        collapse: 'expanded-text',
+      },
+      icon: {
+        expand: 'collapsed-icon',
+        collapse: 'expanded-icon',
+      },
+    };
+
+    $parentContainer.find('li').each((index, item) => {
+      const $item = $(item);
+
+      if ($item.hasClass(config.removeClass[action])) {
+        $item.removeClass(config.removeClass[action])
+          .addClass(config.addClass[action]);
+      }
+    });
+
+    $action.data('action', config.nextAction[action]);
+    $action.find('.material-icons').text($action.data(config.icon[action]));
+    $action.find('.js-toggle-text').text($action.data(config.text[action]));
+  }
+}

admin-kalsport/themes/new-theme/js/components/form/form-object-mapper.js

@@ -0,0 +1,390 @@
+/**
+ * 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)
+ */
+
+import _ from 'lodash';
+
+const {$} = window;
+
+/**
+ * This is able to watch an HTML form and parse it as a Javascript object based on a configurable
+ * mapping. Each field from the model is mapped to a form input, or several, each input is watched
+ * to keep the model consistent.
+ *
+ * The model mapping used for this component is an object which uses the modelKey as a key (it represents
+ * the property path in the object, separated by a dot) and the input names as value (they follow Symfony
+ * convention naming using brackets). Here is an example of mapping:
+ *
+ * const modelMapping = {
+ *  'product.stock.quantity': 'product[stock][quantity]',
+ *  'product.price.priceTaxExcluded': [
+ *    'product[price][price_tax_excluded]',
+ *    'product[shortcuts][price][price_tax_excluded]',
+ *  ],
+ * };
+ *
+ * As you can see for priceTaxExcluded it is possible to assign multiple inputs to the same modelKey, thus
+ * any update in one of the inputs will update the model, and all these inputs are kept in sync.
+ *
+ * With the previous configuration this component would return an object that looks like this:
+ *
+ * {
+ *   product: {
+ *     stock: {
+ *       // Mapped to product[stock][quantity] input
+ *       quantity: 200,
+ *     },
+ *     price: {
+ *       // Mapped to two inputs product[price][price_tax_excluded] and product[shortcuts][price][price_tax_excluded]
+ *       priceTaxExcluded: 20.45,
+ *     }
+ *   }
+ * }
+ */
+export default class FormObjectMapper {
+  /**
+   * @param {jQuery} $form - Form element to attach the mapper to
+   * @param {Object} modelMapping - Structure mapping a model to form names
+   * @param {EventEmitter} eventEmitter
+   * @param {Object} [config] - Event names
+   * @param {Object} [config.updateModel] - Name of the event to listen to trigger a refresh of the model update
+   * @param {Object} [config.modelUpdated] - Name of the event emitted each time the model is updated
+   * @param {Object} [config.modelFieldUpdated] - Name of the event emitted each time a field is updated
+   * @return {Object}
+   */
+  constructor($form, modelMapping, eventEmitter, config) {
+    this.$form = $form;
+    this.fullModelMapping = modelMapping;
+    this.eventEmitter = eventEmitter;
+
+    const inputConfig = config || {};
+
+    // This event is registered so when it is triggered it forces the form mapping and object update,
+    // it can be useful when some new inputs have been added in the DOM (or removed) so that the model
+    // acknowledges the update
+    this.updateModelEventName = inputConfig.updateModel || 'updateModel';
+
+    // This event is emitted each time the object is updated (from both input change and external event)
+    this.modelUpdatedEventName = inputConfig.modelUpdated || 'modelUpdated';
+    // This event is emitted each time an object field is updated (from both input change and external event)
+    this.modelFieldUpdatedEventName = inputConfig.modelFieldUpdated || 'modelFieldUpdated';
+
+    // Contains callbacks identified by model keys
+    this.watchedProperties = {};
+
+    this.initFormMapping();
+    this.updateFullObject();
+    this.watchUpdates();
+
+    return {
+      /**
+       * Returns the model mapped to the form (current live state)
+       *
+       * @returns {*|{}}
+       */
+      getModel: () => this.model,
+
+      /**
+       * Returns all inputs associated to a model field.
+       *
+       * @param {string} modelKey
+       *
+       * @returns {undefined|jQuery}
+       */
+      getInputsFor: (modelKey) => {
+        if (!Object.prototype.hasOwnProperty.call(this.fullModelMapping, modelKey)) {
+          return undefined;
+        }
+
+        const inputNames = this.fullModelMapping[modelKey];
+
+        // We must loop manually to keep the order in configuration, if we use jQuery multiple selectors the collection
+        // will be filled respecting the order in the DOM
+        const inputs = [];
+        const domForm = this.$form.get(0);
+        inputNames.forEach((inputName) => {
+          const inputsByName = domForm.querySelectorAll(`[name="${inputName}"]`);
+
+          if (inputsByName.length) {
+            inputsByName.forEach((input) => {
+              inputs.push(input);
+            });
+          }
+        });
+
+        return inputs.length ? $(inputs) : undefined;
+      },
+
+      /**
+       * Set a value to a field of the object based on the model key, the object itself is updated
+       * of course but the mapped inputs are also synced (all of them if multiple). Events are also
+       * triggered to indicate the object has been updated (the general and the individual field ones).
+       *
+       * @param {string} modelKey
+       * @param {*|{}} value
+       */
+      set: (modelKey, value) => {
+        if (!Object.prototype.hasOwnProperty.call(this.modelMapping, modelKey) || value === this.getValue(modelKey)) {
+          return;
+        }
+
+        // First update the inputs then the model, so that the event is sent at last
+        this.updateInputValue(modelKey, value);
+        this.updateObjectByKey(modelKey, value);
+        this.eventEmitter.emit(this.modelUpdatedEventName, this.model);
+      },
+
+      /**
+       * Alternative to the event listening, you can watch a specific field of the model and assign a callback.
+       * When the specified model field is updated the event is still thrown but additionally any callback assigned
+       * to this specific value is also called, the parameter is the same event.
+       *
+       * @param {string} modelKey
+       * @param {function} callback
+       */
+      watch: (modelKey, callback) => {
+        if (!Object.prototype.hasOwnProperty.call(this.watchedProperties, modelKey)) {
+          this.watchedProperties[modelKey] = [];
+        }
+        this.watchedProperties[modelKey].push(callback);
+      },
+    };
+  }
+
+  /**
+   * Get a field from the object based on the model key, you can even get a sub part of the whole model,
+   * this internal method is used by both get and set public methods.
+   *
+   * @param {string} modelKey
+   *
+   * @returns {*|{}|undefined} Returns any element from the model, undefined if not found
+   * @private
+   */
+  getValue(modelKey) {
+    const modelKeys = modelKey.split('.');
+
+    return $.serializeJSON.deepGet(this.model, modelKeys);
+  }
+
+  /**
+   * Watches if changes happens from the form or via an event.
+   *
+   * @private
+   */
+  watchUpdates() {
+    this.$form.on('keyup change dp.change', ':input', _.debounce(
+      (event) => this.inputUpdated(event),
+      350,
+      {maxWait: 1500},
+    ));
+    this.eventEmitter.on(this.updateModelEventName, () => this.updateFullObject());
+  }
+
+  /**
+   * Triggered when a form input has been changed.
+   *
+   * @param {jQuery.Event} event
+   *
+   * @private
+   */
+  inputUpdated(event) {
+    const target = event.currentTarget;
+
+    // All inputs changes are watched, but not all of them are part of the mapping so we ignore them
+    if (!Object.prototype.hasOwnProperty.call(this.formMapping, target.name)) {
+      return;
+    }
+
+    const updatedValue = $(target).val();
+    const updatedModelKey = this.formMapping[target.name];
+
+    // Update the mapped input fields
+    this.updateInputValue(updatedModelKey, updatedValue, target.name);
+
+    // Then update model and emit event
+    this.updateObjectByKey(updatedModelKey, updatedValue);
+    this.eventEmitter.emit(this.modelUpdatedEventName, this.model);
+  }
+
+  /**
+   * Update all the inputs mapped to a model key
+   *
+   * @param {string} modelKey
+   * @param {*|{}} value
+   * @param {string|undefined} sourceInputName Source of the change (no need to update it)
+   *
+   * @private
+   */
+  updateInputValue(modelKey, value, sourceInputName = undefined) {
+    const modelInputs = this.fullModelMapping[modelKey];
+
+    // Update linked inputs (when there is more than one input associated to the model field)
+    if (Array.isArray(modelInputs)) {
+      modelInputs.forEach((inputName) => {
+        if (sourceInputName === inputName) {
+          return;
+        }
+
+        this.updateInputByName(inputName, value);
+      });
+    } else if (sourceInputName !== modelInputs) {
+      this.updateInputByName(modelInputs, value);
+    }
+  }
+
+  /**
+   * Update individual input based on its name
+   *
+   * @param {string} inputName
+   * @param {*|{}} value
+   *
+   * @private
+   */
+  updateInputByName(inputName, value) {
+    const $input = $(`[name="${inputName}"]`, this.$form);
+
+    if (!$input.length) {
+      console.error(`Input with name ${inputName} is not present in form.`);
+
+      return;
+    }
+
+    // This check is important to avoid infinite loops, we don't use strict equality on purpose because it would result
+    // into a potential infinite loop if type don't match, which can easily happen with a number value and a text input.
+    // eslint-disable-next-line eqeqeq
+    if ($input.val() != value) {
+      $input.val(value);
+
+      if ($input.data('toggle') === 'select2') {
+        // This is required for select2, because only changing the val doesn't update the wrapping component
+        $input.trigger('change');
+      }
+    }
+  }
+
+  /**
+   * Serializes and updates the object based on form content and the mapping configuration, finally
+   * emit an event for external components that may need the update.
+   *
+   * This method is called when this component initializes or when triggered by an external event.
+   *
+   * @private
+   */
+  updateFullObject() {
+    const serializedForm = this.$form.serializeJSON();
+    this.model = {};
+    Object.keys(this.modelMapping).forEach((modelKey) => {
+      const formMapping = this.modelMapping[modelKey];
+      const formKeys = $.serializeJSON.splitInputNameIntoKeysArray(formMapping);
+      const formValue = $.serializeJSON.deepGet(serializedForm, formKeys);
+
+      this.updateObjectByKey(modelKey, formValue);
+    });
+
+    this.eventEmitter.emit(this.modelUpdatedEventName, this.model);
+  }
+
+  /**
+   * Update a specific field of the object.
+   *
+   * @param {string} modelKey
+   * @param {*|{}} value
+   *
+   * @private
+   */
+  updateObjectByKey(modelKey, value) {
+    const modelKeys = modelKey.split('.');
+    const previousValue = $.serializeJSON.deepGet(this.model, modelKeys);
+
+    // This check has two interests, there is no point in modifying a value or emit an event for a value that did not
+    // change, and it avoids infinite loops when the object field are co-dependent and need to be updated dynamically
+    // (ex: update price tax included when price tax excluded is updated and vice versa, without this check an infinite
+    // loop would happen)
+    if (previousValue === value) {
+      return;
+    }
+
+    $.serializeJSON.deepSet(this.model, modelKeys, value);
+
+    const updateEvent = {
+      object: this.model,
+      modelKey,
+      value,
+      previousValue,
+    };
+    this.eventEmitter.emit(this.modelFieldUpdatedEventName, updateEvent);
+
+    if (Object.prototype.hasOwnProperty.call(this.watchedProperties, modelKey)) {
+      const propertyWatchers = this.watchedProperties[modelKey];
+      propertyWatchers.forEach((callback) => {
+        callback(updateEvent);
+      });
+    }
+  }
+
+  /**
+   * Reverse the initial mapping Model->Form to the opposite Form->Model
+   * This simplifies the sync in when data updates.
+   *
+   * @private
+   */
+  initFormMapping() {
+    // modelMapping is a light version of the fullModelMapping, it only contains one input name which is considered
+    // as the default one (when full object is updated, only the default input is used)
+    this.modelMapping = {};
+
+    // formMapping is the inverse of modelMapping for each input name it associated the model key, it is generated for
+    // performance and convenience, this allows to get mapping data faster in other functions
+    this.formMapping = {};
+
+    Object.keys(this.fullModelMapping).forEach((modelKey) => {
+      const formMapping = this.fullModelMapping[modelKey];
+
+      if (Array.isArray(formMapping)) {
+        formMapping.forEach((aliasFormMapping) => {
+          this.addFormMapping(aliasFormMapping, modelKey);
+        });
+      } else {
+        this.addFormMapping(formMapping, modelKey);
+      }
+    });
+  }
+
+  /**
+   * @param {string} formName
+   * @param {string} modelMapping
+   *
+   * @private
+   */
+  addFormMapping(formName, modelMapping) {
+    if (Object.prototype.hasOwnProperty.call(this.formMapping, formName)) {
+      console.error(`The form element ${formName} is already mapped to ${this.formMapping[formName]}`);
+
+      return;
+    }
+
+    this.formMapping[formName] = modelMapping;
+    this.modelMapping[modelMapping] = formName;
+  }
+}

admin-kalsport/themes/new-theme/js/components/form/form-popover-error.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ */
+
+const {$} = window;
+
+/**
+ * Component responsible for displaying form popover errors with modified width which is calculated based on the
+ * form group width.
+ */
+$(() => {
+  // loads form popover instance
+  $('[data-toggle="form-popover-error"]').popover({
+    html: true,
+    content() {
+      return getErrorContent(this);
+    },
+  });
+
+  /**
+   * Recalculates popover position so it is always aligned horizontally and width is identical
+   * to the child elements of the form.
+   * @param {Object} event
+   */
+  const repositionPopover = (event) => {
+    const $element = $(event.currentTarget);
+    const $formGroup = $element.closest('.form-group');
+    const $invalidFeedbackContainer = $formGroup.find('.invalid-feedback-container');
+    const $errorPopover = $formGroup.find('.form-popover-error');
+
+    const localeVisibleElementWidth = $invalidFeedbackContainer.width();
+
+    $errorPopover.css('width', localeVisibleElementWidth);
+
+    const horizontalDifference = getHorizontalDifference($invalidFeedbackContainer, $errorPopover);
+
+    $errorPopover.css('left', `${horizontalDifference}px`);
+  };
+
+  /**
+   * gets horizontal difference which helps to align popover horizontally.
+   * @param {jQuery} $invalidFeedbackContainer
+   * @param {jQuery} $errorPopover
+   * @returns {number}
+   */
+  const getHorizontalDifference = ($invalidFeedbackContainer, $errorPopover) => {
+    const inputHorizontalPosition = $invalidFeedbackContainer.offset().left;
+    const popoverHorizontalPosition = $errorPopover.offset().left;
+
+    return inputHorizontalPosition - popoverHorizontalPosition;
+  };
+
+  /**
+   * Gets popover error content pre-fetched in html. It used unique selector to identify which one content to render.
+   *
+   * @param popoverTriggerElement
+   * @returns {jQuery}
+   */
+  const getErrorContent = (popoverTriggerElement) => {
+    const popoverTriggerId = $(popoverTriggerElement).data('id');
+
+    return $(`.js-popover-error-content[data-id="${popoverTriggerId}"]`).html();
+  };
+
+  // registers the event which displays the popover
+  $(document).on('shown.bs.popover', '[data-toggle="form-popover-error"]', (event) => repositionPopover(event));
+});

admin-kalsport/themes/new-theme/js/components/form/multistore-config-field.js

@@ -0,0 +1,44 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+export default class MultistoreConfigField {
+  constructor() {
+    this.updateMultistoreFieldOnChange();
+  }
+
+  updateMultistoreFieldOnChange() {
+    $(document).on('change', '.multistore-checkbox', function () {
+      const input = $(this).closest('.form-group').find(':input:not(.multistore-checkbox)');
+      const inputContainer = $(this).closest('.form-group').find('.input-container');
+      const labelContainer = $(this).closest('.form-group').find('.form-control-label');
+      const isChecked = $(this).is(':checked');
+      inputContainer.toggleClass('disabled', !isChecked);
+      labelContainer.toggleClass('disabled', !isChecked);
+      input.prop('disabled', !isChecked);
+    });
+  }
+}

admin-kalsport/themes/new-theme/js/components/form/preview-opener.js

@@ -0,0 +1,55 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * Responsible for opening another page with specified url.
+ * For example used in 'Save and preview' cms page create/edit actions.
+ *
+ * Usage: In selector element attr 'data-preview-url' provide page url.
+ * The page will be opened once provided 'open_preview' parameter in query url
+ */
+export default class PreviewOpener {
+  constructor(previewUrlSelector) {
+    this.previewUrl = $(previewUrlSelector).data('preview-url');
+    this.open();
+
+    return {};
+  }
+
+  /**
+   * Opens new page of provided url
+   *
+   * @private
+   */
+  open() {
+    const urlParams = new URLSearchParams(window.location.search);
+
+    if (this.previewUrl && urlParams.has('open_preview')) {
+      window.open(this.previewUrl, '_blank');
+    }
+  }
+}

admin-kalsport/themes/new-theme/js/components/form/submittable-input.js

@@ -0,0 +1,228 @@
+/**
+ * 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)
+ */
+
+import {showGrowl} from '@app/utils/growl';
+
+const {$} = window;
+
+/**
+ * Activates, deactivates, shows, hides submit button inside an input
+ * (depending if input was changed comparing to initial value)
+ * After button is clicked, component fires the callback function which was provided to constructor.
+ */
+export default class SubmittableInput {
+  /**
+   * @param {String} wrapperSelector
+   * @param {Function} callback
+   *
+   * @returns {{}}
+   */
+  constructor(wrapperSelector, callback) {
+    this.inputSelector = '.submittable-input';
+    this.callback = callback;
+    this.wrapperSelector = wrapperSelector;
+    this.buttonSelector = '.check-button';
+
+    this.init();
+
+    return {};
+  }
+
+  /**
+   * @private
+   */
+  init() {
+    const inputs = `${this.wrapperSelector} ${this.inputSelector}`;
+    const that = this;
+
+    $(document).on('focus', inputs, (e) => {
+      this.refreshButtonState(e.currentTarget, true);
+    });
+    $(document).on('input blur', inputs, (e) => {
+      this.refreshButtonState(e.currentTarget);
+    });
+    $(document).on(
+      'click',
+      `${this.wrapperSelector} ${this.buttonSelector}`,
+      function () {
+        that.submitInput(this);
+      },
+    );
+    $(document).on('keyup', inputs, (e) => {
+      if (e.keyCode === 13) {
+        e.preventDefault();
+        const button = this.findButton(e.target);
+
+        this.submitInput(button);
+      }
+    });
+  }
+
+  /**
+   * @private
+   */
+  submitInput(button) {
+    const input = this.findInput(button);
+
+    this.toggleLoading(button, true);
+
+    this.callback(input)
+      .then((response) => {
+        $(input).data('initial-value', input.value);
+        this.toggleButtonVisibility(button, false);
+
+        if (response.message) {
+          showGrowl('success', response.message);
+        }
+        this.toggleLoading(button, false);
+      })
+      .catch((error) => {
+        this.toggleError(button, true);
+        this.toggleButtonVisibility(button, false);
+        this.toggleLoading(button, false);
+
+        if (typeof error.responseJSON.errors === 'undefined') {
+          return;
+        }
+
+        const messages = error.responseJSON.errors;
+        Object.keys(messages).forEach((key) => {
+          showGrowl('error', messages[key]);
+        });
+      });
+  }
+
+  /**
+   * @param {HTMLElement} input
+   * @param {Boolean|null} visible
+   *
+   * @private
+   */
+  refreshButtonState(input, visible = null) {
+    const button = this.findButton(input);
+    const valueWasChanged = this.inputValueChanged(input);
+    this.toggleButtonActivity(button, valueWasChanged);
+
+    if (visible !== null) {
+      this.toggleButtonVisibility(button, visible);
+    } else {
+      this.toggleButtonVisibility(button, valueWasChanged);
+    }
+  }
+
+  /**
+   * @param {HTMLElement} button
+   * @param {Boolean} active
+   *
+   * @private
+   */
+  toggleButtonActivity(button, active) {
+    $(button).toggleClass('active', active);
+  }
+
+  /**
+   * @param {HTMLElement} button
+   * @param {Boolean} visible
+   *
+   * @private
+   */
+  toggleButtonVisibility(button, visible) {
+    $(button).toggleClass('d-none', !visible);
+  }
+
+  /**
+   * @param {HTMLElement} button
+   * @param {Boolean} visible
+   *
+   * @private
+   */
+  toggleLoading(button, loading) {
+    if (loading) {
+      $(button).html('<span class="spinner-border spinner-border-sm"></span>');
+    } else {
+      $(button).html('<i class="material-icons">check</i>');
+    }
+  }
+
+  /**
+   * @param {HTMLElement} button
+   * @param {Boolean} visible
+   *
+   * @private
+   */
+  toggleError(button, error) {
+    const input = this.findInput(button);
+
+    $(input).toggleClass('is-invalid', error);
+  }
+
+  /**
+   * @param {HTMLElement} input
+   *
+   * @returns {HTMLElement}
+   *
+   * @private
+   */
+  findButton(input) {
+    return $(input)
+      .closest(this.wrapperSelector)
+      .find(this.buttonSelector)[0];
+  }
+
+  /**
+   * @param {HTMLElement} domElement
+   *
+   * @returns {HTMLElement}
+   *
+   * @private
+   */
+  findInput(domElement) {
+    return $(domElement)
+      .closest(this.wrapperSelector)
+      .find(this.inputSelector)[0];
+  }
+
+  /**
+   * @param {HTMLElement} input
+   *
+   * @returns {Boolean}
+   *
+   * @private
+   */
+  inputValueChanged(input) {
+    const initialValue = $(input).data('initial-value');
+    let newValue = $(input).val();
+
+    if ($(input).hasClass('is-invalid')) {
+      $(input).removeClass('is-invalid');
+    }
+
+    if (typeof initialValue === 'number') {
+      newValue = Number(newValue);
+    }
+
+    return initialValue !== newValue;
+  }
+}

admin-kalsport/themes/new-theme/js/components/form/text-with-length-counter.js

@@ -0,0 +1,59 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * TextWithLengthCounter handles input with length counter UI.
+ *
+ * Usage:
+ *
+ * There must be an element that wraps both input & counter display with ".js-text-with-length-counter" class.
+ * Counter display must have ".js-countable-text-display" class and input must have ".js-countable-text-input" class.
+ * Text input must have "data-max-length" attribute.
+ *
+ * <div class="js-text-with-length-counter">
+ *  <span class="js-countable-text"></span>
+ *  <input class="js-countable-input" data-max-length="255">
+ * </div>
+ *
+ * In Javascript you must enable this component:
+ *
+ * new TextWithLengthCounter();
+ */
+export default class TextWithLengthCounter {
+  constructor() {
+    this.wrapperSelector = '.js-text-with-length-counter';
+    this.textSelector = '.js-countable-text';
+    this.inputSelector = '.js-countable-input';
+
+    $(document).on('input', `${this.wrapperSelector} ${this.inputSelector}`, (e) => {
+      const $input = $(e.currentTarget);
+      const remainingLength = $input.data('max-length') - $input.val().length;
+
+      $input.closest(this.wrapperSelector).find(this.textSelector).text(remainingLength);
+    });
+  }
+}

admin-kalsport/themes/new-theme/js/components/form/text-with-recommended-length-counter.js

@@ -0,0 +1,59 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * This component is implemented to work with TextWithRecommendedLengthType,
+ * but can be used as standalone component as well.
+ *
+ * Usage:
+ *
+ * Define your HTML with input and counter. Example:
+ *
+ * <input id="myInput"
+ *        class="js-recommended-length-input"
+ *        data-recommended-length-counter="#myInput_recommended_length_counter"
+ * >
+ *
+ * <div id"myInput_recommended_length_counter">
+ *  <span class="js-current-length">0</span> of 70 characters used (recommended)
+ * </div>
+ *
+ * NOTE: You must use exactly the same Classes, but IDs can be different!
+ *
+ * Then enable component in JavaScript:
+ *
+ * new TextWithRecommendedLengthCounter();
+ */
+export default class TextWithRecommendedLengthCounter {
+  constructor() {
+    $(document).on('input', '.js-recommended-length-input', (event) => {
+      const $input = $(event.currentTarget);
+
+      $($input.data('recommended-length-counter')).find('.js-current-length').text($input.val().length);
+    });
+  }
+}

admin-kalsport/themes/new-theme/js/components/form/translatable-choice.js

@@ -0,0 +1,69 @@
+/**
+ * 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)
+ */
+
+const {$} = window;
+
+/**
+ * Component responsible for filtering select values by language selected.
+ */
+export default class TranslatableChoice {
+  constructor() {
+    // registers the event which displays the popover
+    $(document).on('change', 'select.translatable_choice_language', (event) => {
+      this.filterSelect(event);
+    });
+
+    $('select.translatable_choice_language').trigger('change');
+  }
+
+  filterSelect(event) {
+    const $element = $(event.currentTarget);
+    const $formGroup = $element.closest('.form-group');
+    const language = $element.find('option:selected').val();
+
+    // show all the languages selects
+    $formGroup.find(`select.translatable_choice[data-language="${language}"]`).parent().show();
+
+    const $selects = $formGroup.find('select.translatable_choice');
+
+    // Hide all the selects not corresponding to the language selected
+    $selects.not(`select.translatable_choice[data-language="${language}"]`).each((index, item) => {
+      $(item).parent().hide();
+    });
+
+    // Bind choice selection to fill the hidden input
+    this.bindValueSelection($selects);
+  }
+
+  bindValueSelection($selects) {
+    $selects.each((index, element) => {
+      $(element).on('change', (event) => {
+        const $select = $(event.currentTarget);
+        const selectId = $select.attr('id');
+        $(`#${selectId}_value`).val($select.find('option:selected').val());
+      });
+    });
+  }
+}