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>

4 files changed, 138 insertions, 2 deletions

diff --git a/gn2/wqflask/__init__.py b/gn2/wqflask/__init__.py
index 8e96228d..325a1cef 100644
--- a/gn2/wqflask/__init__.py
+++ b/gn2/wqflask/__init__.py
@@ -21,6 +21,7 @@ from gn3.authentication import DataRole, AdminRole
 from gn2.wqflask.group_manager import group_management
 from gn2.wqflask.resource_manager import resource_management
 from gn2.wqflask.metadata_edits import metadata_edit
+from gn2.wqflask.edit import metadata
 
 from gn2.wqflask.api.markdown import glossary_blueprint
 from gn2.wqflask.api.markdown import references_blueprint
@@ -89,6 +90,8 @@ app.register_blueprint(jupyter_notebooks, url_prefix="/jupyter_notebooks")
 
 app.register_blueprint(resource_management, url_prefix="/resource-management")
 app.register_blueprint(metadata_edit, url_prefix="/datasets/")
+app.register_blueprint(metadata,
+                       url_prefix="/metadata/")
 app.register_blueprint(group_management, url_prefix="/group-management")
 app.register_blueprint(jobs_bp, url_prefix="/jobs")
 app.register_blueprint(oauth2, url_prefix="/oauth2")
diff --git a/gn2/wqflask/edit.py b/gn2/wqflask/edit.py
new file mode 100644
index 00000000..8d176608
--- /dev/null
+++ b/gn2/wqflask/edit.py
@@ -0,0 +1,48 @@
+import requests
+
+from pathlib import Path
+
+from flask import (Blueprint,
+                   redirect,
+                   render_template,
+                   request)
+
+from gn2.wqflask.decorators import login_required
+from gn2.utility.tools import GN3_LOCAL_URL
+
+
+metadata = Blueprint("metadata", __name__)
+
+
+@metadata.route("/edit")
+@login_required(pagename="Dataset Metadata Editing")
+def metadata_edit():
+    match request.args.get("type"):
+        case "dcat:Dataset":
+            metadata = requests.get(
+                Path(
+                    GN3_LOCAL_URL,
+                    "metadata/datasets/",
+                    (_name := request.args.get("name"))
+                ).as_posix()
+            ).json()
+            __section = request.args.get("section")
+            return render_template(
+                "metadata/editor.html",
+                name=_name,
+                metadata=metadata,
+                section=__section,
+                edit=metadata.get(__section),
+            )
+
+
+@metadata.route("/save", methods=["POST"])
+@login_required(pagename="Dataset Metadata Editing")
+def save():
+    __content = request.form.get("editor")
+    __summary = request.form.get("summary")
+    __type = request.form.get("type")
+    match __type:
+        case "dcat:Dataset":
+            # XXX: TODO: Method for saving data
+            return redirect(f"/datasets/{request.form.get('label')}")
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 %}
+