Bug 32030: ERM - Refactoring
authorJonathan Druart <jonathan.druart@bugs.koha-community.org>
Tue, 3 May 2022 13:55:22 +0000 (15:55 +0200)
committerTomas Cohen Arazi <tomascohen@theke.io>
Tue, 8 Nov 2022 12:43:43 +0000 (09:43 -0300)
We want the whole erm.pl to be a Vue app \o/

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>
16 files changed:
erm/agreements.pl [deleted file]
erm/erm-home.pl [deleted file]
erm/erm.pl [new file with mode: 0755]
koha-tmpl/intranet-tmpl/prog/en/includes/erm-menu.inc
koha-tmpl/intranet-tmpl/prog/en/includes/header.inc
koha-tmpl/intranet-tmpl/prog/en/modules/erm/agreements.tt [deleted file]
koha-tmpl/intranet-tmpl/prog/en/modules/erm/erm-home.tt [deleted file]
koha-tmpl/intranet-tmpl/prog/en/modules/erm/erm.tt [new file with mode: 0644]
koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
koha-tmpl/intranet-tmpl/prog/js/vue/Agreements.vue [deleted file]
koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Agreements.vue [new file with mode: 0644]
koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Breadcrumb.vue [new file with mode: 0644]
koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMHome.vue [new file with mode: 0644]
koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMMain.vue [new file with mode: 0644]
koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts
package.json

diff --git a/erm/agreements.pl b/erm/agreements.pl
deleted file mode 100755 (executable)
index 99485df..0000000
+++ /dev/null
@@ -1,43 +0,0 @@
-#! /usr/bin/perl
-
-# This file is part of Koha.
-#
-# Koha is free software; you can redistribute it and/or modify it
-# under the terms of the GNU General Public License as published by
-# the Free Software Foundation; either version 3 of the License, or
-# (at your option) any later version.
-#
-# Koha is distributed in the hope that it will be useful, but
-# WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-# GNU General Public License for more details.
-#
-# You should have received a copy of the GNU General Public License
-# along with Koha; if not, see <http://www.gnu.org/licenses>.
-
-use Modern::Perl;
-use CGI qw ( -utf8 );
-use C4::Context;
-use C4::Auth qw( get_template_and_user );
-use C4::Output qw( output_html_with_http_headers );
-
-use Koha::DateUtils qw( dt_from_string );
-use Koha::Acquisition::Booksellers;
-use Koha::ERM::Agreements;
-
-my $input        = CGI->new;
-
-my ( $template, $loggedinuser, $cookie ) = get_template_and_user(
-    {
-        template_name => "erm/agreements.tt",
-        query         => $input,
-        type          => "intranet",
-        flagsrequired => { 'erm' => '1' },
-    }
-);
-
-$template->param(
-    vendors => Koha::Acquisition::Booksellers->search,
-);
-
-output_html_with_http_headers $input, $cookie, $template->output;
diff --git a/erm/erm-home.pl b/erm/erm-home.pl
deleted file mode 100755 (executable)
index e657e7d..0000000
+++ /dev/null
@@ -1,38 +0,0 @@
-#! /usr/bin/perl
-
-# Copyright 2022 Koha Development Team
-#
-# This file is part of Koha.
-#
-# Koha is free software; you can redistribute it and/or modify it
-# under the terms of the GNU General Public License as published by
-# the Free Software Foundation; either version 3 of the License, or
-# (at your option) any later version.
-#
-# Koha is distributed in the hope that it will be useful, but
-# WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-# GNU General Public License for more details.
-#
-# You should have received a copy of the GNU General Public License
-# along with Koha; if not, see <http://www.gnu.org/licenses>.
-
-use Modern::Perl;
-use CGI qw ( -utf8 );
-use C4::Context;
-use C4::Auth qw( get_template_and_user );
-use C4::Output qw( output_html_with_http_headers );
-
-use Koha::Cities;
-
-my $input = CGI->new;
-
-my ( $template, $loggedinuser, $cookie ) = get_template_and_user(
-    {   template_name   => "erm/erm-home.tt",
-        query           => $input,
-        type            => "intranet",
-        flagsrequired   => { erm => '*' },
-    }
-);
-
-output_html_with_http_headers $input, $cookie, $template->output;
diff --git a/erm/erm.pl b/erm/erm.pl
new file mode 100755 (executable)
index 0000000..0e5dd55
--- /dev/null
@@ -0,0 +1,42 @@
+#! /usr/bin/perl
+
+# This file is part of Koha.
+#
+# Koha is free software; you can redistribute it and/or modify it
+# under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 3 of the License, or
+# (at your option) any later version.
+#
+# Koha is distributed in the hope that it will be useful, but
+# WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with Koha; if not, see <http://www.gnu.org/licenses>.
+
+use Modern::Perl;
+use CGI qw ( -utf8 );
+use C4::Context;
+use C4::Auth qw( get_template_and_user );
+use C4::Output qw( output_html_with_http_headers );
+
+use Koha::DateUtils qw( dt_from_string );
+use Koha::Acquisition::Booksellers;
+
+my $input        = CGI->new;
+
+my ( $template, $loggedinuser, $cookie ) = get_template_and_user(
+    {
+        template_name => "erm/erm.tt",
+        query         => $input,
+        type          => "intranet",
+        flagsrequired => { 'erm' => '1' },
+    }
+);
+
+$template->param(
+    vendors => Koha::Acquisition::Booksellers->search,
+);
+
+output_html_with_http_headers $input, $cookie, $template->output;
index f6a0f90..d23e0fd 100644 (file)
@@ -3,6 +3,7 @@
         <h5>ERM</h5>
         <ul>
             <li><a href="/cgi-bin/koha/erm/agreements.pl">Agreements</a></li>
+            <li><a href="/cgi-bin/koha/erm/licenses.pl">Licenses</a></li>
         </ul>
     </div>
 </div>
index d99ffe4..147865d 100644 (file)
@@ -44,7 +44,7 @@
                         <li><a href="/cgi-bin/koha/serials/serials-home.pl">Serials</a></li>
                     [% END %]
                     [% IF Koha.Preference('ERMModule') && CAN_user_erm %]
-                        <li><a href="/cgi-bin/koha/erm/erm-home.pl">Electronic resources management</a></li>
+                        <li><a href="/cgi-bin/koha/erm/erm.pl">Electronic resources management</a></li>
                     [% END %]
                     [% IF ( Koha.Preference('UseCourseReserves') ) %]
                         <li><a href="/cgi-bin/koha/course_reserves/course-reserves.pl">Course reserves</a></li>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/erm/agreements.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/erm/agreements.tt
deleted file mode 100644 (file)
index 8680c65..0000000
+++ /dev/null
@@ -1,93 +0,0 @@
-[% USE raw %]
-[% USE To %]
-[% USE Asset %]
-[% USE KohaDates %]
-[% USE TablesSettings %]
-[% USE AuthorisedValues %]
-[% SET footerjs = 1 %]
-[% INCLUDE 'doc-head-open.inc' %]
-<title>
-    [% IF op =='add_form' %]
-        [% IF agreement.agreement_id %]
-            Modify agreement
-        [% ELSE %]
-            New agreement
-        [% END %] &rsaquo; [% ELSE %]
-        [% IF op == 'delete_confirm' %]
-            Confirm deletion of agreement &rsaquo; [% END %]
-    [% END %]
-    Agreements &rsaquo; Electronic resources management &rsaquo; Koha
-</title>
-[% INCLUDE 'doc-head-close.inc' %]
-</head>
-
-<body id="erm_agreements" class="erm">
-[% INCLUDE 'header.inc' %]
-[% INCLUDE 'erm-search.inc' %]
-
-<nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
-    <ol>
-        <li>
-            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
-        </li>
-        <li>
-            <a href="/cgi-bin/koha/erm/erm-home.pl">Electronic resources management</a>
-        </li>
-
-        <li>
-            <a href="/cgi-bin/koha/erm/agreements.pl">Agreements</a>
-        </li>
-    </ol>
-</nav>
-
-<div class="main container-fluid">
-    <div class="row">
-        <div class="col-sm-10 col-sm-push-2">
-            <main>
-
-                <div id="agreements"></div>
-
-            </main>
-        </div> <!-- /.col-sm-10.col-sm-push-2 -->
-
-        <div class="col-sm-2 col-sm-pull-10">
-            <aside>
-                [% INCLUDE 'erm-menu.inc' %]
-            </aside>
-        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
-     </div> <!-- /.row -->
-
-[% MACRO jsinclude BLOCK %]
-    [% Asset.js("js/erm-menu.js") | $raw %]
-    [% INCLUDE 'calendar.inc' %]
-    [% INCLUDE 'datatables.inc' %]
-    [% INCLUDE 'columns_settings.inc' %]
-    [% INCLUDE 'js-patron-format.inc' %]
-    [% INCLUDE 'js-date-format.inc' %]
-
-    <script>
-
-        const agreement_statuses = [% To.json(AuthorisedValues.Get('ERM_AGREEMENT_STATUS')) | $raw %];
-
-        const agreement_closure_reasons = [% To.json(AuthorisedValues.Get('ERM_AGREEMENT_CLOSURE_REASON')) | $raw %];
-        const agreement_renewal_priorities = [% To.json(AuthorisedValues.Get('ERM_AGREEMENT_RENEWAL_PRIORITY')) | $raw %];
-        const agreement_user_roles = [% To.json(AuthorisedValues.Get('ERM_AGREEMENT_USER_ROLES')) | $raw %];
-
-        var table_settings = [% TablesSettings.GetTableSettings( 'erm', 'agreements', 'agreements', 'json' ) | $raw %];
-        var agreements_table_url = '/api/v1/erm/agreements?';
-
-        [% IF agreement_name_filter %]
-            var agreement_name_filter = {
-                'name': {
-                    "like": '%[%- agreement_name_filter | html -%]%'
-                }
-            };
-            agreements_table_url += 'q='+ encodeURIComponent(JSON.stringify(agreement_name_filter));
-        [% END %]
-    </script>
-
-    [% Asset.js("js/vue/dist/main.js") %]
-    [% Asset.js("js/vue/dist/runtime.js") %]
-
-[% END %]
-[% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/erm/erm-home.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/erm/erm-home.tt
deleted file mode 100644 (file)
index 0417b04..0000000
+++ /dev/null
@@ -1,40 +0,0 @@
-[% USE raw %]
-[% USE Koha %]
-[% USE Branches %]
-[% INCLUDE 'doc-head-open.inc' %]
-<title>Electronic resources management &rsaquo; Koha</title>
-[% INCLUDE 'doc-head-close.inc' %]
-</head>
-<body id="erm_erm-home" class="circ">
-[% INCLUDE 'header.inc' %]
-[% INCLUDE 'erm-search.inc' %]
-
-<nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
-    <ol>
-        <li>
-            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
-        </li>
-        <li>
-            <a href="#" aria-current="page">
-                Electronic resources management
-            </a>
-        </li>
-    </ol>
-</nav>
-
-<div class="main container-fluid">
-    <div class="row">
-        <div class="col-sm-5 col-md-4">
-            <h3>Electronic resources management</h3>
-
-            <ul class="buttons-list">
-                <li>
-                    <a class="erm-button" href="/cgi-bin/koha/erm/agreements.pl"><i class="fa fa-upload"></i> Agreements</a>
-                </li>
-                <li>
-            </ul>
-        </div>
-    </div>
-</div>
-
-[% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/erm/erm.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/erm/erm.tt
new file mode 100644 (file)
index 0000000..bd71761
--- /dev/null
@@ -0,0 +1,52 @@
+[% USE raw %]
+[% USE To %]
+[% USE Asset %]
+[% USE KohaDates %]
+[% USE TablesSettings %]
+[% USE AuthorisedValues %]
+[% SET footerjs = 1 %]
+[% INCLUDE 'doc-head-open.inc' %]
+<title>
+    Electronic resources management &rsaquo; Koha
+</title>
+[% INCLUDE 'doc-head-close.inc' %]
+</head>
+
+<body id="erm_agreements" class="erm">
+[% INCLUDE 'header.inc' %]
+[% INCLUDE 'erm-search.inc' %]
+
+<div id="erm"> <!-- this is closed in intranet-bottom.inc -->
+
+[% MACRO jsinclude BLOCK %]
+    [% INCLUDE 'calendar.inc' %]
+    [% INCLUDE 'datatables.inc' %]
+    [% INCLUDE 'columns_settings.inc' %]
+    [% INCLUDE 'js-patron-format.inc' %]
+    [% INCLUDE 'js-date-format.inc' %]
+
+    <script>
+
+        const agreement_statuses = [% To.json(AuthorisedValues.Get('ERM_AGREEMENT_STATUS')) | $raw %];
+
+        const agreement_closure_reasons = [% To.json(AuthorisedValues.Get('ERM_AGREEMENT_CLOSURE_REASON')) | $raw %];
+        const agreement_renewal_priorities = [% To.json(AuthorisedValues.Get('ERM_AGREEMENT_RENEWAL_PRIORITY')) | $raw %];
+        const agreement_user_roles = [% To.json(AuthorisedValues.Get('ERM_AGREEMENT_USER_ROLES')) | $raw %];
+
+        var table_settings = [% TablesSettings.GetTableSettings( 'erm', 'agreements', 'agreements', 'json' ) | $raw %];
+        var agreements_table_url = '/api/v1/erm/agreements?';
+
+        [% IF agreement_name_filter %]
+            var agreement_name_filter = {
+                'name': {
+                    "like": '%[%- agreement_name_filter | html -%]%'
+                }
+            };
+            agreements_table_url += 'q='+ encodeURIComponent(JSON.stringify(agreement_name_filter));
+        [% END %]
+    </script>
+
+    [% Asset.js("js/vue/dist/main.js") | $raw %]
+
+[% END %]
+[% INCLUDE 'intranet-bottom.inc' %]
index 3b9dbd0..744fd7c 100644 (file)
 
                             [% IF Koha.Preference('ERMModule') && CAN_user_erm %]
                             <li>
-                                <a class="icon_general icon_erm" href="/cgi-bin/koha/erm/erm-home.pl"><i class="fa fa-fw fa-newspaper-o"></i>Electronic resources management</a>
+                                <a class="icon_general icon_erm" href="/cgi-bin/koha/erm/erm.pl"><i class="fa fa-fw fa-newspaper-o"></i>Electronic resources management</a>
                             </li>
                             [% END %]
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/Agreements.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/Agreements.vue
deleted file mode 100644 (file)
index 17ee020..0000000
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-    <Toolbar v-if="op == 'list'" @switch-view="switchView" />
-    <div class="dialog message" v-if="message">{{ message }}</div>
-    <div class="dialog alert" v-if="error">{{ error }}</div>
-    <List
-        v-if="op == 'list'"
-        :vendors="vendors"
-        :av_statuses="statuses"
-        :av_closure_reasons="closure_reasons"
-        :av_renewal_priorities="renewal_priorities"
-        @set-current-agreement-id="setCurrentAgreementID"
-        @switch-view="switchView"
-        @set-error="setError"
-    />
-    <Show
-        v-if="op == 'show'"
-        :agreement_id="agreement_id"
-        :vendors="vendors"
-        :av_statuses="statuses"
-        :av_closure_reasons="closure_reasons"
-        :av_renewal_priorities="renewal_priorities"
-        :av_user_roles="user_roles"
-        @switch-view="switchView"
-        @set-error="setError"
-    />
-    <AddForm
-        v-if="op == 'add-form'"
-        :agreement_id="agreement_id"
-        :vendors="vendors"
-        :av_statuses="statuses"
-        :av_closure_reasons="closure_reasons"
-        :av_renewal_priorities="renewal_priorities"
-        :av_user_roles="user_roles"
-        @agreement-created="agreementCreated"
-        @agreement-updated="agreementUpdated"
-        @switch-view="switchView"
-        @set-error="setError"
-    />
-    <ConfirmDeleteForm
-        v-if="op == 'confirm-delete-form'"
-        :agreement_id="agreement_id"
-        @agreement-deleted="agreementDeleted"
-        @switch-view="switchView"
-        @set-error="setError"
-    />
-</template>
-
-<script>
-import Toolbar from "./components/ERM/AgreementsToolbar.vue"
-import List from "./components/ERM/AgreementsList.vue"
-import Show from "./components/ERM/AgreementsShow.vue"
-import AddForm from "./components/ERM/AgreementsFormAdd.vue"
-import ConfirmDeleteForm from "./components/ERM/AgreementsFormConfirmDelete.vue"
-
-import { reactive, computed } from "vue"
-
-export default {
-    data() {
-        return {
-            agreement_id: null,
-            op: "list",
-            message: null,
-            error: null,
-            vendors: [],
-            statuses: agreement_statuses,
-            closure_reasons: agreement_closure_reasons,
-            renewal_priorities: agreement_renewal_priorities,
-            user_roles: agreement_user_roles,
-        }
-    },
-    beforeCreate() {
-        // FIXME it's not only called on setup, but setup() does not have 'this'.
-        const apiUrl = "/api/v1/acquisitions/vendors"
-
-        fetch(apiUrl)
-            .then((res) => res.json())
-            .then(
-                (result) => {
-                    this.vendors = result
-            }).catch(
-                (error) => {
-                    this.$emit('set-error', error)
-                }
-            )
-
-    },
-    methods: {
-        switchView(view) {
-            this.message = null
-            this.error = null
-            this.op = view
-            if (view == "list") this.agreement_id = null
-        },
-        agreementCreated() {
-            this.message = "Agreement created"
-            this.error = null
-            this.agreement_id = null
-            this.op = "list"
-        },
-        agreementUpdated() {
-            this.message = "Agreement updated"
-            this.error = null
-            this.agreement_id = null
-            this.op = "list"
-        },
-        agreementDeleted() {
-            this.message = "Agreement deleted"
-            this.error = null
-            this.agreement_id = null
-            this.op = "list"
-        },
-        setCurrentAgreementID(agreement_id) {
-            this.agreement_id = agreement_id
-        },
-        setError(error) {
-            this.message = null
-            this.error = "Something went wrong: " + error
-        },
-    },
-    components: {
-        Toolbar,
-        List,
-        Show,
-        AddForm,
-        ConfirmDeleteForm,
-    },
-    emits: ["set-error"],
-};
-</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Agreements.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Agreements.vue
new file mode 100644 (file)
index 0000000..f5ca28b
--- /dev/null
@@ -0,0 +1,129 @@
+<template>
+    <Toolbar v-if="op == 'list'" @switch-view="switchView" />
+    <div class="dialog message" v-if="message">{{ message }}</div>
+    <div class="dialog alert" v-if="error">{{ error }}</div>
+    <List
+        v-if="op == 'list'"
+        :vendors="vendors"
+        :av_statuses="statuses"
+        :av_closure_reasons="closure_reasons"
+        :av_renewal_priorities="renewal_priorities"
+        @set-current-agreement-id="setCurrentAgreementID"
+        @switch-view="switchView"
+        @set-error="setError"
+    />
+    <Show
+        v-if="op == 'show'"
+        :agreement_id="agreement_id"
+        :vendors="vendors"
+        :av_statuses="statuses"
+        :av_closure_reasons="closure_reasons"
+        :av_renewal_priorities="renewal_priorities"
+        :av_user_roles="user_roles"
+        @switch-view="switchView"
+        @set-error="setError"
+    />
+    <AddForm
+        v-if="op == 'add-form'"
+        :agreement_id="agreement_id"
+        :vendors="vendors"
+        :av_statuses="statuses"
+        :av_closure_reasons="closure_reasons"
+        :av_renewal_priorities="renewal_priorities"
+        :av_user_roles="user_roles"
+        @agreement-created="agreementCreated"
+        @agreement-updated="agreementUpdated"
+        @switch-view="switchView"
+        @set-error="setError"
+    />
+    <ConfirmDeleteForm
+        v-if="op == 'confirm-delete-form'"
+        :agreement_id="agreement_id"
+        @agreement-deleted="agreementDeleted"
+        @switch-view="switchView"
+        @set-error="setError"
+    />
+</template>
+
+<script>
+import Toolbar from "./AgreementsToolbar.vue"
+import List from "./AgreementsList.vue"
+import Show from "./AgreementsShow.vue"
+import AddForm from "./AgreementsFormAdd.vue"
+import ConfirmDeleteForm from "./AgreementsFormConfirmDelete.vue"
+
+import { reactive, computed } from "vue"
+
+export default {
+    data() {
+        return {
+            agreement_id: null,
+            op: "list",
+            message: null,
+            error: null,
+            vendors: [],
+            statuses: agreement_statuses,
+            closure_reasons: agreement_closure_reasons,
+            renewal_priorities: agreement_renewal_priorities,
+            user_roles: agreement_user_roles,
+        }
+    },
+    beforeCreate() {
+        // FIXME it's not only called on setup, but setup() does not have 'this'.
+        const apiUrl = "/api/v1/acquisitions/vendors"
+
+        fetch(apiUrl)
+            .then((res) => res.json())
+            .then(
+                (result) => {
+                    this.vendors = result
+            }).catch(
+                (error) => {
+                    this.$emit('set-error', error)
+                }
+            )
+
+    },
+    methods: {
+        switchView(view) {
+            this.message = null
+            this.error = null
+            this.op = view
+            if (view == "list") this.agreement_id = null
+        },
+        agreementCreated() {
+            this.message = "Agreement created"
+            this.error = null
+            this.agreement_id = null
+            this.op = "list"
+        },
+        agreementUpdated() {
+            this.message = "Agreement updated"
+            this.error = null
+            this.agreement_id = null
+            this.op = "list"
+        },
+        agreementDeleted() {
+            this.message = "Agreement deleted"
+            this.error = null
+            this.agreement_id = null
+            this.op = "list"
+        },
+        setCurrentAgreementID(agreement_id) {
+            this.agreement_id = agreement_id
+        },
+        setError(error) {
+            this.message = null
+            this.error = "Something went wrong: " + error
+        },
+    },
+    components: {
+        Toolbar,
+        List,
+        Show,
+        AddForm,
+        ConfirmDeleteForm,
+    },
+    emits: ["set-error"],
+};
+</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Breadcrumb.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Breadcrumb.vue
new file mode 100644 (file)
index 0000000..6e1d776
--- /dev/null
@@ -0,0 +1,33 @@
+<template>
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
+        <ol>
+            <li>
+                <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+            </li>
+            <li>
+                <a href="/cgi-bin/koha/erm/erm.pl"
+                    >Electronic resources management</a
+                >
+            </li>
+
+            <li>
+                <router-link to="/cgi-bin/koha/erm/agreements">
+                    Agreements</router-link
+                >
+            </li>
+        </ol>
+    </nav>
+</template>
+
+
+<script>
+export default {
+    methods: {
+        switchComponent(component) {
+            this.component = component
+        },
+    },
+    components: {
+    },
+};
+</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMHome.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/ERMHome.vue
new file mode 100644 (file)
index 0000000..d7fdfed
--- /dev/null
@@ -0,0 +1,54 @@
+<template>
+    <Breadcrumb />
+    <div class="main container-fluid">
+        <div class="row">
+            <div class="col-sm-10 col-sm-push-2">
+                <main>
+                    <router-view />
+                </main>
+            </div>
+
+            <div class="col-sm-2 col-sm-pull-10">
+                <aside>
+                    <div id="navmenu">
+                        <div id="navmenulist">
+                            <h5>ERM</h5>
+                            <ul>
+                                <li>
+                                    <router-link
+                                        to="/cgi-bin/koha/erm/agreements"
+                                    >
+                                        <i class="fa fa-upload"></i>
+                                        Contact</router-link
+                                    >
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Breadcrumb from "./Breadcrumb.vue"
+
+import { reactive, computed } from "vue"
+
+export default {
+    data() {
+        return {
+            component: "agreement",
+        }
+    },
+    methods: {
+        switchComponent(component) {
+            this.component = component
+        },
+    },
+    components: {
+        Breadcrumb,
+    },
+};
+</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
new file mode 100644 (file)
index 0000000..f65874b
--- /dev/null
@@ -0,0 +1,55 @@
+<template>
+    <Breadcrumb />
+    <div class="main container-fluid">
+        <div class="row">
+            <div class="col-sm-10 col-sm-push-2">
+                <main>
+                    <router-view />
+                </main>
+            </div>
+
+            <div class="col-sm-2 col-sm-pull-10">
+                <aside>
+                    <div id="navmenu">
+                        <div id="navmenulist">
+                            <h5>ERM</h5>
+                            <ul>
+                                <li>
+                                    <router-link
+                                        to="/cgi-bin/koha/erm/agreements"
+                                    >
+                                        <i class="fa fa-upload"></i>
+                                        Agreements</router-link
+                                    >
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Breadcrumb from "./Breadcrumb.vue"
+
+
+import { reactive, computed } from "vue"
+
+export default {
+    data() {
+        return {
+            component: "agreement",
+        }
+    },
+    methods: {
+        switchComponent(component) {
+            this.component = component
+        },
+    },
+    components: {
+        Breadcrumb,
+    },
+};
+</script>
index 691a47f..782bf67 100644 (file)
@@ -1,13 +1,26 @@
-import {createApp} from 'vue'
+import { createApp } from "vue";
+import { createWebHistory, createRouter } from "vue-router";
 
-import {library} from "@fortawesome/fontawesome-svg-core"
-import {faPlus, faPencil, faTrash} from "@fortawesome/free-solid-svg-icons"
-import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome"
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faPlus, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-library.add(faPlus, faPencil, faTrash)
+library.add(faPlus, faPencil, faTrash);
 
-import App from './Agreements.vue'
+import App from "./components/ERM/ERMMain.vue";
+import Agreements from "./components/ERM/Agreements.vue";
+
+const Bar = { template: "<div>bar</div>" };
+const Foo = { template: "<div>foo</div>" };
+const routes = [
+    { path: "/cgi-bin/koha/erm/agreements", component: Agreements },
+    { path: "/cgi-bin/koha/erm/licenses", component: Bar },
+    { path: "/cgi-bin/koha/erm/erm.pl", component: Foo },
+];
+
+const router = createRouter({ history: createWebHistory(), routes });
 
 createApp(App)
+    .use(router)
     .component("font-awesome-icon", FontAwesomeIcon)
-    .mount('#agreements')
+    .mount("#erm");
index b428a0d..c50f8c8 100644 (file)
@@ -35,7 +35,8 @@
     "mysql": "^2.18.1",
     "style-loader": "^3.3.1",
     "vue": "^3.2.31",
-    "vue-flatpickr-component": "^9"
+    "vue-flatpickr-component": "^9",
+    "vue-router": "^4.0.14"
   },
   "scripts": {
     "build": "node_modules/.bin/gulp build",