From 2197809353165e0d76f76bca54d55d3c200953fa Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Fri, 21 Oct 2022 14:11:16 +0200
Subject: [PATCH] Bug 32030: Rebase UI fix - Use page-section for better
 separation in forms

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

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../vue/components/ERM/AgreementLicenses.vue  |   4 +-
 .../vue/components/ERM/AgreementPeriods.vue   |   4 +-
 .../components/ERM/AgreementRelationships.vue |   4 +-
 .../vue/components/ERM/AgreementUserRoles.vue |   4 +-
 .../vue/components/ERM/AgreementsFormAdd.vue  | 303 +++++++++---------
 .../prog/js/vue/components/ERM/Documents.vue  |   4 +-
 .../js/vue/components/ERM/LicensesFormAdd.vue | 222 +++++++------
 7 files changed, 284 insertions(+), 261 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue
index 995abc8d63..ecdd211737 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementLicenses.vue
@@ -1,5 +1,5 @@
 <template>
-    <fieldset class="rows" id="agreement_licenses">
+    <div class="page-section" id="agreement_licenses">
         <legend>{{ $t("Licenses") }}</legend>
         <fieldset
             :id="`agreement_license_${counter}`"
@@ -97,7 +97,7 @@
             ><font-awesome-icon icon="plus" /> {{ $t("Add new license") }}</a
         >
         <span v-else>{{ $t("There are no licenses created yet") }}</span>
-    </fieldset>
+    </div>
 </template>
 
 <script>
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 ca425a5708..e0398f8a8e 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
@@ -1,5 +1,5 @@
 <template>
-    <fieldset class="rows" id="agreement_periods">
+    <div class="page-section" id="agreement_periods">
         <legend>{{ $t("Periods") }}</legend>
         <fieldset
             :id="`agreement_period_${counter}`"
@@ -63,7 +63,7 @@
         <a class="btn btn-default" @click="addPeriod"
             ><font-awesome-icon icon="plus" /> {{ $t("Add new period") }}</a
         >
-    </fieldset>
+    </div>
 </template>
 
 <script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue
index ac57dc31cd..7110f00fc6 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementRelationships.vue
@@ -1,5 +1,5 @@
 <template>
-    <fieldset class="rows" id="agreement_relationships">
+    <div class="page-section" id="agreement_relationships">
         <legend>{{ $t("Related agreements") }}</legend>
         <fieldset
             class="rows"
@@ -80,7 +80,7 @@
         <span v-else>{{
             $t("There are no other agreements created yet")
         }}</span>
-    </fieldset>
+    </div>
 </template>
 
 <script>
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 5dbc2ad415..fc2dd672d6 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
@@ -1,5 +1,5 @@
 <template>
-    <fieldset class="rows" id="agreement_user_roles">
+    <div class="page-section" id="agreement_user_roles">
         <legend>{{ $t("Users") }}</legend>
         <fieldset
             class="rows"
@@ -57,7 +57,7 @@
         <a class="btn btn-default" @click="addUser"
             ><font-awesome-icon icon="plus" /> {{ $t("Add new user") }}</a
         >
-    </fieldset>
+    </div>
 </template>
 
 <script>
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 98cd8829e4..96cd976582 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
@@ -7,157 +7,166 @@
         <h2 v-else>{{ $t("New agreement") }}</h2>
         <div>
             <form @submit="onSubmit($event)">
-                <fieldset class="rows">
-                    <ol>
-                        <li>
-                            <label class="required" for="agreement_name"
-                                >{{ $t("Agreement name") }}:</label
-                            >
-                            <input
-                                id="agreement_name"
-                                v-model="agreement.name"
-                                :placeholder="$t('Agreement name')"
-                                required
-                            />
-                            <span class="required">{{ $t("Required") }}</span>
-                        </li>
-                        <li>
-                            <label for="agreement_vendor_id"
-                                >{{ $t("Vendor") }}:</label
-                            >
-                            <v-select
-                                id="agreement_vendor_id"
-                                v-model="agreement.vendor_id"
-                                label="name"
-                                :reduce="(vendor) => vendor.id"
-                                :options="vendors"
-                            />
-                        </li>
-                        <li>
-                            <label for="agreement_description"
-                                >{{ $t("Description") }}:
-                            </label>
-                            <textarea
-                                id="agreement_description"
-                                v-model="agreement.description"
-                                :placeholder="$t('Description')"
-                                rows="10"
-                                cols="50"
-                                required
-                            />
-                            <span class="required">{{ $t("Required") }}</span>
-                        </li>
-                        <li>
-                            <label for="agreement_status"
-                                >{{ $t("Status") }}:</label
-                            >
-                            <v-select
-                                id="agreement_status"
-                                v-model="agreement.status"
-                                label="lib"
-                                :reduce="(av) => av.authorised_value"
-                                :options="av_agreement_statuses"
-                                @option:selected="onStatusChanged"
-                                :required="!agreement.status"
-                            >
-                                <template #search="{ attributes, events }">
+                <div class="page-section">
+                    <fieldset class="rows">
+                        <ol>
+                            <li>
+                                <label class="required" for="agreement_name"
+                                    >{{ $t("Agreement name") }}:</label
+                                >
+                                <input
+                                    id="agreement_name"
+                                    v-model="agreement.name"
+                                    :placeholder="$t('Agreement name')"
+                                    required
+                                />
+                                <span class="required">{{
+                                    $t("Required")
+                                }}</span>
+                            </li>
+                            <li>
+                                <label for="agreement_vendor_id"
+                                    >{{ $t("Vendor") }}:</label
+                                >
+                                <v-select
+                                    id="agreement_vendor_id"
+                                    v-model="agreement.vendor_id"
+                                    label="name"
+                                    :reduce="(vendor) => vendor.id"
+                                    :options="vendors"
+                                />
+                            </li>
+                            <li>
+                                <label for="agreement_description"
+                                    >{{ $t("Description") }}:
+                                </label>
+                                <textarea
+                                    id="agreement_description"
+                                    v-model="agreement.description"
+                                    :placeholder="$t('Description')"
+                                    rows="10"
+                                    cols="50"
+                                    required
+                                />
+                                <span class="required">{{
+                                    $t("Required")
+                                }}</span>
+                            </li>
+                            <li>
+                                <label for="agreement_status"
+                                    >{{ $t("Status") }}:</label
+                                >
+                                <v-select
+                                    id="agreement_status"
+                                    v-model="agreement.status"
+                                    label="lib"
+                                    :reduce="(av) => av.authorised_value"
+                                    :options="av_agreement_statuses"
+                                    @option:selected="onStatusChanged"
+                                    :required="!agreement.status"
+                                >
+                                    <template #search="{ attributes, events }">
+                                        <input
+                                            :required="!agreement.status"
+                                            class="vs__search"
+                                            v-bind="attributes"
+                                            v-on="events"
+                                        />
+                                    </template>
+                                </v-select>
+                                <span class="required">{{
+                                    $t("Required")
+                                }}</span>
+                            </li>
+                            <li>
+                                <label for="agreement_closure_reason"
+                                    >{{ $t("Closure reason") }}:</label
+                                >
+                                <v-select
+                                    id="agreement_closure_reason"
+                                    v-model="agreement.closure_reason"
+                                    label="lib"
+                                    :reduce="(av) => av.authorised_value"
+                                    :options="av_agreement_closure_reasons"
+                                    :disabled="
+                                        agreement.status == 'closed'
+                                            ? false
+                                            : true
+                                    "
+                                />
+                            </li>
+                            <li>
+                                <label
+                                    for="agreement_is_perpetual"
+                                    class="radio"
+                                    >{{ $t("Is perpetual") }}:</label
+                                >
+                                <label for="agreement_is_perpetual_yes">
                                     <input
-                                        :required="!agreement.status"
-                                        class="vs__search"
-                                        v-bind="attributes"
-                                        v-on="events"
+                                        type="radio"
+                                        name="is_perpetual"
+                                        id="agreement_is_perpetual_yes"
+                                        :value="true"
+                                        v-model="agreement.is_perpetual"
                                     />
-                                </template>
-                            </v-select>
-                            <span class="required">{{ $t("Required") }}</span>
-                        </li>
-                        <li>
-                            <label for="agreement_closure_reason"
-                                >{{ $t("Closure reason") }}:</label
-                            >
-                            <v-select
-                                id="agreement_closure_reason"
-                                v-model="agreement.closure_reason"
-                                label="lib"
-                                :reduce="(av) => av.authorised_value"
-                                :options="av_agreement_closure_reasons"
-                                :disabled="
-                                    agreement.status == 'closed' ? false : true
-                                "
-                            />
-                        </li>
-                        <li>
-                            <label for="agreement_is_perpetual" class="radio"
-                                >{{ $t("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"
+                                    >{{ $t("Renewal priority") }}:</label
+                                >
+                                <v-select
+                                    id="agreement_renewal_priority"
+                                    v-model="agreement.renewal_priority"
+                                    label="lib"
+                                    :reduce="(av) => av.authorised_value"
+                                    :options="av_agreement_renewal_priorities"
                                 />
-                                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"
+                            </li>
+                            <li>
+                                <label for="agreement_license_info"
+                                    >{{ $t("License info") }}:
+                                </label>
+                                <textarea
+                                    id="agreement_license_info"
+                                    v-model="agreement.license_info"
+                                    placeholder="License info"
                                 />
-                                No
-                            </label>
-                        </li>
-                        <li>
-                            <label for="agreement_renewal_priority"
-                                >{{ $t("Renewal priority") }}:</label
-                            >
-                            <v-select
-                                id="agreement_renewal_priority"
-                                v-model="agreement.renewal_priority"
-                                label="lib"
-                                :reduce="(av) => av.authorised_value"
-                                :options="av_agreement_renewal_priorities"
-                            />
-                        </li>
-                        <li>
-                            <label for="agreement_license_info"
-                                >{{ $t("License info") }}:
-                            </label>
-                            <textarea
-                                id="agreement_license_info"
-                                v-model="agreement.license_info"
-                                placeholder="License info"
-                            />
-                        </li>
-
-                        <AgreementPeriods :periods="agreement.periods" />
-                        <AgreementUserRoles
-                            :user_roles="agreement.user_roles"
-                            :av_agreement_user_roles="av_agreement_user_roles"
-                        />
-                        <AgreementLicenses
-                            :agreement_licenses="agreement.agreement_licenses"
-                            :av_agreement_license_statuses="
-                                av_agreement_license_statuses
-                            "
-                            :av_agreement_license_location="
-                                av_agreement_license_location
-                            "
-                        />
-                        <AgreementRelationships
-                            :agreement_id="agreement.agreement_id"
-                            :relationships="agreement.agreement_relationships"
-                            :av_agreement_relationships="
-                                av_agreement_relationships
-                            "
-                        />
-                        <Documents :documents="agreement.documents" />
-                    </ol>
-                </fieldset>
+                            </li>
+                        </ol>
+                    </fieldset>
+                </div>
+                <AgreementPeriods :periods="agreement.periods" />
+                <AgreementUserRoles
+                    :user_roles="agreement.user_roles"
+                    :av_agreement_user_roles="av_agreement_user_roles"
+                />
+                <AgreementLicenses
+                    :agreement_licenses="agreement.agreement_licenses"
+                    :av_agreement_license_statuses="
+                        av_agreement_license_statuses
+                    "
+                    :av_agreement_license_location="
+                        av_agreement_license_location
+                    "
+                />
+                <AgreementRelationships
+                    :agreement_id="agreement.agreement_id"
+                    :relationships="agreement.agreement_relationships"
+                    :av_agreement_relationships="av_agreement_relationships"
+                />
+                <Documents :documents="agreement.documents" />
                 <fieldset class="action">
                     <input type="submit" value="Submit" />
                     <router-link
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Documents.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Documents.vue
index 452f1c852e..fb1bd84998 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Documents.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Documents.vue
@@ -1,5 +1,5 @@
 <template>
-    <fieldset class="rows" id="documents">
+    <div class="page-section" id="documents">
         <legend>{{ $t("Documents") }}</legend>
         <fieldset
             :id="`document_${counter}`"
@@ -102,7 +102,7 @@
         <a class="btn btn-default" @click="addDocument"
             ><font-awesome-icon icon="plus" /> {{ $t("Add new document") }}</a
         >
-    </fieldset>
+    </div>
 </template>
 
 <script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
index 1d8c3d6cd0..2a17b6eef6 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesFormAdd.vue
@@ -7,110 +7,124 @@
         <h2 v-else>{{ $t("New license") }}</h2>
         <div>
             <form @submit="onSubmit($event)">
-                <fieldset class="rows">
-                    <ol>
-                        <li>
-                            <label class="required" for="license_name"
-                                >{{ $t("License name") }}:</label
-                            >
-                            <input
-                                id="license_name"
-                                v-model="license.name"
-                                :placeholder="$t('License name')"
-                                required
-                            />
-                            <span class="required">{{ $t("Required") }}</span>
-                        </li>
-                        <li>
-                            <label for="license_vendor_id"
-                                >{{ $t("Vendor") }}:</label
-                            >
-                            <v-select
-                                id="license_vendor_id"
-                                v-model="license.vendor_id"
-                                label="name"
-                                :reduce="(vendor) => vendor.id"
-                                :options="vendors"
-                            />
-                        </li>
-                        <li>
-                            <label for="license_description"
-                                >{{ $t("Description") }}:
-                            </label>
-                            <textarea
-                                id="license_description"
-                                v-model="license.description"
-                                :placeholder="$t('Description')"
-                                rows="10"
-                                cols="50"
-                                required
-                            />
-                            <span class="required">{{ $t("Required") }}</span>
-                        </li>
-                        <li>
-                            <label for="license_type">{{ $t("Type") }}:</label>
-                            <v-select
-                                id="license_type"
-                                v-model="license.type"
-                                label="lib"
-                                :reduce="(av) => av.authorised_value"
-                                :options="av_license_types"
-                            >
-                                <template #search="{ attributes, events }">
-                                    <input
-                                        :required="!license.type"
-                                        class="vs__search"
-                                        v-bind="attributes"
-                                        v-on="events"
-                                    />
-                                </template>
-                            </v-select>
-                            <span class="required">{{ $t("Required") }}</span>
-                        </li>
-                        <li>
-                            <label for="license_status"
-                                >{{ $t("Status") }}:</label
-                            >
-                            <v-select
-                                id="license_status"
-                                v-model="license.status"
-                                :reduce="(av) => av.authorised_value"
-                                :options="av_license_statuses"
-                                label="lib"
-                            >
-                                <template #search="{ attributes, events }">
-                                    <input
-                                        :required="!license.status"
-                                        class="vs__search"
-                                        v-bind="attributes"
-                                        v-on="events"
-                                    />
-                                </template>
-                            </v-select>
-                            <span class="required">{{ $t("Required") }}</span>
-                        </li>
-                        <li>
-                            <label for="started_on"
-                                >{{ $t("Start date") }}:</label
-                            >
-                            <flat-pickr
-                                id="started_on"
-                                v-model="license.started_on"
-                                :config="fp_config"
-                                data-date_to="ended_on"
-                            />
-                        </li>
-                        <li>
-                            <label for="ended_on">{{ $t("End date") }}:</label>
-                            <flat-pickr
-                                id="ended_on"
-                                v-model="license.ended_on"
-                                :config="fp_config"
-                            />
-                        </li>
-                        <Documents :documents="license.documents" />
-                    </ol>
-                </fieldset>
+                <div class="page-section">
+                    <fieldset class="rows">
+                        <ol>
+                            <li>
+                                <label class="required" for="license_name"
+                                    >{{ $t("License name") }}:</label
+                                >
+                                <input
+                                    id="license_name"
+                                    v-model="license.name"
+                                    :placeholder="$t('License name')"
+                                    required
+                                />
+                                <span class="required">{{
+                                    $t("Required")
+                                }}</span>
+                            </li>
+                            <li>
+                                <label for="license_vendor_id"
+                                    >{{ $t("Vendor") }}:</label
+                                >
+                                <v-select
+                                    id="license_vendor_id"
+                                    v-model="license.vendor_id"
+                                    label="name"
+                                    :reduce="(vendor) => vendor.id"
+                                    :options="vendors"
+                                />
+                            </li>
+                            <li>
+                                <label for="license_description"
+                                    >{{ $t("Description") }}:
+                                </label>
+                                <textarea
+                                    id="license_description"
+                                    v-model="license.description"
+                                    :placeholder="$t('Description')"
+                                    rows="10"
+                                    cols="50"
+                                    required
+                                />
+                                <span class="required">{{
+                                    $t("Required")
+                                }}</span>
+                            </li>
+                            <li>
+                                <label for="license_type"
+                                    >{{ $t("Type") }}:</label
+                                >
+                                <v-select
+                                    id="license_type"
+                                    v-model="license.type"
+                                    label="lib"
+                                    :reduce="(av) => av.authorised_value"
+                                    :options="av_license_types"
+                                >
+                                    <template #search="{ attributes, events }">
+                                        <input
+                                            :required="!license.type"
+                                            class="vs__search"
+                                            v-bind="attributes"
+                                            v-on="events"
+                                        />
+                                    </template>
+                                </v-select>
+                                <span class="required">{{
+                                    $t("Required")
+                                }}</span>
+                            </li>
+                            <li>
+                                <label for="license_status"
+                                    >{{ $t("Status") }}:</label
+                                >
+                                <v-select
+                                    id="license_status"
+                                    v-model="license.status"
+                                    :reduce="(av) => av.authorised_value"
+                                    :options="av_license_statuses"
+                                    label="lib"
+                                >
+                                    <template #search="{ attributes, events }">
+                                        <input
+                                            :required="!license.status"
+                                            class="vs__search"
+                                            v-bind="attributes"
+                                            v-on="events"
+                                        />
+                                    </template>
+                                </v-select>
+                                <span class="required">{{
+                                    $t("Required")
+                                }}</span>
+                            </li>
+                            <li>
+                                <label for="started_on"
+                                    >{{ $t("Start date") }}:</label
+                                >
+                                <flat-pickr
+                                    id="started_on"
+                                    v-model="license.started_on"
+                                    :config="fp_config"
+                                    data-date_to="ended_on"
+                                />
+                            </li>
+                            <li>
+                                <label for="ended_on"
+                                    >{{ $t("End date") }}:</label
+                                >
+                                <flat-pickr
+                                    id="ended_on"
+                                    v-model="license.ended_on"
+                                    :config="fp_config"
+                                />
+                            </li>
+                        </ol>
+                    </fieldset>
+                </div>
+                <Documents :documents="license.documents" />
                 <fieldset class="action">
                     <input type="submit" :value="$t('Submit')" />
                     <router-link
-- 
2.39.2