parsley/app/javascript/components/IngredientEdit.vue

<template>
  <div>
    <h1 class="title">{{action}} {{ingredient.name || "[Unnamed Ingredient]"}}</h1>

    <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>

    <div class="field">
      <label class="label is-small-mobile">Nutrient Databank Number</label>
      <div class="control">
        <input type="text" class="input is-small-mobile" v-model="ingredient.ndbn">
      </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>

    <fieldset>
      <legent>Ingredient Units</legent>

      <button class="button" type="button">Add Unit</button>

    </fieldset>

    <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>

    <fieldset>
      <legend>Nutrition per 100 grams</legend>

      <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">
              <input type="text" class="input is-small-mobile" v-model="ingredient[name]">
            </div>
            <div class="control">
              <button type="button" class="unit-label button is-static is-small-mobile">{{nutrient.unit}}</button>
            </div>
          </div>
        </div>
      </div>

    </fieldset>

  </div>
</template>

<script>

  import AppAutocomplete from "./AppAutocomplete";

  export default {
    props: {
      ingredient: {
        required: true,
        type: Object
      },
      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" }

        }
      };
    },

    components: {
      AppAutocomplete
    }
  }

</script>

<style lang="scss" scoped>

  .unit-label {
    width: 3em;
  }

</style>