kaui 3.0.9 → 4.0.0

data/app/views/kaui/account_timelines/_multi_functions_bar.html.erb

@@ -1,57 +1,128 @@
-<div class="functions-container">
-  <button class="btn btn-default download-button-right" type="button" id="modalDownloadButton">
-    <i class="glyphicon glyphicon-download-alt"></i>
-    <strong>Download CSV</strong>
-  </button>
+<div class="dropdown-container">
+  <%= render "kaui/components/button/button", {
+    label: "Download CSV",
+    icon: "kaui/download.svg",
+    variant: "outline-secondary d-inline-flex align-items-center gap-1 mx-2",
+    type: "button",
+    html_class: "kaui-button custom-hover",
+    html_options: {
+      id: "modalDownloadButton"
+    }
+  } %>
 </div>
 
 <div class="modal fade" id="downloadCsvModal" tabindex="-1" role="dialog" aria-labelledby="downloadCsvModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h3 class="modal-title" id="downloadCsvModalLabel">Download</h3>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <h5 class="modal-title d-flex align-items-center gap-3" id="downloadCsvModalLabel">
+          <span class="icon-container">
+            <%= image_tag("kaui/download-csv.svg") %>
+          </span>
+          Download
+        </h5>
+        <button type="button" class="close close-button custom-hover" data-bs-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">
+            <%= image_tag("kaui/modal/close.svg", width: 20, height: 20) %>
+          </span>
         </button>
       </div>
       <div class="modal-body">
         <form id="downloadCsvForm">
           <div class="row">
-            <div class="col-md-6">
-              <div class="form-group">
-                <label for="startDate">Effective Date:</label>
-                <input type="text" class="form-control" id="startDate" name="startDate">
-              </div>
-            </div>
-            <div class="col-md-6">
-              <div class="form-group">
-                <label for="endDate">To:</label>
-                <input type="text" class="form-control" id="endDate" name="endDate">
-              </div>
+            <div class="d-flex align-items-center">
+              <label for="searchFieldSelect" class="field-label col-sm-3">Account Timeline Date</label>
+                <div class="fake-select-wrapper col-sm-9">
+                  <input type="checkbox" id="single-toggle" hidden />
+                  <div class="d-flex align-items-center position-relative">
+                    <label for="single-toggle" class="fake-select-display">
+                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M14.5833 12.5V18.3333M17.5 15.4167H11.6666" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M13.75 1.6665V4.99984M6.25 1.6665V4.99984" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M17.5 10.8335V5.00016C17.5 4.07969 16.7538 3.3335 15.8333 3.3335H4.16667C3.24619 3.3335 2.5 4.07969 2.5 5.00016V16.6668C2.5 17.5873 3.24619 18.3335 4.16667 18.3335H10" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M2.5 8.3335H17.5" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </label>
+                    <input type="text" class="form-control center-input" id="startDate" placeholder="All Accounts" name="startDate">
+                    <div id="dash" class="dash">–</div>
+                    <input type="text" class="form-control right-input" id="endDate" placeholder="" name="endDate">
+                    <div id="toggle-wrapper" class="position-absolute" style="width: 100%; height: 100%;" onclick="document.getElementById('single-toggle').click()"></div>
+                  </div>
+
+                  <% today = Date.today %>
+
+                  <% start_of_year = Date.new(today.year, 1, 1) %>
+                  <% end_of_year = Date.new(today.year, 12, 31) %>
+                  <% this_year_range = "#{start_of_year.strftime('%b %-d, %Y')} – #{end_of_year.strftime('%b %-d, %Y')}" %>
+
+                  <% start_of_month = Date.new(today.year, today.month, 1) %>
+                  <% end_of_month = Date.new(today.year, today.month, -1) %>
+                  <% this_month_range = "#{start_of_month.strftime('%b %-d, %Y')} – #{end_of_month.strftime('%b %-d, %Y')}" %>
+
+                  <% start_of_week = today - ((today.wday - 1) % 7) %>
+                  <% end_of_week = start_of_week + 6 %>
+                  <% this_week_range = "#{start_of_week.strftime('%b %-d, %Y')} – #{end_of_week.strftime('%b %-d, %Y')}" %>
+
+
+                  <div class="fake-select-dropdown">
+                    <label class="fake-select-option">
+                      <input type="radio" name="download_option" id="allData" />
+                      <span>All accounts</span>
+                    </label>
+
+                    <label class="fake-select-option">
+                      <input type="radio" name="download_option" id="thisWeek" />
+                      <span>This week <small>(<%= this_week_range %>)</small></span>
+                    </label>
+
+                    <label class="fake-select-option">
+                      <input type="radio" name="download_option" id="thisMonth" />
+                      <span>This month <small>(<%= this_month_range %>)</small></span>
+                    </label>
+
+                    <label class="fake-select-option">
+                      <input type="radio" name="download_option" id="thisYear" />
+                      <span>This year <small>(<%= this_year_range %>)</small></span>
+                    </label>
+                    <label class="fake-select-option">
+                      <input type="radio" name="download_option" id="customDate" />
+                      <span>Custom date</span>
+                    </label>
+                  </div>
+                </div>
             </div>
           </div>
           <div class="row">
-            <div class="col-md-6">
-              <div class="form-check">
-                <div>
-                  <input type="radio" id="customDate" name="download_option" value="customDate">
-                  <label for="customDate">Custom date</label>
-                </div>
-                <div>
-                  <input type="radio" id="allData" name="download_option" value="all">
-                  <label for="allData">All events</label>
-                </div>
-                <div>
-                  <input type="radio" id="thisWeek" name="download_option" value="thisWeek">
-                  <label for="thisWeek">This week</label>
-                </div>
-                <div>
-                  <input type="radio" id="thisMonth" name="download_option" value="thisMonth">
-                  <label for="thisMonth">This month</label>
-                </div>
-                <div>
-                  <input type="radio" id="thisYear" name="download_option" value="thisYear">
-                  <label for="thisYear">This year</label>
+            <div class="d-flex align-items-center">
+              <label for="searchFieldSelect" class="field-label col-sm-3">Include fields</label>
+              <div class="col-md-9">
+                <div class="chip-select">
+                  <input type="checkbox" id="dropdown-toggle" hidden />
+
+                  <label for="dropdown-toggle" class="chip-input-box position-relative" style="position: relative; overflow: hidden;">
+                    <div class="chip-list" id="selected-fields-chips">
+                      <%# This will be dynamically populated with chips for selected fields %>
+                      <span class="chip" style="color: #999;">No fields selected</span>
+                      <svg width="16" height="16" class="position-absolute" style="top: 0.625rem; right: 0.625rem;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M4 6L8 10L12 6" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </div>
+                    <div id="" class="position-absolute" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></div>
+                  </label>
+                  <div class="chip-dropdown">
+                    <label class="chip-option">
+                      <input type="checkbox" id="allFields" />
+                      All fields
+                    </label>
+                    <div class="mt-2" id="field-selection">
+                      <% ['Effective Date', 'Bundles', 'Event Type', 'Details', 'Reason Code/ Comments'].each_with_index do |title, index| %>
+                        <label class="chip-option d-flex align-items-center gap-2">
+                          <input type="checkbox" class="field-toggle" data-field-index="<%= index %>" checked />
+                          <span><%= title %></span>
+                        </label>
+                      <% end %>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -59,30 +130,31 @@
         </form>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary" id="downloadButton">Download</button>
+        <%= render "kaui/components/button/button", {
+          label: 'Close',
+          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+          type: "button",
+          html_class: "kaui-button custom-hover mx-2 my-0",
+          html_options: {
+            data: {
+              bs_dismiss: "modal"
+            },
+          }
+        } %>
+        <%= render "kaui/components/button/button", {
+          label: 'Download CSV',
+          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+          type: "button",
+          html_class: "kaui-dropdown custom-hover m-0",
+          html_options: {
+            id: "downloadButton"
+          }
+        } %>
       </div>
     </div>
   </div>
 </div>
 
-<style>
-  .download-button-right {
-    float: right;
-    margin-left: 10px;
-    background-color: white;
-    color: black;
-    text-transform: none;
-    border: 1px solid #ccc;
-    padding: 8px 15px;
-  }
-
-  .functions-container {
-    display: flex;
-    justify-content: flex-end;
-  }
-</style>
-
 <%= javascript_tag do %>
 $(document).ready(function() {
   $('.dropdown-menu').on('click', 'input[type="checkbox"], label', function(event) {
@@ -93,13 +165,20 @@ $(document).ready(function() {
     $('#downloadCsvModal').modal('show');
   });
 
-  $('#startDate, #endDate').datepicker({
-    dateFormat: 'yy-mm-dd'
+  // Native date inputs are used; no jQuery UI datepicker initialization needed
+
+  // Open native date picker on input click/focus
+  $('#startDate, #endDate').on('click focus', function() {
+    if (!this.disabled && typeof this.showPicker === 'function') {
+      this.showPicker();
+    }
   });
 
-  $('#downloadCsvModal').on('show.bs.modal', function (e) {
+   $('#downloadCsvModal').on('show.bs.modal', function (e) {
     $('#allData').prop('checked', true);
     $('#startDate, #endDate').prop('disabled', true);
+    $('#toggle-wrapper').show();
+    $('#dash').hide();
     $('#startDate').val(null);
     $('#endDate').val(null);
   });
@@ -107,24 +186,40 @@ $(document).ready(function() {
   $('#allData').change(function() {
     $('#startDate').val(null);
     $('#endDate').val(null);
+    $('#toggle-wrapper').show();
+    $('#dash').hide();
     $('#startDate, #endDate').prop('disabled', true);
+    // Change to text inputs to show placeholder
+    $('#startDate, #endDate').attr('type', 'text');
   });
 
   $('#thisWeek').change(function() {
     if ($(this).is(':checked')) {
       setDateRange("week");
+      $('#toggle-wrapper').show();
+      $('#dash').show();
+      // Change back to date inputs
+      $('#startDate, #endDate').attr('type', 'date');
     }
   });
 
   $('#thisMonth').change(function() {
     if ($(this).is(':checked')) {
       setDateRange("month");
+      $('#toggle-wrapper').show();
+      $('#dash').show();
+      // Change back to date inputs
+      $('#startDate, #endDate').attr('type', 'date');
     }
   });
 
   $('#thisYear').change(function() {
     if ($(this).is(':checked')) {
       setDateRange("year");
+      $('#toggle-wrapper').show();
+      $('#dash').show();
+      // Change back to date inputs
+      $('#startDate, #endDate').attr('type', 'date');
     }
   });
 
@@ -132,24 +227,162 @@ $(document).ready(function() {
     if ($(this).is(':checked')) {
       setDateRange("day");
       $('#startDate, #endDate').prop('disabled', false);
+      $('#toggle-wrapper').hide();
+      $('#dash').show();
+      // Change back to date inputs
+      $('#startDate, #endDate').attr('type', 'date');
     }
   });
 
   var downloadButton = document.getElementById('downloadButton');
   if (downloadButton) {
-    downloadButton.addEventListener('click', function() {
-      event.preventDefault();
+    downloadButton.addEventListener('click', function(e) {
+      e.preventDefault();
       var startDate = $('#startDate').val();
       var endDate = $('#endDate').val();
       var downloadAll = $('#allData').is(':checked');
-      var eventToFilter = $('#event_types').val().toUpperCase()
-      
-      if (downloadAll) {
-        window.open("<%= download_account_timeline_path %>?account_id=<%=@account.account_id%>&eventType="+eventToFilter, '_blank');
+      var allFieldsChecked = $('#allFields').is(':checked');
+      var eventToFilter = $('#event_types').val() ? $('#event_types').val().toUpperCase() : 'ALL';
+
+      // Build URL like reference partial
+      var url = new URL("<%= download_account_timeline_path %>", window.location.origin);
+      var params = new URLSearchParams();
+      params.append('account_id', "<%=@account.account_id%>");
+      params.append('eventType', eventToFilter);
+
+      if (!downloadAll) {
+        params.append('startDate', startDate);
+        params.append('endDate', endDate);
+      }
+
+      // Determine columnsString per reference behavior
+      var columns = [];
+      if (allFieldsChecked) {
+        var thElements = document.querySelectorAll('#accounts-timeline-table th, #timeline-table th');
+        columns = Array.from(thElements).map(function(th) { return th.textContent.trim(); });
       } else {
-        window.open("<%= download_account_timeline_path %>?account_id=<%=@account.account_id%>&startDate="+startDate+"&endDate="+endDate+"&eventType="+eventToFilter, '_blank');
+        $('#field-selection input.field-toggle:checked').each(function() {
+          var labelText = $(this).closest('label').find('span').text().trim();
+          columns.push(labelText);
+        });
       }
+      if (columns.length > 0) {
+        params.append('columnsString', columns.join(','));
+      }
+
+      url.search = params.toString();
+      window.open(url.toString(), '_blank');
+    });
+  }
+
+  document.addEventListener('click', function (e) {
+    const wrapper = document.querySelector('.chip-select');
+    const toggle = document.getElementById('dropdown-toggle');
+
+    if (wrapper && !wrapper.contains(e.target)) {
+      toggle.checked = false; // close dropdown
+    }
+  });
+
+  document.addEventListener('click', function (e) {
+    const wrapper = document.querySelector('.fake-select-wrapper');
+    const toggle = document.getElementById('single-toggle');
+    if (!wrapper.contains(e.target)) toggle.checked = false;
+  });
+
+  // Initialize on modal open
+  $('#downloadCsvModal').on('show.bs.modal', function () {
+    $('#allFields').prop('checked', true);
+    updateChipLabel();
+  });
+
+  // Initial binding
+  bindAllFieldsToggle();
+  bindDropdownAllFieldsToggle();
+
+  // Toggle behavior - this will be re-bound in updateChipLabel
+  function bindAllFieldsToggle() {
+    $('#allFields').off('change').on('change', function() {
+      var checked = $(this).is(':checked');
+      
+      // When "All fields" is checked, select all individual fields
+      // When unchecked, deselect all individual fields
+      $('#field-selection input.field-toggle').prop('checked', checked);
+      $('#allFieldsDropdown').prop('checked', checked);
+      
+      updateChipLabel();
+    });
+  }
+
+  // Also bind to the dropdown "All fields" checkbox
+  function bindDropdownAllFieldsToggle() {
+    $('#allFields').off('change').on('change', function() {
+      var checked = $(this).is(':checked');
+      
+      // When "All fields" is checked, select all individual fields
+      // When unchecked, deselect all individual fields
+      $('#field-selection input.field-toggle').prop('checked', checked);
+      
+      updateChipLabel();
     });
   }
+
+  // Update chip display based on selected fields
+  function updateChipLabel() {
+    var allFieldsChecked = $('#allFields').is(':checked');
+    var $chipList = $('#selected-fields-chips');
+    
+    if (allFieldsChecked) {
+      // Show "All fields" chip
+      $chipList.html(`
+        <span class="chip">All fields</span>
+        <svg width="16" height="16" class="position-absolute" style="top: 0.625rem; right: 0.625rem;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 6L8 10L12 6" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      `);
+    } else {
+      // Show individual field chips
+      var selectedFields = [];
+      $('#field-selection input.field-toggle:checked').each(function() {
+        var labelText = $(this).closest('label').find('span').text().trim();
+        selectedFields.push(labelText);
+      });
+      
+      if (selectedFields.length === 0) {
+        $chipList.html(`
+          <span class="chip" style="color: #999;">No fields selected</span>
+          <svg width="16" height="16" class="position-absolute" style="top: 0.625rem; right: 0.625rem;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 6L8 10L12 6" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        `);
+      } else {
+        var chipsHtml = selectedFields.map(function(field) {
+          return `<span class="chip">${field}</span>`;
+        }).join('');
+        chipsHtml = chipsHtml + `
+          <svg width="16" height="16" class="position-absolute" style="top: 0.625rem; right: 0.625rem;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 6L8 10L12 6" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        `;
+        $chipList.html(chipsHtml);
+      }
+    }
+  }
+
+  // Update chip label when individual fields change
+  $('#field-selection input.field-toggle').on('change', function() {
+    // Check if all individual fields are selected
+    var totalFields = $('#field-selection input.field-toggle').length;
+    var checkedFields = $('#field-selection input.field-toggle:checked').length;
+    
+    // Update "All fields" checkbox based on individual field selections
+    if (checkedFields === totalFields) {
+      $('#allFields').prop('checked', true);
+    } else {
+      $('#allFields').prop('checked', false);
+    }
+    
+    updateChipLabel();
+  });
 });
 <% end %>