merge changes

1 files changed, 415 insertions, 0 deletions

diff --git a/gn2/wqflask/templates/case_attributes.html b/gn2/wqflask/templates/case_attributes.html
new file mode 100644
index 00000000..d1669761
--- /dev/null
+++ b/gn2/wqflask/templates/case_attributes.html
@@ -0,0 +1,415 @@
+{% extends "base.html" %}
+{% block title %}Trait Submission{% endblock %}
+
+{% block css %}
+<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
+<style>
+ .reject, .approve {
+     margin-bottom: 5px;
+ }
+.case-attribute {
+     width: 10em;
+ }
+ .table-title {
+     padding-bottom: 10px;
+     margin: 0 0 10px;
+ }
+
+ .table-title h2 {
+     margin: 6px 0 0;
+     font-size: 22px;
+ }
+ .table-title .add-new {
+     float: right;
+     height: 30px;
+     font-weight: bold;
+     font-size: 12px;
+     text-shadow: none;
+     min-width: 100px;
+     border-radius: 50px;
+     line-height: 13px;
+ }
+ .table-title .add-new i {
+     margin-right: 4px;
+ }
+ table.table {
+     table-layout: fixed;
+     width: 70%;
+ }
+ table.table tr th, table.table tr td {
+     border-color: #e9e9e9;
+ }
+ table.table th i {
+     font-size: 13px;
+     margin: 0 5px;
+     cursor: pointer;
+ }
+ table.table th:last-child {
+     width: 100px;
+ }
+ table.table td a {
+     cursor: pointer;
+     display: inline-block;
+     margin: 0 5px;
+     min-width: 24px;
+ }
+ table.table td a.add {
+     color: #27C46B;
+ }
+ table.table td a.edit {
+     color: #FFC107;
+ }
+ table.table td a.delete {
+     color: #E34724;
+ }
+ table.table td i {
+     font-size: 19px;
+ }
+ table.table td a.add i {
+     font-size: 24px;
+     margin-right: -1px;
+     position: relative;
+     top: 3px;
+ }
+ table.table .form-control {
+     height: 32px;
+     line-height: 32px;
+     box-shadow: none;
+     border-radius: 2px;
+ }
+ table.table .form-control.error {
+     border-color: #f50000;
+ }
+ table.table td .add {
+     display: none;
+ }
+</style>
+{% endblock %}
+
+{% block content %}
+<!-- Start of body -->
+<div class="container">
+    <div class="table-wrapper">
+        <div class="table-title">
+            <div class="row">
+                <div class="col-sm-8">
+                    <h2>Case Attributes Reference Table</h2>
+                </div>
+            </div>
+        </div>
+        <table class="table table-bordered table-responsive">
+	    <colgroup>
+		<col class="case-attribute">
+		<col>
+		<col>
+	    </colgroup>
+            <thead>
+                <th scope="col">Case Attribute</th>
+                <th scope="col">Description</th>
+                <th scope="col">Actions</th>
+            </thead>
+            <tbody>
+                {% for id_, name, description in case_attributes %}
+                <tr data-id="{{id_}}">
+                    <td class="name" data-original-value="{{ name }}">{{ name }}</td>
+                    <td class="description" data-original-value="{{ description }}">{{ description }}</td>
+                    <td>
+                        <a class="add" title="Add" data-toggle="tooltip"><i><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></i></a>
+                        <a class="edit" title="Edit" data-toggle="tooltip"><i><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></i></a>
+                        <a class="delete" title="Delete" data-toggle="tooltip"><i><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></i></a>
+                    </td>
+                </tr>
+                {% endfor %}
+		<tr id="addNew">
+		    <td></td>
+		    <td></td>
+		    <td><button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i> Add New</button></td>
+		</tr>
+            </tbody>
+        </table>
+
+	{% if modifications or inserts or deletions %}
+	<h2>Please Review These Changes</h2>
+	{% endif %}
+	{% if modifications %}
+	<h3>Modify Existing Case Attributes</h3>
+	<table class="table table-responsive table-hover table-striped cell-border" id="table-modifications">
+            <thead>
+		<th scope="col">Author</th>
+		<th scope="col">Diff</th>
+		<th scope="col">Action</th>
+            </thead>
+            <tbody>
+		{% for data in modifications %}
+		<tr>
+		    <td>{{ data.get('author') }}</td>
+		    <td>
+			{% if data.get("name")%}
+			<b>Name:</b><br/>
+			<small>Original: </small>{{ data["name"].get("Original") }}<br/>
+			<small>Current: </small>{{ data["name"].get("Current") }} <br/>
+			<small>Diff:</small><br/>
+			<pre>{{data["name"].get("Diff")}}</pre>
+			{% endif %}
+			{% if data.get("description")%}
+			<b>Description:</b><br/>
+			<small>Original: </small>{{ data["description"].get("Original") }}<br/>
+			<small>Current: </small>{{ data["description"].get("Current") }} <br/>
+			<small>Diff:</small><br/>
+			<pre>{{data["description"].get("Diff")}}</pre>
+			{% endif %}
+		    </td>
+		    <td>
+                        <button data-id="{{ data.get('id') }}" type="button"
+                                class="btn btn-default reject">
+                            Reject
+                        </button>
+			<button data-id="{{ data.get('id') }}" type="button"
+                                class="btn btn-success approve">
+                            Approve
+                        </button>
+                    </td>
+		</tr>
+		{% endfor %}
+            </tbody>
+	</table>
+	{% endif %}
+	{% if deletions %}
+	<h3>Delete Existing Case Attributes</h3>
+	<table class="table table-responsive table-hover table-striped cell-border" id="table-modifications">
+	    <colgroup>
+		<col class="case-attribute">
+		<col>
+		<col>
+		<col>
+	    </colgroup>
+            <thead>
+		<th scope="col">Case Attribute</th>
+		<th scope="col">Author</th>
+		<th scope="col">Description</th>
+		<th scope="col">Action</th>
+            </thead>
+            <tbody>
+		{% for data in deletions %}
+                <tr>
+		    <td>{{data.get("name")}}</td>
+                    <td>{{ data.get('author') }}</td>
+		    <td>{{data.get("description")}}</td>
+		    <td>
+			<button data-id="{{data.get('id')}}" type="button"
+				class="btn btn-default reject">
+			    Reject
+			</button>
+			<button data-id="{{data.get('id')}}" type="button" class="btn btn-success approve">
+			    Approve
+			</button>
+                    </td>
+		</tr>
+		{% endfor %}
+            </tbody>
+	</table>
+	{% endif %}
+
+	{% if inserts %}
+	<h3>Insert New Case Attributes</h3>
+	<table class="table table-responsive table-hover table-striped cell-border" id="table-modifications">
+	    <colgroup>
+		<col class="case-attribute">
+		<col>
+		<col>
+		<col>
+	    </colgroup>
+	    <thead>
+		<th scope="col">Case Attribute</th>
+		<th scope="col">Author</th>
+		<th scope="col">Description</th>
+		<th scope="col">Action</th>
+	    </thead>
+	    <tbody>
+		{% for data in inserts %}
+                <tr>
+		    <td>{{ data.get("name") }}</td>
+		    <td>{{ data.get("author")}}</td>
+		    <td>{{ data.get("description") }} </td>
+		    <td>
+			<button data-id="{{ data.get('id') }}" type="button"
+					 class="btn btn-default reject">
+			    Reject
+			</button>
+			<button data-id="{{ data.get('id') }}" type="button" class="btn btn-success approve">
+			    Approve
+			</button>
+                    </td>
+		</tr>
+		{% endfor %}
+			    </tbody>
+	</table>
+	{% endif %}
+    </div>
+    {%endblock%}
+
+    {% block js %}
+    <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.js') }}"></script>
+    <script language="javascript" type="text/javascript">
+     gn_server_url = "{{ gn_server_url }}";
+
+     $(document).ready( function() {
+	 let actions = $("table td:last-child").html();
+	 // Append table with add row form on add new button click
+	 $(".add-new").click(function(){
+             $(this).attr("disabled", "disabled");
+	     let index = $("table tbody tr:nth-last-child(2)").index();
+             let row = '<tr>' +
+                       '<td class="name"><input type="text" class="form-control"></td>' +
+                       '<td class="description"><input type="text" class="form-control"></td>' +
+                       '<td>' + actions + '</td>' +
+                       '</tr>';
+	     $(row).insertBefore("#addNew")
+             $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
+	 });
+	 // Add row on add button click
+	 $(document).on("click", ".add", function(){
+             let empty = false;
+             let input = $(this).parents("tr").find('input[type="text"]');
+             input.each(function(){
+		 if(!$(this).val()){
+                     $(this).addClass("error");
+                     empty = true;
+		 } else{
+                     $(this).removeClass("error");
+		 }
+             });
+             $(this).parents("tr").find(".error").first().focus();
+             if(!empty){
+		 input.each(function(){
+                     $(this).parent("td").html($(this).val());
+		 });
+		 $(this).parents("tr").find(".add, .edit").toggle();
+		 $(".add-new").removeAttr("disabled");
+             }
+	     else {
+		 return;
+	     }
+
+	     let nameNode = $(this).parents("tr").find(".name");
+	     let descNode = $(this).parents("tr").find(".description");
+	     let name = nameNode.html();
+	     let desc = descNode.html();
+	     let nodeId = $(this).parents("tr").data("id");
+	     let originalName = nameNode.data("original-value");
+	     let originalDesc = descNode.data("original-value");
+	     let diff = {};
+	     if (nodeId) {
+		 if (name !== originalName) {
+		     diff["Modification"] = {
+			 name: {
+			     Original: originalName,
+			     Current: name,
+		     }};
+		 }
+		 if (desc !== originalDesc) {
+		     let desc_ = {
+			 Original: originalDesc,
+			 Current: desc,
+		     }
+		     if (Object.keys(diff).length == 0) {
+			 diff["Modification"] = {
+			     description: desc_
+			 }
+		     }
+		     else {
+			 diff["Modification"].description = desc_;
+		     }
+		 }
+		 if (!Object.keys(diff).length == 0) {
+		     diff["id"] = nodeId;
+		 }
+	     } else {
+		 if (name) {
+		     diff["Insert"] = {
+			 name: name,
+		     }
+		 }
+		 if (desc) {
+		     if (Object.keys(diff).length == 0) {
+			 diff["Insert"] = {
+			     description: desc,
+			 }
+		     }
+		     else {
+			 diff["Insert"].description = desc;
+		     }
+		 }
+	     }
+	     if(diff) {
+		 $.ajax({
+		     type: "POST",
+		     data: {"data": JSON.stringify(diff)},
+		     url: '{{ url_for("metadata_edit.update_case_attributes") }}',
+		     /* contentType: "application/json", */
+		     success: function(data, status, xhr) { location.reload() }
+		 }
+		 )
+	     }
+	 });
+	 // Edit row on edit button click
+	 $(document).on("click", ".edit", function(){
+             $(this).parents("tr").find("td:not(:last-child)").each(function(){
+		 $(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');
+             });
+             $(this).parents("tr").find(".add, .edit").toggle();
+             $(".add-new").attr("disabled", "disabled");
+	 });
+
+	 // Delete row on delete button click
+	 $(document).on("click", ".delete", function(){
+             $(this).parents("tr").remove();
+             $(".add-new").removeAttr("disabled");
+	     let node = $(this).parents("tr")
+
+	     let diff = {};
+	     let nodeId = $(this).parents("tr").data("id");
+	     diff["Deletion"] = {
+		 name: node.find(".name").data("original-value"),
+		 description: node.find(".description").data("original-value"),
+		 id: node.data("id")}
+	     if (nodeId){
+		 $.ajax({
+		     type: "POST",
+		     data: {"data": JSON.stringify(diff)},
+		     url: '{{ url_for("metadata_edit.update_case_attributes") }}',
+		     success: function(data, status, xhr) {
+			 location.reload();
+		     }
+	     })}
+	 });
+     });
+
+     $(".reject").click(function(){
+	 let id = $(this).data("id");
+	 if (Number.isInteger(id)) {
+	     $.ajax({
+		 type: "POST",
+		 data: {"id": id},
+		 url: '{{ url_for("metadata_edit.reject_case_attribute_data") }}',
+		 success: function(data, status, xhr) {
+		     location.reload();
+		 }
+	     })
+	 }
+     });
+     $(".approve").click(function(){
+	 let id = $(this).data("id");
+	 if (Number.isInteger(id)) {
+	     $.ajax({
+		 type: "POST",
+		 data: {"id": id},
+		 url: '{{ url_for("metadata_edit.approve_case_attribute_data") }}',
+		 success: function(data, status, xhr) {
+		     location.reload();
+		 }
+	     })
+	 }
+     });
+    </script>
+    {% endblock %}