UI updates

app/controllers/recipes_controller.rb

@@ -7,8 +7,6 @@ class RecipesController < ApplicationController
   # GET /recipes
   def index
     @criteria = ViewModels::RecipeCriteria.new(criteria_params)
-    @criteria.page = params[:page]
-    @criteria.per = params[:per]
     @recipes = Recipe.for_criteria(@criteria).includes(:tags)
   end
 

app/javascript/components/TheRecipeList.vue

@@ -6,7 +6,7 @@
 
     <app-pager :current-page="currentPage" :total-pages="totalPages" paged-item-name="recipe" @changePage="changePage"></app-pager>
 
-    <table class="table">
+    <table class="table is-fullwidth">
       <thead>
         <tr>
           <th v-for="h in tableHeader" :key="h.name">
@@ -49,18 +49,26 @@
             <span v-else>--</span>
           </td>
           <td>{{ r.yields }}</td>
-          <td>{{ formatRecipeTime(r.total_time, r.active_time) }}</td>
+          <td class="recipe-time">{{ formatRecipeTime(r.total_time, r.active_time) }}</td>
           <td><app-date-time :date-time="r.created_at" :show-time="false"></app-date-time></td>
           <td>
-            <router-link v-if="isLoggedIn" :to="{name: 'new_log', params: { recipeId: r.id } }" class="button is-primary">
+            <div class="field is-grouped">
-              <app-icon icon="star" size="md"></app-icon>
+              <div class="control">
-            </router-link>
+                <router-link v-if="isLoggedIn" :to="{name: 'new_log', params: { recipeId: r.id } }" class="button is-primary">
-            <router-link v-if="isLoggedIn" :to="{name: 'edit_recipe', params: { id: r.id } }" class="button is-primary">
+                  <app-icon icon="star" size="md"></app-icon>
-              <app-icon icon="pencil" size="md"></app-icon>
+                </router-link>
-            </router-link>
+              </div>
-            <button v-if="isLoggedIn" type="button" class="button is-danger" @click="deleteRecipe(r)">
+              <div class="control">
-              <app-icon icon="x" size="md"></app-icon>
+                <router-link v-if="isLoggedIn" :to="{name: 'edit_recipe', params: { id: r.id } }" class="button is-primary">
-            </button>
+                  <app-icon icon="pencil" size="md"></app-icon>
+                </router-link>
+              </div>
+              <div class="control">
+                <button v-if="isLoggedIn" type="button" class="button is-danger" @click="deleteRecipe(r)">
+                  <app-icon icon="x" size="md"></app-icon>
+                </button>
+              </div>
+            </div>
           </td>
         </tr>
       </tbody>
@@ -213,4 +221,10 @@
     }
   }
 
-</script>
+</script>
+
+<style lang="scss" scoped>
+  .recipe-time {
+    white-space: nowrap;
+  }
+</style>

app/models/recipe.rb

@@ -4,7 +4,7 @@ class Recipe < ApplicationRecord
   has_many :recipe_ingredients, -> { order :sort_order }, inverse_of: :recipe, dependent: :destroy
   belongs_to :user
 
-  has_and_belongs_to_many :tags
+  has_and_belongs_to_many :tags, autosave: true
 
   scope :undeleted, -> { where('deleted <> ? OR deleted IS NULL', true) }
   scope :not_log, -> { where('is_log <> ? OR is_log IS NULL', true) }
@@ -18,11 +18,23 @@ class Recipe < ApplicationRecord
 
   attr_accessor :converted_scale, :converted_system, :converted_unit
 
+  def cache_key
+    [
+      'recipes',
+      self.id.to_s,
+      self.updated_at.to_i.to_s,
+      converted_scale || '-',
+      converted_system || '-',
+      converted_unit || '-'
+    ].join('/')
+  end
+
   def scale(factor, auto_unit = false)
     self.converted_scale = factor
     recipe_ingredients.each do |ri|
       ri.scale(factor, auto_unit)
     end
+    self
   end
 
   def convert_to_metric
@@ -30,6 +42,7 @@ class Recipe < ApplicationRecord
     recipe_ingredients.each do |ri|
       ri.to_metric
     end
+    self
   end
 
   def convert_to_standard
@@ -37,6 +50,7 @@ class Recipe < ApplicationRecord
     recipe_ingredients.each do |ri|
       ri.to_standard
     end
+    self
   end
 
   def convert_to_mass
@@ -44,6 +58,7 @@ class Recipe < ApplicationRecord
     recipe_ingredients.each do |ri|
       ri.to_mass
     end
+    self
   end
 
   def convert_to_volume
@@ -51,6 +66,7 @@ class Recipe < ApplicationRecord
     recipe_ingredients.each do |ri|
       ri.to_volume
     end
+    self
   end
 
   def tag_names
@@ -107,7 +123,7 @@ class Recipe < ApplicationRecord
   end
 
   def self.for_criteria(criteria)
-    query = active.order(criteria.sort_column => criteria.sort_direction).page(criteria.page).per(criteria.per)
+    query = active.order(criteria.sort_column => criteria.sort_direction)
 
     if criteria.name.present?
       query = query.matches_tokens(:name, criteria.name.split(' '))
@@ -118,7 +134,9 @@ class Recipe < ApplicationRecord
       query = query.where(id: tags.joins(:recipes).pluck('recipes.id'))
     end
 
-    query
+    puts criteria.inspect
+
+    query.page(criteria.page).per(criteria.per)
   end
 
   private

app/models/view_models/recipe_criteria.rb

@@ -14,6 +14,8 @@ module ViewModels
           self.send(setter, params[attr])
         end
       end
+
+      puts self.inspect
     end
 
     def sort_column

public/manifest.json

@@ -4,5 +4,6 @@
   "start_url": ".",
   "display": "standalone",
   "background_color": "#4a4a4a",
-  "description": "A recipe manager."
+  "description": "A recipe manager.",
+  "theme_color": "rgb(121, 167, 54)"
 }