From 194c519a9b5d6fd41b5fa2044d894952530df103 Mon Sep 17 00:00:00 2001
From: ajugo <andrej.jugovic7@gmail.com>
Date: Thu, 5 Jan 2023 11:14:34 +0100
Subject: [PATCH] Fix experiment table due date initialization [SCI-7649]
 (#4730)

* Fix experiment table due date initialization [SCI-7649]

* Fix due date overflow [SCI-7649]
---
 app/assets/javascripts/experiments/table.js         | 13 +++++++++++--
 app/assets/javascripts/sitewide/date_time_picker.js |  7 ++++++-
 app/assets/stylesheets/experiment/table.scss        |  1 -
 app/views/experiments/_table_due_date.html.erb      |  1 +
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/experiments/table.js b/app/assets/javascripts/experiments/table.js
index a2d20eb67..8cf10d714 100644
--- a/app/assets/javascripts/experiments/table.js
+++ b/app/assets/javascripts/experiments/table.js
@@ -66,8 +66,8 @@ var ExperimnetTable = {
   },
   initDueDatePicker: function(data) {
     // eslint-disable-next-line no-unused-vars
-    $.each(data, (id, _) => {
-      let element = `#calendarDueDate${id}`;
+    $.each(data, (_, row) => {
+      let element = `#calendarDueDate${row.id}`;
       let dueDateContainer = $(element).closest('#dueDateContainer');
       let dateText = $(element).closest('.date-text');
       let clearDate = $(element).closest('.datetime-container').find('.clear-date');
@@ -95,6 +95,15 @@ var ExperimnetTable = {
       });
 
       $(element).on('dp.show', function() {
+        var datePicker = $('.bootstrap-datetimepicker-widget.dropdown-menu')[0];
+
+        // show full datepicker menu for due date
+        if (datePicker.getBoundingClientRect().bottom > window.innerHeight) {
+          datePicker.scrollIntoView(false);
+        } else if (datePicker.getBoundingClientRect().top < 0) {
+          datePicker.scrollIntoView();
+        }
+
         dateText.attr('data-original-title', '').tooltip('hide');
         if (dueDateContainer.find('.due-date-label').data('due-date')) {
           clearDate.addClass('open');
diff --git a/app/assets/javascripts/sitewide/date_time_picker.js b/app/assets/javascripts/sitewide/date_time_picker.js
index 94260e1cb..0e896a3c2 100644
--- a/app/assets/javascripts/sitewide/date_time_picker.js
+++ b/app/assets/javascripts/sitewide/date_time_picker.js
@@ -6,12 +6,17 @@
     ev.stopPropagation();
 
     let dt = $(this);
+    let options = { ignoreReadonly: true };
 
     if (dt.data('DateTimePicker')) {
       dt.data('DateTimePicker').destroy();
     }
 
-    dt.datetimepicker({ ignoreReadonly: true });
+    if (dt.data('positioningVertical')) {
+      options.widgetPositioning = { vertical: dt.data('positioningVertical') };
+    }
+
+    dt.datetimepicker(options);
     dt.data('DateTimePicker').show();
   });
 
diff --git a/app/assets/stylesheets/experiment/table.scss b/app/assets/stylesheets/experiment/table.scss
index c27c32341..34d8d542d 100644
--- a/app/assets/stylesheets/experiment/table.scss
+++ b/app/assets/stylesheets/experiment/table.scss
@@ -380,7 +380,6 @@
       top: 0;
       visibility: hidden;
       width: 16px;
-      z-index: 999;
 
       &.open {
         visibility: visible;
diff --git a/app/views/experiments/_table_due_date.html.erb b/app/views/experiments/_table_due_date.html.erb
index 20b59fd25..6e502d038 100644
--- a/app/views/experiments/_table_due_date.html.erb
+++ b/app/views/experiments/_table_due_date.html.erb
@@ -21,6 +21,7 @@
                 data-date-locale="<%= I18n.locale %>"
                 data-date-use-current="false"
                 data-date-orientation="left"
+                data-positioning-vertical="bottom"
                 value="<%= my_module.due_date ? l(my_module.due_date, format: :full) : '' %>"/>
       </div>
       <div class="fas fa-times-circle clear-date"