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>
<div>
<b-modal :id="id" size="xl" @hidden="cancelAction">
<template v-slot:modal-title>
<div class="row" v-if="food">
<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>
</div>
</div>
</template>
<div class="row">
<div class="col-12">
@ -20,9 +27,7 @@
<!-- 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') }}</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>
@ -44,14 +49,14 @@
<!-- 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"
:initial_single_selection="food.recipe"
label="name"
:multiple="false"
:placeholder="$t('Recipe')"
@ -73,7 +78,7 @@
<generic-multiselect
@change="food.supermarket_category = $event.val;"
:model="Models.SHOPPING_CATEGORY"
:initial_selection="food.supermarket_category"
:initial_single_selection="food.supermarket_category"
label="name"
:multiple="false"
:allow_create="true"
@ -89,7 +94,7 @@
:model="Models.FOOD"
:initial_selection="food.substitute"
label="name"
:multiple="false"
:multiple="true"
:placeholder="$t('Substitutes')"
></generic-multiselect>
</b-form-group>
@ -107,35 +112,42 @@
:model="Models.FOOD_INHERIT_FIELDS"
:initial_selection="food.inherit_fields"
label="name"
:multiple="false"
:multiple="true"
:placeholder="$t('InheritFields')"
></generic-multiselect>
</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
@change="food.child_inherit_fields = $event.val;"
:model="Models.FOOD_INHERIT_FIELDS"
:initial_selection="food.child_inherit_fields"
:initial_sselection="food.child_inherit_fields"
label="name"
:multiple="false"
:multiple="true"
: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-checkbox v-model="food.reset_inherit">{{
$t('reset_children')
}}
</b-form-checkbox>
</b-form-group>
</b-collapse>
<b-button variant="primary" @click="updateFood">{{ $t('Save') }}</b-button>
</b-form>
</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>
</template>
@ -147,7 +159,7 @@ import {BootstrapVue} from "bootstrap-vue"
import "bootstrap-vue/dist/bootstrap-vue.css"
import {ApiApiFactory} from "@/utils/openapi/api";
import GenericMultiselect from "@/components/GenericMultiselect.vue";
import {ApiMixin, StandardToasts} from "@/utils/utils";
import {ApiMixin, formFunctions, getForm, StandardToasts} from "@/utils/utils";
Vue.use(BootstrapVue)
@ -159,6 +171,22 @@ export default {
components: {
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() {
return {
food: undefined,
@ -166,6 +194,7 @@ export default {
}
},
mounted() {
this.$bvModal.show(this.id)
this.$i18n.locale = window.CUSTOM_LOCALE
let apiClient = new ApiApiFactory()
apiClient.retrieveFood('1').then((r) => {
@ -174,7 +203,7 @@ export default {
let property_types = []
let property_values = []
let p1 = apiClient.listFoodPropertyTypes().then((r) => {
let p1 = apiClient.listPropertyTypes().then((r) => {
property_types = r.data
})
@ -234,7 +263,10 @@ export default {
}
})
}
},
cancelAction: function () {
this.$emit("hidden", "")
},
},
}
</script>

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

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

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

@ -1,10 +1,7 @@
<template>
<div>
<template v-if="form_component !== undefined">
<b-modal :id="'modal_' + id" @hidden="cancelAction" size="xl">
<component :is="form_component"></component>
</b-modal>
<component :is="form_component" :id="'modal_' + id" :show="show" @hidden="cancelAction"></component>
</template>
<template v-else>
<b-modal :id="'modal_' + id" @hidden="cancelAction" size="lg">
@ -43,13 +40,13 @@
<script>
import Vue from "vue"
import { BootstrapVue } from "bootstrap-vue"
import { getForm, formFunctions } from "@/utils/utils"
import {BootstrapVue} from "bootstrap-vue"
import {getForm, formFunctions} from "@/utils/utils"
Vue.use(BootstrapVue)
import { ApiApiFactory } from "@/utils/openapi/api"
import { ApiMixin, StandardToasts, ToastMixin, getUserPreference } from "@/utils/utils"
import {ApiApiFactory} from "@/utils/openapi/api"
import {ApiMixin, StandardToasts, ToastMixin, getUserPreference} from "@/utils/utils"
import CheckboxInput from "@/components/Modals/CheckboxInput"
import LookupInput from "@/components/Modals/LookupInput"
import TextInput from "@/components/Modals/TextInput"
@ -63,10 +60,21 @@ import NumberInput from "@/components/Modals/NumberInput.vue";
export default {
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],
props: {
model: { required: true, type: Object },
model: {required: true, type: Object},
action: {
type: Object,
default() {
@ -85,7 +93,7 @@ export default {
return {}
},
},
show: { required: true, type: Boolean, default: false },
show: {required: true, type: Boolean, default: false},
},
data() {
return {
@ -123,9 +131,9 @@ export default {
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){
if (this.form.component !== undefined) {
return () => import(/* webpackChunkName: "header-component" */ `@/components/${this.form.component}`)
}else{
} else {
return undefined
}
},
@ -192,16 +200,16 @@ export default {
return form
},
delete: function () {
this.genericAPI(this.model, this.Actions.DELETE, { id: this.item1.id })
this.genericAPI(this.model, this.Actions.DELETE, {id: this.item1.id})
.then((result) => {
this.$emit("finish-action")
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_DELETE)
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
})
.catch((err) => {
if (err.response.status === 403){
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE_PROTECTED, err)
}else {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_DELETE, err)
if (err.response.status === 403) {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE_PROTECTED, err)
} else {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
}
this.$emit("finish-action", "cancel")
})
@ -211,22 +219,22 @@ export default {
// if there is no item id assume it's a new item
this.genericAPI(this.model, this.Actions.CREATE, this.form_data)
.then((result) => {
this.$emit("finish-action", { item: result.data })
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE)
this.$emit("finish-action", {item: result.data})
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
})
.catch((err) => {
console.log(err)
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_CREATE)
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE)
this.$emit("finish-action", "cancel")
})
} else {
this.genericAPI(this.model, this.Actions.UPDATE, this.form_data)
.then((result) => {
this.$emit("finish-action", { item: result.data })
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_UPDATE)
this.$emit("finish-action", {item: result.data})
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
})
.catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_UPDATE, err)
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
this.$emit("finish-action", "cancel")
})
}
@ -242,13 +250,13 @@ export default {
this.$emit("finish-action", "cancel")
return
}
this.genericAPI(this.model, this.Actions.MOVE, { source: this.item1.id, target: this.form_data.target.id })
this.genericAPI(this.model, this.Actions.MOVE, {source: this.item1.id, target: this.form_data.target.id})
.then((result) => {
this.$emit("finish-action", { target: this.form_data.target.id })
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_MOVE)
this.$emit("finish-action", {target: this.form_data.target.id})
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_MOVE)
})
.catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_MOVE, err)
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_MOVE, err)
this.$emit("finish-action", "cancel")
})
},
@ -268,11 +276,14 @@ export default {
target: this.form_data.target.id,
})
.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
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_MERGE)
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)
})
.catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_MERGE, err)
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_MERGE, err)
this.$emit("finish-action", "cancel")
})