From 4ea57f5e31ad32c5d5ee63758ac87eb3d2a2ad52 Mon Sep 17 00:00:00 2001
From: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Date: Wed, 29 Mar 2023 08:27:51 +0000
Subject: [PATCH] Bug 33355: Update forms markup to be in line with interface
 patterns

https://wiki.koha-community.org/wiki/Interface_patterns
---
 .../vue/components/ERM/AgreementLicenses.vue  |   4 +-
 .../vue/components/ERM/AgreementPeriods.vue   |   4 +-
 .../components/ERM/AgreementRelationships.vue |   4 +-
 .../vue/components/ERM/AgreementsFormAdd.vue  | 258 +++++++++---------
 .../prog/js/vue/components/ERM/Documents.vue  |   4 +-
 .../ERM/EHoldingsLocalPackagesFormAdd.vue     |   7 +-
 .../ERM/EHoldingsLocalTitlesFormAdd.vue       |   5 +-
 .../js/vue/components/ERM/LicensesFormAdd.vue | 224 +++++++--------
 .../prog/js/vue/components/ERM/UserRoles.vue  |   4 +-
 9 files changed, 243 insertions(+), 271 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 c64d571f144..665be1f2efa 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>
-    <div class="page-section" id="agreement_licenses">
+    <fieldset class="rows" id="agreement_licenses">
         <legend>{{ $__("Licenses") }}</legend>
         <fieldset
             :id="`agreement_license_${counter}`"
@@ -97,7 +97,7 @@
             ><font-awesome-icon icon="plus" /> {{ $__("Add new license") }}</a
         >
         <span v-else>{{ $__("There are no licenses created yet") }}</span>
-    </div>
+    </fieldset>
 </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 0354c78c50c..d54711370ef 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>
-    <div class="page-section" id="agreement_periods">
+    <fieldset class="rows" id="agreement_periods">
         <legend>{{ $__("Periods") }}</legend>
         <fieldset
             :id="`agreement_period_${counter}`"
@@ -63,7 +63,7 @@
         <a class="btn btn-default" @click="addPeriod"
             ><font-awesome-icon icon="plus" /> {{ $__("Add new period") }}</a
         >
-    </div>
+    </fieldset>
 </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 0465bb867e9..b5c0468447b 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>
-    <div class="page-section" id="agreement_relationships">
+    <fieldset class="rows" id="agreement_relationships">
         <legend>{{ $__("Related agreements") }}</legend>
         <fieldset
             :id="`related_agreement_${counter}`"
@@ -85,7 +85,7 @@
         <span v-else>{{
             $__("There are no other agreements created yet")
         }}</span>
-    </div>
+    </fieldset>
 </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 db4d5cea688..12e8f122689 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,144 +7,134 @@
         <h2 v-else>{{ $__("New agreement") }}</h2>
         <div>
             <form @submit="onSubmit($event)">
-                <div class="page-section">
-                    <fieldset class="rows">
-                        <ol>
-                            <li>
-                                <label for="agreement_name" class="required"
-                                    >{{ $__("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
-                                >
-                                <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"
-                                    >{{ $__("Description") }}:
-                                </label>
-                                <textarea
-                                    id="agreement_description"
-                                    v-model="agreement.description"
-                                    :placeholder="$__('Description')"
-                                    rows="10"
-                                    cols="50"
-                                />
-                            </li>
-                            <li>
-                                <label for="agreement_status" class="required"
-                                    >{{ $__("Status") }}:</label
-                                >
-                                <v-select
-                                    id="agreement_status"
-                                    v-model="agreement.status"
-                                    label="description"
-                                    :reduce="av => av.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">{{
-                                    $__("Required")
-                                }}</span>
-                            </li>
-                            <li>
-                                <label for="agreement_closure_reason"
-                                    >{{ $__("Closure reason") }}:</label
-                                >
-                                <v-select
-                                    id="agreement_closure_reason"
-                                    v-model="agreement.closure_reason"
-                                    label="description"
-                                    :reduce="av => av.value"
-                                    :options="av_agreement_closure_reasons"
-                                    :disabled="
-                                        agreement.status == 'closed'
-                                            ? false
-                                            : true
-                                    "
-                                />
-                            </li>
-                            <li>
-                                <label for="agreement_is_perpetual"
-                                    >{{ $__("Is perpetual") }}:</label
-                                >
-                                <label
-                                    class="radio"
-                                    for="agreement_is_perpetual_yes"
-                                    >Yes
+                <fieldset class="rows">
+                    <ol>
+                        <li>
+                            <label for="agreement_name" class="required"
+                                >{{ $__("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
+                            >
+                            <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"
+                                >{{ $__("Description") }}:
+                            </label>
+                            <textarea
+                                id="agreement_description"
+                                v-model="agreement.description"
+                                :placeholder="$__('Description')"
+                                rows="10"
+                                cols="50"
+                            />
+                        </li>
+                        <li>
+                            <label for="agreement_status" class="required"
+                                >{{ $__("Status") }}:</label
+                            >
+                            <v-select
+                                id="agreement_status"
+                                v-model="agreement.status"
+                                label="description"
+                                :reduce="av => av.value"
+                                :options="av_agreement_statuses"
+                                @option:selected="onStatusChanged"
+                                :required="!agreement.status"
+                            >
+                                <template #search="{ attributes, events }">
                                     <input
-                                        type="radio"
-                                        name="is_perpetual"
-                                        id="agreement_is_perpetual_yes"
-                                        :value="true"
-                                        v-model="agreement.is_perpetual"
+                                        :required="!agreement.status"
+                                        class="vs__search"
+                                        v-bind="attributes"
+                                        v-on="events"
                                     />
-                                </label>
-                                <label
-                                    class="radio"
-                                    for="agreement_is_perpetual_no"
-                                    >No
-                                    <input
-                                        type="radio"
-                                        name="is_perpetual"
-                                        id="agreement_is_perpetual_no"
-                                        :value="false"
-                                        v-model="agreement.is_perpetual"
-                                    />
-                                </label>
-                            </li>
-                            <li>
-                                <label for="agreement_renewal_priority"
-                                    >{{ $__("Renewal priority") }}:</label
-                                >
-                                <v-select
-                                    id="agreement_renewal_priority"
-                                    v-model="agreement.renewal_priority"
-                                    label="description"
-                                    :reduce="av => av.value"
-                                    :options="av_agreement_renewal_priorities"
+                                </template>
+                            </v-select>
+                            <span class="required">{{ $__("Required") }}</span>
+                        </li>
+                        <li>
+                            <label for="agreement_closure_reason"
+                                >{{ $__("Closure reason") }}:</label
+                            >
+                            <v-select
+                                id="agreement_closure_reason"
+                                v-model="agreement.closure_reason"
+                                label="description"
+                                :reduce="av => av.value"
+                                :options="av_agreement_closure_reasons"
+                                :disabled="
+                                    agreement.status == 'closed' ? false : true
+                                "
+                            />
+                        </li>
+                        <li>
+                            <label for="agreement_is_perpetual"
+                                >{{ $__("Is perpetual") }}:</label
+                            >
+                            <label
+                                class="radio"
+                                for="agreement_is_perpetual_yes"
+                                >Yes
+                                <input
+                                    type="radio"
+                                    name="is_perpetual"
+                                    id="agreement_is_perpetual_yes"
+                                    :value="true"
+                                    v-model="agreement.is_perpetual"
                                 />
-                            </li>
-                            <li>
-                                <label for="agreement_license_info"
-                                    >{{ $__("License info") }}:
-                                </label>
-                                <textarea
-                                    id="agreement_license_info"
-                                    v-model="agreement.license_info"
-                                    placeholder="License info"
+                            </label>
+                            <label class="radio" for="agreement_is_perpetual_no"
+                                >No
+                                <input
+                                    type="radio"
+                                    name="is_perpetual"
+                                    id="agreement_is_perpetual_no"
+                                    :value="false"
+                                    v-model="agreement.is_perpetual"
                                 />
-                            </li>
-                        </ol>
-                    </fieldset>
-                </div>
+                            </label>
+                        </li>
+                        <li>
+                            <label for="agreement_renewal_priority"
+                                >{{ $__("Renewal priority") }}:</label
+                            >
+                            <v-select
+                                id="agreement_renewal_priority"
+                                v-model="agreement.renewal_priority"
+                                label="description"
+                                :reduce="av => av.value"
+                                :options="av_agreement_renewal_priorities"
+                            />
+                        </li>
+                        <li>
+                            <label for="agreement_license_info"
+                                >{{ $__("License info") }}:
+                            </label>
+                            <textarea
+                                id="agreement_license_info"
+                                v-model="agreement.license_info"
+                                placeholder="License info"
+                            />
+                        </li>
+                    </ol>
+                </fieldset>
                 <AgreementPeriods :periods="agreement.periods" />
                 <UserRoles
                     :user_type="$__('Agreement user')"
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 67270273703..d7bc17d759a 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>
-    <div class="page-section" id="documents">
+    <fieldset class="rows" id="documents">
         <legend>{{ $__("Documents") }}</legend>
         <fieldset
             :id="`document_${counter}`"
@@ -102,7 +102,7 @@
         <a class="btn btn-default" @click="addDocument"
             ><font-awesome-icon icon="plus" /> {{ $__("Add new document") }}</a
         >
-    </div>
+    </fieldset>
 </template>
 
 <script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue
index 268af004b2e..4a43863ed3f 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalPackagesFormAdd.vue
@@ -64,12 +64,11 @@
                                 v-model="erm_package.notes"
                             />
                         </li>
-
-                        <EHoldingsPackageAgreements
-                            :package_agreements="erm_package.package_agreements"
-                        />
                     </ol>
                 </fieldset>
+                <EHoldingsPackageAgreements
+                    :package_agreements="erm_package.package_agreements"
+                />
                 <fieldset class="action">
                     <input type="submit" value="Submit" />
                     <router-link
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormAdd.vue
index 2c30ab9e0e0..9127b613dcc 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/EHoldingsLocalTitlesFormAdd.vue
@@ -364,12 +364,9 @@
                                 :placeholder="$__('Access type')"
                             />
                         </li>
-
-                        <EHoldingsTitlesFormAddResources
-                            :resources="title.resources"
-                        />
                     </ol>
                 </fieldset>
+                <EHoldingsTitlesFormAddResources :resources="title.resources" />
                 <fieldset class="action">
                     <input type="submit" value="Submit" />
                     <router-link
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 272253cadf3..82c2278b8c0 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,125 +7,111 @@
         <h2 v-else>{{ $__("New license") }}</h2>
         <div>
             <form @submit="onSubmit($event)">
-                <div class="page-section">
-                    <fieldset class="rows">
-                        <ol>
-                            <li>
-                                <label class="required" for="license_name"
-                                    >{{ $__("License name") }}:</label
-                                >
-                                <input
-                                    id="license_name"
-                                    v-model="license.name"
-                                    :placeholder="$__('License name')"
-                                    required
-                                />
-                                <span class="required">{{
-                                    $__("Required")
-                                }}</span>
-                            </li>
-                            <li>
-                                <label for="license_vendor_id"
-                                    >{{ $__("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"
-                                    class="required"
-                                    >{{ $__("Description") }}:
-                                </label>
-                                <textarea
-                                    id="license_description"
-                                    v-model="license.description"
-                                    :placeholder="$__('Description')"
-                                    rows="10"
-                                    cols="50"
-                                    required
-                                />
-                                <span class="required">{{
-                                    $__("Required")
-                                }}</span>
-                            </li>
-                            <li>
-                                <label for="license_type" class="required"
-                                    >{{ $__("Type") }}:</label
-                                >
-                                <v-select
-                                    id="license_type"
-                                    v-model="license.type"
-                                    label="description"
-                                    :reduce="av => av.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">{{
-                                    $__("Required")
-                                }}</span>
-                            </li>
-                            <li>
-                                <label for="license_status" class="required"
-                                    >{{ $__("Status") }}:</label
-                                >
-                                <v-select
-                                    id="license_status"
-                                    v-model="license.status"
-                                    :reduce="av => av.value"
-                                    :options="av_license_statuses"
-                                    label="description"
-                                >
-                                    <template #search="{ attributes, events }">
-                                        <input
-                                            :required="!license.status"
-                                            class="vs__search"
-                                            v-bind="attributes"
-                                            v-on="events"
-                                        />
-                                    </template>
-                                </v-select>
-                                <span class="required">{{
-                                    $__("Required")
-                                }}</span>
-                            </li>
-                            <li>
-                                <label for="started_on"
-                                    >{{ $__("Start date") }}:</label
-                                >
-                                <flat-pickr
-                                    id="started_on"
-                                    v-model="license.started_on"
-                                    :config="fp_config"
-                                    data-date_to="ended_on"
-                                />
-                            </li>
-                            <li>
-                                <label for="ended_on"
-                                    >{{ $__("End date") }}:</label
-                                >
-                                <flat-pickr
-                                    id="ended_on"
-                                    v-model="license.ended_on"
-                                    :config="fp_config"
-                                />
-                            </li>
-                        </ol>
-                    </fieldset>
-                </div>
+                <fieldset class="rows">
+                    <ol>
+                        <li>
+                            <label class="required" for="license_name"
+                                >{{ $__("License name") }}:</label
+                            >
+                            <input
+                                id="license_name"
+                                v-model="license.name"
+                                :placeholder="$__('License name')"
+                                required
+                            />
+                            <span class="required">{{ $__("Required") }}</span>
+                        </li>
+                        <li>
+                            <label for="license_vendor_id"
+                                >{{ $__("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" class="required"
+                                >{{ $__("Description") }}:
+                            </label>
+                            <textarea
+                                id="license_description"
+                                v-model="license.description"
+                                :placeholder="$__('Description')"
+                                rows="10"
+                                cols="50"
+                                required
+                            />
+                            <span class="required">{{ $__("Required") }}</span>
+                        </li>
+                        <li>
+                            <label for="license_type" class="required"
+                                >{{ $__("Type") }}:</label
+                            >
+                            <v-select
+                                id="license_type"
+                                v-model="license.type"
+                                label="description"
+                                :reduce="av => av.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">{{ $__("Required") }}</span>
+                        </li>
+                        <li>
+                            <label for="license_status" class="required"
+                                >{{ $__("Status") }}:</label
+                            >
+                            <v-select
+                                id="license_status"
+                                v-model="license.status"
+                                :reduce="av => av.value"
+                                :options="av_license_statuses"
+                                label="description"
+                            >
+                                <template #search="{ attributes, events }">
+                                    <input
+                                        :required="!license.status"
+                                        class="vs__search"
+                                        v-bind="attributes"
+                                        v-on="events"
+                                    />
+                                </template>
+                            </v-select>
+                            <span class="required">{{ $__("Required") }}</span>
+                        </li>
+                        <li>
+                            <label for="started_on"
+                                >{{ $__("Start date") }}:</label
+                            >
+                            <flat-pickr
+                                id="started_on"
+                                v-model="license.started_on"
+                                :config="fp_config"
+                                data-date_to="ended_on"
+                            />
+                        </li>
+                        <li>
+                            <label for="ended_on">{{ $__("End date") }}:</label>
+                            <flat-pickr
+                                id="ended_on"
+                                v-model="license.ended_on"
+                                :config="fp_config"
+                            />
+                        </li>
+                    </ol>
+                </fieldset>
                 <UserRoles
                     :user_type="$__('License user')"
                     :user_roles="license.user_roles"
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UserRoles.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UserRoles.vue
index 20491d794a0..27199566b83 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UserRoles.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/UserRoles.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="page-section" id="user_roles">
+    <fieldset class="rows" id="user_roles">
         <legend>{{ $__("Users") }}</legend>
         <fieldset
             class="rows"
@@ -60,7 +60,7 @@
         <a class="btn btn-default" @click="addUser"
             ><font-awesome-icon icon="plus" /> {{ $__("Add new user") }}</a
         >
-    </div>
+    </fieldset>
 </template>
 
 <script>
-- 
2.30.2