DJANGO Phase 1

backend/staticfiles/import_export/action_formats.js

@@ -0,0 +1,22 @@
+(function($) {
+  $(document).ready(function() {
+    var $actionsSelect, $formatsElement;
+    if ($('body').hasClass('grp-change-list')) {
+        // using grappelli
+        $actionsSelect = $('#grp-changelist-form select[name="action"]');
+        $formatsElement = $('#grp-changelist-form select[name="file_format"]');
+    } else {
+        // using default admin
+        $actionsSelect = $('#changelist-form select[name="action"]');
+        $formatsElement = $('#changelist-form select[name="file_format"]').parent();
+    }
+    $actionsSelect.change(function() {
+      if ($(this).val() === 'export_admin_action') {
+        $formatsElement.show();
+      } else {
+        $formatsElement.hide();
+      }
+    });
+    $actionsSelect.change();
+  });
+})(django.jQuery);

backend/staticfiles/import_export/guess_format.js

@@ -0,0 +1,21 @@
+(function($) {
+  $().ready(function () {
+    $('input.guess_format[type="file"]').change(function () {
+      var files = this.files;
+      var dropdowns = $(this.form).find('select.guess_format');
+      if(files.length > 0) {
+        var extension = files[0].name.split('.').pop().trim().toLowerCase();
+        for(var i = 0; i < dropdowns.length; i++) {
+          var dropdown = dropdowns[i];
+          dropdown.selectedIndex = 0;
+          for(var j = 0; j < dropdown.options.length; j++) {
+            if(extension === dropdown.options[j].text.trim().toLowerCase()) {
+              dropdown.selectedIndex = j;
+              break;
+            }
+          }
+        }
+      }
+    });
+  });
+})(django.jQuery);

backend/staticfiles/import_export/import.css

@@ -0,0 +1,115 @@
+.import-preview .errors {
+  position: relative;
+}
+
+.validation-error-count {
+  display: inline-block;
+  background-color: #e40000;
+  border-radius: 6px;
+  color: white;
+  font-size: 0.9em;
+  position: relative;
+  font-weight: bold;
+  margin-top: -2px;
+  padding: 0.2em 0.4em;
+}
+
+.validation-error-container {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  background-color: #ffc1c1;
+  padding: 14px 15px 10px;
+  top: 25px;
+  margin: 0 0 20px 0;
+  width: 200px;
+  z-index: 2;
+}
+
+table.import-preview tr.skip {
+  background-color: #d2d2d2;
+}
+
+table.import-preview tr.new {
+  background-color: #bdd8b2;
+}
+
+table.import-preview tr.delete {
+  background-color: #f9bebf;
+}
+
+table.import-preview tr.update {
+  background-color: #fdfdcf;
+}
+
+.import-preview td:hover .validation-error-count {
+  z-index: 3;
+}
+.import-preview td:hover .validation-error-container {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.validation-error-list {
+  margin: 0;
+  padding: 0;
+}
+
+.validation-error-list li {
+  list-style: none;
+  margin: 0;
+}
+
+.validation-error-list > li > ul {
+  margin: 8px 0;
+  padding: 0;
+}
+
+.validation-error-list > li > ul > li {
+  padding: 0;
+  margin: 0 0 10px;
+  line-height: 1.28em;
+}
+
+.validation-error-field-label {
+  display: block;
+  border-bottom: 1px solid #e40000;
+  color: #e40000;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 0.85em;
+}
+
+@media (prefers-color-scheme: dark) {
+  table.import-preview tr.skip {
+    background-color: #2d2d2d;
+  }
+
+  table.import-preview tr.new {
+    background-color: #42274d;
+  }
+
+  table.import-preview tr.delete {
+    background-color: #064140;
+  }
+
+  table.import-preview tr.update {
+    background-color: #020230;
+  }
+
+  .validation-error-container {
+    background-color: #003e3e;
+  }
+
+  /*
+  these declarations are necessary to forcibly override the
+  formatting applied by the diff-match-patch python library
+   */
+  table.import-preview td ins {
+    background-color: #190019 !important;
+  }
+
+  table.import-preview td del {
+    background-color: #001919 !important;
+  }
+}