From 88b738828b51ae0b084f1983afcd63e3646523de Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Tue, 24 May 2022 12:45:11 +0200
Subject: [PATCH] Bug 32030: eHoldings - Vue

 Please enter the commit message for your changes. Lines starting

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>
---
 .../intranet-tmpl/prog/en/modules/erm/erm.tt  |  12 +
 .../vue/components/ERM/EHoldingsFormAdd.vue   | 463 ++++++++++++++++++
 .../ERM/EHoldingsFormConfirmDelete.vue        |  86 ++++
 .../js/vue/components/ERM/EHoldingsList.vue   | 149 ++++++
 .../js/vue/components/ERM/EHoldingsShow.vue   | 253 ++++++++++
 .../vue/components/ERM/EHoldingsToolbar.vue   |  12 +
 .../prog/js/vue/components/ERM/ERMMain.vue    |   8 +
 koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js  |  59 ++-
 koha-tmpl/intranet-tmpl/prog/js/vue/routes.js |  67 ++-
 9 files changed, 1100 insertions(+), 9 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsFormAdd.vue
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsFormConfirmDelete.vue
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsList.vue
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsShow.vue
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsToolbar.vue

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/erm/erm.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/erm/erm.tt
index 79ba61a18a..1c27013397 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/erm/erm.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/erm/erm.tt
@@ -78,6 +78,18 @@
             packages_table_url += 'q='+ encodeURIComponent(JSON.stringify(package_name_filter));
         [% END %]
 
+        var eholding_table_settings = [% TablesSettings.GetTableSettings( 'erm', 'eholdings', 'eholdings', 'json' ) | $raw %];
+
+        var eholdings_table_url = '/api/v1/erm/eholdings?';
+        [% IF eholding_name_filter %]
+            var eholding_name_filter = {
+                'name': {
+                    "like": '%[%- eholding_name_filter | html -%]%'
+                }
+            };
+            eholdings_table_url += 'q='+ encodeURIComponent(JSON.stringify(eholding_name_filter));
+        [% END %]
+
     </script>
 
     [% Asset.js("js/vue/dist/main.js") | $raw %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsFormAdd.vue
new file mode 100644
index 0000000000..d7ebb4885f
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsFormAdd.vue
@@ -0,0 +1,463 @@
+<template>
+    <div v-if="!initialized">{{ $t("Loading") }}</div>
+    <div v-else id="eholdings_add">
+        <h2 v-if="eholding.eholding_id">
+            {{ $t("Edit eHolding.id", { id: eholding.eholding_id }) }}
+        </h2>
+        <h2 v-else>{{ $t("New eHolding") }}</h2>
+        <div>
+            <form @submit="onSubmit($event)">
+                <fieldset class="rows">
+                    <ol>
+                        <li>
+                            <label class="required" for="eholding_name">{{
+                                $t("Publication title:")
+                            }}</label>
+                            <input
+                                id="eholding_publication_title"
+                                v-model="eholding.publication_title"
+                                :placeholder="$t('Publication title')"
+                                required
+                            />
+                            <span class="required">{{ $t("Required") }}</span>
+                        </li>
+
+                        <li>
+                            <label for="eholding_print_identifier">{{
+                                $t("Print-format identifier:")
+                            }}</label>
+                            <input
+                                id="eholding_print_identifier"
+                                v-model="eholding.print_identifier"
+                                :placeholder="$t('Print-format identifier')"
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_online_identifier">{{
+                                $t("Online-format identifier:")
+                            }}</label>
+                            <input
+                                id="eholding_online_identifier"
+                                v-model="eholding.online_identifier"
+                                :placeholder="$t('Online-format identifier')"
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_date_first_issue_online">{{
+                                $t(
+                                    "Date of first serial issue available online:"
+                                )
+                            }}</label>
+                            <input
+                                id="eholding_date_first_issue_online"
+                                v-model="eholding.date_first_issue_online"
+                                :placeholder="
+                                    $t(
+                                        'Date of first serial issue available online'
+                                    )
+                                "
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_num_first_vol_online">{{
+                                $t("Number of first volume available online:")
+                            }}</label>
+                            <input
+                                id="eholding_num_first_vol_online"
+                                v-model="eholding.num_first_vol_online"
+                                :placeholder="
+                                    $t(
+                                        'Number of first volume available online'
+                                    )
+                                "
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_num_first_issue_online">{{
+                                $t("Number of first issue available online:")
+                            }}</label>
+                            <input
+                                id="eholding_num_first_issue_online"
+                                v-model="eholding.num_first_issue_online"
+                                :placeholder="
+                                    $t('Number of first issue available online')
+                                "
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_date_last_issue_online">{{
+                                $t("Date of last issue available online:")
+                            }}</label>
+                            <input
+                                id="eholding_date_last_issue_online"
+                                v-model="eholding.date_last_issue_online"
+                                :placeholder="
+                                    $t('Date of last issue available online')
+                                "
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_num_last_vol_online">{{
+                                $t("Number of last volume available online:")
+                            }}</label>
+                            <input
+                                id="eholding_num_last_vol_online"
+                                v-model="eholding.num_last_vol_online"
+                                :placeholder="
+                                    $t('Number of last volume available online')
+                                "
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_num_last_issue_online">{{
+                                $t("Number of last issue available online:")
+                            }}</label>
+                            <input
+                                id="eholding_num_last_issue_online"
+                                v-model="eholding.num_last_issue_online"
+                                :placeholder="
+                                    $t('Number of last issue available online')
+                                "
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_title_url">{{
+                                $t("Title-level URL:")
+                            }}</label>
+                            <input
+                                id="eholding_title_url"
+                                v-model="eholding.title_url"
+                                :placeholder="$t('Title-level URL')"
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_first_author">{{
+                                $t("First author:")
+                            }}</label>
+                            <input
+                                id="eholding_first_author"
+                                v-model="eholding.first_author"
+                                :placeholder="$t('First author')"
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_title_id">{{
+                                $t("Title identifier:")
+                            }}</label>
+                            <input
+                                id="eholding_title_id"
+                                v-model="eholding.title_id"
+                                :placeholder="$t('Title identifier')"
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_embargo_info">{{
+                                $t("Embargo information:")
+                            }}</label>
+                            <input
+                                id="eholding_embargo_info"
+                                v-model="eholding.embargo_info"
+                                :placeholder="$t('Embargo information')"
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_coverage_depth">{{
+                                $t("Coverage depth:")
+                            }}</label>
+                            <input
+                                id="eholding_coverage_depth"
+                                v-model="eholding.coverage_depth"
+                                :placeholder="$t('Coverage depth')"
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_notes">{{
+                                $t("Notes:")
+                            }}</label>
+                            <input
+                                id="eholding_notes"
+                                v-model="eholding.notes"
+                                :placeholder="$t('Notes')"
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_publisher_name">{{
+                                $t("Publisher name:")
+                            }}</label>
+                            <input
+                                id="eholding_publisher_name"
+                                v-model="eholding.publisher_name"
+                                :placeholder="$t('Publisher name')"
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_publication_type">{{
+                                $t("Publication type:")
+                            }}</label>
+                            <input
+                                id="eholding_publication_type"
+                                v-model="eholding.publication_type"
+                                :placeholder="$t('Publication type')"
+                            />
+                        </li>
+
+                        <li>
+                            <label
+                                for="eholding_date_monograph_published_print"
+                                >{{
+                                    $t(
+                                        "Date the monograph is first published in print:"
+                                    )
+                                }}</label
+                            >
+                            <input
+                                id="eholding_date_monograph_published_print"
+                                v-model="
+                                    eholding.date_monograph_published_print
+                                "
+                                :placeholder="
+                                    $t(
+                                        'Date the monograph is first published in print'
+                                    )
+                                "
+                            />
+                        </li>
+
+                        <li>
+                            <label
+                                for="eholding_date_monograph_published_online"
+                                >{{
+                                    $t(
+                                        "Date the monograph is first published online:"
+                                    )
+                                }}</label
+                            >
+                            <input
+                                id="eholding_date_monograph_published_online"
+                                v-model="
+                                    eholding.date_monograph_published_online
+                                "
+                                :placeholder="
+                                    $t(
+                                        'Date the monograph is first published online'
+                                    )
+                                "
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_monograph_volume">{{
+                                $t("Number of volume for monograph:")
+                            }}</label>
+                            <input
+                                id="eholding_monograph_volume"
+                                v-model="eholding.monograph_volume"
+                                :placeholder="
+                                    $t('Number of volume for monograph')
+                                "
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_monograph_edition">{{
+                                $t("Edition of the monograph:")
+                            }}</label>
+                            <input
+                                id="eholding_monograph_edition"
+                                v-model="eholding.monograph_edition"
+                                :placeholder="$t('Edition of the monograph')"
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_first_editor">{{
+                                $t("First editor:")
+                            }}</label>
+                            <input
+                                id="eholding_first_editor"
+                                v-model="eholding.first_editor"
+                                :placeholder="$t('First editor')"
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_parent_publication_title_id">{{
+                                $t(
+                                    "Title identifier of the parent publication:"
+                                )
+                            }}</label>
+                            <input
+                                id="eholding_parent_publication_title_id"
+                                v-model="eholding.parent_publication_title_id"
+                                :placeholder="
+                                    $t(
+                                        'Title identifier of the parent publication'
+                                    )
+                                "
+                            />
+                        </li>
+
+                        <li>
+                            <label
+                                for="eholding_preceeding_publication_title_id"
+                                >{{
+                                    $t(
+                                        "Title identifier of any preceding publication title:"
+                                    )
+                                }}</label
+                            >
+                            <input
+                                id="eholding_preceeding_publication_title_id"
+                                v-model="
+                                    eholding.preceeding_publication_title_id
+                                "
+                                :placeholder="
+                                    $t(
+                                        'Title identifier of any preceding publication title'
+                                    )
+                                "
+                            />
+                        </li>
+
+                        <li>
+                            <label for="eholding_access_type">{{
+                                // FIXME May be fee-based (P) or Open Access (F).
+                                $t("Access type:")
+                            }}</label>
+                            <input
+                                id="eholding_access_type"
+                                v-model="eholding.access_type"
+                                :placeholder="$t('Access type')"
+                            />
+                        </li>
+                    </ol>
+                </fieldset>
+                <fieldset class="action">
+                    <input type="submit" value="Submit" />
+                    <router-link
+                        to="/cgi-bin/koha/erm/eholdings"
+                        role="button"
+                        class="cancel"
+                        >{{ $t("Cancel") }}</router-link
+                    >
+                </fieldset>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+import { setMessage, setError } from "../../messages"
+import { fetchEHolding } from '../../fetch'
+
+export default {
+    setup() {
+    },
+    data() {
+        return {
+            eholding: {
+                eholding_id: null,
+                publication_title: '',
+                print_identifier: '',
+                online_identifier: '',
+                date_first_issue_online: '',
+                num_first_vol_online: '',
+                num_first_issue_online: '',
+                date_last_issue_online: '',
+                num_last_vol_online: '',
+                num_last_issue_online: '',
+                title_url: '',
+                first_author: '',
+                title_id: '',
+                embargo_info: '',
+                coverage_depth: '',
+                notes: '',
+                publisher_name: '',
+                publication_type: '',
+                date_monograph_published_print: '',
+                date_monograph_published_online: '',
+                monograph_volume: '',
+                monograph_edition: '',
+                first_editor: '',
+                parent_publication_title_id: '',
+                preceeding_publication_title_id: '',
+                access_type: '',
+            },
+            initialized: false,
+        }
+    },
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+            if (to.params.eholding_id) {
+                vm.eholding = vm.getEHolding(to.params.eholding_id)
+            } else {
+                vm.initialized = true
+            }
+        })
+    },
+    methods: {
+        async getEHolding(eholding_id) {
+            const eholding = await fetchEHolding(eholding_id)
+            this.eholding = eholding
+            this.initialized = true
+        },
+        onSubmit(e) {
+            e.preventDefault()
+
+            let eholding = JSON.parse(JSON.stringify(this.eholding)) // copy
+            let apiUrl = '/api/v1/erm/eholdings'
+
+            let method = 'POST'
+            if (eholding.eholding_id) {
+                method = 'PUT'
+                apiUrl += '/' + eholding.eholding_id
+            }
+            delete eholding.eholding_id
+
+            const options = {
+                method: method,
+                body: JSON.stringify(eholding),
+                headers: {
+                    'Content-Type': 'application/json;charset=utf-8'
+                },
+            }
+
+            fetch(apiUrl, options)
+                .then(response => {
+                    if (response.status == 200) {
+                        this.$router.push("/cgi-bin/koha/erm/eholdings")
+                        setMessage(this.$t("EHolding updated"))
+                    } else if (response.status == 201) {
+                        this.$router.push("/cgi-bin/koha/erm/eholdings")
+                        setMessage(this.$t("EHolding created"))
+                    } else {
+                        setError(response.message || response.statusText)
+                    }
+                }, (error) => {
+                    setError(error)
+                }).catch(e => { console.log(e) })
+        },
+    },
+    name: "EHoldingsFormAdd",
+}
+</script>
+<style scoped>
+fieldset.rows label {
+    width: 25rem;
+}
+</style>
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsFormConfirmDelete.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsFormConfirmDelete.vue
new file mode 100644
index 0000000000..ae08c91eb4
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsFormConfirmDelete.vue
@@ -0,0 +1,86 @@
+<template>
+    <div v-if="!initialized">{{ $t("Loading") }}</div>
+    <div v-else id="eholdings_confirm_delete">
+        <h2>{{ $t("Delete eHolding") }}</h2>
+        <div>
+            <form @submit="onSubmit($event)">
+                <fieldset class="rows">
+                    <ol>
+                        <li>
+                            {{ $t("eHolding title:") }}
+                            {{ eholding.publication_title }}
+                        </li>
+                    </ol>
+                </fieldset>
+                <fieldset class="action">
+                    <input
+                        type="submit"
+                        variant="primary"
+                        :value="$t('Yes, delete')"
+                    />
+                    <router-link
+                        to="/cgi-bin/koha/erm/eholdings"
+                        role="button"
+                        class="cancel"
+                        >{{ $t("No, do not delete") }}</router-link
+                    >
+                </fieldset>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+import { fetchEHolding } from "../../fetch"
+import { setMessage, setError } from "../../messages"
+
+export default {
+    data() {
+        return {
+            eholding: {},
+            initialized: false,
+        }
+    },
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+            vm.getEHolding(to.params.eholding_id)
+        })
+    },
+    methods: {
+        async getEHolding(eholding_id) {
+            const eholding = await fetchEHolding(eholding_id)
+            this.eholding = eholding
+            this.initialized = true
+        },
+        onSubmit(e) {
+            e.preventDefault()
+
+            let apiUrl = '/api/v1/erm/eholdings/' + this.eholding.eholding_id
+
+            const options = {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json;charset=utf-8'
+                },
+            }
+
+            fetch(apiUrl, options)
+                .then(
+                    (response) => {
+                        if (response.status == 204) {
+                            setMessage(this.$t("eHolding deleted"))
+                            this.$router.push("/cgi-bin/koha/erm/eholdings")
+                        } else {
+                            setError(response.message || response.statusText)
+                        }
+                    }
+                ).catch(
+                    (error) => {
+                        setError(error)
+                    }
+                )
+        }
+    },
+    name: "EHoldingsFormConfirmDelete",
+}
+</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsList.vue
new file mode 100644
index 0000000000..3516470952
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsList.vue
@@ -0,0 +1,149 @@
+<template>
+    <div v-if="!this.initialized">{{ $t("Loading") }}</div>
+    <div v-else-if="this.eholdings" id="eholdings_list">
+        <Toolbar />
+        <table v-if="this.eholdings.length" id="eholding_list"></table>
+        <div v-else-if="this.initialized" class="dialog message">
+            {{ $t("There are no eHoldings defined") }}
+        </div>
+    </div>
+</template>
+
+<script>
+import Toolbar from "./EHoldingsToolbar.vue"
+import { createVNode, render } from 'vue'
+import { fetchEHoldings } from "../../fetch"
+
+export default {
+    data: function () {
+        return {
+            eholdings: [],
+            initialized: false,
+        }
+    },
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+            vm.getEHoldings()
+        })
+    },
+    methods: {
+        async getEHoldings() {
+            const eholdings = await fetchEHoldings()
+            this.eholdings = eholdings
+            console.log(this.eholdings)
+            this.initialized = true
+        },
+        show_eholding: function (eholding_id) {
+            this.$router.push("/cgi-bin/koha/erm/eholdings/" + eholding_id)
+        },
+        edit_eholding: function (eholding_id) {
+            this.$router.push("/cgi-bin/koha/erm/eholdings/edit/" + eholding_id)
+        },
+        delete_eholding: function (eholding_id) {
+            this.$router.push("/cgi-bin/koha/erm/eholdings/delete/" + eholding_id)
+        },
+    },
+    updated() {
+        let show_eholding = this.show_eholding
+        let edit_eholding = this.edit_eholding
+        let delete_eholding = this.delete_eholding
+
+        $('#eholding_list').kohaTable({
+            "ajax": {
+                "url": eholdings_table_url,
+            },
+            "order": [[0, "asc"]],
+            "columnDefs": [{
+                "targets": [1],
+                "render": function (data, type, row, meta) {
+                    if (type == 'display') {
+                        return escape_str(data)
+                    }
+                    return data
+                }
+            }],
+            "columns": [
+                {
+                    "title": __("Title"),
+                    "data": ["me.eholding_id", "me.publication_title"],
+                    "searchable": true,
+                    "orderable": true,
+                    // Rendering done in drawCallback
+                },
+                {
+                    "title": __("Publication type"),
+                    "data": "publication_type",
+                    "searchable": true,
+                    "orderable": true,
+                },
+                {
+                    "title": __("Identifier"),
+                    "data": ["print_identifier", "online_identifier"],
+                    "searchable": true,
+                    "orderable": true,
+                    "render": function (data, type, row, meta) {
+                        let print_identifier = row.print_identifier
+                        let online_identifier = row.online_identifier
+                        return ( print_identifier ? escape_str(_("ISBN (Print): %s").format(print_identifier)) : "" ) + 
+                               ( online_identifier ? escape_str(_("ISBN (Online): %s").format(online_identifier)) : "" )
+                    }
+                },
+                {
+                    "title": __("Actions"),
+                    "data": function (row, type, val, meta) {
+                        return '<div class="actions"></div>'
+                    },
+                    "className": "actions noExport",
+                    "searchable": false,
+                    "orderable": false
+                }
+            ],
+            drawCallback: function (settings) {
+
+                var api = new $.fn.dataTable.Api(settings)
+
+                $.each($(this).find("td .actions"), function (index, e) {
+                    let eholding_id = api.row(index).data().eholding_id
+                    let editButton = createVNode("a", {
+                        class: "btn btn-default btn-xs", role: "button", onClick: () => {
+                            edit_eholding(eholding_id)
+                        }
+                    },
+                        [createVNode("i", { class: "fa fa-pencil", 'aria-hidden': "true" }), __("Edit")])
+
+                    let deleteButton = createVNode("a", {
+                        class: "btn btn-default btn-xs", role: "button", onClick: () => {
+                            delete_eholding(eholding_id)
+                        }
+                    },
+                        [createVNode("i", { class: "fa fa-trash", 'aria-hidden': "true" }), __("Delete")])
+
+                    let n = createVNode('span', {}, [editButton, " ", deleteButton])
+                    render(n, e)
+                })
+
+                $.each($(this).find("tbody tr td:first-child"), function (index, e) {
+                    let row = api.row(index).data()
+                    if (!row) return // Happen if the table is empty
+                    let n = createVNode("a", {
+                        role: "button",
+                        onClick: () => {
+                            show_eholding(row.eholding_id)
+                        }
+                    },
+                        `${row.publication_title} (#${row.eholding_id})`
+                    )
+                    render(n, e)
+                })
+            },
+        }, eholding_table_settings, 1)
+    },
+    beforeUnmount() {
+        $('#eholding_list')
+            .DataTable()
+            .destroy(true)
+    },
+    components: { Toolbar },
+    name: "EHoldingsList",
+}
+</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsShow.vue
new file mode 100644
index 0000000000..07e70e50e3
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsShow.vue
@@ -0,0 +1,253 @@
+<template>
+    <div v-if="!initialized">{{ $t("Loading") }}</div>
+    <div v-else id="eholdings_show">
+        <h2>
+            {{ $t("EHolding.id", { id: eholding.eholding_id }) }}
+            <span class="action_links">
+                <router-link
+                    :to="`/cgi-bin/koha/erm/eholdings/edit/${eholding.eholding_id}`"
+                    :title="$t('Edit')"
+                    ><i class="fa fa-pencil"></i
+                ></router-link>
+
+                <router-link
+                    :to="`/cgi-bin/koha/erm/eholdings/delete/${eholding.eholding_id}`"
+                    :title="$t('Delete')"
+                    ><i class="fa fa-trash"></i
+                ></router-link>
+            </span>
+        </h2>
+        <div>
+            <fieldset class="rows">
+                <ol>
+                    <li>
+                        <label>{{ $t("Publication title:") }}</label>
+                        <span>
+                            {{ eholding.publication_title }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Print-format identifier:") }}</label>
+                        <span>
+                            {{ eholding.print_identifier }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Online-format identifier:") }}</label>
+                        <span>
+                            {{ eholding.online_identifier }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Date of first serial issue available online:") }}</label>
+                        <span>
+                            {{ eholding.date_first_issue_online }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Number of first volume available online:") }}</label>
+                        <span>
+                            {{ eholding.num_first_vol_online }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Number of first issue available online:") }}</label>
+                        <span>
+                            {{ eholding.num_first_issue_online }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Date of last issue available online:") }}</label>
+                        <span>
+                            {{ eholding.date_last_issue_online }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Number of last volume available online:") }}</label>
+                        <span>
+                            {{ eholding.num_last_vol_online }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Number of last issue available online:") }}</label>
+                        <span>
+                            {{ eholding.num_last_issue_online }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Title-level URL:") }}</label>
+                        <span>
+                            {{ eholding.title_url }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("First author:") }}</label>
+                        <span>
+                            {{ eholding.first_author }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Title identifier:") }}</label>
+                        <span>
+                            {{ eholding.title_id }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Embargo information:") }}</label>
+                        <span>
+                            {{ eholding.embargo_info }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Coverage depth:") }}</label>
+                        <span>
+                            {{ eholding.coverage_depth }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Notes:") }}</label>
+                        <span>
+                            {{ eholding.notes }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Publisher name:") }}</label>
+                        <span>
+                            {{ eholding.publisher_name }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Publication type:") }}</label>
+                        <span>
+                            {{ eholding.publication_type }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Date the monograph is first published in print:") }}</label>
+                        <span>
+                            {{ eholding.date_monograph_published_print }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Date the monograph is first published online:") }}</label>
+                        <span>
+                            {{ eholding.date_monograph_published_online }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Number of volume for monograph:") }}</label>
+                        <span>
+                            {{ eholding.monograph_volume }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Edition of the monograph:") }}</label>
+                        <span>
+                            {{ eholding.monograph_edition }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("First editor:") }}</label>
+                        <span>
+                            {{ eholding.first_editor }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Title identifier of the parent publication:") }}</label>
+                        <span>
+                            {{ eholding.parent_publication_title_id }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Title identifier of any preceding publication title:") }}</label>
+                        <span>
+                            {{ eholding.preceeding_publication_title_id }}
+                        </span>
+                    </li>
+                    <li>
+                        <label>{{ $t("Acces type:") }}</label>
+                        <span>
+                            {{ eholding.access_type }}
+                        </span>
+                    </li>
+                </ol>
+            </fieldset>
+            <fieldset class="action">
+                <router-link
+                    to="/cgi-bin/koha/erm/eholdings"
+                    role="button"
+                    class="cancel"
+                    >{{ $t("Close") }}</router-link
+                >
+            </fieldset>
+        </div>
+    </div>
+</template>
+
+<script>
+import { fetchEHolding } from "../../fetch"
+
+export default {
+    setup() {
+    },
+    data() {
+        return {
+            eholding: {
+                eholding_id: null,
+                publication_title: '',
+                print_identifier: '',
+                online_identifier: '',
+                date_first_issue_online: '',
+                num_first_vol_online: '',
+                num_first_issue_online: '',
+                date_last_issue_online: '',
+                num_last_vol_online: '',
+                num_last_issue_online: '',
+                title_url: '',
+                first_author: '',
+                title_id: '',
+                embargo_info: '',
+                coverage_depth: '',
+                notes: '',
+                publisher_name: '',
+                publication_type: '',
+                date_monograph_published_print: '',
+                date_monograph_published_online: '',
+                monograph_volume: '',
+                monograph_edition: '',
+                first_editor: '',
+                parent_publication_title_id: '',
+                preceeding_publication_title_id: '',
+                access_type: '',
+            },
+            initialized: false,
+        }
+    },
+
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+            vm.getEHolding(to.params.eholding_id)
+            vm.initialized = true
+        })
+    },
+    beforeRouteUpdate(to, from) {
+        this.eholding = this.getEHolding(to.params.eholding_id)
+    },
+    methods: {
+        async getEHolding(eholding_id) {
+            const eholding = await fetchEHolding(eholding_id)
+            this.eholding = eholding
+        },
+    },
+    name: "EHoldingsShow",
+}
+</script>
+<style scoped>
+.action_links a {
+    padding-left: 0.2em;
+    font-size: 11px;
+}
+fieldset.rows label {
+    width: 25rem;
+}
+</style>
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsToolbar.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsToolbar.vue
new file mode 100644
index 0000000000..8403568549
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsToolbar.vue
@@ -0,0 +1,12 @@
+<template>
+    <router-link to="/cgi-bin/koha/erm/eholdings/add" class="btn btn-default"
+        ><font-awesome-icon icon="plus" />
+        {{ $t("New eHolding") }}</router-link
+    >
+</template>
+
+<script>
+export default {
+    name: "EHoldingsToolbar",
+}
+</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue
index 4001bd95eb..ffe1f1f72a 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue
@@ -31,6 +31,14 @@
                                         {{ $t("Packages") }}</router-link
                                     >
                                 </li>
+                                <li>
+                                    <router-link
+                                        to="/cgi-bin/koha/erm/eholdings"
+                                    >
+                                        <i class="fa fa-file-text-o"></i>
+                                        {{ $t("eHoldings") }}</router-link
+                                    >
+                                </li>
                                 <li>
                                     <router-link
                                         to="/cgi-bin/koha/erm/licenses"
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js
index 07ab02a9ee..44e73796bf 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch.js
@@ -10,7 +10,7 @@ export const fetchAgreement = async function (agreement_id) {
                 "periods,user_roles,user_roles.patron,agreement_licenses,agreement_licenses.license,agreement_relationships,agreement_relationships.related_agreement,documents",
         },
     })
-        .then((res) => res.json())
+        .then(checkError)
         .then(
             (result) => {
                 agreement = result;
@@ -26,7 +26,7 @@ export const fetchAgreements = async function () {
     const apiUrl = "/api/v1/erm/agreements";
     let agreements;
     await fetch(apiUrl)
-        .then((res) => res.json())
+        .then(checkError)
         .then(
             (result) => {
                 agreements = result;
@@ -43,7 +43,7 @@ export const fetchLicense = async function (license_id) {
     const apiUrl = "/api/v1/erm/licenses/" + license_id;
     let license;
     await fetch(apiUrl)
-        .then((res) => res.json())
+        .then(checkError)
         .then(
             (result) => {
                 license = result;
@@ -59,7 +59,7 @@ export const fetchLicenses = async function () {
     const apiUrl = "/api/v1/erm/licenses";
     let licenses;
     await fetch(apiUrl)
-        .then((res) => res.json())
+        .then(checkError)
         .then(
             (result) => {
                 licenses = result;
@@ -76,7 +76,7 @@ export const fetchPatron = async function (patron_id) {
     const apiUrl = "/api/v1/patrons/" + patron_id;
     let patron;
     await fetch(apiUrl)
-        .then((res) => res.json())
+        .then(checkError)
         .then(
             (result) => {
                 patron = result;
@@ -92,7 +92,7 @@ export const fetchVendors = async function () {
     const apiUrl = "/api/v1/acquisitions/vendors";
     let vendors;
     await fetch(apiUrl)
-        .then((res) => res.json())
+        .then(checkError)
         .then(
             (result) => {
                 vendors = result;
@@ -113,7 +113,7 @@ export const fetchPackage = async function (package_id) {
             "x-koha-embed": "package_agreements,package_agreements.agreement",
         },
     })
-        .then((res) => res.json())
+        .then(checkError)
         .then(
             (result) => {
                 erm_package = result;
@@ -129,7 +129,7 @@ export const fetchPackages = async function () {
     const apiUrl = "/api/v1/erm/packages";
     let packages;
     await fetch(apiUrl)
-        .then((res) => res.json())
+        .then(checkError)
         .then(
             (result) => {
                 packages = result;
@@ -140,3 +140,46 @@ export const fetchPackages = async function () {
         );
     return packages;
 };
+
+export const fetchEHolding = async function (eholding_id) {
+    if (!eholding_id) return;
+    const apiUrl = "/api/v1/erm/eholdings/" + eholding_id;
+    let erm_eholding;
+    await fetch(apiUrl)
+        .then(checkError)
+        .then(
+            (result) => {
+                erm_eholding = result;
+            },
+            (error) => {
+                setError(error);
+            }
+        );
+    return erm_eholding;
+};
+
+export const fetchEHoldings = async function () {
+    const apiUrl = "/api/v1/erm/eholdings";
+    let eholdings;
+    await fetch(apiUrl)
+        .then(checkError)
+        .then(
+            (result) => {
+                eholdings = result;
+            },
+            (error) => {
+                setError(error);
+            }
+        );
+    return eholdings;
+};
+
+function checkError(response) {
+    if (response.status >= 200 && response.status <= 299) {
+        return response.json();
+    } else {
+        console.log("Server returned an error:");
+        console.log(response);
+        setError("%s (%s)".format(response.statusText, response.status));
+    }
+}
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/routes.js b/koha-tmpl/intranet-tmpl/prog/js/vue/routes.js
index 5c3c91063c..76ce3f383b 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/routes.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/routes.js
@@ -7,6 +7,10 @@ import PackagesList from "./components/ERM/PackagesList.vue";
 import PackagesShow from "./components/ERM/PackagesShow.vue";
 import PackagesFormAdd from "./components/ERM/PackagesFormAdd.vue";
 import PackagesFormConfirmDelete from "./components/ERM/PackagesFormConfirmDelete.vue";
+import EHoldingsList from "./components/ERM/EHoldingsList.vue";
+import EHoldingsShow from "./components/ERM/EHoldingsShow.vue";
+import EHoldingsFormAdd from "./components/ERM/EHoldingsFormAdd.vue";
+import EHoldingsFormConfirmDelete from "./components/ERM/EHoldingsFormConfirmDelete.vue";
 import LicensesList from "./components/ERM/LicensesList.vue";
 import LicensesShow from "./components/ERM/LicensesShow.vue";
 import LicensesFormAdd from "./components/ERM/LicensesFormAdd.vue";
@@ -19,8 +23,9 @@ const breadcrumbs = {
         path: "/cgi-bin/koha/erm/erm.pl",
     },
     agreements: { text: "Agreements", path: "/cgi-bin/koha/erm/agreements" },
-    licenses: { text: "Licenses", path: "/cgi-bin/koha/erm/licenses" },
     packages: { text: "Packages", path: "/cgi-bin/koha/erm/packages" },
+    eholdings: { text: "eHoldings", path: "/cgi-bin/koha/erm/eholdings" },
+    licenses: { text: "Licenses", path: "/cgi-bin/koha/erm/licenses" },
 };
 export const routes = [
     { path: "/cgi-bin/koha/mainpage.pl" },
@@ -151,6 +156,66 @@ export const routes = [
             view: "edit",
         },
     },
+    {
+        path: "/cgi-bin/koha/erm/eholdings",
+        component: EHoldingsList,
+        meta: {
+            breadcrumb: [
+                breadcrumbs.home,
+                breadcrumbs.erm_home,
+                breadcrumbs.eholdings,
+            ],
+            view: "list",
+        },
+    },
+    {
+        path: "/cgi-bin/koha/erm/eholdings/:eholding_id",
+        component: EHoldingsShow,
+        meta: {
+            breadcrumb: [
+                breadcrumbs.home,
+                breadcrumbs.erm_home,
+                breadcrumbs.eholdings,
+            ],
+            view: "show",
+        },
+    },
+    {
+        path: "/cgi-bin/koha/erm/eholdings/delete/:eholding_id",
+        component: EHoldingsFormConfirmDelete,
+        meta: {
+            breadcrumb: [
+                breadcrumbs.home,
+                breadcrumbs.erm_home,
+                breadcrumbs.eholdings,
+            ],
+            view: "confirm-delete-form",
+        },
+    },
+    {
+        path: "/cgi-bin/koha/erm/eholdings/add",
+        component: EHoldingsFormAdd,
+        meta: {
+            breadcrumb: [
+                breadcrumbs.home,
+                breadcrumbs.erm_home,
+                breadcrumbs.eholdings,
+            ],
+            view: "add",
+        },
+    },
+    {
+        path: "/cgi-bin/koha/erm/eholdings/edit/:eholding_id",
+        component: EHoldingsFormAdd,
+        meta: {
+            breadcrumb: [
+                breadcrumbs.home,
+                breadcrumbs.erm_home,
+                breadcrumbs.eholdings,
+            ],
+            view: "edit",
+        },
+    },
     {
         path: "/cgi-bin/koha/erm/licenses",
         component: LicensesList,
-- 
2.39.2