From 15d94d07de2a80c02996df124a1118b8b87afe33 Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Tue, 3 May 2022 13:56:55 +0200
Subject: [PATCH] Bug 32030: ERM - Add a "show agreement" view

Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com>

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 cypress/integration/Agreements_spec.ts        |  27 +++
 .../intranet-tmpl/prog/js/vue/Agreements.vue  |  17 +-
 .../js/vue/components/ERM/AgreementsList.vue  |  29 ++-
 .../js/vue/components/ERM/AgreementsShow.vue  | 199 ++++++++++++++++++
 4 files changed, 265 insertions(+), 7 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue

diff --git a/cypress/integration/Agreements_spec.ts b/cypress/integration/Agreements_spec.ts
index d50203d120..c50a5f9103 100644
--- a/cypress/integration/Agreements_spec.ts
+++ b/cypress/integration/Agreements_spec.ts
@@ -225,6 +225,33 @@ describe("Agreement CRUD operations", () => {
         cy.get("#agreements").contains("Agreement updated");
     });
 
+    it ("Show agreement", () => {
+        let agreement = get_agreement();
+        let agreements = [agreement];
+        // Click the "name" link from the list
+        cy.intercept("GET", "/api/v1/erm/agreements*", {
+            statusCode: 200,
+            body: agreements,
+            headers: {
+                "X-Base-Total-Count": "1",
+                "X-Total-Count": "1",
+            },
+        });
+        cy.intercept("GET", "/api/v1/erm/agreements/*", agreement).as("get-agreement");
+        cy.visit("/cgi-bin/koha/erm/agreements.pl");
+        let name_link = cy.get("#agreements table tbody tr:first td:first a");
+        name_link.should("have.text", agreement.name + " (#" + agreement.agreement_id + ")");
+        name_link.click();
+        cy.wait("@get-agreement");
+        cy.wait(500); // Cypress is too fast! Vue hasn't populated the form yet!
+        cy.get("#agreements h2").contains("Agreement #" + agreement.agreement_id);
+
+        // TODO There are more to test here:
+        // Dates correctly formatted
+        // Vendors displayed
+        // AV's libs displayed
+        // Tables for periods and users
+    });
     it ("Delete agreement", () => {
         let agreement = get_agreement();
         let agreements = [agreement];
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/Agreements.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/Agreements.vue
index fdca901b24..17ee020460 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/Agreements.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/Agreements.vue
@@ -12,6 +12,17 @@
         @switch-view="switchView"
         @set-error="setError"
     />
+    <Show
+        v-if="op == 'show'"
+        :agreement_id="agreement_id"
+        :vendors="vendors"
+        :av_statuses="statuses"
+        :av_closure_reasons="closure_reasons"
+        :av_renewal_priorities="renewal_priorities"
+        :av_user_roles="user_roles"
+        @switch-view="switchView"
+        @set-error="setError"
+    />
     <AddForm
         v-if="op == 'add-form'"
         :agreement_id="agreement_id"
@@ -22,21 +33,22 @@
         :av_user_roles="user_roles"
         @agreement-created="agreementCreated"
         @agreement-updated="agreementUpdated"
-        @set-error="setError"
         @switch-view="switchView"
+        @set-error="setError"
     />
     <ConfirmDeleteForm
         v-if="op == 'confirm-delete-form'"
         :agreement_id="agreement_id"
         @agreement-deleted="agreementDeleted"
-        @set-error="setError"
         @switch-view="switchView"
+        @set-error="setError"
     />
 </template>
 
 <script>
 import Toolbar from "./components/ERM/AgreementsToolbar.vue"
 import List from "./components/ERM/AgreementsList.vue"
+import Show from "./components/ERM/AgreementsShow.vue"
 import AddForm from "./components/ERM/AgreementsFormAdd.vue"
 import ConfirmDeleteForm from "./components/ERM/AgreementsFormConfirmDelete.vue"
 
@@ -108,6 +120,7 @@ export default {
     components: {
         Toolbar,
         List,
+        Show,
         AddForm,
         ConfirmDeleteForm,
     },
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
index 213a5556bf..f4f5c882e9 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsList.vue
@@ -30,6 +30,7 @@ export default {
             )
     },
     updated() {
+        let show_agreement = this.show_agreement
         let edit_agreement = this.edit_agreement
         let delete_agreement = this.delete_agreement
         window['av_vendors'] = this.vendors.map(e => {
@@ -90,9 +91,7 @@ export default {
                     "data": ["me.agreement_id", "me.name"],
                     "searchable": true,
                     "orderable": true,
-                    "render": function (data, type, row, meta) {
-                        return escape_str(`${row.name} (#${row.agreement_id})`)
-                    }
+                    // Rendering done in drawCallback
                 },
                 {
                     "title": __("Vendor"),
@@ -148,7 +147,7 @@ export default {
                 {
                     "title": __("Actions"),
                     "data": function (row, type, val, meta) {
-                        return '<div class="actions" data-agreement_id="' + row.agreement_id + '"></div>'
+                        return '<div class="actions"></div>'
                     },
                     "className": "actions noExport",
                     "searchable": false,
@@ -156,8 +155,11 @@ export default {
                 }
             ],
             drawCallback: function (settings) {
+
+                var api = new $.fn.dataTable.Api(settings)
+
                 $.each($(this).find("td .actions"), function (index, e) {
-                    let agreement_id = $(e).data('agreement_id')
+                    let agreement_id = api.row(index).data().agreement_id
                     let editButton = createVNode(AgreementsButtonEdit, {
                         onClick: () => {
                             edit_agreement(agreement_id)
@@ -171,6 +173,19 @@ export default {
                     let n = createVNode('span', {}, [editButton, " ", deleteButton])
                     render(n, e)
                 })
+
+                $.each($(this).find("tr td:eq(0)"), function (index, e) {
+                    let row = api.row(index).data()
+                    let n = createVNode("a", {
+                        role: "button",
+                        onClick: () => {
+                            show_agreement(row.agreement_id)
+                        }
+                    },
+                        escape_str(`${row.name} (#${row.agreement_id})`)
+                    )
+                    render(n, e)
+                })
             },
             preDrawCallback: function (settings) {
                 var table_id = settings.nTable.id
@@ -195,6 +210,10 @@ export default {
         }
     },
     methods: {
+        show_agreement: function (agreement_id) {
+            this.$emit('set-current-agreement-id', agreement_id)
+            this.$emit('switch-view', 'show')
+        },
         edit_agreement: function (agreement_id) {
             this.$emit('set-current-agreement-id', agreement_id)
             this.$emit('switch-view', 'add-form')
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
new file mode 100644
index 0000000000..6bc8636e13
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
@@ -0,0 +1,199 @@
+<template>
+    <h2>Agreement #{{ agreement.agreement_id }}</h2>
+    <div>
+        <fieldset class="rows">
+            <ol>
+                <li>
+                    <label>Agreement name:</label>
+                    <span>
+                        {{ agreement.name }}
+                    </span>
+                </li>
+                <li>
+                    <label>Vendor:</label>
+                    <span v-if="agreement.vendor_id">
+                        {{
+                            vendors.find((e) => e.id == agreement.vendor_id)
+                                .name
+                        }}
+                    </span>
+                </li>
+                <li>
+                    <label>Description: </label>
+                    <span>
+                        {{ agreement.description }}
+                    </span>
+                </li>
+                <li>
+                    <label>Status: </label>
+                    <span>{{
+                        get_lib_from_av(av_statuses, agreement.status)
+                    }}</span>
+                </li>
+                <li>
+                    <label>Closure reason:</label>
+                    <span>{{
+                        get_lib_from_av(
+                            av_closure_reasons,
+                            agreement.closure_reason
+                        )
+                    }}</span>
+                </li>
+                <li>
+                    <label>Is perpetual:</label>
+                    <span v-if="agreement.is_perpetual">Yes</span>
+                    <span v-else>No</span>
+                </li>
+                <li>
+                    <label>Renewal priority:</label>
+                    <span>{{
+                        get_lib_from_av(
+                            av_renewal_priorities,
+                            agreement.renewal_priority
+                        )
+                    }}</span>
+                </li>
+                <li>
+                    <label>License info: </label>
+                    <span>{{ agreement.license_info }}</span>
+                </li>
+
+                <li>
+                    <label>Periods</label>
+                    <table>
+                        <thead>
+                            <th>Period start</th>
+                            <th>Period end</th>
+                            <th>Cancellation deadline</th>
+                            <th>Period note</th>
+                        </thead>
+                        <tbody>
+                            <tr
+                                v-for="(period, counter) in agreement.periods"
+                                v-bind:key="counter"
+                            >
+                                <td>{{ format_date(period.started_on) }}</td>
+                                <td>{{ format_date(period.ended_on) }}</td>
+                                <td>
+                                    {{
+                                        format_date(
+                                            period.cancellation_deadline
+                                        )
+                                    }}
+                                </td>
+                                <td>{{ period.notes }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </li>
+
+                <li>
+                    <label>Users</label>
+                    <table>
+                        <thead>
+                            <th>Name</th>
+                            <th>Role</th>
+                        </thead>
+                        <tbody>
+                            <tr
+                                v-for="(role, counter) in agreement.user_roles"
+                                v-bind:key="counter"
+                            >
+                                <td>{{ patron_to_html(role.patron) }}</td>
+                                <td>
+                                    {{
+                                        av_user_roles.find(
+                                            (r) =>
+                                                r.authorised_value == role.role
+                                        ).lib
+                                    }}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </li>
+            </ol>
+        </fieldset>
+        <fieldset class="action">
+            <a href="#" class="cancel" @click="$emit('switch-view', 'list')"
+                >Close</a
+            >
+        </fieldset>
+    </div>
+</template>
+
+<script>
+import AgreementPeriods from './AgreementPeriods.vue'
+import AgreementUserRoles from './AgreementUserRoles.vue'
+
+export default {
+    setup() {
+        const format_date = $date
+        const patron_to_html = $patron_to_html
+        const get_lib_from_av = function (arr, av) {
+            let o = arr.find(
+                (e) => e.authorised_value == av
+            )
+            return o ? o.lib : ""
+        }
+        return {
+            format_date,
+            patron_to_html,
+            get_lib_from_av
+        }
+    },
+    data() {
+        return {
+            agreement: {
+                agreement_id: null,
+                name: '',
+                vendor_id: null,
+                vendor: null,
+                description: '',
+                status: '',
+                closure_reason: '',
+                is_perpetual: false,
+                renewal_priority: '',
+                license_info: '',
+                periods: [],
+                user_roles: [],
+            }
+        }
+    },
+    created() {
+        if (!this.agreement_id) return
+        const apiUrl = '/api/v1/erm/agreements/' + this.agreement_id
+
+        fetch(apiUrl, {
+            headers: {
+                'x-koha-embed': 'periods,user_roles,user_roles.patron'
+            }
+        })
+            .then(res => res.json())
+            .then(
+                (result) => {
+                    this.agreement = result
+                },
+                (error) => {
+                    this.$emit('set-error', error)
+                }
+            )
+    },
+    methods: {
+    },
+    emits: ['set-error', 'switch-view'],
+    props: {
+        agreement_id: Number,
+        vendors: Array,
+        av_statuses: Array,
+        av_closure_reasons: Array,
+        av_renewal_priorities: Array,
+        av_user_roles: Array,
+    },
+    components: {
+        AgreementPeriods,
+        AgreementUserRoles
+    },
+    name: "AgreementsShow",
+}
+</script>
-- 
2.39.5