finish image selection on section, polish image index

app/controllers/cms/images_controller.rb

@@ -6,12 +6,14 @@ module Cms
       @images = Image.all
     end
 
-    def new
-    end
-
     def create
-      Image.save_image(params['filename'] , params['image_file'])
+      new_image = Image.create_new(params['filename'] , params['image_file'])
-      redirect_to cms_image_index_path
+      redirect = :cms_images
+      if(params[:redirect])
+        redirect = params[:redirect].gsub("NEW" ,new_image.name)
+        puts "image redirect #{redirect}"
+      end
+      redirect_to redirect
     end
 
   end

app/controllers/cms/sections_controller.rb

@@ -6,6 +6,12 @@ module Cms
       @images = Image.all
     end
 
+    def set_image
+      @section.content["image"] = params[:image]
+      @page.save
+      redirect_to cms_page_section_url(@page.id,@section.id)
+    end
+
     def update
       @section.content.each do |key , value|
         next if key == "id"

app/models/cms/image.rb

@@ -6,14 +6,15 @@ module Cms
 
     @@images = {}
 
-    attr_reader :name , :type , :created_at , :updated_at
+    attr_reader :name , :type , :size , :created_at , :updated_at
 
     def initialize(filename)
-      puts filename
+      puts "New Image #{filename}"
       @name , @type = filename.split(".")
       file = File.new(Rails.root.join(Image.root,filename))
       @created_at = file.birthtime
       @updated_at = file.ctime
+      @size = (file.size/1024).to_i
     end
 
     def self.all
@@ -27,7 +28,8 @@ module Cms
 
     #save an io with given name (without ending, that is taken from io)
     def self.create_new(filename , io)
-      ending = io.original_filename.split("/").last.split(".").last
+      original , ending = io.original_filename.split("/").last.split(".")
+      filename = original if( filename.blank? )
       full_filename = filename + "." + ending
       File.open(Rails.root.join(Image.root, full_filename), "wb") do |f|
         f.write( io.read )

app/views/cms/images/index.haml

@@ -1,14 +1,24 @@
-%section
-  %a.inline-block.rounded.border.border-indigo-600.bg-indigo-600.px-12.py-3.text-sm.font-medium.text-white.hover:bg-transparent.hover:text-indigo-600.focus:outline-none.focus:ring.active:text-indigo-500{:href => new_cms_image_path}
-    Add Image
-
 .grid.grid-cols-6.gap-4.m-8
+  .relative.block.border.border-gray-100
+    %h3.mt-4.text-lg.font-bold Add new image
+    = form_tag({action: :create}, multipart: true) do
+      = text_field_tag 'filename'
+      %h5.mt-4.text-lg.font-bold Name is optional
+      %p will be taken from uploaded file
+      = file_field_tag 'image_file'
+      .inline-block.rounded.border.border-indigo-600.bg-indigo-600.px-12.py-3.text-sm.font-medium.text-white.hover:bg-transparent.hover:text-indigo-600.focus:outline-none.focus:ring.active:text-indigo-500{:href => new_cms_image_path}
+        = submit_tag 'Submit'
   -@images.each do |name , image|
     .relative.block.border.border-gray-100
       =image_tag("cms/#{name}" , class: "h-56 w-full object-contain lg:h-72")
-      .p-6
+      .p-3
+      %strong.inline-block.bg-yellow-400.px-3.py-1.text-md.font-medium
+        = "#{image.size}k"
+      %strong.inline-block.bg-yellow-400.px-3.py-1.text-md.font-medium
+        = image.created_at.to_date
+      %h3.mt-4.text-lg.font-bold
+        = image.name
         %strong.inline-block.bg-yellow-400.px-3.py-1.text-xs.font-medium
           =image.type
-        %h3.mt-4.text-lg.font-bold= image.name
+
         %p.mt-2.text-sm.text-gray-700
-          = "#{image.created_at.to_date} ---- #{image.updated_at.to_date}"

app/views/cms/images/new.haml

@@ -1,4 +0,0 @@
-= form_tag({action: :create}, multipart: true) do
-  = text_field_tag 'filename'
-  = file_field_tag 'image_file'
-  = submit_tag 'Submit'

app/views/cms/sections/editors/_image.haml

@@ -1,10 +1,13 @@
 .relative.block.border.border-gray-100
   %h3.mt-4.text-lg.font-bold= key.upcase
-  %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-sm.font-medium.text-white
+  %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-md.font-medium.text-white
-    =link_to "Update Image" , cms_page_section_select_image_url(@page.name,@section.id)
+    =link_to "Change Image" , cms_page_section_select_image_url(@page.name,@section.id)
+  %button.ml-3.inline-block.rounded-lg.bg-red-500.px-5.py-3.text-md.font-medium.text-white
+    = link_to( "Remove image" , cms_page_section_set_image_path( @page.name, @section.id  , image: ""))
+
 
 .relative.block.border.border-gray-100
-  -if value
+  -if( value.blank? )
-    = image_tag "cms/" + value
-  -else
     No image
+  -else
+    = image_tag( "cms/" + value)

app/views/cms/sections/select_image.haml

@@ -1,20 +1,15 @@
-
+.grid.grid-cols-6.gap-2.m-8
-.grid.grid-cols-6.gap-4.m-8
+  .relative.block.border.border-gray-100
+    %h3.mt-4.text-lg.font-bold Add new image or select (click)
+    = form_tag(cms_images_path, multipart: true) do
+      = text_field_tag 'filename'
+      %h5.mt-4.text-lg.font-bold Name is optional
+      %p will be taken from uploaded file
+      = hidden_field_tag :redirect , cms_page_section_set_image_url(@page.name,@section.id,image: "NEW")
+      = file_field_tag 'image_file'
+      .inline-block.rounded.border.border-indigo-600.bg-indigo-600.px-12.py-3.text-sm.font-medium.text-white.hover:bg-transparent.hover:text-indigo-600.focus:outline-none.focus:ring.active:text-indigo-500{:href => new_cms_image_path}
+        = submit_tag 'Submit'
   -@images.each do |name , image|
     .relative.block.border.border-gray-100
+      = link_to( cms_page_section_set_image_path( image: name)) do
         =image_tag("cms/#{name}" , class: "h-56 w-full object-contain lg:h-72")
-      .p-6
-        %strong.inline-block.bg-yellow-400.px-3.py-1.text-xs.font-medium
-          =image.type
-        %h3.mt-4.text-lg.font-bold= image.name
-        %p.mt-2.text-sm.text-gray-700 $14.99
-        %button.mt-4.block.w-full.rounded-sm.bg-yellow-500.p-4.text-sm.font-medium{:type => "button"}
-          Add to Cart
-  .relative.block.border.border-gray-100
-    .p-6
-      %h3.mt-4.text-lg.font-bold Add new Image
-      = form_tag(cms_images_path, method: :post , multipart: true) do
-        = text_field_tag 'filename'
-        = file_field_tag 'image_file'
-        = hidden_field_tag :redirect , "someURL"
-        = submit_tag 'Submit'