Closes #3810: Preserve slug value when editing existing objects

docs/release-notes/version-2.7.md

@@ -3,6 +3,7 @@
 ## Enhancements
 
 * [#2511](https://github.com/netbox-community/netbox/issues/2511) - Compare object change to the previous change
+* [#3810](https://github.com/netbox-community/netbox/issues/3810) - Preserve slug value when editing existing objects
 * [#3840](https://github.com/netbox-community/netbox/issues/3840) - Enhance search function when selecting VLANs for interface assignment
 * [#4170](https://github.com/netbox-community/netbox/issues/4170) - Improve color contrast in rack elevation drawings
 

netbox/project-static/js/forms.js

@@ -42,17 +42,23 @@ $(document).ready(function() {
         return s.substring(0, num_chars);           // Trim to first num_chars chars
     }
     var slug_field = $('#id_slug');
-    slug_field.change(function() {
-        $(this).attr('_changed', true);
-    });
     if (slug_field) {
         var slug_source = $('#id_' + slug_field.attr('slug-source'));
         var slug_length = slug_field.attr('maxlength');
+        if (slug_field[0].value) {
+            slug_field.attr('_changed', true);
+        }
+        slug_field.change(function() {
+            $(this).attr('_changed', true);
+        });
         slug_source.on('keyup change', function() {
             if (slug_field && !slug_field.attr('_changed')) {
                 slug_field.val(slugify($(this).val(), (slug_length ? slug_length : 50)));
             }
-        })
+        });
+        $('button.reslugify').click(function() {
+            slug_field.val(slugify(slug_source.val(), (slug_length ? slug_length : 50)));
+        });
     }
 
     // Bulk edit nullification

netbox/utilities/forms.py

@@ -132,6 +132,13 @@ class SmallTextarea(forms.Textarea):
     pass
 
 
+class SlugWidget(forms.TextInput):
+    """
+    Subclass TextInput and add a slug regeneration button next to the form field.
+    """
+    template_name = 'widgets/sluginput.html'
+
+
 class ColorSelect(forms.Select):
     """
     Extends the built-in Select widget to colorize each <option>.
@@ -534,7 +541,8 @@ class SlugField(forms.SlugField):
     def __init__(self, slug_source='name', *args, **kwargs):
         label = kwargs.pop('label', "Slug")
         help_text = kwargs.pop('help_text', "URL-friendly unique shorthand")
-        super().__init__(label=label, help_text=help_text, *args, **kwargs)
+        widget = kwargs.pop('widget', SlugWidget)
+        super().__init__(label=label, help_text=help_text, widget=widget, *args, **kwargs)
         self.widget.attrs['slug-source'] = slug_source
 
 

netbox/utilities/templates/widgets/sluginput.html

@@ -0,0 +1,8 @@
+<div class="input-group">
+    {% include "django/forms/widgets/input.html" %}
+    <span class="input-group-btn">
+        <button class="btn btn-default reslugify" type="button" title="Regenerate slug">
+            <i class="fa fa-refresh"></i>
+        </button>
+    </span>
+</div>