added first draft of property editor
This commit is contained in:
vabene1111
@ -1,40 +1,35 @@
|
||||
<template>
|
||||
|
||||
<div id="app">
|
||||
<div>
|
||||
<h2 v-if="recipe">{{ recipe.name}}</h2>
|
||||
|
||||
<beta-warning></beta-warning>
|
||||
|
||||
<div v-if="metadata !== undefined">
|
||||
{{ $t('Data_Import_Info') }}
|
||||
|
||||
|
||||
<select class="form-control" v-model="selected_version">
|
||||
<option v-for="v in metadata.versions" v-bind:key="v">{{ v }}</option>
|
||||
</select>
|
||||
|
||||
<b-checkbox v-model="update_existing" class="mt-1">{{ $t('Update_Existing_Data') }}</b-checkbox>
|
||||
<b-checkbox v-model="use_metric" class="mt-1">{{ $t('Use_Metric') }}</b-checkbox>
|
||||
|
||||
|
||||
<div v-if="selected_version !== undefined" class="mt-3">
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th>{{ $t('Datatype') }}</th>
|
||||
<th>{{ $t('Number of Objects') }}</th>
|
||||
<th>{{ $t('Imported') }}</th>
|
||||
</tr>
|
||||
<tr v-for="d in metadata.datatypes" v-bind:key="d">
|
||||
<td>{{ $t(d.charAt(0).toUpperCase() + d.slice(1)) }}</td>
|
||||
<td>{{ metadata[selected_version][d] }}</td>
|
||||
<td>
|
||||
<template v-if="import_count !== undefined">{{ import_count[d] }}</template>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<button class="btn btn-success" @click="doImport">{{ $t('Import') }}</button>
|
||||
</div>
|
||||
|
||||
<table class="table table-sm table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{ $t('Name') }}</td>
|
||||
<td v-for="pt in property_types" v-bind:key="pt.id">{{ pt.name }}
|
||||
<input type="text" v-model="pt.unit" @change="updatePropertyType(pt)">
|
||||
<input v-model="pt.fdc_id" type="number" placeholder="FDC ID" @change="updatePropertyType(pt)"></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="f in this.foods" v-bind:key="f.food.id">
|
||||
<td>
|
||||
{{ f.food.name }}
|
||||
{{ $t('Property') }} / <input type="number" v-model="f.food.properties_food_amount" @change="updateFood(f.food)">
|
||||
<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 v-model="f.food.fdc_id" placeholder="FDC ID">
|
||||
<button>Load FDC</button>
|
||||
</td>
|
||||
<td v-for="p in f.properties" v-bind:key="`${f.id}_${p.property_type.id}`"><input type="number" v-model="p.property_amount"> {{ p.property_type.unit }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -48,6 +43,8 @@ import "bootstrap-vue/dist/bootstrap-vue.css"
|
||||
import {ApiMixin, resolveDjangoUrl, StandardToasts} from "@/utils/utils";
|
||||
import axios from "axios";
|
||||
import BetaWarning from "@/components/BetaWarning.vue";
|
||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||
import GenericMultiselect from "@/components/GenericMultiselect.vue";
|
||||
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
@ -56,39 +53,66 @@ Vue.use(BootstrapVue)
|
||||
export default {
|
||||
name: "TestView",
|
||||
mixins: [ApiMixin],
|
||||
components: {BetaWarning},
|
||||
components: {GenericMultiselect},
|
||||
computed: {
|
||||
foods: function () {
|
||||
let foods = []
|
||||
if (this.recipe !== null && this.property_types !== []) {
|
||||
this.recipe.steps.forEach(s => {
|
||||
s.ingredients.forEach(i => {
|
||||
let food = {food: i.food, properties: {}}
|
||||
|
||||
this.property_types.forEach(pt => {
|
||||
food.properties[pt.id] = {changed: false, property_amount: 0, property_type: pt}
|
||||
})
|
||||
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)
|
||||
})
|
||||
})
|
||||
}
|
||||
return foods
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
metadata: undefined,
|
||||
selected_version: undefined,
|
||||
update_existing: true,
|
||||
use_metric: true,
|
||||
import_count: undefined,
|
||||
recipe: null,
|
||||
property_types: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$i18n.locale = window.CUSTOM_LOCALE
|
||||
|
||||
axios.get(resolveDjangoUrl('api_import_open_data')).then(r => {
|
||||
this.metadata = r.data
|
||||
}).catch(err => {
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
|
||||
let apiClient = new ApiApiFactory()
|
||||
|
||||
apiClient.retrieveRecipe("112").then(result => {
|
||||
this.recipe = result.data
|
||||
})
|
||||
|
||||
apiClient.listPropertyTypes().then(result => {
|
||||
this.property_types = result.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
doImport: function () {
|
||||
axios.post(resolveDjangoUrl('api_import_open_data'), {
|
||||
'selected_version': this.selected_version,
|
||||
'selected_datatypes': this.metadata.datatypes,
|
||||
'update_existing': this.update_existing,
|
||||
'use_metric': this.use_metric,
|
||||
}).then(r => {
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
|
||||
this.import_count = r.data
|
||||
}).catch(err => {
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE, err)
|
||||
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) {
|
||||
let apiClient = new ApiApiFactory()
|
||||
apiClient.partialUpdatePropertyType(pt.id, pt).then(result => {
|
||||
//TODO handle properly
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_UPDATE)
|
||||
}).catch((err) => {
|
||||
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -80,6 +80,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",
|
||||
"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.",
|
||||
"Update_Existing_Data": "Update Existing Data",
|
||||
"Use_Metric": "Use Metric Units",
|
||||
|
||||
@ -733,8 +733,16 @@ export class Models {
|
||||
field: "order",
|
||||
label: "Order",
|
||||
placeholder: "",
|
||||
optional: false,
|
||||
help_text: "OrderInformation",
|
||||
},
|
||||
fdc_id: {
|
||||
form_field: true,
|
||||
type: "text",
|
||||
field: "fdc_id",
|
||||
label: "FDC_ID",
|
||||
help_text: "FDC_ID_help",
|
||||
optional: true,
|
||||
helpt_text: "OrderInformation",
|
||||
},
|
||||
open_data_slug: {
|
||||
form_field: true,
|
||||
|
||||
Reference in New Issue
Block a user