added unit conversion editor to food editor

cookbook/views/api.py

@@ -973,8 +973,16 @@ class UnitConversionViewSet(viewsets.ModelViewSet):
     queryset = UnitConversion.objects
     serializer_class = UnitConversionSerializer
     permission_classes = [CustomIsUser & CustomTokenHasReadWriteScope]
+    query_params = [
+        QueryParam(name='food_id', description='ID of food to filter for', qtype='int'),
+    ]
+    schema = QueryParamAutoSchema()
 
     def get_queryset(self):
+        food_id = self.request.query_params.get('food_id', None)
+        if food_id is not None:
+            self.queryset = self.queryset.filter(food_id=food_id)
+
         return self.queryset.filter(space=self.request.space)
 
 

vue/src/components/FoodEditor.vue

@@ -2,7 +2,7 @@
 
     <div>
 
-        <b-modal :id="id" size="xl" @hidden="cancelAction">
+        <b-modal :id="id" size="xl" @hidden="cancelAction" :body-class="`pr-3 pl-3`">
 
             <template v-slot:modal-title>
                 <div class="row" v-if="food">
@@ -15,9 +15,10 @@
                 </div>
             </template>
 
-            <div class="row">
+            <div>
-                <div class="col-12">
+                <b-tabs content-class="mt-3" v-if="food">
-                    <b-form v-if="food">
+                    <b-tab title="General" active>
+                        <b-form>
                             <b-form-group :label="$t('Name')" description="">
                                 <b-form-input v-model="food.name"></b-form-input>
                             </b-form-group>
@@ -100,10 +101,61 @@
                                 ></generic-multiselect>
                             </b-form-group>
 
-                        <!-- Unit conversion -->
 
-                        <!-- ADVANCED FEATURES somehow hide this stuff -->
+                        </b-form>
-                        <b-collapse id="collapse-advanced">
+                    </b-tab>
+                    <b-tab title="Conversions" @click="loadUnitConversions" v-if="this.food.id !== undefined">
+
+                        <b-row v-for="uc in unit_conversions" :key="uc">
+                            <b-col>
+                                <span v-if="uc.id">
+                                    <b-btn class="btn btn-sm" variant="danger" @click="deleteUnitConversion(uc)"><i class="fas fa-trash-alt"></i></b-btn>
+                                    {{uc.base_amount}}
+                                    {{uc.base_unit.name}}
+                                    =
+                                    {{uc.converted_amount}}
+                                    {{uc.converted_unit.name}}
+                                </span>
+                                <b-form class="mt-1">
+                                    <b-input-group>
+                                        <b-input v-model="uc.base_amount" @change="uc.changed = true"></b-input>
+                                        <b-input-group-append>
+                                            <generic-multiselect
+                                                @change="uc.base_unit = $event.val; uc.changed = true"
+                                                :initial_single_selection="uc.base_unit"
+                                                label="name" :model="Models.UNIT"
+                                                :multiple="false"/>
+                                        </b-input-group-append>
+
+                                    </b-input-group>
+
+                                    <b-input-group>
+                                        <b-input v-model="uc.converted_amount" @change="uc.changed = true"></b-input>
+                                        <b-input-group-append>
+                                            <generic-multiselect
+                                                @change="uc.converted_unit = $event.val; uc.changed = true"
+                                                :initial_single_selection="uc.converted_unit"
+                                                label="name" :model="Models.UNIT"
+                                                :multiple="false"/>
+                                        </b-input-group-append>
+                                    </b-input-group>
+
+                                </b-form>
+                            </b-col>
+                            <hr style="height: 1px"/>
+                        </b-row>
+
+                        <b-row>
+                            <b-col class="text-center">
+                                <b-btn variant="success" @click="addUnitConversion"><i class="fa fa-plus"></i></b-btn>
+                            </b-col>
+                        </b-row>
+
+                    </b-tab>
+                    <b-tab title="More">
+                        <b-form>
+
+
                             <b-form-group :label="$t('Recipe')" :description="$t('food_recipe_help')">
                                 <generic-multiselect
                                     @change="food.recipe = $event.val;"
@@ -176,16 +228,15 @@
                                     }}
                                 </b-form-checkbox>
                             </b-form-group>
-                        </b-collapse>
 
 
                         </b-form>
+                    </b-tab>
+                </b-tabs>
+            </div>
 
-                </div>
-            </div>
             <template v-slot:modal-footer>
                 <b-button variant="primary" @click="updateFood">{{ $t('Save') }}</b-button>
-                <b-button v-b-toggle.collapse-advanced class="m-1">{{ $t('Advanced') }}</b-button>
             </template>
         </b-modal>
     </div>
@@ -231,6 +282,7 @@ export default {
     data() {
         return {
             food: undefined,
+            unit_conversions: []
         }
     },
     mounted() {
@@ -286,6 +338,24 @@ export default {
                     StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
                 })
             }
+
+            this.unit_conversions.forEach(uc => {
+                if (uc.changed === true) {
+                    if (uc.id === undefined) {
+                        apiClient.createUnitConversion(uc).then(r => {
+                            uc = r.data
+                        }).catch(err => {
+                            StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE, err, true)
+                        })
+                    } else {
+                        apiClient.updateUnitConversion(uc.id, uc).then(r => {
+                            uc = r.data
+                        }).catch(err => {
+                            StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err, true)
+                        })
+                    }
+                }
+            })
         },
         addProperty: function () {
             this.food.properties.push({property_type: null, property_amount: 0})
@@ -306,6 +376,32 @@ export default {
         cancelAction: function () {
             this.$emit("hidden", "")
         },
+        loadUnitConversions: function () {
+            let apiClient = new ApiApiFactory()
+            apiClient.listUnitConversions(this.food.id).then(r => {
+                this.unit_conversions = r.data
+            })
+        },
+        addUnitConversion: function () {
+            this.unit_conversions.push(
+                {
+                    food: this.food,
+                    base_amount: 1,
+                    base_unit: null,
+                    converted_amount: 0,
+                    converted_unit: null,
+                }
+            )
+        },
+        deleteUnitConversion: function (uc){
+            this.unit_conversions = this.unit_conversions.filter(u => u !== uc)
+            let apiClient = new ApiApiFactory()
+            apiClient.destroyUnitConversion(uc.id).then(r => {
+                StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_DELETE)
+            }).catch(err => {
+                StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
+            })
+        }
     },
 }
 </script>