adds checkboxes to all submissions table

opentech/apply/funds/tables.py

@@ -67,12 +67,13 @@ class SubmissionsTable(tables.Table):
 
 class AdminSubmissionsTable(SubmissionsTable):
     """Adds admin only columns to the submissions table"""
+    selected = tables.CheckBoxColumn(accessor=A('pk'), attrs={'input': {'class': 'js-batch-select'}, 'th__input': {'class': 'js-batch-select-all'}})
     lead = tables.Column(order_by=('lead.full_name',))
     reviews_stats = tables.TemplateColumn(template_name='funds/tables/column_reviews.html', verbose_name=mark_safe("Reviews\n<span>Assgn.\tComp.</span>"), orderable=False)
     screening_status = tables.Column(verbose_name="Screening")
 
     class Meta(SubmissionsTable.Meta):
-        fields = ('title', 'phase', 'stage', 'fund', 'round', 'lead', 'submit_time', 'last_update', 'screening_status', 'reviews_stats')  # type: ignore
+        fields = ('selected', 'title', 'phase', 'stage', 'fund', 'round', 'lead', 'submit_time', 'last_update', 'screening_status', 'reviews_stats')  # type: ignore
         sequence = fields + ('comments',)
 
     def render_lead(self, value):

opentech/apply/funds/templates/funds/tables/table.html

@@ -5,7 +5,9 @@
     <tr {{ row.attrs.as_html }}>
         {% for column, cell in row.items %}
             <td {{ column.attrs.td.as_html }}>
-                <span class="mobile-label {{ column.attrs.td.class }}">{{ column.header }}: </span>
+                {% if column.name != "selected" %}
+                    <span class="mobile-label {{ column.attrs.td.class }}">{{ column.header }}: </span>
+                {% endif %}
                 {% if column.localize == None %}{{ cell }}{% else %}{% if column.localize %}{{ cell|localize }}{% else %}{{ cell|unlocalize }}{% endif %}{% endif %}
             </td>
         {% endfor %}

opentech/static_src/src/sass/apply/abstracts/_mixins.scss

@@ -221,3 +221,23 @@
         height: calc(100vh -  #{$listing-header-height});
     }
 }
+
+@mixin checkbox-without-label {
+    input[type='checkbox'] {
+        margin: 0 auto;
+        display: block;
+        width: 20px;
+        height: 20px;
+        border: 1px solid $color--mid-grey;
+        -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+        -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+        appearance: none;
+        background-color: $color--white;
+
+        &:checked {
+            background: url('./../../images/tick.svg') $color--dark-blue center no-repeat;
+            background-size: 12px;
+            border: 1px solid $color--dark-blue;
+        }
+    }
+}

opentech/static_src/src/sass/apply/components/_all-submissions-table.scss

@@ -37,6 +37,14 @@
                     width: 150px;
                 }
             }
+
+            &.selected {
+                @include checkbox-without-label;
+
+                @include media-query($table-breakpoint) {
+                    width: 60px;
+                }
+            }
         }
 
         tr {
@@ -58,7 +66,7 @@
                     display: flex;
                     align-items: center;
                     padding-top: 20px;
-                    padding-left: 10px;
+                    padding-left: 0;
                 }
 
                 @include media-query(desktop) {
@@ -142,6 +150,16 @@
                 }
             }
 
+            // batch action checkboxes
+            &.selected {
+                @include checkbox-without-label;
+                display: none;
+
+                @include media-query($table-breakpoint) {
+                    display: table-cell;
+                }
+            }
+
             // arrow to toggle project info - added via js
             @include media-query($table-breakpoint) {
                 .arrow {