From 15843ebc69985e14afb8237c0ce05f03945b03ab Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <lorenzo.natali@geo-solutions.it>
Date: Tue, 17 Jan 2017 12:24:19 +0100
Subject: [PATCH] Added edit metadata wizard

 - First version of a wizard to edit metadata
 - Separated tab for preview
---
 .../templates/layers/layer_metadata.html      |  39 ++---
 geonode/layers/templates/layouts/panels.html  | 160 ++++++++++++++----
 geonode/settings.py                           |   4 +-
 geonode/templates/metadata_form_js.html       | 106 ++++++++----
 4 files changed, 219 insertions(+), 90 deletions(-)

diff --git a/geonode/layers/templates/layers/layer_metadata.html b/geonode/layers/templates/layers/layer_metadata.html
index a81c6f8a833..1ac80831bb6 100644
--- a/geonode/layers/templates/layers/layer_metadata.html
+++ b/geonode/layers/templates/layers/layer_metadata.html
@@ -20,7 +20,7 @@
 
     <style>
         .xxs-font-size{
-            font-size: 10px;    
+            font-size: 10px;
         }
         textarea{
             width:100%;
@@ -29,7 +29,7 @@
             width:100%;
         }
         .test-class{
-            background-color: red; 
+            background-color: red;
         }
         table{
             table-layout:fixed;
@@ -49,56 +49,51 @@
             right: 0;
         }
 
-        .tab-pane{
-            height:650px;
-            overflow-y:scroll;
-        }
-        
         .fancy-checkbox input[type="radio"],
         .fancy-checkbox input[type="checkbox"],
         .fancy-checkbox .checked {
             display: none;
         }
-         
+
         .fancy-checkbox input[type="radio"]:checked ~ .checked,
         .fancy-checkbox input[type="checkbox"]:checked ~ .checked {
             display: inline-block;
             color:red;
         }
-         
+
         .fancy-checkbox input[type="radio"]:checked ~ .unchecked,
         .fancy-checkbox input[type="checkbox"]:checked ~ .unchecked {
             display: none;
         }
-        
+
         .tokenfield,
         #id_resource-title {
             width: 95% !important;
         }
-        
+
         .leaflet-container { /* all maps */
             height: 250px !important;
         }
-        
+
         .map-overlay {
             display: none !important;
         }
-        
+
         #regions_multiselect_container.content {
             position: absolute;
         }
-        
+
         .fstControls {
             width: 100% !important;
         }
-        
+
         .fstElement {
             font-size: 0.8em !important;
         }
-        
+
         .fstResultItem {
             font-size: 1.2em !important;
-        }    
+        }
     </style>
 {{ block.super }}
 {% endblock %}
@@ -178,7 +173,7 @@ <h2 class="page-title">{% trans "Edit Metadata" %}&nbsp;{% blocktrans with layer
           {% form layer_form using "layouts/panels.html" %}
           {# layer_form|as_bootstrap #}
         </div>
-        
+
         <div class="row">
           <div class="col-md-12 grid-spacer">
             <fieldset class="form-controls modal-forms modal hide fade" id="poc_form" >
@@ -194,7 +189,7 @@ <h2>{% trans "Metadata Provider" %}</h2>
 
             {% if not layer.metadata_uploaded_preserve %}
             <div class="form-actions">
-			  <input type="button" id="btn_back_dwn" class="btn btn-primary" value="{% trans "<< Back" %}"/>
+              <input type="button" id="btn_back_dwn" class="btn btn-primary" style="display: none" value="{% trans "<< Back" %}"/>
               <input type="submit" id="btn_upd_md_dwn" class="btn btn-primary" value="{% trans "Update" %}"/>
               <input type="button" id="btn_next_dwn" class="btn btn-primary" value="{% trans "Next >>" %}"/>
             </div>
@@ -226,7 +221,7 @@ <h2>{% trans "Metadata Provider" %}</h2>
             });
         });
     </script> -->
-    
+
     <!-- <script type="text/javascript">
         $(document).ready(function() {
             $('#id_resource-regions').treeMultiselect({
@@ -234,7 +229,7 @@ <h2>{% trans "Metadata Provider" %}</h2>
             });
         });
     </script> -->
-    
+
     <!-- Doc & Examples: http://dbrekalo.github.io/fastselect/ -->
     <script type="text/javascript">
         $(document).ready(function() {
@@ -243,4 +238,4 @@ <h2>{% trans "Metadata Provider" %}</h2>
         });
     </script>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/geonode/layers/templates/layouts/panels.html b/geonode/layers/templates/layouts/panels.html
index 9101450a6a6..8611a31cc11 100644
--- a/geonode/layers/templates/layouts/panels.html
+++ b/geonode/layers/templates/layouts/panels.html
@@ -1,37 +1,135 @@
 {% load floppyforms %}
 {% load i18n %}
 <style>
-#mdeditor_form > .tab-content > .tab-pane {
-  overflow: auto;
-  height: auto;
-  overflow-x: hidden;
-}
-
 #regions_multiselect_container .fstElement {
   min-width: 300px;
 }
 </style>
+<style>
+/* metadata edit workflow wizard */
+.wizard--progress {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  color: #849397;
+}
+.wizard--progress > li {
+  position: relative;
+  display: table-cell;
+  text-align: center;
+  font-size: 0.8em;
+}
+.wizard--progress > li:hover {
+  cursor: pointer;
+}
+.wizard--progress > li:before {
+  transition: background 0.5s ease 0.1s;
+  content: attr(data-step);
+  display: block;
+  margin: 0 auto;
+  background: #DFE3E4;
+  width: 3em;
+  height: 3em;
+  text-align: center;
+  margin-bottom: 0.25em;
+  line-height: 3em;
+  border-radius: 100%;
+  position: relative;
+  z-index: 1000;
+}
+.wizard--progress > li:after {
+  transition: background 1s ease;
+  content: '';
+  position: absolute;
+  display: block;
+  background: #DFE3E4;
+  width: 100%;
+  height: 0.5em;
+  top: 1.25em;
+  left: 50%;
+  margin-left: 1.5em\9;
+  z-index: -1;
+}
+.wizard--progress > li:last-child:after {
+  display: none;
+}
+.wizard--progress > li.is-complete {
+  color: #2ECC71;
+}
+.wizard--progress > li.is-complete:before, .wizard--progress > li.is-complete:after {
+  color: #FFF;
+  background: #2ECC71;
+}
+.wizard--progress > li.is-complete:before {
+  z-index: 1;
+}
+.wizard--progress > li.is-complete:after {
+  z-index: 0;
+}
+.wizard--progress > li.is-active {
+  color: #3498DB;
+}
+.wizard--progress > li.is-active:before {
+  color: #FFF;
+  background: #3498DB;
+}
+
+/**
+ * Needed for IE8
+ */
+.wizard--progress__last:after {
+  display: none !important;
+}
+
+/**
+ * Size Extensions
+ */
+.wizard--progress--medium {
+  font-size: 1.5em;
+}
+
+.wizard--progress--large {
+  font-size: 2em;
+}
 
+.wizard--progress a {
+  text-decoration: none;
+}
+.wizard--progress li:hover {
+  text-decoration: underline;
+}
+
+</style>
 <ul id="md_tabs" class="nav nav-tabs">
-    <li id="first" class="active">
-        <a data-toggle="tab" href="#mandatory">Let's start > </a>
-    </li>
-    <li id="second">
-        <a data-toggle="tab" href="#advanced">Almost there... > </a>
-    </li>
-    <li id="last">
-        <a data-toggle="tab" href="#ownership">Done!</a>
+    <li id="metadata_edit_tab" class="active">
+        <a data-toggle="tab" href="#edit-metadata">Edit</a>
     </li>
-    <li id="preview_tab">
+    <li id="preview_tab" data-toggle="tab" dhref="#preview">
         <a data-toggle="tab" href="#preview">Preview</a>
     </li>
 </ul>
 
 
+
+
 {% block body_outer %}
 <div class="tab-content">
-
-    <div id="mandatory" class="tab-pane fade in active" style="">
+<div id="edit-metadata" class="tab-content tab-pane fade in active">
+  <ul class="wizard--progress wizard--progress--medium">
+      <li data-step="1" id="first" class="is-active" data-toggle="tab" href="#mandatory">
+          <a>Let's start</a>
+      </li>
+      <li data-step="2" id="second"  data-toggle="tab" href="#advanced">
+          <a>Almost there... </a>
+      </li>
+      <li data-step="3" id="last" data-toggle="tab" href="#ownership">
+          <a>Done!</a>
+      </li>
+  </ul>
+    <div id="mandatory" class="tab-pane fade in active">
         <!--<br />-->
         <div class="panel-group">
             <div class="panel panel-default">
@@ -43,9 +141,6 @@
                             </div>
                         </div>
                     </div>
-                    <div class = "row">
-                    </div>
-                    <hr/>
                     <div class="row">
                         <div class="col">
                             <div id="basicDescriptiveInfo" class="container-fluid">
@@ -122,7 +217,7 @@
                 <div class="panel panel-default">
                     <!-- div class="panel-heading">Metadata info</div -->
                     <div class="panel-body">
-                        <div class="row" id="mdinfo" style="max-height: 590px">
+                        <div class="row" id="mdinfo">
                             <div class="row">
                                 <div class="col-lg-4">
                                     <div>
@@ -183,7 +278,7 @@
         <br />
         <p>Other, Optional, Metadata</p>
         <div class="row">
-            <div class="col-xs-6 col-lg-5">
+            <div class="col-xs-12 col-lg-5">
                 <div>
                     <span><label for="{{ layer_form.edition|id }}">{{ layer_form.edition.label }}</label></span>
                     <!--<p class="xxs-font-size">(Version of the cited resource)</p>-->
@@ -200,7 +295,7 @@
                     {{ layer_form.supplemental_information }}
                 </div>
             </div>
-            <div class="col-xs-6 col-lg-6">
+            <div class="col-xs-12 col-lg-6">
 
                     <div class="col-xs-12 col-lg-6">
                       <div class="input-group date">
@@ -309,15 +404,14 @@ <h4 class="modal-title" id="exampleModalLabel">Message box</h4>
             </div>
         </div>
     </div>
-
-    <div id="preview" class="tab-pane fade" style="overflow: hidden;">
-        <!-- <iframe id="preview_encoder_iframe" height="100%" width="100%" style="width:0;height:0;border:0;border:none;" src="{% url 'layer_metadata_detail' resource.typename %}"></iframe> -->
-        {% if metadataxsl %}
-            <iframe id="preview_encoder_iframe" height="100%" width="100%" style="width:0;height:0;border:0;border:none;" src="/showmetadata/xsl/{{resource.id}}"></iframe>
-        {% else %}
-            <iframe id="preview_encoder_iframe" height="100%" width="100%" style="width:0;height:0;border:0;border:none;" src="/catalogue/csw_to_extra_format/{{resource.uuid}}/{{resource.title}}.html"></iframe>
-        {% endif %}
-    </div>
-
+</div>
+<div id="preview" class="tab-pane fade" style="overflow: hidden;">
+    <!-- <iframe id="preview_encoder_iframe" height="100%" width="100%" style="width:0;height:0;border:0;border:none;" src="{% url 'layer_metadata_detail' resource.typename %}"></iframe> -->
+    {% if metadataxsl %}
+        <iframe id="preview_encoder_iframe" frameborder="0" scrolling="no" onload="if(this.contentWindow.document.body) {$('#preview').height(this.contentWindow.document.body.scrollHeight)}" src="/showmetadata/xsl/{{resource.id}}"></iframe>
+    {% else %}
+        <iframe id="preview_encoder_iframe" frameborder="0" scrolling="no" onload="if(this.contentWindow.document.body) {$('#preview').height(this.contentWindow.document.body.scrollHeight)}" src="/catalogue/csw_to_extra_format/{{resource.uuid}}/{{resource.title}}.html"></iframe>
+    {% endif %}
+</div>
 </div>
 {% endblock %}
diff --git a/geonode/settings.py b/geonode/settings.py
index d2cc863de52..e1112d4bc9b 100644
--- a/geonode/settings.py
+++ b/geonode/settings.py
@@ -1063,4 +1063,6 @@
 # e.g. THESAURI = [{'name':'inspire_themes', 'required':True, 'filter':True}, {'name':'inspire_concepts', 'filter':True}, ]
 # Required: (boolean, optional, default false) mandatory while editing metadata (not implemented yet)
 # Filter: (boolean, optional, default false) a filter option on that thesaurus will appear in the main search page
-THESAURI = [{'name':'inspire_themes', 'required':True, 'filter':True}]
+# THESAURI = [{'name':'inspire_themes', 'required':True, 'filter':True}]
+THESAURI = []
+
diff --git a/geonode/templates/metadata_form_js.html b/geonode/templates/metadata_form_js.html
index d30421cac98..5d077c1d5e8 100644
--- a/geonode/templates/metadata_form_js.html
+++ b/geonode/templates/metadata_form_js.html
@@ -9,7 +9,7 @@
 <script type="text/javascript">
 {% autoescape off %}
 
-    $('.modal-forms').css('max-height', '500px').css('overflow-y', 'scroll');    
+    $('.modal-forms').css('max-height', '500px').css('overflow-y', 'scroll');
     $('.modal-cloose-btn').css('margin','20px');
 
     $('.modal-cloose-btn').click(function(){
@@ -21,37 +21,59 @@
         $('#poc_form').modal();
       }
     });
+    var updateWizard = function() {
+      var activeTab = $("#edit-metadata .wizard--progress li.is-active");
+      var first = $("#edit-metadata .wizard--progress li:first-child");
+      var last = $("#edit-metadata .wizard--progress li:last-child");
+      var firstIndex= first && $(first[0]).data("step");
+      var tabIndex = activeTab && $(activeTab[0]).data("step");
+      var lastIndex = last && $(last[0]).data("step");
 
-    function getPrevTab(){
-        var activeTab = $("ul#md_tabs li.active");
-        if (activeTab && activeTab[0].id === 'second') {
-            var prevTab = $("ul#md_tabs li#first");
-            if (prevTab && prevTab.children()) {
-                prevTab.children().trigger("click");
-            }
-        }
-        if (activeTab && activeTab[0].id === 'last') {
-            var prevTab = $("ul#md_tabs li#second");
-            if (prevTab && prevTab.children()) {
-                prevTab.children().trigger("click");
+      // buttons visibility
+      $('#layer_metadata_update #btn_back_dwn').toggle(firstIndex !== tabIndex);
+      $('#layer_metadata_update #btn_next_dwn').toggle(lastIndex !== tabIndex);
+
+      // wizard
+      if (tabIndex >= 0) {
+        var first;
+        for (var i = 0; i < lastIndex; i++) {
+          var nextTab = $("#edit-metadata .wizard--progress li[data-step=" + (i) + "]");
+          if (nextTab) {
+            if(i < tabIndex) {
+              nextTab.toggleClass('is-complete', true);
+            } else {
+              nextTab.toggleClass('is-complete', false);
             }
+          }
         }
+      }
+    }
+    function getPrevTab(){
+      var activeTab = $("#edit-metadata .wizard--progress li.is-active");
+      var tabIndex = activeTab && $(activeTab[0]).data("step");
+      if (tabIndex >= 0) {
+          var nextTab = $("#edit-metadata .wizard--progress li[data-step=" + (tabIndex - 1) + "]");
+          if (nextTab) {
+            activeTab.toggleClass('is-active');
+            nextTab.tab('show');
+            nextTab.toggleClass('is-active');
+          }
+      }
+      updateWizard();
     };
 
     function getNextTab(){
-        var activeTab = $("ul#md_tabs li.active");
-        if (activeTab && activeTab[0].id === 'first') {
-            var nextTab = $("ul#md_tabs li#second");
-            if (nextTab && nextTab.children()) {
-                nextTab.children().trigger("click");
-            }
-        }
-        if (activeTab && activeTab[0].id === 'second') {
-            var nextTab = $("ul#md_tabs li#last");
-            if (nextTab && nextTab.children()) {
-                nextTab.children().trigger("click");
+        var activeTab = $("#edit-metadata .wizard--progress li.is-active");
+        var tabIndex = activeTab && $(activeTab[0]).data("step");
+        if (tabIndex >= 0) {
+            var nextTab = $("#edit-metadata .wizard--progress li[data-step=" + (tabIndex + 1) + "]");
+            if (nextTab) {
+                activeTab.toggleClass('is-active');
+                nextTab.tab('show');
+                nextTab.toggleClass('is-active');
             }
         }
+        updateWizard();
     };
 
     $(document).ready(
@@ -68,7 +90,7 @@
 
           $('#id_resource-date_picker').datetimepicker(pickerOptions);
           $('#id_resource-temporal_extent_start_picker').datetimepicker(pickerOptions);
-          $('#id_resource-temporal_extent_end_picker').datetimepicker(pickerOptions);          
+          $('#id_resource-temporal_extent_end_picker').datetimepicker(pickerOptions);
         });
 
     $(document).ready(function() {
@@ -83,7 +105,7 @@
                 $(this).popover({'trigger':'hover'});
             });
         });
-    
+
     $(document).ready(function() {
         var prevNum = 0, totalNum = 0;
         var empty = 0;
@@ -92,7 +114,7 @@
             if(this.id.indexOf("autocomplete") < 0 && this.type !== 'radio'  && this.type !== 'button') {
                 prevNum++;
             }
-            
+
             $(this).change(function(e){
                 if(e.target.value.trim() === ''){
                     if(!$(e.target).hasClass("input-empty")){
@@ -134,7 +156,7 @@
             if(this.id.indexOf("autocomplete") < 0 && this.type !== 'radio'  && this.type !== 'button') {
                 prevNum++;
             }
-            
+
             $(this).change(function(e){
                 if(e.target.value.trim() === ''){
                     if(!$(e.target).hasClass("input-empty")){
@@ -154,7 +176,7 @@
                     $(e.target).removeClass("input-empty");
                     $(e.target).parent().find(".mandatory-warning").remove();
                 }
-                
+
                 if(totalNum == prevNum) {
                     try {
                         $('#liquidPieChart').waterbubble({
@@ -173,7 +195,13 @@
                 totalNum++;
             }
         });
-        
+
+        $(".wizard--progress li").click(function(){
+          $(this).tab('show');
+          $(".wizard--progress li.is-active").toggleClass('is-active', false);
+          $(this).toggleClass('is-active', true);
+          updateWizard();
+        });
         $('#btn_back_up').click(function(){getPrevTab()});
         $('#btn_back_dwn').click(function(){getPrevTab()});
 
@@ -183,15 +211,25 @@
         $('#btn_upd_md_up').click(function(){$('#preview_pleaseWaitDialog').modal();});
         $('#btn_upd_md_dwn').click(function(){$('#preview_pleaseWaitDialog').modal();});
 
-        $('#preview_tab').click(function(){
+        $('#preview_tab').on('show.bs.tab', function(){
             $('#preview_pleaseWaitDialog').modal();
             try {
                 $('#preview_encoder_iframe')[0].style.width='0';
                 $('#preview_encoder_iframe')[0].style.height='0';
                 $('#layer_metadata_update').submit();
+
+                // buttons visibility
+                $('#layer_metadata_update #btn_back_dwn').hide();
+                $('#layer_metadata_update #btn_next_dwn').hide();
+                $('#layer_metadata_update #btn_upd_md_dwn').hide();
             } catch(err) {
                 // Log error
-            }            
+            }
+        });
+        $('#metadata_edit_tab').on('show.bs.tab', function(){
+          // buttons visibility
+          $('#layer_metadata_update #btn_upd_md_dwn').show();
+          updateWizard();
         });
 
         $('#layer_metadata_update').submit(function(e){
@@ -244,7 +282,7 @@
                     //TODO: This seems a horribly inelegant way of doing this in 12 Lines
                     kws = $('#id_resource-keywords').tokenfield('getTokens');
                     newToken = $data.text
-                    exists = false 
+                    exists = false
                     for (kw in kws) {
                         if (kws[kw]['value'].indexOf(newToken) >=0) {
                             exists = true
@@ -255,7 +293,7 @@
                     }
                 }
             });*/
-            
+
             data = JSON.parse(data)
             var kws = [];
             for (kw in data) {