From 8c32f186d5a62e742621c35cfacff5b22bb42b71 Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Tue, 15 Mar 2022 07:46:39 +0100
Subject: [PATCH] Bug 32030: ERM - Remove BootstrapVue3

We are lacking behind, Koha is using Bootstrap 3.5 and BootstrapVue3 is
using Bootstrap 5. It's a shame, it would be much easier to use
BootstrapVue!

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/js/vue/Agreements.vue  |   4 +-
 .../vue/components/ERM/AgreementPeriods.vue   |   6 +-
 .../vue/components/ERM/AgreementUserRoles.vue |  17 +-
 .../vue/components/ERM/AgreementsFormAdd.vue  | 338 +++++++++---------
 .../ERM/AgreementsFormConfirmDelete.vue       |  53 ++-
 .../vue/components/ERM/AgreementsToolbar.vue  |   7 +-
 .../intranet-tmpl/prog/js/vue/main-erm.ts     |   5 -
 7 files changed, 206 insertions(+), 224 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/Agreements.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/Agreements.vue
index 813b769bd3..fdca901b24 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/Agreements.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/Agreements.vue
@@ -1,7 +1,7 @@
 <template>
     <Toolbar v-if="op == 'list'" @switch-view="switchView" />
-    <b-alert v-if="message" variant="success" show>{{ message }}</b-alert>
-    <b-alert v-if="error" variant="warning" show>{{ error }}</b-alert>
+    <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"
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementPeriods.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementPeriods.vue
index 1d914dc6be..9feea10e85 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementPeriods.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementPeriods.vue
@@ -54,9 +54,9 @@
                 </li>
             </ol>
         </fieldset>
-        <button @click="addPeriod" type="button" class="btn btn-primary">
-            <i class="fa fa-plus" aria-hidden="true"></i> Add new period
-        </button>
+        <a class="btn btn-default" @click="addPeriod"
+            ><font-awesome-icon icon="plus" /> Add new period</a
+        >
     </fieldset>
 </template>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue
index 6571f5201e..4c8759ac5c 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementUserRoles.vue
@@ -27,9 +27,9 @@
                 </li>
                 <li>
                     <label :for="`user_role_${counter}`">Role: </label>
-                    <b-form-select v-model="user_role.role" required>
-                        <b-form-select-option value=""></b-form-select-option>
-                        <b-form-select-option
+                    <select v-model="user_role.role" required>
+                        <option value=""></option>
+                        <option
                             v-for="r in av_user_roles"
                             :key="r.authorised_values"
                             :value="r.authorised_value"
@@ -38,9 +38,10 @@
                                     ? true
                                     : false
                             "
-                            >{{ r.lib }}</b-form-select-option
                         >
-                    </b-form-select>
+                            {{ r.lib }}
+                        </option>
+                    </select>
                     <span class="required">Required</span>
                 </li>
             </ol>
@@ -50,9 +51,9 @@
             name="selected_patron_id"
             id="selected_patron_id"
         />
-        <button @click="addUser" type="button" class="btn btn-primary">
-            <i class="fa fa-plus" aria-hidden="true"></i> Add new user
-        </button>
+        <a class="btn btn-default" @click="addUser"
+            ><font-awesome-icon icon="plus" /> Add new user</a
+        >
     </fieldset>
 </template>
 
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 0f81913d40..af0133be49 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
@@ -2,173 +2,172 @@
     <h2 v-if="agreement.agreement_id">Edit agreement</h2>
     <h2 v-else>New agreement</h2>
     <div>
-        <b-form @submit="onSubmit">
-            <b-form-group
-                id="agreement_name"
-                label="Agreement name:"
-                label-for="agreement_name"
-                label-cols="4"
-                label-cols-lg="2"
-            >
-                <b-form-input
-                    id="agreement_name"
-                    v-model="agreement.name"
-                    placeholder="Agreement name"
-                    required
-                ></b-form-input>
-                <span class="required">Required</span>
-            </b-form-group>
-            <b-form-group
-                id="agreement_vendor_id"
-                label="Vendor:"
-                label-for="agreement_vendor_id"
-                label-cols="4"
-                label-cols-lg="2"
-            >
-                <b-form-select v-model="agreement.vendor_id">
-                    <b-form-select-option value=""></b-form-select-option>
-                    <b-form-select-option
-                        v-for="vendor in vendors"
-                        :key="vendor.vendor_id"
-                        :value="vendor.id"
-                        :selected="
-                            vendor.id == agreement.vendor_id ? true : false
-                        "
-                        >{{ vendor.name }}</b-form-select-option
-                    >
-                </b-form-select>
-            </b-form-group>
-            <b-form-group
-                id="agreement_description"
-                label="Description"
-                label-for="agreement_description"
-                label-cols="4"
-                label-cols-lg="2"
-            >
-                <b-form-input
-                    id="agreement_description"
-                    v-model="agreement.description"
-                    placeholder="Description"
-                    required
-                ></b-form-input>
-                <span class="required">Required</span>
-            </b-form-group>
-            <b-form-group
-                id="agreement_status"
-                label="Status:"
-                label-for="agreement_status"
-                label-cols="4"
-                label-cols-lg="2"
-            >
-                <b-form-select
-                    id="agreement_status"
-                    v-model="agreement.status"
-                    @change="onStatusChange($event)"
-                    required
-                >
-                    <b-form-select-option value=""></b-form-select-option>
-                    <b-form-select-option
-                        v-for="status in av_statuses"
-                        :key="status.authorised_values"
-                        :value="status.authorised_value"
-                        :selected="
-                            status.authorised_value == agreement.status
-                                ? true
-                                : false
-                        "
-                        >{{ status.lib }}</b-form-select-option
-                    >
-                </b-form-select>
-                <span class="required">Required</span>
-            </b-form-group>
-            <b-form-group
-                id="agreement_closure_reason"
-                label="Closure reason:"
-                label-for="agreement_closure_reason"
-                label-cols="4"
-                label-cols-lg="2"
-            >
-                <b-form-select
-                    id="agreement_closure_reason"
-                    v-model="agreement.closure_reason"
-                    :disabled="agreement.status == 'closed' ? true : false"
-                >
-                    <b-form-select-option value=""></b-form-select-option>
-                    <b-form-select-option
-                        v-for="r in av_closure_reasons"
-                        :key="r.authorised_values"
-                        :value="r.authorised_value"
-                        :selected="
-                            r.authorised_value == agreement.closure_reason
-                                ? true
-                                : false
-                        "
-                        >{{ r.lib }}</b-form-select-option
-                    >
-                </b-form-select>
-            </b-form-group>
-            <b-form-group
-                label="Is perpetual:"
-                label-for="agreement_is_perpetual"
-                label-cols="4"
-                label-cols-lg="2"
-            >
-                <b-form-radio-group
-                    id="agreement_is_perpetual"
-                    label="Is perpetual:"
-                    label-for="agreement_is_perpetual"
-                    label-cols="4"
-                    label-cols-lg="2"
-                    v-model="agreement.is_perpetual"
-                    :options="is_perpetual_options"
-                >
-                </b-form-radio-group>
-            </b-form-group>
-            <b-form-group
-                id="agreement_renewal_priority"
-                label="Renewal priority:"
-                label-for="agreement_renewal_priority"
-                label-cols="4"
-                label-cols-lg="2"
-            >
-                <b-form-select v-model="agreement.renewal_priority">
-                    <b-form-select-option value=""></b-form-select-option>
-                    <b-form-select-option
-                        v-for="p in av_renewal_priorities"
-                        :key="p.authorised_values"
-                        :value="p.authorised_value"
-                        :selected="
-                            p.authorised_value == agreement.renewal_priority
-                                ? true
-                                : false
-                        "
-                        >{{ p.lib }}</b-form-select-option
-                    >
-                </b-form-select>
-            </b-form-group>
-            <b-form-group
-                id="agreement_license_info"
-                label="License info:"
-                label-for="agreement_license_info"
-                label-cols="4"
-                label-cols-lg="2"
-            >
-                <b-form-input
-                    id="agreement_license_info"
-                    v-model="agreement.license_info"
-                    placeholder="License info"
-                ></b-form-input>
-            </b-form-group>
+        <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>
+                        <input
+                            id="agreement_description"
+                            v-model="agreement.description"
+                            placeholder="Description"
+                            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_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' ? true : false
+                            "
+                        >
+                            <option value=""></option>
+                            <option
+                                v-for="r in av_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_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>
+                        <input
+                            id="agreement_license_info"
+                            v-model="agreement.license_info"
+                            placeholder="License info"
+                        />
+                    </li>
 
-            <AgreementPeriods :periods="agreement.periods" />
-            <AgreementUserRoles
-                :user_roles="agreement.user_roles"
-                :av_user_roles="av_user_roles"
-            />
-
-            <b-button type="submit" variant="primary">Submit</b-button>
-            <a href="#" @click="$emit('switch-view', 'list')">Cancel</a>
-        </b-form>
+                    <AgreementPeriods :periods="agreement.periods" />
+                    <AgreementUserRoles
+                        :user_roles="agreement.user_roles"
+                        :av_user_roles="av_user_roles"
+                    />
+                </ol>
+            </fieldset>
+            <fieldset class="action">
+                <input type="submit" value="Submit" />
+                <a href="#" class="cancel" @click="$emit('switch-view', 'list')">Cancel</a>
+            </fieldset>
+        </form>
     </div>
 </template>
 
@@ -179,7 +178,6 @@ import AgreementUserRoles from './AgreementUserRoles.vue'
 export default {
     data() {
         return {
-            is_perpetual_options: [{ text: "Yes", value: true }, { text: "No", value: false }],
             agreement: {
                 agreement_id: null,
                 name: '',
@@ -212,7 +210,8 @@ export default {
             )
     },
     methods: {
-        onSubmit() {
+        onSubmit(e) {
+            e.preventDefault()
 
             //let agreement= Object.assign( {} ,this.agreement); // copy
             let agreement = JSON.parse(JSON.stringify(this.agreement)) // copy
@@ -227,6 +226,7 @@ export default {
                 apiUrl += '/' + agreement.agreement_id
             }
             delete agreement.agreement_id
+            agreement.is_perpetual = agreement.is_perpetual ? true : false
 
             agreement.periods.forEach(p => {
                 p.started_on = $date_to_rfc3339(p.started_on)
@@ -261,7 +261,7 @@ export default {
         },
         onStatusChange(status) {
             if (status == 'closed') {
-               this.agreement.closure_reason = ''
+                this.agreement.closure_reason = ''
             }
         }
     },
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 36737cd705..a8873dc770 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,37 +1,25 @@
 <template>
     <h2>Delete agreement</h2>
     <div>
-        <b-form @submit="onSubmit">
-            <b-form-group
-                id="agreement_name"
-                label="Agreement name:"
-                label-for="agreement_name"
-                label-cols="4"
-                label-cols-lg="2"
-            >
-                {{ agreement.name }}
-            </b-form-group>
-            <b-form-group
-                id="agreement_vendor"
-                label="Vendor:"
-                label-for="agreement_vendor"
-                label-cols="4"
-                label-cols-lg="2"
-            >
-                {{ agreement.vendor_id }}
-            </b-form-group>
-            <b-form-group
-                id="agreement_description"
-                label="Description:"
-                label-for="agreement_description"
-                label-cols="4"
-                label-cols-lg="2"
-            >
-                {{ agreement.description }}
-            </b-form-group>
-            <b-button type="submit" variant="primary">Submit</b-button>
-            <a href="#" @click="$emit('switch-view', 'list')">Cancel</a>
-        </b-form>
+        <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" />
+                <a href="#" class="cancel" @click="$emit('switch-view', 'list')">No, do not delete</a>
+            </fieldset>
+        </form>
     </div>
 </template>
 
@@ -59,7 +47,8 @@ export default {
             )
     },
     methods: {
-        onSubmit() {
+        onSubmit(e) {
+            e.preventDefault()
 
             let apiUrl = '/api/v1/erm/agreements/' + this.agreement_id
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsToolbar.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsToolbar.vue
index 61198d9733..7add34b7c0 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsToolbar.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsToolbar.vue
@@ -1,9 +1,6 @@
 <template>
-    <b-button
-        @click="$emit('switch-view', 'add-form')"
-        id="new_agreement"
-        variant="default"
-        ><font-awesome-icon icon="plus" /> New agreement</b-button
+    <a class="btn btn-default" @click="$emit('switch-view', 'add-form')"
+        ><font-awesome-icon icon="plus" /> New agreement</a
     >
 </template>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts
index ecb0e1cefc..691a47f31d 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/main-erm.ts
@@ -1,8 +1,4 @@
 import {createApp} from 'vue'
-import BootstrapVue3 from 'bootstrap-vue-3'
-
-//import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
 
 import {library} from "@fortawesome/fontawesome-svg-core"
 import {faPlus, faPencil, faTrash} from "@fortawesome/free-solid-svg-icons"
@@ -14,5 +10,4 @@ import App from './Agreements.vue'
 
 createApp(App)
     .component("font-awesome-icon", FontAwesomeIcon)
-    .use(BootstrapVue3)
     .mount('#agreements')
-- 
2.39.2