Properly handle Collections that specify a custom key, rather than falling back to indexed list (fixes #632)

CHANGELOG.md

@@ -23,6 +23,7 @@
     * Always submit checkboxes that are not checked and force a 0 value [#616](https://github.com/getgrav/grav-plugin-admin/issues/616)
     * Fix encoding in tooltips again [#622](https://github.com/getgrav/grav-plugin-admin/issues/622)
     * Do not show `move` cursor for Collections that aren't sortable [#624](https://github.com/getgrav/grav-plugin-admin/issues/624)
+    * Properly handle Collections that specify a custom key, rather than falling back to indexed list [#632](https://github.com/getgrav/grav-plugin-admin/issues/632)
 
 # v1.1.0-beta.5
 ## 05/23/2016

themes/grav/app/forms/fields/collections.js

@@ -17,6 +17,7 @@ export default class CollectionsField {
 
         list.on('click', '> .collection-actions [data-action="add"]', (event) => this.addItem(event));
         list.on('click', '> ul > li > .item-actions [data-action="delete"]', (event) => this.removeItem(event));
+        list.on('input', '[data-key-observe]', (event) => this.observeKey(event));
 
         list.find('[data-collection-holder]').each((index, container) => {
             container = $(container);
@@ -52,28 +53,43 @@ export default class CollectionsField {
         this.reindex(list);
     }
 
-    reindex(list) {
+    observeKey(event) {
-        list = $(list).closest('[data-type="collection"]');
+        let input = $(event.target);
+        let value = input.val();
+        let item = input.closest('[data-collection-key]');
 
-        let items = list.find('> ul > [data-collection-item]');
+        item.data('collection-key-backup', item.data('collection-key')).data('collection-key', value);
+        this.reindex(null, item);
+    }
+
+    reindex(list, items) {
+        items = items || $(list).closest('[data-type="collection"]').find('> ul > [data-collection-item]');
 
         items.each((index, item) => {
             item = $(item);
-            item.attr('data-collection-key', index);
+            let observed = item.find('[data-key-observe]');
+            let hasCustomKey = observed.length;
+            let currentKey = item.data('collection-key-backup');
+
+            item.attr('data-collection-key', hasCustomKey ? observed.val() : index);
 
             ['name', 'data-grav-field-name', 'for', 'id'].forEach((prop) => {
                 item.find('[' + prop + ']').each(function() {
                     let element = $(this);
                     let indexes = [];
+                    let regexps = [
+                        new RegExp('\\[(\\d+|\\*|' + currentKey + ')\\]', 'g'),
+                        new RegExp('\\.(\\d+|\\*|' + currentKey + ')\\.', 'g')
+                    ];
 
                     element.parents('[data-collection-key]').map((idx, parent) => indexes.push($(parent).attr('data-collection-key')));
                     indexes.reverse();
 
-                    let replaced = element.attr(prop).replace(/\[(\d+|\*)\]/g, (/* str, p1, offset */) => {
+                    let replaced = element.attr(prop).replace(regexps[0], (/* str, p1, offset */) => {
-                        return `[${indexes.shift()}]`;
+                        return `[${indexes.shift() || currentKey}]`;
                     });
 
-                    replaced = replaced.replace(/\.(\d+|\*)\./g, (/* str, p1, offset */) => {
+                    replaced = replaced.replace(regexps[1], (/* str, p1, offset */) => {
                         return `.${indexes.shift()}.`;
                     });
 

themes/grav/templates/forms/fields/key/key.html.twig

@@ -5,7 +5,7 @@
         <input
                 type="text"
                 value="{{ value|e('html_attr')|join(', ') }}"
-                data-list-key="{{ scope|fieldName }}"
+                data-key-observe="{{ (scope ~ field.name)|fieldName }}"
                 {% block input_attributes %}
                     {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
                     {% if field.id is defined %}id="{{ field.id|e }}" {% endif %}