Provided the same treatment to the role and group forms

asset-bundles.json

@@ -2,7 +2,42 @@
     "bundle": {
         "js/pages/group": {
             "scripts": [
-                "uf-tweaks/js/pages/group.js"
+                "uf-tweaks/js/pages/group.js",
+                "uf-tweaks/js/widgets/groups.js",
+                "uf-tweaks/js/slug-override.js"
+            ],
+            "options": {
+                "sprinkle": {
+                    "onCollision": "merge"
+                }
+            }
+        },
+        "js/pages/groups": {
+            "scripts": [
+                "uf-tweaks/js/widgets/groups.js",
+                "uf-tweaks/js/slug-override.js"
+            ],
+            "options": {
+                "sprinkle": {
+                    "onCollision": "merge"
+                }
+            }
+        },
+        "js/pages/role": {
+            "scripts": [
+                "uf-tweaks/js/widgets/roles.js",
+                "uf-tweaks/js/slug-override.js"
+            ],
+            "options": {
+                "sprinkle": {
+                    "onCollision": "merge"
+                }
+            }
+        },
+        "js/pages/roles": {
+            "scripts": [
+                "uf-tweaks/js/widgets/roles.js",
+                "uf-tweaks/js/slug-override.js"
             ],
             "options": {
                 "sprinkle": {

assets/uf-tweaks/js/slug-override.js

@@ -0,0 +1,20 @@
+
+function slugOverride(form, button_id) {
+    // Auto-generate slug
+    form.find('input[name=name]').on('input change', function() {
+        var manualSlug = form.find(button_id).prop('checked');
+        if (!manualSlug) {
+            var slug = getSlug($(this).val());
+            form.find('input[name=slug]').val(slug);
+        }
+    });
+
+    form.find(button_id).on('change', function() {
+        if ($(this).prop('checked')) {
+            form.find('input[name=slug]').prop('readonly', false);
+        } else {
+            form.find('input[name=slug]').prop('readonly', true);
+            form.find('input[name=name]').trigger('change');
+        }
+    });
+}

assets/uf-tweaks/js/widgets/groups.js

@@ -0,0 +1,64 @@
+/**
+ * Groups widget.  Sets up dropdowns, modals, etc for a table of groups.
+ *
+ * This script depends on slug-override.js
+ *
+ */
+
+/**
+ * Override the admin "attachGroupForm" method for the sake of an element id override
+ */
+function attachGroupForm() {
+    $("body").on('renderSuccess.ufModal', function (data) {
+        var modal = $(this).ufModal('getModal');
+        var form = modal.find('.js-form');
+
+
+        /**
+         * Set up modal widgets
+         */
+        // Set up any widgets inside the modal
+        form.find(".js-select2").select2({
+            width: '100%'
+        });
+
+        // Auto-generate slug
+        slugOverride(form, '#input-group-slug-override');
+
+        // Fontawesome-iconpicker
+        // Starcraft icons
+        var sc_icons = [{
+                title: "sc sc-terran",
+                searchTerms: ['starcraft', 'terran']
+            },
+            {
+                title: "sc sc-zerg",
+                searchTerms: ['starcraft', 'zerg']
+            }, {
+                title: "sc sc-protoss",
+                searchTerms: ['starcraft', 'protoss']
+            },
+        ]
+
+        $('.icp-auto').iconpicker({
+            // this is a hacky way to add in our custom icons to the default FA5 icons.
+            // See https://github.com/farbelous/fontawesome-iconpicker/issues/77
+            icons: typeof sc_icons != 'undefined' ? $.merge(sc_icons, $.iconpicker.defaultOptions.icons) : null,
+        });
+
+        // Set icon when changed
+        form.find('input[name=icon]').on('input change', function() {
+            $(this).prev(".icon-preview").find("i").removeClass().addClass($(this).val());
+        });
+
+        $('.icp-auto').iconpicker();
+
+        // Set up the form for submission
+        form.ufForm({
+            validator: page.validators
+        }).on("submitSuccess.ufForm", function() {
+            // Reload page on success
+            window.location.reload();
+        });
+    });
+}

assets/uf-tweaks/js/widgets/roles.js

@@ -0,0 +1,29 @@
+/**
+ * Roles widget.  Sets up dropdowns, modals, etc for a table of roles.
+ *
+ * This script depends on slug-override.js
+ *
+ */
+
+/**
+ * Override the admin "attachRoleForm" method for the sake of an element id override
+ */
+function attachRoleForm() {
+    $("body").on('renderSuccess.ufModal', function (data) {
+        var modal = $(this).ufModal('getModal');
+        var form = modal.find('.js-form');
+
+        /**
+         * Set up modal widgets
+         */
+        slugOverride(form, '#input-role-slug-override');
+
+        // Set up the form for submission
+        form.ufForm({
+            validator: page.validators
+        }).on("submitSuccess.ufForm", function() {
+            // Reload page on success
+            window.location.reload();
+        });
+    });
+}

locale/en_US/messages.php

@@ -0,0 +1,12 @@
+<?php
+
+/*
+ * AVSDev UF Tweaks (https://avsdev.uk)
+ *
+ * @link      https://git.avsdev.uk/avsdev/sprinkle-uf-tweaks
+ * @license   https://git.avsdev.uk/avsdev/sprinkle-uf-tweaks/blob/master/LICENSE.md (LGPL-3.0 License)
+ */
+
+return [
+  'ICON' => 'Icon',
+];

templates/forms/group.html.twig

@@ -0,0 +1,11 @@
+{% extends "@admin/forms/group.html.twig" %}
+
+{% block group_form %}
+    {% include "forms/partials/input-group-name.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+    {% include "forms/partials/input-group-slug.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+    {% include "forms/partials/input-group-icon.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+    {% include "forms/partials/input-group-description.html.twig" with { 'col_width': 'col-sm-12' } %}
+{% endblock %}

templates/forms/partials/abstract/input-description.html.twig

@@ -0,0 +1,8 @@
+{% if 'description' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="form-group">
+            <label for="input-{{type}}-description" class="control-label">{{field_name | default(translate('DESCRIPTION'))}}</label>
+            <textarea id="input-{{type}}-description" class="form-control" type="text" name="description" {% if 'description' in form.fields.disabled %}disabled{% endif %} rows=6>{{current_value}}</textarea>
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}

templates/forms/partials/abstract/input-icon.html.twig

@@ -0,0 +1,11 @@
+{% if 'icon' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="form-group iconpicker-container">
+            <label for="input-{{type}}-icon" class="control-label">{{field_name | default(translate("ICON"))}}</label>
+            <div class="input-group">
+                <span class="input-group-addon icon-preview"><i class="{{current_value}} fa-fw"></i></span>
+                <input type="text" id="input-{{type}}-icon" class="form-control icp icp-auto" name="icon" autocomplete="off" value="{{current_value}}" placeholder="{{ placeholder | default(translate('ICON')) }}" {% if 'icon' in form.fields.disabled %}disabled{% endif %}>
+            </div>
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}

templates/forms/partials/abstract/input-name.html.twig

@@ -0,0 +1,11 @@
+{% if 'name' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="form-group">
+            <label for="input-{{type}}-name" class="control-label">{{field_name | default(translate('NAME'))}}</label>
+            <div class="input-group">
+                <span class="input-group-addon"><i class="fas fa-edit fa-fw"></i></span>
+                <input type="text" id="input-{{type}}-name" class="form-control" name="name" autocomplete="off" value="{{current_value}}" placeholder="{{ placeholder | default(translate('NAME')) }}" {% if 'name' in form.fields.disabled %}disabled{% endif %}>
+            </div>
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}

templates/forms/partials/abstract/input-slug.html.twig

@@ -0,0 +1,18 @@
+{% if 'description' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="form-group">
+            <label for="input-{{type}}-slug" class="control-label">{{field_name | default(translate('SLUG'))}}</label>
+            <div class="input-group">
+                <span class="input-group-addon"><i class="fas fa-tag fa-fw"></i></span>
+                <input type="text" id="input-{{type}}-slug" class="form-control" name="slug" autocomplete="off" value="{{current_value}}" placeholder="{{placeholder | default(translate('SLUG'))}}" {% if 'slug' in form.fields.disabled %}disabled{% endif %} readonly>
+                {% if 'slug' not in form.fields.disabled %}
+                    <span class="input-group-btn" data-toggle="buttons">
+                        <label class="btn btn-primary">
+                            <input type="checkbox" id="input-{{type}}-slug-override" autocomplete="off"> {{translate("OVERRIDE")}}
+                        </label>
+                    </span>
+                {% endif %}
+            </div>
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}

templates/forms/partials/input-group-description.html.twig

@@ -0,0 +1,9 @@
+{% block input_group_description %}
+{% include "forms/partials/abstract/input-description.html.twig" with
+    {
+        "type" : "group",
+        "current_value" : group.description,
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-group-icon.html.twig

@@ -0,0 +1,11 @@
+{% block input_group_icon %}
+{% include "forms/partials/abstract/input-icon.html.twig" with
+    {
+        "type" : "group",
+        "current_value" : group.icon,
+        "field_name" : translate('GROUP.ICON'),
+        "placeholder" : translate('GROUP.ICON_EXPLAIN'),
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-group-name.html.twig

@@ -0,0 +1,11 @@
+{% block input_group_name %}
+{% include "forms/partials/abstract/input-name.html.twig" with
+    {
+        "type" : "group",
+        "current_value" : group.name,
+        "field_name" : translate('GROUP.NAME'),
+        "placeholder" : translate('GROUP.NAME_EXPLAIN'),
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-group-slug.html.twig

@@ -0,0 +1,9 @@
+{% block input_group_slug %}
+{% include "forms/partials/abstract/input-slug.html.twig" with
+    {
+        "type" : "group",
+        "current_value" : group.slug,
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-role-description.html.twig

@@ -0,0 +1,9 @@
+{% block input_role_description %}
+{% include "forms/partials/abstract/input-description.html.twig" with
+    {
+        "type" : "role",
+        "current_value" : role.description,
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-role-name.html.twig

@@ -0,0 +1,10 @@
+{% block input_role_name %}
+{% include "forms/partials/abstract/input-name.html.twig" with
+    {
+        "type" : "role",
+        "current_value" : role.name,
+        "placeholder" : translate('ROLE.NAME_EXPLAIN'),
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-role-slug.html.twig

@@ -0,0 +1,9 @@
+{% block input_role_slug %}
+{% include "forms/partials/abstract/input-slug.html.twig" with
+    {
+        "type" : "role",
+        "current_value" : role.slug,
+        "col_width" : col_width
+    }
+%}
+{% endblock %}

templates/forms/partials/input-user-name.html.twig

@@ -0,0 +1,10 @@
+{% block input_user_name %}
+{% if 'name' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="row">
+            {% include "forms/partials/input-user-first_name.html.twig" with { 'col_width': 'col-sm-6' } %}
+            {% include "forms/partials/input-user-last_name.html.twig" with { 'col_width': 'col-sm-6' } %}
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}
+{% endblock %}

templates/forms/role.html.twig

@@ -0,0 +1,26 @@
+<form class="js-form" method="{{form.method | default('POST')}}" action="{{site.uri.public}}/{{form.action}}">
+    {% include "forms/csrf.html.twig" %}
+    <div class="js-form-alerts">
+    </div>
+    <div class="row">
+        {% block role_form %}
+            {% include "forms/partials/input-role-name.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+            {% include "forms/partials/input-role-slug.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+            {% include "forms/partials/input-role-description.html.twig" with { 'col_width': 'col-sm-12' } %}
+        {% endblock %}
+    </div><br>
+    <div class="row">
+        <div class="col-xs-8 col-sm-4">
+            <button type="submit" class="btn btn-block btn-lg btn-success">{{form.submit_text}}</button>
+        </div>
+        <div class="col-xs-4 col-sm-4 pull-right">
+            <button type="button" class="btn btn-block btn-lg btn-link" data-dismiss="modal">{{translate("CANCEL")}}</button>
+        </div>
+    </div>
+</form>
+<!-- Include validation rules -->
+<script>
+{% include "pages/partials/page.js.twig" %}
+</script>