Refactoring "attachment" tables to use the API

- Part attachments
- StockItem attachments
- PurchaseOrder attachments
- SalesOrder attachments
- BuildOrder attachments

InvenTree/InvenTree/urls.py

@@ -103,6 +103,7 @@ settings_urls = [
 # Some javascript files are served 'dynamically', allowing them to pass through the Django translation layer
 dynamic_javascript_urls = [
     url(r'^api.js', DynamicJsView.as_view(template_name='js/api.js'), name='api.js'),
+    url(r'^attachment.js', DynamicJsView.as_view(template_name='js/attachment.js'), name='attachment.js'),
     url(r'^forms.js', DynamicJsView.as_view(template_name='js/forms.js'), name='forms.js'),
     url(r'^model_renderers.js', DynamicJsView.as_view(template_name='js/model_renderers.js'), name='model_renderers.js'),
     url(r'^modals.js', DynamicJsView.as_view(template_name='js/modals.js'), name='modals.js'),

InvenTree/build/templates/build/attachments.html

@@ -47,37 +47,38 @@ $('#new-attachment').click(function() {
             }
         },
         method: 'POST',
-        reload: true,
+        onSuccess: reloadAttachmentTable,
         title: '{% trans "Add Attachment" %}',
     });
 });
 
-// Callback for editing an attachment
-$("#attachment-table").on('click', '.attachment-edit-button', function() {
-    var pk = $(this).attr('pk');
-
-    constructForm(`/api/build/attachment/${pk}/`, {
-        fields: {
-            attachment: {},
-            comment: {},
+loadAttachmentTable(
+    '{% url "api-build-attachment-list" %}',
+    {
+        filters: {
+            build: {{ build.pk }},
         },
-        reload: true,
-        title: '{% trans "Edit Attachment" %}',
-    });
-});
+        onEdit: function(pk) {
+            var url = `/api/build/attachment/${pk}/`;
 
-// Callback for deleting an attachment
-$("#attachment-table").on('click', '.attachment-delete-button', function() {
-    var pk = $(this).attr('pk');
+            constructForm(url, {
+                fields: {
+                    comment: {},
+                },
+                onSuccess: reloadAttachmentTable,
+                title: '{% trans "Edit Attachment" %}',
+            });
+        },
+        onDelete: function(pk) {
 
-    constructForm(`/api/build/attachment/${pk}/`, {
-        method: 'DELETE',
-        confirmMessage: '{% trans "Confirm Delete Operation" %}',
-        title: '{% trans "Delete Attachment" %}',
-        reload: true,
-    });
-});
-
-$("#attachment-table").inventreeTable({});
+            constructForm(`/api/build/attachment/${pk}/`, {
+                method: 'DELETE',
+                confirmMessage: '{% trans "Confirm Delete Operation" %}',
+                title: '{% trans "Delete Attachment" %}',
+                onSuccess: reloadAttachmentTable,
+            });
+        }
+    }
+);
 
 {% endblock %}

InvenTree/order/templates/order/po_attachments.html

@@ -34,6 +34,35 @@ enableDragAndDrop(
     }
 );
 
+loadAttachmentTable(
+    '{% url "api-po-attachment-list" %}',
+    {
+        filters: {
+            order: {{ order.pk }},
+        },
+        onEdit: function(pk) {
+            var url = `/api/order/po/attachment/${pk}/`;
+
+            constructForm(url, {
+                fields: {
+                    comment: {},
+                },
+                onSuccess: reloadAttachmentTable,
+                title: '{% trans "Edit Attachment" %}',
+            });
+        },
+        onDelete: function(pk) {
+
+            constructForm(`/api/order/po/attachment/${pk}/`, {
+                method: 'DELETE',
+                confirmMessage: '{% trans "Confirm Delete Operation" %}',
+                title: '{% trans "Delete Attachment" %}',
+                onSuccess: reloadAttachmentTable,
+            });
+        }
+    }
+);
+
 $("#new-attachment").click(function() {
 
     constructForm('{% url "api-po-attachment-list" %}', {
@@ -51,37 +80,4 @@ $("#new-attachment").click(function() {
     });
 });
 
-$("#attachment-table").on('click', '.attachment-edit-button', function() {
-    var button = $(this);
-
-    var pk = button.attr('pk');
-
-    var url = `/api/order/po/attachment/${pk}/`;
-
-    constructForm(url, {
-        fields: {
-            attachment: {},
-            comment: {},
-        },
-        reload: true,
-        title: '{% trans "Edit Attachment" %}',
-    });
-});
-
-$("#attachment-table").on('click', '.attachment-delete-button', function() {
-    var button = $(this);
-
-    var pk = button.attr('pk');
-
-    constructForm(`/api/order/po/attachment/${pk}/`, {
-        method: 'DELETE',
-        confirmMessage: '{% trans "Confirm Delete Operation" %}',
-        title: '{% trans "Delete Attachment" %}',
-        reload: true,
-    });
-});
-
-$("#attachment-table").inventreeTable({
-});
-
 {% endblock %}

InvenTree/order/templates/order/so_attachments.html

@@ -35,6 +35,36 @@ enableDragAndDrop(
     }
 );
 
+loadAttachmentTable(
+    '{% url "api-so-attachment-list" %}',
+    {
+        filters: {
+            order: {{ order.pk }},
+        },
+        onEdit: function(pk) {
+            var url = `/api/order/so/attachment/${pk}/`;
+
+            constructForm(url, {
+                fields: {
+                    comment: {},
+                },
+                onSuccess: reloadAttachmentTable,
+                title: '{% trans "Edit Attachment" %}',
+            });
+        },
+        onDelete: function(pk) {
+            var pk = button.attr('pk');
+
+            constructForm(`/api/order/so/attachment/${pk}/`, {
+                method: 'DELETE',
+                confirmMessage: '{% trans "Confirm Delete Operation" %}',
+                title: '{% trans "Delete Attachment" %}',
+                onSuccess: reloadAttachmentTable,
+            });
+        }
+    }
+);
+
 $("#new-attachment").click(function() {
 
     constructForm('{% url "api-so-attachment-list" %}', {
@@ -47,42 +77,9 @@ $("#new-attachment").click(function() {
                 hidden: true
             }
         },
-        reload: true,
+        onSuccess: reloadAttachmentTable,
         title: '{% trans "Add Attachment" %}'
     });
 });
 
-$("#attachment-table").on('click', '.attachment-edit-button', function() {
-    var button = $(this);
-
-    var pk = button.attr('pk');
-
-    var url = `/api/order/so/attachment/${pk}/`;
-
-    constructForm(url, {
-        fields: {
-            attachment: {},
-            comment: {},
-        },
-        reload: true,
-        title: '{% trans "Edit Attachment" %}',
-    });
-});
-
-$("#attachment-table").on('click', '.attachment-delete-button', function() {
-    var button = $(this);
-
-    var pk = button.attr('pk');
-
-    constructForm(`/api/order/so/attachment/${pk}/`, {
-        method: 'DELETE',
-        confirmMessage: '{% trans "Confirm Delete Operation" %}',
-        title: '{% trans "Delete Attachment" %}',
-        reload: true,
-    });
-});
-
-$("#attachment-table").inventreeTable({
-});
-
 {% endblock %}

InvenTree/part/templates/part/attachments.html

@@ -19,6 +19,36 @@
 {% block js_ready %}
 {{ block.super }}
 
+    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" %}',
@@ -28,7 +58,7 @@
             },
             label: 'attachment',
             success: function(data, status, xhr) {
-                location.reload();
+                reloadAttachmentTable();
             }
         }
     );
@@ -47,43 +77,10 @@
                         hidden: true,
                     }
                 },
-                reload: true,
+                onSuccess: reloadAttachmentTable,
                 title: '{% trans "Add Attachment" %}',
             }
         )
     });
 
-    $("#attachment-table").on('click', '.attachment-edit-button', function() {
-        var button = $(this);
-
-        var pk = button.attr('pk');
-
-        var url = `/api/part/attachment/${pk}/`;
-
-        constructForm(url, {
-            fields: {
-                attachment: {},
-                comment: {},
-            },
-            title: '{% trans "Edit Attachment" %}',
-            reload: true,
-        });
-    });
-
-    $("#attachment-table").on('click', '.attachment-delete-button', function() {
-        var button = $(this);
-        var pk = button.attr('pk');
-        var url = `/api/part/attachment/${pk}/`;
-
-        constructForm(url, {
-            method: 'DELETE',
-            confirmMessage: '{% trans "Confirm Delete Operation" %}',
-            title: '{% trans "Delete Attachment" %}',
-            reload: true,
-        });
-    });
-
-    $("#attachment-table").inventreeTable({
-    });
-
 {% endblock %}

InvenTree/stock/templates/stock/item_attachments.html

@@ -28,11 +28,41 @@ enableDragAndDrop(
             },
             label: 'attachment',
             success: function(data, status, xhr) {
-                location.reload();
+                reloadAttachmentTable();
             }
         }
     );
 
+loadAttachmentTable(
+    '{% url "api-stock-attachment-list" %}',
+    {
+        filters: {
+            item: {{ item.pk }},
+        },
+        onEdit: function(pk) {
+            var url = `/api/stock/attachment/${pk}/`;
+
+            constructForm(url, {
+                fields: {
+                    comment: {},
+                },
+                title: '{% trans "Edit Attachment" %}',
+                onSuccess: reloadAttachmentTable 
+            });
+        },
+        onDelete: function(pk) {
+            var url = `/api/stock/attachment/${pk}/`;
+
+            constructForm(url, {
+                method: 'DELETE',
+                confirmMessage: '{% trans "Confirm Delete Operation" %}',
+                title: '{% trans "Delete Attachment" %}',
+                onSuccess: reloadAttachmentTable,
+            });
+        }
+    }
+);
+
 $("#new-attachment").click(function() {
 
     constructForm(
@@ -53,39 +83,4 @@ $("#new-attachment").click(function() {
     );
 });
 
-$("#attachment-table").on('click', '.attachment-edit-button', function() {
-    var button = $(this);
-
-    var pk = button.attr('pk');
-
-    var url = `/api/stock/attachment/${pk}/`;
-
-    constructForm(url, {
-        fields: {
-            attachment: {},
-            comment: {},
-        },
-        title: '{% trans "Edit Attachment" %}',
-        reload: true 
-    });
-});
-
-$("#attachment-table").on('click', '.attachment-delete-button', function() {
-    var button = $(this);
-
-    var pk = button.attr('pk');
-
-    var url = `/api/stock/attachment/${pk}/`;
-
-    constructForm(url, {
-        method: 'DELETE',
-        confirmMessage: '{% trans "Confirm Delete Operation" %}',
-        title: '{% trans "Delete Attachment" %}',
-        reload: true,
-    });
-});
-
-$("#attachment-table").inventreeTable({
-});
-
 {% endblock %}

InvenTree/templates/attachment_table.html

@@ -10,35 +10,6 @@
 
 <div class='dropzone' id='attachment-dropzone'>
 <table class='table table-striped table-condensed' data-toolbar='#attachment-buttons' id='attachment-table'>
-    <thead>
-        <tr>
-            <th data-field='file' data-sortable='true' data-searchable='true'>{% trans "File" %}</th>
-            <th data-field='comment' data-sortable='true' data-searchable='true'>{% trans "Comment" %}</th>
-            <th data-field='user' data-sortable='true' data-searchable='true'>{% trans "Uploaded" %}</th>
-            <th></th>
-        </tr>
-    </thead>
-    <tbody>
-        {% for attachment in attachments %}
-        <tr>
-            <td><a href='/media/{{ attachment.attachment }}'>{{ attachment.basename }}</a></td>
-            <td>{{ attachment.comment }}</td>
-            <td>
-                {% if attachment.upload_date %}{{ attachment.upload_date }}{% endif %}
-                {% if attachment.user %}<span class='badge'>{{ attachment.user.username }}</div>{% endif %}
-            </td>
-            <td>
-                <div class='btn-group' style='float: right;'>    
-                    <button type='button' class='btn btn-default btn-glyph attachment-edit-button' pk="{{ attachment.id }}" data-toggle='tooltip' title='{% trans "Edit attachment" %}'>
-                        <span class='fas fa-edit icon-blue'/>
-                    </button>
-                    <button type='button' class='btn btn-default btn-glyph attachment-delete-button' pk="{{ attachment.id }}" data-toggle='tooltip' title='{% trans "Delete attachment" %}'>
-                        <span class='fas fa-trash-alt icon-red'/>
-                    </button>
-                </div>
-            </td>
-        </tr>
-        {% endfor %}
-    </tbody>
+
 </table>
 </div>

InvenTree/templates/base.html

@@ -149,6 +149,7 @@
 
 <!-- translated -->
 <script type='text/javascript' src="{% i18n_static 'api.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'attachment.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'forms.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'model_renderers.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'barcode.js' %}"></script>

InvenTree/templates/js/attachment.js

@@ -0,0 +1,82 @@
+{% load i18n %}
+
+function reloadAttachmentTable() {
+
+    $('#attachment-table').bootstrapTable("refresh");
+}
+
+
+function loadAttachmentTable(url, options) {
+
+    var table = options.table || '#attachment-table';
+
+    $(table).inventreeTable({
+        url: url,
+        name: options.name || 'attachments',
+        formatNoMatches: function() { return '{% trans "No attachments found" %}'},
+        sortable: true,
+        search: false,
+        queryParams: options.filters || {},
+        onPostBody: function() {
+            // Add callback for 'edit' button
+            $(table).find('.button-attachment-edit').click(function() {
+                var pk = $(this).attr('pk');
+
+                if (options.onEdit) {
+                    options.onEdit(pk);
+                }
+            });
+            
+            // Add callback for 'delete' button
+            $(table).find('.button-attachment-delete').click(function() {
+                var pk = $(this).attr('pk');
+
+                if (options.onDelete) {
+                    options.onDelete(pk);
+                }
+            });
+        },
+        columns: [
+            {
+                field: 'attachment',
+                title: '{% trans "File" %}',
+                formatter: function(value, row) {
+
+                    var split = value.split('/');
+
+                    return renderLink(split[split.length - 1], value);
+                }
+            },
+            {
+                field: 'comment',
+                title: '{% trans "Comment" %}',
+            },
+            {
+                field: 'actions',
+                formatter: function(value, row) {
+                    var html = '';
+
+                    html = `<div class='btn-group float-right' role='group'>`;
+
+                    html += makeIconButton(
+                        'fa-edit icon-blue',
+                        'button-attachment-edit',
+                        row.pk,
+                        '{% trans "Edit attachment" %}',
+                    );
+
+                    html += makeIconButton(
+                        'fa-trash-alt icon-red',
+                        'button-attachment-delete',
+                        row.pk,
+                        '{% trans "Delete attachment" %}',
+                    );
+
+                    html += `</div>`;
+
+                    return html;
+                }
+            }
+        ]
+    });
+}