backups: Change "select all" to a pure JavaScript implementation

- Remove Python code to handle the extra item in the submitted form
- The select-all checkbox is never submitted in the form since it is missing the
  "name" attribute
- Replace selector ':checkbox' with the faster selector '[type=checkbox]'

Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

plinth/modules/backups/forms.py

@@ -40,7 +40,7 @@ logger = logging.getLogger(__name__)
 
 def _get_app_choices(apps):
     """Return a list of check box multiple choices from list of apps."""
-    choices = [('select_all', _("Include all apps"))]
+    choices = []
     for app in apps:
         name = app.app.name
         if not app.has_data:

plinth/modules/backups/static/select_all.js

@@ -21,30 +21,45 @@
   for the JavaScript code in this page.
 */
 
+function addSelectAll() {
+    let ul = document.getElementById('id_backups-selected_apps');
+    let li = document.createElement('li');
 
-// jQuery selector for the "select all" checkbox
-var select_all = "#id_backups-selected_apps_0";
+    let label = document.createElement('label');
+    label.for = "select_all";
 
-// Initialize the "select all" checkbox to checked
-$(select_all).prop('checked', true);
+    let checkbox = document.createElement('input');
+    checkbox.type = "checkbox";
+    checkbox.checked = "checked";
+    checkbox.id = "select-all";
+
+    label.appendChild(checkbox);
+    li.appendChild(label);
+
+    ul.insertBefore(li, ul.childNodes[0]);
+};
+
+addSelectAll();
 
 /*
  * When there is a change on the "select all" checkbox,set the
  * checked property of all the checkboxes to the value of the
  * "select all" checkbox
  */
-$(select_all).change(function() {
-    $(":checkbox").prop('checked', $(this).prop("checked"));
+$("#select-all").change(function() {
+    $("[type=checkbox]").prop('checked', $(this).prop("checked"));
 });
 
 
-$(':checkbox').change(function() {
+$('[type=checkbox]').change(function() {
     // If the rest of the checkbox items are checked check the "select all" checkbox as well
-    if ($(':checkbox:checked').length == ($(':checkbox').length-1)) {
-        $(select_all).prop('checked', true);
+    if ($('[type=checkbox]:checked').length == ($('[type=checkbox]').length - 1)) {
+        $("#select-all").prop('checked', true);
     }
     // Uncheck "select all" if one of the listed checkbox item is unchecked
     if (false == $(this).prop("checked")) {
-        $(select_all).prop('checked', false);
+        $("#select-all").prop('checked', false);
     }
 });
+
+

plinth/modules/backups/views.py

@@ -103,7 +103,7 @@ class CreateArchiveView(SuccessMessageMixin, FormView):
             repository.mount()
 
         name = datetime.now().strftime('%Y-%m-%d:%H:%M')
-        selected_apps = form.cleaned_data['selected_apps'][1:]
+        selected_apps = form.cleaned_data['selected_apps']
         repository.create_archive(name, selected_apps)
         return super().form_valid(form)
 
@@ -225,7 +225,7 @@ class RestoreFromUploadView(BaseRestoreView):
     def form_valid(self, form):
         """Restore files from the archive on valid form submission."""
         path = self.request.session.get(SESSION_PATH_VARIABLE)
-        selected_apps = form.cleaned_data['selected_apps'][1:]
+        selected_apps = form.cleaned_data['selected_apps']
         backups.restore_from_upload(path, selected_apps)
         return super().form_valid(form)
 
@@ -243,7 +243,7 @@ class RestoreArchiveView(BaseRestoreView):
     def form_valid(self, form):
         """Restore files from the archive on valid form submission."""
         repository = get_repository(self.kwargs['uuid'])
-        selected_apps = form.cleaned_data['selected_apps'][1:]
+        selected_apps = form.cleaned_data['selected_apps']
         repository.restore_archive(self.kwargs['name'], selected_apps)
         return super().form_valid(form)