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
-                    =price_line.qte.to_i
-                    %br
-                    - if price_line.cc_wish_date.present? && price_line.cc_wish_date < Date.today + 10.days
+                    / &#8721
+                    / =price_line.qte.to_i
+                    / %br
+                    - 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,8 +117,19 @@
                     / Fournisseurs de référence
                   %td
                     / Date du px de référence
-                  %td
+                  %td.limit
                     / spec
+                  - form = false
+                  - if form
+                    %td
+                      = 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 = []
@@ -129,7 +142,6 @@
                         - 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>"
@@ -138,10 +150,18 @@
                       -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>'))
+                        - 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 {
-    color: #darkgrey;
+  .info {
+    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);
+  })