fix: added exchange rate provider & currency together in settings modal
(cherry picked from commit 36e79e49da2091dfca166f1c50452285577d7584)
This commit is contained in:
Shariq Ansari
Mergify
parent
c4df4d3253
commit
14a9571fdc
1
frontend/components.d.ts
vendored
1
frontend/components.d.ts
vendored
@ -62,6 +62,7 @@ declare module 'vue' {
|
|||||||
CountUpTimer: typeof import('./src/components/CountUpTimer.vue')['default']
|
CountUpTimer: typeof import('./src/components/CountUpTimer.vue')['default']
|
||||||
CreateDocumentModal: typeof import('./src/components/Modals/CreateDocumentModal.vue')['default']
|
CreateDocumentModal: typeof import('./src/components/Modals/CreateDocumentModal.vue')['default']
|
||||||
CRMLogo: typeof import('./src/components/Icons/CRMLogo.vue')['default']
|
CRMLogo: typeof import('./src/components/Icons/CRMLogo.vue')['default']
|
||||||
|
CurrencySettings: typeof import('./src/components/Settings/General/CurrencySettings.vue')['default']
|
||||||
CustomActions: typeof import('./src/components/CustomActions.vue')['default']
|
CustomActions: typeof import('./src/components/CustomActions.vue')['default']
|
||||||
DashboardGrid: typeof import('./src/components/Dashboard/DashboardGrid.vue')['default']
|
DashboardGrid: typeof import('./src/components/Dashboard/DashboardGrid.vue')['default']
|
||||||
DashboardIcon: typeof import('./src/components/Icons/DashboardIcon.vue')['default']
|
DashboardIcon: typeof import('./src/components/Icons/DashboardIcon.vue')['default']
|
||||||
|
|||||||
197
frontend/src/components/Settings/General/CurrencySettings.vue
Normal file
197
frontend/src/components/Settings/General/CurrencySettings.vue
Normal file
@ -0,0 +1,197 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex h-full flex-col gap-6 px-6 py-8 text-ink-gray-8">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex px-2 justify-between">
|
||||||
|
<div class="flex items-center gap-1 -ml-4 w-9/12">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
icon-left="chevron-left"
|
||||||
|
:label="__('Currency & Exchange Rate Provider')"
|
||||||
|
size="md"
|
||||||
|
@click="() => emit('updateStep', 'general-settings')"
|
||||||
|
class="text-xl !h-7 font-semibold hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5"
|
||||||
|
/>
|
||||||
|
<Badge
|
||||||
|
v-if="settings.isDirty"
|
||||||
|
:label="__('Not Saved')"
|
||||||
|
variant="subtle"
|
||||||
|
theme="orange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex item-center space-x-2 w-3/12 justify-end">
|
||||||
|
<Button
|
||||||
|
:label="__('Update')"
|
||||||
|
icon-left="plus"
|
||||||
|
variant="solid"
|
||||||
|
:disabled="!settings.isDirty"
|
||||||
|
:loading="settings.loading"
|
||||||
|
@click="updateSettings"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Fields -->
|
||||||
|
<div class="flex flex-1 flex-col overflow-y-auto">
|
||||||
|
<div class="flex items-center justify-between gap-8 p-3">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="text-p-base font-medium text-ink-gray-7 truncate">
|
||||||
|
{{ __('Currency') }}
|
||||||
|
</div>
|
||||||
|
<div class="text-p-sm text-ink-gray-5">
|
||||||
|
{{
|
||||||
|
__(
|
||||||
|
'CRM currency for all monetary values. Once set, cannot be edited.',
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div v-if="settings.doc?.currency" class="text-base text-ink-gray-8">
|
||||||
|
{{ settings.doc.currency }}
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
v-else
|
||||||
|
class="form-control flex-1 truncate w-40"
|
||||||
|
:value="settings.doc?.currency"
|
||||||
|
doctype="Currency"
|
||||||
|
@change="(v) => setCurrency(v)"
|
||||||
|
:placeholder="__('Select currency')"
|
||||||
|
placement="bottom-end"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-px border-t mx-2 border-outline-gray-modals" />
|
||||||
|
<div class="flex items-center justify-between gap-8 p-3">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="text-p-base font-medium text-ink-gray-7 truncate">
|
||||||
|
{{ __('Exchange Rate Provider') }}
|
||||||
|
</div>
|
||||||
|
<div class="text-p-sm text-ink-gray-5">
|
||||||
|
{{ __('Configure the exchange rate provider for your CRM') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<FormControl
|
||||||
|
type="select"
|
||||||
|
class="w-44"
|
||||||
|
v-model="settings.doc.service_provider"
|
||||||
|
:options="[
|
||||||
|
{ label: 'Frankfurter', value: 'frankfurter.app' },
|
||||||
|
{ label: 'Exchangerate Host', value: 'exchangerate.host' },
|
||||||
|
]"
|
||||||
|
:placeholder="__('Select provider')"
|
||||||
|
:disabled="!settings.doc?.currency"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="settings.doc.service_provider === 'exchangerate.host'"
|
||||||
|
class="h-px border-t mx-2 border-outline-gray-modals"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-if="settings.doc.service_provider === 'exchangerate.host'"
|
||||||
|
class="flex items-center justify-between gap-8 p-3"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="text-p-base font-medium text-ink-gray-7 truncate">
|
||||||
|
{{ __('Exchangerate Host Access Key') }}
|
||||||
|
</div>
|
||||||
|
<div class="text-p-sm text-ink-gray-5">
|
||||||
|
{{
|
||||||
|
__(
|
||||||
|
'Access key for Exchangerate Host. Required for fetching exchange rates.',
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<div class="text-p-sm text-ink-gray-5">
|
||||||
|
{{ __('You can get your access key from ') }}
|
||||||
|
<a
|
||||||
|
class="hover:underline text-ink-gray-7"
|
||||||
|
href="https://exchangerate.host/#/docs/access_key"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{{ __('exchangerate.host') }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<FormControl
|
||||||
|
type="text"
|
||||||
|
class="w-44"
|
||||||
|
v-model="settings.doc.access_key"
|
||||||
|
:placeholder="__('Enter access key')"
|
||||||
|
:disabled="!settings.doc?.currency"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="errorMessage" class="px-3">
|
||||||
|
<ErrorMessage :message="__(errorMessage)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ErrorMessage } from 'frappe-ui'
|
||||||
|
import { getSettings } from '@/stores/settings'
|
||||||
|
import { globalStore } from '@/stores/global'
|
||||||
|
import { showSettings } from '@/composables/settings'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import FormControl from 'frappe-ui/src/components/FormControl/FormControl.vue'
|
||||||
|
|
||||||
|
const { _settings: settings } = getSettings()
|
||||||
|
const { $dialog } = globalStore()
|
||||||
|
|
||||||
|
const emit = defineEmits(['updateStep'])
|
||||||
|
const errorMessage = ref('')
|
||||||
|
|
||||||
|
function updateSettings() {
|
||||||
|
settings.save.submit(null, {
|
||||||
|
validate: () => {
|
||||||
|
errorMessage.value = ''
|
||||||
|
if (!settings.doc?.currency) {
|
||||||
|
errorMessage.value = __('Please select a currency before saving.')
|
||||||
|
return errorMessage.value
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
settings.doc.service_provider === 'exchangerate.host' &&
|
||||||
|
!settings.doc.access_key
|
||||||
|
) {
|
||||||
|
errorMessage.value = __(
|
||||||
|
'Please enter the Exchangerate Host access key.',
|
||||||
|
)
|
||||||
|
return errorMessage.value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
showSettings.value = false
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function setCurrency(value) {
|
||||||
|
$dialog({
|
||||||
|
title: __('Set currency'),
|
||||||
|
message: __(
|
||||||
|
'Are you sure you want to set the currency as {0}? This cannot be changed later.',
|
||||||
|
[value],
|
||||||
|
),
|
||||||
|
variant: 'solid',
|
||||||
|
theme: 'blue',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: __('Save'),
|
||||||
|
variant: 'solid',
|
||||||
|
onClick: (close) => {
|
||||||
|
settings.doc.currency = value
|
||||||
|
settings.save.submit(null, {
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success(__('Currency set as {0} successfully', [value]))
|
||||||
|
close()
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -35,37 +35,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="h-px border-t mx-2 border-outline-gray-modals" />
|
<div class="h-px border-t mx-2 border-outline-gray-modals" />
|
||||||
<div
|
|
||||||
class="flex items-center justify-between gap-8 p-3 cursor-pointer hover:bg-surface-menu-bar rounded"
|
|
||||||
>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<div class="text-p-base font-medium text-ink-gray-7 truncate">
|
|
||||||
{{ __('Currency') }}
|
|
||||||
</div>
|
|
||||||
<div class="text-p-sm text-ink-gray-5">
|
|
||||||
{{
|
|
||||||
__(
|
|
||||||
'CRM currency for all monetary values. Once set, cannot be edited.',
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div v-if="settings.doc.currency" class="text-base text-ink-gray-8">
|
|
||||||
{{ settings.doc.currency }}
|
|
||||||
</div>
|
|
||||||
<Link
|
|
||||||
v-else
|
|
||||||
class="form-control flex-1 truncate w-40"
|
|
||||||
:value="settings.doc.currency"
|
|
||||||
doctype="Currency"
|
|
||||||
@change="(v) => setCurrency(v)"
|
|
||||||
:placeholder="__('Select currency')"
|
|
||||||
placement="bottom-end"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="h-px border-t mx-2 border-outline-gray-modals" />
|
|
||||||
<template v-for="(setting, i) in settingsList" :key="setting.name">
|
<template v-for="(setting, i) in settingsList" :key="setting.name">
|
||||||
<li
|
<li
|
||||||
class="flex items-center justify-between p-3 cursor-pointer hover:bg-surface-menu-bar rounded"
|
class="flex items-center justify-between p-3 cursor-pointer hover:bg-surface-menu-bar rounded"
|
||||||
@ -95,15 +64,19 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Link from '@/components/Controls/Link.vue'
|
import Link from '@/components/Controls/Link.vue'
|
||||||
import { getSettings } from '@/stores/settings'
|
import { getSettings } from '@/stores/settings'
|
||||||
import { globalStore } from '@/stores/global'
|
|
||||||
import { Switch, toast } from 'frappe-ui'
|
import { Switch, toast } from 'frappe-ui'
|
||||||
|
|
||||||
const emit = defineEmits(['updateStep'])
|
const emit = defineEmits(['updateStep'])
|
||||||
|
|
||||||
const { _settings: settings } = getSettings()
|
const { _settings: settings } = getSettings()
|
||||||
const { $dialog } = globalStore()
|
|
||||||
|
|
||||||
const settingsList = [
|
const settingsList = [
|
||||||
|
{
|
||||||
|
name: 'currency-settings',
|
||||||
|
label: 'Currency & Exchange Rate Provider',
|
||||||
|
description:
|
||||||
|
'Configure the currency and exchange rate provider for your CRM',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'brand-settings',
|
name: 'brand-settings',
|
||||||
label: 'Brand settings',
|
label: 'Brand settings',
|
||||||
@ -130,31 +103,4 @@ function toggleForecasting(value) {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function setCurrency(value) {
|
|
||||||
$dialog({
|
|
||||||
title: __('Set currency'),
|
|
||||||
message: __(
|
|
||||||
'Are you sure you want to set the currency as {0}? This cannot be changed later.',
|
|
||||||
[value],
|
|
||||||
),
|
|
||||||
variant: 'solid',
|
|
||||||
theme: 'blue',
|
|
||||||
actions: [
|
|
||||||
{
|
|
||||||
label: __('Save'),
|
|
||||||
variant: 'solid',
|
|
||||||
onClick: (close) => {
|
|
||||||
settings.doc.currency = value
|
|
||||||
settings.save.submit(null, {
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success(__('Currency set as {0} successfully', [value]))
|
|
||||||
close()
|
|
||||||
},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -4,6 +4,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import GeneralSettings from './GeneralSettings.vue'
|
import GeneralSettings from './GeneralSettings.vue'
|
||||||
|
import CurrencySettings from './CurrencySettings.vue'
|
||||||
import BrandSettings from './BrandSettings.vue'
|
import BrandSettings from './BrandSettings.vue'
|
||||||
import HomeActions from './HomeActions.vue'
|
import HomeActions from './HomeActions.vue'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
@ -20,6 +21,8 @@ function getComponent(step) {
|
|||||||
switch (step) {
|
switch (step) {
|
||||||
case 'general-settings':
|
case 'general-settings':
|
||||||
return GeneralSettings
|
return GeneralSettings
|
||||||
|
case 'currency-settings':
|
||||||
|
return CurrencySettings
|
||||||
case 'brand-settings':
|
case 'brand-settings':
|
||||||
return BrandSettings
|
return BrandSettings
|
||||||
case 'home-actions':
|
case 'home-actions':
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user