From 9368c36c8535fc803d0c8b793c7a8be494e0c6c4 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Thu, 9 Jan 2025 22:57:01 +0200
Subject: [PATCH] feat: enhance species action management in settings

- Introduced a new action index to track the current action being edited.
- Updated the actions modal to retrieve and set existing actions or default values.
- Refactored action saving logic to replace the existing action instead of pushing to an array.
- Improved button interactions to prevent default behavior and enhance user experience.
- Added functionality to clear parameters and improved parameter handling in the UI.
---
 views/settings/speciesSettings.html | 67 +++++++++++++++++++++--------
 1 file changed, 49 insertions(+), 18 deletions(-)

diff --git a/views/settings/speciesSettings.html b/views/settings/speciesSettings.html
index 2b97241..50c64df 100644
--- a/views/settings/speciesSettings.html
+++ b/views/settings/speciesSettings.html
@@ -20,6 +20,7 @@
     speciesSettingsOpen: false,
     showActionsModal: false,
     currentSpecies: '',
+    currentActionIndex: null,
     currentAction: { type: 'ExecuteCommand', command: '', parameters: '' },
     resetChanges() {
         this.hasChanges = false;
@@ -53,12 +54,22 @@
     },
     openActionsModal(species) {
         this.currentSpecies = species;
-        this.currentAction = this.speciesSettings.Config[species]?.Actions?.[0] || { type: 'ExecuteCommand', command: '', parameters: '' };
+        
+        // Get existing action if any
+        const existingAction = this.speciesSettings.Config[species]?.Actions?.[0];
+        
+        // Set default or existing action
+        const defaultAction = { Type: 'ExecuteCommand', Command: '', Parameters: [] };
+        const action = existingAction || defaultAction;
+        
+        this.currentAction = {
+            type: action.Type,
+            command: action.Command,
+            parameters: Array.isArray(action.Parameters) ? action.Parameters.join(',') : ''
+        };
+        
         this.showActionsModal = true;
     },
-    closeActionsModal() {
-        this.showActionsModal = false;
-    },
     saveAction() {
         if (!this.speciesSettings.Config[this.currentSpecies]) {
             this.speciesSettings.Config[this.currentSpecies] = {
@@ -67,15 +78,21 @@
             };
         }
         
-        this.speciesSettings.Config[this.currentSpecies].Actions.push({
+        const newAction = {
             Type: this.currentAction.type,
             Command: this.currentAction.command,
-            Parameters: this.currentAction.parameters.split(',').map(p => p.trim())
-        });
+            Parameters: this.currentAction.parameters.split(',').map(p => p.trim()).filter(p => p)
+        };
+        
+        // Always replace/set the single action
+        this.speciesSettings.Config[this.currentSpecies].Actions = [newAction];
         
         this.hasChanges = true;
         this.closeActionsModal();
     },
+    closeActionsModal() {
+        this.showActionsModal = false;
+    },
     updatePredictions(input) {
         if (!input || !this.allowedSpecies) {
             this.predictions = [];
@@ -225,11 +242,15 @@
                         <div class="flex-grow text-sm pl-2" x-text="species"></div>
                         <div class="w-24 text-sm px-3" x-text="config.Threshold"></div>
                         <div class="w-20 text-center">
-                            <button type="button" @click="openActionsModal(species)" 
-                                    class="btn btn-xs">Edit</button>
+                            <button type="button" 
+                                    @click.prevent="openActionsModal(species)" 
+                                    class="btn btn-xs">
+                                <span x-text="config.Actions?.length ? 'Edit Action' : 'Add Action'"></span>
+                            </button>
                         </div>
                         <div class="w-20 text-center">
-                            <button type="button" @click="removeConfig(species)" 
+                            <button type="button" 
+                                    @click="removeConfig(species)" 
                                     class="btn btn-xs">Remove</button>
                         </div>
                     </div>
@@ -302,27 +323,37 @@ <h3 class="text-lg font-bold mb-4" x-text="'Actions for ' + currentSpecies"></h3
                     <label class="block text-sm font-medium">Available Parameters</label>
                     <p class="text-sm text-gray-500 mb-2">Click to add parameters to your script:</p>
                     <div class="flex flex-wrap gap-2">
-                        <button @click="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',CommonName' : 'CommonName'" 
+                        <button type="button" 
+                                @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',CommonName' : 'CommonName'" 
                                 class="btn btn-xs">CommonName</button>
-                        <button @click="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',ScientificName' : 'ScientificName'" 
+                        <button type="button" 
+                                @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',ScientificName' : 'ScientificName'" 
                                 class="btn btn-xs">ScientificName</button>
-                        <button @click="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',Confidence' : 'Confidence'" 
+                        <button type="button" 
+                                @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',Confidence' : 'Confidence'" 
                                 class="btn btn-xs">Confidence</button>
-                        <button @click="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',Time' : 'Time'" 
+                        <button type="button" 
+                                @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',Time' : 'Time'" 
                                 class="btn btn-xs">Time</button>
-                        <button @click="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',Source' : 'Source'" 
+                        <button type="button" 
+                                @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',Source' : 'Source'" 
                                 class="btn btn-xs">Source</button>
                     </div>
                     <div class="mt-2">
-                        <button @click="currentAction.parameters = ''" 
+                        <button type="button" 
+                                @click.prevent="currentAction.parameters = ''" 
                                 class="btn btn-xs btn-warning">Clear Parameters</button>
                     </div>
                     <p class="text-sm text-gray-500 mt-2">Parameters will be passed to your script in the order they are added</p>
                 </div>
                 
                 <div class="modal-action">
-                    <button @click="saveAction()" class="btn btn-primary">Save</button>
-                    <button @click="closeActionsModal()" class="btn">Cancel</button>
+                    <button type="button" 
+                            @click.prevent="saveAction()" 
+                            class="btn btn-primary">Save</button>
+                    <button type="button" 
+                            @click.prevent="closeActionsModal()" 
+                            class="btn">Cancel</button>
                 </div>
             </div>
             <div class="modal-backdrop" @click="closeActionsModal()"></div>