From 54a5c145ccbad5e3a49f6dfac03cce6aafba4d45 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Fri, 5 May 2023 17:04:20 +0200
Subject: [PATCH] comonent in generic form trial

---
 vue/src/components/FoodEditor.vue             | 149 +++++++++---------
 .../components/Modals/GenericModalForm.vue    |  74 +++++----
 vue/src/utils/models.js                       |   1 +
 3 files changed, 125 insertions(+), 99 deletions(-)

diff --git a/vue/src/components/FoodEditor.vue b/vue/src/components/FoodEditor.vue
index e0017d564..f506c58b8 100644
--- a/vue/src/components/FoodEditor.vue
+++ b/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,86 +44,91 @@
 
 
                     <!-- 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;"
+                                    :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')">
-                        <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 :description="$t('OnHand_help')">
+                            <b-form-checkbox v-model="food.food_onhand">{{ $t('OnHand') }}</b-form-checkbox>
+                        </b-form-group>
 
-                    <b-form-group :description="$t('OnHand_help')">
-                        <b-form-checkbox v-model="food.food_onhand">{{ $t('OnHand') }}</b-form-checkbox>
-                    </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-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-group>
+                        <b-form-group :label="$t('Shopping_Category')" :description="$t('shopping_category_help')">
+                            <generic-multiselect
+                                    @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')">
-                        <generic-multiselect
-                                @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>
+                        <hr/>
+                        <!-- todo add conditions if false disable dont hide -->
+                        <b-form-group :label="$t('Substitutes')" :description="$t('substitute_help')">
+                            <generic-multiselect
+                                    @change="food.substitute = $event.val;"
+                                    :model="Models.FOOD"
+                                    :initial_selection="food.substitute"
+                                    label="name"
+                                    :multiple="false"
+                                    :placeholder="$t('Substitutes')"
+                            ></generic-multiselect>
+                        </b-form-group>
 
-                    <hr/>
-                    <!-- todo add conditions if false disable dont hide -->
-                    <b-form-group :label="$t('Substitutes')" :description="$t('substitute_help')">
-                        <generic-multiselect
-                                @change="food.substitute = $event.val;"
-                                :model="Models.FOOD"
-                                :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-checkbox v-model="food.substitute_siblings">{{
+                                    $t('substitute_siblings')
+                                }}
+                            </b-form-checkbox>
+                        </b-form-group>
 
-                    <b-form-group :description="$t('substitute_siblings_help')">
-                        <b-form-checkbox v-model="food.substitute_siblings">{{
-                                $t('substitute_siblings')
-                            }}
-                        </b-form-checkbox>
-                    </b-form-group>
+                        <b-form-group :label="$t('InheritFields')" :description="$t('InheritFields_help')">
+                            <generic-multiselect
+                                    @change="food.inherit_fields = $event.val;"
+                                    :model="Models.FOOD_INHERIT_FIELDS"
+                                    :initial_selection="food.inherit_fields"
+                                    label="name"
+                                    :multiple="false"
+                                    :placeholder="$t('InheritFields')"
+                            ></generic-multiselect>
+                        </b-form-group>
 
-                    <b-form-group :label="$t('InheritFields')" :description="$t('InheritFields_help')">
-                        <generic-multiselect
-                                @change="food.inherit_fields = $event.val;"
-                                :model="Models.FOOD_INHERIT_FIELDS"
-                                :initial_selection="food.inherit_fields"
-                                label="name"
-                                :multiple="false"
-                                :placeholder="$t('InheritFields')"
-                        ></generic-multiselect>
-                    </b-form-group>
+                        <b-form-group :label="$t('ChildInheritFields')" :description="$t('ChildInheritFields_help')">
+                            <generic-multiselect
+                                    @change="food.child_inherit_fields = $event.val;"
+                                    :model="Models.FOOD_INHERIT_FIELDS"
+                                    :initial_selection="food.child_inherit_fields"
+                                    label="name"
+                                    :multiple="false"
+                                    :placeholder="$t('ChildInheritFields')"
+                            ></generic-multiselect>
+                        </b-form-group>
 
-                    <b-form-group :label="$t('ChildInheritFields')" :description="$t('ChildInheritFields_help')">
-                        <generic-multiselect
-                                @change="food.child_inherit_fields = $event.val;"
-                                :model="Models.FOOD_INHERIT_FIELDS"
-                                :initial_selection="food.child_inherit_fields"
-                                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-collapse>
 
-                    <!-- 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-form>
diff --git a/vue/src/components/Modals/GenericModalForm.vue b/vue/src/components/Modals/GenericModalForm.vue
index 1fe68b507..4bf4b42ed 100644
--- a/vue/src/components/Modals/GenericModalForm.vue
+++ b/vue/src/components/Modals/GenericModalForm.vue
@@ -1,34 +1,43 @@
 <template>
     <div>
-        <b-modal :id="'modal_' + id" @hidden="cancelAction">
-            <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}`" />
-            </template>
-            <div v-for="(f, i) in form.fields" v-bind:key="i">
-                <p v-if="visibleCondition(f, 'instruction')">{{ f.label }}</p>
-                <lookup-input v-if="visibleCondition(f, 'lookup')" :form="f" :model="listModel(f.list)" @change="storeValue" :help="showHelp && f.help" />
-                <checkbox-input class="mb-3" v-if="visibleCondition(f, 'checkbox')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" />
-                <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"/>
-                <choice-input v-if="visibleCondition(f, 'choice')" :label="f.label" :value="f.value" :field="f.field" :options="f.options" :placeholder="f.placeholder" />
-                <emoji-input v-if="visibleCondition(f, 'emoji')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" />
-                <file-input v-if="visibleCondition(f, 'file')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" />
-                <small-text v-if="visibleCondition(f, 'smalltext')" :value="f.value" />
-                <date-input v-if="visibleCondition(f, 'date')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle" />
-				<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" />
-            </div>
-            <template v-slot:modal-footer>
-                <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>
+        <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}`" />
+                </template>
+                <div v-for="(f, i) in form.fields" v-bind:key="i">
+                    <p v-if="visibleCondition(f, 'instruction')">{{ f.label }}</p>
+                    <lookup-input v-if="visibleCondition(f, 'lookup')" :form="f" :model="listModel(f.list)" @change="storeValue" :help="showHelp && f.help" />
+                    <checkbox-input class="mb-3" v-if="visibleCondition(f, 'checkbox')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" />
+                    <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"/>
+                    <choice-input v-if="visibleCondition(f, 'choice')" :label="f.label" :value="f.value" :field="f.field" :options="f.options" :placeholder="f.placeholder" />
+                    <emoji-input v-if="visibleCondition(f, 'emoji')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" />
+                    <file-input v-if="visibleCondition(f, 'file')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" />
+                    <small-text v-if="visibleCondition(f, 'smalltext')" :value="f.value" />
+                    <date-input v-if="visibleCondition(f, 'date')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle" />
+                    <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" />
                 </div>
-            </template>
-        </b-modal>
+                <template v-slot:modal-footer>
+                    <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>
 </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 () {
diff --git a/vue/src/utils/models.js b/vue/src/utils/models.js
index 213a37874..fa494ad4e 100644
--- a/vue/src/utils/models.js
+++ b/vue/src/utils/models.js
@@ -97,6 +97,7 @@ export class Models {
 
             form: {
                 show_help: true,
+                component: "FoodEditor",
                 name: {
                     form_field: true,
                     type: "text",