add merge capability to ingredient editor
This commit is contained in:
vabene1111
@ -1,69 +1,96 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col col-md-6">
|
||||||
<generic-multiselect @change="food = $event.val; refreshList()"
|
<generic-multiselect @change="food = $event.val; refreshList()"
|
||||||
:model="Models.FOOD"
|
:model="Models.FOOD"
|
||||||
:initial_single_selection="food"
|
:initial_single_selection="food"
|
||||||
:multiple="false"></generic-multiselect>
|
:multiple="false"></generic-multiselect>
|
||||||
<b-button @click="show_food_delete=true" :disabled="food === null"> <i class="fas fa-trash-alt"></i></b-button>
|
<b-button @click="show_food_delete=true" :disabled="food === null"><i class="fas fa-trash-alt"></i>
|
||||||
<generic-modal-form :model="Models.FOOD" :action="Actions.DELETE" :show="show_food_delete" :item1="food"
|
</b-button>
|
||||||
@finish-action="food = null; show_food_delete=false"/>
|
<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>
|
||||||
<div class="col-md-6">
|
<div class="col col-md-6">
|
||||||
<generic-multiselect @change="unit = $event.val; refreshList()"
|
|
||||||
:model="Models.UNIT"
|
<generic-multiselect
|
||||||
:initial_single_selection="unit"
|
@change="unit = $event.val; refreshList()"
|
||||||
:multiple="false"></generic-multiselect>
|
:model="Models.UNIT"
|
||||||
<!--TODO remove unit/Food from list when deleted -->
|
:initial_single_selection="unit"
|
||||||
<b-button @click="show_unit_delete=true" :disabled="unit === null"> <i class="fas fa-trash-alt"></i></b-button>
|
:multiple="false"></generic-multiselect>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<table class="table table-bordered">
|
<div class="row mt-2">
|
||||||
<thead>
|
<div class="col col-md-12">
|
||||||
<tr>
|
<table class="table table-bordered">
|
||||||
<th>{{$t('Amount')}}</th>
|
<thead>
|
||||||
<th>{{$t('Unit')}}</th>
|
<tr>
|
||||||
<th>{{$t('Food')}}</th>
|
<th>{{ $t('Amount') }}</th>
|
||||||
<th>{{$t('Note')}}</th>
|
<th>{{ $t('Unit') }}</th>
|
||||||
<th>{{$t('Save')}}</th>
|
<th>{{ $t('Food') }}</th>
|
||||||
</tr>
|
<th>{{ $t('Note') }}</th>
|
||||||
</thead>
|
<th>{{ $t('Save') }}</th>
|
||||||
<tr v-for="i in ingredients" v-bind:key="i.id">
|
</tr>
|
||||||
<td style="width: 10vw">
|
</thead>
|
||||||
<input type="number" class="form-control" v-model="i.amount">
|
<tr v-if="loading">
|
||||||
</td>
|
<td colspan="4">
|
||||||
<td style="width: 30vw">
|
<loading-spinner></loading-spinner>
|
||||||
<generic-multiselect @change="i.unit = $event.val;"
|
</td>
|
||||||
:initial_single_selection="i.unit"
|
</tr>
|
||||||
:model="Models.UNIT"
|
<template v-if="!loading">
|
||||||
:search_on_load="false"
|
<tr v-for="i in ingredients" v-bind:key="i.id">
|
||||||
:allow_create="true"
|
<td style="width: 5vw">
|
||||||
:create_placeholder="$t('Create')"
|
<input type="number" class="form-control" v-model="i.amount">
|
||||||
:multiple="false"></generic-multiselect>
|
</td>
|
||||||
</td>
|
<td style="width: 30vw">
|
||||||
<td style="width: 30vw">
|
<generic-multiselect @change="i.unit = $event.val;"
|
||||||
<generic-multiselect @change="i.food = $event.val;"
|
:initial_single_selection="i.unit"
|
||||||
:initial_single_selection="i.food"
|
:model="Models.UNIT"
|
||||||
:model="Models.FOOD"
|
:search_on_load="false"
|
||||||
:search_on_load="false"
|
:allow_create="true"
|
||||||
:allow_create="true"
|
:create_placeholder="$t('Create')"
|
||||||
:create_placeholder="$t('Create')"
|
:multiple="false"></generic-multiselect>
|
||||||
:multiple="false"></generic-multiselect>
|
</td>
|
||||||
</td>
|
<td style="width: 30vw">
|
||||||
<td style="width: 30vw">
|
<generic-multiselect @change="i.food = $event.val;"
|
||||||
<input class="form-control" v-model="i.note">
|
:initial_single_selection="i.food"
|
||||||
|
:model="Models.FOOD"
|
||||||
|
:search_on_load="false"
|
||||||
|
:allow_create="true"
|
||||||
|
:create_placeholder="$t('Create')"
|
||||||
|
:multiple="false"></generic-multiselect>
|
||||||
|
</td>
|
||||||
|
<td style="width: 30vw">
|
||||||
|
<input class="form-control" v-model="i.note">
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td style="width: 5vw">
|
||||||
<b-button variant="primary" @click="updateIngredient(i)">Save</b-button>
|
<b-button variant="primary" @click="updateIngredient(i)"><i class="fas fa-save"></i>
|
||||||
</td>
|
</b-button>
|
||||||
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</template>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -78,18 +105,22 @@ import {ApiMixin, StandardToasts} from "@/utils/utils"
|
|||||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||||
import GenericMultiselect from "@/components/GenericMultiselect";
|
import GenericMultiselect from "@/components/GenericMultiselect";
|
||||||
import GenericModalForm from "@/components/Modals/GenericModalForm";
|
import GenericModalForm from "@/components/Modals/GenericModalForm";
|
||||||
|
import LoadingSpinner from "@/components/LoadingSpinner";
|
||||||
|
|
||||||
Vue.use(BootstrapVue)
|
Vue.use(BootstrapVue)
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "IngredientEditorView",
|
name: "IngredientEditorView",
|
||||||
mixins: [ApiMixin],
|
mixins: [ApiMixin],
|
||||||
components: {GenericMultiselect, GenericModalForm},
|
components: {LoadingSpinner, GenericMultiselect, GenericModalForm},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
ingredients: [],
|
ingredients: [],
|
||||||
|
loading: false,
|
||||||
food: null,
|
food: null,
|
||||||
unit: null,
|
unit: null,
|
||||||
|
generic_action: null,
|
||||||
|
generic_model: null,
|
||||||
show_food_delete: false,
|
show_food_delete: false,
|
||||||
show_unit_delete: false,
|
show_unit_delete: false,
|
||||||
}
|
}
|
||||||
@ -104,6 +135,7 @@ export default {
|
|||||||
if (this.food === null && this.unit === null) {
|
if (this.food === null && this.unit === null) {
|
||||||
this.ingredients = []
|
this.ingredients = []
|
||||||
} else {
|
} else {
|
||||||
|
this.loading = true
|
||||||
let apiClient = new ApiApiFactory()
|
let apiClient = new ApiApiFactory()
|
||||||
let params = {'query': {'simple': 1}}
|
let params = {'query': {'simple': 1}}
|
||||||
if (this.food !== null) {
|
if (this.food !== null) {
|
||||||
@ -114,6 +146,10 @@ export default {
|
|||||||
}
|
}
|
||||||
apiClient.listIngredients(params).then(result => {
|
apiClient.listIngredients(params).then(result => {
|
||||||
this.ingredients = result.data
|
this.ingredients = result.data
|
||||||
|
this.loading = false
|
||||||
|
}).catch((err) => {
|
||||||
|
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
|
||||||
|
this.loading = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user