Skip to content

Commit

Permalink
Merge pull request #132 from biothings/modal-improvements
Browse files Browse the repository at this point in the history 
Modal dropdown improvements
  • Loading branch information
@DylanWelzel
DylanWelzel authored Feb 5, 2024
2 parents 63e5068 + a11573c commit 01ff445
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 24 deletions.
37 changes: 23 additions & 14 deletions webapp/src/ApiGrid.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,16 +73,16 @@

<label>Select a backend the API will connect to to serve the data</label>
<div>
<div class="ui fluid apibackends dropdown search selection">
<div class="ui fluid apibackends dropdown search selection" :class="{disabled: backendsDisabled}">
<input type="hidden" name="api_backend">
<i class="dropdown icon"></i>
<div class="default text">Select backend</div>
<div class="menu">
<div v-if="backends" v-for="(_, idx_name) in backends"
class="item"
:data-value="idx_name"
>
{{ idx_name }}
<div v-if="!isLoadingBackends && backends" v-for="(_, idx_name) in backends" class="item" :data-value="idx_name">
{{ idx_name }}
</div>
<div v-if="isLoadingBackends" class="item loading">
Loading...
</div>
</div>
</div>
Expand Down Expand Up @@ -138,14 +138,15 @@ export default {
mounted () {
const self = this
$('.ui.es_servers.dropdown').change(this.fetchIndexes)
$('.ui.es_servers.dropdown').dropdown()
$('.ui.es_servers.dropdown').dropdown().change(function() {
self.fetchIndexes();
$('.ui.apibackends.dropdown').dropdown('clear');
});
$('.ui.apibackends.dropdown').dropdown({
onSearch: function (search_term) {
self.fetchIndexes()
},
})
fullTextSearch: true
});
$('#apis .ui.sidebar')
.sidebar({ context: $('#apis') })
Expand Down Expand Up @@ -179,6 +180,8 @@ export default {
errors: [],
es_servers: {},
backends: {},
isLoadingBackends: false,
backendsDisabled: true
}
},
components: { API, PaginatedList },
Expand Down Expand Up @@ -211,6 +214,7 @@ export default {
},
fetchIndexes: function() {
const self = this
self.isLoadingBackends = true
const es_server = $('.ui.es_servers.dropdown').dropdown("get value")
const search_term = $('.ui.apibackends.dropdown').dropdown("get query")
const server_data = self.es_servers[es_server]
Expand All @@ -227,7 +231,7 @@ export default {
}
self.loading()
axios.get(axios.defaults.baseURL + `/indexes_by_name?${params.toString()}`)
axios.get(axios.defaults.baseURL + `/indexes_by_name?${params.toString()}&limit=1000`)
.then(response => {
const new_backends = {}
response.data.result.forEach(index => {
Expand All @@ -239,14 +243,18 @@ export default {
}
})
self.backends = new_backends
self.loaded()
})
.catch(err => {
console.log('Error getting index environments: ')
console.log(err)
self.loaderror(err)
})
.finally(() => {
self.isLoadingBackends = false
self.backendsDisabled = false
})
},
createAPI: function () {
$('#apis .ui.sidebar').sidebar('hide')
Expand Down Expand Up @@ -293,6 +301,7 @@ export default {
onHidden: function () {
$('.ui.es_servers.dropdown').dropdown("clear cache")
$('.ui.apibackends.dropdown').dropdown("clear cache")
self.backendsDisabled = true
}
})
.modal('show')
Expand Down
34 changes: 24 additions & 10 deletions webapp/src/DiffReleaseEvent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,17 +64,20 @@

<label>Select a backend to apply the diff to</label>
<div>
<div class="ui fluid backendenv dropdown search selection">
<div class="ui fluid backendenv dropdown search selection" :class="{disabled: backendsDisabled}">
<input type="hidden" name="target_backend">
<i class="dropdown icon"></i>
<div class="default text">Select backend</div>
<div class="menu">
<div v-if="compats" v-for="compat of compats"
<div v-if="!isLoadingBackends && compats" v-for="compat of compats"
class="item"
:data-value="compat.index"
>
{{ compat.index }}
</div>
<div v-if="isLoadingBackends" class="item loading">
Loading...
</div>
</div>
</div>
<br>
Expand Down Expand Up @@ -188,13 +191,14 @@ export default {
mounted () {
const self = this
$('.ui.es_servers.dropdown').change(self.fetchIndexes)
$('.ui.es_servers.dropdown').dropdown()
$('.ui.es_servers.dropdown').dropdown().change(function() {
self.fetchIndexes();
$('.ui.backendenv.dropdown').dropdown('clear');
});
$('.ui.backendenv.dropdown').dropdown({
onSearch: function (search_term) {
self.fetchIndexes()
},
})
fullTextSearch: true
});
self.fetchESServers()
},
Expand All @@ -207,7 +211,9 @@ export default {
errors: [],
compats: {},
es_servers: {},
selecting_build_config: null
selecting_build_config: null,
isLoadingBackends: false,
backendsDisabled: true
}
},
computed: {
Expand Down Expand Up @@ -284,6 +290,7 @@ export default {
},
fetchIndexes () {
const self = this
self.isLoadingBackends = true
const es_server = $('.ui.es_servers.dropdown').dropdown("get value")
const server_data = self.es_servers[es_server]
const search_term = $('.ui.backendenv.dropdown').dropdown("get query")
Expand All @@ -299,7 +306,7 @@ export default {
params.set("index_name", "*" + search_term + "*")
}
axios.get(axios.defaults.baseURL + `/indexes_by_name?${params.toString()}`)
axios.get(axios.defaults.baseURL + `/indexes_by_name?${params.toString()}&limit=1000`)
.then(response => {
const indexes = response.data.result
self.compats = self.selectCompatibles(es_server, server_data, indexes)
Expand All @@ -312,6 +319,10 @@ export default {
self.loaderror(err)
throw err
})
.finally(() => {
self.isLoadingBackends = false
self.backendsDisabled = false
})
},
selectCompatibles (env, env_data, indexes) {
const self = this
Expand Down Expand Up @@ -386,6 +397,9 @@ export default {
console.log(err)
self.loaderror(err)
})
},
onHidden: function () {
self.backendsDisabled = true
}
})
.modal('show')
Expand Down

0 comments on commit 01ff445

Please sign in to comment.