ACQUI-98: Add table for displaying fund allocations

This patch adds a table to the FundShow component that displays all allocations made to that fund

Koha/Plugin/Acquire/Controllers/FundManagement/FundAllocations.pm

@@ -48,7 +48,17 @@ sub list {
         my $filtered_fund_allocations =
             Koha::Plugin::Acquire::Controllers::ControllerUtils->filter_data_by_group( { dataset => $fund_allocations } );
 
-        return $c->render( status => 200, openapi => $fund_allocations );
+        my @sorted_allocations =
+            sort { $a->{fund_allocation_id} cmp $b->{fund_allocation_id} } @{$filtered_fund_allocations};
+        my $total = 0;
+        foreach my $allocation_index ( 1 .. scalar(@sorted_allocations) ) {
+            my $allocation = $sorted_allocations[ $allocation_index - 1 ];
+            $allocation->{allocation_index} = $allocation_index;
+            $total += $allocation->{allocation_amount};
+            $allocation->{new_fund_value} = $total;
+        }
+
+        return $c->render( status => 200, openapi => \@sorted_allocations );
     } catch {
         $c->unhandled_exception($_);
     };

src/components/DisplayDataFields.vue

@@ -9,7 +9,7 @@
                     />
                 </ol>
             </fieldset>
-            <fieldset class="action">
+            <fieldset v-if="showClose" class="action">
                 <router-link
                     :to="{ name: homeRoute }"
                     role="button"
@@ -29,7 +29,11 @@ export default {
     props:{
         data: Object,
         dataType: String,
-        homeRoute: String
+        homeRoute: String,
+        showClose: {
+            type: Boolean,
+            default: true
+        }
     },
     setup() {
         const AVStore = inject("AVStore")

src/components/FundManagement/FundAllocationFormAdd.vue

@@ -124,15 +124,15 @@ export default {
             const { params } = route
             this.getFunds(params).then(() => {
                 if(params.fund_allocation_id) {
-                    this.getFundAllocation()
+                    this.getFundAllocation(params.fund_allocation_id)
                 }
                 this.initialized = true
             })
         },
-        async getFundAllocation(fund_id) {
+        async getFundAllocation(fund_allocation_id) {
             const client = APIClient.acquisition
-            await client.funds.get(fund_id).then(fund_allocations => {
-                this.fund_allocations = fund_allocations
+            await client.fund_allocations.get(fund_allocation_id).then(fund_allocation => {
+                this.fund_allocation = fund_allocation
             })
         },
         async getFunds(params) {

src/components/FundManagement/FundShow.vue

@@ -27,16 +27,30 @@
             :data="fund"
             homeRoute="FundList"
             dataType="fund"
+            :showClose="false"
         />
     </div>
+    <div v-if="initialized" id="fund_allocations">
+        <div class="page-section">
+            <h3>Fund allocations</h3>
+            <KohaTable
+                ref="table"
+                v-bind="tableOptions"
+                @show="doShow"
+                @edit="doEdit"
+                @delete="doDelete"
+            ></KohaTable>
+        </div>
+    </div>
 </template>
 
 <script>
 import Toolbar from "../Toolbar.vue"
 import ToolbarButton from "../ToolbarButton.vue"
-import { inject } from "vue"
+import { inject, ref } from "vue"
 import { APIClient } from "../../fetch/api-client.js"
 import DisplayDataFields from "../DisplayDataFields.vue"
+import KohaTable from "../KohaTable.vue"
 
 export default {
     setup() {
@@ -47,16 +61,32 @@ export default {
             isUserPermitted,
         } = acquisitionsStore
 
+        const table = ref()
+
         return {
             setConfirmationDialog,
             setMessage,
-            isUserPermitted
+            isUserPermitted,
+            table
         }
     },
     data() {
+        const actionButtons = []
+        if(this.isUserPermitted('edit_fund_allocation')) { actionButtons.push("edit") }
+        if(this.isUserPermitted('delete_fund_allocation')) { actionButtons.push("delete") }
         return {
             fund: {},
             initialized: false,
+            tableOptions: {
+                columns: this.getTableColumns(),
+                url: this.tableUrl(),
+                table_settings: null,
+                add_filters: true,
+                actions: {
+                    0: ["show"],
+                    "-1": actionButtons,
+                },
+            },
         }
     },
     beforeRouteEnter(to, from, next) {
@@ -95,11 +125,90 @@ export default {
                 }
             )
         },
+        doShow: function ({ fund_allocation_id }, dt, event) {
+            event.preventDefault()
+            this.$router.push({ name: "FundAllocationShow", params: { fund_allocation_id } })
+        },
+        doEdit: function ({ fund_allocation_id }, dt, event) {
+            this.$router.push({
+                name: "FundAllocationFormEdit",
+                params: { fund_allocation_id, fund_id: this.fund.fund_id },
+            })
+        },
+        doDelete: function (fund_allocation, dt, event) {
+            this.setConfirmationDialog(
+                {
+                    title: "Are you sure you want to remove this fund allocation?",
+                    message: fund_allocation.reference,
+                    accept_label: "Yes, delete",
+                    cancel_label: "No, do not delete",
+                },
+                () => {
+                    const client = APIClient.acquisition
+                    client.tasks.delete(fund_allocation.fund_allocation_id).then(
+                        success => {
+                            this.setMessage(`Fund allocation deleted`, true)
+                            dt.draw()
+                        },
+                        error => {}
+                    )
+                }
+            )
+        },
+        getTableColumns: function () {
+            return [
+                {
+                    title: __("Allocation count"),
+                    data: "fund_allocation_id",
+                    searchable: true,
+                    orderable: true,
+                    render: function (data, type, row, meta) {
+                        return (
+                            `Allocation ${row.allocation_index}`
+                        )
+                    },
+                },
+                {
+                    title: __("Amount"),
+                    data: "allocation_amount",
+                    searchable: true,
+                    orderable: true,
+                    render: function (data, type, row, meta) {
+                        const symbol = row.allocation_amount >= 0 ? "+" : "-"
+                        const colour = row.allocation_amount >= 0 ? "green" : "red"
+                        return (
+                            '<span style="color:' + colour + ';">' + symbol + row.allocation_amount + '</span>'
+                        )
+                    },
+                },
+                {
+                    title: __("New fund total"),
+                    data: "new_fund_value",
+                    searchable: true,
+                    orderable: true,
+                },
+                {
+                    title: __("Note"),
+                    data: "note",
+                    searchable: true,
+                    orderable: true,
+                }
+            ]
+        },
+        tableUrl() {
+            const id = this.$route.params.fund_id
+            let url = "/api/v1/contrib/acquire/fund_allocations?q="
+            const query = {
+                fund_id: id
+            }
+            return url + JSON.stringify(query)
+        }
     },
     components: {
         DisplayDataFields,
         Toolbar,
-        ToolbarButton
+        ToolbarButton,
+        KohaTable
     },
 }
 </script>
@@ -110,4 +219,7 @@ export default {
     font-size: 11px;
     cursor: pointer;
 }
+#fund_allocations {
+    margin-top: 2em;
+}
 </style>

src/routes/routes.js

@@ -46,7 +46,7 @@ export const routes = [
                     },
                     {
                         path: "fiscal_year",
-                        title: "Fiscal year",
+                        title: "Fiscal years",
                         is_navigation_item: false,
                         children: [
                             {
@@ -81,7 +81,7 @@ export const routes = [
                     },
                     {
                         path: "ledger",
-                        title: "Ledger",
+                        title: "Ledgers",
                         is_navigation_item: false,
                         children: [
                             {
@@ -116,7 +116,7 @@ export const routes = [
                     },
                     {
                         path: "fund",
-                        title: "Fund",
+                        title: "Funds",
                         is_navigation_item: false,
                         children: [
                             {