From 53b726f2ce51a7b4326a87e9bb111075ad93dc9c Mon Sep 17 00:00:00 2001
From: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Date: Wed, 18 Sep 2024 04:33:27 +0100
Subject: [PATCH] Bug 10190: Clarify workflow

This patch re-arranges the edit/add modal form to clarify the
need to select context, then decide on editing an existing trigger or
adding a new one and then, and only then, exposes the actual rule inputs
---
 .../CirculationTriggersFormAdd.vue            | 53 ++++++++++++-------
 .../CirculationTriggers/TriggersTable.vue     | 46 ++++++++++++++--
 2 files changed, 77 insertions(+), 22 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/CirculationTriggers/CirculationTriggersFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/CirculationTriggers/CirculationTriggersFormAdd.vue
index 0ae22737919..998d3dcd8dd 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/CirculationTriggers/CirculationTriggersFormAdd.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/CirculationTriggers/CirculationTriggersFormAdd.vue
@@ -5,30 +5,21 @@
     <div v-if="initialized" class="modal-content">
         <form @submit="addCircRule($event)">
             <div class="modal-header">
-                <h1 v-if="!editMode">{{ $__("Add circulation trigger") }}</h1>
-                <h1 v-else>{{ $__("Edit circulation trigger") }}</h1>
+                <h1 class="modal-title" v-if="!editMode">
+                    {{ $__("Circulation triggers") }}
+                </h1>
+                <h1 class="modal-title" v-else>
+                    {{ $__("Edit circulation trigger") }}
+                </h1>
             </div>
             <div class="modal-body">
                 <div class="page-section bg-info" v-if="circRules.length">
-                    <h2>{{ $__("Trigger context") }}</h2>
+                    <h2>{{ $__("Circulation context") }}</h2>
                     <TriggerContext :ruleInfo="ruleInfo" />
-                    <h2 v-if="ruleInfo.numberOfTriggers > 0">
-                        {{ $__("Existing rules") }}
-                    </h2>
-                    <p v-if="ruleInfo.numberOfTriggers > 0">
-                        {{ $__("Notice") }} {{ " " + newTriggerNumber - 1 }}
-                    </p>
-                    <TriggersTable
-                        v-if="ruleInfo.numberOfTriggers > 0"
-                        :circRules="circRules"
-                        :triggerNumber="newTriggerNumber - 1"
-                        :modal="true"
-                        :ruleBeingEdited="ruleBeingEdited"
-                        :triggerBeingEdited="triggerBeingEdited"
-                        :letters="letters"
-                    />
                 </div>
+
                 <fieldset class="rows">
+                    <legend>{{ $__("Select trigger context") }}</legend>
                     <ol>
                         <li>
                             <label for="library_id" class="required"
@@ -102,6 +93,32 @@
                             </v-select>
                             <span class="required">{{ $__("Required") }}</span>
                         </li>
+                    </ol>
+
+                    <div
+                        class="page-section bg-warning-subtle"
+                        v-if="circRules.length"
+                    >
+                        <TriggersTable
+                            :circRules="circRules"
+                            :triggerNumber="newTriggerNumber - 1"
+                            :modal="true"
+                            :ruleBeingEdited="ruleBeingEdited"
+                            :triggerBeingEdited="triggerBeingEdited"
+                            :letters="letters"
+                        />
+                    </div>
+                </fieldset>
+
+                <fieldset class="rows" v-if="editMode">
+                    <legend v-if="ruleInfo.numberOfTriggers < newTriggerNumber">
+                        {{ $__("Add new trigger") }}
+                        {{ " " + newTriggerNumber }}
+                    </legend>
+                    <legend v-else>
+                        {{ $__("Edit trigger") }} {{ " " + newTriggerNumber }}
+                    </legend>
+                    <ol>
                         <li>
                             <label for="overdue_delay"
                                 >{{ $__("Delay") }}:
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/CirculationTriggers/TriggersTable.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/CirculationTriggers/TriggersTable.vue
index 06d540e93b9..1e208c2ab1d 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/CirculationTriggers/TriggersTable.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Admin/CirculationTriggers/TriggersTable.vue
@@ -1,6 +1,12 @@
 <template>
     <div class="page-section">
-        <div class="page-section bg-info">{{ $__("Bolid italic values denote fallback values where an override has not been set for the context.") }}</div>
+        <div class="page-section bg-info" v-if="!modal">
+            {{
+                $__(
+                    "Bolid italic values denote fallback values where an override has not been set for the context."
+                )
+            }}
+        </div>
         <table>
             <thead>
                 <th v-if="!modal">
@@ -10,7 +16,7 @@
                     {{ $__("Item type") }}
                 </th>
                 <th v-if="modal">
-                    {{ $__("Rule") }}
+                    {{ $__("Trigger") }}
                 </th>
                 <th>
                     {{ $__("Delay") }}
@@ -260,6 +266,28 @@
                         >
                     </td>
                 </tr>
+                <tr v-if="modal">
+                    <td colspan="7"></td>
+                    <td class="actions">
+                        <router-link
+                            :to="{
+                                name: 'CirculationTriggersFormEdit',
+                                query: {
+                                    library_id:
+                                        ruleBeingEdited.context.library_id,
+                                    item_type_id:
+                                        ruleBeingEdited.context.item_type_id,
+                                    patron_category_id:
+                                        ruleBeingEdited.context
+                                            .patron_category_id,
+                                    triggerNumber: numberOfTriggers + 1,
+                                },
+                            }"
+                            class="btn btn-default btn-xs"
+                            ><i class="fa-solid fa-pencil"></i> Add</router-link
+                        >
+                    </td>
+                </tr>
             </tbody>
         </table>
     </div>
@@ -277,6 +305,11 @@ export default {
         "itemTypes",
         "letters",
     ],
+    data() {
+        return {
+            numberOfTriggers: 0,
+        }
+    },
     methods: {
         handleContext(value, data, type, displayProperty = "name") {
             const item = data.find(item => item[type] === value)
@@ -304,12 +337,17 @@ export default {
 
             // Calculate the number of 'overdue_X_' triggers in the effectiveRule
             const regex = /overdue_(\d+)_delay/g
-            const numberOfTriggers = Object.keys(effectiveRule).filter(
+            this.numberOfTriggers = Object.keys(effectiveRule).filter(
                 key => regex.test(key) && effectiveRule[key] !== null
             ).length
 
+            // Shortcut for the case where no triggers exist yet
+            if (this.numberOfTriggers === 0) {
+                return undefined
+            }
+
             // Ensure there is one contextRule per 'X' from 1 to numberOfTriggers
-            for (let i = 1; i <= numberOfTriggers; i++) {
+            for (let i = 1; i <= this.numberOfTriggers; i++) {
                 // Check if there's already a rule for overdue_X_ in contextRules
                 const matchingRule = contextRules.find(
                     rule => rule[`overdue_${i}_delay`] !== undefined
-- 
2.46.0