options for cards and new card styles

2022-12-05 18:14:56 +02:00
parent 6911540d30
commit f11bf318a5
20 changed files with 125 additions and 48 deletions
@@ -40,12 +40,15 @@ module Merged

    def update
      @card.allowed_fields.each do |key|
-        puts "Update Card #{key}"
        if( params.has_key?(key) )
          @card.update(key, params[key])
          puts "updating:#{key}=#{params[key]}"
        end
      end
+      options = params[:option]
+      @card.option_definitions.each do |option|
+        @card.set_option(option.name,  options[option.name])
+      end if options
      @card.save
      redirect_to section_cards_url(@card.section.id)
    end
@@ -69,7 +69,6 @@ module Merged

    def update
      @section.allowed_fields.each do |key|
-        puts "Update Section #{key}"
        if( params.has_key?(key) )
          @section.update(key, params[key])
          puts "updating:#{key}=#{params[key]}"
@@ -29,14 +29,32 @@ module Merged
      {class: "order-last"}
    end

+    def align_option(section)
+      return {} unless section.has_option?("align")
+      option = section.option('align')
+      puts "align #{option}"
+      # text-center , text-left , text-right , leave comment for tailwind
+      {class: "text-#{option}"}
+    end
+
    def background_option(section)
      return {} unless section.has_option?("background")
      option = section.option('background')
      puts "Background #{option}"
      return {} if option == "white"
      case option
-      when "blue"
+      when "light_blue"
        background = "bg-cyan-100"
+      when "solid_blue"
+        background = "bg-cyan-700 text-white"
+      when "solid_red"
+        background = "bg-orange-800 text-white"
+      when "solid_green"
+        background = "bg-green-700 text-white"
+      when "solid_petrol"
+        background = "bg-teal-700 text-white"
+      when "solid_indigo"
+        background = "bg-indigo-800 text-white"
      else
        background = "white"
      end
@@ -55,7 +73,7 @@ module Merged
      else # two
        columns = "grid-cols-1 md:grid-cols-2"
      end
-      {class: columns}
+      {class: columns + " gap-6"}

    end
    def button(text , url , color)
@@ -4,6 +4,8 @@ module Merged
    include ActiveModel::Conversion
    extend  ActiveModel::Naming

+    include Optioned
+
    cattr_reader :all
    @@all = {}

@@ -24,6 +26,10 @@ module Merged
      @@all[self.id] = self
    end

+    def template_style
+      @section.card_template
+    end
+
    def destroy
      @section.remove_card( self)
    end
@@ -0,0 +1,28 @@
+module Merged
+  #relies only on @content["options"]
+  #and a method template_style
+  module Optioned
+    def has_option?(option)
+      options.has_key?(option)
+    end
+
+    def option_definitions
+      template_style.options
+    end
+
+    def option(name)
+      options[name]
+    end
+
+    def options
+      @content["options"] || {}
+    end
+
+    def set_option( option , value)
+      puts "#{template_style} setting option #{option}=#{value.class}"
+      @content["options"] = {} if @content["options"].nil?
+      options[option] = value
+    end
+
+  end
+end
@@ -3,6 +3,7 @@ module Merged
    include ActiveModel::API
    include ActiveModel::Conversion
    extend  ActiveModel::Naming
+    include Optioned

    cattr_reader :all
    @@all = {}
@@ -24,39 +25,12 @@ module Merged
      end
    end

-    [:template , :card_template , :id , :text , :header, :image, :options].each do |meth|
+    [:template , :card_template , :id , :text , :header, :image].each do |meth|
      define_method(meth) do
        @content[meth.to_s]
      end
    end

-    [:button_link , :button_text ].each do |meth|
-      define_method(meth) do
-        @content["options"][meth.to_s]
-      end
-    end
-
-    def has_option?(option)
-      options.has_key?(option)
-    end
-
-    def option_definitions
-      template_style.options
-    end
-
-    def option(name)
-      options[name]
-    end
-
-    def options
-      @content["options"] || {}
-    end
-
-    def set_option( option , value)
-      puts "#{template} setting option #{option}=#{value.class}"
-      @content["options"] = {} if @content["options"].nil?
-      options[option] = value
-    end

    def set_template(new_template)
      @content["template"] = new_template
@@ -77,6 +51,7 @@ module Merged
    def template_style
      Style.sections[ template ]
    end
+
    def allowed_fields
      template_style.fields
    end
@@ -45,6 +45,12 @@

    .relative.block.border.border-gray-100
      %h3.mt-4.text-lg.font-bold Options
-      To be done
+      = form_tag( card_url(card.id) , {method: :patch , class: "mx-auto mt-8 mb-0 max-w space-y-4" }) do
+        - card.option_definitions.each do |option|
+          =render "merged/sections/option_form_#{option.type}" , section: card , option: option
+        -if card.option_definitions.empty?
+          %p No options
+        -else
+          = submit_button("Update")
 %p
  = green_button( "New Card" , new_section_card_url(@section.id) )
@@ -1,5 +1,5 @@
 .grid.grid-cols-4.gap-2.m-8
-  - @cards.each do |style|
+  - @cards.each do |name ,style|
    .relative.block.border.border-gray-100
      = link_to( section_set_card_template_path( card_template: style.template )) do
        =image_tag(style.card_preview , class: "h-56 w-full object-contain lg:h-72")
@@ -8,7 +8,7 @@
      = hidden_field_tag :redirect , section_set_image_url(@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 => merged.new_image_path}
-        = submit_tag 'Submit'
+      = submit_tag 'Submit'
  [email protected] do |name , image|
    .relative.block.border.border-gray-100
      = link_to( section_set_image_path( image: name)) do
@@ -7,5 +7,5 @@
        = section.text
  - template = "merged/view/cards/" + section.card_template
  .grid{ column_option(section)}
-    - section.cards.each do |element|
-      = render( template , element: element)
+    - section.cards.each do |card|
+      = render( template , card: card)
@@ -1,7 +1,7 @@
 .group.m-4.overflow-hidden.relative.flex.h-96.items-end.bg-black
-  = image_for( element , "absolute inset-0 h-full w-full object-cover hover:scale-110 ease-in duration-700")
+  = image_for( card , "absolute inset-0 h-full w-full object-cover hover:scale-110 ease-in duration-700")
  .relative.w-full.bg-cyan-600.m-2.p-4.text-center.tracking-widest.text-white.transition-colors.group-hover:bg-cyan-700{:class => "sm:w-1/2"}
    %h3.text-lg.uppercase
-      = element.header
+      = card.header
    %p.mt-1.text-xs.font-medium
-      = element.text
+      = card.text
@@ -0,0 +1,16 @@
+%article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+  %img.h-56.w-full.object-cover{:alt => "Office", :src => "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"}/
+  .p-4.sm:p-6
+    %a{:href => "#"}
+      %h3.text-lg.font-medium.text-gray-900
+        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+    %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae
+      dolores, possimus pariatur animi temporibus nesciunt praesentium dolore
+      sed nulla ipsum eveniet corporis quidem, mollitia itaque minus soluta,
+      voluptates neque explicabo tempora nisi culpa eius atque dignissimos.
+      Molestias explicabo corporis voluptatem?
+    %a.group.mt-4.inline-flex.items-center.gap-1.text-sm.font-medium.text-blue-600{:href => "#"}
+      Find out more
+      %span.block.transition{"aria-hidden" => "true", :class => "group-hover:translate-x-0.5"}
+        →
@@ -0,0 +1,5 @@
+%div{background_option(card)}
+  = image_for( card , "h-96 w-full object-cover")
+  %div.m-4{align_option(card)}
+    %h3.mt-4.p-4.text-xl.font-bold= card.header
+    %p.mt-2.p-4= card.text
@@ -1,2 +1,2 @@
- unless section.button_text.blank? or section.button_link.blank?
+- unless section.has_option?("button_text") and section.has_option?("button_link")
  = blue_button( section.button_text , section.button_link)