recipes/vue3/src/components/model_editors/UnitConversionEditor.vue

<template>
    <model-editor-base
        :loading="loading"
        :dialog="dialog"
        @save="saveObject"
        @delete="deleteObject"
        @close="emit('close')"
        :is-update="isUpdate()"
        :model-class="modelClass"
        :object-name="editingObjName()">
        <v-card-text>
            <v-form>
                <v-row>
                    <v-col>
                        <model-select model="Food" v-model="editingObj.food" :label="$t('Food')"></model-select>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col md="6">
                        <v-number-input :label="$t('Amount')" :step="10" v-model="editingObj.baseAmount" control-variant="stacked"></v-number-input>
                    </v-col>
                    <v-col md="6">
                        <!-- TODO fix card overflow invisible, overflow-visible class is not working -->
                        <model-select :label="$t('Unit')" v-model="editingObj.baseUnit" model="Unit"></model-select>
                    </v-col>
                </v-row>
                <v-row class="mt-0">
                    <v-col class="text-center">
                        <v-icon icon="fa-solid fa-arrows-up-down"></v-icon>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col md="6">
                        <v-number-input :label="$t('Amount')" :step="10" v-model="editingObj.convertedAmount" control-variant="stacked"></v-number-input>
                    </v-col>
                    <v-col md="6">
                        <!-- TODO fix card overflow invisible, overflow-visible class is not working -->
                        <model-select :label="$t('Unit')" v-model="editingObj.convertedUnit" model="Unit"></model-select>
                    </v-col>
                </v-row>
            </v-form>
        </v-card-text>
    </model-editor-base>

</template>

<script setup lang="ts">

import {onMounted, PropType} from "vue";
import {UnitConversion} from "@/openapi";

import ModelSelect from "@/components/inputs/ModelSelect.vue";
import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";

const props = defineProps({
    item: {type: {} as PropType<UnitConversion>, required: false, default: null},
    itemId: {type: [Number, String], required: false, default: undefined},
    dialog: {type: Boolean, default: false}
})

const emit = defineEmits(['create', 'save', 'delete', 'close'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<UnitConversion>('UnitConversion', emit)


onMounted(() => {
    setupState(props.item, props.itemId)
})

</script>

<style scoped>

</style>