rattail/tailbone
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Use v-model to track selection etc. for download results fields

Browse source
This commit is contained in:
Lance Edgar 2024-04-24 22:10:56 -05:00
parent ddafa9ed97
commit 4f6ee1fb22
1 changed files with 30 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

53
tailbone/templates/master/index.mako
View file

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