263 lines
7.6 KiB
Vue
263 lines
7.6 KiB
Vue
<template>
|
|
<div>
|
|
<h1 class="title">{{action}} {{ingredient.name || "[Unnamed Ingredient]"}}</h1>
|
|
|
|
<app-validation-errors :errors="validationErrors"></app-validation-errors>
|
|
|
|
<div class="field">
|
|
<label class="label is-small-mobile">Name</label>
|
|
<div class="control">
|
|
<input type="text" class="input is-small-mobile" v-model="ingredient.name">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<label class="label is-small-mobile">Nutrient Databank Number</label>
|
|
<div class="field has-addons">
|
|
<div class="control">
|
|
<button type="button" class="button" :class="{'is-primary': hasNdbn}"><app-icon :icon="hasNdbn ? 'link-intact' : 'link-broken'" size="sm"></app-icon><span>{{ingredient.ndbn}}</span></button>
|
|
</div>
|
|
<div class="control is-expanded">
|
|
<app-autocomplete
|
|
:inputClass="'is-small-mobile'"
|
|
ref="autocomplete"
|
|
v-model="ingredient.usda_food_name"
|
|
:minLength="2"
|
|
valueAttribute="name"
|
|
labelAttribute="description"
|
|
placeholder=""
|
|
@optionSelected="searchItemSelected"
|
|
:onGetOptions="updateSearchItems"
|
|
>
|
|
</app-autocomplete>
|
|
</div>
|
|
<div v-if="hasNdbn" class="control">
|
|
<button type="button" class="button is-danger" @click="removeNdbn">X</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label is-small-mobile">Density</label>
|
|
<div class="control">
|
|
<input type="text" class="input is-small-mobile" v-model="ingredient.density">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label is-small-mobile">Notes</label>
|
|
<div class="control">
|
|
<textarea type="text" class="textarea is-small-mobile" v-model="ingredient.notes"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="message">
|
|
<div class="message-header">
|
|
Custom Units
|
|
</div>
|
|
|
|
<div class="message-body">
|
|
<button class="button" type="button" @click="addUnit">Add Unit</button>
|
|
|
|
<table class="table">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Grams</th>
|
|
<th></th>
|
|
</tr>
|
|
<tr v-for="unit in visibleIngredientUnits" :key="unit.id">
|
|
<td>
|
|
<div class="control">
|
|
<input type="text" class="input is-small-mobile" v-model="unit.name">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="control">
|
|
<input type="text" class="input is-small-mobile" v-model="unit.gram_weight">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="button is-danger" @click="removeUnit(unit)">X</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="message">
|
|
<div class="message-header">
|
|
NDBN Units
|
|
</div>
|
|
|
|
<div class="message-body">
|
|
|
|
<table class="table">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Grams</th>
|
|
</tr>
|
|
<tr v-for="unit in ingredient.ndbn_units">
|
|
<td>{{unit.description}}</td>
|
|
<td>{{unit.gram_weight}}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="message">
|
|
<div class="message-header">
|
|
Nutrition per 100 grams
|
|
</div>
|
|
|
|
<div class="message-body">
|
|
<div class="columns is-mobile is-multiline">
|
|
<div v-for="(nutrient, name) in nutrients" :key="name" class="column is-half-mobile is-one-third-tablet">
|
|
<label class="label is-small-mobile">{{nutrient.label}}</label>
|
|
<div class="field has-addons">
|
|
<div class="control is-expanded">
|
|
<input type="text" class="input is-small-mobile" :disabled="hasNdbn" v-model="ingredient[name]">
|
|
</div>
|
|
<div class="control">
|
|
<button type="button" tabindex="-1" class="unit-label button is-static is-small-mobile">{{nutrient.unit}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import api from "../lib/Api";
|
|
|
|
export default {
|
|
props: {
|
|
ingredient: {
|
|
required: true,
|
|
type: Object
|
|
},
|
|
validationErrors: {
|
|
required: false,
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
action: {
|
|
required: false,
|
|
type: String,
|
|
default: "Editing"
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
nutrients: {
|
|
kcal: { label: "Calories", unit: "kcal" },
|
|
protein: { label: "Protein", unit: "g" },
|
|
lipids: { label: "Fat", unit: "g" },
|
|
carbohydrates: { label: "Carbohydrates", unit: "g" },
|
|
water: { label: "Water", unit: "g" },
|
|
sugar: { label: "Sugar", unit: "g" },
|
|
fiber: { label: "Fiber", unit: "g" },
|
|
cholesterol: { label: "Cholesterol", unit: "mg" },
|
|
sodium: { label: "Sodium", unit: "mg" },
|
|
calcium: { label: "Calcium", unit: "mg" },
|
|
iron: { label: "Iron", unit: "mg" },
|
|
magnesium: { label: "Magnesium", unit: "mg" },
|
|
phosphorus: { label: "Phosphorus", unit: "mg" },
|
|
potassium: { label: "Potassium", unit: "mg" },
|
|
zinc: { label: "Zinc", unit: "mg" },
|
|
copper: { label: "Copper", unit: "mg" },
|
|
manganese: { label: "Manganese", unit: "mg" },
|
|
vit_a: { label: "Vitamin A", unit: "μg" },
|
|
vit_b6: { label: "Vitamin B6", unit: "mg" },
|
|
vit_b12: { label: "Vitamin B12", unit: "μg" },
|
|
vit_c: { label: "Vitamin C", unit: "mg" },
|
|
vit_d: { label: "Vitamin D", unit: "μg" },
|
|
vit_e: { label: "Vitamin E", unit: "mg" },
|
|
vit_k: { label: "Vitamin K", unit: "μg" },
|
|
ash: { label: "ash", unit: "g" }
|
|
|
|
}
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
visibleIngredientUnits() {
|
|
return this.ingredient.ingredient_units.filter(iu => iu._destroy !== true);
|
|
},
|
|
|
|
hasNdbn() {
|
|
return this.ingredient.ndbn !== null;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
addUnit() {
|
|
this.ingredient.ingredient_units.push({
|
|
id: null,
|
|
name: null,
|
|
gram_weight: null
|
|
});
|
|
},
|
|
|
|
removeUnit(unit) {
|
|
if (unit.id) {
|
|
unit._destroy = true;
|
|
} else {
|
|
const idx = this.ingredient.ingredient_units.findIndex(i => i === unit);
|
|
this.ingredient.ingredient_units.splice(idx, 1);
|
|
}
|
|
},
|
|
|
|
removeNdbn() {
|
|
this.ingredient.ndbn = null;
|
|
this.ingredient.usda_food_name = null;
|
|
this.ingredient.ndbn_units = [];
|
|
},
|
|
|
|
updateSearchItems(text) {
|
|
return api.getUsdaFoodSearch(text)
|
|
.then(data => data.map(f => {
|
|
return {
|
|
name: f.name,
|
|
ndbn: f.ndbn,
|
|
description: ["#", f.ndbn, ", Cal:", f.kcal, ", Carbs:", f.carbohydrates, ", Fat:", f.lipid, ", Protein:", f.protein].join("")
|
|
}
|
|
}));
|
|
},
|
|
|
|
searchItemSelected(food) {
|
|
this.ingredient.ndbn = food.ndbn;
|
|
this.ingredient.usda_food_name = food.name;
|
|
this.ingredient.ndbn_units = [];
|
|
|
|
this.loadResource(
|
|
api.postIngredientSelectNdbn(this.ingredient)
|
|
.then(i => Object.assign(this.ingredient, i))
|
|
);
|
|
|
|
},
|
|
},
|
|
|
|
components: {
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.unit-label {
|
|
width: 3em;
|
|
}
|
|
|
|
</style> |