comonent in generic form trial

vue/src/components/FoodEditor.vue

@@ -20,7 +20,9 @@
 
                     <!-- 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">
                         <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>
@@ -42,9 +44,9 @@
 
 
                     <!-- Unit conversion -->
-
+                    <b-button v-b-toggle.collapse-advanced class="m-1">{{$t('Advanced')}}</b-button>
                     <!-- 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;"
@@ -61,7 +63,10 @@
                         </b-form-group>
 
                         <b-form-group :description="$t('ignore_shopping_help')">
-                        <b-form-checkbox v-model="food.ignore_shopping">{{ $t('Ignore_Shopping') }}</b-form-checkbox>
+                            <b-form-checkbox v-model="food.ignore_shopping">{{
+                                    $t('Ignore_Shopping')
+                                }}
+                            </b-form-checkbox>
                         </b-form-group>
 
                         <b-form-group :label="$t('Shopping_Category')" :description="$t('shopping_category_help')">
@@ -122,6 +127,8 @@
                         <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-collapse>
+
 
                     <b-button variant="primary" @click="updateFood">{{ $t('Save') }}</b-button>
                 </b-form>

vue/src/components/Modals/GenericModalForm.vue

@@ -1,6 +1,13 @@
 <template>
     <div>
-        <b-modal :id="'modal_' + id" @hidden="cancelAction">
+        <template v-if="form_component !== undefined">
+            <b-modal :id="'modal_' + id" @hidden="cancelAction" size="xl">
+                <component :is="form_component"></component>
+            </b-modal>
+
+        </template>
+        <template v-else>
+            <b-modal :id="'modal_' + id" @hidden="cancelAction" size="lg">
                 <template v-slot:modal-title>
                     <h4 class="d-inline">{{ form.title }}</h4>
                     <help-badge v-if="form.show_help" @show="show_help = true" @hide="show_help = false" :component="`GenericModal${form.title}`" />
@@ -29,6 +36,8 @@
                     </div>
                 </template>
             </b-modal>
+        </template>
+
     </div>
 </template>
 
@@ -111,6 +120,15 @@ export default {
                 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: {
         show: function () {

vue/src/utils/models.js

@@ -97,6 +97,7 @@ export class Models {
 
             form: {
                 show_help: true,
+                component: "FoodEditor",
                 name: {
                     form_field: true,
                     type: "text",