fix(pwa): multicurrency support in expense & advance forms

frontend/src/components/ExpenseAdvancesTable.vue

@@ -21,7 +21,7 @@
 				<div class="flex flex-row items-start gap-3">
 					<FormControl
 						type="checkbox"
-						class="mt-[0.5px]"
+						class="mt-[1.5px]"
 						v-model="advance.selected"
 						:disabled="isReadOnly"
 					/>
@@ -34,7 +34,7 @@
 							<div class="text-xs font-normal text-gray-500">
 								{{ __("{0}: {1}", [
 									__("Unclaimed Amount"),
-									formatCurrency(advance.unclaimed_amount, currency),
+									formatCurrency(advance.unclaimed_amount, expenseClaim.currency),
 								]) }}
 							</div>
 						</div>
@@ -74,17 +74,13 @@ const props = defineProps({
 		type: Object,
 		required: true,
 	},
-	currency: {
-		type: String,
-		required: true,
-	},
 	isReadOnly: {
 		type: Boolean,
 		default: false,
 	},
 })
 
-const currencySymbol = computed(() => getCurrencySymbol(props.currency))
+const currencySymbol = computed(() => getCurrencySymbol(props.expenseClaim.currency))
 
 function toggleAdvanceSelection(advance) {
 	if (props.isReadOnly) return

frontend/src/components/ExpenseClaimItem.vue

@@ -14,7 +14,7 @@
 					<span>{{ claimDates }}</span>
 					<span class="whitespace-pre"> &middot; </span>
 					<span class="whitespace-nowrap">
-						{{ formatCurrency(props.doc.total_claimed_amount, currency) }}
+						{{ formatCurrency(props.doc.total_claimed_amount, props.doc.currency) }}
 					</span>
 				</div>
 			</div>
@@ -33,7 +33,6 @@ import { computed, inject } from "vue"
 import ListItem from "@/components/ListItem.vue"
 import ExpenseIcon from "@/components/icons/ExpenseIcon.vue"
 
-import { getCompanyCurrency } from "@/data/currencies"
 import { formatCurrency } from "@/utils/formatters"
 
 const dayjs = inject("$dayjs")
@@ -99,7 +98,6 @@ const claimDates = computed(() => {
 	}
 })
 
-const currency = computed(() => getCompanyCurrency(props.doc.company))
 
 const approvalStatus = computed(() => {
 	return props.doc.approval_status === "Draft" ? "Pending" : props.doc.approval_status

frontend/src/components/ExpenseItems.vue

@@ -21,7 +21,7 @@
 									{{
 										__("{0}: {1}", [
 											__("Sanctioned"),
-											formatCurrency(item.sanctioned_amount || 0, currency),
+											formatCurrency(item.sanctioned_amount || 0, doc.currency),
 										])
 									}}
 								</span>
@@ -33,7 +33,7 @@
 						</div>
 					</div>
 					<span class="text-gray-700 font-normal rounded text-base">
-						{{ formatCurrency(item.amount, currency) }}
+						{{ formatCurrency(item.amount, doc.currency) }}
 					</span>
 				</div>
 			</div>
@@ -42,9 +42,8 @@
 </template>
 
 <script setup>
-import { computed, inject } from "vue"
+import { inject } from "vue"
 
-import { getCompanyCurrency } from "@/data/currencies"
 import { formatCurrency } from "@/utils/formatters"
 
 const props = defineProps({
@@ -55,5 +54,4 @@ const props = defineProps({
 })
 
 const dayjs = inject("$dayjs")
-const currency = computed(() => getCompanyCurrency(props.doc.company))
 </script>

frontend/src/components/ExpenseTaxesTable.vue

@@ -4,7 +4,7 @@
 			<h2 class="text-base font-semibold text-gray-800">{{ __("Taxes & Charges") }} </h2>
 			<div class="flex flex-row gap-3 items-center">
 				<span class="text-base font-semibold text-gray-800">
-					{{ formatCurrency(expenseClaim.total_taxes_and_charges, currency) }}
+					{{ formatCurrency(expenseClaim.total_taxes_and_charges, expenseClaim.currency) }}
 				</span>
 				<Button
 					v-if="!isReadOnly"
@@ -35,17 +35,17 @@
 									{{ item.account_head }}
 								</div>
 								<div class="text-xs font-normal text-gray-500">
-									<span> Rate: {{ formatCurrency(item.rate, currency) }} </span>
+									<span> Rate: {{ formatCurrency(item.rate, expenseClaim.currency) }} </span>
 									<span class="whitespace-pre"> &middot; </span>
 									<span class="whitespace-nowrap">
-										Amount: {{ formatCurrency(item.tax_amount, currency) }}
+										Amount: {{ formatCurrency(item.tax_amount, expenseClaim.currency) }}
 									</span>
 								</div>
 							</div>
 						</div>
 						<div class="flex flex-row justify-end items-center gap-2">
 							<span class="text-gray-700 font-normal rounded text-base">
-								{{ formatCurrency(item.total, currency) }}
+								{{ formatCurrency(item.total, expenseClaim.currency) }}
 							</span>
 							<FeatherIcon name="chevron-right" class="h-5 w-5 text-gray-500" />
 						</div>
@@ -134,16 +134,13 @@ import EmptyState from "@/components/EmptyState.vue"
 import CustomIonModal from "@/components/CustomIonModal.vue"
 
 import { formatCurrency } from "@/utils/formatters"
+import { useCurrencyConversion } from "@/composables/useCurrencyConversion"
 
 const props = defineProps({
 	expenseClaim: {
 		type: Object,
 		required: true,
 	},
-	currency: {
-		type: String,
-		required: true,
-	},
 	isReadOnly: {
 		type: Boolean,
 		default: false,
@@ -215,6 +212,13 @@ const taxesTableFields = createResource({
 })
 taxesTableFields.reload()
 
+const expenseClaimRef = computed(() => props.expenseClaim)
+useCurrencyConversion(
+	taxesTableFields,
+	expenseClaimRef,
+	["tax_amount", "total"]
+)
+
 const modalTitle = computed(() => {
 	if (props.isReadOnly) return __("Expense Tax")
 

frontend/src/components/ExpensesTable.vue

@@ -4,7 +4,7 @@
 		<h2 class="text-base font-semibold text-gray-800">{{ __("Expenses") }} </h2>
 		<div class="flex flex-row gap-3 items-center">
 			<span class="text-base font-semibold text-gray-800">
-				{{ formatCurrency(expenseClaim.total_claimed_amount, currency) }}
+				{{ formatCurrency(expenseClaim.total_claimed_amount, expenseClaim.currency) }}
 			</span>
 			<Button
 				v-if="!isReadOnly"
@@ -40,7 +40,7 @@
 									{{
 										__("{0}: {1}", [
 											__("Sanctioned"),
-											formatCurrency(item.sanctioned_amount || 0, currency),
+											formatCurrency(item.sanctioned_amount || 0, expenseClaim.currency),
 										])
 									}}
 								</span>
@@ -53,7 +53,7 @@
 					</div>
 					<div class="flex flex-row justify-end items-center gap-2">
 						<span class="text-gray-700 font-normal rounded text-base">
-							{{ formatCurrency(item.amount, currency) }}
+							{{ formatCurrency(item.amount, expenseClaim.currency) }}
 						</span>
 						<FeatherIcon name="chevron-right" class="h-5 w-5 text-gray-500" />
 					</div>
@@ -75,7 +75,7 @@
 					</span>
 				</div>
 				<div class="w-full flex flex-col items-center justify-center gap-5 p-4 max-h-[80vh]">
-					<div class="flex flex-col w-full space-y-4 overflow-y-auto">
+					<div class="flex flex-col w-full space-y-4 overflow-y-auto px-0.5">
 						<FormField
 							v-for="field in expensesTableFields.data"
 							:key="field.fieldname"
@@ -140,15 +140,13 @@ import CustomIonModal from "@/components/CustomIonModal.vue"
 import { claimTypesByID } from "@/data/claims"
 import { formatCurrency } from "@/utils/formatters"
 
+import { useCurrencyConversion } from "@/composables/useCurrencyConversion"
+
 const props = defineProps({
 	expenseClaim: {
 		type: Object,
 		required: true,
 	},
-	currency: {
-		type: String,
-		required: true,
-	},
 	isReadOnly: {
 		type: Boolean,
 		default: false,
@@ -201,12 +199,19 @@ const expensesTableFields = createResource({
 	url: "hrms.api.get_doctype_fields",
 	params: { doctype: "Expense Claim Detail" },
 	transform(data) {
-		const excludeFields = ["description_sb", "amounts_sb"]
+		const excludeFields = ["description_sb", "amounts_sb", "base_amount", "base_sanctioned_amount"]
 		return data.filter((field) => !excludeFields.includes(field.fieldname))
 	},
 })
 expensesTableFields.reload()
 
+const expenseClaimRef = computed(() => props.expenseClaim)
+useCurrencyConversion(
+	expensesTableFields,
+	expenseClaimRef,
+	["amount", "sanctioned_amount"]
+)
+
 const modalTitle = computed(() => {
 	if (props.isReadOnly) return __("Expense Item")
 

frontend/src/components/FormView.vue

@@ -386,7 +386,7 @@ const props = defineProps({
 		default: false,
 	},
 })
-const emit = defineEmits(["validateForm", "update:modelValue"])
+const emit = defineEmits(["validateForm", "update:modelValue", "formReloaded"])
 const router = useRouter()
 const { downloadPDF } = useDownloadPDF()
 
@@ -553,7 +553,6 @@ const docList = createListResource({
 const documentResource = createDocumentResource({
 	doctype: props.doctype,
 	name: props.id,
-	fields: "*",
 	setValue: {
 		onSuccess() {
 			toast({
@@ -674,7 +673,7 @@ async function handleDocUpdate(action) {
 		} else if (action == "cancel") {
 			params.docstatus = 2
 		}
-		
+
 		await documentResource.setValue.submit(params)
 		await documentResource.get.promise
 		resetForm()
@@ -720,6 +719,7 @@ function resetForm() {
 	nextTick(() => {
 		isFormDirty.value = false
 		isFormUpdated.value = true
+		emit("formReloaded")
 	})
 }
 function handleDownload() {

frontend/src/components/Link.vue

@@ -43,8 +43,11 @@ const searchText = ref("")
 const value = computed({
 	get: () => props.modelValue,
 	set: (val) => {
-		const newVal = (val && typeof val === "object" && val.value !== undefined) ? val.value : val
-		emit("update:modelValue", newVal || "")
+		if (typeof val === "string") {
+			emit("update:modelValue", val)
+		} else {
+			emit("update:modelValue", val?.value || "")
+		}
 	},
 })
 
@@ -72,28 +75,30 @@ const reloadOptions = (searchTextVal) => {
 		params: {
 			txt: searchTextVal,
 			doctype: props.doctype,
-			filters: props.filters
+			filters: props.filters,
 		},
 	})
 	options.reload()
 }
 
 const handleQueryUpdate = debounce((newQuery) => {
-    const val = newQuery || ""
-
-    if (val === "" && props.modelValue) return
-
-    if (searchText.value === val) return
-    searchText.value = val
-    reloadOptions(val)
+	const val = newQuery || ""
+	if (searchText.value === val) return
+	searchText.value = val
+	reloadOptions(val)
 }, 300)
 
 watch(
 	() => props.doctype,
 	() => {
 		if (!props.doctype || props.doctype === options.doctype) return
-		reloadOptions(props.modelValue)
+		reloadOptions("")
 	},
 	{ immediate: true }
 )
+
+watch(
+	() => props.filters,
+	() => reloadOptions(''),
+)
 </script>

frontend/src/components/ListView.vue

@@ -284,7 +284,7 @@ const documents = createResource({
 
 const createPermission = createResource({
 	url: "frappe.client.has_permission",
-	params: { doctype: props.doctype, docname: null, perm_type: "create" },
+	params: { doctype: props.doctype, docname: "", perm_type: "create" },
 	auto: true,
 })
 

frontend/src/composables/useCurrencyConversion.js

@@ -0,0 +1,41 @@
+import { watch } from "vue"
+
+export function useCurrencyConversion(formFields, docRef, fieldsToConvert = []) {
+	/**
+	 * Accepts a formFields resource, a doc ref and an array of fieldnames which are currency fields and need to have the currency in their label
+	 * Watches and updates the labels of the currency fields to include the currency in labels
+	 */
+	const currencyFields = new Set([...fieldsToConvert])
+
+	const updateLabels = () => {
+		formFields.data?.forEach((field) => {
+			if (!field?.fieldname) return
+			if (!currencyFields.has(field.fieldname)) return
+
+			if (!field._original_label && field.label) {
+				field._original_label = field.label.replace(/\([^\)]*\)/g, "").trim()
+			}
+			if (currencyFields.has(field.fieldname)) {
+				field.label = `${field._original_label} (${docRef.value.currency})`
+			}
+		})
+	}
+
+	watch(
+		() => docRef.value?.currency,
+		() => {
+			updateLabels()
+		},
+		{ immediate: true }
+	)
+
+	watch(
+		() => formFields.data,
+		() => {
+			updateLabels()
+		},
+		{ deep: true, immediate: true }
+	)
+
+	return { updateLabels }
+}

frontend/src/data/currencies.js

@@ -21,3 +21,13 @@ export function getCompanyCurrencySymbol(company) {
 export function getCurrencySymbol(currency) {
 	return currencySymbols?.data?.[currency]
 }
+
+export const currencyPrecision = createResource({
+	url: "frappe.client.get_single_value",
+	params: {
+		doctype: "System Settings",
+		field: "currency_precision"
+	},
+	auto: true,
+	initialData: 2
+});