Refactor attachment tables

InvenTree/build/templates/build/detail.html

@@ -431,53 +431,17 @@ enableDragAndDrop(
     }
 );
 
-// Callback for creating a new attachment
+loadAttachmentTable('{% url "api-build-attachment-list" %}', {
-$('#new-attachment').click(function() {
+    filters: {
-
+        build: {{ build.pk }},
-    constructForm('{% url "api-build-attachment-list" %}', {
+    },
-        fields: {
+    fields: {
-            attachment: {},
+        build: {
-            comment: {},
+            value: {{ build.pk }},
-            build: {
+            hidden: true,
-                value: {{ build.pk }},
-                hidden: true,
-            }
-        },
-        method: 'POST',
-        onSuccess: reloadAttachmentTable,
-        title: '{% trans "Add Attachment" %}',
-    });
-});
-
-loadAttachmentTable(
-    '{% url "api-build-attachment-list" %}',
-    {
-        filters: {
-            build: {{ build.pk }},
-        },
-        onEdit: function(pk) {
-            var url = `/api/build/attachment/${pk}/`;
-
-            constructForm(url, {
-                fields: {
-                    filename: {},
-                    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" %}',
-                onSuccess: reloadAttachmentTable,
-            });
         }
     }
-);
+});
 
 $('#edit-notes').click(function() {
     constructForm('{% url "api-build-detail" build.pk %}', {

InvenTree/order/templates/order/purchase_order_detail.html

@@ -124,51 +124,16 @@
         }
     );
 
-    loadAttachmentTable(
+    loadAttachmentTable('{% url "api-po-attachment-list" %}', {
-        '{% url "api-po-attachment-list" %}',
+        filters: {
-        {
+            order: {{ order.pk }},
-            filters: {
+        },
-                order: {{ order.pk }},
+        fields: {
-            },
+            order: {
-            onEdit: function(pk) {
+                value: {{ order.pk }},
-                var url = `/api/order/po/attachment/${pk}/`;
+                hidden: true,
-
-                constructForm(url, {
-                    fields: {
-                        filename: {},
-                        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" %}', {
-            method: 'POST',
-            fields: {
-                attachment: {},
-                comment: {},
-                order: {
-                    value: {{ order.pk }},
-                    hidden: true,
-                },
-            },
-            reload: true,
-            title: '{% trans "Add Attachment" %}',
-        });
     });
 
     loadStockTable($("#stock-table"), {

InvenTree/order/templates/order/sales_order_detail.html

@@ -110,55 +110,21 @@
             },
             label: 'attachment',
             success: function(data, status, xhr) {
-                location.reload();
+                reloadAttachmentTable();
             }
         }
     );
 
-    loadAttachmentTable(
+    loadAttachmentTable('{% url "api-so-attachment-list" %}', {
-        '{% url "api-so-attachment-list" %}',
+        filters: {
-        {
+            order: {{ order.pk }},
-            filters: {
+        },
-                order: {{ order.pk }},
+        fields: {
+            order: {
+                value: {{ order.pk }},
+                hidden: true,
             },
-            onEdit: function(pk) {
-                var url = `/api/order/so/attachment/${pk}/`;
-
-                constructForm(url, {
-                    fields: {
-                        filename: {},
-                        comment: {},
-                    },
-                    onSuccess: reloadAttachmentTable,
-                    title: '{% trans "Edit Attachment" %}',
-                });
-            },
-            onDelete: function(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" %}', {
-            method: 'POST',
-            fields: {
-                attachment: {},
-                comment: {},
-                order: {
-                    value: {{ order.pk }},
-                    hidden: true
-                }
-            },
-            onSuccess: reloadAttachmentTable,
-            title: '{% trans "Add Attachment" %}'
-        });
     });
 
     loadBuildTable($("#builds-table"), {

InvenTree/part/templates/part/detail.html

@@ -999,36 +999,17 @@
     });
 
     onPanelLoad("part-attachments", function() {
-        loadAttachmentTable(
+        loadAttachmentTable('{% url "api-part-attachment-list" %}', {
-            '{% url "api-part-attachment-list" %}',
+            filters: {
-            {
+                part: {{ part.pk }},
-                filters: {
+            },
-                    part: {{ part.pk }},
+            fields: {
-                },
+                part: {
-                onEdit: function(pk) {
+                    value: {{ part.pk }},
-                    var url = `/api/part/attachment/${pk}/`;
+                    hidden: true
-    
-                    constructForm(url, {
-                        fields: {
-                            filename: {},
-                            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',
@@ -1043,26 +1024,6 @@
                 }
             }
         );
-    
-        $("#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" %}',
-                }
-            )
-        });
     });
 
 

InvenTree/stock/templates/stock/item.html

@@ -221,55 +221,16 @@
             }
         );
 
-    loadAttachmentTable(
+    loadAttachmentTable('{% url "api-stock-attachment-list" %}', {
-        '{% url "api-stock-attachment-list" %}',
+        filters: {
-        {
+            stock_item: {{ item.pk }},
-            filters: {
+        },
-                stock_item: {{ item.pk }},
+        fields: {
-            },
+            stock_item: {
-            onEdit: function(pk) {
+                value: {{ item.pk }},
-                var url = `/api/stock/attachment/${pk}/`;
+                hidden: true,
-
-                constructForm(url, {
-                    fields: {
-                        filename: {},
-                        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(
-            '{% url "api-stock-attachment-list" %}',
-            {
-                method: 'POST',
-                fields: {
-                    attachment: {},
-                    comment: {},
-                    stock_item: {
-                        value: {{ item.pk }},
-                        hidden: true,
-                    },
-                },
-                reload: true,
-                title: '{% trans "Add Attachment" %}',
-            }
-        );
     });
 
     loadStockTestResultsTable(

InvenTree/templates/attachment_button.html

@@ -1,5 +1,8 @@
 {% load i18n %}
 
+<button type='button' class='btn btn-outline-success' id='new-attachment-link'>
+    <span class='fas fa-link'></span> {% trans "Add Link" %}
+</button>
 <button type='button' class='btn btn-success' id='new-attachment'>
     <span class='fas fa-plus-circle'></span> {% trans "Add Attachment" %}
 </button>

InvenTree/templates/js/translated/attachment.js

@@ -6,10 +6,57 @@
 */
 
 /* exported
+    addAttachmentButtonCallbacks,
     loadAttachmentTable,
     reloadAttachmentTable,
 */
 
+
+/*
+ * Add callbacks to buttons for creating new attachments.
+ * 
+ * Note: Attachments can also be external links!
+ */
+function addAttachmentButtonCallbacks(url, fields={}) {
+
+    // Callback for 'new attachment' button
+    $('#new-attachment').click(function() {
+
+        var file_fields = {
+            attachment: {},
+            comment: {},
+        };
+
+        Object.assign(file_fields, fields);
+
+        constructForm(url, {
+            fields: file_fields,
+            method: 'POST',
+            onSuccess: reloadAttachmentTable,
+            title: '{% trans "Add Attachment" %}',
+        });
+    });
+
+    // Callback for 'new link' button
+    $('#new-attachment-link').click(function() {
+
+        var link_fields = {
+            link: {},
+            comment: {},
+        };
+
+        Object.assign(link_fields, fields);
+        
+        constructForm(url, {
+            fields: link_fields,
+            method: 'POST',
+            onSuccess: reloadAttachmentTable,
+            title: '{% trans "Add Link" %}',
+        });
+    });
+}
+
+
 function reloadAttachmentTable() {
 
     $('#attachment-table').bootstrapTable('refresh');
@@ -20,6 +67,8 @@ function loadAttachmentTable(url, options) {
 
     var table = options.table || '#attachment-table';
 
+    addAttachmentButtonCallbacks(url, options.fields || {});
+
     $(table).inventreeTable({
         url: url,
         name: options.name || 'attachments',
@@ -34,56 +83,70 @@ function loadAttachmentTable(url, options) {
             $(table).find('.button-attachment-edit').click(function() {
                 var pk = $(this).attr('pk');
 
-                if (options.onEdit) {
+                constructForm(`${url}${pk}/`, {
-                    options.onEdit(pk);
+                    fields: {
-                }
+                        link: {},
+                        comment: {}, 
+                    },
+                    onSuccess: reloadAttachmentTable,
+                    title: '{% trans "Edit Attachment" %}',
+                });
             });
             
             // Add callback for 'delete' button
             $(table).find('.button-attachment-delete').click(function() {
                 var pk = $(this).attr('pk');
 
-                if (options.onDelete) {
+                constructForm(`${url}${pk}/`, {
-                    options.onDelete(pk);
+                    method: 'DELETE',
-                }
+                    confirmMessage: '{% trans "Confirm Delete" %}',
+                    title: '{% trans "Delete Attachment" %}',
+                    onSuccess: reloadAttachmentTable,
+                });
             });
         },
         columns: [
             {
                 field: 'attachment',
-                title: '{% trans "File" %}',
+                title: '{% trans "Attachment" %}',
-                formatter: function(value) {
+                formatter: function(value, row) {
 
-                    var icon = 'fa-file-alt';
+                    if (row.attachment) {
+                        var icon = 'fa-file-alt';
 
-                    var fn = value.toLowerCase();
+                        var fn = value.toLowerCase();
 
-                    if (fn.endsWith('.csv')) {
+                        if (fn.endsWith('.csv')) {
-                        icon = 'fa-file-csv';
+                            icon = 'fa-file-csv';
-                    } else if (fn.endsWith('.pdf')) {
+                        } else if (fn.endsWith('.pdf')) {
-                        icon = 'fa-file-pdf';
+                            icon = 'fa-file-pdf';
-                    } else if (fn.endsWith('.xls') || fn.endsWith('.xlsx')) {
+                        } else if (fn.endsWith('.xls') || fn.endsWith('.xlsx')) {
-                        icon = 'fa-file-excel';
+                            icon = 'fa-file-excel';
-                    } else if (fn.endsWith('.doc') || fn.endsWith('.docx')) {
+                        } else if (fn.endsWith('.doc') || fn.endsWith('.docx')) {
-                        icon = 'fa-file-word';
+                            icon = 'fa-file-word';
-                    } else if (fn.endsWith('.zip') || fn.endsWith('.7z')) {
+                        } else if (fn.endsWith('.zip') || fn.endsWith('.7z')) {
-                        icon = 'fa-file-archive';
+                            icon = 'fa-file-archive';
+                        } else {
+                            var images = ['.png', '.jpg', '.bmp', '.gif', '.svg', '.tif'];
+
+                            images.forEach(function(suffix) {
+                                if (fn.endsWith(suffix)) {
+                                    icon = 'fa-file-image';
+                                }
+                            });
+                        }
+
+                        var split = value.split('/');
+                        var filename = split[split.length - 1];
+
+                        var html = `<span class='fas ${icon}'></span> ${filename}`;
+
+                        return renderLink(html, value);
+                    } else if (row.link) {
+                        return renderLink(row.link, row.link);
                     } else {
-                        var images = ['.png', '.jpg', '.bmp', '.gif', '.svg', '.tif'];
+                        return '-';
-
-                        images.forEach(function(suffix) {
-                            if (fn.endsWith(suffix)) {
-                                icon = 'fa-file-image';
-                            }
-                        });
                     }
-
-                    var split = value.split('/');
-                    var filename = split[split.length - 1];
-
-                    var html = `<span class='fas ${icon}'></span> ${filename}`;
-
-                    return renderLink(html, value);
                 }
             },
             {