vue app for image list. even tests. but wip

Gemfile

@@ -11,9 +11,14 @@ gem "tailwindcss-rails"
 gem "importmap-rails"
 gem "sprockets-rails"
 
+gem "ruby2js" , path: "../ruby2js"
+
 group :development, :test do
   gem "capybara"
   gem 'guard-rspec', require: false
+  gem "selenium-webdriver"
+  gem "webdrivers"
+  gem "puma"
 end
 
 # Start debugger with binding.b [https://github.com/ruby/debug]

Gemfile.lock

@@ -1,3 +1,10 @@
+PATH
+  remote: ../ruby2js
+  specs:
+    ruby2js (5.0.1)
+      parser
+      regexp_parser (~> 2.1.1)
+
 PATH
   remote: .
   specs:
@@ -8,6 +15,7 @@ PATH
       mini_magick
       rails (>= 7.0.4)
       redcarpet
+      ruby2js (~> 5.0, >= 5.0.1)
 
 GEM
   remote: https://rubygems.org/
@@ -81,6 +89,7 @@ GEM
       tzinfo (~> 2.0)
     addressable (2.8.1)
       public_suffix (>= 2.0.2, < 6.0)
+    ast (2.4.2)
     builder (3.2.4)
     capybara (3.38.0)
       addressable
@@ -161,10 +170,14 @@ GEM
     notiffany (0.1.3)
       nenv (~> 0.1)
       shellany (~> 0.0)
+    parser (3.1.3.0)
+      ast (~> 2.4.1)
     pry (0.14.1)
       coderay (~> 1.1)
       method_source (~> 1.0)
     public_suffix (5.0.0)
+    puma (6.0.0)
+      nio4r (~> 2.0)
     racc (1.6.0)
     rack (2.2.4)
     rack-test (2.0.2)
@@ -201,7 +214,8 @@ GEM
       ffi (~> 1.0)
     rchardet (1.8.0)
     redcarpet (3.5.1)
-    regexp_parser (2.6.1)
+    regexp_parser (2.1.1)
+    rexml (3.2.5)
     rspec (3.12.0)
       rspec-core (~> 3.12.0)
       rspec-expectations (~> 3.12.0)
@@ -223,6 +237,11 @@ GEM
       rspec-mocks (~> 3.11)
       rspec-support (~> 3.11)
     rspec-support (3.12.0)
+    rubyzip (2.3.2)
+    selenium-webdriver (4.7.1)
+      rexml (~> 3.2, >= 3.2.5)
+      rubyzip (>= 1.2.2, < 3.0)
+      websocket (~> 1.0)
     shellany (0.0.1)
     sprockets (4.1.1)
       concurrent-ruby (~> 1.0)
@@ -239,6 +258,11 @@ GEM
     timeout (0.3.0)
     tzinfo (2.0.5)
       concurrent-ruby (~> 1.0)
+    webdrivers (5.2.0)
+      nokogiri (~> 1.6)
+      rubyzip (>= 1.3.0)
+      selenium-webdriver (~> 4.0)
+    websocket (1.2.9)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -255,9 +279,13 @@ DEPENDENCIES
   haml-rails
   importmap-rails
   merged!
+  puma
   rspec-rails
+  ruby2js!
+  selenium-webdriver
   sprockets-rails
   tailwindcss-rails
+  webdrivers
 
 BUNDLED WITH
    2.3.26

app/controllers/merged/images_controller.rb

@@ -4,6 +4,13 @@ module Merged
 
     def index
       @images = Image.all
+      @image_data = @images.collect{|i|
+        data = i.attributes.dup
+        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
+      }
     end
 
     def create

app/models/merged/image.rb

@@ -71,7 +71,7 @@ module Merged
     end
 
     def asset_name
-      image_root + "/" + self.id.to_s
+      image_root + "/" + self.id.to_s + "." + self.type
     end
 
     def full_filename

app/views/merged/images/index.haml

@@ -4,22 +4,46 @@
 
 = render "layouts/merged_header"
 
-.grid.grid-cols-6.gap-4.m-8
-  = form_tag({action: :create}, multipart: true) do
-    = render "new_image"
-  -@images.each do |image|
-    .flex.flex-col.border.border-gray-100.rounded.image_box
-      .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
-          = aspect_ratio(image)
-      .w-full.object-contain.h-72
-        =image_tag(image.asset_name)
-      .flex.justify-between.mb-8
-        %strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
-          = "#{image.size}k"
-        %strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
-          = image.created_at.to_date
-        %strong.rounded.h-10.bg-orange-50.px-5.py-2.font-medium
-          =image.type
+.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}}
+
+%script{:src => "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"}
+
+:ruby2js
+  class Images < Vue
+    options el: '.images'
+    def initialize
+      @image_data = #{@image_data.to_json.html_safe}
+    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")
+    end
+  end

lib/merged/engine.rb

@@ -1,4 +1,9 @@
 require "active_hash"
+require "ruby2js"
+require "ruby2js/es2015"
+require "ruby2js/filter/functions"
+require "ruby2js/haml"
+require "ruby2js/filter/vue"
 
 module Merged
   class Engine < ::Rails::Engine

merged.gemspec

@@ -24,4 +24,5 @@ Gem::Specification.new do |spec|
   spec.add_dependency "redcarpet"
   spec.add_dependency "active_hash"
   spec.add_dependency "mini_magick"
+  spec.add_dependency "ruby2js" ,  '~> 5.0', '>= 5.0.1'
 end

spec/features/merged/images_spec.rb

@@ -7,7 +7,7 @@ RSpec.feature "Images", type: :feature do
       expect(page).to have_title("Dummy")
       expect(page).to have_text("Pages")
     end
-    it "has picures" do
+    it "has picures" , js: true do
       expexted_num = Merged::Image.count
       visit "/merged/images"
       found= find_all(".image_box").count

spec/rails_helper.rb

@@ -5,6 +5,8 @@ require_relative '../test/dummy/config/environment'
 # Prevent database truncation if the environment is production
 abort("The Rails environment is running in production mode!") if Rails.env.production?
 require 'rspec/rails'
+require 'capybara/rails'
+
 # Add additional requires below this line. Rails is not loaded until this point!
 
 # Requires supporting ruby files with custom matchers and macros, etc, in
@@ -22,7 +24,11 @@ require 'rspec/rails'
 #
 # Dir[Rails.root.join('spec', 'support', '**', '*.rb')].sort.each { |f| require f }
 
+Capybara.javascript_driver = :selenium_headless
+
 RSpec.configure do |config|
+
+
   # Remove this line to enable support for ActiveRecord
   config.use_active_record = false