ACQUI-110: Add a currency formatting method

This commit adds a utility method to the vue app to format a value with the currency
PTFS-Europe · Mar 8, 2024 · 2b46fd4 · 2b46fd4
1 parent e506d69
commit 2b46fd4
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 72 deletions.
diff --git a/src/components/FundManagement/AccountingView.vue b/src/components/FundManagement/AccountingView.vue
@@ -10,24 +10,24 @@
             </tr>
             <tr>
                 <td>Increase in allocation</td>
-                <td>{{ formatValue(data.allocation_increase) }}</td>
+                <td>{{ formatValueWithCurrency(currency, data.allocation_increase) }}</td>
                 <td class="centre_column"></td>
                 <td>Encumbered</td>
-                <td>{{ formatValue() }}</td>
+                <td>{{ formatValueWithCurrency(currency) }}</td>
             </tr>
             <tr>
                 <td>Decrease in allocation</td>
-                <td>{{ formatValue(data.allocation_decrease) }}</td>
+                <td>{{ formatValueWithCurrency(currency, data.allocation_decrease) }}</td>
                 <td class="centre_column"></td>
                 <td>Awaiting payment</td>
-                <td>{{ formatValue() }}</td>
+                <td>{{ formatValueWithCurrency(currency) }}</td>
             </tr>
             <tr>
                 <td>Total allocated</td>
-                <td>{{ formatValue(data.total_allocation) }}</td>
+                <td>{{ formatValueWithCurrency(currency, data.total_allocation) }}</td>
                 <td class="centre_column"></td>
                 <td>Expended</td>
-                <td>{{ formatValue() }}</td>
+                <td>{{ formatValueWithCurrency(currency) }}</td>
             </tr>
             <tr>
                 <td class="centre_column"></td>
@@ -38,50 +38,46 @@
             </tr>
             <tr>
                 <td>Net transfers</td>
-                <td>{{ formatValue(data.net_transfers) }}</td>
+                <td>{{ formatValueWithCurrency(currency, data.net_transfers) }}</td>
                 <td class="centre_column"></td>
                 <td>Over encumbrance</td>
-                <td>{{ formatValue() }}</td>
+                <td>{{ formatValueWithCurrency(currency) }}</td>
             </tr>
             <tr>
                 <td>Total funding</td>
-                <td>{{ formatValue(data.total_allocation) }}</td>
+                <td>{{ formatValueWithCurrency(currency, data.total_allocation) }}</td>
                 <td class="centre_column"></td>
                 <td>Over expended</td>
-                <td>{{ formatValue() }}</td>
+                <td>{{ formatValueWithCurrency(currency) }}</td>
             </tr>
             <tr>
                 <td>Cash balance</td>
-                <td>{{ formatValue(data.total_allocation) }}</td>
+                <td>{{ formatValueWithCurrency(currency, data.total_allocation) }}</td>
                 <td class="centre_column"></td>
                 <td>Available balance</td>
-                <td>{{ formatValue(data.total_allocation) }}</td>
+                <td>{{ formatValueWithCurrency(currency, data.total_allocation) }}</td>
             </tr>
         </table>
     </div>
 </template>
 
 <script>
+import { inject } from "vue"
+
 export default {
     setup() {
-        
+        const acquisitionsStore = inject("acquisitionsStore")
+        const { 
+            formatValueWithCurrency
+        } = acquisitionsStore
+
+        return {
+            formatValueWithCurrency
+        }
     },
     props: {
         data: Object,
-        currencySymbol: String
-    },
-    methods: {
-        formatValue(value) {
-            if(!value) {
-                return `${this.currencySymbol}0`
-            }
-            if(value >= 0) {
-                return `${this.currencySymbol}${value}`
-            }
-            if(value < 0) {
-                return `-${this.currencySymbol}${-value}`
-            }
-        }
+        currency: String
     }
 }
 

diff --git a/src/components/FundManagement/FiscalYearShow.vue b/src/components/FundManagement/FiscalYearShow.vue
@@ -58,7 +58,7 @@ export default {
         const acquisitionsStore = inject("acquisitionsStore")
         const { 
             isUserPermitted,
-            getCurrency
+            formatValueWithCurrency
         } = acquisitionsStore
 
         const table = ref()
@@ -67,7 +67,7 @@ export default {
             setConfirmationDialog,
             setMessage,
             isUserPermitted,
-            getCurrency,
+            formatValueWithCurrency,
             table
         }
     },
@@ -158,7 +158,7 @@ export default {
             )
         },
         getTableColumns: function () {
-            const getCurrency = this.getCurrency
+            const formatValueWithCurrency = this.formatValueWithCurrency
             return [
                 {
                     title: __("Name"),
@@ -205,8 +205,7 @@ export default {
                     orderable: true,
                     render: function (data, type, row, meta) {
                         const sum = row.koha_plugin_acquire_funds.reduce((acc, curr) => acc + curr.fund_value, 0)
-                        const { symbol } = getCurrency(row.currency)
-                        return symbol + sum
+                        return formatValueWithCurrency(row.currency, sum)
                     },
                 },
             ]

diff --git a/src/components/FundManagement/FundList.vue b/src/components/FundManagement/FundList.vue
@@ -37,7 +37,7 @@ export default {
         const acquisitionsStore = inject("acquisitionsStore")
         const { 
             isUserPermitted,
-            getCurrency
+            formatValueWithCurrency
         } = acquisitionsStore
 
         const table = ref()
@@ -46,7 +46,7 @@ export default {
             table,
             setConfirmationDialog,
             setMessage,
-            getCurrency,
+            formatValueWithCurrency,
             isUserPermitted
         }
     },
@@ -116,7 +116,7 @@ export default {
             )
         },
         getTableColumns: function () {
-            const getCurrency = this.getCurrency
+            const formatValueWithCurrency = this.formatValueWithCurrency
             return [
                 {
                     title: __("Name"),
@@ -154,8 +154,7 @@ export default {
                     searchable: true,
                     orderable: true,
                     render: function (data, type, row, meta) {
-                        const { symbol } = getCurrency(row.currency)
-                        return symbol + row.fund_value
+                        return formatValueWithCurrency(row.currency, row.fund_value)
                     },
                 },
             ]

diff --git a/src/components/FundManagement/FundShow.vue b/src/components/FundManagement/FundShow.vue
@@ -42,7 +42,7 @@
             />
             <AccountingView 
                 :data="fund"
-                :currencySymbol="currency.symbol"
+                :currency="fund.currency"
             />
         </div>
     </div>
@@ -74,7 +74,7 @@ export default {
         const acquisitionsStore = inject("acquisitionsStore")
         const { 
             isUserPermitted,
-            getCurrency
+            formatValueWithCurrency
         } = acquisitionsStore
 
         const table = ref()
@@ -84,7 +84,7 @@ export default {
             setMessage,
             setWarning,
             isUserPermitted,
-            getCurrency,
+            formatValueWithCurrency,
             table
         }
     },
@@ -100,8 +100,7 @@ export default {
                 actions: {
                     0: ["show"]
                 },
-            },
-            currency: null,
+            }
         }
     },
     beforeRouteEnter(to, from, next) {
@@ -115,7 +114,6 @@ export default {
             await client.funds.get(fund_id, "fiscal_yr,ledger,koha_plugin_acquire_fund_allocations").then(
                 fund => {
                     this.fund = fund
-                    this.currency = this.getCurrency(fund.currency)
                     this.initialized = true
                 },
                 error => {}
@@ -142,7 +140,7 @@ export default {
             )
         },
         getTableColumns: function () {
-            const getCurrency = this.getCurrency
+            const formatValueWithCurrency = this.formatValueWithCurrency
             return [
                 {
                     title: __("Date"),
@@ -172,8 +170,7 @@ export default {
                     searchable: true,
                     orderable: true,
                     render: function (data, type, row, meta) {
-                        const { symbol } = getCurrency(row.currency)
-                        return symbol + row.new_fund_value
+                        return formatValueWithCurrency(row.currency, row.new_fund_value)
                     },
                 },
                 {

diff --git a/src/components/FundManagement/LedgerList.vue b/src/components/FundManagement/LedgerList.vue
@@ -37,7 +37,7 @@ export default {
         const acquisitionsStore = inject("acquisitionsStore")
         const { 
             isUserPermitted,
-            getCurrency
+            formatValueWithCurrency
         } = acquisitionsStore
 
         const table = ref()
@@ -47,7 +47,7 @@ export default {
             setConfirmationDialog,
             setMessage,
             isUserPermitted,
-            getCurrency
+            formatValueWithCurrency
         }
     },
     data() {
@@ -116,7 +116,7 @@ export default {
             )
         },
         getTableColumns: function () {
-            const getCurrency = this.getCurrency
+            const formatValueWithCurrency = this.formatValueWithCurrency
             return [
                 {
                     title: __("Name"),
@@ -163,8 +163,7 @@ export default {
                     orderable: true,
                     render: function (data, type, row, meta) {
                         const sum = row.koha_plugin_acquire_funds.reduce((acc, curr) => acc + curr.fund_value, 0)
-                        const { symbol } = getCurrency(row.currency)
-                        return symbol + sum
+                        return formatValueWithCurrency(row.currency, sum)
                     },
                 },
             ]

diff --git a/src/components/FundManagement/LedgerShow.vue b/src/components/FundManagement/LedgerShow.vue
@@ -30,7 +30,7 @@
             />
             <AccountingView 
                 :data="ledger"
-                :currencySymbol="currency.symbol"
+                :currency="ledger.currency"
             />
         </div>
     </div>
@@ -62,14 +62,14 @@ export default {
         const acquisitionsStore = inject("acquisitionsStore")
         const { 
             isUserPermitted,
-            getCurrency
+            formatValueWithCurrency
         } = acquisitionsStore
 
         return {
             setConfirmationDialog,
             setMessage,
             isUserPermitted,
-            getCurrency
+            formatValueWithCurrency
         }
     },
     data() {
@@ -100,7 +100,6 @@ export default {
             await client.ledgers.get(ledger_id, "fiscal_yr,koha_plugin_acquire_funds.koha_plugin_acquire_fund_allocations").then(
                 ledger => {
                     this.ledger = ledger
-                    this.currency = this.getCurrency(ledger.currency)
                     this.initialized = true
                 },
                 error => {}
@@ -127,7 +126,7 @@ export default {
             )
         },
         getTableColumns: function () {
-            const getCurrency = this.getCurrency
+            const formatValueWithCurrency = this.formatValueWithCurrency
             return [
                 {
                     title: __("Name"),
@@ -165,8 +164,7 @@ export default {
                     searchable: true,
                     orderable: true,
                     render: function (data, type, row, meta) {
-                        const { symbol } = getCurrency(row.currency)
-                        return symbol + row.fund_value
+                        return formatValueWithCurrency(row.currency, row.fund_value)
                     },
                 },
             ]

diff --git a/src/components/FundManagement/ValueHeader.vue b/src/components/FundManagement/ValueHeader.vue
diff --git a/src/stores/acquisitions.js b/src/stores/acquisitions.js
@@ -168,8 +168,15 @@ export const useAcquisitionsStore = defineStore("acquisitions", {
             })
             return groupIds
         },
-        getCurrency(currency) {
-            return this.currencies.find(curr => curr.currency === currency)
+        formatValueWithCurrency(currency, value) {
+            const { symbol } = this.currencies.find(curr => curr.currency === currency)
+            if(!value) {
+                return `${symbol}0`
+            }
+            if(value < 0) {
+                return `-${symbol}${-value}`
+            }
+            return `${symbol}${value}`
         }
     },
     getters: {