Upgrade UX for new customersheet

app/helpers/document_line_helper.rb

@@ -34,7 +34,7 @@ module DocumentLineHelper
       end
     end
     
-    link_to name,"#", :onclick => "add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\");return false;", :class => (options[:class])
+    link_to name,"#", :onclick => "add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\");return false;", :class => (options[:class]), tabindex: options[:tabindex], style: options[:style]
   end
 	
 end

app/views/admin/p_customer_sheets/_form.html.haml

@@ -1,22 +1,25 @@
 =semantic_form_for [:admin, @p_customer_sheet], :html => {:class => "qi_price_form"}, :remote => false do |form|
+  =form.semantic_fields_for :price_line_block do |f|
+    =render :partial => "admin/price_line_blocks/form", :locals => {:f => f}
 
   .content
     .qi_row
-      .qi_pannel.qi_plain.padding
+      .qi_pannel.qi_plain.padding.row
-        -if @p_customer_sheet and @p_customer_sheet.state != "commande"
+        .col-2
-          =#form.input :demande_type, :collection => ["Brouillon", "Demande de bon de commande","Demande de devis"], :as => :select, :include_blank => false, :label => "Type de demande :"
+          -if @p_customer_sheet and @p_customer_sheet.state != "commande"
-    
+            =#form.input :demande_type, :collection => ["Brouillon", "Demande de bon de commande","Demande de devis"], :as => :select, :include_blank => false, :label => "Type de demande :"
-        =form.input :state, :collection => ["AV BPA", "PAS BPA","BPA", "Traitée"], :as => :select, :include_blank => false, :label => "Statut :"
-        
-        =form.input :past_id, :label => "N° système actuel"
-  
-    .price_line_block_form
-      =form.semantic_fields_for :price_line_block do |f|
-        =render :partial => "admin/price_line_blocks/form", :locals => {:f => f}
 
+          =form.input :state, :collection => ["AV BPA", "PAS BPA","BPA", "Traitée"], :as => :select, :include_blank => false, :label => "Statut :"
 
+          =form.input :past_id, :label => "N° système actuel"
+          =yield :discount
+        .col-2
+          =yield :shipping_date
+        .col-8
+          =yield :particular
 
     
+  =yield :price_lines
   .right.actions
     =link_to "Annuler", admin_p_customer_sheets_path(), :class => "btn"
     =form.submit "sauvegarder", :class => "btn btn-primary btn-ap-add"

app/views/admin/price_line_blocks/_form.html.haml

@@ -1,21 +1,20 @@
-.qi_row
+=f.inputs do
-  =f.inputs do
 
 
-    -if !@p_customer_sheet or (@p_customer_sheet and @p_customer_sheet.state != "commande")
+  -if !@p_customer_sheet or (@p_customer_sheet and @p_customer_sheet.state != "commande")
-      .qi_pannel.qi_plain.padding{:style => "margin:20px 0;"}
 
-        = f.hidden_field :p_customer_id, :class => "p_customer_id"
+    = f.hidden_field :p_customer_id, :class => "p_customer_id"
-  
+    =content_for :particular do
-        .p_customer_sheet_customer
+      .row
+        .p_customer_sheet_customer.col-12.mb-4
 
 
           -if f.object.p_customer and f.object.p_customer.particular
             =render :partial => "admin/p_customers/apercu", :locals => {:particular => f.object.p_customer.particular}
-        .padding{:style => "padding:0 10px;"}
+        .col-6
           .addresses.row
             .columns.span_6
-              %h3 Adresse de facturation
+              %h4 Adresse de facturation
 
               -if f.object.p_customer
                 =f.inputs do
@@ -23,9 +22,10 @@
               -else
                 =f.inputs do
                   = f.input :particular_bill_id, :collection => [], :as => :select, :include_blank => false, :label => "Adresse de facturation"
-      
+        .col-6
+          .addresses.row
             .columns.span_6
-              %h3 Adresse de livraison
+              %h4 Adresse de livraison
 
               -if f.object.p_customer
                 =f.inputs do
@@ -36,68 +36,61 @@
 
             .clear
 
-  
+    =content_for :shipping_date do
-        %table{:style => "width:100%;"}
+      = f.input :wish_date, :label => "Date de livraison souhaitée :", :as => :date
-          %tr
+      = f.input :ct_creation_date, :label => "Date de commande (si différente de la date de création) :", :as => :date
-            %td{:style => "width:33%;"}
+      = f.input :validation_date, :label => "Date de validation :", :as => :date
-              = f.input :wish_date, :label => "Date de livraison souhaitée :", :as => :date
-        
-            %td{:style => "width:33%;"}
-              = f.input :ct_creation_date, :label => "Date de commande (si différente de la date de création) :", :as => :date
-              
-            %td{:style => "width:33%;"}
-              = f.input :validation_date, :label => "Date de validation :", :as => :date
 
 
 
-        = f.input :customer_ref, :label => "Référence commande client :"
+    = f.input :customer_ref, :label => "Référence commande client :"
-        -if current_admin.has_permission?("customer-sheets-bl")
+    -if current_admin.has_permission?("customer-sheets-bl")
-          =# f.input :bl_comment, :label => "Commentaire à mettre sur le BL :", :input_html => {:style => "min-height:50px;height:50px;"}
+      =# f.input :bl_comment, :label => "Commentaire à mettre sur le BL :", :input_html => {:style => "min-height:50px;height:50px;"}
 
-        -if @p_customer_sheet and @p_customer_sheet.p_customer and @p_customer_sheet.p_customer.p_customer_sheet_note?
+    -if @p_customer_sheet and @p_customer_sheet.p_customer and @p_customer_sheet.p_customer.p_customer_sheet_note?
-          %div
+      %div
-            %strong Notes pour les demandes de commandes pour ce client :
+        %strong Notes pour les demandes de commandes pour ce client :
-            =simple_format @p_customer_sheet.p_customer.p_customer_sheet_note
+        =simple_format @p_customer_sheet.p_customer.p_customer_sheet_note
-            %br
+        %br
 
 
 
+    =content_for :price_lines do
+      .row
+        .price_lines_form.col-11.row
+          =f.semantic_fields_for :price_lines do |f|
+            =render :partial => "admin/price_lines/form", :locals => {:form => f}
 
-      .price_lines_form
+        %p.col-1= link_to_add_fields ic("plus-circle") + " ligne", f, :price_lines, {:class => "btn btn-primary p-2", tabindex: 10, style: "position: sticky; top: 100px"}
-        =f.semantic_fields_for :price_lines do |f|
-          =render :partial => "admin/price_lines/form", :locals => {:form => f}
-  
-      %p= link_to_add_fields "Ajouter une ligne", f, :price_lines, {:class => "btn btn-primary"}
 
 
-    -if current_admin.has_permission?("payments")
+  -if current_admin.has_permission?("payments")
-      .qi_pannel.qi_plain.padding.price_line_block_footer{:style => "margin:20px 0;"}
+    =content_for :discount do
-    
-        -if !@p_customer_sheet or (@p_customer_sheet and @p_customer_sheet.state != "commande")
-          -if !@avoir
-            = f.input :ct_tot_discount_percent, :label => "Réduction pied de page (%) :", :input_html => {:class => "input_price_line_block_ct_tot_discount_percent"}
-          = f.input :ct_tot_fdp_ht, :label => "Frais de port personnalisés :"
- 
-   
-    -if current_admin.has_permission?("payments")
       -if !@p_customer_sheet or (@p_customer_sheet and @p_customer_sheet.state != "commande")
-        - if f.object.id
+        -if !@avoir
-          .qi_pannel.qi_plain.padding{:style => "margin:20px 0;"}
+          = f.input :ct_tot_discount_percent, :label => "Réduction pied de page (%) :", :input_html => {:class => "input_price_line_block_ct_tot_discount_percent"}
-            %h4 Paiements
+        = f.input :ct_tot_fdp_ht, :label => "Frais de port personnalisés :"
-    
-            = f.input :p_payment_type_id, :label => "Type de paiement :", :include_blank => false, :collection => PPaymentType.order(:name).all, :as => :select, :input_html => {:id => "payment_type_id_select"}
 
 
-            = f.input :ct_payment_comptant, :label => "Paiement comptant nécessaire ?" 
+  -if current_admin.has_permission?("payments")
+    -if !@p_customer_sheet or (@p_customer_sheet and @p_customer_sheet.state != "commande")
+      - if f.object.id
+        .qi_pannel.qi_plain.padding{:style => "margin:20px 0;"}
+          %h4 Paiements
 
-            -if false
+          = f.input :p_payment_type_id, :label => "Type de paiement :", :include_blank => false, :collection => PPaymentType.order(:name).all, :as => :select, :input_html => {:id => "payment_type_id_select"}
-              = f.input :ct_acompte, :label => "Acompte nécessaire ?" 
-              = f.input :ct_acompte_percent, :label => "Pourcentage d'acompte :" 
 
-            = f.input :ct_payment_delais, :label => "Délais jour de paiement :"
 
-            -if false
+          = f.input :ct_payment_comptant, :label => "Paiement comptant nécessaire ?"
-              = f.input :ct_payment_month_end, :label => "Fin de mois ?"
+
+          -if false
+            = f.input :ct_acompte, :label => "Acompte nécessaire ?"
+            = f.input :ct_acompte_percent, :label => "Pourcentage d'acompte :"
+
+          = f.input :ct_payment_delais, :label => "Délais jour de paiement :"
+
+          -if false
+            = f.input :ct_payment_month_end, :label => "Fin de mois ?"
 
 
 

app/views/admin/price_lines/_form.html.haml

@@ -1,5 +1,5 @@
 
-.qi_pannel.qi_plain.padding.price_line_form.field{:style =>"border-left:4px solid gray;margin-bottom:10px;padding-left:5px;"}
+.qi_pannel.qi_plain.padding.price_line_form.col-3.field{:style =>"border-left:4px solid gray;margin-bottom:10px;padding-left:5px;"}
   %table{:style => "width:100%;"}
     %tr
       %td{:style => "width:30px;"}
@@ -10,12 +10,13 @@
         = form.input :ct_title, :label => "Designation personnalisée : " if @avoir
         %div{:class => ("error has-error" if form.object.errors[:p_product_ref_id].size > 0 )}
           %label Produit :
-          %input.p_product_ref_autocomplete_input.form-control{:type => "text", :value => ("#{form.object.p_product_ref.ref} #{form.object.p_product_ref.cc_name}" if form.object.p_product_ref)}
+          %input.p_product_ref_autocomplete_input.form-control{:type => "text", tabindex: 1, autofocus: true, :value => ("#{form.object.p_product_ref.ref} #{form.object.p_product_ref.cc_name}" if form.object.p_product_ref)}
        
       
           = form.hidden_field :p_product_ref_id, :class => "p_product_ref_id"
         
         :javascript
+          $('.p_product_ref_autocomplete_input').focus()
           $( function() {
               
               $('.p_product_ref_autocomplete_input').autocomplete({
@@ -102,7 +103,7 @@
           .forced_price_wrapper{:style => ("display:none;" if !form.object.forced_price)}= form.input :ct_u_price_ht, :label => false, :input_html => {:class => "input_price_line_ct_u_price_ht"}
       
       %td
-        = form.input :qte, :label => "qte :", :input_html => {:class => "input_price_line_qte"}
+        = form.input :qte, :label => "qte :", :input_html => {:class => "input_price_line_qte", tabindex: 1}
 
         
       
@@ -118,13 +119,13 @@
         -else
           %label Taux de TVA :
           %br
-          =select_tag :tva_account_id, options_from_collection_for_select(TvaRate.where(:accounting_zone_id => (@p_customer ? @p_customer.accounting_zone_id : nil)).all, "id", "member_label", form.object.tva_account_id), :class => "input_price_line_tva_account_id" #, :disabled => true
+          =select_tag :tva_account_id, options_from_collection_for_select(TvaRate.where(:accounting_zone_id => (@p_customer ? @p_customer.accounting_zone_id : nil)).all, "id", "member_label", form.object.tva_account_id), :class => "input_price_line_tva_account_id custom-select" #, :disabled => true
         
         
         
         =qi_js_field(form, :price_line, :tva_account_value, :hidden => true)
     
-  = form.input :comment, :label => "Commentaire"
+  / = form.input :comment, :label => "Commentaire"