image search by name

app/controllers/merged/images_controller.rb

@@ -9,6 +9,7 @@ module Merged
         data[:url] = view_context.asset_path(i.asset_name)
         data[:created_at] = i.created_at.to_date
         data[:aspect_ratio] = i.aspect_ratio.join("/")
+        data[:ratio] = i.aspect_ratio
         data
       }
     end

app/models/merged/image.rb

@@ -31,12 +31,15 @@ module Merged
     end
 
     def aspect_ratio
-      ratio = self.width.to_f / self.height
+      ratio = self.ratio
       ratios = (1..9).collect{ |i|  ((ratio * i) - (ratio * i).round(0)).abs }
       min , min_index = ratios.each_with_index.min
       [(ratio *  (min_index + 1) ).to_i , (min_index + 1) ]
     end
 
+    def ratio
+      self.width.to_f / self.height
+    end
     #save an io with given name (without ending, that is taken from io)
     #Should save to tmp first
     def self.create_new(filename , io)

app/views/merged/images/index.haml

@@ -4,22 +4,28 @@
 
 = render "layouts/merged_header"
 
-.grid.grid-cols-6.gap-4.m-8.images
-  .flex.flex-col.border.border-gray-100.rounded.image_box{"v-for": "image in filter_and_sort"}
-    .flex.align-center.justify-between.mb-4
-      .text-lg.font-bold.mt-2.mx-2
-        {{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
-      %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
-        {{image.size}}
-      %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}}
+.images
+  .flex.justify-center
+    %label.block
+      .mt-1.mx-4.text-lg.font-bold Search
+    %input.border.rounded{:category => "query", placeholder:"by name", "v-model" => "search_name" }
+
+  .grid.grid-cols-6.gap-4.m-8
+    .flex.flex-col.border.border-gray-100.rounded.image_box{"v-for": "image in filter_and_sort"}
+      .flex.align-center.justify-between.mb-4
+        .text-lg.font-bold.mt-2.mx-2
+          {{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
+        %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
+          {{image.size}}
+        %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}}
 
 %script{:src => "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"}
 
@@ -28,22 +34,14 @@
     options el: '.images'
     def initialize
       @image_data = #{@image_data.to_json.html_safe}
+      @search_name = ""
     end
     def filter_and_sort
-      this.image_data
-    end
-
-    def attribute_for(id , attribute)
-      product = this.products.find { |product| return product.id == id }
-      return id unless product
-      num = product[attribute]
-      num = 100 * num / (100 + product.tax) if( self.alv == "false")
-      return num.toFixed(2)
-    end
-    def cost_for(id)
-      return this.attribute_for(id , "cost")
-    end
-    def price_for(id)
-      return this.attribute_for(id , "price")
+      dat = @image_data
+      return dat unless @search_name.length > 0
+      dat = dat.filter do |item|
+        return item["name"].toLowerCase().indexOf(@search_name) > -1
+      end
+      dat
     end
   end