case-attributes: View the diffs.

4 files changed, 173 insertions, 23 deletions

diff --git a/wqflask/wqflask/templates/list_case_attribute_diffs.html b/wqflask/wqflask/templates/list_case_attribute_diffs.html
index 6882a3fb..a0f946d5 100644
--- a/wqflask/wqflask/templates/list_case_attribute_diffs.html
+++ b/wqflask/wqflask/templates/list_case_attribute_diffs.html
@@ -29,43 +29,21 @@
   <table class="table-hover table-striped cell-border dataTable no-footer">
     <thead>
       <tr>
-	<th>Edit by</th>
 	<th>Edit on</th>
 	<th>Filename</th>
-	<th colspan="2">Actions</th>
       </tr>
     </thead>
 
     <tbody>
       {%for diff in diffs%}
       <tr>
-	<td>
-	  <a href="#"
-	     title="View the user that submitted the edit.">
-	    {{diff.editor}}
-	  </a>
-	</td>
 	<td>{{diff.time_stamp}}</td>
 	<td>
-	  <a href="#view-diff"
+	  <a href="{{url_for('view_diff', inbredset_id=diff.json_diff_data.inbredset_id, diff_id=diff.id)}}"
 	     title="View the diff">
 	    {{diff.filename}}
 	  </a>
 	</td>
-	<td>
-	  <a href="#approve-diff"
-	     title="Approve the changes"
-	     class="btn btn-warning">
-	    Approve
-	  </a>
-	</td>
-	<td>
-	  <a href="#reject-diff"
-	     title="Reject the changes"
-	     class="btn btn-danger">
-	    Reject
-	  </a>
-	</td>
       </tr>
       {%else%}
       <tr>
diff --git a/wqflask/wqflask/templates/view_case_attribute_diff.html b/wqflask/wqflask/templates/view_case_attribute_diff.html
new file mode 100644
index 00000000..7ff4e20e
--- /dev/null
+++ b/wqflask/wqflask/templates/view_case_attribute_diff.html
@@ -0,0 +1,114 @@
+{%extends "base.html"%}
+{%block title%}View Case Attribute Diff{%endblock%}
+
+{%block css%}
+<link rel="stylesheet" type="text/css"
+      href="/css/DataTables/css/jquery.dataTables.css" />
+<link rel="stylesheet" type="text/css"
+      href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
+<link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
+
+<style>
+  .table-fixed-head {overflow-y: auto; height: 32em;}
+  .table-fixed-head thead th {position: sticky; top: 0;}
+  .diff-row {
+      display: grid;
+      grid-template-columns: 1rem 9rem;
+      column-gap: 0.5em;
+      padding: 0.5em;
+      background:#CCCCCC;
+      border-color:#FFFFFF;
+      border-style:solid;
+      border-radius: 10px;
+  }
+  .diff-indicator {
+      grid-column-start: 1;
+      grid-column-end: 2;
+  }
+  .diff-original {
+      grid-column-start: 2;
+      grid-column-end: 3;
+  }
+  .diff-current {
+      grid-column-start: 2;
+      grid-column-end: 3;
+  }
+  .diff-addition {color: green; font-weight: bold;}
+  .diff-deletion {color: red; font-weight: bold;}
+</style>
+{%endblock%}
+
+{%block content%}
+<div class="container">
+  <h1>View Diff</h1>
+
+  {{flash_me()}}
+
+  <div id="diff-display" class="panel panel-primary">
+    <div class="panel-heading">
+      <h3 class="panel-title">Changes</h3>
+    </div>
+    <div class="panel-body">
+      {%set the_diff = diff.json_diff_data.diff%}
+      {%if the_diff.Additions | length %}
+      <h4>Additions</h4>
+      <div class="diff-row">
+	<span class="diff-indicator"></span>
+	<span class="diff-original"></span>
+	<span class="diff-indicator diff-addition">+</span>
+	<span class="diff-current diff-addition">{{item.Current}}</span>
+      </div>
+      {%endif%}
+      {%if the_diff.Modifications | length %}
+      <h4>Modifications</h4>
+      {%for item in the_diff.Modifications%}
+      <div class="diff-row">
+	<span class="diff-indicator diff-deletion">-</span>
+	<span class="diff-original diff-deletion">{{item.Original}}</span>
+	<span class="diff-indicator diff-addition">+</span>
+	<span class="diff-current diff-addition">{{item.Current}}</span>
+      </div>
+      {%endfor%}
+      {%endif%}
+      {%if the_diff.Deletions | length %}
+      <h4>Deletions</h4>
+      <div class="diff-row">
+	<span class="diff-indicator diff-addition">+</span>
+	<span class="diff-original diff-addition">{{item.Original}}</span>
+	<span class="diff-indicator diff-deletion">-</span>
+	<span class="diff-current diff-deletion">{{item.Current}}</span>
+      </div>
+      {%endif%}
+    </div>
+    <div class="panel-footer">
+      <p>Edited by: {{diff.json_diff_data.user_id}}</p>
+    </div>
+  </div>
+
+  
+
+  <form method="POST" action="{{url_for('approve_reject_diff')}}">
+    <input type="hidden"
+	   name="inbredset_id"
+	   value="{{diff.json_diff_data.inbredset_id}}" />
+    <input type="hidden"
+	   name="diff_id"
+	   value="{{diff.id}}">
+    <button type="submit"
+	    title="Approve the changes"
+	    class="btn btn-warning">
+      Approve
+    </button>
+    <button type="submit"
+	    title="Reject the changes"
+	    class="btn btn-danger">
+      Reject
+    </button>
+  </form>
+{%endblock%}
+
+{%block js%}
+<script language="javascript"
+	type="text/javascript"
+	src="{{url_for('js', filename='DataTables/js/jquery.js')}}"></script>
+{%endblock%}
diff --git a/wqflask/wqflask/templates/view_case_attribute_diff_error.html b/wqflask/wqflask/templates/view_case_attribute_diff_error.html
new file mode 100644
index 00000000..a10f7ab9
--- /dev/null
+++ b/wqflask/wqflask/templates/view_case_attribute_diff_error.html
@@ -0,0 +1,35 @@
+{%extends "base.html"%}
+{%block title%}View Case Attribute Diff{%endblock%}
+
+{%block css%}
+<link rel="stylesheet" type="text/css"
+      href="/css/DataTables/css/jquery.dataTables.css" />
+<link rel="stylesheet" type="text/css"
+      href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
+<link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
+
+<style>
+  .table-fixed-head {overflow-y: auto; height: 32em;}
+  .table-fixed-head thead th {position: sticky; top: 0;}
+</style>
+{%endblock%}
+
+{%block content%}
+<div class="container">
+  <h1>View Diff</h1>
+
+  {{flash_me()}}
+
+  <p class="text-danger">
+    <span class="glyphicon glyphicon-exclamation-sign">
+    </span>
+    <strong>{{error.status_code}}: {{error["error"]}}</strong>
+    {{error.error_description}}
+  </p>
+{%endblock%}
+
+{%block js%}
+<script language="javascript"
+	type="text/javascript"
+	src="{{url_for('js', filename='DataTables/js/jquery.js')}}"></script>
+{%endblock%}
diff --git a/wqflask/wqflask/views.py b/wqflask/wqflask/views.py
index f1d5d71c..81597e95 100644
--- a/wqflask/wqflask/views.py
+++ b/wqflask/wqflask/views.py
@@ -1244,3 +1244,26 @@ def list_case_attribute_diffs(inbredset_id: int) -> Response:
                 "list_case_attribute_diffs.html",
                     inbredset_id=inbredset_id,
                     diffs=diffs))
+
+@app.route("/case-attribute/<int:inbredset_id>/diff/<int:diff_id>/view", methods=["GET"])
+def view_diff(inbredset_id:int, diff_id: int) -> Response:
+    """View the pending diff."""
+    token = session_info()["user"]["token"].either(
+        lambda err: err, lambda tok: tok["access_token"])
+    return monad_requests.get(
+        urljoin(current_app.config["GN_SERVER_URL"],
+                f"/api/case-attribute/{inbredset_id}/diff/{diff_id}/view"),
+        headers={"Authorization": f"Bearer {token}"}).then(
+            lambda resp: resp.json()).either(
+                lambda err: render_template(
+                    "view_case_attribute_diff_error.html", error=err.json()),
+                lambda diff: render_template(
+                    "view_case_attribute_diff.html", diff=diff))
+
+@app.route("/case-attribute/diff/approve-reject", methods=["POST"])
+def approve_reject_diff(diff_filename: str) -> Response:
+    """Reject the diff."""
+    return jsonify({
+        "error": "Not Implemented.",
+        "error_description": "Would reject the diff."
+    }), 500