From b9dda51378a037c61500efcdc44193ee3d9be8d4 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Sat, 1 Feb 2020 14:40:11 +1100
Subject: [PATCH] Side-by-side live editing for markdown

---
 InvenTree/InvenTree/settings.py               |  5 ++++
 InvenTree/InvenTree/static/css/inventree.css  | 23 +++++++++++++++++++
 .../part/templates/markdownx/widget.html      | 10 ++++++++
 InvenTree/part/templates/part/notes.html      | 19 ++++++++++++---
 4 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 InvenTree/part/templates/markdownx/widget.html

diff --git a/InvenTree/InvenTree/settings.py b/InvenTree/InvenTree/settings.py
index 67ac2b89d1..7c136744e1 100644
--- a/InvenTree/InvenTree/settings.py
+++ b/InvenTree/InvenTree/settings.py
@@ -17,6 +17,8 @@ import logging
 import tempfile
 import yaml
 
+from datetime import datetime
+
 from django.utils.translation import gettext_lazy as _
 
 
@@ -163,6 +165,9 @@ REST_FRAMEWORK = {
 
 WSGI_APPLICATION = 'InvenTree.wsgi.application'
 
+# Markdown configuration
+MARKDOWNX_MEDIA_PATH = datetime.now().strftime('markdownx/%Y/%m/%d')
+
 DATABASES = {}
 
 """
diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index 579803410b..227b910755 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -5,6 +5,29 @@
     --basic-color: #333;
 }
 
+.markdownx .row {
+    margin: 5px;
+    padding: 5px;
+    border: 1px solid #cce;
+    border-radius: 4px;
+}
+
+.markdownx-editor {
+    width: 100%;
+    border: 1px solid #cce;
+    border-radius: 3px;
+    padding: 10px;
+}
+
+.panel-content {
+    padding: 10px;
+}
+
+.markdownx-preview {
+    border: 1px solid #cce;
+    border-radius: 3px;
+    padding: 10px;
+}
 
 .qr-code {
     max-width: 400px;
diff --git a/InvenTree/part/templates/markdownx/widget.html b/InvenTree/part/templates/markdownx/widget.html
new file mode 100644
index 0000000000..61c8673748
--- /dev/null
+++ b/InvenTree/part/templates/markdownx/widget.html
@@ -0,0 +1,10 @@
+{% load i18n %}
+
+<div class="markdownx row">
+    <div class="markdown col-md-6">
+        {% include 'django/forms/widgets/textarea.html' %}
+    </div>
+    <div class="markdown col-md-6">
+        <div class="markdownx-preview"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/InvenTree/part/templates/part/notes.html b/InvenTree/part/templates/part/notes.html
index 2c50d235c6..4ae6140126 100644
--- a/InvenTree/part/templates/part/notes.html
+++ b/InvenTree/part/templates/part/notes.html
@@ -14,10 +14,11 @@
 
 <form method='POST'>
     {% csrf_token %}
-
+    
     {{ form }}
 
-    <input type="submit" value="Update" />
+    <input type="submit" value='{% trans "Save Notes" %}'/>
+    
 </form>
 
 {{ form.media }}
@@ -25,11 +26,23 @@
 {% else %}
 
 <div class='panel panel-default'>
-    <div class='panel-body'>
+    <div class='panel-heading'>
+        {% trans "Notes" %}
+        <button class='btn btn-default' id='edit-notes'>Edit</button>
+    </div>
+    <div class='panel-content'>
         {{ part.notes | markdownify }}
     </div>
 </div>
 
 {% endif %}
 
+{% endblock %}
+
+{% block js_ready %}
+
+$("#edit-notes").click(function() {
+    location.href = "{% url 'part-notes' part.id %}?edit=1";
+});
+
 {% endblock %}
\ No newline at end of file