parsley/app/javascript/components/RecipeEdit.vue

<template>
  <div>
    <h1 class="title">{{ action }} {{ recipe.name || "[Unamed Recipe]" }}</h1>

    <div class="columns">
      <div class="column">
        <div class="field">
          <label class="label is-small-mobile">Name</label>
          <div class="control">
            <input class="input is-small-mobile" type="text" placeholder="name" v-model="recipe.name">
          </div>
        </div>
      </div>

      <div class="column">
        <div class="field">
          <label class="label is-small-mobile">Source</label>
          <div class="control">
            <input class="input is-small-mobile" type="text" placeholder="source" v-model="recipe.source">
          </div>
        </div>
      </div>
    </div>

    <div class="field">
      <label class="label is-small-mobile">Description</label>
      <div class="control">
        <textarea class="textarea is-small-mobile" placeholder="description" v-model="recipe.description"></textarea>
      </div>
    </div>

    <div class="field">
      <label class="label is-small-mobile">Tags</label>
      <app-tag-editor v-model="recipe.tags"></app-tag-editor>
    </div>

    <div class="columns">
      <div class="column">
        <div class="field">
          <label class="label is-small-mobile">Yields</label>
          <div class="control">
            <input class="input is-small-mobile" type="text" placeholder="servings" v-model="recipe.yields">
          </div>
        </div>
      </div>

      <div class="column">
        <div class="field">
          <label class="label is-small-mobile">Total Time</label>
          <div class="control">
            <input class="input is-small-mobile" type="number" placeholder="minutes" v-model="recipe.total_time">
          </div>
        </div>
      </div>

      <div class="column">
        <div class="field">
          <label class="label is-small-mobile">Active Time</label>
          <div class="control">
            <input class="input is-small-mobile" type="number" placeholder="minutes" v-model="recipe.active_time">
          </div>
        </div>
      </div>
    </div>

    <h3 class="title is-4">Ingredients</h3>

    <recipe-edit-ingredient-editor :ingredients="recipe.ingredients"></recipe-edit-ingredient-editor>


    <div class="field">
      <label class="label title is-4">Directions</label>
      <div class="control columns">
        <div class="column">
          <textarea ref="step_text_area" class="textarea" v-model="recipe.step_text"></textarea>
        </div>
        <div class="column">
          <div class="box content" v-html="stepPreview">
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

  import autosize from "autosize";
  import debounce from "lodash/debounce";
  import api from "../lib/Api";

  import RecipeEditIngredientEditor from "./RecipeEditIngredientEditor";

  export default {
    props: {
      recipe: {
        required: true,
        type: Object
      },
      action: {
        required: false,
        type: String,
        default: "Editing"
      }
    },

    data() {
      return {
        stepPreviewCache: null
      };
    },

    computed: {
      stepPreview() {
        if (this.stepPreviewCache === null) {
          return this.recipe.rendered_steps;
        } else {
          return this.stepPreviewCache;
        }
      }
    },

    methods: {

      updatePreview: debounce(function() {
        api.postPreviewSteps(this.recipe.step_text)
          .then(data => this.stepPreviewCache = data.rendered_steps)
          .catch(err => this.stepPreviewCache = "?? Error ??");
      }, 750)
    },

    watch: {
      'recipe.step_text': function() {
        this.updatePreview();
      }
    },

    mounted() {
      autosize(this.$refs.step_text_area);
    },

    components: {
      RecipeEditIngredientEditor
    }
  }

</script>

<style lang="scss" scoped>
  .bulk-input {
    height: 100%;
  }
</style>