show log

app/javascript/components/AppDateTime.vue

@@ -1,5 +1,8 @@
 <template>
-  <span :title="fullString">{{ friendlyString }}</span>
+  <span>
+    <input v-if="useInput" class="text" type="text" readonly :value="friendlyString" />
+    <span v-else :title="fullString">{{ friendlyString }}</span>
+  </span>
 </template>
 
 <script>
@@ -23,6 +26,12 @@
         required: false,
         type: Boolean,
         default: true
+      },
+
+      useInput: {
+        required: false,
+        type: Boolean,
+        default: false
       }
     },
 

app/javascript/components/LogShow.vue

@@ -1,11 +1,64 @@
 <template>
+  <div>
+    <h1 class="title">[Log Entry] {{log.recipe.name}}</h1>
 
+    <div class="columns">
+      <div class="column is-half-tablet">
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+            <label class="label">Date</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <app-date-time use-input :show-time="false" :date-time="log.date"></app-date-time>
+            </div>
+          </div>
+        </div>
+
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+            <label class="label">Rating</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <app-rating readonly :value="log.rating"></app-rating>
+            </div>
+          </div>
+        </div>
+
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+            <label class="label">Notes</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <textarea readonly class="textarea" :value="log.notes"></textarea>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <recipe-show :recipe="log.recipe"></recipe-show>
+
+  </div>
 </template>
 
 <script>
 
-  export default {
+  import RecipeShow from "./RecipeShow";
 
+  export default {
+    props: {
+      log: {
+        required: true,
+        type: Object
+      }
+    },
+
+    components: {
+      RecipeShow
+    }
   }
 
 </script>

app/javascript/components/RecipeShow.vue

@@ -4,11 +4,6 @@
       Loading...
     </div>
     <div v-else>
-      <h1 class="title">{{ recipe.name }}</h1>
-      <div class="subtitle tags">
-        <span v-for="tag in recipe.tags" :key="tag" class="tag is-medium">{{tag}}</span>
-      </div>
-      <hr>
       <div class="level is-mobile">
         <div class="level-item">
           {{ recipe.total_time}} ({{recipe.active_time}})

app/javascript/components/TheLog.vue

@@ -1,11 +1,48 @@
 <template>
+  <div>
+    <div v-if="log === null">
+      Loading...
+    </div>
+    <div v-else>
+      <log-show :log="log"></log-show>
+    </div>
 
+    <div class="buttons">
+      <router-link v-if="isLoggedIn" class="button" :to="{name: 'edit_log', params: { id: logId }}">Edit</router-link>
+      <router-link class="button" to="/logs">Back</router-link>
+    </div>
+  </div>
 </template>
 
 <script>
 
-  export default {
+  import LogShow from "./LogShow";
+  import { mapState } from "vuex";
+  import api from "../lib/Api";
 
+  export default {
+    data: function () {
+      return {
+        log: null
+      }
+    },
+
+    computed: {
+      ...mapState({
+        logId: state => state.route.params.id,
+      })
+    },
+
+    created() {
+      this.loadResource(
+        api.getLog(this.logId)
+          .then(data => { this.log = data; return data; })
+      );
+    },
+
+    components: {
+      LogShow
+    }
   }
 
 </script>

app/javascript/components/TheLogList.vue

@@ -13,7 +13,7 @@
       </tr>
 
       <tr v-for="l in logs" :key="l.id">
-        <td>{{l.recipe.name}}</td>
+        <td> <router-link :to="{name: 'log', params: {id: l.id}}">{{l.recipe.name}}</router-link></td>
         <td><app-date-time :date-time="l.date" :show-time="false"></app-date-time> </td>
         <td><app-rating :value="l.rating" readonly></app-rating></td>
         <td>{{l.notes}}</td>

app/javascript/components/TheRecipe.vue

@@ -4,6 +4,11 @@
       Loading...
     </div>
     <div v-else>
+      <h1 class="title">{{ recipe.name }}</h1>
+      <div class="subtitle tags">
+        <span v-for="tag in recipe.tags" :key="tag" class="tag is-medium">{{tag}}</span>
+      </div>
+      <hr>
       <recipe-show :recipe="recipe"></recipe-show>
     </div>
 

app/javascript/lib/Api.js

@@ -282,6 +282,10 @@ class Api {
     return this.get("/logs", params);
   }
 
+  getLog(id) {
+    return this.get("/logs/" + id);
+  }
+
   buildLogParams(log) {
     const recParams = this.buildRecipeParams(log.recipe);
 

app/views/logs/show.json.jbuilder

@@ -0,0 +1,6 @@
+
+json.extract! @log, :id, :date, :rating, :notes
+
+json.recipe do
+  json.partial! 'recipes/recipe', recipe: @log.recipe
+end

app/views/recipes/_recipe.json.jbuilder

@@ -0,0 +1,32 @@
+
+
+json.extract! recipe, :id, :name, :rating, :yields, :total_time, :active_time, :created_at, :updated_at, :step_text
+
+json.rendered_steps MarkdownProcessor.render(recipe.step_text)
+
+json.tags recipe.tag_names
+
+json.ingredients recipe.recipe_ingredients do |ri|
+  json.extract! ri, :id, :ingredient_id, :display_name, :name, :quantity, :units, :preparation, :sort_order
+
+  json.ingredient do
+    if ri.ingredient.nil?
+      json.null!
+    else
+      json.extract! ri.ingredient, :id, :name, :density, :notes
+    end
+  end
+
+  json._destroy false
+end
+
+json.nutrition_data do
+  json.errors recipe.nutrition_data.errors
+
+  json.nutrients NutritionData::NUTRIENTS.select { |_, v| v.present? } do |name, label|
+    json.name name
+    json.label label
+    json.value recipe.nutrition_data.send(name)
+  end
+
+end

app/views/recipes/show.json.jbuilder

@@ -1,34 +1,5 @@
 json.cache_root! [@recipe] do
 
-  json.extract! @recipe, :id, :name, :rating, :yields, :total_time, :active_time, :created_at, :updated_at, :step_text
+  json.partial! 'recipe', recipe: @recipe
-
-  json.rendered_steps MarkdownProcessor.render(@recipe.step_text)
-
-  json.tags @recipe.tag_names
-
-  json.ingredients @recipe.recipe_ingredients do |ri|
-    json.extract! ri, :id, :ingredient_id, :display_name, :name, :quantity, :units, :preparation, :sort_order
-
-    json.ingredient do
-      if ri.ingredient.nil?
-        json.null!
-      else
-        json.extract! ri.ingredient, :id, :name, :density, :notes
-      end
-    end
-
-    json._destroy false
-  end
-
-  json.nutrition_data do
-    json.errors @recipe.nutrition_data.errors
-
-    json.nutrients NutritionData::NUTRIENTS.select { |_, v| v.present? } do |name, label|
-      json.name name
-      json.label label
-      json.value @recipe.nutrition_data.send(name)
-    end
-
-  end
 
 end