Skip to content

Commit

Permalink
property editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@vabene1111
vabene1111 committed Nov 29, 2023
1 parent 0a0e3a4 commit f6ed49b
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 26 deletions.
82 changes: 59 additions & 23 deletions vue/src/apps/TestView/TestView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,61 @@
<thead>
<tr>
<td>{{ $t('Name') }}</td>
<td v-for="pt in property_types" v-bind:key="pt.id">{{ pt.name }}
<input class="form-control form-control-sm" type="text" v-model="pt.unit" @change="updatePropertyType(pt)">
<input class="form-control form-control-sm" v-model="pt.fdc_id" type="number" placeholder="FDC ID" @change="updatePropertyType(pt)"></td>
<td>FDC</td>
<td>{{ $t('Properties_Food_Amount') }}</td>
<td>{{ $t('Properties_Food_Unit') }}</td>
<td v-for="pt in properties" v-bind:key="pt.id">
<b-input-group>
<b-form-input v-model="pt.name" ></b-form-input> <!-- TODO handle manual input -->
<b-input-group-append>
<b-input-group-text>{{ pt.unit }}</b-input-group-text>
<b-button variant="primary" @click="editing_property_type = pt"><i class="fas fa-pencil-alt"></i></b-button>
</b-input-group-append>
</b-input-group>
</td>
</tr>
</thead>
<tbody>
<tr v-for="f in this.foods" v-bind:key="f.food.id">
<td>
{{ f.food.name }} #{{ f.food.id }}
{{ $t('Property') }} / <input class="form-control form-control-sm" type="number" v-model="f.food.properties_food_amount" @change="updateFood(f.food)">
{{ f.food.name }}
</td>
<td>
<b-input-group>
<b-form-input v-model="f.food.fdc_id" type="number" @change="updateFood(f.food)"></b-form-input>
<b-input-group-append>
<b-button variant="success" @click="updateFoodFromFDC(f.food)"><i class="fas fa-sync-alt"></i></b-button>
</b-input-group-append>
</b-input-group>

</td>
<td>
<b-input v-model="f.food.properties_food_amount" type="number" @change="updateFood(f.food)"></b-input>
</td>
<td>
<generic-multiselect
@change="f.food.properties_food_unit = $event.val; updateFood(f.food)"
:initial_selection="f.food.properties_food_unit"
label="name" :model="Models.UNIT"
:multiple="false"/>
<input class="form-control form-control-sm" v-model="f.food.fdc_id" placeholder="FDC ID" @change="updateFood(f.food)">
<button @click="updateFoodFromFDC(f.food)">Load FDC</button>
</td>
<td v-for="p in f.properties" v-bind:key="`${f.id}_${p.property_type.id}`">
<input class="form-control form-control-sm" type="number" v-model="p.property_amount"> {{ p.property_type.unit }} ({{ p.property_type.name }})
<b-input-group>
<b-form-input v-model="p.property_amount" type="number"></b-form-input> <!-- TODO handle manual input -->
</b-input-group>
</td>
</tr>
</tbody>
</table>

<generic-modal-form
:show="editing_property_type !== null"
:model="Models.PROPERTY_TYPE"
:action="Actions.UPDATE"
:item1="editing_property_type"
@finish-action="editing_property_type = null; loadPropertyTypes()">
</generic-modal-form>

</div>
</div>
</template>
Expand All @@ -47,6 +78,7 @@ import axios from "axios";
import BetaWarning from "@/components/BetaWarning.vue";
import {ApiApiFactory} from "@/utils/openapi/api";
import GenericMultiselect from "@/components/GenericMultiselect.vue";
import GenericModalForm from "@/components/Modals/GenericModalForm.vue";
Vue.use(BootstrapVue)
Expand All @@ -55,10 +87,10 @@ Vue.use(BootstrapVue)
export default {
name: "TestView",
mixins: [ApiMixin],
components: {GenericMultiselect},
components: {GenericModalForm, GenericMultiselect},
computed: {
foods: function () {
let foods = []
let foods = {}
if (this.recipe !== null && this.property_types !== []) {
this.recipe.steps.forEach(s => {
s.ingredients.forEach(i => {
Expand All @@ -70,49 +102,53 @@ export default {
i.food.properties.forEach(fp => {
food.properties[fp.property_type.id] = {changed: false, property_amount: fp.property_amount, property_type: fp.property_type}
})
foods.push(food)
foods[food.food.id] = food
})
})
}
return foods
},
properties: function () {
let properties = {}
this.property_types.forEach(pt => {
properties[pt.id] = pt
})
return properties
}
},
data() {
return {
recipe: null,
property_types: []
property_types: [],
editing_property_type: null,
}
},
mounted() {
this.$i18n.locale = window.CUSTOM_LOCALE
this.loadData();
this.loadRecipe();
this.loadPropertyTypes();
},
methods: {
loadData: function () {
loadRecipe: function () {
let apiClient = new ApiApiFactory()
apiClient.retrieveRecipe("112").then(result => {
this.recipe = result.data
})
apiClient.listPropertyTypes().then(result => {
this.property_types = result.data
})
},
updateFood: function (food) {
let apiClient = new ApiApiFactory()
apiClient.partialUpdateFood(food.id, food).then(result => {
//TODO handle properly
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
}).catch((err) => {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
})
},
updatePropertyType: function (pt) {
loadPropertyTypes: function () {
let apiClient = new ApiApiFactory()
apiClient.partialUpdatePropertyType(pt.id, pt).then(result => {
//TODO handle properly
apiClient.listPropertyTypes().then(result => {
this.property_types = result.data
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
}).catch((err) => {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
Expand All @@ -122,7 +158,7 @@ export default {
let apiClient = new ApiApiFactory()
apiClient.fdcFood(food.id).then(result => {
this.loadData()
this.loadRecipe()
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
}).catch((err) => {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
Expand Down
4 changes: 2 additions & 2 deletions vue/src/components/FoodEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@

<h5><i class="fas fa-database"></i> {{ $t('Properties') }}</h5>

<b-form-group :label="$t('Properties Food Amount')" description=""> <!-- TODO localize -->
<b-form-group :label="$t('Properties_Food_Amount')" description="">
<b-form-input v-model="food.properties_food_amount"></b-form-input>
</b-form-group>

<b-form-group :label="$t('Properties Food Unit')" description=""> <!-- TODO localize -->
<b-form-group :label="$t('Properties_Food_Unit')" description="">
<generic-multiselect
@change="food.properties_food_unit = $event.val;"
:model="Models.UNIT"
Expand Down
2 changes: 2 additions & 0 deletions vue/src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@
"open_data_help_text": "The Tandoor Open Data project provides community contributed data for Tandoor. This field is filled automatically when importing it and allows updates in the future.",
"Open_Data_Slug": "Open Data Slug",
"Open_Data_Import": "Open Data Import",
"Properties_Food_Amount": "Properties Food Amount",
"Properties_Food_Unit": "Properties Food Unit",
"FDC_ID": "FDC ID",
"FDC_ID_help": "FDC database ID",
"Data_Import_Info": "Enhance your Space by importing a community curated list of foods, units and more to improve your recipe collection.",
Expand Down
8 changes: 7 additions & 1 deletion vue/src/utils/models.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -738,7 +738,13 @@ export class Models {
},
fdc_id: {
form_field: true,
type: "text",
type: "choice",
options: [
{ value: 1008, text: "Calories (1008)" },
{ value: 1005, text: "Carbohydrates (1005)" },
{ value: 1003, text: "Protein (1003)" },
{ value: 1004, text: "Fat (1004)" },
],
field: "fdc_id",
label: "FDC_ID",
help_text: "FDC_ID_help",
Expand Down

0 comments on commit f6ed49b

Please sign in to comment.