[Feature] Modern UI roll out (#236)

This PR moves all the collection pages into the new UI in a rough push.
I did not put the same amount of care into these as into search, index, and predict.

## Major changes

- All modals are now migrated to a state based alpine.js implementation.
- jQuery is no longer present in the base layout; ajax is replace by native fetch api
- most of the pps.js is now obsolte (as I understand it; the code is not referenced any more @jebus  please double check)
- in-memory pagination for large result lists (set to 50; we can make that configurable later; performance degrades at around 1k) stukk a bit rough tracked in #235

## Minor things

- Sarch and index also use alpine now
- The loading spinner is now CSS animated (not sure if it currently gets correctly called)

## Not done

- Ihave not even cheked the admin pages. Not sure If these need migrations
- The temporary migration pages still use the old template. Not sure what is supposed to happen with those? @jebus

## What I did to test

- opend all pages in browse, and user ; plus all pages reachable from there.
- Interacted and tested the functionality of each modal superfically with exception of the API key modal (no functional test).

---
This PR is massive sorry for that; just did not want to push half-brokenn state.
@jebus @liambrydon I would be glad if you could click around and try to break it :)

Finally closes #133

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#236
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>

templates/actions/collections/compound.html

@@ -1,6 +1,9 @@
 {% if meta.can_edit %}
   <li>
-    <a role="button" data-toggle="modal" data-target="#new_compound_modal">
+    <a
+      role="button"
+      onclick="document.getElementById('new_compound_modal').showModal(); return false;"
+    >
       <span class="glyphicon glyphicon-plus"></span> New Compound</a
     >
   </li>

templates/actions/collections/compound_structure.html

@@ -2,8 +2,7 @@
   <li>
     <a
       role="button"
-      data-toggle="modal"
-      data-target="#new_compound_structure_modal"
+      onclick="document.getElementById('new_compound_structure_modal').showModal(); return false;"
     >
       <span class="glyphicon glyphicon-plus"></span> New Compound Structure</a
     >

templates/actions/collections/edge.html

@@ -1,6 +1,9 @@
 {% if meta.can_edit %}
   <li>
-    <a role="button" data-toggle="modal" data-target="#new_edge_modal">
+    <a
+      role="button"
+      onclick="document.getElementById('new_edge_modal').showModal(); return false;"
+    >
       <span class="glyphicon glyphicon-plus"></span> New Edge</a
     >
   </li>

templates/actions/collections/group.html

@@ -1,5 +1,8 @@
 <li>
-  <a role="button" data-toggle="modal" data-target="#new_group_modal">
+  <a
+    role="button"
+    onclick="document.getElementById('new_group_modal').showModal(); return false;"
+  >
     <span class="glyphicon glyphicon-plus"></span> New Group</a
   >
 </li>

templates/actions/collections/model.html

@@ -1,6 +1,9 @@
 {% if meta.can_edit and meta.enabled_features.MODEL_BUILDING %}
   <li>
-    <a role="button" data-toggle="modal" data-target="#new_model_modal">
+    <a
+      role="button"
+      onclick="document.getElementById('new_model_modal').showModal(); return false;"
+    >
       <span class="glyphicon glyphicon-plus"></span> New Model</a
     >
   </li>

templates/actions/collections/node.html

@@ -1,6 +1,9 @@
 {% if meta.can_edit %}
   <li>
-    <a role="button" data-toggle="modal" data-target="#new_node_modal">
+    <a
+      role="button"
+      onclick="document.getElementById('new_node_modal').showModal(); return false;"
+    >
       <span class="glyphicon glyphicon-plus"></span> New Node</a
     >
   </li>

templates/actions/collections/package.html

@@ -1,18 +1,23 @@
 <li>
-  <a role="button" data-toggle="modal" data-target="#new_package_modal">
+  <a
+    role="button"
+    onclick="document.getElementById('new_package_modal').showModal(); return false;"
+  >
     <span class="glyphicon glyphicon-plus"></span> New Package</a
   >
 </li>
 <li>
-  <a role="button" data-toggle="modal" data-target="#import_package_modal">
+  <a
+    role="button"
+    onclick="document.getElementById('import_package_modal').showModal(); return false;"
+  >
     <span class="glyphicon glyphicon-import"></span> Import Package from JSON</a
   >
 </li>
 <li>
   <a
     role="button"
-    data-toggle="modal"
-    data-target="#import_legacy_package_modal"
+    onclick="document.getElementById('import_legacy_package_modal').showModal(); return false;"
   >
     <span class="glyphicon glyphicon-import"></span> Import Package from legacy
     JSON</a

templates/actions/collections/reaction.html

@@ -1,6 +1,9 @@
 {% if meta.can_edit %}
   <li>
-    <a role="button" data-toggle="modal" data-target="#new_reaction_modal">
+    <a
+      role="button"
+      onclick="document.getElementById('new_reaction_modal').showModal(); return false;"
+    >
       <span class="glyphicon glyphicon-plus"></span> New Reaction</a
     >
   </li>

templates/actions/collections/rule.html

@@ -1,6 +1,9 @@
 {% if meta.can_edit %}
   <li>
-    <a role="button" data-toggle="modal" data-target="#new_rule_modal">
+    <a
+      role="button"
+      onclick="document.getElementById('new_rule_modal').showModal(); return false;"
+    >
       <span class="glyphicon glyphicon-plus"></span> New Rule</a
     >
   </li>

templates/actions/collections/scenario.html

@@ -1,6 +1,9 @@
 {% if meta.can_edit %}
   <li>
-    <a role="button" data-toggle="modal" data-target="#new_scenario_modal">
+    <a
+      role="button"
+      onclick="document.getElementById('new_scenario_modal').showModal(); return false;"
+    >
       <span class="glyphicon glyphicon-plus"></span> New Scenario</a
     >
   </li>

templates/actions/collections/setting.html

@@ -1,6 +1,9 @@
 {% if meta.can_edit %}
   <li>
-    <a role="button" data-toggle="modal" data-target="#new_setting_modal">
+    <a
+      role="button"
+      onclick="document.getElementById('new_setting_modal').showModal(); return false;"
+    >
       <span class="glyphicon glyphicon-plus"></span>New Setting</a
     >
   </li>