show recipe

app/javascript/components/RecipeShow.vue

@@ -129,10 +129,10 @@
         </div>
       </div>
 
-      <buttons>
-        <button type="button is-primary" class="button">Convert</button>
+      <div class="buttons">
+        <button type="button is-primary" class="button" @click="convert">Convert</button>
         <button type="button" class="button">Close</button>
-      </buttons>
+      </div>
     </app-modal>
 
   </div>
@@ -140,7 +140,6 @@
 
 <script>
 
-
   export default {
     props: {
       recipe: {
@@ -187,6 +186,10 @@
     },
 
     methods: {
+      convert() {
+        this.$router.push({name: 'recipe', query: { scale: this.scaleValue, system: this.systemConvertValue, unit: this.unitConvertValue }});
+      },
+
       formatMinutes(min) {
         if (min) {
           const partUnits = [

app/javascript/components/TheRecipe.vue

@@ -34,12 +34,15 @@
     computed: {
       ...mapState({
         recipeId: state => state.route.params.id,
+        scale: state => state.route.query.scale || null,
+        system: state => state.route.query.system || null,
+        unit: state => state.route.query.unit || null
       })
     },
 
     created() {
       this.loadResource(
-        api.getRecipe(this.recipeId)
+        api.getRecipe(this.recipeId, this.scale, this.system, this.unit)
           .then(data => { this.recipe = data; return data; })
       );
     },

app/javascript/lib/Api.js

@@ -105,8 +105,14 @@ class Api {
     return this.get("/recipes", params);
   }
 
-  getRecipe(id) {
-    return this.get("/recipes/" + id);
+  getRecipe(id, scale = null, system = null, unit = null) {
+    const params = {
+      scale,
+      system,
+      unit
+    };
+
+    return this.get("/recipes/" + id, params);
   }
 
   buildRecipeParams(recipe) {