add radio form + tooltips + reset

app/views/admin/price_documents/analyse_reponses.html.haml

@@ -8,7 +8,7 @@
       = @price_document.list_designaton
 
 
-
+=form_tag '/'
 .qi_pannel.padding.new_table_container
   .table-slider
     .inner
@@ -24,6 +24,8 @@
                 Consultation
               %th{colspan: nb_resp}
                 Fournisseurs
+                .btn.btn-light.ml-4#reset-radio
+                  reset
 
             %tr
               %th
@@ -81,10 +83,10 @@
                 %tr
                   %td
                     =# ATTENTION ! On a plus accès direct aux commandes qui on engendré cette demande de prix. donc plus accès aux délais différent entre les différentes commades pour une ref donée
-                    &#8721
+                    / &#8721
-                    =price_line.qte.to_i
+                    / =price_line.qte.to_i
-                    %br
+                    / %br
-                    - if price_line.cc_wish_date.present? && price_line.cc_wish_date < Date.today + 10.days
+                    - if price_line.cc_wish_date.present? && price_line.cc_wish_date < Date.today + 20.days
                       %span.red
                         =ic(:fire)
                         =price_line.qte.to_i
@@ -115,33 +117,51 @@
                     / Fournisseurs de référence
                   %td
                     / Date du px de référence
-                  %td
+                  %td.limit
                     / spec
-                  - @price_document_responses.each do |resp|
+                  - form = false
-                    -line = resp.price_line_block.price_lines.where(p_product_ref: price_line.p_product_ref).first
+                  - if form
-                    -cell = []
-
-                    - if line.qte_available.to_i > 0
-                      -if line.qte_available >= price_line.qte.to_i
-                        - cell << "Qté dispo : #{line.qte_available.to_i}"
-                      -else
-                        - cell << "#{ic(:warning, class: "orange")} Qté dispo : #{line.qte_available.to_i} (#{line.qte_available.to_i - price_line.qte.to_i})"
-                      - cell << "PA: #{line.ct_u_price_ht} €"
-                      - # mp = calcul de la marge prévisionelle TODO
-                      - line.id.odd? ? mp = 0.17 : mp = 0.11
-                      -cell << line.id.odd?
-                      - if mp.present?
-                        -if mp > 0.15
-                          - cell << "<span class=green>#{ic(:check)} MP: #{mp * 100} %</span>"
-                        -else
-                          - cell << "#{ic(:times, class: "red")} MP: #{mp * 100} %"
-                    -else
-                      - cell << "<span class=red>pas dispo</span>"
-                    -if line.comment.present?
-                      - cell << "<span class=darkgrey>#{ic('info-circle')} #{line.comment}</span>"
                     %td
-                      =sanitize(cell.join('<br>'))
+                      = radio_button_tag "price_selected_#{}", price_line.id
+                      = label_tag "price line i = #{price_line.id}"
+                    - if false
+                      - form_with do |form|
+                        %td
+                          = debug form
+                          =form.collection_radio_buttons :selected_price, price_lines, :id, :cc_title
+                  - else
+                    - @price_document_responses.each do |resp|
+                      -line = resp.price_line_block.price_lines.where(p_product_ref: price_line.p_product_ref).first
+                      -cell = []
 
+                      - if line.qte_available.to_i > 0
+                        -if line.qte_available >= price_line.qte.to_i
+                          - cell << "Qté dispo : #{line.qte_available.to_i}"
+                        -else
+                          - cell << "#{ic(:warning, class: "orange")} Qté dispo : #{line.qte_available.to_i} (#{line.qte_available.to_i - price_line.qte.to_i})"
+                        - cell << "PA: #{line.ct_u_price_ht} €"
+                        - # mp = calcul de la marge prévisionelle TODO
+                        - line.id.odd? ? mp = 0.17 : mp = 0.11
+                        - if mp.present?
+                          -if mp > 0.15
+                            - cell << "<span class=green>#{ic(:check)} MP: #{mp * 100} %</span>"
+                          -else
+                            - cell << "#{ic(:times, class: "red")} MP: #{mp * 100} %"
+                      -else
+                        - cell << "<span class=red>pas dispo</span>"
+                      -if line.comment.present?
+                        - display_comment = ""
+                        - if line.comment.length > 10
+                          - display_comment = "#{line.comment[0..10]} (..)"
+                        - else
+                          - display_comment = line.comment
+                        - cell << "<span class='info'>#{ic('info-circle')} #{display_comment}<span class='info-text'>#{line.comment}</span></span>"
+                        -# cell << "<span class=info>#{ic('info-circle')} #{display_comment}</span>"
+
+                      %td.p-0
+                        = radio_button_tag "ref_price_selected_#{price_line.p_product_ref.id}", line.id, false, class: "category-selector"
+                        = label_tag "ref_price_selected_#{price_line.p_product_ref.id}_#{line.id}", sanitize(cell.join('<br>')), class: "p-2 m-auto"
+  =submit_tag 'valider la selection', class: "btn btn-primary"
 
 
 
@@ -150,6 +170,24 @@
 
 
 :scss
+  .category-selector {
+    position: absolute;
+    transform: scale(0);
+  }
+
+  .category-selector + label {
+    display: block;
+    min-height: 105px;
+    cursor: pointer;
+    box-sizing: border-box;
+    width: 100%;
+    text-align: left;
+  }
+
+  .category-selector:checked + label {
+    background-color: #b4f99e !important;
+  }
+
   .limit {
     border-right:3px solid green !important;
   }
@@ -163,8 +201,50 @@
   .orange {
     color: orange;
   }
-  .darkgrey {
+  .info {
-    color: #darkgrey;
+    color: #009bbf;
+    position: relative;
+    display: inline-block;
+    text-overflow: ellipsis;
+
+    .info-text {
+      visibility: hidden;
+      background-color: #555;
+      color: #fff;
+      text-align: center;
+      padding: 5px;
+      border-radius: 6px;
+      max-width: 500px;
+      min-width: fit-content;
+      white-space: normal;
+
+      /* Position the tooltip text */
+      position: absolute;
+      z-index: 1;
+      bottom: 125%;
+      left: 50%;
+      margin-left: -60px;
+
+      /* Fade in tooltip */
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .info-text::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #555 transparent transparent transparent;
+    }
+  }
+  .info:hover {
+    .info-text {
+      visibility: visible;
+      opacity: 1;
+    }
   }
   .darkblue {
     color: darkblue;
@@ -173,3 +253,8 @@
   .small-input {
     max-width: 100px;
   }
+
+:javascript
+  $( "#reset-radio" ).click(function(event){
+    $( ":radio" ).prop('checked',false);
+  })