update
This commit is contained in:
@@ -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="row">
|
||||
<div class="col-4">
|
||||
<h4>{{ $t('step.symbol') }}</h4>
|
||||
<input
|
||||
type="text"
|
||||
v-model="customSymbol"
|
||||
>
|
||||
</div>
|
||||
<div class="col-8 border-left">
|
||||
<h4>{{ $t('step.format') }}</h4>
|
||||
<div class="row">
|
||||
<div
|
||||
class="ps-radio col-6"
|
||||
v-for="(pattern, transformation) in availableFormats"
|
||||
:key="transformation"
|
||||
:id="transformation"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
:checked="transformation === customTransformation"
|
||||
:value="transformation"
|
||||
>
|
||||
<label @click.prevent.stop="customTransformation = transformation">
|
||||
{{ displayPattern(pattern) }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {NumberFormatter} from '@app/cldr';
|
||||
|
||||
export default {
|
||||
name: 'CurrencyFormatForm',
|
||||
data: () => ({
|
||||
value: {
|
||||
symbol: '',
|
||||
transformation: '',
|
||||
},
|
||||
}),
|
||||
props: {
|
||||
language: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
availableFormats() {
|
||||
return this.language.transformations;
|
||||
},
|
||||
customSymbol: {
|
||||
get() {
|
||||
return this.value.symbol;
|
||||
},
|
||||
set(symbol) {
|
||||
this.value.symbol = symbol;
|
||||
this.$emit('input', this.value);
|
||||
},
|
||||
},
|
||||
customTransformation: {
|
||||
get() {
|
||||
return this.value.transformation;
|
||||
},
|
||||
set(transformation) {
|
||||
this.value.transformation = transformation;
|
||||
this.$emit('input', this.value);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
displayPattern(pattern) {
|
||||
const patterns = pattern.split(';');
|
||||
const priceSpecification = {...this.language.priceSpecification};
|
||||
priceSpecification.positivePattern = patterns[0];
|
||||
priceSpecification.negativePattern = patterns.length > 1 ? patterns[1] : `-${pattern}`;
|
||||
priceSpecification.currencySymbol = this.customSymbol;
|
||||
|
||||
const currencyFormatter = NumberFormatter.build(priceSpecification);
|
||||
|
||||
return currencyFormatter.format(14251999.42);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.customSymbol = this.language.priceSpecification.currencySymbol;
|
||||
const currencyPattern = this.language.priceSpecification.positivePattern;
|
||||
|
||||
// Detect which transformation matches the language pattern
|
||||
/* eslint-disable-next-line no-restricted-syntax,guard-for-in */
|
||||
for (const transformation in this.language.transformations) {
|
||||
const transformationPatterns = this.language.transformations[transformation].split(';');
|
||||
|
||||
if (transformationPatterns[0] === currencyPattern) {
|
||||
this.customTransformation = transformation;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -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
|
||||
:id="id"
|
||||
class="card-block row"
|
||||
>
|
||||
<div class="col-sm">
|
||||
<language-list
|
||||
v-if="languagesCount"
|
||||
:languages="languages"
|
||||
@selectLanguage="selectLanguage"
|
||||
@resetLanguage="resetLanguage"
|
||||
/>
|
||||
|
||||
<currency-modal
|
||||
:language="selectedLanguage"
|
||||
@close="closeModal"
|
||||
@applyCustomization="applyCustomization"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {showGrowl} from '@app/utils/growl';
|
||||
import LanguageList from './LanguageList';
|
||||
import CurrencyModal from './CurrencyModal';
|
||||
|
||||
export default {
|
||||
name: 'CurrencyFormatter',
|
||||
data: () => ({selectedLanguage: null}),
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
languages: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
currencyData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: {LanguageList, CurrencyModal},
|
||||
computed: {
|
||||
languagesCount() {
|
||||
return this.languages.length;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.selectedLanguage = null;
|
||||
},
|
||||
selectLanguage(language) {
|
||||
this.selectedLanguage = language;
|
||||
},
|
||||
resetLanguage(language) {
|
||||
const patterns = language.currencyPattern.split(';');
|
||||
language.priceSpecification.positivePattern = patterns[0];
|
||||
language.priceSpecification.negativePattern = patterns.length > 1 ? patterns[1] : `-${patterns[0]}`;
|
||||
language.priceSpecification.currencySymbol = language.currencySymbol;
|
||||
|
||||
this.currencyData.transformations[language.id] = '';
|
||||
this.currencyData.symbols[language.id] = language.currencySymbol;
|
||||
|
||||
showGrowl('success', this.$t('list.reset.success'));
|
||||
},
|
||||
applyCustomization(customData) {
|
||||
const selectedPattern = this.selectedLanguage.transformations[
|
||||
customData.transformation
|
||||
];
|
||||
const patterns = selectedPattern.split(';');
|
||||
|
||||
this.selectedLanguage.priceSpecification.currencySymbol = customData.symbol;
|
||||
this.selectedLanguage.priceSpecification.positivePattern = patterns[0];
|
||||
// eslint-disable-next-line
|
||||
this.selectedLanguage.priceSpecification.negativePattern =
|
||||
patterns.length > 1 ? patterns[1] : `-${patterns[0]}`;
|
||||
|
||||
this.currencyData.transformations[this.selectedLanguage.id] = customData.transformation;
|
||||
this.currencyData.symbols[this.selectedLanguage.id] = customData.symbol;
|
||||
|
||||
this.closeModal();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!--**
|
||||
* 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>
|
||||
<modal
|
||||
confirmation
|
||||
:modal-title="modalTitle"
|
||||
@close="$emit('close')"
|
||||
@confirm="$emit('applyCustomization', customData)"
|
||||
v-if="language !== null"
|
||||
>
|
||||
<template slot="body">
|
||||
<currency-format-form
|
||||
:language="language"
|
||||
@input="customData = $event"
|
||||
/>
|
||||
</template>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from '@vue/components/Modal';
|
||||
import CurrencyFormatForm from './CurrencyFormatForm';
|
||||
|
||||
export default {
|
||||
name: 'CurrencyModal',
|
||||
data: () => ({
|
||||
customData: null,
|
||||
}),
|
||||
components: {
|
||||
CurrencyFormatForm,
|
||||
Modal,
|
||||
},
|
||||
props: {
|
||||
language: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
modalTitle() {
|
||||
return this.$t('modal.title') + (this.language !== null ? ` + ${this.language.name}` : '');
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!--**
|
||||
* 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>
|
||||
<table class="grid-table js-grid-table table">
|
||||
<thead class="thead-default">
|
||||
<tr class="column-headers">
|
||||
<th scope="col">
|
||||
{{ $t('list.language') }}
|
||||
</th>
|
||||
<th scope="col">
|
||||
{{ $t('list.example') }}
|
||||
</th>
|
||||
<th scope="col">
|
||||
<div class="text-right">
|
||||
{{ $t('list.edit') }}
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col">
|
||||
<div class="grid-actions-header-text">
|
||||
{{ $t('list.reset') }}
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="language in languages"
|
||||
:key="language.id"
|
||||
>
|
||||
<td>
|
||||
{{ language.name }}
|
||||
</td>
|
||||
<td>
|
||||
{{ displayFormat(language) }}
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group-action text-right">
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
@click.prevent.stop="$emit('selectLanguage', language)"
|
||||
>
|
||||
<i class="material-icons">edit</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group-action text-right">
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
@click.prevent.stop="$emit('resetLanguage', language)"
|
||||
>
|
||||
<i class="material-icons">refresh</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {NumberFormatter} from '@app/cldr';
|
||||
|
||||
export default {
|
||||
name: 'LanguageList',
|
||||
props: {
|
||||
languages: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
displayFormat(language) {
|
||||
const currencyFormatter = NumberFormatter.build(language.priceSpecification);
|
||||
|
||||
return this.$t('list.example.format', {
|
||||
'%price%': currencyFormatter.format(14251999.42),
|
||||
'%discount%': currencyFormatter.format(-566.268),
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user