Integrate CKEditor into metadata editing.

* gn2/wqflask/__init__.py: Register blueprint endpoint for metadata
edits.
* gn2/wqflask/edit.py (metadata_edit): New function.
(save): Ditto.
* gn2/wqflask/templates/metadata/dataset.html: New template.
* gn2/wqflask/templates/metadata/editor.html: New template.

Signed-off-by: Munyoki Kilyungi <me@bonfacemunyoki.com>

2 files changed, 87 insertions, 2 deletions

diff --git a/gn2/wqflask/templates/metadata/dataset.html b/gn2/wqflask/templates/metadata/dataset.html
index 23ceb3b5..1946d01a 100644
--- a/gn2/wqflask/templates/metadata/dataset.html
+++ b/gn2/wqflask/templates/metadata/dataset.html
@@ -93,9 +93,17 @@
 	</div>
     </div>
 
-    <div class="container row dataset-metadata">
+    <div id="dataset-description" class="container row dataset-metadata">
 	{% if dataset.description %}
-        <div>{{ dataset.description|safe }}</div>
+	<h3>
+	    Description
+	    <sup>
+		[&nbsp;
+		<a href="/metadata/edit?type=dcat:Dataset&section=description&name={{ dataset.label}}" target="_blank">edit</a>
+		&nbsp;]
+	    </sup>
+	</h3>
+        <div>{{ dataset.description|safe }}</div>g
         {% endif %}
 
 	{% if dataset.experimentType %}
diff --git a/gn2/wqflask/templates/metadata/editor.html b/gn2/wqflask/templates/metadata/editor.html
new file mode 100644
index 00000000..2c026c93
--- /dev/null
+++ b/gn2/wqflask/templates/metadata/editor.html
@@ -0,0 +1,77 @@
+{% extends "base.html" %}
+
+{% block css %}
+<style>
+ .panel {
+     width: 90%;
+     margin: 2em;
+ }
+</style>
+{% endblock %}
+
+{% block content %}
+
+<section class="container">
+    <h1>{{ name }}</h1>
+    <div class="row">
+	<div class="panel-about panel panel-info text-muted">
+	    <div class="panel-heading">
+		<strong>{{ section|capitalize }}</strong>
+	    </div>
+	    <div class="panel-body">
+		<form action="/metadata/save" method="POST">
+		    <input name="type" type="hidden" value="{{ metadata.type }}"/>
+		    <input name="label" type="hidden" value="{{ metadata.label }}"/>
+
+		    {% if metadata.type == "dcat:Dataset" %}
+		    <input name="accession-id" type="hidden" value="{{ metadata.accessionId }}"/>
+		    {% endif %}
+
+		    <textarea name="editor" id="editor">
+{{ edit|safe }}
+		    </textarea>
+		    <br/>
+		    <label for="summary">
+			Edit Summary (Briefly describe your changes)
+		    </label>
+		    <br/>
+		    <textarea cols="80" name="summary" rows="3" autocomplete="on" autocorrection="on" id="summary"></textarea>
+		    <br/>
+		    <input type="submit" class="btn btn-primary" value="Publish changes" />
+		</form>
+	    </div>
+	</div>
+    </div>
+</section>
+{% endblock %}
+
+
+{% block js %}
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='ckeditor/ckeditor.js') }}"></script>
+
+<script>
+ function isWysiwygareaAvailable() {
+     if ( CKEDITOR.revision == ( '%RE' + 'V%' ) ) {
+	 return true;
+     }
+
+     return !!CKEDITOR.plugins.get( 'wysiwygarea' );
+ }
+
+ if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
+     CKEDITOR.tools.enableHtml5Elements( document );
+
+ CKEDITOR.config.height = 250;
+ CKEDITOR.config.width = 'auto';
+
+ let editorElement = CKEDITOR.document.getById( 'editor' );
+ let wysiwygareaAvailable = isWysiwygareaAvailable();
+ if ( wysiwygareaAvailable ) {
+     CKEDITOR.replace( 'editor' );
+ } else {
+     editorElement.setAttribute( 'contenteditable', 'true' );
+     CKEDITOR.inline( 'editor' );
+ }
+</script>
+{% endblock %}
+