From 0cdaba2dad4cd684e0b474f97542c24bdbadb6e7 Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Wed, 11 May 2022 11:07:43 +0200
Subject: [PATCH] Bug 32030: Add 'Loading...' until the data is fetched

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>
---
 .../vue/components/ERM/AgreementsFormAdd.vue  | 380 +++++++++---------
 .../ERM/AgreementsFormConfirmDelete.vue       |  61 +--
 .../js/vue/components/ERM/AgreementsList.vue  |  16 +-
 .../js/vue/components/ERM/AgreementsShow.vue  | 340 ++++++++--------
 .../js/vue/components/ERM/LicensesFormAdd.vue | 230 ++++++-----
 .../ERM/LicensesFormConfirmDelete.vue         |  70 ++--
 .../js/vue/components/ERM/LicensesList.vue    |   4 +-
 .../js/vue/components/ERM/LicensesShow.vue    | 110 ++---
 koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js  |  16 +
 9 files changed, 654 insertions(+), 573 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue
index d34d9adc3d..933ad302f5 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormAdd.vue
@@ -1,189 +1,197 @@
 <template>
-    <h2 v-if="agreement.agreement_id">Edit agreement</h2>
-    <h2 v-else>New agreement</h2>
-    <div>
-        <form @submit="onSubmit($event)">
-            <fieldset class="rows">
-                <ol>
-                    <li>
-                        <label class="required" for="agreement_name"
-                            >Agreement name:</label
-                        >
-                        <input
-                            id="agreement_name"
-                            v-model="agreement.name"
-                            placeholder="Agreement name"
-                            required
-                        />
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
-                        <label for="agreement_vendor_id">Vendor:</label>
-                        <select
-                            id="agreement_vendor_id"
-                            v-model="agreement.vendor_id"
-                        >
-                            <option value=""></option>
-                            <option
-                                v-for="vendor in vendors"
-                                :key="vendor.vendor_id"
-                                :value="vendor.id"
-                                :selected="
-                                    vendor.id == agreement.vendor_id
-                                        ? true
-                                        : false
-                                "
-                            >
-                                {{ vendor.name }}
-                            </option>
-                        </select>
-                    </li>
-                    <li>
-                        <label for="agreement_description">Description: </label>
-                        <textarea
-                            id="agreement_description"
-                            v-model="agreement.description"
-                            placeholder="Description"
-                            rows="10"
-                            cols="50"
-                            required
-                        />
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
-                        <label for="agreement_status">Status: </label>
-                        <select
-                            id="agreement_status"
-                            v-model="agreement.status"
-                            @change="onStatusChange($event)"
-                            required
-                        >
-                            <option value=""></option>
-                            <option
-                                v-for="status in av_agreement_statuses"
-                                :key="status.authorised_values"
-                                :value="status.authorised_value"
-                                :selected="
-                                    status.authorised_value == agreement.status
-                                        ? true
-                                        : false
-                                "
-                            >
-                                {{ status.lib }}
-                            </option>
-                        </select>
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
-                        <label for="agreement_closure_reason"
-                            >Closure reason:</label
-                        >
-                        <select
-                            id="agreement_closure_reason"
-                            v-model="agreement.closure_reason"
-                            :disabled="
-                                agreement.status == 'closed' ? false : true
-                            "
-                        >
-                            <option value=""></option>
-                            <option
-                                v-for="r in av_agreement_closure_reasons"
-                                :key="r.authorised_values"
-                                :value="r.authorised_value"
-                                :selected="
-                                    r.authorised_value ==
-                                    agreement.closure_reason
-                                        ? true
-                                        : false
-                                "
+    <div v-if="!this.initialized">Loading...</div>
+    <div v-else>
+        <h2 v-if="agreement.agreement_id">
+            Edit agreement #{{ agreement.agreement_id }}
+        </h2>
+        <h2 v-else>New agreement</h2>
+        <div>
+            <form @submit="onSubmit($event)">
+                <fieldset class="rows">
+                    <ol>
+                        <li>
+                            <label class="required" for="agreement_name"
+                                >Agreement name:</label
                             >
-                                {{ r.lib }}
-                            </option>
-                        </select>
-                    </li>
-                    <li>
-                        <label for="agreement_is_perpetual" class="radio"
-                            >Is perpetual:</label
-                        >
-                        <label for="agreement_is_perpetual_yes">
                             <input
-                                type="radio"
-                                name="is_perpetual"
-                                id="agreement_is_perpetual_yes"
-                                :value="true"
-                                v-model="agreement.is_perpetual"
+                                id="agreement_name"
+                                v-model="agreement.name"
+                                placeholder="Agreement name"
+                                required
                             />
-                            Yes
-                        </label>
-                        <label for="agreement_is_perpetual_no">
-                            <input
-                                type="radio"
-                                name="is_perpetual"
-                                id="agreement_is_perpetual_no"
-                                :value="false"
-                                v-model="agreement.is_perpetual"
+                            <span class="required">Required</span>
+                        </li>
+                        <li>
+                            <label for="agreement_vendor_id">Vendor:</label>
+                            <select
+                                id="agreement_vendor_id"
+                                v-model="agreement.vendor_id"
+                            >
+                                <option value=""></option>
+                                <option
+                                    v-for="vendor in vendors"
+                                    :key="vendor.vendor_id"
+                                    :value="vendor.id"
+                                    :selected="
+                                        vendor.id == agreement.vendor_id
+                                            ? true
+                                            : false
+                                    "
+                                >
+                                    {{ vendor.name }}
+                                </option>
+                            </select>
+                        </li>
+                        <li>
+                            <label for="agreement_description"
+                                >Description:
+                            </label>
+                            <textarea
+                                id="agreement_description"
+                                v-model="agreement.description"
+                                placeholder="Description"
+                                rows="10"
+                                cols="50"
+                                required
                             />
-                            No
-                        </label>
-                    </li>
-                    <li>
-                        <label for="agreement_renewal_priority"
-                            >Renewal priority:</label
-                        >
-                        <select v-model="agreement.renewal_priority">
-                            <option value=""></option>
-                            <option
-                                v-for="p in av_agreement_renewal_priorities"
-                                :key="p.authorised_values"
-                                :value="p.authorised_value"
-                                :selected="
-                                    p.authorised_value ==
-                                    agreement.renewal_priority
-                                        ? true
-                                        : false
+                            <span class="required">Required</span>
+                        </li>
+                        <li>
+                            <label for="agreement_status">Status: </label>
+                            <select
+                                id="agreement_status"
+                                v-model="agreement.status"
+                                @change="onStatusChange($event)"
+                                required
+                            >
+                                <option value=""></option>
+                                <option
+                                    v-for="status in av_agreement_statuses"
+                                    :key="status.authorised_values"
+                                    :value="status.authorised_value"
+                                    :selected="
+                                        status.authorised_value ==
+                                        agreement.status
+                                            ? true
+                                            : false
+                                    "
+                                >
+                                    {{ status.lib }}
+                                </option>
+                            </select>
+                            <span class="required">Required</span>
+                        </li>
+                        <li>
+                            <label for="agreement_closure_reason"
+                                >Closure reason:</label
+                            >
+                            <select
+                                id="agreement_closure_reason"
+                                v-model="agreement.closure_reason"
+                                :disabled="
+                                    agreement.status == 'closed' ? false : true
                                 "
                             >
-                                {{ p.lib }}
-                            </option>
-                        </select>
-                    </li>
-                    <li>
-                        <label for="agreement_license_info"
-                            >License info:
-                        </label>
-                        <textarea
-                            id="agreement_license_info"
-                            v-model="agreement.license_info"
-                            placeholder="License info"
-                        />
-                    </li>
+                                <option value=""></option>
+                                <option
+                                    v-for="r in av_agreement_closure_reasons"
+                                    :key="r.authorised_values"
+                                    :value="r.authorised_value"
+                                    :selected="
+                                        r.authorised_value ==
+                                        agreement.closure_reason
+                                            ? true
+                                            : false
+                                    "
+                                >
+                                    {{ r.lib }}
+                                </option>
+                            </select>
+                        </li>
+                        <li>
+                            <label for="agreement_is_perpetual" class="radio"
+                                >Is perpetual:</label
+                            >
+                            <label for="agreement_is_perpetual_yes">
+                                <input
+                                    type="radio"
+                                    name="is_perpetual"
+                                    id="agreement_is_perpetual_yes"
+                                    :value="true"
+                                    v-model="agreement.is_perpetual"
+                                />
+                                Yes
+                            </label>
+                            <label for="agreement_is_perpetual_no">
+                                <input
+                                    type="radio"
+                                    name="is_perpetual"
+                                    id="agreement_is_perpetual_no"
+                                    :value="false"
+                                    v-model="agreement.is_perpetual"
+                                />
+                                No
+                            </label>
+                        </li>
+                        <li>
+                            <label for="agreement_renewal_priority"
+                                >Renewal priority:</label
+                            >
+                            <select v-model="agreement.renewal_priority">
+                                <option value=""></option>
+                                <option
+                                    v-for="p in av_agreement_renewal_priorities"
+                                    :key="p.authorised_values"
+                                    :value="p.authorised_value"
+                                    :selected="
+                                        p.authorised_value ==
+                                        agreement.renewal_priority
+                                            ? true
+                                            : false
+                                    "
+                                >
+                                    {{ p.lib }}
+                                </option>
+                            </select>
+                        </li>
+                        <li>
+                            <label for="agreement_license_info"
+                                >License info:
+                            </label>
+                            <textarea
+                                id="agreement_license_info"
+                                v-model="agreement.license_info"
+                                placeholder="License info"
+                            />
+                        </li>
 
-                    <AgreementPeriods :periods="agreement.periods" />
-                    <AgreementUserRoles
-                        :user_roles="agreement.user_roles"
-                        :av_agreement_user_roles="av_agreement_user_roles"
-                    />
-                    <AgreementLicenses
-                        :agreement_licenses="agreement.agreement_licenses"
-                        :av_agreement_license_statuses="
-                            av_agreement_license_statuses
-                        "
-                        :av_agreement_license_location="
-                            av_agreement_license_location
-                        "
-                    />
-                </ol>
-            </fieldset>
-            <fieldset class="action">
-                <input type="submit" value="Submit" />
-                <router-link
-                    to="/cgi-bin/koha/erm/agreements"
-                    role="button"
-                    class="cancel"
-                    >Cancel</router-link
-                >
-            </fieldset>
-        </form>
+                        <AgreementPeriods :periods="agreement.periods" />
+                        <AgreementUserRoles
+                            :user_roles="agreement.user_roles"
+                            :av_agreement_user_roles="av_agreement_user_roles"
+                        />
+                        <AgreementLicenses
+                            :agreement_licenses="agreement.agreement_licenses"
+                            :av_agreement_license_statuses="
+                                av_agreement_license_statuses
+                            "
+                            :av_agreement_license_location="
+                                av_agreement_license_location
+                            "
+                        />
+                    </ol>
+                </fieldset>
+                <fieldset class="action">
+                    <input type="submit" value="Submit" />
+                    <router-link
+                        to="/cgi-bin/koha/erm/agreements"
+                        role="button"
+                        class="cancel"
+                        >Cancel</router-link
+                    >
+                </fieldset>
+            </form>
+        </div>
     </div>
 </template>
 
@@ -240,22 +248,24 @@ export default {
                 periods: [],
                 user_roles: [],
                 agreement_licenses: [],
-            }
+            },
+            initialized: false,
         }
     },
     beforeRouteEnter(to, from, next) {
-        if (to.params.agreement_id) {
-            next(vm => {
+        next(vm => {
+            if (to.params.agreement_id) {
                 vm.agreement = vm.getAgreement(to.params.agreement_id)
-            })
-        } else {
-            next()
-        }
+            } else {
+                vm.initialized = true
+            }
+        })
     },
     methods: {
         async getAgreement(agreement_id) {
             const agreement = await fetchAgreement(agreement_id)
             this.agreement = agreement
+            this.initialized = true
         },
         onSubmit(e) {
             e.preventDefault()
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue
index 924d16e5c0..02346a0dc2 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsFormConfirmDelete.vue
@@ -1,30 +1,37 @@
 <template>
-    <h2>Delete agreement</h2>
-    <div>
-        <form @submit="onSubmit($event)">
-            <fieldset class="rows">
-                <ol>
-                    <li>
-                        Agreement name:
-                        {{ agreement.name }}
-                    </li>
-                    <li>Vendor:{{ agreement.vendor_id }}</li>
-                    <li>
-                        Description:
-                        {{ agreement.description }}
-                    </li>
-                </ol>
-            </fieldset>
-            <fieldset class="action">
-                <input type="submit" variant="primary" value="Yes, delete" />
-                <router-link
-                    to="/cgi-bin/koha/erm/agreements"
-                    role="button"
-                    class="cancel"
-                    >No, do not delete</router-link
-                >
-            </fieldset>
-        </form>
+    <div v-if="!this.initialized">Loading...</div>
+    <div v-else>
+        <h2>Delete agreement</h2>
+        <div>
+            <form @submit="onSubmit($event)">
+                <fieldset class="rows">
+                    <ol>
+                        <li>
+                            Agreement name:
+                            {{ agreement.name }}
+                        </li>
+                        <li>Vendor:{{ agreement.vendor_id }}</li>
+                        <li>
+                            Description:
+                            {{ agreement.description }}
+                        </li>
+                    </ol>
+                </fieldset>
+                <fieldset class="action">
+                    <input
+                        type="submit"
+                        variant="primary"
+                        value="Yes, delete"
+                    />
+                    <router-link
+                        to="/cgi-bin/koha/erm/agreements"
+                        role="button"
+                        class="cancel"
+                        >No, do not delete</router-link
+                    >
+                </fieldset>
+            </form>
+        </div>
     </div>
 </template>
 
@@ -43,6 +50,7 @@ export default {
     data() {
         return {
             agreement: {},
+            initialized: false,
         }
     },
     beforeRouteEnter(to, from, next) {
@@ -54,6 +62,7 @@ export default {
         async getAgreement(agreement_id) {
             const agreement = await fetchAgreement(agreement_id)
             this.agreement = agreement
+            this.initialized = true
         },
         onSubmit(e) {
             e.preventDefault()
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 2f8a731a74..d536255737 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
@@ -1,10 +1,10 @@
 <template>
-    <div>
+    <div v-if="!this.initialized">Loading...</div>
+    <div v-else>
         <table v-if="agreements.length" id="agreement_list"></table>
         <div v-else-if="this.initialized" class="dialog message">
             There are no agreements defined.
         </div>
-        <div v-else>Loading...</div>
     </div>
 </template>
 
@@ -15,6 +15,7 @@ import { createVNode, defineComponent, render, resolveComponent } from 'vue'
 import { useVendorStore } from "../../stores/vendors"
 import { useAVStore } from "../../stores/authorised_values"
 import { storeToRefs } from "pinia"
+import { fetchAgreements } from "../../fetch"
 
 export default {
     setup() {
@@ -47,6 +48,17 @@ export default {
                 }
             )
     },
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+            vm.getAgreements()
+        })
+    },
+    methods: {
+        async getAgreements() {
+            const agreements = await fetchAgreements()
+            this.agreements = agreements
+        },
+    },
     updated() {
         let show_agreement = this.show_agreement
         let edit_agreement = this.edit_agreement
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
index 10377d0e25..d96a29af9b 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue
@@ -1,168 +1,182 @@
 <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_agreement_statuses, agreement.status)
-                    }}</span>
-                </li>
-                <li>
-                    <label>Closure reason:</label>
-                    <span>{{
-                        get_lib_from_av(
-                            av_agreement_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_agreement_renewal_priorities,
-                            agreement.renewal_priority
-                        )
-                    }}</span>
-                </li>
-                <li>
-                    <label>License info: </label>
-                    <span>{{ agreement.license_info }}</span>
-                </li>
+    <div v-if="!this.initialized">Loading...</div>
+    <div v-else>
+        <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_agreement_statuses,
+                                agreement.status
+                            )
+                        }}</span>
+                    </li>
+                    <li>
+                        <label>Closure reason:</label>
+                        <span>{{
+                            get_lib_from_av(
+                                av_agreement_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_agreement_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>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>
-                                    {{
-                                        get_lib_from_av(
-                                            av_agreement_user_roles,
-                                            role.role
-                                        )
-                                    }}
-                                </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>
+                                        {{
+                                            get_lib_from_av(
+                                                av_agreement_user_roles,
+                                                role.role
+                                            )
+                                        }}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </li>
 
-                <li>
-                    <label>Licenses</label>
-                    <table>
-                        <thead>
-                            <th>Name</th>
-                            <th>Status</th>
-                            <th>Physical location</th>
-                            <th>Notes</th>
-                            <th>URI</th>
-                        </thead>
-                        <tbody>
-                            <tr
-                                v-for="(
-                                    agreement_license, counter
-                                ) in agreement.agreement_licenses"
-                                v-bind:key="counter"
-                            >
-                                <td>{{ agreement_license.license.name }}</td>
-                                <td>
-                                    {{
-                                        get_lib_from_av(
-                                            av_agreement_license_statuses,
-                                            agreement_license.status
-                                        )
-                                    }}
-                                </td>
-                                <td>
-                                    {{
-                                        get_lib_from_av(
-                                            av_agreement_license_location,
-                                            agreement_license.physical_location
-                                        )
-                                    }}
-                                </td>
-                                <td>{{ agreement_license.notes }}</td>
-                                <td>{{ agreement_license.uri }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </li>
-            </ol>
-        </fieldset>
-        <fieldset class="action">
-            <router-link
-                to="/cgi-bin/koha/erm/agreements"
-                role="button"
-                class="cancel"
-                >Close</router-link
-            >
-        </fieldset>
+                    <li>
+                        <label>Licenses</label>
+                        <table>
+                            <thead>
+                                <th>Name</th>
+                                <th>Status</th>
+                                <th>Physical location</th>
+                                <th>Notes</th>
+                                <th>URI</th>
+                            </thead>
+                            <tbody>
+                                <tr
+                                    v-for="(
+                                        agreement_license, counter
+                                    ) in agreement.agreement_licenses"
+                                    v-bind:key="counter"
+                                >
+                                    <td>
+                                        {{ agreement_license.license.name }}
+                                    </td>
+                                    <td>
+                                        {{
+                                            get_lib_from_av(
+                                                av_agreement_license_statuses,
+                                                agreement_license.status
+                                            )
+                                        }}
+                                    </td>
+                                    <td>
+                                        {{
+                                            get_lib_from_av(
+                                                av_agreement_license_location,
+                                                agreement_license.physical_location
+                                            )
+                                        }}
+                                    </td>
+                                    <td>{{ agreement_license.notes }}</td>
+                                    <td>{{ agreement_license.uri }}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </li>
+                </ol>
+            </fieldset>
+            <fieldset class="action">
+                <router-link
+                    to="/cgi-bin/koha/erm/agreements"
+                    role="button"
+                    class="cancel"
+                    >Close</router-link
+                >
+            </fieldset>
+        </div>
     </div>
 </template>
 
@@ -229,7 +243,8 @@ export default {
                 license_info: '',
                 periods: [],
                 user_roles: [],
-            }
+            },
+            initialized: false,
         }
     },
     beforeRouteEnter(to, from, next) {
@@ -241,6 +256,7 @@ export default {
         async getAgreement(agreement_id) {
             const agreement = await fetchAgreement(agreement_id)
             this.agreement = agreement
+            this.initialized = true
         },
     },
     components: {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
index 5ca08fbf37..8f3dda8f05 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
@@ -1,109 +1,117 @@
 <template>
-    <h2 v-if="license.license_id">Edit license</h2>
-    <h2 v-else>New license</h2>
-    <div>
-        <form @submit="onSubmit($event)">
-            <fieldset class="rows">
-                <ol>
-                    <li>
-                        <label class="required" for="license_name"
-                            >License name:</label
-                        >
-                        <input
-                            id="license_name"
-                            v-model="license.name"
-                            placeholder="License name"
-                            required
-                        />
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
-                        <label for="license_description">Description: </label>
-                        <textarea
-                            id="license_description"
-                            v-model="license.description"
-                            placeholder="Description"
-                            rows="10"
-                            cols="50"
-                            required
-                        />
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
-                        <label for="license_type">Type: </label>
-                        <select
-                            id="license_type"
-                            v-model="license.type"
-                            required
-                        >
-                            <option value=""></option>
-                            <option
-                                v-for="type in av_license_types"
-                                :key="type.authorised_values"
-                                :value="type.authorised_value"
-                                :selected="
-                                    type.authorised_value == license.type
-                                        ? true
-                                        : false
-                                "
+    <div v-if="!this.initialized">Loading...</div>
+    <div v-else>
+        <h2 v-if="license.license_id">
+            Edit license #{{ license.license_id }}
+        </h2>
+        <h2 v-else>New license</h2>
+        <div>
+            <form @submit="onSubmit($event)">
+                <fieldset class="rows">
+                    <ol>
+                        <li>
+                            <label class="required" for="license_name"
+                                >License name:</label
                             >
-                                {{ type.lib }}
-                            </option>
-                        </select>
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
-                        <label for="license_status">Status: </label>
-                        <select
-                            id="license_status"
-                            v-model="license.status"
-                            required
-                        >
-                            <option value=""></option>
-                            <option
-                                v-for="status in av_license_statuses"
-                                :key="status.authorised_values"
-                                :value="status.authorised_value"
-                                :selected="
-                                    status.authorised_value == license.status
-                                        ? true
-                                        : false
-                                "
+                            <input
+                                id="license_name"
+                                v-model="license.name"
+                                placeholder="License name"
+                                required
+                            />
+                            <span class="required">Required</span>
+                        </li>
+                        <li>
+                            <label for="license_description"
+                                >Description:
+                            </label>
+                            <textarea
+                                id="license_description"
+                                v-model="license.description"
+                                placeholder="Description"
+                                rows="10"
+                                cols="50"
+                                required
+                            />
+                            <span class="required">Required</span>
+                        </li>
+                        <li>
+                            <label for="license_type">Type: </label>
+                            <select
+                                id="license_type"
+                                v-model="license.type"
+                                required
                             >
-                                {{ status.lib }}
-                            </option>
-                        </select>
-                        <span class="required">Required</span>
-                    </li>
-                    <li>
-                        <label for="started_on">Start date: </label>
-                        <flat-pickr
-                            id="started_on"
-                            v-model="license.started_on"
-                            :config="fp_config"
-                            data-date_to="ended_on"
-                        />
-                    </li>
-                    <li>
-                        <label for="ended_on">End date: </label>
-                        <flat-pickr
-                            id="ended_on"
-                            v-model="license.ended_on"
-                            :config="fp_config"
-                        />
-                    </li>
-                </ol>
-            </fieldset>
-            <fieldset class="action">
-                <input type="submit" value="Submit" />
-                <router-link
-                    to="/cgi-bin/koha/erm/licenses"
-                    role="button"
-                    class="cancel"
-                    >Cancel</router-link
-                >
-            </fieldset>
-        </form>
+                                <option value=""></option>
+                                <option
+                                    v-for="type in av_license_types"
+                                    :key="type.authorised_values"
+                                    :value="type.authorised_value"
+                                    :selected="
+                                        type.authorised_value == license.type
+                                            ? true
+                                            : false
+                                    "
+                                >
+                                    {{ type.lib }}
+                                </option>
+                            </select>
+                            <span class="required">Required</span>
+                        </li>
+                        <li>
+                            <label for="license_status">Status: </label>
+                            <select
+                                id="license_status"
+                                v-model="license.status"
+                                required
+                            >
+                                <option value=""></option>
+                                <option
+                                    v-for="status in av_license_statuses"
+                                    :key="status.authorised_values"
+                                    :value="status.authorised_value"
+                                    :selected="
+                                        status.authorised_value ==
+                                        license.status
+                                            ? true
+                                            : false
+                                    "
+                                >
+                                    {{ status.lib }}
+                                </option>
+                            </select>
+                            <span class="required">Required</span>
+                        </li>
+                        <li>
+                            <label for="started_on">Start date: </label>
+                            <flat-pickr
+                                id="started_on"
+                                v-model="license.started_on"
+                                :config="fp_config"
+                                data-date_to="ended_on"
+                            />
+                        </li>
+                        <li>
+                            <label for="ended_on">End date: </label>
+                            <flat-pickr
+                                id="ended_on"
+                                v-model="license.ended_on"
+                                :config="fp_config"
+                            />
+                        </li>
+                    </ol>
+                </fieldset>
+                <fieldset class="action">
+                    <input type="submit" value="Submit" />
+                    <router-link
+                        to="/cgi-bin/koha/erm/licenses"
+                        role="button"
+                        class="cancel"
+                        >Cancel</router-link
+                    >
+                </fieldset>
+            </form>
+        </div>
     </div>
 </template>
 
@@ -144,7 +152,8 @@ export default {
                 status: '',
                 started_on: undefined,
                 ended_on: undefined,
-            }
+            },
+            initialized: false,
         }
     },
     beforeUpdate() {
@@ -155,18 +164,19 @@ export default {
         }
     },
     beforeRouteEnter(to, from, next) {
-        if (to.params.license_id) {
-            next(vm => {
+        next(vm => {
+            if (to.params.license_id) {
                 vm.license = vm.getLicense(to.params.license_id)
-            })
-        } else {
-            next()
-        }
+            } else {
+                vm.initialized = true
+            }
+        })
     },
     methods: {
         async getLicense(license_id) {
             const license = await fetchLicense(license_id)
             this.license = license
+            this.initialized = true
         },
         onSubmit(e) {
             e.preventDefault()
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormConfirmDelete.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormConfirmDelete.vue
index e49bbf909d..5f859a7199 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormConfirmDelete.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormConfirmDelete.vue
@@ -1,29 +1,36 @@
 <template>
-    <h2>Delete license</h2>
-    <div>
-        <form @submit="onSubmit($event)">
-            <fieldset class="rows">
-                <ol>
-                    <li>
-                        License name:
-                        {{ license.name }}
-                    </li>
-                    <li>
-                        Description:
-                        {{ license.description }}
-                    </li>
-                </ol>
-            </fieldset>
-            <fieldset class="action">
-                <input type="submit" variant="primary" value="Yes, delete" />
-                <router-link
-                    to="/cgi-bin/koha/erm/licenses"
-                    role="button"
-                    class="cancel"
-                    >No, do not delete</router-link
-                >
-            </fieldset>
-        </form>
+    <div v-if="!this.initialized">Loading...</div>
+    <div v-else>
+        <h2>Delete license</h2>
+        <div>
+            <form @submit="onSubmit($event)">
+                <fieldset class="rows">
+                    <ol>
+                        <li>
+                            License name:
+                            {{ license.name }}
+                        </li>
+                        <li>
+                            Description:
+                            {{ license.description }}
+                        </li>
+                    </ol>
+                </fieldset>
+                <fieldset class="action">
+                    <input
+                        type="submit"
+                        variant="primary"
+                        value="Yes, delete"
+                    />
+                    <router-link
+                        to="/cgi-bin/koha/erm/licenses"
+                        role="button"
+                        class="cancel"
+                        >No, do not delete</router-link
+                    >
+                </fieldset>
+            </form>
+        </div>
     </div>
 </template>
 
@@ -42,21 +49,20 @@ export default {
     data() {
         return {
             license: {},
+            initialized: false,
         }
     },
     beforeRouteEnter(to, from, next) {
-        if (to.params.license_id) {
-            next(vm => {
-                vm.license = vm.getLicense(to.params.license_id)
-            })
-        } else {
-            next()
-        }
+        next(vm => {
+            vm.license = vm.getLicense(to.params.license_id)
+            vm.initialized = true
+        })
     },
     methods: {
         async getLicense(license_id) {
             const license = await fetchLicense(license_id)
             this.license = license
+            this.initialized = true
         },
         onSubmit(e) {
             e.preventDefault()
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue
index 657a69aa50..4bd893adec 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesList.vue
@@ -1,10 +1,10 @@
 <template>
-    <div>
+    <div v-if="!this.initialized">Loading...</div>
+    <div v-else>
         <table v-if="licenses.length" id="license_list"></table>
         <div v-else-if="this.initialized" class="dialog message">
             There are no licenses defined.
         </div>
-        <div v-else>Loading...</div>
     </div>
 </template>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
index 3f5af54837..8908c78792 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue
@@ -1,52 +1,55 @@
 <template>
-    <h2>License #{{ license.license_id }}</h2>
-    <div>
-        <fieldset class="rows">
-            <ol>
-                <li>
-                    <label>License name:</label>
-                    <span>
-                        {{ license.name }}
-                    </span>
-                </li>
-                <li>
-                    <label>Description: </label>
-                    <span>
-                        {{ license.description }}
-                    </span>
-                </li>
-                <li>
-                    <label>Type: </label>
-                    <span>{{
-                        get_lib_from_av(av_license_types, license.type)
-                    }}</span>
-                </li>
-                <li>
-                    <label>Status: </label>
-                    <span>{{
-                        get_lib_from_av(av_license_statuses, license.status)
-                    }}</span>
-                </li>
+    <div v-if="!this.initialized">Loading...</div>
+    <div v-else>
+        <h2>License #{{ license.license_id }}</h2>
+        <div>
+            <fieldset class="rows">
+                <ol>
+                    <li>
+                        <label>License name:</label>
+                        <span>
+                            {{ license.name }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>Description: </label>
+                        <span>
+                            {{ license.description }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>Type: </label>
+                        <span>{{
+                            get_lib_from_av(av_license_types, license.type)
+                        }}</span>
+                    </li>
+                    <li>
+                        <label>Status: </label>
+                        <span>{{
+                            get_lib_from_av(av_license_statuses, license.status)
+                        }}</span>
+                    </li>
 
-                <li>
-                    <label>Started on:</label>
-                    <span>{{ format_date(license.started_on) }}</span>
-                </li>
+                    <li>
+                        <label>Started on:</label>
+                        <span>{{ format_date(license.started_on) }}</span>
+                    </li>
 
-                <li>
-                    <label>Ended on:</label>
-                    <span>{{ format_date(license.ended_on) }}</span>
-                </li>
-            </ol>
-        </fieldset>
-        <fieldset class="action">
-            <router-link
-                to="/cgi-bin/koha/erm/licenses"
-                role="button"
-                class="cancel"
-                >Close</router-link
-            >
-        </fieldset>
+                    <li>
+                        <label>Ended on:</label>
+                        <span>{{ format_date(license.ended_on) }}</span>
+                    </li>
+                </ol>
+            </fieldset>
+            <fieldset class="action">
+                <router-link
+                    to="/cgi-bin/koha/erm/licenses"
+                    role="button"
+                    class="cancel"
+                    >Close</router-link
+                >
+            </fieldset>
+        </div>
     </div>
 </template>
 
@@ -93,22 +96,21 @@ export default {
                 status: '',
                 started_on: undefined,
                 ended_on: undefined,
-            }
+            },
+            initialized: false,
         }
     },
     beforeRouteEnter(to, from, next) {
-        if (to.params.license_id) {
-            next(vm => {
-                vm.license = vm.getLicense(to.params.license_id)
-            })
-        } else {
-            next()
-        }
+        next(vm => {
+            vm.license = vm.getLicense(to.params.license_id)
+            vm.initialized = true
+        })
     },
     methods: {
         async getLicense(license_id) {
             const license = await fetchLicense(license_id)
             this.license = license
+            this.initialized = true
         },
     },
     components: {
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js
index dec157a559..a03e612feb 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js
@@ -20,6 +20,22 @@ export const fetchAgreement = async function (agreement_id) {
     return agreement;
 };
 
+export const fetchAgreements = async function () {
+    const apiUrl = "/api/v1/erm/agreements"
+    let agreements;
+    await fetch(apiUrl)
+        .then((res) => res.json())
+        .then(
+            (result) => {
+                agreements = result;
+            },
+            (error) => {
+                this.setError(error);
+            }
+        );
+    return agreements;
+};
+
 export const fetchLicense = async function (license_id) {
     if (!license_id) return;
     const apiUrl = "/api/v1/erm/licenses/" + license_id;
-- 
2.39.2