adds batch reviewer form modal and append selected project titles to it

opentech/apply/funds/templates/funds/base_submissions_table.html

@@ -3,6 +3,7 @@
 {% load render_table from django_tables2 %}
 
 {% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/apply/fancybox.css' %}">
 {{ filter.form.media.css }}
 {% endblock %}
 
@@ -16,6 +17,8 @@
 
 {% block extra_js %}
     {{ filter.form.media.js }}
+    <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.js"></script>
+    <script src="{% static 'js/apply/fancybox-global.js' %}"></script>
     <script src="{% static 'js/apply/all-submissions-table.js' %}"></script>
     <script src="https://cdn.jsdelivr.net/npm/symbol-es6@0.1.2/symbol-es6.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/url-search-params/1.1.0/url-search-params.js"></script>

opentech/apply/funds/templates/funds/includes/batch_update_reviewer_form.html

+<div class="modal" id="batch-update-reviewers">
+    <h4>Update Reviewers</h4>
+    <div class="js-batch-titles"></div>
+    {# insert form here #}
+</div>

opentech/apply/funds/templates/funds/includes/table_filter_and_search.html

@@ -7,9 +7,7 @@
                 <button class="button button--action button--change-status" type="submit">Change status</button>
             </form>
 
-            <form action="" class="js-batch-update-reviewers">
-                <button class="button button--action button--reviewers" type="submit">Reviewers</button>
-            </form>
+            <button data-fancybox data-src="#batch-update-reviewers" class="button button--action button--reviewers js-batch-update-reviewers" type="submit">Reviewers</button>
         </div>
 
         {# Right #}
@@ -45,3 +43,5 @@
         </ul>
     </form>
 </div>
+
+{% include "funds/includes/batch_update_reviewer_form.html" %}

opentech/static_src/src/javascript/apply/batch-actions.js

@@ -6,7 +6,8 @@
     const $checkbox = $('.js-batch-select');
     const $allCheckboxInput = $('.js-batch-select-all');
     const $changeStatusForm = $('.js-batch-update-status');
-    const $changeReviewersForm = $('.js-batch-update-reviewers');
+    const $batchReviewersButton = $('.js-batch-update-reviewers');
+    const $batchTitles = $('.js-batch-titles');
     const activeClass = 'batch-actions-enabled';
 
     $allCheckboxInput.change(function () {
@@ -38,6 +39,17 @@
         }
     });
 
+    // append selected project titles to batch update reviewer modal
+    $batchReviewersButton.click(function () {
+        $batchTitles.html('');
+
+        $checkbox.each(function () {
+            if ($(this).is(':checked')) {
+                $batchTitles.append(`<p>${$(this).parents('tr').find('.js-title').data('tooltip')}</p>`);
+            }
+        });
+    });
+
     function toggleBatchActions() {
         if ($('.js-batch-select:checked').length) {
             $body.addClass(activeClass);
@@ -66,10 +78,4 @@
             }
         });
     });
-
-    // reviewers form handler
-    $changeReviewersForm.submit(function (e) {
-        e.preventDefault();
-        console.log('reviewers form submitted');
-    });
 })(jQuery);

opentech/static_src/src/sass/apply/components/_actions-bar.scss

@@ -16,8 +16,11 @@
             align-items: center;
 
             & > * {
-                padding-left: 20px;
-                margin: 0;
+                margin: 0 0 0 20px;
+
+                &:first-child {
+                    margin-left: 0;
+                }
             }
         }