Move "attachments" and "notes" to "Part Detail" page

(cherry picked from commit daf0a082dc04c04cfd68cab70148a7d7cf28460f)

InvenTree/InvenTree/static/css/inventree.css

@@ -837,6 +837,12 @@ input[type="submit"] {
     pointer-events: none; /* Prevent this div from blocking links underneath */
 }
 
+.notes {
+    border-radius: 5px;
+    background-color: #fafafa;
+    padding: 5px;
+}
+
 .alert {
     display: none;
     border-radius: 5px;
@@ -853,6 +859,11 @@ input[type="submit"] {
     margin-right: 2px;
 }
 
+.btn-small {
+    padding: 3px;
+    padding-left: 5px;
+}
+
 .btn-remove {
     padding: 3px;
     padding-left: 5px;

InvenTree/part/templates/part/detail.html

@@ -1,6 +1,7 @@
 {% extends "part/part_base.html" %}
 {% load static %}
 {% load i18n %}
+{% load markdownify %}
 
 
 {% block menubar %}
@@ -135,11 +136,38 @@
         {% endif %}
         {% if part.responsible %}
         <tr>
-            <td><span class='fas fa-user'>d</span></td>
+            <td><span class='fas fa-user'></span></td>
             <td><strong>{% trans "Responsible User" %}</strong></td>
             <td>{{ part.responsible }}</td> 
         </tr>
         {% endif %}
+
+        <tr><td colspan="3"></td></tr>
+
+        <tr>
+            <td><span class='fas fa-sticky-note'></span></td>
+            <td>
+                <strong>{% trans "Notes" %}</strong>
+            </td>
+            <td>
+                <div class='btn-group float-right'>
+                    <button type='button' id='edit-notes' title='{% trans "Edit Notes" %}' class='btn btn-small btn-default'>
+                        <span class='fas fa-edit'>      
+                        </span>
+                    </button>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td colspan='3'>
+                {% if part.notes %}
+                <div class='notes'>
+                    {{ part.notes | markdownify }}
+                </div>
+                {% endif %}
+            </td>
+        </tr>
+
     </table>
     </div>
     <div class='col-sm-6'>
@@ -240,11 +268,11 @@
 
 {% block post_content_panel %}
 
-<div class='panel panel-default panel-inventree'>
+<div class='row'>
+    <div class='col-sm-6'>
+        <div class='panel panel-default panel-inventree'>
             <div class='panel-heading'>
-        <h4>
+                <h4>{% trans "Parameters" %}</h4>
-            {% trans "Part Parameters" %}
-        </h4>
             </div>
             <div class='panel-content'>
                 <div id='param-button-toolbar'>
@@ -258,6 +286,18 @@
                 </div>
                 <table id='parameter-table' class='table table-condensed table-striped' data-toolbar="#param-button-toolbar"></table>
             </div>
+        </div>
+    </div>
+    <div class='col-sm-6'>
+        <div class='panel panel-default panel-inventree'>
+            <div class='panel-heading'>
+                <h4>{% trans "Attachments" %}</h4>
+            </div>
+            <div class='panel-content'>
+                {% include "attachment_table.html" %}
+            </div>
+        </div>
+    </div>
 </div>
 
 {% endblock %}
@@ -269,6 +309,18 @@
 {% block js_ready %}
     {{ block.super }}
 
+    $('#edit-notes').click(function() {
+        constructForm('{% url "api-part-detail" part.pk %}', {
+            fields: {
+                notes: {
+                    multiline: true,
+                }
+            },
+            title: '{% trans "Edit Part Notes" %}',
+            reload: true,
+        });
+    });
+
     $(".slidey").change(function() {
         var field = $(this).attr('fieldname');
 
@@ -337,4 +389,68 @@
         });
     });
 
+    loadAttachmentTable(
+        '{% url "api-part-attachment-list" %}',
+        {
+            filters: {
+                part: {{ part.pk }},
+            },
+            onEdit: function(pk) {
+                var url = `/api/part/attachment/${pk}/`;
+
+                constructForm(url, {
+                    fields: {
+                        comment: {},
+                    },
+                    title: '{% trans "Edit Attachment" %}',
+                    onSuccess: reloadAttachmentTable,
+                });
+            },
+            onDelete: function(pk) {
+                var url = `/api/part/attachment/${pk}/`;
+
+                constructForm(url, {
+                    method: 'DELETE',
+                    confirmMessage: '{% trans "Confirm Delete Operation" %}',
+                    title: '{% trans "Delete Attachment" %}',
+                    onSuccess: reloadAttachmentTable,
+                });
+            }
+        }
+    );
+
+    enableDragAndDrop(
+        '#attachment-dropzone',
+        '{% url "api-part-attachment-list" %}',
+        {
+            data: {
+                part: {{ part.id }},
+            },
+            label: 'attachment',
+            success: function(data, status, xhr) {
+                reloadAttachmentTable();
+            }
+        }
+    );
+
+    $("#new-attachment").click(function() {
+
+        constructForm(
+            '{% url "api-part-attachment-list" %}',
+            {
+                method: 'POST',
+                fields: {
+                    attachment: {},
+                    comment: {},
+                    part: {
+                        value: {{ part.pk }},
+                        hidden: true,
+                    }
+                },
+                onSuccess: reloadAttachmentTable,
+                title: '{% trans "Add Attachment" %}',
+            }
+        )
+    });
+
 {% endblock %}

InvenTree/templates/js/forms.js

@@ -353,12 +353,16 @@ function constructFormBody(fields, options) {
             // Override existing query filters (if provided!)
             fields[field].filters = Object.assign(fields[field].filters || {}, field_options.filters);
 
+            // TODO: Refactor the following code with Object.assign (see above)
+
             // Secondary modal options
             fields[field].secondary = field_options.secondary;
 
             // Edit callback
             fields[field].onEdit = field_options.onEdit;
 
+            fields[field].multiline = field_options.multiline;
+
             // Custom help_text
             if (field_options.help_text) {
                 fields[field].help_text = field_options.help_text;
@@ -1483,7 +1487,11 @@ function constructInputOptions(name, classes, type, parameters) {
         opts.push(`placeholder='${parameters.placeholder}'`);
     }
 
+    if (parameters.multiline) {
+        return `<textarea ${opts.join(' ')}></textarea>`;
+    } else {
         return `<input ${opts.join(' ')}>`;
+    }
 }