comonent in generic form trial
This commit is contained in:
vabene1111
parent
86fd0dcab1
commit
54a5c145cc
@ -20,7 +20,9 @@
|
|||||||
|
|
||||||
<!-- Food properties -->
|
<!-- Food properties -->
|
||||||
|
|
||||||
<h5><i class="fas fa-database"></i> {{ $t('Properties') }} <small class="text-muted">{{ food.name }}</small></h5>
|
<h5><i class="fas fa-database"></i> {{ $t('Properties') }} <small class="text-muted">{{
|
||||||
|
food.name
|
||||||
|
}}</small></h5>
|
||||||
<table class="table table-bordered" v-if="food_properties">
|
<table class="table table-bordered" v-if="food_properties">
|
||||||
<tr v-for="fp in food_properties" v-bind:key="fp.id">
|
<tr v-for="fp in food_properties" v-bind:key="fp.id">
|
||||||
<td><input v-model="fp.property_amount" type="number"> {{ fp.property_type.unit }}</td>
|
<td><input v-model="fp.property_amount" type="number"> {{ fp.property_type.unit }}</td>
|
||||||
@ -42,86 +44,91 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- Unit conversion -->
|
<!-- Unit conversion -->
|
||||||
|
<b-button v-b-toggle.collapse-advanced class="m-1">{{$t('Advanced')}}</b-button>
|
||||||
<!-- ADVANCED FEATURES somehow hide this stuff -->
|
<!-- ADVANCED FEATURES somehow hide this stuff -->
|
||||||
|
<b-collapse id="collapse-advanced">
|
||||||
|
<b-form-group :label="$t('Recipe')" :description="$t('food_recipe_help')">
|
||||||
|
<generic-multiselect
|
||||||
|
@change="food.recipe = $event.val;"
|
||||||
|
:model="Models.RECIPE"
|
||||||
|
:initial_selection="food.recipe"
|
||||||
|
label="name"
|
||||||
|
:multiple="false"
|
||||||
|
:placeholder="$t('Recipe')"
|
||||||
|
></generic-multiselect>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
<b-form-group :label="$t('Recipe')" :description="$t('food_recipe_help')">
|
<b-form-group :description="$t('OnHand_help')">
|
||||||
<generic-multiselect
|
<b-form-checkbox v-model="food.food_onhand">{{ $t('OnHand') }}</b-form-checkbox>
|
||||||
@change="food.recipe = $event.val;"
|
</b-form-group>
|
||||||
:model="Models.RECIPE"
|
|
||||||
:initial_selection="food.recipe"
|
|
||||||
label="name"
|
|
||||||
:multiple="false"
|
|
||||||
:placeholder="$t('Recipe')"
|
|
||||||
></generic-multiselect>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<b-form-group :description="$t('OnHand_help')">
|
<b-form-group :description="$t('ignore_shopping_help')">
|
||||||
<b-form-checkbox v-model="food.food_onhand">{{ $t('OnHand') }}</b-form-checkbox>
|
<b-form-checkbox v-model="food.ignore_shopping">{{
|
||||||
</b-form-group>
|
$t('Ignore_Shopping')
|
||||||
|
}}
|
||||||
|
</b-form-checkbox>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
<b-form-group :description="$t('ignore_shopping_help')">
|
<b-form-group :label="$t('Shopping_Category')" :description="$t('shopping_category_help')">
|
||||||
<b-form-checkbox v-model="food.ignore_shopping">{{ $t('Ignore_Shopping') }}</b-form-checkbox>
|
<generic-multiselect
|
||||||
</b-form-group>
|
@change="food.supermarket_category = $event.val;"
|
||||||
|
:model="Models.SHOPPING_CATEGORY"
|
||||||
|
:initial_selection="food.supermarket_category"
|
||||||
|
label="name"
|
||||||
|
:multiple="false"
|
||||||
|
:allow_create="true"
|
||||||
|
:placeholder="$t('Shopping_Category')"
|
||||||
|
></generic-multiselect>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
<b-form-group :label="$t('Shopping_Category')" :description="$t('shopping_category_help')">
|
<hr/>
|
||||||
<generic-multiselect
|
<!-- todo add conditions if false disable dont hide -->
|
||||||
@change="food.supermarket_category = $event.val;"
|
<b-form-group :label="$t('Substitutes')" :description="$t('substitute_help')">
|
||||||
:model="Models.SHOPPING_CATEGORY"
|
<generic-multiselect
|
||||||
:initial_selection="food.supermarket_category"
|
@change="food.substitute = $event.val;"
|
||||||
label="name"
|
:model="Models.FOOD"
|
||||||
:multiple="false"
|
:initial_selection="food.substitute"
|
||||||
:allow_create="true"
|
label="name"
|
||||||
:placeholder="$t('Shopping_Category')"
|
:multiple="false"
|
||||||
></generic-multiselect>
|
:placeholder="$t('Substitutes')"
|
||||||
</b-form-group>
|
></generic-multiselect>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
<hr/>
|
<b-form-group :description="$t('substitute_siblings_help')">
|
||||||
<!-- todo add conditions if false disable dont hide -->
|
<b-form-checkbox v-model="food.substitute_siblings">{{
|
||||||
<b-form-group :label="$t('Substitutes')" :description="$t('substitute_help')">
|
$t('substitute_siblings')
|
||||||
<generic-multiselect
|
}}
|
||||||
@change="food.substitute = $event.val;"
|
</b-form-checkbox>
|
||||||
:model="Models.FOOD"
|
</b-form-group>
|
||||||
:initial_selection="food.substitute"
|
|
||||||
label="name"
|
|
||||||
:multiple="false"
|
|
||||||
:placeholder="$t('Substitutes')"
|
|
||||||
></generic-multiselect>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<b-form-group :description="$t('substitute_siblings_help')">
|
<b-form-group :label="$t('InheritFields')" :description="$t('InheritFields_help')">
|
||||||
<b-form-checkbox v-model="food.substitute_siblings">{{
|
<generic-multiselect
|
||||||
$t('substitute_siblings')
|
@change="food.inherit_fields = $event.val;"
|
||||||
}}
|
:model="Models.FOOD_INHERIT_FIELDS"
|
||||||
</b-form-checkbox>
|
:initial_selection="food.inherit_fields"
|
||||||
</b-form-group>
|
label="name"
|
||||||
|
:multiple="false"
|
||||||
|
:placeholder="$t('InheritFields')"
|
||||||
|
></generic-multiselect>
|
||||||
|
</b-form-group>
|
||||||
|
|
||||||
<b-form-group :label="$t('InheritFields')" :description="$t('InheritFields_help')">
|
<b-form-group :label="$t('ChildInheritFields')" :description="$t('ChildInheritFields_help')">
|
||||||
<generic-multiselect
|
<generic-multiselect
|
||||||
@change="food.inherit_fields = $event.val;"
|
@change="food.child_inherit_fields = $event.val;"
|
||||||
:model="Models.FOOD_INHERIT_FIELDS"
|
:model="Models.FOOD_INHERIT_FIELDS"
|
||||||
:initial_selection="food.inherit_fields"
|
:initial_selection="food.child_inherit_fields"
|
||||||
label="name"
|
label="name"
|
||||||
:multiple="false"
|
:multiple="false"
|
||||||
:placeholder="$t('InheritFields')"
|
:placeholder="$t('ChildInheritFields')"
|
||||||
></generic-multiselect>
|
></generic-multiselect>
|
||||||
</b-form-group>
|
</b-form-group>
|
||||||
|
|
||||||
<b-form-group :label="$t('ChildInheritFields')" :description="$t('ChildInheritFields_help')">
|
<!-- TODO change to a button -->
|
||||||
<generic-multiselect
|
<b-form-group :description="$t('reset_children_help')">
|
||||||
@change="food.child_inherit_fields = $event.val;"
|
<b-form-checkbox v-model="food.reset_inherit">{{ $t('reset_children') }}</b-form-checkbox>
|
||||||
:model="Models.FOOD_INHERIT_FIELDS"
|
</b-form-group>
|
||||||
:initial_selection="food.child_inherit_fields"
|
</b-collapse>
|
||||||
label="name"
|
|
||||||
:multiple="false"
|
|
||||||
:placeholder="$t('ChildInheritFields')"
|
|
||||||
></generic-multiselect>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<!-- TODO change to a button -->
|
|
||||||
<b-form-group :description="$t('reset_children_help')">
|
|
||||||
<b-form-checkbox v-model="food.reset_inherit">{{ $t('reset_children') }}</b-form-checkbox>
|
|
||||||
</b-form-group>
|
|
||||||
|
|
||||||
<b-button variant="primary" @click="updateFood">{{ $t('Save') }}</b-button>
|
<b-button variant="primary" @click="updateFood">{{ $t('Save') }}</b-button>
|
||||||
</b-form>
|
</b-form>
|
||||||
|
|||||||
@ -1,34 +1,43 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<b-modal :id="'modal_' + id" @hidden="cancelAction">
|
<template v-if="form_component !== undefined">
|
||||||
<template v-slot:modal-title>
|
<b-modal :id="'modal_' + id" @hidden="cancelAction" size="xl">
|
||||||
<h4 class="d-inline">{{ form.title }}</h4>
|
<component :is="form_component"></component>
|
||||||
<help-badge v-if="form.show_help" @show="show_help = true" @hide="show_help = false" :component="`GenericModal${form.title}`" />
|
</b-modal>
|
||||||
</template>
|
|
||||||
<div v-for="(f, i) in form.fields" v-bind:key="i">
|
</template>
|
||||||
<p v-if="visibleCondition(f, 'instruction')">{{ f.label }}</p>
|
<template v-else>
|
||||||
<lookup-input v-if="visibleCondition(f, 'lookup')" :form="f" :model="listModel(f.list)" @change="storeValue" :help="showHelp && f.help" />
|
<b-modal :id="'modal_' + id" @hidden="cancelAction" size="lg">
|
||||||
<checkbox-input class="mb-3" v-if="visibleCondition(f, 'checkbox')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" />
|
<template v-slot:modal-title>
|
||||||
<text-input v-if="visibleCondition(f, 'text')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle" :disabled="f.disabled"/>
|
<h4 class="d-inline">{{ form.title }}</h4>
|
||||||
<choice-input v-if="visibleCondition(f, 'choice')" :label="f.label" :value="f.value" :field="f.field" :options="f.options" :placeholder="f.placeholder" />
|
<help-badge v-if="form.show_help" @show="show_help = true" @hide="show_help = false" :component="`GenericModal${form.title}`" />
|
||||||
<emoji-input v-if="visibleCondition(f, 'emoji')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" />
|
</template>
|
||||||
<file-input v-if="visibleCondition(f, 'file')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" />
|
<div v-for="(f, i) in form.fields" v-bind:key="i">
|
||||||
<small-text v-if="visibleCondition(f, 'smalltext')" :value="f.value" />
|
<p v-if="visibleCondition(f, 'instruction')">{{ f.label }}</p>
|
||||||
<date-input v-if="visibleCondition(f, 'date')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle" />
|
<lookup-input v-if="visibleCondition(f, 'lookup')" :form="f" :model="listModel(f.list)" @change="storeValue" :help="showHelp && f.help" />
|
||||||
<number-input v-if="visibleCondition(f, 'number')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle" />
|
<checkbox-input class="mb-3" v-if="visibleCondition(f, 'checkbox')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" />
|
||||||
</div>
|
<text-input v-if="visibleCondition(f, 'text')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle" :disabled="f.disabled"/>
|
||||||
<template v-slot:modal-footer>
|
<choice-input v-if="visibleCondition(f, 'choice')" :label="f.label" :value="f.value" :field="f.field" :options="f.options" :placeholder="f.placeholder" />
|
||||||
<div class="row w-100">
|
<emoji-input v-if="visibleCondition(f, 'emoji')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" />
|
||||||
<div class="col-6 align-self-end">
|
<file-input v-if="visibleCondition(f, 'file')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" />
|
||||||
<b-form-checkbox v-if="advancedForm" sm switch v-model="show_advanced">{{ $t("Advanced") }}</b-form-checkbox>
|
<small-text v-if="visibleCondition(f, 'smalltext')" :value="f.value" />
|
||||||
</div>
|
<date-input v-if="visibleCondition(f, 'date')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle" />
|
||||||
<div class="col-auto justify-content-end">
|
<number-input v-if="visibleCondition(f, 'number')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle" />
|
||||||
<b-button class="mx-1" variant="secondary" v-on:click="cancelAction">{{ $t("Cancel") }}</b-button>
|
|
||||||
<b-button class="mx-1" variant="primary" v-on:click="doAction">{{ form.ok_label }}</b-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<template v-slot:modal-footer>
|
||||||
</b-modal>
|
<div class="row w-100">
|
||||||
|
<div class="col-6 align-self-end">
|
||||||
|
<b-form-checkbox v-if="advancedForm" sm switch v-model="show_advanced">{{ $t("Advanced") }}</b-form-checkbox>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto justify-content-end">
|
||||||
|
<b-button class="mx-1" variant="secondary" v-on:click="cancelAction">{{ $t("Cancel") }}</b-button>
|
||||||
|
<b-button class="mx-1" variant="primary" v-on:click="doAction">{{ form.ok_label }}</b-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</b-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -111,6 +120,15 @@ export default {
|
|||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
form_component() {
|
||||||
|
// TODO this leads webpack to create one .js file for each component in this folder because at runtime any one of them could be requested
|
||||||
|
// TODO this is not necessarily bad but maybe there are better options to do this
|
||||||
|
if (this.form.component !== undefined){
|
||||||
|
return () => import(/* webpackChunkName: "header-component" */ `@/components/${this.form.component}`)
|
||||||
|
}else{
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
show: function () {
|
show: function () {
|
||||||
|
|||||||
@ -97,6 +97,7 @@ export class Models {
|
|||||||
|
|
||||||
form: {
|
form: {
|
||||||
show_help: true,
|
show_help: true,
|
||||||
|
component: "FoodEditor",
|
||||||
name: {
|
name: {
|
||||||
form_field: true,
|
form_field: true,
|
||||||
type: "text",
|
type: "text",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user