cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

food edit modal done

Browse Source
This commit is contained in:
vabene1111
2023-05-11 17:13:35 +02:00
parent 6030fa1d68
commit 0539e1ea15
3 changed files with 211 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
vue/src/components/FoodEditor.vue
View File

@ -1,12 +1,19 @@
<template> <template>
<div> <div>
<b-modal :id="id" size="xl" @hidden="cancelAction">
<template v-slot:modal-title>
<div class="row" v-if="food"> <div class="row" v-if="food">
<div class="col-12"> <div class="col-12">
<h2>{{ food.name }} <small class="text-muted" v-if="food.plural_name">{{ food.plural_name }}</small> <h2>{{ food.name }} <small class="text-muted" v-if="food.plural_name">{{
food.plural_name
}}</small>
</h2> </h2>
</div> </div>
</div> </div>
</template>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
@ -20,9 +27,7 @@
<!-- Food properties --> <!-- Food properties -->
<h5><i class="fas fa-database"></i> {{ $t('Properties') }} <small class="text-muted">{{ <h5><i class="fas fa-database"></i> {{ $t('Properties') }}</h5>
food.name
}}</small></h5>
<table class="table table-bordered" v-if="food_properties"> <table class="table table-bordered" v-if="food_properties">
<tr v-for="fp in food_properties" v-bind:key="fp.id"> <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> <td><input v-model="fp.property_amount" type="number"> {{ fp.property_type.unit }}</td>
@ -44,14 +49,14 @@
<!-- Unit conversion --> <!-- Unit conversion -->
<b-button v-b-toggle.collapse-advanced class="m-1">{{$t('Advanced')}}</b-button>
<!-- ADVANCED FEATURES somehow hide this stuff --> <!-- ADVANCED FEATURES somehow hide this stuff -->
<b-collapse id="collapse-advanced"> <b-collapse id="collapse-advanced">
<b-form-group :label="$t('Recipe')" :description="$t('food_recipe_help')"> <b-form-group :label="$t('Recipe')" :description="$t('food_recipe_help')">
<generic-multiselect <generic-multiselect
@change="food.recipe = $event.val;" @change="food.recipe = $event.val;"
:model="Models.RECIPE" :model="Models.RECIPE"
:initial_selection="food.recipe" :initial_single_selection="food.recipe"
label="name" label="name"
:multiple="false" :multiple="false"
:placeholder="$t('Recipe')" :placeholder="$t('Recipe')"
@ -73,7 +78,7 @@
<generic-multiselect <generic-multiselect
@change="food.supermarket_category = $event.val;" @change="food.supermarket_category = $event.val;"
:model="Models.SHOPPING_CATEGORY" :model="Models.SHOPPING_CATEGORY"
:initial_selection="food.supermarket_category" :initial_single_selection="food.supermarket_category"
label="name" label="name"
:multiple="false" :multiple="false"
:allow_create="true" :allow_create="true"
@ -89,7 +94,7 @@
:model="Models.FOOD" :model="Models.FOOD"
:initial_selection="food.substitute" :initial_selection="food.substitute"
label="name" label="name"
:multiple="false" :multiple="true"
:placeholder="$t('Substitutes')" :placeholder="$t('Substitutes')"
></generic-multiselect> ></generic-multiselect>
</b-form-group> </b-form-group>
@ -107,35 +112,42 @@
:model="Models.FOOD_INHERIT_FIELDS" :model="Models.FOOD_INHERIT_FIELDS"
:initial_selection="food.inherit_fields" :initial_selection="food.inherit_fields"
label="name" label="name"
:multiple="false" :multiple="true"
:placeholder="$t('InheritFields')" :placeholder="$t('InheritFields')"
></generic-multiselect> ></generic-multiselect>
</b-form-group> </b-form-group>
<b-form-group :label="$t('ChildInheritFields')" :description="$t('ChildInheritFields_help')"> <b-form-group :label="$t('ChildInheritFields')"
:description="$t('ChildInheritFields_help')">
<generic-multiselect <generic-multiselect
@change="food.child_inherit_fields = $event.val;" @change="food.child_inherit_fields = $event.val;"
:model="Models.FOOD_INHERIT_FIELDS" :model="Models.FOOD_INHERIT_FIELDS"
:initial_selection="food.child_inherit_fields" :initial_sselection="food.child_inherit_fields"
label="name" label="name"
:multiple="false" :multiple="true"
:placeholder="$t('ChildInheritFields')" :placeholder="$t('ChildInheritFields')"
></generic-multiselect> ></generic-multiselect>
</b-form-group> </b-form-group>
<!-- TODO change to a button --> <!-- TODO change to a button -->
<b-form-group :description="$t('reset_children_help')"> <b-form-group :description="$t('reset_children_help')">
<b-form-checkbox v-model="food.reset_inherit">{{ $t('reset_children') }}</b-form-checkbox> <b-form-checkbox v-model="food.reset_inherit">{{
$t('reset_children')
}}
</b-form-checkbox>
</b-form-group> </b-form-group>
</b-collapse> </b-collapse>
<b-button variant="primary" @click="updateFood">{{ $t('Save') }}</b-button>
</b-form> </b-form>
</div> </div>
</div> </div>
<template v-slot:modal-footer>
<b-button variant="primary" @click="updateFood">{{ $t('Save') }}</b-button>
<b-button v-b-toggle.collapse-advanced class="m-1">{{ $t('Advanced') }}</b-button>
</template>
</b-modal>
</div> </div>
</template> </template>
@ -147,7 +159,7 @@ import {BootstrapVue} from "bootstrap-vue"
import "bootstrap-vue/dist/bootstrap-vue.css" import "bootstrap-vue/dist/bootstrap-vue.css"
import {ApiApiFactory} from "@/utils/openapi/api"; import {ApiApiFactory} from "@/utils/openapi/api";
import GenericMultiselect from "@/components/GenericMultiselect.vue"; import GenericMultiselect from "@/components/GenericMultiselect.vue";
import {ApiMixin, StandardToasts} from "@/utils/utils"; import {ApiMixin, formFunctions, getForm, StandardToasts} from "@/utils/utils";
Vue.use(BootstrapVue) Vue.use(BootstrapVue)
@ -159,6 +171,22 @@ export default {
components: { components: {
GenericMultiselect GenericMultiselect
}, },
props: {
id: {type: String, default: 'id_food_edit_modal_modal'},
show: {required: true, type: Boolean, default: false},
},
watch: {
show: function () {
console.log('trigger')
if (this.show) {
console.log('show modal')
this.$bvModal.show(this.id)
} else {
console.log('show modal false')
this.$bvModal.hide(this.id)
}
},
},
data() { data() {
return { return {
food: undefined, food: undefined,
@ -166,6 +194,7 @@ export default {
} }
}, },
mounted() { mounted() {
this.$bvModal.show(this.id)
this.$i18n.locale = window.CUSTOM_LOCALE this.$i18n.locale = window.CUSTOM_LOCALE
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
apiClient.retrieveFood('1').then((r) => { apiClient.retrieveFood('1').then((r) => {
@ -174,7 +203,7 @@ export default {
let property_types = [] let property_types = []
let property_values = [] let property_values = []
let p1 = apiClient.listFoodPropertyTypes().then((r) => { let p1 = apiClient.listPropertyTypes().then((r) => {
property_types = r.data property_types = r.data
}) })
@ -234,7 +263,10 @@ export default {
} }
}) })
} },
cancelAction: function () {
this.$emit("hidden", "")
},
}, },
} }
</script> </script>

16
vue/src/components/FoodPropertyViewComponent.vue
View File

@ -2,13 +2,12 @@
<div> <div>
<div class="card p-2" v-if="recipe !== undefined"> <div class="card p-4 pb-2" v-if="recipe !== undefined">
<div class="flex-row"> <b-row>
<div class="flex-column"> <b-col>
<h5><i class="fas fa-database"></i> {{ $t('Properties') }}</h5> <h5><i class="fas fa-database"></i> {{ $t('Properties') }}</h5>
</div> </b-col>
<div class="flex-column align-content-end text-right align-text-bottom"> <b-col class="text-right">
<span v-if="!show_total">{{ $t('per_serving') }} </span> <span v-if="!show_total">{{ $t('per_serving') }} </span>
<span v-if="show_total">{{ $t('total') }} </span> <span v-if="show_total">{{ $t('total') }} </span>
@ -16,9 +15,8 @@
<i class="fas fa-toggle-on" v-if="!show_total"></i> <i class="fas fa-toggle-on" v-if="!show_total"></i>
<i class="fas fa-toggle-off" v-if="show_total"></i> <i class="fas fa-toggle-off" v-if="show_total"></i>
</a> </a>
</b-col>
</div> </b-row>
</div>
<table class="table table-bordered table-sm"> <table class="table table-bordered table-sm">

23
vue/src/components/Modals/GenericModalForm.vue
View File

@ -1,10 +1,7 @@
<template> <template>
<div> <div>
<template v-if="form_component !== undefined"> <template v-if="form_component !== undefined">
<b-modal :id="'modal_' + id" @hidden="cancelAction" size="xl"> <component :is="form_component" :id="'modal_' + id" :show="show" @hidden="cancelAction"></component>
<component :is="form_component"></component>
</b-modal>
</template> </template>
<template v-else> <template v-else>
<b-modal :id="'modal_' + id" @hidden="cancelAction" size="lg"> <b-modal :id="'modal_' + id" @hidden="cancelAction" size="lg">
@ -63,7 +60,18 @@ import NumberInput from "@/components/Modals/NumberInput.vue";
export default { export default {
name: "GenericModalForm", name: "GenericModalForm",
components: { FileInput, CheckboxInput, LookupInput, TextInput, EmojiInput, ChoiceInput, SmallText, HelpBadge,DateInput, NumberInput }, components: {
FileInput,
CheckboxInput,
LookupInput,
TextInput,
EmojiInput,
ChoiceInput,
SmallText,
HelpBadge,
DateInput,
NumberInput
},
mixins: [ApiMixin, ToastMixin], mixins: [ApiMixin, ToastMixin],
props: { props: {
model: {required: true, type: Object}, model: {required: true, type: Object},
@ -268,7 +276,10 @@ export default {
target: this.form_data.target.id, target: this.form_data.target.id,
}) })
.then((result) => { .then((result) => {
this.$emit("finish-action", { target: this.form_data.target.id, target_object: this.form_data.target }) //TODO temporary workaround to not change other apis this.$emit("finish-action", {
target: this.form_data.target.id,
target_object: this.form_data.target
}) //TODO temporary workaround to not change other apis
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_MERGE) StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_MERGE)
}) })
.catch((err) => { .catch((err) => {