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

add merge capability to ingredient editor

Browse Source
This commit is contained in:
vabene1111 2022-04-14 22:10:48 +02:00
parent 8c89438b97
commit 976bce5fdd
1 changed files with 90 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
vue/src/apps/IngredientEditorView/IngredientEditorView.vue
View File

@ -1,27 +1,43 @@
<template>
<div id="app">
<div class="row">
<div class="col-md-6">
<div class="col col-md-6">
<generic-multiselect @change="food = $event.val; refreshList()"
:model="Models.FOOD"
:initial_single_selection="food"
:multiple="false"></generic-multiselect>
<b-button @click="show_food_delete=true" :disabled="food === null"> <i class="fas fa-trash-alt"></i></b-button>
<generic-modal-form :model="Models.FOOD" :action="Actions.DELETE" :show="show_food_delete" :item1="food"
@finish-action="food = null; show_food_delete=false"/>
<b-button @click="show_food_delete=true" :disabled="food === null"><i class="fas fa-trash-alt"></i>
</b-button>
<b-button @click="generic_model = Models.FOOD; generic_action=Actions.MERGE" :disabled="food === null">
<i class="fas fa-compress-arrows-alt"></i>
</b-button>
<generic-modal-form :model="Models.FOOD" :action="generic_action" :show="generic_model === Models.FOOD" :item1="food"
@finish-action="food = null; generic_action=null; generic_model=null"/>
</div>
<div class="col-md-6">
<generic-multiselect @change="unit = $event.val; refreshList()"
<div class="col col-md-6">
<generic-multiselect
@change="unit = $event.val; refreshList()"
:model="Models.UNIT"
:initial_single_selection="unit"
:multiple="false"></generic-multiselect>
<!--TODO remove unit/Food from list when deleted -->
<b-button @click="show_unit_delete=true" :disabled="unit === null"> <i class="fas fa-trash-alt"></i></b-button>
<generic-modal-form :model="Models.UNIT" :action="Actions.DELETE" :show="show_unit_delete" :item1="unit"
@finish-action="unit = null; show_unit_delete=false"/>
<b-button @click="generic_model = Models.UNIT; generic_action=Actions.DELETE" :disabled="unit === null">
<i class="fas fa-trash-alt"></i>
</b-button>
<b-button @click="generic_model = Models.UNIT; generic_action=Actions.MERGE" :disabled="unit === null">
<i class="fas fa-compress-arrows-alt"></i>
</b-button>
<generic-modal-form :model="Models.UNIT" :action="generic_action" :show="generic_model === Models.UNIT"
:item1="unit"
@finish-action="unit = null; generic_action=null; generic_model=null"/>
</div>
</div>
<div class="row mt-2">
<div class="col col-md-12">
<table class="table table-bordered">
<thead>
<tr>
@ -32,8 +48,14 @@
<th>{{ $t('Save') }}</th>
</tr>
</thead>
<tr v-if="loading">
<td colspan="4">
<loading-spinner></loading-spinner>
</td>
</tr>
<template v-if="!loading">
<tr v-for="i in ingredients" v-bind:key="i.id">
<td style="width: 10vw">
<td style="width: 5vw">
<input type="number" class="form-control" v-model="i.amount">
</td>
<td style="width: 30vw">
@ -58,12 +80,17 @@
<input class="form-control" v-model="i.note">
</td>
<td>
<b-button variant="primary" @click="updateIngredient(i)">Save</b-button>
<td style="width: 5vw">
<b-button variant="primary" @click="updateIngredient(i)"><i class="fas fa-save"></i>
</b-button>
</td>
</tr>
</template>
</table>
</div>
</div>
</div>
@ -78,18 +105,22 @@ import {ApiMixin, StandardToasts} from "@/utils/utils"
import {ApiApiFactory} from "@/utils/openapi/api";
import GenericMultiselect from "@/components/GenericMultiselect";
import GenericModalForm from "@/components/Modals/GenericModalForm";
import LoadingSpinner from "@/components/LoadingSpinner";
Vue.use(BootstrapVue)
export default {
name: "IngredientEditorView",
mixins: [ApiMixin],
components: {GenericMultiselect, GenericModalForm},
components: {LoadingSpinner, GenericMultiselect, GenericModalForm},
data() {
return {
ingredients: [],
loading: false,
food: null,
unit: null,
generic_action: null,
generic_model: null,
show_food_delete: false,
show_unit_delete: false,
}
@ -104,6 +135,7 @@ export default {
if (this.food === null && this.unit === null) {
this.ingredients = []
} else {
this.loading = true
let apiClient = new ApiApiFactory()
let params = {'query': {'simple': 1}}
if (this.food !== null) {
@ -114,6 +146,10 @@ export default {
}
apiClient.listIngredients(params).then(result => {
this.ingredients = result.data
this.loading = false
}).catch((err) => {
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
this.loading = false
})
}
},