add image tags and search by them

app/controllers/merged/images_controller.rb

@@ -7,6 +7,7 @@ module Merged
       @image_data = @images.collect{|i|
         data = i.attributes.dup
         data[:url] = view_context.asset_path(i.asset_name)
+        data[:link] = view_context.image_url(i.id)
         data[:created_at] = i.created_at.to_date
         data[:created] = i.created_at.to_i
         data[:aspect_ratio] = i.aspect_ratio.join("/")

app/models/merged/image.rb

@@ -5,7 +5,7 @@ module Merged
 
     set_root_path Rails.root
 
-    fields  :name , :type , :size , :created_at , :height , :width
+    fields  :name , :tags , :type , :size , :created_at , :height , :width
 
     def initialize(filename)
       if filename.is_a? Hash
@@ -84,10 +84,15 @@ module Merged
 
     def self.transform
       Image.all.each do |image|
-        image.name = image.name.gsub("_" , " ")
-        image.name = image.name.capitalize
+        last = image.name.split.last
+        image.tags = ""
+        ["wide", "small" , "big" , "room"].each do |tag|
+          if(last == tag)
+            image.name = image.name.gsub(last,"").strip
+            image.tags = last
+          end
+        end
         image.save
-#        image.created_at = image.created_at.to_date
       end
     end
 

app/views/merged/images/index.haml

@@ -13,6 +13,7 @@
     %label.block
       .mt-1.text-lg.font-bold Search:
     %input.border.rounded{:category => "query", placeholder:"by name", "v-model" => "search_name" }
+    %input.border.rounded{:category => "query", placeholder:"by tag", "v-model" => "search_tag" }
 
     - ["name" , "created" , "size" , "ratio"].each do |ruby_sort_key|
       .rounded{":class" => "{'border': sort_by == '#{ruby_sort_key}'}"}
@@ -33,7 +34,7 @@
           {{image.name}}
         %strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium
           {{image.aspect_ratio}}
-      .w-full.object-contain.h-72
+      %a.w-full.object-contain.h-72{":href" => "image.link" }
         %img{ ":src": "image.url" , ":alt": "image.name" }
       .flex.justify-between.mb-8
         %strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
@@ -41,7 +42,7 @@
         %strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
           {{image.created_at}}
         %strong.rounded.h-10.bg-orange-50.px-5.py-2.font-medium
-          {{image.type}}
+          {{image.tags}}
 
 %script{:src => "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"}
 
@@ -51,17 +52,22 @@
     def initialize
       @image_data = #{@image_data.to_json.html_safe}
       @search_name = ""
-      @sort_by = "name"
-      @sort_dir = 1 # up -1 down
+      @search_tag = ""
+      @sort_by = "created"
+      @sort_dir = -1 # 1 up
     end
     def filter_and_sort
-      puts "sorting " + @sort_by + " : " + @sort_dir
       dat = @image_data
-      if @search_name.length > 0
+      if(@search_name.length > 0)
         dat = dat.filter do |item|
           return item["name"].toLowerCase().indexOf(@search_name) > -1
         end
       end
+      if(@search_tag.length > 0)
+        dat = dat.filter do |item|
+          return (item.tags.toLowerCase().indexOf(@search_tag) > -1)
+        end
+      end
       dat = dat.slice().sort do |a, b| #a, b image data hashes
         aa = a[@sort_by]
         bb = b[@sort_by]