YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

update AppConfigPanel with TabForm

Browse source
This commit is contained in:
axolotle 2022-01-05 18:34:24 +01:00
parent a19f57c6d6
commit 71f1e67289
1 changed files with 25 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
app/src/views/app/AppConfigPanel.vue
View file

@ -1,41 +1,32 @@
<template> <template>
<view-base :queries="queries" @queries-response="onQueriesResponse" skeleton="card-form-skeleton"> <view-base :queries="queries" @queries-response="onQueriesResponse" skeleton="card-form-skeleton">
<template v-if="panels" #default> <b-card v-if="panels" no-body>
<b-tabs pills card vertical> <b-tabs fill pills card>
<b-tab v-for="{ name, id: id_, sections, help, serverError } in panels" <tab-form
:key="id_" v-for="{ name, id: id_, sections, help, serverError } in panels" :key="id_"
:title="name" v-bind="{ name, id: id_ + '-form', validation: $v.forms[id_], serverError }"
>
<template #title>
<icon iname="wrench" /> {{ name }}
</template>
<card-form
:key="id_"
:title="name" icon="wrench" title-tag="h2"
:validation="$v.forms[id_]" :id="id_ + '-form'" :server-error="serverError"
@submit.prevent="applyConfig(id_)"
> >
<template v-if="help" #disclaimer> <template v-if="help" #disclaimer>
<div class="alert alert-info" v-html="help" /> <div class="alert alert-info" v-html="help" />
</template> </template>
<template v-for="section in sections"> <template v-for="section in sections">
<div :key="section.id" class="mb-5" v-if="isVisible(section.visible, section)"> <div v-if="isVisible(section.visible, section)" :key="section.id" class="mb-5">
<b-card-title v-if="section.name" title-tag="h3"> <b-card-title v-if="section.name" title-tag="h3">
{{ section.name }} <small v-if="section.help">{{ section.help }}</small> {{ section.name }} <small v-if="section.help">{{ section.help }}</small>
</b-card-title> </b-card-title>
<template v-for="(field, fname) in section.fields"> <template v-for="(field, fname) in section.fields">
<form-field :key="fname" v-model="forms[id_][fname]" <form-field
:validation="$v.forms[id_][fname]" v-if="isVisible(field.visible, field)" :key="fname"
v-if="isVisible(field.visible, field)" v-bind="field" v-model="forms[id_][fname]" v-bind="field" :validation="$v.forms[id_][fname]"
/> />
</template> </template>
</div> </div>
</template> </template>
</card-form> </tab-form>
</b-tab>
</b-tabs> </b-tabs>
</template> </b-card>
<!-- if no config panel --> <!-- if no config panel -->
<b-alert v-else-if="panels === null" variant="warning"> <b-alert v-else-if="panels === null" variant="warning">
@ -117,6 +108,7 @@ export default {
// This value should be updated magically when vuejs will detect isVisible changed // This value should be updated magically when vuejs will detect isVisible changed
return field.isVisible return field.isVisible
}, },
onQueriesResponse (data) { onQueriesResponse (data) {
if (!data.panels || data.panels.length === 0) { if (!data.panels || data.panels.length === 0) {
this.panels = null this.panels = null
@ -182,6 +174,7 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
h3 { h3 {
margin-bottom: 1em; margin-bottom: 1em;