many editor improvements (and more)

2025-12-24 02:39:20 -05:00 · 2025-01-04 17:59:56 +01:00
parent c691d6028b
commit c75d265686
40 changed files with 256 additions and 61 deletions
--- a/vue3/src/components/display/HorizontalMealPlanWindow.vue
+++ b/vue3/src/components/display/HorizontalMealPlanWindow.vue
@@ -28,7 +28,7 @@

                                </v-list-item>
                                <v-divider v-if="mealPlanGridItem.plan_entries.length > 0"></v-divider>
-                                <v-list-item v-for="p in mealPlanGridItem.plan_entries" link>
+                                <v-list-item v-for="p in mealPlanGridItem.plan_entries" :key="p.id" @click="clickMealPlan(p)" link>
                                    <template #prepend>
                                        <v-avatar :image="p.recipe.image" v-if="p.recipe?.image"></v-avatar>
                                        <v-avatar image="../../assets/recipe_no_image.svg" v-else></v-avatar>
@@ -40,7 +40,20 @@
                                    <v-list-item-subtitle>
                                        {{ p.mealType.name }}
                                    </v-list-item-subtitle>
-                                    <model-edit-dialog model="MealPlan" :item="p"></model-edit-dialog>
+                                    <model-edit-dialog model="MealPlan" :item="p" v-if="!p.recipe"></model-edit-dialog>
+                                    <template #append>
+                                        <v-btn icon variant="plain">
+                                            <v-icon icon="$menu"></v-icon>
+                                            <v-menu activator="parent">
+                                                <v-list>
+                                                    <v-list-item prepend-icon="$edit">
+                                                        {{$t('Edit')}}
+                                                        <model-edit-dialog model="MealPlan" :item="p"></model-edit-dialog>
+                                                    </v-list-item>
+                                                </v-list>
+                                            </v-menu>
+                                        </v-btn>
+                                    </template>
                                </v-list-item>

                            </v-list>
@@ -62,7 +75,9 @@ import {useMealPlanStore} from "@/stores/MealPlanStore";
 import {DateTime} from "luxon";
 import {homePageCols} from "@/utils/breakpoint_utils";
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
+import {useRouter} from "vue-router";

+const router = useRouter()
 const {name} = useDisplay()
 const loading = ref(false)

@@ -119,6 +134,12 @@ onMounted(() => {
    })
 })

+function clickMealPlan(plan: MealPlan){
+    if(plan.recipe){
+        router.push( {name: 'view_recipe', params: {id: plan.recipe.id}})
+    }
+}
+
 </script>


--- a/vue3/src/components/display/IngredientString.vue
+++ b/vue3/src/components/display/IngredientString.vue
@@ -1,7 +1,12 @@
 <template>
-    <span v-if="ingredient.amount && !Number.isNaN(ingredient.amount)">{{$n(ingredient.amount)}}</span>
-    <span class="ms-1" v-if="ingredient.unit">{{ ingredient.unit.name}}</span>
-    <span class="ms-1" v-if="ingredient.food">{{ ingredient.food.name}}</span>
+    <template v-if="ingredient.isHeader">
+        <span class="font-weight-bold">{{ ingredient.note}}</span>
+    </template>
+    <template v-else>
+        <span v-if="ingredient.amount && !Number.isNaN(ingredient.amount)">{{$n(ingredient.amount)}}</span>
+        <span class="ms-1" v-if="ingredient.unit">{{ ingredient.unit.name}}</span>
+        <span class="ms-1" v-if="ingredient.food">{{ ingredient.food.name}}</span>
+    </template>
 </template>


--- a/vue3/src/components/display/IngredientsTable.vue
+++ b/vue3/src/components/display/IngredientsTable.vue
@@ -8,20 +8,51 @@

    <!--    </v-table>-->

-    <v-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0" @click:row="handleRowClick" items-per-page="0">
-        <template v-slot:item.checked="{ item }">
-            <v-checkbox-btn v-model="item.checked" color="success"></v-checkbox-btn>
-        </template>
-        <template v-slot:item.amount="{ item }">
-            {{ item.amount * props.ingredientFactor }}
-        </template>
+<!--    <v-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0" @click:row="handleRowClick"-->
+<!--                  items-per-page="0">-->
+<!--        <template v-slot:item.checked="{ item }">-->
+<!--            <v-checkbox-btn v-model="item.checked" color="success" v-if="!item.isHeader"></v-checkbox-btn>-->
+<!--        </template>-->
+<!--        <template v-slot:item.amount="{ item }">-->
+<!--            <template v-if="item.isHeader"><p style="width: 100px"><b>{{ item.note }}</b></p></template>-->
+<!--            <template v-else>{{ item.amount * props.ingredientFactor }}</template>-->
+<!--        </template>-->

-        <template v-slot:item.note="{ item }">
-            <v-icon class="far fa-comment float-right" v-if="item.note != '' && item.note != undefined">
-                <v-tooltip activator="parent" open-on-click location="start">{{ item.note }}</v-tooltip>
-            </v-icon>
-        </template>
-    </v-data-table>
+<!--        <template v-slot:item.note="{ item }">-->
+<!--            <v-icon class="far fa-comment float-right" v-if="item.note != '' && item.note != undefined">-->
+<!--                <v-tooltip activator="parent" open-on-click location="start">{{ item.note }}</v-tooltip>-->
+<!--            </v-icon>-->
+<!--        </template>-->
+<!--    </v-data-table>-->
+
+    <v-table density="compact">
+        <tbody>
+
+        <tr v-for="i in ingredients" :key="i.id" @click="i.checked = !i.checked">
+            <template v-if="i.isHeader">
+                <td colspan="5" class="font-weight-bold">{{ i.note }}</td>
+            </template>
+            <template v-else>
+                <td style="width: 1%; text-wrap: nowrap" class="pa-0">
+                    <v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
+                </td>
+                <td style="width: 1%; text-wrap: nowrap" class="pr-1">{{ i.amount * props.ingredientFactor }}</td>
+                <td style="width: 1%; text-wrap: nowrap" class="pr-1">
+                    <template v-if="i.unit"> {{ i.unit.name }}</template>
+                </td>
+                <td>
+                    <template v-if="i.food"> {{ i.food.name }}</template>
+                </td>
+
+                <td style="width: 1%; text-wrap: nowrap">
+                    <v-icon class="far fa-comment float-right" v-if="i.note != '' && i.note != undefined">
+                        <v-tooltip activator="parent" open-on-click location="start">{{ i.note }}</v-tooltip>
+                    </v-icon>
+                </td>
+            </template>
+        </tr>
+        </tbody>
+    </v-table>

 </template>

--- a/vue3/src/components/inputs/ModelSelect.vue
+++ b/vue3/src/components/inputs/ModelSelect.vue
@@ -1,11 +1,8 @@
 <template>
    <!-- TODO label is not showing for some reason, for now in placeholder -->
-    <!-- TODO support density prop -->
    <v-input :hint="props.hint" persistent-hint :label="props.label">
        <template #prepend>
-            <slot name="prepend">
-
-            </slot>
+            <slot name="prepend"></slot>
        </template>
        <!-- TODO resolve-on-load false for now, race condition with model class, make prop once better solution is found -->
        <Multiselect
@@ -160,7 +157,8 @@ async function createObject(object: any, select$: Multiselect) {
 </script>

 <style src="@vueform/multiselect/themes/default.css"></style>
-<style scoped>
+<!-- style can't be scoped (for whatever reason) -->
+<style>
 .material-multiselect {
    --ms-bg: rgba(210, 210, 210, 0.1);
    --ms-border-color: 0;
--- a/vue3/src/components/inputs/StepEditor.vue
+++ b/vue3/src/components/inputs/StepEditor.vue
@@ -5,7 +5,7 @@
    <v-card variant="outlined">
        <template #title>
            <v-card-title>
-                <v-chip color="primary">{{ props.stepIndex + 1 }}</v-chip>
+                <v-chip color="primary">{{$t('Step')}} {{ props.stepIndex + 1 }}</v-chip>
                {{ step.name }}
            </v-card-title>
        </template>
@@ -54,18 +54,21 @@
                    <vue-draggable v-model="step.ingredients" handle=".drag-handle" :on-sort="sortIngredients" v-if="!mobile">
                        <v-row v-for="(ingredient, index) in step.ingredients" dense>
                            <v-col cols="2">
-                                <v-number-input :id="`id_input_amount_${step.id}_${index}`" :label="$t('Amount')" v-model="ingredient.amount" inset control-variant="stacked"
-                                                hide-details
-                                                :min="0"></v-number-input>
+                                <v-text-field :id="`id_input_amount_${step.id}_${index}`" :label="$t('Amount')" type="number" v-model="ingredient.amount" density="compact" hide-details>
+
+                                    <template #prepend>
+                                         <v-icon icon="$dragHandle" class="drag-handle cursor-grab"></v-icon>
+                                    </template>
+                                </v-text-field>
                            </v-col>
                            <v-col cols="3">
-                                <model-select model="Unit" v-model="ingredient.unit" allow-create hide-details></model-select>
+                                <model-select model="Unit" v-model="ingredient.unit" density="compact" allow-create hide-details></model-select>
                            </v-col>
                            <v-col cols="3">
-                                <model-select model="Food" v-model="ingredient.food" allow-create hide-details></model-select>
+                                <model-select model="Food" v-model="ingredient.food" density="compact" allow-create hide-details></model-select>
                            </v-col>
                            <v-col cols="3" @keydown.tab="event => handleIngredientNoteTab(event, index)">
-                                <v-text-field :label="$t('Note')" v-model="ingredient.note" hide-details></v-text-field>
+                                <v-text-field :label="$t('Note')" v-model="ingredient.note" density="compact" hide-details></v-text-field>
                            </v-col>
                            <v-col cols="1">
                                <v-btn variant="plain" icon>
@@ -76,7 +79,7 @@
                                        </v-list>
                                    </v-menu>
                                </v-btn>
-                                <v-icon icon="$dragHandle" class="drag-handle"></v-icon>
+
                            </v-col>
                        </v-row>
                    </vue-draggable>
@@ -152,10 +155,21 @@
            <v-card-text>
                <v-form>
                    <v-number-input v-model="step.ingredients[editingIngredientIndex].amount" inset control-variant="stacked" autofocus :label="$t('Amount')"
-                                    :min="0"></v-number-input>
-                    <model-select model="Unit" v-model="step.ingredients[editingIngredientIndex].unit" :label="$t('Unit')" allow-create></model-select>
-                    <model-select model="Food" v-model="step.ingredients[editingIngredientIndex].food" :label="$t('Food')" allow-create></model-select>
-                    <v-text-field :label="$t('Note')" v-model="step.ingredients[editingIngredientIndex].note"></v-text-field>
+                                    :min="0" v-if="!step.ingredients[editingIngredientIndex].isHeader"></v-number-input>
+                    <model-select model="Unit" v-model="step.ingredients[editingIngredientIndex].unit" :label="$t('Unit')" v-if="!step.ingredients[editingIngredientIndex].isHeader"
+                                  allow-create></model-select>
+                    <model-select model="Food" v-model="step.ingredients[editingIngredientIndex].food" :label="$t('Food')" v-if="!step.ingredients[editingIngredientIndex].isHeader"
+                                  allow-create></model-select>
+                    <v-text-field :label="(step.ingredients[editingIngredientIndex].isHeader) ?$t('Headline')  : $t('Note')"
+                                  v-model="step.ingredients[editingIngredientIndex].note"></v-text-field>
+
+                    <v-checkbox
+                        v-model="step.ingredients[editingIngredientIndex].isHeader"
+                        :label="$t('Headline')"
+                        :hint="$t('HeaderWarning')"
+                        persistent-hint
+                        @update:modelValue="step.ingredients[editingIngredientIndex].unit = null; step.ingredients[editingIngredientIndex].food = null; step.ingredients[editingIngredientIndex].amount = 0"
+                    ></v-checkbox>
                </v-form>
            </v-card-text>
            <v-card-actions>
@@ -169,8 +183,8 @@
 </template>

 <script setup lang="ts">
-import {nextTick, ref, useTemplateRef} from 'vue'
-import {ApiApi, Ingredient, ParsedIngredient, Step} from "@/openapi";
+import {nextTick, onMounted, ref} from 'vue'
+import {ApiApi, Ingredient, ParsedIngredient, Step, Unit} from "@/openapi";
 import StepMarkdownEditor from "@/components/inputs/StepMarkdownEditor.vue";
 import {VNumberInput} from 'vuetify/labs/VNumberInput'
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
@@ -178,6 +192,8 @@ import {useDisplay} from "vuetify";
 import {VueDraggable} from "vue-draggable-plus";
 import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
 import IngredientString from "@/components/display/IngredientString.vue";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";

 const emit = defineEmits(['delete'])

@@ -199,7 +215,24 @@ const dialogIngredientParser = ref(false)

 const editingIngredientIndex = ref(Number)
 const ingredientTextInput = ref("")
-const ingredientDialogAmountRef = useTemplateRef('ref_input_amount_dialog')
+
+const defaultUnit = ref<null | Unit>(null)
+
+onMounted(() => {
+    let api = new ApiApi()
+
+    if (useUserPreferenceStore().userSettings.defaultUnit) {
+        api.apiUnitList({query: useUserPreferenceStore().userSettings.defaultUnit}).then(r => {
+            r.results.forEach(u => {
+                if (u.name == useUserPreferenceStore().userSettings.defaultUnit) {
+                    defaultUnit.value = u
+                }
+            })
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+        })
+    }
+})

 /**
 * sort function called by draggable when ingredient table is sorted
@@ -252,7 +285,13 @@ function handleIngredientNoteTab(event: KeyboardEvent, index: number) {
 * insert a new ingredient and focus its first input
 */
 function insertAndFocusIngredient() {
-    step.value.ingredients.push({} as Ingredient)
+    let ingredient = {} as Ingredient
+
+    if (defaultUnit.value != null) {
+        ingredient.unit = defaultUnit.value
+    }
+
+    step.value.ingredients.push(ingredient)
    nextTick(() => {
        if (mobile.value) {
            editingIngredientIndex.value = step.value.ingredients.length - 1
--- a/vue3/src/components/inputs/StepMarkdownEditor.vue
+++ b/vue3/src/components/inputs/StepMarkdownEditor.vue
@@ -1,27 +1,62 @@
 <template>
-    <mavon-editor v-model="steep.instruction" :autofocus="false"
-                  style="z-index: auto" :id="'id_instruction_' + steep.id"
+    <mavon-editor v-model="step.instruction" :autofocus="false"
+                  style="z-index: auto" :id="'id_instruction_' + step.id"
                  :language="'en'"
                  :toolbars="md_editor_toolbars" :defaultOpen="'edit'">
        <template #left-toolbar-after>
            <span class="op-icon-divider"></span>
            <button
                type="button"
-                @click="steep.instruction+= ' {{ scale(100) }}'"
+                @click="step.instruction+= ' {{ scale(100) }}'"
                class="op-icon fas fa-calculator"
                aria-hidden="true"
                :title="$t('ScalableNumber')"
            ></button>
+            <button class="op-icon fa-solid fa-code">
+                <v-menu activator="parent">
+                    <v-list density="compact">
+
+                        <v-list-item
+                            v-for="template in templates"
+                            @click="step.instruction+= template.template"
+                        >
+                            <ingredient-string :ingredient="template.ingredient"></ingredient-string>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+            </button>
        </template>
    </mavon-editor>
 </template>

 <script setup lang="ts">

-import {Step} from "@/openapi";
+import {Ingredient, Step} from "@/openapi";
 import 'mavon-editor/dist/css/index.css'
+import IngredientString from "@/components/display/IngredientString.vue";
+import {computed} from "vue";

-const steep = defineModel<Step>({required: true})
+const step = defineModel<Step>({required: true})
+
+type IngredientTemplate = {
+    name: string,
+    ingredient: Ingredient,
+    template: string,
+}
+
+const templates = computed(() => {
+    let templateList: IngredientTemplate[] = []
+    step.value.ingredients.forEach((ingredient, index) => {
+        if (!ingredient.isHeader && ingredient.food != null)
+            templateList.push({
+                name: ingredient.food.name,
+                ingredient: ingredient,
+                template: `{{ ingredients[${index}] }}{# ${ingredient.food.name} #}`
+            } as IngredientTemplate)
+    })
+
+    return templateList
+})

 const md_editor_toolbars = {
    bold: true,
--- a/vue3/src/components/model_editors/RecipeEditor.vue
+++ b/vue3/src/components/model_editors/RecipeEditor.vue
@@ -26,24 +26,25 @@
                        <v-textarea :label="$t('Description')" v-model="editingObj.description" clearable counter="512" rows="2"></v-textarea>

                        <v-row>
-                            <v-col cols="12" md="6">
+                            <v-col cols="12" md="6" >
                                <v-file-upload v-model="file" @update:modelValue="updateUserFileName"
-                                               :title="$t('DragToUpload')"
+                                               :title="(mobile) ? $t('Select_File') : $t('DragToUpload')"
                                               :browse-text="$t('Select_File')"
                                               :divider-text="$t('or')"
-                                ></v-file-upload>
+                                               :density="(mobile) ? 'compact' : 'comfortable'"
+                                >
+                                </v-file-upload>
                            </v-col>
-                            <v-col cols="12" md="6">
-                                <v-label>{{ $t('Image') }}</v-label>
-                                <v-img style="max-height: 150px" class="mb-2" :src="editingObj.image">
-                                    <v-btn color="delete" class="float-right" prepend-icon="$delete" v-if="editingObj.image" @click="deleteImage()">{{ $t('Delete') }}</v-btn>
+                            <v-col cols="12" md="6" v-if="editingObj.image">
+                                <v-img style="max-height: 180px" cover class="mb-2" :src="editingObj.image">
+                                    <v-btn color="delete" class="float-right mt-2 mr-2" prepend-icon="$delete" v-if="editingObj.image" @click="deleteImage()">{{ $t('Delete') }}</v-btn>
                                </v-img>
                            </v-col>
                        </v-row>

                        <v-label>{{ $t('Keywords') }}</v-label>
-                        <ModelSelect mode="tags" v-model="editingObj.keywords" model="Keyword"></ModelSelect>
-                        <v-row>
+                        <model-select mode="tags" v-model="editingObj.keywords" model="Keyword" allow-create></model-select>
+                        <v-row dense>
                            <v-col cols="12" md="6">
                                <v-text-field :label="$t('WaitingTime')" v-model="editingObj.waitingTime"></v-text-field>
                            </v-col>
@@ -95,8 +96,8 @@

                        <v-text-field :label="$t('Imported_From')" v-model="editingObj.sourceUrl"></v-text-field>
                        <v-checkbox :label="$t('Private_Recipe')" :hint="$t('Private_Recipe_Help')" persistent-hint v-model="editingObj._private"></v-checkbox>
-                        <ModelSelect mode="tags" model="User" :label="$t('Private_Recipe')" :hint="$t('Private_Recipe_Help')" persistent-hint v-model="editingObj.shared"
-                                     append-to-body></ModelSelect>
+                        <model-select mode="tags" model="User" :label="$t('Private_Recipe')" :hint="$t('Private_Recipe_Help')" persistent-hint v-model="editingObj.shared"
+                                     append-to-body></model-select>

                    </v-form>
                </v-tabs-window-item>
@@ -137,6 +138,7 @@ import PropertiesEditor from "@/components/inputs/PropertiesEditor.vue";
 import {useFileApi} from "@/composables/useFileApi";
 import {VFileUpload} from 'vuetify/labs/VFileUpload'
 import ClosableHelpAlert from "@/components/display/ClosableHelpAlert.vue";
+import {useDisplay} from "vuetify";


 const props = defineProps({
@@ -149,6 +151,8 @@ const emit = defineEmits(['create', 'save', 'delete', 'close'])
 const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<Recipe>('Recipe', emit)

 // object specific data (for selects/display)
+const {mobile} = useDisplay()
+
 const tab = ref("recipe")
 const dialogStepManager = ref(false)

@@ -190,7 +194,7 @@ function deleteImage() {
 /**
 * add a new step to the recipe
 */
-function addStep(){
+function addStep() {
    editingObj.value.steps.push({
        ingredients: [] as Ingredient[],
        time: 0,
@@ -210,7 +214,7 @@ function sortSteps() {
 * delete a step at the given index of the steps array of the editingObject
 * @param index index to delete at
 */
-function deleteStepAtIndex(index: number){
+function deleteStepAtIndex(index: number) {
    editingObj.value.steps.splice(index, 1)
 }

--- a/vue3/src/locales/ar.json
+++ b/vue3/src/locales/ar.json
@@ -119,6 +119,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "",
  "Hide_Keyword": "",
  "Hide_Keywords": "",
--- a/vue3/src/locales/bg.json
+++ b/vue3/src/locales/bg.json
@@ -116,6 +116,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Групирай по",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Скриване на храна",
  "Hide_Keyword": "Скриване на ключови думи",
  "Hide_Keywords": "Скриване на ключова дума",
--- a/vue3/src/locales/ca.json
+++ b/vue3/src/locales/ca.json
@@ -159,6 +159,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "",
  "Hide_Keyword": "",
  "Hide_Keywords": "Amagueu paraula clau",
--- a/vue3/src/locales/cs.json
+++ b/vue3/src/locales/cs.json
@@ -159,6 +159,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Seskupit podle",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Skrýt potravinu",
  "Hide_Keyword": "Skrýt štítky",
  "Hide_Keywords": "Skrýt štítek",
--- a/vue3/src/locales/da.json
+++ b/vue3/src/locales/da.json
@@ -147,6 +147,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Grupper efter",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Skjul mad",
  "Hide_Keyword": "Skjul nøgleord",
  "Hide_Keywords": "Skjul nøgleord",
--- a/vue3/src/locales/de.json
+++ b/vue3/src/locales/de.json
@@ -118,7 +118,7 @@
  "Disabled": "Deaktiviert",
  "Documentation": "Dokumentation",
  "Download": "Herunterladen",
-  "DragToUpload": "Datei per Drag & Drop hinzufügen",
+  "DragToUpload": "Drag & Drop oder Klicken zum Auswählen",
  "Drag_Here_To_Delete": "Hierher ziehen zum Löschen",
  "Duplicate": "Duplikat",
  "DuplicateFoundInfo": "Ein Rezept mit dieser URL wurde bereits in deinem Space gefunden. Trotzdem fortfahren?",
@@ -161,6 +161,8 @@
  "Friday": "Freitag",
  "GettingStarted": "Erste Schritte",
  "GroupBy": "Gruppieren nach",
+  "HeaderWarning": "Achtung: Durch ändern auf Überschrift werden Menge/Einheit/Lebensmittel gelöscht",
+  "Headline": "Überschrift",
  "Hide_Food": "Lebensmittel verbergen",
  "Hide_Keyword": "Schlüsselwörter verbergen",
  "Hide_Keywords": "Schlagwort verstecken",
--- a/vue3/src/locales/el.json
+++ b/vue3/src/locales/el.json
@@ -142,6 +142,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Ομαδοποίηση κατά",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Απόκρυψη φαγητού",
  "Hide_Keyword": "Απόκρυψη λέξεων-κλειδί",
  "Hide_Keywords": "Απόκρυψη λέξης-κλειδί",
--- a/vue3/src/locales/en.json
+++ b/vue3/src/locales/en.json
@@ -117,7 +117,7 @@
  "Disabled": "Disabled",
  "Documentation": "Documentation",
  "Download": "Download",
-  "DragToUpload": "Drag and Drop files here",
+  "DragToUpload": "Drag and Drop or click to select",
  "Drag_Here_To_Delete": "Drag here to delete",
  "Duplicate": "Duplicate",
  "DuplicateFoundInfo": "A recipe with this URL was already found in your space. Continue anyway?",
@@ -160,6 +160,8 @@
  "Friday": "Friday",
  "GettingStarted": "Getting Started",
  "GroupBy": "Group By",
+  "HeaderWarning": "Warning: Changing to a Heading deletes the Amount/Unit/Food",
+  "Headline": "Headline",
  "Hide_Food": "Hide Food",
  "Hide_Keyword": "Hide keywords",
  "Hide_Keywords": "Hide Keyword",
--- a/vue3/src/locales/es.json
+++ b/vue3/src/locales/es.json
@@ -160,6 +160,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Agrupar por",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Esconder ingrediente",
  "Hide_Keyword": "Esconder Palabras Clave",
  "Hide_Keywords": "Esconder palabra clave",
--- a/vue3/src/locales/fi.json
+++ b/vue3/src/locales/fi.json
@@ -88,6 +88,8 @@
  "Food_Alias": "Ruoan nimimerkki",
  "Friday": "",
  "GettingStarted": "",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Piilota ruoka",
  "Hide_Keyword": "Piilota avainsana",
  "Hide_Keywords": "Piilota Avainsana",
--- a/vue3/src/locales/fr.json
+++ b/vue3/src/locales/fr.json
@@ -159,6 +159,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Grouper par",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Cacher l’aliment",
  "Hide_Keyword": "masquer les mots clefs",
  "Hide_Keywords": "Cacher le mot-clé",
--- a/vue3/src/locales/he.json
+++ b/vue3/src/locales/he.json
@@ -160,6 +160,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "אסוף לפי",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "הסתר אוכל",
  "Hide_Keyword": "הסתר מילות מפתח",
  "Hide_Keywords": "הסתרת מילת מפתח",
--- a/vue3/src/locales/hu.json
+++ b/vue3/src/locales/hu.json
@@ -143,6 +143,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Csoportosítva",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Alapanyag elrejtése",
  "Hide_Keyword": "Kulcsszavak elrejtése",
  "Hide_Keywords": "Kulcsszó elrejtése",
--- a/vue3/src/locales/hy.json
+++ b/vue3/src/locales/hy.json
@@ -67,6 +67,8 @@
  "Food": "Սննդամթերք",
  "Friday": "",
  "GettingStarted": "",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Թաքցնել սննդամթերքը",
  "Hide_Keywords": "Թաքցնել բանալի բառը",
  "Hide_Recipes": "Թաքցնել բաղադրատոմսերը",
--- a/vue3/src/locales/id.json
+++ b/vue3/src/locales/id.json
@@ -131,6 +131,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "",
  "Hide_Keyword": "",
  "Hide_Keywords": "Sembunyikan Kata Kunci",
--- a/vue3/src/locales/is.json
+++ b/vue3/src/locales/is.json
@@ -159,6 +159,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "",
  "Hide_Keyword": "",
  "Hide_Keywords": "",
--- a/vue3/src/locales/it.json
+++ b/vue3/src/locales/it.json
@@ -136,6 +136,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Raggruppa per",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Nascondi alimento",
  "Hide_Keyword": "Nascondi parole chiave",
  "Hide_Keywords": "Nascondi parola chiave",
--- a/vue3/src/locales/lt.json
+++ b/vue3/src/locales/lt.json
@@ -145,6 +145,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "",
  "Hide_Keyword": "",
  "Hide_Keywords": "Paslėpti raktažodį",
--- a/vue3/src/locales/nb_NO.json
+++ b/vue3/src/locales/nb_NO.json
@@ -140,6 +140,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Grupér",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Skjul Matrett",
  "Hide_Keyword": "Skjul nøkkelord",
  "Hide_Keywords": "Skjul nøkkelord",
--- a/vue3/src/locales/nl.json
+++ b/vue3/src/locales/nl.json
@@ -144,6 +144,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Groepeer per",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Verberg Eten",
  "Hide_Keyword": "Verberg etiketten",
  "Hide_Keywords": "Verberg Etiket",
--- a/vue3/src/locales/pl.json
+++ b/vue3/src/locales/pl.json
@@ -161,6 +161,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Grupuj według",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Ukryj żywność",
  "Hide_Keyword": "Ukryj słowa kluczowe",
  "Hide_Keywords": "Ukryj słowo kluczowe",
--- a/vue3/src/locales/pt.json
+++ b/vue3/src/locales/pt.json
@@ -118,6 +118,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Agrupar por",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Esconder comida",
  "Hide_Keyword": "",
  "Hide_Keywords": "Esconder palavra-chave",
--- a/vue3/src/locales/pt_BR.json
+++ b/vue3/src/locales/pt_BR.json
@@ -155,6 +155,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Agrupar Por",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Esconder Comida",
  "Hide_Keyword": "Oculta palavras-chave",
  "Hide_Keywords": "Esconder palavra-chave",
--- a/vue3/src/locales/ro.json
+++ b/vue3/src/locales/ro.json
@@ -138,6 +138,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Grupat de",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Ascunde mâncare",
  "Hide_Keyword": "Ascunde cuvintele cheie",
  "Hide_Keywords": "Ascunde cuvânt cheie",
--- a/vue3/src/locales/ru.json
+++ b/vue3/src/locales/ru.json
@@ -107,6 +107,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Сгруппировать по",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Скрыть еду",
  "Hide_Keyword": "Скрыть ключевые слова",
  "Hide_Keywords": "Скрыть ключевое слово",
--- a/vue3/src/locales/sl.json
+++ b/vue3/src/locales/sl.json
@@ -107,6 +107,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Združi po",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Skrij hrano",
  "Hide_Keyword": "Skrij ključne besede",
  "Hide_Keywords": "Skrij ključno besedo",
--- a/vue3/src/locales/sv.json
+++ b/vue3/src/locales/sv.json
@@ -161,6 +161,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Gruppera enligt",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Dölj livsmedel",
  "Hide_Keyword": "Dölj nyckelord",
  "Hide_Keywords": "Dölj nyckelord",
--- a/vue3/src/locales/tr.json
+++ b/vue3/src/locales/tr.json
@@ -160,6 +160,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "Gruplandırma Ölçütü",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Yiyeceği Gizle",
  "Hide_Keyword": "Anahtar kelimeleri gizle",
  "Hide_Keywords": "Anahtar Kelimeyi Gizle",
--- a/vue3/src/locales/uk.json
+++ b/vue3/src/locales/uk.json
@@ -125,6 +125,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "По Групі",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "Сховати Їжу",
  "Hide_Keyword": "",
  "Hide_Keywords": "Сховати Ключове слово",
--- a/vue3/src/locales/zh_Hans.json
+++ b/vue3/src/locales/zh_Hans.json
@@ -156,6 +156,8 @@
  "Friday": "",
  "GettingStarted": "",
  "GroupBy": "分组",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_Food": "隐藏食物",
  "Hide_Keyword": "隐藏关键词",
  "Hide_Keywords": "隐藏关键词",
--- a/vue3/src/locales/zh_Hant.json
+++ b/vue3/src/locales/zh_Hant.json
@@ -55,6 +55,8 @@
  "FinishedAt": "",
  "Friday": "",
  "GettingStarted": "",
+  "HeaderWarning": "",
+  "Headline": "",
  "Hide_as_header": "隱藏為標題",
  "History": "",
  "HostedFreeVersion": "",
--- a/vue3/src/pages/ModelListPage.vue
+++ b/vue3/src/pages/ModelListPage.vue
@@ -174,7 +174,7 @@ function loadItems(options: VDataTableUpdateOptions) {
    router.push({name: 'ModelListPage', params: {model: props.model}, query: {page: options.page}})

    useUserPreferenceStore().deviceSettings.general_tableItemsPerPage = options.itemsPerPage
-    
+
    genericModel.value.list({page: options.page, pageSize: options.itemsPerPage, query: options.search}).then((r: any) => {
        items.value = r.results
        itemCount.value = r.count
--- a/vue3/src/pages/TestPage.vue
+++ b/vue3/src/pages/TestPage.vue
@@ -36,7 +36,7 @@
    </v-row>
    <v-row class="mt-5">
        <v-col>
-
+            <model-select model="Food"></model-select>
            <v-text-field></v-text-field>
        </v-col>
        <v-col>