feat: format read-only currency fields

frontend/src/components/ExpenseTaxesTable.vue

@@ -4,7 +4,7 @@
 			<h2 class="text-lg font-semibold text-gray-800">Taxes & Charges</h2>
 			<div class="flex flex-row gap-3 items-center">
 				<span class="text-lg font-semibold text-gray-800">
-					{{ `${currency} ${expenseClaim.total_taxes_and_charges || 0}` }}
+					{{ expenseClaim.total_taxes_and_charges || 0 }}
 				</span>
 				<Button
 					id="add-taxes-modal"

frontend/src/components/ExpensesTable.vue

@@ -4,7 +4,7 @@
 		<h2 class="text-lg font-semibold text-gray-800">Expenses</h2>
 		<div class="flex flex-row gap-3 items-center">
 			<span class="text-lg font-semibold text-gray-800">
-				{{ `${currency} ${expenseClaim.total_claimed_amount || 0}` }}
+				{{ expenseClaim.total_claimed_amount || 0 }}
 			</span>
 			<Button
 				id="add-expense-modal"

frontend/src/components/FormField.vue

@@ -64,6 +64,17 @@
 			:disabled="isReadOnly"
 		/>
 
+		<!-- Read only currency field -->
+		<Input
+			v-else-if="props.fieldtype === 'Currency' && isReadOnly"
+			type="text"
+			:value="modelValue"
+			@input="(v) => emit('update:modelValue', v)"
+			@change="(v) => emit('change', v)"
+			v-bind="$attrs"
+			:disabled="isReadOnly"
+		/>
+
 		<!-- Float/Int field -->
 		<Input
 			v-else-if="isNumberType"

frontend/src/components/FormView.vue

@@ -262,6 +262,8 @@ import FormField from "@/components/FormField.vue"
 import FileUploaderView from "@/components/FileUploaderView.vue"
 
 import { FileAttachment, guessStatusColor } from "@/composables/index"
+import { getCompanyCurrency } from "@/data/currencies"
+import { formatCurrency } from "@/utils/formatters"
 
 const props = defineProps({
 	doctype: {
@@ -586,6 +588,27 @@ async function setStatusColor() {
 	}
 }
 
+async function setFormattedCurrency() {
+	const companyCurrency = await getCompanyCurrency(formModel.value.company)
+
+	props.fields.forEach((field) => {
+		if (field.fieldtype !== "Currency") return
+		if (!(field.readOnly || isFormReadOnly.value)) return
+
+		if (field.options === "currency") {
+			formModel.value[field.fieldname] = formatCurrency(
+				formModel.value[field.fieldname],
+				formModel.value.currency
+			)
+		} else {
+			formModel.value[field.fieldname] = formatCurrency(
+				formModel.value[field.fieldname],
+				companyCurrency
+			)
+		}
+	})
+}
+
 const isFormReadOnly = computed(
 	() => props.id && formModel.value.docstatus !== 0
 )
@@ -602,6 +625,7 @@ onMounted(async () => {
 		formModel.value = { ...documentResource.doc }
 		await docPermissions.fetch({ doctype: props.doctype, docname: props.id })
 		await attachedFiles.reload()
+		await setFormattedCurrency()
 		await setStatusColor()
 		isFormDirty.value = false
 	}

frontend/src/components/SalaryDetailTable.vue

@@ -3,7 +3,7 @@
 	<div class="flex flex-row justify-between items-center">
 		<h2 class="text-lg font-semibold text-gray-800">{{ type }}</h2>
 		<span class="text-lg font-semibold text-gray-800">
-			{{ formatCurrency(total, salarySlip.currency) }}
+			{{ total }}
 		</span>
 	</div>
 

frontend/src/views/salary_slip/Detail.vue

@@ -72,6 +72,9 @@ const salarySlip = ref({})
 const formFields = createResource({
 	url: "hrms.api.get_doctype_fields",
 	params: { doctype: "Salary Slip" },
+	transform(data) {
+		return getFilteredFields(data)
+	},
 })
 formFields.reload()
 
@@ -89,13 +92,9 @@ watch(
 		if (!company) return
 
 		const companyCurrency = await getCompanyCurrency(company)
+
 		formFields.data?.map((field) => {
-			// hide timesheets section if no timesheets
-			if (field.fieldname === "timesheets_section") {
-				if (!salarySlip.value?.timesheets?.length) {
-					field.hidden = true
-				}
-			} else if (field.label?.includes("Company Currency")) {
+			if (field.label?.includes("Company Currency")) {
 				if (salarySlip.value.currency === companyCurrency) {
 					// hide base currency fields
 					field.hidden = true
@@ -109,6 +108,20 @@ watch(
 	{ immediate: true }
 )
 
+function getFilteredFields(fields) {
+	const hasTimesheets = salarySlip.value?.timesheets?.length
+	if (hasTimesheets) return fields
+
+	const excludeFields = [
+		"timesheets_section",
+		"timesheets",
+		"total_working_hours",
+		"hour_rate",
+		"base_hour_rate",
+	]
+	return fields.filter((field) => !excludeFields.includes(field.fieldname))
+}
+
 function downloadPDF() {
 	const salarySlipName = salarySlip.value.name
 	loading.value = true