From 4f6ee1fb22256bd9d8d1f81ae0926372b4d758f1 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Wed, 24 Apr 2024 22:10:56 -0500
Subject: [PATCH] Use v-model to track selection etc. for download results
 fields

---
 tailbone/templates/master/index.mako | 53 ++++++++++++++++------------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/tailbone/templates/master/index.mako b/tailbone/templates/master/index.mako
index 0ae4c8ab..7cb9ffa2 100644
--- a/tailbone/templates/master/index.mako
+++ b/tailbone/templates/master/index.mako
@@ -84,7 +84,7 @@
             <div style="display: flex; justify-content: space-between">
 
               <div>
-                <b-field horizontal label="Format">
+                <b-field label="Format">
                   <b-select v-model="downloadResultsFormat">
                     % for key, label in master.download_results_supported_formats().items():
                     <option value="${key}">${label}</option>
@@ -130,9 +130,9 @@
                       <b-field label="Excluded Fields">
                         <b-select multiple native-size="8"
                                   expanded
+                                  v-model="downloadResultsExcludedFieldsSelected"
                                   ref="downloadResultsExcludedFields">
-                          <option v-for="field in downloadResultsFieldsAvailable"
-                                  v-if="!downloadResultsFieldsIncluded.includes(field)"
+                          <option v-for="field in downloadResultsFieldsExcluded"
                                   :key="field"
                                   :value="field">
                             {{ field }}
@@ -156,6 +156,7 @@
                       <b-field label="Included Fields">
                         <b-select multiple native-size="8"
                                   expanded
+                                  v-model="downloadResultsIncludedFieldsSelected"
                                   ref="downloadResultsIncludedFields">
                           <option v-for="field in downloadResultsFieldsIncluded"
                                   :key="field"
@@ -417,6 +418,9 @@
         ${grid.component_studly}Data.downloadResultsFieldsDefault = ${json.dumps(download_results_fields_default)|n}
         ${grid.component_studly}Data.downloadResultsFieldsIncluded = ${json.dumps(download_results_fields_default)|n}
 
+        ${grid.component_studly}Data.downloadResultsExcludedFieldsSelected = []
+        ${grid.component_studly}Data.downloadResultsIncludedFieldsSelected = []
+
         ${grid.component_studly}.computed.downloadResultsFieldsExcluded = function() {
             let excluded = []
             this.downloadResultsFieldsAvailable.forEach(field => {
@@ -428,45 +432,48 @@
         }
 
         ${grid.component_studly}.methods.downloadResultsExcludeFields = function() {
-            let selected = this.$refs.downloadResultsIncludedFields.selected
+            const selected = Array.from(this.downloadResultsIncludedFieldsSelected)
             if (!selected) {
                 return
             }
-            selected = Array.from(selected)
-            selected.forEach(field => {
 
-                // de-select the entry within "included" field input
-                let index = this.$refs.downloadResultsIncludedFields.selected.indexOf(field)
-                if (index > -1) {
-                    this.$refs.downloadResultsIncludedFields.selected.splice(index, 1)
+            selected.forEach(field => {
+                let index
+
+                // remove field from selected
+                index = this.downloadResultsIncludedFieldsSelected.indexOf(field)
+                if (index >= 0) {
+                    this.downloadResultsIncludedFieldsSelected.splice(index, 1)
                 }
 
-                // remove field from official "included" list
+                // remove field from included
+                // nb. excluded list will reflect this change too
                 index = this.downloadResultsFieldsIncluded.indexOf(field)
-                if (index > -1) {
+                if (index >= 0) {
                     this.downloadResultsFieldsIncluded.splice(index, 1)
                 }
-            }, this)
+            })
         }
 
         ${grid.component_studly}.methods.downloadResultsIncludeFields = function() {
-            let selected = this.$refs.downloadResultsExcludedFields.selected
+            const selected = Array.from(this.downloadResultsExcludedFieldsSelected)
             if (!selected) {
                 return
             }
-            selected = Array.from(selected)
-            selected.forEach(field => {
 
-                // de-select the entry within "excluded" field input
-                let index = this.$refs.downloadResultsExcludedFields.selected.indexOf(field)
-                if (index > -1) {
-                    this.$refs.downloadResultsExcludedFields.selected.splice(index, 1)
+            selected.forEach(field => {
+                let index
+
+                // remove field from selected
+                index = this.downloadResultsExcludedFieldsSelected.indexOf(field)
+                if (index >= 0) {
+                    this.downloadResultsExcludedFieldsSelected.splice(index, 1)
                 }
 
-                // add field to official "included" list
+                // add field to included
+                // nb. excluded list will reflect this change too
                 this.downloadResultsFieldsIncluded.push(field)
-
-            }, this)
+            })
         }
 
         ${grid.component_studly}.methods.downloadResultsUseDefaultFields = function() {