Update case-attributes page to make it editable

1 files changed, 145 insertions, 10 deletions

diff --git a/wqflask/wqflask/templates/case_attributes.html b/wqflask/wqflask/templates/case_attributes.html
index 9297b703..333b9cc4 100644
--- a/wqflask/wqflask/templates/case_attributes.html
+++ b/wqflask/wqflask/templates/case_attributes.html
@@ -3,40 +3,175 @@
 
 {% block css %}
 <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
+<style>
+ .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">
-    <h2>Case Attributes Reference Table</h2>
-    <div class="row">
-        <div class="col-md-8">
-            <table class="table-responsive table-hover table-striped cell-border">
+    <div class="table-wrapper">
+        <div class="table-title">
+            <div class="row">
+                <div class="col-sm-8">
+                    <h2>Case Attributes Reference Table</h2>
+                </div>
+                <div class="col-sm-4">
+                    <button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i> Add New</button>
+                </div>
+            </div>
+        </div>
+        <table class="table table-bordered table-responsive">
                 <thead>
                     <th scope="col">Header</th>
                     <th scope="col">Description</th>
+                    <th scope="col">Actions</th>
                 </thead>
                 <tbody>
                     {% for key, value in case_attributes.items() %}
                     <tr>
-                        <td>{{ key }}</td><td>{{ value }}</td>
+                        <td>{{ key }}</td>
+                        <td>{{ value }}</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="trueh"></span></i></a>
+                        </td>
                     </tr>
                     {% endfor %}
                 </tbody>
-            </table>
-        </div>
-    </div>
+                </table>
+
 </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" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
 <script language="javascript" type="text/javascript">
  gn_server_url = "{{ gn_server_url }}";
 
  $(document).ready( function() {
-     $('.table-responsive').dataTable();
+     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:last-child").index();
+         let row = '<tr>' +
+                   '<td><input type="text" class="form-control" name="case-attribute"></td>' +
+                   '<td><input type="text" class="form-control" name="description"></td>' +
+                   '<td>' + actions + '</td>' +
+                   '</tr>';
+         $("table").append(row);
+         $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
+         $('[data-toggle="tooltip"]').tooltip();
+     });
+     // 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");
+         }
+     });
+     // 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");
+     });
  });
 </script>
 {% endblock %}