[enh] Tabs in config panel

This commit is contained in:
ljf 2021-08-31 16:58:06 +02:00
parent 76fa9b64ec
commit 93ad401c7d

View file

@ -1,29 +1,35 @@
<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> <template v-if="panels" #default>
<card-form <b-tabs pills card vertical>
v-for="{ name, id: id_, sections, help, serverError } in panels" :key="id_" <b-tab v-for="{ name, id: id_, sections, help, serverError } in panels"
:title="name" icon="wrench" title-tag="h2" :key="id_"
:validation="$v.forms[id_]" :id="id_ + '-form'" :server-error="serverError" :title="name"
collapsable >
@submit.prevent="applyConfig(id_)" <card-form
> :key="id_"
<template v-if="help" #disclaimer> :title="name" icon="wrench" title-tag="h2"
<div class="alert alert-info" v-html="help" /> :validation="$v.forms[id_]" :id="id_ + '-form'" :server-error="serverError"
</template> @submit.prevent="applyConfig(id_)"
>
<template v-if="help" #disclaimer>
<div class="alert alert-info" v-html="help" />
</template>
<div v-for="section in sections" :key="section.id" class="mb-5"> <div v-for="section in sections" :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 :key="fname" v-model="forms[id_][fname]"
:validation="$v.forms[id_][fname]" :validation="$v.forms[id_][fname]"
v-if="isVisible(field.visibleIf)" v-bind="field" v-if="isVisible(field.visibleIf)" v-bind="field"
/> />
</template> </template>
</div> </div>
</card-form> {{ errors.main.str }} </card-form>
</b-tab>
</b-tabs>
</template> </template>
<!-- if no config panel --> <!-- if no config panel -->