property editor

vue3/src/components/display/PropertyView.vue

@@ -0,0 +1,34 @@
+<template>
+{{hasFoodProperties}}
+{{hasRecipeProperties}}
+</template>
+
+<script setup lang="ts">
+
+import {computed, PropType} from "vue";
+import {Recipe} from "@/openapi";
+
+const props = defineProps({
+    recipe: {type: {} as PropType<Recipe>, required: true}
+})
+
+const hasRecipeProperties = computed(() => {
+    return props.recipe.properties != undefined && props.recipe.properties.length > 0
+})
+
+const hasFoodProperties = computed(() => {
+    let propertiesFound = false
+    for (const [key, fp] of Object.entries(props.recipe.foodProperties)) {
+        if (fp.total_value !== 0) {
+            propertiesFound = true
+        }
+    }
+    return propertiesFound
+})
+
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/display/RecipeView.vue

@@ -72,10 +72,16 @@
             </v-card>
         </template>
 
-
         <v-expansion-panels class="mt-2">
+             <v-expansion-panel>
+                <v-expansion-panel-title><v-icon icon="$properties" class="me-2"></v-icon> {{ $t('Properties') }}</v-expansion-panel-title>
+                <v-expansion-panel-text>
+                    <property-view :recipe="recipe"></property-view>
+                </v-expansion-panel-text>
+            </v-expansion-panel>
+
             <v-expansion-panel>
-                <v-expansion-panel-title><i class="fa-solid fa-circle-info me-2"></i> {{ $t('Information') }}</v-expansion-panel-title>
+                <v-expansion-panel-title><v-icon icon="fa-solid fa-circle-info" class="me-2"></v-icon> {{ $t('Information') }}</v-expansion-panel-title>
                 <v-expansion-panel-text>
                     <v-row>
                         <v-col cols="12" md="3">
@@ -116,8 +122,11 @@
                 </v-expansion-panel-text>
             </v-expansion-panel>
 
+
         </v-expansion-panels>
 
+
+
         <recipe-activity :recipe="recipe"></recipe-activity>
     </template>
 </template>
@@ -137,6 +146,7 @@ import {useWakeLock} from "@vueuse/core";
 import StepView from "@/components/display/StepView.vue";
 import IngredientsTable from "@/components/display/IngredientsTable.vue";
 import {DateTime} from "luxon";
+import PropertyView from "@/components/display/PropertyView.vue";
 
 const {request, release} = useWakeLock()
 

vue3/src/components/inputs/ModelSelect.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- TODO label is not showing for some reason, for now in placeholder -->
-    <v-input :hint="props.hint" persistent-hint :label="props.label">
+    <v-input :hint="props.hint" persistent-hint :label="props.label" :hide-details="props.hideDetails">
         <template #prepend  v-if="$slots.prepend">
             <slot name="prepend"></slot>
         </template>
@@ -73,13 +73,14 @@ const props = defineProps({
     object: {type: Boolean, default: true},
 
     allowCreate: {type: Boolean, default: false},
-
     placeholder: {type: String, default: undefined},
+
     noOptionsText: {type: String, default: undefined},
     noResultsText: {type: String, default: undefined},
-
     label: {type: String, default: ''},
+
     hint: {type: String, default: ''},
+    hideDetails: {type: Boolean, default: false},
     density: {type: String as PropType<'' | 'compact' | 'comfortable'>, default: ''},
 
     searchOnLoad: {type: Boolean, default: false},

vue3/src/components/inputs/RecipeContextMenu.vue

@@ -1,25 +1,28 @@
 <template>
     <v-btn v-bind="props" icon="fa-solid fa-ellipsis-v" variant="plain" :size="props.size">
         <v-icon icon="fa-solid fa-ellipsis-v"></v-icon>
-            <v-menu  activator="parent" close-on-content-click>
-                <v-list density="compact" class="pt-1 pb-1">
-                    <v-list-item :to="{ name: 'ModelEditPage', params: {model: 'recipe', id: recipe.id} }" prepend-icon="$edit">
-                        {{ $t('Edit') }}
-                    </v-list-item>
-                    <v-list-item prepend-icon="$mealplan" link>
-                        {{ $t('Add_to_Plan') }}
-                        <model-edit-dialog model="MealPlan" :itemDefaults="{recipe: recipe}"></model-edit-dialog>
-                    </v-list-item>
-                    <v-list-item prepend-icon="$shopping" link>
-                        {{ $t('Add_to_Shopping') }}
-                        <add-to-shopping-dialog :recipe="props.recipe"></add-to-shopping-dialog>
-                    </v-list-item>
-                    <v-list-item prepend-icon="fa-solid fa-share-nodes" link>
-                        {{ $t('Share') }}
-                        <recipe-share-dialog :recipe="props.recipe"></recipe-share-dialog>
-                    </v-list-item>
-                </v-list>
-            </v-menu>
+        <v-menu activator="parent" close-on-content-click>
+            <v-list density="compact" class="pt-1 pb-1">
+                <v-list-item :to="{ name: 'ModelEditPage', params: {model: 'recipe', id: recipe.id} }" prepend-icon="$edit">
+                    {{ $t('Edit') }}
+                </v-list-item>
+                <v-list-item prepend-icon="$mealplan" link>
+                    {{ $t('Add_to_Plan') }}
+                    <model-edit-dialog model="MealPlan" :itemDefaults="{recipe: recipe}"></model-edit-dialog>
+                </v-list-item>
+                <v-list-item prepend-icon="$shopping" link>
+                    {{ $t('Add_to_Shopping') }}
+                    <add-to-shopping-dialog :recipe="props.recipe"></add-to-shopping-dialog>
+                </v-list-item>
+                <v-list-item :to="{ name: 'PropertyEditorPage', query: {recipe: recipe.id} }" prepend-icon="fa-solid fa-table" link>
+                    {{ $t('Property_Editor') }}
+                </v-list-item>
+                <v-list-item prepend-icon="fa-solid fa-share-nodes" link>
+                    {{ $t('Share') }}
+                    <recipe-share-dialog :recipe="props.recipe"></recipe-share-dialog>
+                </v-list-item>
+            </v-list>
+        </v-menu>
     </v-btn>
 
 

vue3/src/components/model_editors/PropertyTypeEditor.vue

@@ -15,7 +15,7 @@
                 <v-text-field :label="$t('Name')" v-model="editingObj.name"></v-text-field>
                 <v-textarea :label="$t('Description')" v-model="editingObj.description"></v-textarea>
                 <v-text-field :label="$t('Unit')" v-model="editingObj.unit"></v-text-field>
-                <v-text-field :label="$t('FDC_ID')" :hint="$t('property_type_fdc_hint')" v-model="editingObj.fdcId"></v-text-field>
+                <v-autocomplete :label="$t('FDC_ID')" :hint="$t('property_type_fdc_hint')" v-model="editingObj.fdcId" :items="FDC_PROPERTY_TYPES" item-title="text"></v-autocomplete>
                 <v-number-input :label="$t('Order')" :step="10" v-model="editingObj.order" :hint="$t('OrderInformation')" control-variant="stacked"></v-number-input>
                 <v-text-field :label="$t('Open_Data_Slug')" :hint="$t('open_data_help_text')" persistent-hint v-model="editingObj.openDataSlug" disabled></v-text-field>
 
@@ -27,11 +27,12 @@
 
 <script setup lang="ts">
 
-import {onMounted, PropType} from "vue";
+import {onMounted, PropType, ref} from "vue";
 import {PropertyType} from "@/openapi";
 import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
 import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
 import {VNumberInput} from "vuetify/labs/VNumberInput";
+import {FDC_PROPERTY_TYPES} from "@/utils/fdc";
 
 const props = defineProps({
     item: {type: {} as PropType<PropertyType>, required: false, default: null},
@@ -41,7 +42,17 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
-const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, editingObjChanged, modelClass} = useModelEditorFunctions<PropertyType>('PropertyType', emit)
+const {
+    setupState,
+    deleteObject,
+    saveObject,
+    isUpdate,
+    editingObjName,
+    loading,
+    editingObj,
+    editingObjChanged,
+    modelClass
+} = useModelEditorFunctions<PropertyType>('PropertyType', emit)
 
 // object specific data (for selects/display)